@deepnoid/canvas 0.1.59 → 0.1.60

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/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

@@ -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/package.json

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