Azaion Suite to the web. First commit. Only rough sketches of future components is done.

2026-06-21 19:31:10 +00:00 · 2025-03-18 16:28:15 +02:00
commit 2ab732c6b4
32 changed files with 28735 additions and 0 deletions
@@ -0,0 +1,85 @@
+// src/components/Detection.js
+import React from 'react';
+
+function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) { // Corrected prop name
+    if (!detection || !detection.class) {
+        return null;
+    }
+
+    const { Color: color } = detection.class;
+
+    if (!color) {
+        console.error("Color is undefined for detection class:", detection.class);
+        return null;
+    }
+
+    // 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 resizeHandleSize = 8;
+
+    const resizeHandles = [
+        { position: 'top-left', cursor: 'nwse-resize',  x: -resizeHandleSize, y: -resizeHandleSize, },
+        { position: 'top-right', cursor: 'nesw-resize', x: detection.x2 - detection.x1 , y: -resizeHandleSize,},
+        { position: 'bottom-left', cursor: 'nesw-resize', x: -resizeHandleSize, y: detection.y2 - detection.y1, },
+        { position: 'bottom-right', cursor: 'nwse-resize', x: detection.x2 - detection.x1, y: detection.y2 - detection.y1 , },
+        { position: 'top-middle', cursor: 'ns-resize', x: (detection.x2 - detection.x1) / 2 - resizeHandleSize / 2, y: -resizeHandleSize },
+        { position: 'bottom-middle', cursor: 'ns-resize', x: (detection.x2 - detection.x1) / 2 - resizeHandleSize / 2, y: detection.y2 - detection.y1 },
+        { position: 'left-middle', cursor: 'ew-resize', x: -resizeHandleSize, y: (detection.y2 - detection.y1) / 2 - resizeHandleSize / 2 },
+        { position: 'right-middle', cursor: 'ew-resize', x: detection.x2 - detection.x1, y: (detection.y2 - detection.y1) / 2 - resizeHandleSize / 2 },
+    ];
+
+    const style = {
+        position: 'absolute',
+        left: `${detection.x1}px`,
+        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
+        boxSizing: 'border-box',
+        cursor: isSelected ? 'move' : 'default',
+        pointerEvents: 'auto',
+    };
+
+    if (isSelected) {
+        style.border = `3px solid black`;
+        style.boxShadow = `0 0 4px 2px ${borderColor}`; // Use calculated border color
+    }
+
+    const handleMouseDown = (e) => {
+        e.stopPropagation();
+        onDetectionMouseDown(e); // Corrected prop name
+    };
+
+    const handleResizeMouseDown = (e, position) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onResize(e, position);
+    };
+
+    return (
+        <div style={style} onMouseDown={handleMouseDown}>
+            {isSelected && resizeHandles.map((handle) => (
+                <div
+                    key={handle.position}
+                    style={{
+                        position: 'absolute',
+                        left: `${handle.x}px`,
+                        top: `${handle.y}px`,
+                        width: `${resizeHandleSize}px`,
+                        height: `${resizeHandleSize}px`,
+                        backgroundColor: 'black',
+                        cursor: handle.cursor,
+                        pointerEvents: 'auto',
+                    }}
+                    onMouseDown={(e) => handleResizeMouseDown(e, handle.position)}
+                />
+            ))}
+            <span style={{ color: 'white', fontSize: '12px', position: "absolute", top: "-18px", left: "0px" }}>{detection.class.Name}</span>
+        </div>
+    );
+}
+
+export default Detection;