@deepnoid/canvas 0.1.58 → 0.1.60

package/README.md

@@ -1,6 +1,205 @@
 # deepnoid-canvas
 
-이 프로젝트는 본부 내 프로젝트에서 사용되는 공통 CANVAS 라이브러리입니다!!!
+이 프로젝트는 본부 내 프로젝트에서 사용되는 공통 CANVAS 라이브러리입니다.
 
-AnnotationViewer → 전체 이미지 + UI 컨트롤 포함
-AnnotationLayer → 실제 좌표/도형을 그리는 캔버스
+## 개요
+
+Canvas 기반 이미지 annotation 라이브러리로, **TypeScript Engine + React Host** 구조로 설계되었습니다.
+
+- **Engine (TS)**: Canvas 조작, 상태 관리, 이벤트 처리 등 핵심 로직
+- **React**: UI 렌더링, DOM ref 관리, Engine 생명주기 관리
+
+## 주요 기능
+
+- ✏️ Rectangle annotation 그리기/편집
+- 👁️ Viewer 모드 지원 (읽기 전용)
+- 🔍 Pan & Zoom 지원
+- ↩️ Undo/Redo 기능
+- ⌨️ 단축키 지원
+- 🎨 커스터마이징 가능한 스타일링
+
+## 빠른 시작
+
+### 설치
+
+```bash
+npm install deepnoid-canvas
+```
+
+### 기본 사용법
+
+```tsx
+import { AnnotationEditor } from 'deepnoid-canvas';
+
+function App() {
+  const [annotations, setAnnotations] = useState([]);
+
+  return (
+    <AnnotationEditor
+      image='https://example.com/image.jpg'
+      annotations={annotations}
+      setAnnotations={setAnnotations}
+      drawing={{
+        mode: 'RECTANGLE',
+        color: '#FF4136',
+        lineSize: 2,
+      }}
+      options={{
+        panZoomEnabled: true,
+        zoom: { min: 0.5, max: 4, step: 0.9 },
+      }}
+      enableHotkeys
+    />
+  );
+}
+```
+
+## Props
+
+### AnnotationEditor
+
+Editor 모드로 annotation을 생성하고 편집할 수 있습니다.
+
+| Prop             | Type                                  | Required | Description                      |
+| ---------------- | ------------------------------------- | -------- | -------------------------------- |
+| `image`          | `string`                              | ✅       | 이미지 URL                       |
+| `drawing`        | `AnnotationCanvasDrawing`             | ✅       | 그리기 모드 및 스타일 설정       |
+| `annotations`    | `Annotation[]`                        | -        | Annotation 목록                  |
+| `setAnnotations` | `(annotations: Annotation[]) => void` | -        | Annotation 변경 시 호출되는 콜백 |
+| `options`        | `AnnotationCanvasOptions`             | -        | 줌/팬 및 기타 옵션               |
+| `events`         | `AnnotationCanvasEvents`              | -        | 이미지 로드 관련 이벤트 핸들러   |
+| `enableHotkeys`  | `boolean`                             | -        | 단축키 활성화 여부               |
+
+### AnnotationViewer
+
+Viewer 모드로 annotation을 읽기 전용으로 표시합니다.
+
+| Prop            | Type                                                                       | Required | Description                    |
+| --------------- | -------------------------------------------------------------------------- | -------- | ------------------------------ |
+| `image`         | `string`                                                                   | ✅       | 이미지 URL                     |
+| `drawing`       | `Pick<AnnotationCanvasDrawing, 'lineSize' \| 'applyStyle'>`                | ✅       | 렌더링 스타일 설정 (mode 제외) |
+| `annotations`   | `Annotation[]`                                                             | -        | 표시할 Annotation 목록         |
+| `options`       | `AnnotationCanvasOptions`                                                  | -        | 줌/팬 및 기타 옵션             |
+| `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
+type AnnotationCanvasDrawing = {
+  mode?: 'RECTANGLE' | 'POLYGON' | 'NONE'; // 그리기 모드 (Editor 전용)
+  color?: string; // Annotation 색상 (HEX)
+  lineSize: number; // 선 두께
+  label?: Label; // Annotation에 표시할 라벨
+  applyStyle: ApplyAnnotationStyle; // 커스텀 스타일 함수
+};
+
+type Label = {
+  id: number;
+  name: string;
+  type: string;
+};
+
+type ApplyAnnotationStyle = (params: {
+  variant: 'drawRect' | 'drawText';
+  context: CanvasRenderingContext2D;
+  annotation: Annotation;
+  drawLineSize: number;
+  zoom: number;
+}) => void;
+```
+
+### Options 설정
+
+```typescript
+type AnnotationCanvasOptions = {
+  panZoomEnabled?: boolean; // 줌/팬 기능 활성화 (기본: false)
+  zoom?: {
+    min?: number; // 최소 줌 배율 (기본: 0.1)
+    max?: number; // 최대 줌 배율 (기본: Infinity)
+    step?: number; // 줌 단계 (기본: 0.9)
+  };
+  ZoomButton?: ComponentType; // 커스텀 줌 버튼 컴포넌트
+  resetOnImageChange?: boolean; // 이미지 변경 시 줌 리셋 여부
+};
+```
+
+### Events 설정
+
+```typescript
+type AnnotationCanvasEvents = {
+  onImageLoadSuccess?: () => void; // 이미지 로드 성공 시
+  onImageLoadError?: (error: Error) => void; // 이미지 로드 실패 시
+};
+```
+
+## 단축키
+
+| 키             | 기능                          |
+| -------------- | ----------------------------- |
+| `Delete`       | 선택한 annotation 삭제        |
+| `Ctrl+Z`       | Undo                          |
+| `Ctrl+Shift+Z` | Redo                          |
+| `X`            | 선택한 annotation만 보기 토글 |
+
+## 아키텍처
+
+### Facade 패턴
+
+```
+React Component
+      ↓
+AnnotationEngine (Facade)
+      ↓ ↓ ↓ ↓ ↓
+      │ │ │ │ └─ History (Undo/Redo)
+      │ │ │ └─── PanZoomController
+      │ │ └───── InteractionController
+      │ └─────── Renderers
+      └───────── Annotation Controllers
+```
+
+### 디렉토리 구조
+
+```
+src/
+├─ engine/              # TypeScript Engine (순수 로직)
+│  ├─ annotation/       # Annotation 타입별 로직
+│  ├─ interaction/      # 이벤트 처리
+│  ├─ pan-zoom/         # 줌/이동 기능
+│  ├─ public/           # 외부 공개 API
+│  └─ renderer/         # Canvas 렌더링
+│
+└─ react/               # React 컴포넌트
+   ├─ hooks/
+   └─ AnnotationCanvas.tsx
+```
+
+## 설계 원칙
+
+1. **관심사 분리**: Engine(로직) ↔ React(UI) 완전 분리
+2. **확장성**: 새로운 annotation 타입 추가 용이
+3. **성능 최적화**: 레이어별 redraw 제어

package/dist/engine/annotation/annotationTypes.d.ts

@@ -0,0 +1,21 @@
+import { Label } from '../types';
+export declare enum DrawMode {
+    RECTANGLE = "RECTANGLE"
+}
+export type AnnotationBase = {
+    label?: Label;
+    type?: DrawMode;
+    color?: 'success' | 'warning' | 'danger';
+    selected?: boolean;
+    showOnlySelected?: boolean;
+};
+export type Rectangle = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type RectangleAnnotation = AnnotationBase & {
+    type: DrawMode.RECTANGLE;
+} & Rectangle;
+export type Annotation = RectangleAnnotation;

package/dist/engine/annotation/annotationTypes.js

@@ -0,0 +1,6 @@
+export var DrawMode;
+(function (DrawMode) {
+    DrawMode["RECTANGLE"] = "RECTANGLE";
+    // POLYGON = 'POLYGON',
+})(DrawMode || (DrawMode = {}));
+// | PolygonAnnotation

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

@@ -0,0 +1,26 @@
+import { AnnotationEngine } from '../../public/annotationEngine';
+import { MouseAction } from '../../utils/mouseActions';
+import { PointState } from '../../types';
+import { RectangleAnchor } from './rectangleTypes';
+export declare class RectangleController {
+    private readonly engine;
+    private mouseAction;
+    private mousePoint;
+    private prevMousePoint;
+    private startMousePoint;
+    private rectangleAnchor;
+    private needsRedraw;
+    constructor(engine: AnnotationEngine);
+    getRenderState(): {
+        mousePoint: PointState;
+        startMousePoint: PointState | null;
+        mouseAction: MouseAction | null;
+        anchor: RectangleAnchor | null;
+    };
+    shouldRedraw(): boolean;
+    begin(event: MouseEvent): true | undefined;
+    move(event: MouseEvent): true | undefined;
+    end(event: MouseEvent): true | undefined;
+    leave(event: MouseEvent): boolean;
+    private reset;
+}

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

@@ -0,0 +1,115 @@
+import { cloneDeep } from '../../utils/cloneDeep';
+import { isMouseClickAction, isMouseDragAction, MouseAction } from '../../utils/mouseActions';
+import { isInsideImage, clampBoundingBoxToImage, ACTIVE_POINT_SIZE } from './rectangleMath';
+import { getCanvasMousePoint } from '../../utils/mousePoint';
+import { selectRectangleAtPoint, updateActiveRectangleAnchor } from './rectangleHitTest';
+import { applyRectangleMove, applyRectangleResize } from './rectangleTransform';
+import { DrawMode } from '../annotationTypes';
+export class RectangleController {
+    constructor(engine) {
+        this.engine = engine;
+        this.mouseAction = null;
+        this.mousePoint = { x: 0, y: 0, selected: false };
+        this.prevMousePoint = null;
+        this.startMousePoint = null;
+        this.rectangleAnchor = null;
+        this.needsRedraw = false;
+    }
+    getRenderState() {
+        return {
+            mousePoint: this.mousePoint,
+            startMousePoint: this.startMousePoint,
+            mouseAction: this.mouseAction,
+            anchor: this.rectangleAnchor,
+        };
+    }
+    shouldRedraw() {
+        return this.needsRedraw;
+    }
+    begin(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);
+        if (!isInsideImage(mousePoint, dw, dh))
+            return;
+        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);
+        return true;
+    }
+    move(event) {
+        this.needsRedraw = false;
+        if (!isMouseDragAction(event.buttons, MouseAction.LEFT))
+            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);
+            }
+            this.needsRedraw = true;
+        }
+        return true;
+    }
+    end(event) {
+        if (!isMouseClickAction(event.button, MouseAction.LEFT))
+            return;
+        const imageCanvasState = this.engine.getImageCanvasState();
+        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 {
+                    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 {
+                const annotations = this.engine.getAnnotations();
+                this.engine.setSelectedAnnotation(selectRectangleAtPoint(zoom, this.mousePoint, annotations));
+                this.engine.setAnnotations(annotations);
+            }
+        }
+        this.reset();
+        return true;
+    }
+    leave(event) {
+        this.mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), this.engine.getImageCanvasState());
+        this.reset();
+        return true;
+    }
+    reset() {
+        this.mouseAction = null;
+        this.startMousePoint = null;
+        this.prevMousePoint = null;
+        this.rectangleAnchor = null;
+    }
+}

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

@@ -0,0 +1,7 @@
+import { Point, PointState } from '../../types';
+import { Annotation, Rectangle } from '../annotationTypes';
+import { RectangleAnchor } from './rectangleTypes';
+export declare function getRectangleCorners({ x, y, width, height }: Rectangle): PointState[];
+export declare function selectRectangleAtPoint(zoom: number, mousePoint: Point, annotations: Annotation[]): Annotation | null;
+export declare function updateActiveRectangleAnchor(zoom: number, mousePoint: Point, selectedAnnotation: Annotation | null): RectangleAnchor | null;
+export declare function getRectangleCursorByAnnotations(mousePoint: Point, annotations: Annotation[], zoom: number): string;

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

@@ -0,0 +1,102 @@
+import { DrawMode } from '../annotationTypes';
+import { ACTIVE_POINT_SIZE } from './rectangleMath';
+import { getRectangleCursor } from './rectangleRenderer';
+import { RectangleAnchor } from './rectangleTypes';
+export function getRectangleCorners({ x, y, width, height }) {
+    return [
+        { x, y },
+        { x: x + width, y },
+        { x, y: y + height },
+        { x: x + width, y: y + height },
+    ];
+}
+export function selectRectangleAtPoint(zoom, mousePoint, annotations) {
+    const { x: mouseX, y: mouseY } = mousePoint;
+    const padding = ACTIVE_POINT_SIZE / zoom;
+    const isPointInRectangle = (a) => mouseX >= a.x - padding &&
+        mouseX <= a.x + a.width + padding &&
+        mouseY >= a.y - padding &&
+        mouseY <= a.y + a.height + padding;
+    let selectedIndex = -1;
+    let minArea = Number.MAX_SAFE_INTEGER;
+    const currentIndex = annotations.findIndex((a) => a.selected);
+    if (currentIndex >= 0) {
+        const c = annotations[currentIndex];
+        if (c.type === DrawMode.RECTANGLE && isPointInRectangle(c)) {
+            selectedIndex = currentIndex;
+            minArea = c.width * c.height;
+        }
+    }
+    if (selectedIndex === -1) {
+        annotations.forEach((a, idx) => {
+            if (a.type !== DrawMode.RECTANGLE || !isPointInRectangle(a))
+                return;
+            const area = a.width * a.height;
+            if (area < minArea) {
+                minArea = area;
+                selectedIndex = idx;
+            }
+        });
+    }
+    annotations.forEach((a) => (a.selected = false));
+    if (selectedIndex >= 0) {
+        annotations[selectedIndex].selected = true;
+        return annotations[selectedIndex];
+    }
+    else {
+        return null;
+    }
+}
+export function updateActiveRectangleAnchor(zoom, mousePoint, selectedAnnotation) {
+    if (!selectedAnnotation)
+        return null;
+    const points = getRectangleCorners(selectedAnnotation);
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    const { x: mouseX, y: mouseY } = mousePoint;
+    const { x, y, width: w, height: h } = selectedAnnotation;
+    if (mouseX >= points[0].x - pointSize / 2 &&
+        mouseX <= points[0].x + pointSize / 2 &&
+        mouseY >= points[0].y - pointSize / 2 &&
+        mouseY <= points[0].y + pointSize / 2) {
+        return RectangleAnchor.LEFT_TOP;
+    }
+    else if (mouseX >= points[1].x - pointSize / 2 &&
+        mouseX <= points[1].x + pointSize / 2 &&
+        mouseY >= points[1].y - pointSize / 2 &&
+        mouseY <= points[1].y + pointSize / 2) {
+        return RectangleAnchor.RIGHT_TOP;
+    }
+    else if (mouseX >= points[2].x - pointSize / 2 &&
+        mouseX <= points[2].x + pointSize / 2 &&
+        mouseY >= points[2].y - pointSize / 2 &&
+        mouseY <= points[2].y + pointSize / 2) {
+        return RectangleAnchor.LEFT_BOTTOM;
+    }
+    else if (mouseX >= points[3].x - pointSize / 2 &&
+        mouseX <= points[3].x + pointSize / 2 &&
+        mouseY >= points[3].y - pointSize / 2 &&
+        mouseY <= points[3].y + pointSize / 2) {
+        return RectangleAnchor.RIGHT_BOTTOM;
+    }
+    else if (mouseX >= x && mouseX <= x + w && mouseY >= y - pointSize / 2 && mouseY <= y + pointSize / 2) {
+        return RectangleAnchor.TOP;
+    }
+    else if (mouseX >= x && mouseX <= x + w && mouseY >= y + h - pointSize / 2 && mouseY <= y + h + pointSize / 2) {
+        return RectangleAnchor.BOTTOM;
+    }
+    else if (mouseY >= y && mouseY <= y + h && mouseX >= x - pointSize / 2 && mouseX <= x + pointSize / 2) {
+        return RectangleAnchor.LEFT;
+    }
+    else if (mouseY >= y && mouseY <= y + h && mouseX >= x + w - pointSize / 2 && mouseX <= x + w + pointSize / 2) {
+        return RectangleAnchor.RIGHT;
+    }
+    else {
+        return null;
+    }
+}
+export function getRectangleCursorByAnnotations(mousePoint, annotations, zoom) {
+    const target = annotations.find((a) => a.selected);
+    if (!target)
+        return 'default';
+    return getRectangleCursor(mousePoint, target, zoom);
+}

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

@@ -0,0 +1,17 @@
+import { RedrawLayers } from '../../interaction/interface';
+import { RectangleController } from './rectangleController';
+export declare class RectangleInteraction {
+    private readonly controller;
+    constructor(controller: RectangleController);
+    getRenderState(): {
+        mousePoint: import("../../types").PointState;
+        startMousePoint: import("../../types").PointState | null;
+        mouseAction: import("../../utils/mouseActions").MouseAction | null;
+        anchor: import("./rectangleTypes").RectangleAnchor | null;
+    };
+    getRedrawLayers(): RedrawLayers;
+    handleMouseDown(e: MouseEvent): boolean;
+    handleMouseMove(e: MouseEvent): boolean;
+    handleMouseUp(e: MouseEvent): boolean;
+    handleMouseLeave(e: MouseEvent): boolean;
+}

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

@@ -0,0 +1,30 @@
+export class RectangleInteraction {
+    constructor(controller) {
+        this.controller = controller;
+    }
+    getRenderState() {
+        return this.controller.getRenderState();
+    }
+    getRedrawLayers() {
+        return {
+            imageCanvas: false,
+            annotationsCanvas: this.controller.shouldRedraw(),
+        };
+    }
+    handleMouseDown(e) {
+        this.controller.begin(e);
+        return true;
+    }
+    handleMouseMove(e) {
+        this.controller.move(e);
+        return true;
+    }
+    handleMouseUp(e) {
+        this.controller.end(e);
+        return true;
+    }
+    handleMouseLeave(e) {
+        this.controller.leave(e);
+        return true;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { Point } from '../../types';
+export declare const ACTIVE_POINT_SIZE = 10;
+export declare function isInsideImage(point: Point, imageWidth: number, imageHeight: number): boolean;
+export declare function clampBoundingBoxToImage(x: number, y: number, width: number, height: number, dw: number, dh: number): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    selected: boolean;
+};

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

@@ -0,0 +1,29 @@
+export const ACTIVE_POINT_SIZE = 10;
+export function isInsideImage(point, imageWidth, imageHeight) {
+    return point.x >= 0 && point.y >= 0 && point.x <= imageWidth && point.y <= imageHeight;
+}
+export function clampBoundingBoxToImage(x, y, width, height, dw, dh) {
+    let correctedX = x;
+    let correctedY = y;
+    let correctedWidth = width;
+    let correctedHeight = height;
+    if (x + width > dw)
+        correctedWidth = dw - x;
+    if (y + height > dh)
+        correctedHeight = dh - y;
+    if (x < 0) {
+        correctedWidth = width + x;
+        correctedX = 0;
+    }
+    if (y < 0) {
+        correctedHeight = height + y;
+        correctedY = 0;
+    }
+    return {
+        x: correctedX,
+        y: correctedY,
+        width: Math.max(0, correctedWidth),
+        height: Math.max(0, correctedHeight),
+        selected: false,
+    };
+}

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

@@ -0,0 +1,5 @@
+import { Point } from '../../types';
+import { AnnotationsRenderer } from '../../renderer/interface';
+import { Annotation } from '../annotationTypes';
+export declare const rectangleRenderer: AnnotationsRenderer;
+export declare function getRectangleCursor(mousePoint: Point, annotation: Annotation, zoom: number): string;

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

@@ -0,0 +1,88 @@
+import { ACTIVE_POINT_SIZE } from './rectangleMath';
+import { MouseAction } from '../../utils/mouseActions';
+import { drawCross } from '../../renderer/drawCross';
+import { getRectangleCorners } from './rectangleHitTest';
+export const rectangleRenderer = {
+    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 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);
+        }
+    },
+};
+function drawActiveRect(ctx, annotation, zoom, drawLineSize) {
+    const { x, y, width, height, selected } = annotation;
+    if (!selected)
+        return;
+    ctx.lineWidth = drawLineSize / zoom;
+    ctx.fillStyle = '#FFF';
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    const points = getRectangleCorners({ x, y, width, height });
+    points.forEach((point) => {
+        ctx.fillStyle = '#FFF';
+        ctx.fillRect(point.x - pointSize / 2, point.y - pointSize / 2, pointSize, pointSize);
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1 / zoom;
+        ctx.strokeRect(point.x - pointSize / 2, point.y - pointSize / 2, pointSize, pointSize);
+    });
+}
+export function getRectangleCursor(mousePoint, annotation, zoom) {
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    const { x, y, width: w, height: h } = annotation;
+    if (w <= 0 || h <= 0)
+        return 'default';
+    const mouseX = mousePoint.x;
+    const mouseY = mousePoint.y;
+    const points = getRectangleCorners({ x, y, width: w, height: h });
+    const hit = (px, py) => mouseX >= px - pointSize / 2 &&
+        mouseX <= px + pointSize / 2 &&
+        mouseY >= py - pointSize / 2 &&
+        mouseY <= py + pointSize / 2;
+    if (hit(points[0].x, points[0].y))
+        return 'nwse-resize';
+    if (hit(points[1].x, points[1].y))
+        return 'nesw-resize';
+    if (hit(points[2].x, points[2].y))
+        return 'nesw-resize';
+    if (hit(points[3].x, points[3].y))
+        return 'nwse-resize';
+    if (mouseX >= x && mouseX <= x + w && Math.abs(mouseY - y) <= pointSize / 2)
+        return 'ns-resize';
+    if (mouseX >= x && mouseX <= x + w && Math.abs(mouseY - (y + h)) <= pointSize / 2)
+        return 'ns-resize';
+    if (mouseY >= y && mouseY <= y + h && Math.abs(mouseX - x) <= pointSize / 2)
+        return 'ew-resize';
+    if (mouseY >= y && mouseY <= y + h && Math.abs(mouseX - (x + w)) <= pointSize / 2)
+        return 'ew-resize';
+    return 'default';
+}
+function drawNewRectFromPoints(context, startPoint, endPoint, zoom, drawLineSize, color) {
+    if (!color)
+        return;
+    const x = Math.min(endPoint.x, startPoint.x);
+    const y = Math.min(endPoint.y, startPoint.y);
+    const width = Math.abs(endPoint.x - startPoint.x);
+    const height = Math.abs(endPoint.y - startPoint.y);
+    context.beginPath();
+    context.lineWidth = drawLineSize / zoom;
+    context.rect(x, y, width, height);
+    context.strokeStyle = color;
+    context.stroke();
+}