@deepnoid/canvas 0.1.84 → 0.1.85

package/dist/react/AnnotationCanvas.d.ts

@@ -22,6 +22,7 @@ export type AnnotationCanvasProps = {
     };
     enableHotkeys?: boolean;
     editable?: boolean;
+    keepCrossOnImageChange?: boolean;
 };
 export interface AnnotationCanvasHandle {
     resetImageSize: () => void;

package/dist/react/AnnotationCanvas.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
+import { useEffect, useRef, useState, forwardRef, useImperativeHandle, } from 'react';
 import { AnnotationEngine } from '../engine/public/annotationEngine';
 import useResizeObserver from './hooks/useResizeObserver';
 import { useDebounce } from './hooks/useDebounce';
@@ -12,7 +12,7 @@ function safeRemove(parent, child) {
         parent.removeChild(child);
     }
 }
-const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, }, ref) => {
+const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, keepCrossOnImageChange = false, }, ref) => {
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange = false } = options || {};
     const { onImageLoadSuccess, onImageLoadError } = events || {};
     const containerRef = useRef(null);
@@ -20,6 +20,7 @@ const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations,
     const pendingAnnotationsRef = useRef(null);
     const imageLoadingRef = useRef(false);
     const engineIdRef = useRef(0);
+    const clientMousePointRef = useRef(null);
     const [, forceRender] = useState(0);
     /* ---------- Resize Observer ---------- */
     useResizeObserver({
@@ -110,6 +111,12 @@ const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations,
                 container.insertBefore(imageCanvas, firstChild);
                 container.insertBefore(annotationsCanvas, firstChild);
                 engine.initImageCanvas(resetOnImageChange);
+                if (keepCrossOnImageChange && clientMousePointRef.current) {
+                    engine.onMouseMove({
+                        clientX: clientMousePointRef.current.x,
+                        clientY: clientMousePointRef.current.y,
+                    });
+                }
                 if (prevEngine) {
                     safeRemove(container, prevEngine.getImageCanvas());
                     safeRemove(container, prevEngine.getAnnotationsCanvas());
@@ -164,10 +171,16 @@ const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations,
     useImperativeHandle(ref, () => ({
         resetImageSize: () => {
             engineRef.current?.initImageCanvas(true);
-        }
+        },
     }));
     /* ---------- Render ---------- */
-    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: '100%', position: 'relative', flex: 1, outline: 'none' }, 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) => {
+    return (_jsx("div", { ref: containerRef, style: { width: '100%', height: '100%', position: 'relative', flex: 1, outline: 'none' }, onWheel: (e) => engineRef.current?.onWheel(e.nativeEvent), onMouseDown: (e) => engineRef.current?.onMouseDown(e.nativeEvent), onMouseMove: (e) => {
+            clientMousePointRef.current = { x: e.clientX, y: e.clientY };
+            engineRef.current?.onMouseMove(e.nativeEvent);
+        }, onMouseUp: (e) => engineRef.current?.onMouseUp(e.nativeEvent), onMouseLeave: (e) => {
+            clientMousePointRef.current = null;
+            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);
             }

package/dist/react/index.d.ts

@@ -8,5 +8,9 @@ export declare const AnnotationViewer: import("react").ForwardRefExoticComponent
     drawing: Pick<AnnotationCanvasProps["drawing"], "lineSize" | "applyStyle">;
     events: Pick<AnnotationCanvasProps["events"], "onImageLoadSuccess" | "onImageLoadError">;
 } & import("react").RefAttributes<AnnotationCanvasHandle>>;
-export type AnnotationEditorProps = AnnotationCanvasProps;
-export declare const AnnotationEditor: import("react").ForwardRefExoticComponent<AnnotationCanvasProps & import("react").RefAttributes<AnnotationCanvasHandle>>;
+export type AnnotationEditorProps = AnnotationCanvasProps & {
+    keepCrossOnImageChange?: boolean;
+};
+export declare const AnnotationEditor: import("react").ForwardRefExoticComponent<AnnotationCanvasProps & {
+    keepCrossOnImageChange?: boolean;
+} & import("react").RefAttributes<AnnotationCanvasHandle>>;

package/package.json

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