azaion/ui
1
0
Fork 0
mirror of https://github.com/azaion/ui.git synced 2026-06-21 20:41:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

annotation save fixed

Browse Source
This commit is contained in:
Alex Bezdieniezhnykh
2025-03-20 13:37:07 +02:00
parent 0fa2c0ddd8
commit e18157648c
9 changed files with 686 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Detection.js
+25 -9
View File
@@ -1,7 +1,6 @@
// src/components/Detection.js
import React from 'react';
function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) { // Corrected prop name
function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
if (!detection || !detection.class) {
return null;
}
@@ -14,8 +13,13 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
}
// Use startsWith to correctly handle RGBA and hex colors
const backgroundColor = color.startsWith('rgba') ? color : color.replace('1', '0.4'); // Ensure opacity for background
const borderColor = color.startsWith('rgba') ? color.replace('0.4', '1') : color; // Ensure full opacity for border
const backgroundColor = color.startsWith('rgba')
? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 0.4)')
: color.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/, 'rgba($1, $2, $3, 0.4)');
const borderColor = color.startsWith('rgba')
? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 1)')
: color;
const resizeHandleSize = 8;
@@ -36,21 +40,22 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
top: `${detection.y1}px`,
width: `${detection.x2 - detection.x1}px`,
height: `${detection.y2 - detection.y1}px`,
backgroundColor: backgroundColor, // Use the calculated backgroundColor
border: `2px solid ${borderColor}`, // Use the calculated borderColor
backgroundColor: backgroundColor,
border: `2px solid ${borderColor}`,
boxSizing: 'border-box',
cursor: isSelected ? 'move' : 'default',
pointerEvents: 'auto',
zIndex: isSelected ? 2 : 1,
};
if (isSelected) {
style.border = `3px solid black`;
style.boxShadow = `0 0 4px 2px ${borderColor}`; // Use calculated border color
style.boxShadow = `0 0 4px 2px ${borderColor}`;
}
const handleMouseDown = (e) => {
e.stopPropagation();
onDetectionMouseDown(e); // Corrected prop name
onDetectionMouseDown(e);
};
const handleResizeMouseDown = (e, position) => {
@@ -73,11 +78,22 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
backgroundColor: 'black',
cursor: handle.cursor,
pointerEvents: 'auto',
zIndex: 3,
}}
onMouseDown={(e) => handleResizeMouseDown(e, handle.position)}
/>
))}
<span style={{ color: 'white', fontSize: '12px', position: "absolute", top: "-18px", left: "0px" }}>{detection.class.Name}</span>
<span style={{
color: 'white',
fontSize: '12px',
position: "absolute",
top: "-18px",
left: "0px",
textShadow: '1px 1px 2px black',
pointerEvents: 'none'
}}>
{detection.class.Name}
</span>
</div>
);
}