add shape manipulation (circle only)

alchemy-fr · Jan 15, 2025 · 1b196b4 · 1b196b4
1 parent 18d79ae
commit 1b196b4
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 13 deletions.
diff --git a/databox/client/src/components/Media/Asset/Annotations/AnnotateWrapper.tsx b/databox/client/src/components/Media/Asset/Annotations/AnnotateWrapper.tsx
@@ -105,7 +105,6 @@ export default memo(
                         <canvas
                             ref={canvasRef}
                             style={{
-                                backgroundColor: 'rgba(0, 0, 0, 0.2)',
                                 cursor:
                                     annotate && mode ? 'crosshair' : undefined,
                                 position: 'absolute',

diff --git a/databox/client/src/components/Media/Asset/Annotations/editCanvas.ts b/databox/client/src/components/Media/Asset/Annotations/editCanvas.ts
@@ -19,14 +19,16 @@ export function bindEditCanvas({
     selectedAnnotation,
     onUpdate,
 }: Props): UnregisterFunction {
-    const onMouseDown = (e: MouseEvent) => {
-        const width = canvas.offsetWidth;
-        const height = canvas.offsetHeight;
-        const relativeX = (x: number) => x / width;
-        const relativeY = (y: number) => y / height;
+    const context = canvas.getContext('2d')!;
+    const width = canvas.offsetWidth;
+    const height = canvas.offsetHeight;
+    const relativeX = (x: number) => x / width;
+    const relativeY = (y: number) => y / height;
+
+    const toX = (x: number) => x * width;
+    const toY = (y: number) => y * height;
 
-        const toX = (x: number) => x * width;
-        const toY = (y: number) => y * height;
+    const onMouseDown = (e: MouseEvent) => {
 
         if (selectedAnnotation.current) {
             const annotation = annotations!.find(a => a.id === selectedAnnotation.current)!;
@@ -42,7 +44,6 @@ export function bindEditCanvas({
             });
 
             if (resizeHandler) {
-                const context = canvas.getContext('2d')!;
                 const toX = (x: number) => x * width;
                 const toY = (y: number) => y * height;
 
@@ -97,6 +98,8 @@ export function bindEditCanvas({
             }
         }
 
+        console.log('click');
+
         selectedAnnotation.current = undefined;
 
         for (const annotation of annotations ?? []) {
@@ -111,8 +114,6 @@ export function bindEditCanvas({
                     toY,
                 })
             ) {
-                const context = canvas.getContext('2d')!;
-
                 selectedAnnotation.current = annotation.id;
                 clear();
                 handler.drawAnnotation(
@@ -127,11 +128,32 @@ export function bindEditCanvas({
                 break;
             }
         }
+
+        if (!selectedAnnotation.current) {
+            clear();
+        }
     };
 
+    if (selectedAnnotation.current) {
+        const annotation = annotations?.find(a => a.id === selectedAnnotation.current);
+        clear();
+        if (annotation) {
+            const handler = drawingHandlers[annotation.type]!;
+            handler.drawAnnotation(
+                {
+                    context,
+                    annotation,
+                    toX,
+                    toY,
+                },
+                true
+            );
+        }
+    }
+
     canvas.addEventListener('mousedown', onMouseDown);
 
     return () => {
-        canvas.addEventListener('mousedown', onMouseDown);
+        canvas.removeEventListener('mousedown', onMouseDown);
     };
 }
diff --git a/databox/client/src/components/Media/Asset/Annotations/shapes/CircleAnnotationHandler.ts b/databox/client/src/components/Media/Asset/Annotations/shapes/CircleAnnotationHandler.ts
@@ -178,6 +178,23 @@ export const CircleAnnotationHandler: DrawingHandler = {
                     y: relativeY(y),
                 };
             };
+        } else if (
+            isPointInCircle(
+                x,
+                y,
+                getResizeCircleCoords({
+                    x: toX(annotation.x),
+                    y: toY(annotation.y),
+                    radius: toX(annotation.r),
+                })
+            )
+        ) {
+            return ({annotation, relativeX, x}) => {
+                return {
+                    ...annotation,
+                    r: Math.max(relativeX(x) - annotation.x, relativeX(3)),
+                };
+            };
         }
     },
 };
diff --git a/databox/client/src/components/Media/Asset/Annotations/useAnnotationDraw.ts b/databox/client/src/components/Media/Asset/Annotations/useAnnotationDraw.ts
@@ -38,6 +38,10 @@ export function useAnnotationDraw({
             return;
         }
 
+        if (mode) {
+            selectedAnnotation.current = undefined;
+        }
+
         const canvas = canvasRef.current;
         const context = canvas!.getContext('2d')!;
         const clear = () => {
@@ -227,5 +231,5 @@ export function useAnnotationDraw({
                 onUpdate: annotationsControl.onUpdate,
             });
         }
-    }, [canvasRef, mode, annotationOptions, annotations, page]);
+    }, [canvasRef, mode, annotationOptions, annotationsControl, annotations, page]);
 }