@deepnoid/canvas 0.1.82 → 0.1.84

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { AnnotationViewer, AnnotationEditor } from './react';
+export type { AnnotationCanvasHandle } from './react';
 export type { Label, ApplyAnnotationStyle } from './engine/types';
 export type { Rectangle, Annotation } from './engine/annotation/annotationTypes';
 export { DrawMode } from './engine/annotation/annotationTypes';

package/dist/react/AnnotationCanvas.d.ts

@@ -23,5 +23,8 @@ export type AnnotationCanvasProps = {
     enableHotkeys?: boolean;
     editable?: boolean;
 };
-declare const AnnotationCanvas: ({ image, annotations, setAnnotations, options, drawing, events, enableHotkeys, editable, }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;
+export interface AnnotationCanvasHandle {
+    resetImageSize: () => void;
+}
+declare const AnnotationCanvas: import("react").ForwardRefExoticComponent<AnnotationCanvasProps & import("react").RefAttributes<AnnotationCanvasHandle>>;
 export default AnnotationCanvas;

package/dist/react/AnnotationCanvas.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } 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 = ({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, }) => {
+const AnnotationCanvas = forwardRef(({ image, annotations = [], setAnnotations, options, drawing, events, enableHotkeys = true, editable = true, }, ref) => {
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange = false } = options || {};
     const { onImageLoadSuccess, onImageLoadError } = events || {};
     const containerRef = useRef(null);
@@ -160,11 +160,17 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
     useEffect(() => engineRef.current?.setPanZoomEnabled(!!panZoomEnabled), [panZoomEnabled]);
     useEffect(() => engineRef.current?.setEditable(editable), [editable]);
     useEffect(() => engineRef.current?.setDrawing(drawing), [drawing]);
+    /* ---------- Imperative Handle ---------- */
+    useImperativeHandle(ref, () => ({
+        resetImageSize: () => {
+            engineRef.current?.initImageCanvas(true);
+        }
+    }));
     /* ---------- 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(), 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) => 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/index.d.ts

@@ -1,8 +1,12 @@
-import { AnnotationCanvasProps } from './AnnotationCanvas';
+import { AnnotationCanvasProps, AnnotationCanvasHandle } from './AnnotationCanvas';
+export type { AnnotationCanvasHandle };
 export type AnnotationViewerProps = Omit<AnnotationCanvasProps, 'editable' | 'drawing' | 'events'> & {
     drawing: Pick<AnnotationCanvasProps['drawing'], 'lineSize' | 'applyStyle'>;
     events: Pick<AnnotationCanvasProps['events'], 'onImageLoadSuccess' | 'onImageLoadError'>;
 };
-export declare const AnnotationViewer: (props: AnnotationViewerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationViewer: import("react").ForwardRefExoticComponent<Omit<AnnotationCanvasProps, "drawing" | "events" | "editable"> & {
+    drawing: Pick<AnnotationCanvasProps["drawing"], "lineSize" | "applyStyle">;
+    events: Pick<AnnotationCanvasProps["events"], "onImageLoadSuccess" | "onImageLoadError">;
+} & import("react").RefAttributes<AnnotationCanvasHandle>>;
 export type AnnotationEditorProps = AnnotationCanvasProps;
-export declare const AnnotationEditor: (props: AnnotationEditorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationEditor: import("react").ForwardRefExoticComponent<AnnotationCanvasProps & import("react").RefAttributes<AnnotationCanvasHandle>>;

package/dist/react/index.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import AnnotationCanvas from './AnnotationCanvas';
-export const AnnotationViewer = (props) => {
-    return (_jsx(AnnotationCanvas, { ...props, editable: false }));
-};
-export const AnnotationEditor = (props) => {
-    return (_jsx(AnnotationCanvas, { ...props, editable: true }));
-};
+export const AnnotationViewer = forwardRef((props, ref) => {
+    return (_jsx(AnnotationCanvas, { ...props, editable: false, ref: ref }));
+});
+export const AnnotationEditor = forwardRef((props, ref) => {
+    return (_jsx(AnnotationCanvas, { ...props, editable: true, ref: ref }));
+});

package/package.json

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