@deepnoid/canvas 0.1.46 → 0.1.48

package/dist/components/AnnotationCanvas/index.d.ts

@@ -20,7 +20,8 @@ export type AnnotationCanvasProps = {
         onImageLoadSuccess?: () => void;
         onImageLoadError?: (error: Error) => void;
     };
+    enableHotkeys?: boolean;
     editable?: boolean;
 };
-declare const AnnotationCanvas: ({ image, coordinates, setCoordinates, options, drawing, events, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
+declare const AnnotationCanvas: ({ image, coordinates, setCoordinates, options, drawing, events, enableHotkeys, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
 export default AnnotationCanvas;

package/dist/components/AnnotationCanvas/index.js

@@ -8,7 +8,7 @@ import { useDebounce } from '../../hooks/useDebounce';
 import { DrawMode } from '../../enum/common';
 import { createHistory } from './_utils/createHistory';
 import { clearCanvasRect, drawCanvas, resolutionCanvas } from '../../utils/canvas';
-const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing, events, editable = false, }) => {
+const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing, events, enableHotkeys = false, editable = false, }) => {
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange, timeout = 10000 } = options;
     const { onImageLoadSuccess, onImageLoadError } = events;
     const canvasRef = useRef(null);
@@ -86,6 +86,6 @@ const AnnotationCanvas = ({ image, coordinates, setCoordinates, options, drawing
         if (canvas)
             redraw(canvas);
     }, [canvasState]);
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onContextMenu: (e) => e.preventDefault(), style: { flex: 1, position: 'relative', cursor: !panZoomEnabled || editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(AnnotationLayer, { canvasState: canvasState, coordinates: displayCoordinates, setCoordinates: setCoordinates, historyRef: historyRef, drawing: drawing, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseLeave, onContextMenu: (e) => e.preventDefault(), style: { flex: 1, position: 'relative', cursor: !panZoomEnabled || editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: canvasRef, style: { position: 'absolute', width: '100%', height: '100%', left: 0, top: 0 } }), _jsx(AnnotationLayer, { canvasState: canvasState, coordinates: displayCoordinates, setCoordinates: setCoordinates, historyRef: historyRef, drawing: drawing, enableHotkeys: enableHotkeys, editable: editable }), ZoomButton && canvasState.initZoom > 0 && (_jsx(ZoomButton, { onClick: initCanvas, children: `${Math.round((canvasState.zoom / canvasState.initZoom) * 100)}%` }))] }) }));
 };
 export default AnnotationCanvas;

package/dist/components/AnnotationLayer/_hooks/useHotkeys.d.ts

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

package/dist/components/AnnotationLayer/_hooks/useHotkeys.js

@@ -1,6 +1,8 @@
 import { useEffect } from 'react';
-export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo }) {
+export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo, enabled = false }) {
     useEffect(() => {
+        if (!enabled)
+            return;
         const handleKeyDown = (event) => {
             if (event.key === 'Delete')
                 onDelete();
@@ -11,5 +13,5 @@ export function useHotkeys({ onDelete, toggleSelectionOnly, onUndoRedo }) {
         };
         window.addEventListener('keydown', handleKeyDown);
         return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [onDelete, toggleSelectionOnly, onUndoRedo]);
+    }, [onDelete, toggleSelectionOnly, onUndoRedo, enabled]);
 }

package/dist/components/AnnotationLayer/index.d.ts

@@ -7,7 +7,8 @@ type Props = {
     setCoordinates?: Dispatch<SetStateAction<Coordinate[] | undefined>>;
     historyRef: RefObject<CoordinateHistory>;
     drawing: AnnotationCanvasDrawing;
+    enableHotkeys?: boolean;
     editable: boolean;
 };
-declare const AnnotationLayer: ({ canvasState, coordinates, setCoordinates: propSetCoordinates, historyRef, drawing, editable, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const AnnotationLayer: ({ canvasState, coordinates, setCoordinates: propSetCoordinates, historyRef, drawing, enableHotkeys, editable, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default AnnotationLayer;

package/dist/components/AnnotationLayer/index.js

@@ -10,7 +10,7 @@ import { INIT_POINT, useMouse } from './_hooks/useMouse';
 import { useCanvasDraw } from './_hooks/useCanvasDraw';
 import { drawCanvas, resolutionCanvas } from '../../utils/canvas';
 const initCanvasState = { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 0, dx: 0, dy: 0, dw: 0, dh: 0 };
-const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSetCoordinates, historyRef, drawing, editable, }) => {
+const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSetCoordinates, historyRef, drawing, enableHotkeys, editable, }) => {
     const { lineSize: drawLineSize, applyStyle, label: drawLabel, mode: selectedDrawMode, color: drawColor } = drawing;
     const canvasRef = useRef(null);
     const canvasStateRef = useRef(initCanvasState);
@@ -75,6 +75,7 @@ const AnnotationLayer = ({ canvasState, coordinates = [], setCoordinates: propSe
             const coordinate = coordinatesRef.current.find((coordinate) => coordinate.selected);
             currentCoordinateRef.current = coordinate || null;
         },
+        enabled: enableHotkeys,
     });
     useEffect(() => {
         if (!isEqualWith(coordinates, coordinatesRef.current, ignoreImageKey)) {

package/dist/utils/common/isEqualWith.js

@@ -40,26 +40,17 @@ export const isEqualWith = (a, b, areValuesEqual) => {
 };
 export const ignoreImageKey = (objValue, othValue) => {
     if (Array.isArray(objValue) && Array.isArray(othValue)) {
-        if (objValue.length !== othValue.length) {
+        if (objValue.length !== othValue.length)
             return false;
-        }
-        for (let i = 0; i < objValue.length; i++) {
-            if (!isEqualWith(objValue[i], othValue[i], ignoreImageKey)) {
-                return false;
-            }
-        }
-        return true;
+        return objValue.every((item, i) => isEqualWith(item, othValue[i], ignoreImageKey));
     }
-    if (typeof objValue === 'object' && typeof othValue === 'object' && objValue !== null && othValue !== null) {
-        const objKeys = Object.keys(objValue);
-        const othKeys = Object.keys(othValue);
-        if (objKeys.length !== othKeys.length) {
-            return false;
-        }
-        for (let key of objKeys) {
-            if (key === 'image') {
+    if (typeof objValue === 'object' && typeof othValue === 'object' && objValue && othValue) {
+        const objKeys = Object.keys(objValue).filter((key) => key !== 'image');
+        const othKeys = Object.keys(othValue).filter((key) => key !== 'image');
+        const allKeys = new Set([...objKeys, ...othKeys]);
+        for (const key of allKeys) {
+            if (key === 'image')
                 continue;
-            }
             if (!isEqualWith(objValue[key], othValue[key], ignoreImageKey)) {
                 return false;
             }

package/package.json

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