@deepnoid/canvas 0.1.79 → 0.1.81

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 ---------- */
@@ -160,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.79",
+  "version": "0.1.81",
   "type": "module",
   "license": "MIT",
   "main": "./dist/index.cjs",