@deepnoid/canvas 0.1.78 → 0.1.80

package/dist/react/AnnotationCanvas.js

@@ -33,6 +33,7 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
         onDelete: () => engineRef.current?.deleteSelected(),
         toggleSelectionOnly: () => engineRef.current?.toggleShowSelectedOnly(),
         onUndoRedo: (isRedo) => engineRef.current?.undoRedo(isRedo),
+        onEscape: () => engineRef.current?.onKeyDown(new KeyboardEvent('keydown', { key: 'Escape' })),
         enabled: enableHotkeys,
     });
     /* ---------- Image / Engine lifecycle ---------- */
@@ -117,7 +118,6 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
                 engineRef.current = engine;
                 imageLoadingRef.current = false;
                 if (pendingAnnotationsRef.current && pendingAnnotationsRef.current.length > 0) {
-                    console.log('Applying pending annotations after image load:', pendingAnnotationsRef.current.length);
                     engine.setAnnotations(pendingAnnotationsRef.current);
                     engine.commitHistory();
                 }
@@ -146,24 +146,12 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
     }, [image, resetOnImageChange]);
     /* ---------- External annotations ---------- */
     useEffect(() => {
-        console.log('External annotations effect:', {
-            imageLoading: imageLoadingRef.current,
-            hasEngine: !!engineRef.current,
-            annotationsLength: annotations.length,
-            pendingLength: pendingAnnotationsRef.current?.length,
-        });
         if (imageLoadingRef.current || !engineRef.current) {
-            console.log('Saving to pending annotations');
             pendingAnnotationsRef.current = annotations;
             return;
         }
         const before = engineRef.current.getAnnotations();
-        console.log('Comparing annotations:', {
-            before: before.length,
-            after: annotations.length,
-        });
         if (JSON.stringify(before) !== JSON.stringify(annotations)) {
-            console.log('Setting new annotations to engine');
             engineRef.current.setAnnotations(annotations);
             engineRef.current.commitHistory();
         }
@@ -173,6 +161,10 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
     useEffect(() => engineRef.current?.setEditable(editable), [editable]);
     useEffect(() => engineRef.current?.setDrawing(drawing), [drawing]);
     /* ---------- Render ---------- */
-    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: '100%', position: 'relative', 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() })) }));
+    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: '100%', position: 'relative', 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(), tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === 'Escape' || e.code === 'Escape') {
+                engineRef.current?.onKeyDown(e.nativeEvent);
+            }
+        }, children: ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() })) }));
 };
 export default AnnotationCanvas;

package/dist/react/hooks/useHotkeys.d.ts

@@ -2,7 +2,8 @@ type Props = {
     onDelete: () => void;
     toggleSelectionOnly: () => void;
     onUndoRedo: (isRedo: boolean) => void;
+    onEscape?: () => void;
     enabled?: boolean;
 };
-export declare function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, enabled }: Props): void;
+export declare function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, onEscape, enabled }: Props): void;
 export {};

package/dist/react/hooks/useHotkeys.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, enabled = false }) {
+export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, onEscape, enabled = false }) {
     useEffect(() => {
         if (!enabled)
             return;
@@ -10,8 +10,10 @@ export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, enabled
                 toggleSelectionOnly();
             if (event.code === 'KeyZ' && (event.metaKey || event.ctrlKey))
                 onUndoRedo(event.shiftKey);
+            if (event.key === 'Escape' || event.code === 'Escape')
+                onEscape?.();
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onDelete, toggleSelectionOnly, onUndoRedo, enabled]);
+    }, [onDelete, toggleSelectionOnly, onUndoRedo, onEscape, enabled]);
 }

package/package.json

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