@deepnoid/canvas 0.1.78 → 0.1.80

package/README.md

@@ -11,12 +11,20 @@ Canvas 기반 이미지 annotation 라이브러리로, **TypeScript Engine + Rea
 
 ## 주요 기능
 
-- ✏️ Rectangle annotation 그리기/편집
+- ✏️ **Annotation 지원 (그리기 및 편집)**
+  - **Rectangle (BBox)**:
+    - 모서리/상하좌우 테두리를 통한 직관적 크기 조절
+    - 영역 내부 드래그(`move` 커서)를 통한 도형 전체 이동
+  - **Polygon**:
+    - 다각형 점찍기 및 시작점(또는 더블클릭) 클릭으로 도형 완성
+    - **선 분할(Edge Point Insertion)**: 기존 그려진 폴리곤 선(Edge) 위에 마우스를 1초간 올려둘 시, 새로운 꼭짓점(Vertex)을 간편하게 추가 가능 (클릭/이동 오작동 방지)
+    - 내부 클릭 후 드래그하여 전체 다각형 이동 지원
+  - **스마트 UI 동기화**: 캔버스 내의 도형 클릭 시 선택된 객체 타입(RECTANGLE/POLYGON)에 맞춰 외부 도구(React 상태)가 자동으로 전환되도록 이벤트(`annotationSelected`) 연동
 - 👁️ Viewer 모드 지원 (읽기 전용)
-- 🔍 Pan & Zoom 지원
-- ↩️ Undo/Redo 기능
-- ⌨️ 단축키 지원
-- 🎨 커스터마이징 가능한 스타일링
+- 🔍 Pan & Zoom 지원 (Image Canvas / Annotation Canvas 레이어 완전 분리)
+- ↩️ Undo/Redo 기능 (History 상태망 자체 관리)
+- ⌨️ 단축키 지원 (선택 객체 삭제, 되돌리기, 한 객체만 보기 등)
+- 🎨 커스터마이징 가능한 스타일링 (커스텀 렌더링 함수(`applyStyle`) 주입 가능)
 
 ## 빠른 시작
 
@@ -200,6 +208,9 @@ src/
 
 ## 설계 원칙
 
-1. **관심사 분리**: Engine(로직) ↔ React(UI) 완전 분리
-2. **확장성**: 새로운 annotation 타입 추가 용이
-3. **성능 최적화**: 레이어별 redraw 제어
+1. **관심사 분리**: Engine(로직, Canvas 렌더링) ↔ React(UI DOM, 상태 연동) 완전 분리
+2. **확장성**: `Renderer`, `HitTest`, `Controller` 구조로 분리되어 있어, Polygon과 같은 새로운 Annotation 타입을 손쉽게 플러그인처럼 추가 가능합니다.
+3. **사용자 경험(UX) 중심**:
+   - 툴 오버 액션과 클릭/드래그 충돌을 방지하는 스마트 HitTest 우선순위
+   - 1초 Hover Timer 등 인간 중심적인 편집 인터랙션 제공
+4. **성능 최적화**: 레이어별(base image / annotation) 독립된 Canvas를 사용하여 불필요한 이미지 렌더링(Redraw) 비용 원천 차단

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

@@ -1,6 +1,7 @@
 import { Label } from '../types';
 export declare enum DrawMode {
-    RECTANGLE = "RECTANGLE"
+    RECTANGLE = "RECTANGLE",
+    POLYGON = "POLYGON"
 }
 export type AnnotationBase = {
     label?: Label;
@@ -18,4 +19,13 @@ export type Rectangle = {
 export type RectangleAnnotation = AnnotationBase & {
     type: DrawMode.RECTANGLE;
 } & Rectangle;
-export type Annotation = RectangleAnnotation;
+export type Polygon = {
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
+export type PolygonAnnotation = AnnotationBase & {
+    type: DrawMode.POLYGON;
+} & Polygon;
+export type Annotation = RectangleAnnotation | PolygonAnnotation;

package/dist/engine/annotation/annotationTypes.js

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

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

@@ -0,0 +1,5 @@
+import { Point } from '../types';
+import { Annotation, PolygonAnnotation, RectangleAnnotation } from './annotationTypes';
+export declare function isPointInRectangle(zoom: number, mousePoint: Point, a: RectangleAnnotation): boolean;
+export declare function isPointInOrOnPolygon(zoom: number, mousePoint: Point, a: PolygonAnnotation): boolean;
+export declare function selectAnnotationAtPoint(zoom: number, mousePoint: Point, annotations: Annotation[]): Annotation | null;

package/dist/engine/annotation/hitTest.js

@@ -0,0 +1,63 @@
+import { DrawMode } from './annotationTypes';
+import { ACTIVE_POINT_SIZE, isInsidePolygon, distToSegment } from './polygon/polygonMath';
+export function isPointInRectangle(zoom, mousePoint, a) {
+    const padding = ACTIVE_POINT_SIZE / zoom;
+    return (mousePoint.x >= a.x - padding &&
+        mousePoint.x <= a.x + a.width + padding &&
+        mousePoint.y >= a.y - padding &&
+        mousePoint.y <= a.y + a.height + padding);
+}
+export function isPointInOrOnPolygon(zoom, mousePoint, a) {
+    if (a.points.length < 3)
+        return false;
+    if (isInsidePolygon(mousePoint, a.points))
+        return true;
+    const padding = ACTIVE_POINT_SIZE / zoom;
+    for (let i = 0; i < a.points.length; i++) {
+        const p1 = a.points[i];
+        const p2 = a.points[(i + 1) % a.points.length];
+        if (distToSegment(mousePoint, p1, p2) <= padding) {
+            return true;
+        }
+    }
+    return false;
+}
+export function selectAnnotationAtPoint(zoom, mousePoint, annotations) {
+    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(zoom, mousePoint, c)) {
+            selectedIndex = currentIndex;
+            minArea = c.width * c.height;
+        }
+        else if (c.type === DrawMode.POLYGON && isPointInOrOnPolygon(zoom, mousePoint, c)) {
+            selectedIndex = currentIndex;
+        }
+    }
+    if (selectedIndex === -1) {
+        for (let i = annotations.length - 1; i >= 0; i--) {
+            const a = annotations[i];
+            if (a.type === DrawMode.RECTANGLE && isPointInRectangle(zoom, mousePoint, a)) {
+                const area = a.width * a.height;
+                if (area < minArea) {
+                    minArea = area;
+                    selectedIndex = i;
+                }
+            }
+            else if (a.type === DrawMode.POLYGON && isPointInOrOnPolygon(zoom, mousePoint, a)) {
+                selectedIndex = i;
+                break; // polygon has precedence
+            }
+        }
+    }
+    annotations.forEach((a) => (a.selected = false));
+    if (selectedIndex >= 0) {
+        annotations[selectedIndex].selected = true;
+        return annotations[selectedIndex];
+    }
+    else {
+        return null;
+    }
+}

package/dist/engine/annotation/polygon/polygonController.d.ts

@@ -0,0 +1,34 @@
+import { AnnotationEngine } from '../../public/annotationEngine';
+import { MouseAction } from '../../utils/mouseActions';
+import { PointState, Point } from '../../types';
+import { PolygonAnchor } from './polygonTypes';
+export declare class PolygonController {
+    private readonly engine;
+    private mouseAction;
+    private mousePoint;
+    private prevMousePoint;
+    private drawingPoints;
+    private polygonAnchor;
+    private needsRedraw;
+    private isDrawingNewPolygon;
+    private isCompletingPolygon;
+    private hasMoved;
+    private hoverEdgeTimer;
+    private isEdgeInsertReady;
+    constructor(engine: AnnotationEngine);
+    getRenderState(): {
+        mousePoint: PointState;
+        drawingPoints: Point[];
+        mouseAction: MouseAction | null;
+        anchor: PolygonAnchor | null;
+        isEdgeInsertReady: boolean;
+    };
+    shouldRedraw(): boolean;
+    begin(event: MouseEvent): true | undefined;
+    move(event: MouseEvent): boolean;
+    end(event: MouseEvent): true | undefined;
+    leave(event: MouseEvent): boolean;
+    cancel(): boolean;
+    private commitPolygon;
+    private reset;
+}

package/dist/engine/annotation/polygon/polygonController.js

@@ -0,0 +1,252 @@
+import { cloneDeep } from '../../utils/cloneDeep';
+import { isMouseClickAction, isMouseDragAction, MouseAction } from '../../utils/mouseActions';
+import { getCanvasMousePoint } from '../../utils/mousePoint';
+import { updateActivePolygonAnchor } from './polygonHitTest';
+import { selectAnnotationAtPoint } from '../hitTest';
+import { applyPolygonMove, applyPolygonResize } from './polygonTransform';
+import { DrawMode } from '../annotationTypes';
+import { clampPointToImage, clipLineToImage, ACTIVE_POINT_SIZE } from './polygonMath';
+export class PolygonController {
+    constructor(engine) {
+        this.engine = engine;
+        this.mouseAction = null;
+        this.mousePoint = { x: 0, y: 0, selected: false };
+        this.prevMousePoint = null;
+        this.drawingPoints = [];
+        this.polygonAnchor = null;
+        this.needsRedraw = false;
+        this.isDrawingNewPolygon = false;
+        this.isCompletingPolygon = false;
+        this.hasMoved = false;
+        this.hoverEdgeTimer = null;
+        this.isEdgeInsertReady = false;
+    }
+    getRenderState() {
+        return {
+            mousePoint: this.mousePoint,
+            drawingPoints: this.drawingPoints,
+            mouseAction: this.mouseAction,
+            anchor: this.isEdgeInsertReady
+                ? this.polygonAnchor
+                : this.polygonAnchor?.type === 'edge'
+                    ? null
+                    : this.polygonAnchor,
+            isEdgeInsertReady: this.isEdgeInsertReady,
+        };
+    }
+    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);
+        this.mouseAction = MouseAction.LEFT;
+        this.mousePoint = mousePoint;
+        this.hasMoved = false;
+        // Drawing new polygon logic
+        if (this.isDrawingNewPolygon) {
+            let nextPoint = mousePoint;
+            if (this.drawingPoints.length > 0) {
+                nextPoint = clipLineToImage(this.drawingPoints[this.drawingPoints.length - 1], mousePoint, dw, dh);
+            }
+            else {
+                nextPoint = clampPointToImage(mousePoint.x, mousePoint.y, dw, dh);
+            }
+            if (this.drawingPoints.length >= 3) {
+                // Double click or click on start point
+                const distToStart = Math.sqrt((nextPoint.x - this.drawingPoints[0].x) ** 2 + (nextPoint.y - this.drawingPoints[0].y) ** 2);
+                if (event.detail >= 2 || distToStart <= (ACTIVE_POINT_SIZE * 2) / zoom) {
+                    this.commitPolygon();
+                    return true;
+                }
+            }
+            this.drawingPoints.push(nextPoint);
+            this.needsRedraw = true;
+            return true;
+        }
+        // Hit test existing polygon
+        const annotations = this.engine.getAnnotations();
+        const currentSelected = this.engine.getSelectedAnnotation();
+        const targetAnnotation = selectAnnotationAtPoint(zoom, mousePoint, annotations);
+        if (targetAnnotation !== currentSelected) {
+            this.engine.setSelectedAnnotation(targetAnnotation);
+            this.engine.setAnnotations(annotations);
+        }
+        this.polygonAnchor = updateActivePolygonAnchor(zoom, mousePoint, targetAnnotation);
+        if (this.polygonAnchor && this.polygonAnchor.type === 'edge') {
+            if (this.hoverEdgeTimer) {
+                window.clearTimeout(this.hoverEdgeTimer);
+                this.hoverEdgeTimer = null;
+            }
+            if (this.isEdgeInsertReady) {
+                const selected = this.engine.getSelectedAnnotation();
+                if (selected && selected.type === DrawMode.POLYGON) {
+                    const poly = selected;
+                    const insertIdx = this.polygonAnchor.edgeIndex + 1;
+                    poly.points.splice(insertIdx, 0, this.polygonAnchor.insertPoint);
+                    this.polygonAnchor = { type: 'point', pointIndex: insertIdx };
+                    this.engine.commitHistory(true);
+                    this.isEdgeInsertReady = false;
+                    this.needsRedraw = true;
+                    return true;
+                }
+            }
+        }
+        if (!this.polygonAnchor && !targetAnnotation) {
+            if (mousePoint.x < 0 || mousePoint.y < 0 || mousePoint.x > dw || mousePoint.y > dh) {
+                return true;
+            }
+            // Begin new polygon
+            this.isDrawingNewPolygon = true;
+            this.drawingPoints = [clampPointToImage(mousePoint.x, mousePoint.y, dw, dh)];
+            this.needsRedraw = true;
+        }
+        return true;
+    }
+    move(event) {
+        this.needsRedraw = false;
+        const imageCanvasState = this.engine.getImageCanvasState();
+        const { dw, dh, zoom } = imageCanvasState;
+        this.prevMousePoint = cloneDeep(this.mousePoint);
+        this.mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), imageCanvasState);
+        if (this.isDrawingNewPolygon) {
+            this.needsRedraw = true;
+            return true;
+        }
+        if (!isMouseDragAction(event.buttons, MouseAction.LEFT)) {
+            const currentSelected = this.engine.getSelectedAnnotation();
+            if (currentSelected && currentSelected.type === DrawMode.POLYGON) {
+                const newAnchor = updateActivePolygonAnchor(zoom, this.mousePoint, currentSelected);
+                const isSameAnchorType = this.polygonAnchor?.type === newAnchor?.type;
+                const isSameEdge = isSameAnchorType &&
+                    newAnchor?.type === 'edge' &&
+                    this.polygonAnchor?.edgeIndex === newAnchor.edgeIndex;
+                if (isSameEdge) {
+                    this.polygonAnchor = newAnchor;
+                    this.needsRedraw = true;
+                }
+                else {
+                    this.polygonAnchor = newAnchor;
+                    this.isEdgeInsertReady = false;
+                    if (this.hoverEdgeTimer) {
+                        window.clearTimeout(this.hoverEdgeTimer);
+                        this.hoverEdgeTimer = null;
+                    }
+                    if (newAnchor && newAnchor.type === 'edge') {
+                        this.hoverEdgeTimer = window.setTimeout(() => {
+                            this.isEdgeInsertReady = true;
+                            this.needsRedraw = true;
+                            this.engine.redrawAnnotations?.();
+                            this.engine.getAnnotationsCanvas().style.cursor = 'pointer';
+                        }, 1000);
+                    }
+                    this.needsRedraw = true;
+                }
+            }
+            return true;
+        }
+        this.hasMoved = true;
+        const selectedAnnotation = this.engine.getSelectedAnnotation();
+        if (selectedAnnotation && this.prevMousePoint) {
+            const params = {
+                annotations: this.engine.getAnnotations(),
+                dw,
+                dh,
+                mousePoint: this.mousePoint,
+                prevMousePoint: this.prevMousePoint,
+                polygonAnchor: this.polygonAnchor,
+            };
+            if (this.polygonAnchor) {
+                applyPolygonResize(params);
+            }
+            else {
+                applyPolygonMove(params);
+            }
+            this.needsRedraw = true;
+        }
+        return true;
+    }
+    end(event) {
+        if (!isMouseClickAction(event.button, MouseAction.LEFT))
+            return;
+        if (this.isDrawingNewPolygon) {
+            // Do nothing, wait for double click or close to finish
+            return true;
+        }
+        if (this.isCompletingPolygon) {
+            this.isCompletingPolygon = false;
+            return true;
+        }
+        if (this.hasMoved) {
+            if (this.engine.getSelectedAnnotation()) {
+                this.engine.commitHistory(true);
+            }
+        }
+        else {
+            const imageCanvasState = this.engine.getImageCanvasState();
+            const mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), imageCanvasState);
+            const annotations = this.engine.getAnnotations();
+            const selected = selectAnnotationAtPoint(imageCanvasState.zoom, mousePoint, annotations);
+            if (selected !== this.engine.getSelectedAnnotation()) {
+                this.engine.setSelectedAnnotation(selected);
+            }
+        }
+        this.mouseAction = null;
+        this.hasMoved = false;
+        if (this.hoverEdgeTimer) {
+            window.clearTimeout(this.hoverEdgeTimer);
+            this.hoverEdgeTimer = null;
+        }
+        return true;
+    }
+    leave(event) {
+        this.mousePoint = getCanvasMousePoint(event, this.engine.getImageCanvas(), this.engine.getImageCanvasState());
+        return true;
+    }
+    cancel() {
+        if (this.hoverEdgeTimer) {
+            window.clearTimeout(this.hoverEdgeTimer);
+            this.hoverEdgeTimer = null;
+        }
+        if (this.isDrawingNewPolygon) {
+            this.reset();
+            this.needsRedraw = true;
+            return true;
+        }
+        return false;
+    }
+    commitPolygon() {
+        if (this.drawingPoints.length < 3) {
+            this.reset();
+            return;
+        }
+        const label = this.engine.getDrawing().label;
+        const points = Array.from(this.drawingPoints);
+        this.engine.appendAnnotation({
+            label,
+            type: DrawMode.POLYGON,
+            points,
+            selected: false,
+        });
+        this.engine.commitHistory(true);
+        this.reset();
+        this.isCompletingPolygon = true;
+    }
+    reset() {
+        if (this.hoverEdgeTimer) {
+            window.clearTimeout(this.hoverEdgeTimer);
+            this.hoverEdgeTimer = null;
+        }
+        this.mouseAction = null;
+        this.polygonAnchor = null;
+        this.isDrawingNewPolygon = false;
+        this.drawingPoints = [];
+        this.hasMoved = false;
+        this.needsRedraw = true;
+        this.isCompletingPolygon = false;
+        this.isEdgeInsertReady = false;
+    }
+}

package/dist/engine/annotation/polygon/polygonHitTest.d.ts

@@ -0,0 +1,6 @@
+import { Point } from '../../types';
+import { Annotation, PolygonAnnotation } from '../annotationTypes';
+import { PolygonAnchor } from './polygonTypes';
+export declare function selectPolygonAtPoint(zoom: number, mousePoint: Point, annotations: Annotation[]): Annotation | null;
+export declare function updateActivePolygonAnchor(zoom: number, mousePoint: Point, selectedAnnotation: Annotation | null): PolygonAnchor | null;
+export declare function getPolygonCursor(mousePoint: Point, annotation: PolygonAnnotation, zoom: number, isEdgeInsertReady?: boolean): string;

package/dist/engine/annotation/polygon/polygonHitTest.js

@@ -0,0 +1,84 @@
+import { DrawMode } from '../annotationTypes';
+import { ACTIVE_POINT_SIZE, distToSegment, isInsidePolygon, projectOnSegment } from './polygonMath';
+export function selectPolygonAtPoint(zoom, mousePoint, annotations) {
+    const padding = ACTIVE_POINT_SIZE / zoom;
+    const isPointInOrOnPolygon = (a) => {
+        if (a.points.length < 3)
+            return false;
+        if (isInsidePolygon(mousePoint, a.points))
+            return true;
+        // Check edges
+        for (let i = 0; i < a.points.length; i++) {
+            const p1 = a.points[i];
+            const p2 = a.points[(i + 1) % a.points.length];
+            if (distToSegment(mousePoint, p1, p2) <= padding) {
+                return true;
+            }
+        }
+        return false;
+    };
+    let selectedIndex = -1;
+    const currentIndex = annotations.findIndex((a) => a.selected);
+    if (currentIndex >= 0) {
+        const c = annotations[currentIndex];
+        if (c.type === DrawMode.POLYGON && isPointInOrOnPolygon(c)) {
+            selectedIndex = currentIndex;
+        }
+    }
+    if (selectedIndex === -1) {
+        for (let i = annotations.length - 1; i >= 0; i--) {
+            const a = annotations[i];
+            if (a.type === DrawMode.POLYGON && isPointInOrOnPolygon(a)) {
+                selectedIndex = i;
+                break;
+            }
+        }
+    }
+    annotations.forEach((a) => (a.selected = false));
+    if (selectedIndex >= 0) {
+        annotations[selectedIndex].selected = true;
+        return annotations[selectedIndex];
+    }
+    else {
+        return null;
+    }
+}
+export function updateActivePolygonAnchor(zoom, mousePoint, selectedAnnotation) {
+    if (!selectedAnnotation || selectedAnnotation.type !== DrawMode.POLYGON)
+        return null;
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    const { points } = selectedAnnotation;
+    // Check points first
+    for (let i = 0; i < points.length; i++) {
+        const p = points[i];
+        if (mousePoint.x >= p.x - pointSize / 2 &&
+            mousePoint.x <= p.x + pointSize / 2 &&
+            mousePoint.y >= p.y - pointSize / 2 &&
+            mousePoint.y <= p.y + pointSize / 2) {
+            return { type: 'point', pointIndex: i };
+        }
+    }
+    // Check edges
+    for (let i = 0; i < points.length; i++) {
+        const p1 = points[i];
+        const p2 = points[(i + 1) % points.length];
+        if (distToSegment(mousePoint, p1, p2) <= pointSize / 2) {
+            const projection = projectOnSegment(mousePoint, p1, p2);
+            return { type: 'edge', edgeIndex: i, insertPoint: { x: projection.x, y: projection.y, selected: false } };
+        }
+    }
+    return null;
+}
+export function getPolygonCursor(mousePoint, annotation, zoom, isEdgeInsertReady) {
+    const anchor = updateActivePolygonAnchor(zoom, mousePoint, annotation);
+    if (anchor) {
+        if (anchor.type === 'point')
+            return 'pointer';
+        if (anchor.type === 'edge')
+            return isEdgeInsertReady ? 'pointer' : 'move';
+    }
+    if (annotation.points.length >= 3 && isInsidePolygon(mousePoint, annotation.points)) {
+        return 'move';
+    }
+    return 'default';
+}

package/dist/engine/annotation/polygon/polygonInteraction.d.ts

@@ -0,0 +1,19 @@
+import { RedrawLayers } from '../../interaction/interface';
+import { PolygonController } from './polygonController';
+export declare class PolygonInteraction {
+    private readonly controller;
+    constructor(controller: PolygonController);
+    getRenderState(): {
+        mousePoint: import("../../types").PointState;
+        drawingPoints: import("../../types").Point[];
+        mouseAction: import("../../utils/mouseActions").MouseAction | null;
+        anchor: import("./polygonTypes").PolygonAnchor | null;
+        isEdgeInsertReady: boolean;
+    };
+    getRedrawLayers(): RedrawLayers;
+    handleMouseDown(e: MouseEvent): boolean;
+    handleMouseMove(e: MouseEvent): boolean;
+    handleMouseUp(e: MouseEvent): boolean;
+    handleMouseLeave(e: MouseEvent): boolean;
+    handleKeyDown(e: KeyboardEvent): boolean;
+}

package/dist/engine/annotation/polygon/polygonInteraction.js

@@ -0,0 +1,36 @@
+export class PolygonInteraction {
+    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;
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Escape') {
+            return this.controller.cancel();
+        }
+        return false;
+    }
+}

package/dist/engine/annotation/polygon/polygonMath.d.ts

@@ -0,0 +1,7 @@
+import { Point } from '../../types';
+export declare const ACTIVE_POINT_SIZE = 8;
+export declare function clampPointToImage(x: number, y: number, dw: number, dh: number): Point;
+export declare function clipLineToImage(start: Point, end: Point, dw: number, dh: number): Point;
+export declare function isInsidePolygon(point: Point, vs: Point[]): boolean;
+export declare function projectOnSegment(p: Point, v: Point, w: Point): Point;
+export declare function distToSegment(p: Point, v: Point, w: Point): number;

package/dist/engine/annotation/polygon/polygonMath.js

@@ -0,0 +1,47 @@
+export const ACTIVE_POINT_SIZE = 8;
+export function clampPointToImage(x, y, dw, dh) {
+    return {
+        x: Math.max(0, Math.min(x, dw)),
+        y: Math.max(0, Math.min(y, dh)),
+    };
+}
+export function clipLineToImage(start, end, dw, dh) {
+    let t = 1.0;
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (end.x < 0)
+        t = Math.min(t, (0 - start.x) / dx);
+    if (end.x > dw)
+        t = Math.min(t, (dw - start.x) / dx);
+    if (end.y < 0)
+        t = Math.min(t, (0 - start.y) / dy);
+    if (end.y > dh)
+        t = Math.min(t, (dh - start.y) / dy);
+    return {
+        x: start.x + t * dx,
+        y: start.y + t * dy,
+    };
+}
+export function isInsidePolygon(point, vs) {
+    let isInside = false;
+    for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
+        const xi = vs[i].x, yi = vs[i].y;
+        const xj = vs[j].x, yj = vs[j].y;
+        const intersect = yi > point.y !== yj > point.y && point.x < ((xj - xi) * (point.y - yi)) / (yj - yi) + xi;
+        if (intersect)
+            isInside = !isInside;
+    }
+    return isInside;
+}
+export function projectOnSegment(p, v, w) {
+    const l2 = (w.x - v.x) ** 2 + (w.y - v.y) ** 2;
+    if (l2 === 0)
+        return v;
+    let t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
+    t = Math.max(0, Math.min(1, t));
+    return { x: v.x + t * (w.x - v.x), y: v.y + t * (w.y - v.y) };
+}
+export function distToSegment(p, v, w) {
+    const projection = projectOnSegment(p, v, w);
+    return Math.sqrt((p.x - projection.x) ** 2 + (p.y - projection.y) ** 2);
+}

package/dist/engine/annotation/polygon/polygonRenderer.d.ts

@@ -0,0 +1,2 @@
+import { AnnotationsRenderer } from '../../renderer/interface';
+export declare const polygonRenderer: AnnotationsRenderer;