@deepnoid/canvas 0.1.59 → 0.1.61

package/README.md

@@ -12,6 +12,7 @@ Canvas 기반 이미지 annotation 라이브러리로, **TypeScript Engine + Rea
 ## 주요 기능
 
 - ✏️ Rectangle annotation 그리기/편집
+- 👁️ Viewer 모드 지원 (읽기 전용)
 - 🔍 Pan & Zoom 지원
 - ↩️ Undo/Redo 기능
 - ⌨️ 단축키 지원
@@ -82,6 +83,30 @@ Viewer 모드로 annotation을 읽기 전용으로 표시합니다.
 | `events`        | `Pick<AnnotationCanvasEvents, 'onImageLoadSuccess' \| 'onImageLoadError'>` | -        | 이미지 로드 관련 이벤트 핸들러 |
 | `enableHotkeys` | `boolean`                                                                  | -        | 단축키 활성화 여부             |
 
+```jsx
+import { AnnotationViewer } from 'deepnoid-canvas';
+
+function App() {
+  const [annotations] = useState([{ type: 'RECTANGLE', x: 100, y: 100, width: 200, height: 150 }]);
+
+  return (
+    <AnnotationViewer
+      image='https://example.com/image.jpg'
+      annotations={annotations}
+      drawing={{
+        lineSize: 2,
+        applyStyle: (params) => {
+          // 커스텀 스타일 적용
+        },
+      }}
+      options={{
+        panZoomEnabled: true,
+      }}
+    />
+  );
+}
+```
+
 ### Drawing 설정
 
 ```typescript

package/dist/engine/annotation/rectangle/rectangleController.d.ts

@@ -10,6 +10,9 @@ export declare class RectangleController {
     private startMousePoint;
     private rectangleAnchor;
     private needsRedraw;
+    private isDrawingNewRectangle;
+    private hasMoved;
+    private targetIndexOnBegin;
     constructor(engine: AnnotationEngine);
     getRenderState(): {
         mousePoint: PointState;

package/dist/engine/annotation/rectangle/rectangleController.js

@@ -1,10 +1,11 @@
 import { cloneDeep } from '../../utils/cloneDeep';
 import { isMouseClickAction, isMouseDragAction, MouseAction } from '../../utils/mouseActions';
-import { isInsideImage, clampBoundingBoxToImage, ACTIVE_POINT_SIZE } from './rectangleMath';
+import { isInsideImage, clampBoundingBoxToImage } from './rectangleMath';
 import { getCanvasMousePoint } from '../../utils/mousePoint';
 import { selectRectangleAtPoint, updateActiveRectangleAnchor } from './rectangleHitTest';
 import { applyRectangleMove, applyRectangleResize } from './rectangleTransform';
 import { DrawMode } from '../annotationTypes';
+const DRAG_THRESHOLD = 3;
 export class RectangleController {
     constructor(engine) {
         this.engine = engine;
@@ -14,6 +15,9 @@ export class RectangleController {
         this.startMousePoint = null;
         this.rectangleAnchor = null;
         this.needsRedraw = false;
+        this.isDrawingNewRectangle = false;
+        this.hasMoved = false;
+        this.targetIndexOnBegin = -1;
     }
     getRenderState() {
         return {
@@ -37,64 +41,101 @@ export class RectangleController {
         this.mouseAction = MouseAction.LEFT;
         this.mousePoint = mousePoint;
         this.startMousePoint = mousePoint;
-        const selectedAnnotation = selectRectangleAtPoint(zoom, this.mousePoint, this.engine.getAnnotations());
-        this.engine.setSelectedAnnotation(selectedAnnotation);
-        this.rectangleAnchor = updateActiveRectangleAnchor(zoom, this.mousePoint, selectedAnnotation);
+        this.isDrawingNewRectangle = false;
+        this.hasMoved = false;
+        const annotations = this.engine.getAnnotations();
+        const currentSelected = this.engine.getSelectedAnnotation();
+        const currentSelectedIndex = currentSelected ? annotations.findIndex((a) => a === currentSelected) : -1;
+        const tempAnnotations = annotations.map((a) => ({ ...a }));
+        const targetAnnotation = selectRectangleAtPoint(zoom, mousePoint, tempAnnotations);
+        this.targetIndexOnBegin = targetAnnotation
+            ? annotations.findIndex((a) => a.x === targetAnnotation.x &&
+                a.y === targetAnnotation.y &&
+                a.width === targetAnnotation.width &&
+                a.height === targetAnnotation.height)
+            : -1;
+        this.rectangleAnchor = updateActiveRectangleAnchor(zoom, mousePoint, currentSelected);
+        if (currentSelectedIndex >= 0 && this.targetIndexOnBegin !== currentSelectedIndex) {
+            this.engine.setSelectedAnnotation(null);
+            annotations.forEach((a) => (a.selected = false));
+            this.engine.setAnnotations(annotations);
+        }
         return true;
     }
     move(event) {
         this.needsRedraw = false;
-        if (!isMouseDragAction(event.buttons, MouseAction.LEFT))
+        if (!isMouseDragAction(event.buttons, MouseAction.LEFT) || !this.startMousePoint)
             return;
         const imageCanvasState = this.engine.getImageCanvasState();
         const { dw, dh } = imageCanvasState;
         this.prevMousePoint = cloneDeep(this.mousePoint);
         this.mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), imageCanvasState);
-        const selectedAnnotation = this.engine.getSelectedAnnotation();
-        if (this.mouseAction === MouseAction.LEFT && selectedAnnotation && this.prevMousePoint && this.mousePoint) {
-            const params = {
-                annotations: this.engine.getAnnotations(),
-                dw,
-                dh,
-                mousePoint: this.mousePoint,
-                prevMousePoint: this.prevMousePoint,
-                rectangleAnchor: this.rectangleAnchor,
-            };
-            if (this.rectangleAnchor) {
-                applyRectangleResize(params);
-            }
-            else {
-                applyRectangleMove(params);
+        const movedDistance = Math.sqrt(Math.pow(this.mousePoint.x - this.startMousePoint.x, 2) + Math.pow(this.mousePoint.y - this.startMousePoint.y, 2));
+        if (movedDistance > DRAG_THRESHOLD) {
+            this.hasMoved = true;
+            if (!this.isDrawingNewRectangle) {
+                const currentSelected = this.engine.getSelectedAnnotation();
+                const currentSelectedIndex = currentSelected
+                    ? this.engine.getAnnotations().findIndex((a) => a === currentSelected)
+                    : -1;
+                const isResizeMode = this.rectangleAnchor && currentSelected;
+                const isMoveMode = currentSelectedIndex >= 0 && currentSelectedIndex === this.targetIndexOnBegin;
+                if (!isResizeMode && !isMoveMode) {
+                    this.isDrawingNewRectangle = true;
+                }
             }
+        }
+        if (this.isDrawingNewRectangle) {
             this.needsRedraw = true;
         }
+        else {
+            const selectedAnnotation = this.engine.getSelectedAnnotation();
+            if (selectedAnnotation && this.prevMousePoint && this.hasMoved) {
+                const params = {
+                    annotations: this.engine.getAnnotations(),
+                    dw,
+                    dh,
+                    mousePoint: this.mousePoint,
+                    prevMousePoint: this.prevMousePoint,
+                    rectangleAnchor: this.rectangleAnchor,
+                };
+                if (this.rectangleAnchor) {
+                    applyRectangleResize(params);
+                }
+                else {
+                    applyRectangleMove(params);
+                }
+                this.needsRedraw = true;
+            }
+        }
         return true;
     }
     end(event) {
         if (!isMouseClickAction(event.button, MouseAction.LEFT))
             return;
         const imageCanvasState = this.engine.getImageCanvasState();
+        const { zoom, dw, dh } = imageCanvasState;
         const mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), imageCanvasState);
         this.mousePoint = mousePoint;
         if (this.startMousePoint) {
             const movedWidth = Math.abs(this.startMousePoint.x - mousePoint.x);
             const movedHeight = Math.abs(this.startMousePoint.y - mousePoint.y);
-            const { zoom, dw, dh } = imageCanvasState;
-            if (movedWidth > ACTIVE_POINT_SIZE && movedHeight > ACTIVE_POINT_SIZE) {
-                const { x, y, width, height } = clampBoundingBoxToImage(Math.min(mousePoint.x, this.startMousePoint.x), Math.min(mousePoint.y, this.startMousePoint.y), movedWidth, movedHeight, dw, dh);
-                if (this.engine.getSelectedAnnotation()) {
-                    this.engine.commitHistory(true);
-                }
-                else {
+            if (this.hasMoved && movedWidth > DRAG_THRESHOLD && movedHeight > DRAG_THRESHOLD) {
+                if (this.isDrawingNewRectangle) {
+                    const { x, y, width, height } = clampBoundingBoxToImage(Math.min(mousePoint.x, this.startMousePoint.x), Math.min(mousePoint.y, this.startMousePoint.y), movedWidth, movedHeight, dw, dh);
                     const label = this.engine.getDrawing().label;
                     this.engine.appendAnnotation({ label, type: DrawMode.RECTANGLE, x, y, width, height, selected: false });
                     this.engine.commitHistory(true);
                     this.engine.setSelectedAnnotation(null);
                 }
+                else if (this.engine.getSelectedAnnotation()) {
+                    this.engine.commitHistory(true);
+                }
             }
-            else {
+            else if (!this.hasMoved) {
                 const annotations = this.engine.getAnnotations();
-                this.engine.setSelectedAnnotation(selectRectangleAtPoint(zoom, this.mousePoint, annotations));
+                const selected = selectRectangleAtPoint(zoom, mousePoint, annotations);
+                this.engine.setSelectedAnnotation(selected);
                 this.engine.setAnnotations(annotations);
             }
         }
@@ -111,5 +152,8 @@ export class RectangleController {
         this.startMousePoint = null;
         this.prevMousePoint = null;
         this.rectangleAnchor = null;
+        this.isDrawingNewRectangle = false;
+        this.hasMoved = false;
+        this.targetIndexOnBegin = -1;
     }
 }

package/dist/engine/annotation/rectangle/rectangleRenderer.js

@@ -1,32 +1,29 @@
 import { ACTIVE_POINT_SIZE } from './rectangleMath';
-import { cloneDeep } from '../../utils/cloneDeep';
 import { MouseAction } from '../../utils/mouseActions';
 import { drawCross } from '../../renderer/drawCross';
 import { getRectangleCorners } from './rectangleHitTest';
 export const rectangleRenderer = {
-    draw(context, engine) {
-        const showSelectedOnly = engine.getShowSelectedOnly();
-        const { zoom, dw, dh } = engine.getImageCanvasState();
-        const { applyStyle: applyDrawStyle, lineSize: drawLineSize, color: drawColor, mode } = engine.getDrawing();
-        const annotations = engine.getAnnotations();
-        const editable = engine.isEditable();
+    drawAnnotation(context, engine, annotation) {
+        const { zoom } = engine.getImageCanvasState();
+        const { applyStyle, lineSize } = engine.getDrawing();
+        applyStyle({ variant: 'drawRect', context, annotation, drawLineSize: lineSize, zoom });
+        applyStyle({ variant: 'drawText', context, annotation, drawLineSize: lineSize, zoom });
+        if (annotation.selected && engine.isEditable()) {
+            drawActiveRect(context, annotation, zoom, lineSize);
+        }
+    },
+    drawEditorUI(context, engine) {
+        if (engine.getSelectedAnnotation())
+            return;
         const renderState = engine.getDrawRenderState();
-        const cloneAnnotations = cloneDeep(annotations);
-        cloneAnnotations.reverse().forEach((annotation) => {
-            if (!showSelectedOnly || annotation.selected) {
-                applyDrawStyle({ variant: 'drawRect', context, annotation, drawLineSize, zoom });
-                applyDrawStyle({ variant: 'drawText', context, annotation, drawLineSize, zoom });
-                drawActiveRect(context, annotation, zoom, drawLineSize);
-            }
-        });
-        if (editable && mode && !engine.getSelectedAnnotation()) {
-            if (renderState && renderState.mouseAction === MouseAction.LEFT && renderState.startMousePoint) {
-                drawNewRectFromPoints(context, renderState.mousePoint, renderState.startMousePoint, zoom, drawLineSize, drawColor);
-            }
-            const pointerState = engine.getPointerRenderState();
-            if (pointerState?.mousePoint) {
-                drawCross(context, pointerState.mousePoint, dw, dh, zoom, drawLineSize);
-            }
+        const pointerState = engine.getPointerRenderState();
+        const { zoom, dw, dh } = engine.getImageCanvasState();
+        const { lineSize, color } = engine.getDrawing();
+        if (renderState?.mouseAction === MouseAction.LEFT && renderState.startMousePoint) {
+            drawNewRectFromPoints(context, renderState.mousePoint, renderState.startMousePoint, zoom, lineSize, color);
+        }
+        if (pointerState?.mousePoint && !engine.getSelectedAnnotation()) {
+            drawCross(context, pointerState.mousePoint, dw, dh, zoom, lineSize);
         }
     },
 };

package/dist/engine/public/annotationEngine.js

@@ -73,7 +73,7 @@ export class AnnotationEngine {
         return this.showSelectedOnly;
     }
     destroy() {
-        this.annotations = [];
+        this.resetCanvas();
         this.history = null;
         this.panZoom.destroy();
     }
@@ -164,13 +164,19 @@ export class AnnotationEngine {
         this.drawAnnotationsCanvas();
     }
     drawAnnotations(context) {
-        const mode = this.getDrawing().mode;
-        if (!mode)
-            return;
-        const renderer = this.renderers[mode];
-        if (!renderer)
-            return;
-        renderer.draw(context, this);
+        const annotations = this.getAnnotations();
+        const showSelectedOnly = this.getShowSelectedOnly();
+        const clonedAnnotations = cloneDeep(annotations);
+        clonedAnnotations.reverse().forEach((annotation) => {
+            if (!showSelectedOnly || annotation.selected) {
+                const renderer = this.renderers[annotation.type];
+                renderer?.drawAnnotation(context, this, annotation);
+            }
+        });
+        if (this.editable && this.drawing.mode) {
+            const renderer = this.renderers[this.drawing.mode];
+            renderer?.drawEditorUI?.(context, this);
+        }
     }
     getSelectedAnnotation() {
         return this.annotations.find((a) => a.selected) ?? null;

package/dist/engine/renderer/interface.d.ts

@@ -1,4 +1,6 @@
+import { Annotation } from '../annotation/annotationTypes';
 import { AnnotationEngine } from '../public/annotationEngine';
 export interface AnnotationsRenderer {
-    draw(ctx: CanvasRenderingContext2D, engine: AnnotationEngine): void;
+    drawAnnotation(context: CanvasRenderingContext2D, engine: AnnotationEngine, annotation: Annotation): void;
+    drawEditorUI?(context: CanvasRenderingContext2D, engine: AnnotationEngine): void;
 }

package/dist/react/AnnotationCanvas.js

@@ -9,58 +9,67 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
     const { panZoomEnabled, zoom, ZoomButton, resetOnImageChange = false } = options || {};
     const { onImageLoadSuccess, onImageLoadError } = events || {};
     const imageCanvasRef = useRef(null);
-    const imageRef = useRef(new Image());
-    const engineRef = useRef(null);
     const annotationsCanvasRef = useRef(null);
-    const [_, forceRender] = useState(0);
+    const engineRef = useRef(null);
+    const pendingAnnotationsRef = useRef(null);
+    const [, forceRender] = useState(0);
+    /* ---------- Resize ---------- */
     useResizeObserver({
         ref: imageCanvasRef,
         onResize: useDebounce((size) => {
             const engine = engineRef.current;
-            const imageCanvas = engine?.getImageCanvas();
-            if (!engine || !imageCanvas || !imageRef.current.src)
+            const canvas = engine?.getImageCanvas();
+            if (!engine || !canvas)
                 return;
-            const needsResize = size.width !== imageCanvas.width || size.height !== imageCanvas.height;
-            if (needsResize)
+            if (canvas.width !== size.width || canvas.height !== size.height) {
                 engine.initImageCanvas(true);
+            }
         }, 150),
     });
+    /* ---------- Hotkeys ---------- */
     useHotkeys({
         onDelete: () => engineRef.current?.deleteSelected(),
         toggleSelectionOnly: () => engineRef.current?.toggleShowSelectedOnly(),
         onUndoRedo: (isRedo) => engineRef.current?.undoRedo(isRedo),
         enabled: enableHotkeys,
     });
-    const createEmptyImage = () => {
-        const img = new Image();
-        img.width = img.height = 0;
-        return img;
-    };
-    const resetCanvas = (errorMsg) => {
-        engineRef.current?.resetCanvas();
-        imageRef.current = createEmptyImage();
-        if (errorMsg)
-            onImageLoadError?.(new Error(errorMsg));
-    };
+    /* ---------- Image / Engine lifecycle ---------- */
     useEffect(() => {
-        if (!image?.trim())
-            return void resetCanvas();
+        if (!image?.trim()) {
+            engineRef.current?.resetCanvas();
+            return;
+        }
         let cancelled = false;
         const img = new Image();
         img.onload = () => {
-            if (cancelled || !imageCanvasRef.current || !annotationsCanvasRef.current)
+            if (cancelled || !imageCanvasRef.current || !annotationsCanvasRef.current) {
                 return;
-            const imageCanvasState = engineRef.current
-                ? engineRef.current.getImageCanvasState()
-                : { moveX: 0, moveY: 0, zoomX: 0, zoomY: 0, zoom: 1, dx: 0, dy: 0, dw: img.width, dh: img.height, initZoom: 1 };
-            engineRef.current?.destroy?.();
+            }
+            const prevEngine = engineRef.current;
+            const imageCanvasState = prevEngine && !resetOnImageChange
+                ? prevEngine.getImageCanvasState()
+                : {
+                    moveX: 0,
+                    moveY: 0,
+                    zoomX: 0,
+                    zoomY: 0,
+                    zoom: 1,
+                    dx: 0,
+                    dy: 0,
+                    dw: img.width,
+                    dh: img.height,
+                    initZoom: 1,
+                };
+            const initialAnnotations = pendingAnnotationsRef.current ?? [];
+            pendingAnnotationsRef.current = null;
+            prevEngine?.destroy();
             engineRef.current = new AnnotationEngine({
                 imageCanvas: imageCanvasRef.current,
                 image: img,
                 imageCanvasState,
                 annotationsCanvas: annotationsCanvasRef.current,
-                annotations,
-                setAnnotations: (annotations) => setAnnotations?.(annotations),
+                annotations: initialAnnotations,
+                setAnnotations: (next) => setAnnotations?.(next),
                 drawing,
                 editable,
                 panZoomEnabled,
@@ -69,42 +78,51 @@ const AnnotationCanvas = ({ image, annotations = [], setAnnotations, options, dr
                 onChange: () => forceRender((v) => v + 1),
             });
             engineRef.current.initImageCanvas(resetOnImageChange);
+            onImageLoadSuccess?.();
+        };
+        img.onerror = () => {
+            if (cancelled)
+                return;
+            pendingAnnotationsRef.current = null;
+            engineRef.current?.resetCanvas();
+            onImageLoadError?.(new Error(`Failed to load image: ${image}`));
         };
-        img.onerror = () => !cancelled && resetCanvas(`Failed to load image: ${image}`);
         img.src = image;
-        imageRef.current = img;
-        onImageLoadSuccess?.();
         return () => {
             cancelled = true;
             img.onload = null;
             img.onerror = null;
-            engineRef.current?.destroy();
         };
-    }, [image]);
-    useEffect(() => {
-        if (!engineRef.current)
-            return;
-        engineRef.current.setPanZoomEnabled(!!panZoomEnabled);
-    }, [panZoomEnabled]);
+    }, [image, resetOnImageChange]);
+    /* ---------- External annotations ---------- */
     useEffect(() => {
-        if (!engineRef.current)
+        if (!annotations)
             return;
-        engineRef.current.setEditable(editable);
-    }, [editable]);
-    useEffect(() => {
-        if (!engineRef.current)
+        if (!engineRef.current) {
+            pendingAnnotationsRef.current = annotations;
             return;
+        }
         const before = engineRef.current.getAnnotations();
         if (JSON.stringify(before) !== JSON.stringify(annotations)) {
             engineRef.current.setAnnotations(annotations);
             engineRef.current.commitHistory();
         }
-    }, [engineRef.current, annotations]);
+    }, [annotations]);
+    /* ---------- Options sync ---------- */
     useEffect(() => {
-        if (!engineRef.current)
-            return;
-        engineRef.current.setDrawing(drawing);
-    }, [engineRef.current, drawing]);
-    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { 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(), style: { flex: 1, position: 'relative', cursor: !panZoomEnabled || editable ? 'default' : 'grab' }, children: [_jsx("canvas", { ref: imageCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), _jsx("canvas", { ref: annotationsCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() }))] }) }));
+        engineRef.current?.setPanZoomEnabled(!!panZoomEnabled);
+    }, [panZoomEnabled]);
+    useEffect(() => {
+        engineRef.current?.setEditable(editable);
+    }, [editable]);
+    useEffect(() => {
+        engineRef.current?.setDrawing(drawing);
+    }, [drawing]);
+    /* ---------- Render ---------- */
+    return (_jsx("div", { style: { width: '100%', height: '100%', display: 'flex', flex: 1 }, children: _jsxs("div", { 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(), style: {
+                flex: 1,
+                position: 'relative',
+                cursor: !panZoomEnabled || editable ? 'default' : 'grab',
+            }, children: [_jsx("canvas", { ref: imageCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), _jsx("canvas", { ref: annotationsCanvasRef, style: { position: 'absolute', width: '100%', height: '100%' } }), ZoomButton && (_jsx(ZoomButton, { onClick: () => engineRef.current?.initImageCanvas(true), children: engineRef.current?.getZoomRatioLabel() }))] }) }));
 };
 export default AnnotationCanvas;

package/package.json

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