@deepnoid/canvas 0.1.71 → 0.1.72

package/dist/react/AnnotationCanvas.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { AnnotationEngine } from '../engine/public/annotationEngine';
 import useResizeObserver from './hooks/useResizeObserver';
@@ -8,25 +8,18 @@ import { useHotkeys } from './hooks/useHotkeys';
 const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, }) => {
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange = false } = options || {};
     const { onImageLoadSuccess, onImageLoadError } = events || {};
-    const imageCanvasRef = useRef(null);
-    const annotationsCanvasRef = useRef(null);
+    const containerRef = useRef(null);
     const engineRef = useRef(null);
     const pendingAnnotationsRef = useRef(null);
     const imageLoadingRef = useRef(false);
     const currentImageRef = useRef(image);
     const engineIdRef = useRef(0);
     const [, forceRender] = useState(0);
-    /* ---------- Resize ---------- */
+    /* ---------- Resize Observer ---------- */
     useResizeObserver({
-        ref: imageCanvasRef,
-        onResize: useDebounce((size) => {
-            const engine = engineRef.current;
-            const canvas = engine?.getImageCanvas();
-            if (!engine || !canvas)
-                return;
-            if (canvas.width !== size.width || canvas.height !== size.height) {
-                engine.initImageCanvas(true);
-            }
+        ref: containerRef,
+        onResize: useDebounce(() => {
+            engineRef.current?.initImageCanvas(true);
         }, 150),
     });
     /* ---------- Hotkeys ---------- */
@@ -38,28 +31,44 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
     });
     /* ---------- Image / Engine lifecycle ---------- */
     useEffect(() => {
-        const isImageChanged = currentImageRef.current !== image;
-        const prevImageCanvasState = engineRef.current?.getImageCanvasState();
-        if (isImageChanged) {
-            engineRef.current?.destroy();
-            engineRef.current = null;
-            pendingAnnotationsRef.current = null;
-            currentImageRef.current = image;
-            engineIdRef.current++;
-            setAnnotations?.([]);
-        }
+        if (!containerRef.current)
+            return;
+        const prevEngine = engineRef.current;
         imageLoadingRef.current = true;
         if (!image?.trim()) {
-            engineRef.current?.destroy();
+            if (prevEngine) {
+                prevEngine.destroy();
+                containerRef.current.removeChild(prevEngine.getImageCanvas());
+                containerRef.current.removeChild(prevEngine.getAnnotationsCanvas());
+            }
             engineRef.current = null;
+            pendingAnnotationsRef.current = null;
             imageLoadingRef.current = false;
+            currentImageRef.current = '';
             return;
         }
+        const newEngineId = engineIdRef.current + 1;
+        engineIdRef.current = newEngineId;
         let cancelled = false;
         const img = new Image();
         img.onload = () => {
-            if (cancelled || !imageCanvasRef.current || !annotationsCanvasRef.current)
+            if (cancelled || !containerRef.current)
                 return;
+            const imageCanvas = document.createElement('canvas');
+            const annotationsCanvas = document.createElement('canvas');
+            imageCanvas.style.position = 'absolute';
+            imageCanvas.style.width = '100%';
+            imageCanvas.style.height = '100%';
+            annotationsCanvas.style.position = 'absolute';
+            annotationsCanvas.style.width = '100%';
+            annotationsCanvas.style.height = '100%';
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const dpr = window.devicePixelRatio || 1;
+            imageCanvas.width = containerRect.width * dpr;
+            imageCanvas.height = containerRect.height * dpr;
+            annotationsCanvas.width = containerRect.width * dpr;
+            annotationsCanvas.height = containerRect.height * dpr;
+            const prevImageCanvasState = prevEngine?.getImageCanvasState();
             const imageCanvasState = !resetOnImageChange && prevImageCanvasState
                 ? prevImageCanvasState
                 : {
@@ -74,52 +83,61 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
                     dh: img.height,
                     initZoom: 1,
                 };
-            const initialAnnotations = pendingAnnotationsRef.current ?? [];
-            const currentEngineId = engineIdRef.current;
-            pendingAnnotationsRef.current = null;
-            engineRef.current = new AnnotationEngine({
-                imageCanvas: imageCanvasRef.current,
+            const engine = new AnnotationEngine({
+                imageCanvas,
+                annotationsCanvas,
                 image: img,
                 imageCanvasState,
-                annotationsCanvas: annotationsCanvasRef.current,
-                annotations: initialAnnotations,
+                annotations: pendingAnnotationsRef.current ?? [],
                 setAnnotations: (next) => {
-                    if (engineIdRef.current === currentEngineId) {
+                    if (engineIdRef.current === newEngineId)
                         setAnnotations?.(next);
-                    }
                 },
                 drawing,
                 editable,
+                enableHotkeys,
                 panZoomEnabled,
                 zoom,
-                enableHotkeys,
                 onChange: () => forceRender((v) => v + 1),
             });
-            engineRef.current.initImageCanvas(resetOnImageChange);
-            imageLoadingRef.current = false;
-            onImageLoadSuccess?.();
+            requestAnimationFrame(() => {
+                containerRef.current.appendChild(imageCanvas);
+                containerRef.current.appendChild(annotationsCanvas);
+                engine.initImageCanvas(resetOnImageChange);
+                if (prevEngine) {
+                    prevEngine.destroy();
+                    containerRef.current.removeChild(prevEngine.getImageCanvas());
+                    containerRef.current.removeChild(prevEngine.getAnnotationsCanvas());
+                }
+                engineRef.current = engine;
+                pendingAnnotationsRef.current = null;
+                imageLoadingRef.current = false;
+                currentImageRef.current = image;
+                onImageLoadSuccess?.();
+            });
         };
         img.onerror = () => {
-            if (cancelled)
+            if (!containerRef.current)
                 return;
-            pendingAnnotationsRef.current = null;
-            engineRef.current?.destroy();
+            if (prevEngine) {
+                prevEngine.destroy();
+                containerRef.current.removeChild(prevEngine.getImageCanvas());
+                containerRef.current.removeChild(prevEngine.getAnnotationsCanvas());
+            }
             engineRef.current = null;
+            pendingAnnotationsRef.current = null;
             imageLoadingRef.current = false;
+            currentImageRef.current = '';
             onImageLoadError?.(new Error(`Failed to load image: ${image}`));
         };
         img.src = image;
         return () => {
             cancelled = true;
-            img.onload = null;
-            img.onerror = null;
         };
     }, [image, resetOnImageChange]);
     /* ---------- External annotations ---------- */
     useEffect(() => {
-        if (!annotations)
-            return;
-        if (imageLoadingRef.current || !engineRef.current) {
+        if (!annotations || imageLoadingRef.current || !engineRef.current) {
             pendingAnnotationsRef.current = annotations;
             return;
         }
@@ -130,20 +148,10 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
         }
     }, [annotations]);
     /* ---------- Options sync ---------- */
-    useEffect(() => {
-        engineRef.current?.setPanZoomEnabled(!!panZoomEnabled);
-    }, [panZoomEnabled]);
-    useEffect(() => {
-        engineRef.current?.setEditable(editable);
-    }, [editable]);
-    useEffect(() => {
-        engineRef.current?.setDrawing(drawing);
-    }, [drawing]);
+    useEffect(() => engineRef.current?.setPanZoomEnabled(!!panZoomEnabled), [panZoomEnabled]);
+    useEffect(() => engineRef.current?.setEditable(editable), [editable]);
+    useEffect(() => engineRef.current?.setDrawing(drawing), [drawing]);
     /* ---------- Render ---------- */
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: (e) => engineRef.current?.onWheel?.(e.nativeEvent), onMouseDown: (e) => engineRef.current?.onMouseDown?.(e.nativeEvent), onMouseMove: (e) => engineRef.current?.onMouseMove?.(e.nativeEvent), onMouseUp: (e) => engineRef.current?.onMouseUp?.(e.nativeEvent), onMouseLeave: (e) => engineRef.current?.onMouseLeave?.(e.nativeEvent), onContextMenu: (e) => e.preventDefault(), style: {
-                flex: 1,
-                position: 'relative',
-                cursor: !panZoomEnabled || editable ? 'default' : 'grab',
-            }, children: [_jsx("canvas", { ref: imageCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), _jsx("canvas", { ref: annotationsCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() }))] }) }));
+    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: '100%', position: 'relative', display: 'flex', flex: 1 }, onWheel: (e) => engineRef.current?.onWheel(e.nativeEvent), onMouseDown: (e) => engineRef.current?.onMouseDown(e.nativeEvent), onMouseMove: (e) => engineRef.current?.onMouseMove(e.nativeEvent), onMouseUp: (e) => engineRef.current?.onMouseUp(e.nativeEvent), onMouseLeave: (e) => engineRef.current?.onMouseLeave(e.nativeEvent), onContextMenu: (e) => e.preventDefault(), children: ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() })) }));
 };
 export default AnnotationCanvas;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepnoid/canvas",
-  "version": "0.1.71",
+  "version": "0.1.72",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",