annotation save fixed

src/components/CanvasEditor.js

@@ -20,6 +20,16 @@ function CanvasEditor({
     const [resizeData, setResizeData] = useState(null);
     const [localDetections, setLocalDetections] = useState(detections || []);
     const [localSelectedIndices, setLocalSelectedIndices] = useState(selectedDetectionIndices || []);
+    const [dimensions, setDimensions] = useState({ width: width || 640, height: height || 480 });
+
+    // Track if we're in a dragging operation
+    const [isDragging, setIsDragging] = useState(false);
+
+    useEffect(() => {
+        if (width && height) {
+            setDimensions({ width, height });
+        }
+    }, [width, height]);
 
     useEffect(() => {
         setLocalDetections(detections || []);
@@ -58,8 +68,9 @@ function CanvasEditor({
                     x: mouseX - localDetections[i].x1,
                     y: mouseY - localDetections[i].y1,
                 });
+                setIsDragging(true);
                 detectionFound = true;
-                break; // Stop the loop once a detection is found
+                break;
             }
         }
 
@@ -82,10 +93,10 @@ function CanvasEditor({
 
         if (localSelectedIndices.length > 0 && mouseDownPos && !resizeData) {
             // Dragging logic
+            setIsDragging(true);
             const newDetections = [...localDetections];
             const firstSelectedIndex = localSelectedIndices[0];
 
-            // Check for valid index before accessing.
             if (firstSelectedIndex === undefined || !newDetections[firstSelectedIndex]) return;
 
             const firstSelectedDetection = newDetections[firstSelectedIndex];
@@ -94,7 +105,6 @@ function CanvasEditor({
             const deltaY = newY1 - firstSelectedDetection.y1;
 
             localSelectedIndices.forEach(index => {
-                // Check for valid index before accessing.
                 if (newDetections[index] === undefined) return;
 
                 const detection = newDetections[index];
@@ -112,17 +122,17 @@ function CanvasEditor({
 
             setLocalDetections(newDetections);
             if (onDetectionsChange) {
-                onDetectionsChange(newDetections); // Notify about changes
+                onDetectionsChange(newDetections);
             }
         } else if (currentDetection && !resizeData) {
-            // Drawing a new detection.
             setCurrentDetection(prev => ({ ...prev, x2: mouseX, y2: mouseY }));
         } else if (resizeData) {
+            setIsDragging(true);
             const { index, position } = resizeData;
             if (localDetections[index] === undefined) return;
 
             const newDetections = [...localDetections];
-            const detection = newDetections[index];
+            const detection = { ...newDetections[index] };
             const updatedDetection = AnnotationService.calculateResizedPosition(mouseX, mouseY, position, detection, containerRef);
             newDetections[index] = updatedDetection;
             setLocalDetections(newDetections);
@@ -132,13 +142,27 @@ function CanvasEditor({
         }
     };
 
-    const handleMouseUp = () => {
+    const handleMouseUp = (e) => {
+        // If we're dragging (or resizing), stop propagation to prevent other elements from reacting
+        if (isDragging || resizeData) {
+            e.stopPropagation();
+        }
+
         if (currentDetection && mouseDownPos) {
             const dx = Math.abs(currentDetection.x2 - currentDetection.x1);
             const dy = Math.abs(currentDetection.y2 - currentDetection.y1);
 
             if (dx > 5 && dy > 5) {
-                const newDetections = [...localDetections, currentDetection];
+                // Normalize coordinates so x1,y1 is always top-left and x2,y2 is bottom-right
+                const normalizedDetection = {
+                    ...currentDetection,
+                    x1: Math.min(currentDetection.x1, currentDetection.x2),
+                    y1: Math.min(currentDetection.y1, currentDetection.y2),
+                    x2: Math.max(currentDetection.x1, currentDetection.x2),
+                    y2: Math.max(currentDetection.y1, currentDetection.y2),
+                };
+
+                const newDetections = [...localDetections, normalizedDetection];
                 setLocalDetections(newDetections);
                 if (onDetectionsChange) {
                     onDetectionsChange(newDetections);
@@ -150,6 +174,7 @@ function CanvasEditor({
         setMouseDownPos(null);
         setDragOffset({ x: 0, y: 0 });
         setResizeData(null);
+        setIsDragging(false);
     };
 
     const handleDetectionMouseDown = (e, index) => {
@@ -172,8 +197,8 @@ function CanvasEditor({
             x: mouseX - localDetections[index].x1,
             y: mouseY - localDetections[index].y1,
         });
-        setMouseDownPos({x: mouseX, y: mouseY})
-
+        setMouseDownPos({x: mouseX, y: mouseY});
+        setIsDragging(true);
     };
 
     const handleResize = (e, index, position) => {
@@ -190,20 +215,44 @@ function CanvasEditor({
                 onSelectionChange && onSelectionChange(newSelectedIndices);
             }
         }
+        setIsDragging(true);
     };
 
+    // Add a document-level mouse move and up handler for dragging outside container
+    useEffect(() => {
+        if (isDragging || resizeData) {
+            const handleDocumentMouseMove = (e) => {
+                handleMouseMove(e);
+            };
+
+            const handleDocumentMouseUp = (e) => {
+                handleMouseUp(e);
+            };
+
+            document.addEventListener('mousemove', handleDocumentMouseMove);
+            document.addEventListener('mouseup', handleDocumentMouseUp);
+
+            return () => {
+                document.removeEventListener('mousemove', handleDocumentMouseMove);
+                document.removeEventListener('mouseup', handleDocumentMouseUp);
+            };
+        }
+    }, [isDragging, resizeData, mouseDownPos]);
+
     return (
         <div
             style={{
-                position: 'relative',
-                width: `${width}px`,
-                height: `${height}px`,
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                top: 0,
+                left: 0,
                 pointerEvents: 'auto',
             }}
         >
             <div ref={containerRef}
                  style={{
-                     position: 'relative',
+                     position: 'absolute',
                      width: '100%',
                      height: '100%',
                      pointerEvents: 'auto',