@deepnoid/canvas 0.1.78 → 0.1.80

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

@@ -0,0 +1,79 @@
+import { ACTIVE_POINT_SIZE, clipLineToImage } from './polygonMath';
+import { drawCross } from '../../renderer/drawCross';
+import { DrawMode } from '../annotationTypes';
+export const polygonRenderer = {
+    drawAnnotation(context, engine, annotation) {
+        if (annotation.type !== DrawMode.POLYGON)
+            return;
+        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()) {
+            const renderState = engine.getDrawRenderState();
+            drawActivePoints(context, annotation, zoom, renderState?.anchor);
+        }
+    },
+    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 && Array.isArray(renderState.drawingPoints) && renderState.drawingPoints.length > 0) {
+            // Draw already placed points
+            drawPolygon(context, renderState.drawingPoints, zoom, lineSize, color || '#00ff00', false);
+            // Draw line from last point to current mouse
+            if (renderState.mousePoint) {
+                context.beginPath();
+                context.lineWidth = lineSize / zoom;
+                context.strokeStyle = color || '#FF4136';
+                const lastPoint = renderState.drawingPoints[renderState.drawingPoints.length - 1];
+                context.moveTo(lastPoint.x, lastPoint.y);
+                const clampedMouse = clipLineToImage(lastPoint, renderState.mousePoint, dw, dh);
+                context.lineTo(clampedMouse.x, clampedMouse.y);
+                context.stroke();
+            }
+        }
+        if (pointerState?.mousePoint && !engine.getSelectedAnnotation()) {
+            drawCross(context, pointerState.mousePoint, dw, dh, zoom, lineSize);
+        }
+    },
+};
+function drawPolygon(context, points, zoom, drawLineSize, color, closePath) {
+    if (points.length === 0)
+        return;
+    context.beginPath();
+    context.lineWidth = drawLineSize / zoom;
+    context.strokeStyle = color || '#FF4136';
+    context.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        context.lineTo(points[i].x, points[i].y);
+    }
+    if (closePath && points.length > 2) {
+        context.closePath();
+    }
+    context.stroke();
+}
+function drawActivePoints(ctx, annotation, zoom, anchor) {
+    const { points, selected } = annotation;
+    if (!selected)
+        return;
+    const pointSize = ACTIVE_POINT_SIZE / zoom;
+    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);
+    });
+    if (anchor && anchor.type === 'edge' && anchor.insertPoint) {
+        const pt = anchor.insertPoint;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.fillRect(pt.x - pointSize / 2, pt.y - pointSize / 2, pointSize, pointSize);
+        ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.lineWidth = 1 / zoom;
+        ctx.strokeRect(pt.x - pointSize / 2, pt.y - pointSize / 2, pointSize, pointSize);
+    }
+}

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

@@ -0,0 +1,14 @@
+import { Annotation } from '../annotationTypes';
+import { PolygonAnchor } from './polygonTypes';
+import { Point } from '../../types';
+type Params = {
+    annotations: Annotation[];
+    dw: number;
+    dh: number;
+    mousePoint: Point;
+    prevMousePoint: Point;
+    polygonAnchor: PolygonAnchor | null;
+};
+export declare function applyPolygonMove({ annotations, mousePoint, prevMousePoint, dw, dh }: Params): void;
+export declare function applyPolygonResize({ annotations, mousePoint, prevMousePoint, polygonAnchor, dw, dh }: Params): void;
+export {};

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

@@ -0,0 +1,68 @@
+import { DrawMode } from '../annotationTypes';
+export function applyPolygonMove({ annotations, mousePoint, prevMousePoint, dw, dh }) {
+    const selected = annotations.find((a) => a.selected);
+    if (!selected || selected.type !== DrawMode.POLYGON)
+        return;
+    let dx = mousePoint.x - prevMousePoint.x;
+    let dy = mousePoint.y - prevMousePoint.y;
+    let minX = Number.MAX_SAFE_INTEGER, minY = Number.MAX_SAFE_INTEGER, maxX = Number.MIN_SAFE_INTEGER, maxY = Number.MIN_SAFE_INTEGER;
+    for (const p of selected.points) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    if (minX + dx < 0)
+        dx = -minX;
+    if (maxX + dx > dw)
+        dx = dw - maxX;
+    if (minY + dy < 0)
+        dy = -minY;
+    if (maxY + dy > dh)
+        dy = dh - maxY;
+    const newPoints = selected.points.map((p) => ({
+        x: p.x + dx,
+        y: p.y + dy,
+    }));
+    selected.points = newPoints;
+}
+export function applyPolygonResize({ annotations, mousePoint, prevMousePoint, polygonAnchor, dw, dh }) {
+    const selected = annotations.find((a) => a.selected);
+    if (!selected || selected.type !== DrawMode.POLYGON || !polygonAnchor)
+        return;
+    if (polygonAnchor.type === 'point') {
+        selected.points[polygonAnchor.pointIndex] = {
+            x: Math.max(0, Math.min(dw, mousePoint.x)),
+            y: Math.max(0, Math.min(dh, mousePoint.y)),
+        };
+    }
+    else if (polygonAnchor.type === 'edge') {
+        let dx = mousePoint.x - prevMousePoint.x;
+        let dy = mousePoint.y - prevMousePoint.y;
+        const p1 = selected.points[polygonAnchor.edgeIndex];
+        const p2Offset = (polygonAnchor.edgeIndex + 1) % selected.points.length;
+        const p2 = selected.points[p2Offset];
+        let allowedDx = dx;
+        let allowedDy = dy;
+        const minX = Math.min(p1.x, p2.x);
+        const maxX = Math.max(p1.x, p2.x);
+        const minY = Math.min(p1.y, p2.y);
+        const maxY = Math.max(p1.y, p2.y);
+        if (minX + allowedDx < 0)
+            allowedDx = -minX;
+        if (maxX + allowedDx > dw)
+            allowedDx = dw - maxX;
+        if (minY + allowedDy < 0)
+            allowedDy = -minY;
+        if (maxY + allowedDy > dh)
+            allowedDy = dh - maxY;
+        p1.x += allowedDx;
+        p1.y += allowedDy;
+        p2.x += allowedDx;
+        p2.y += allowedDy;
+    }
+}

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

@@ -0,0 +1,9 @@
+import { PointState } from '../../types';
+export type PolygonAnchor = {
+    type: 'point';
+    pointIndex: number;
+} | {
+    type: 'edge';
+    edgeIndex: number;
+    insertPoint: PointState;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -2,7 +2,8 @@ import { cloneDeep } from '../../utils/cloneDeep';
 import { isMouseClickAction, isMouseDragAction, MouseAction } from '../../utils/mouseActions';
 import { isInsideImage, clampBoundingBoxToImage } from './rectangleMath';
 import { getCanvasMousePoint } from '../../utils/mousePoint';
-import { selectRectangleAtPoint, updateActiveRectangleAnchor } from './rectangleHitTest';
+import { updateActiveRectangleAnchor } from './rectangleHitTest';
+import { selectAnnotationAtPoint } from '../hitTest';
 import { applyRectangleMove, applyRectangleResize } from './rectangleTransform';
 import { DrawMode } from '../annotationTypes';
 const DRAG_THRESHOLD = 3;
@@ -45,21 +46,13 @@ export class RectangleController {
         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));
+        const targetAnnotation = selectAnnotationAtPoint(zoom, mousePoint, annotations);
+        if (targetAnnotation !== currentSelected) {
+            this.engine.setSelectedAnnotation(targetAnnotation);
             this.engine.setAnnotations(annotations);
         }
+        this.targetIndexOnBegin = targetAnnotation ? annotations.indexOf(targetAnnotation) : -1;
+        this.rectangleAnchor = updateActiveRectangleAnchor(zoom, mousePoint, targetAnnotation);
         return true;
     }
     move(event) {
@@ -134,7 +127,7 @@ export class RectangleController {
             }
             else if (!this.hasMoved) {
                 const annotations = this.engine.getAnnotations();
-                const selected = selectRectangleAtPoint(zoom, mousePoint, annotations);
+                const selected = selectAnnotationAtPoint(zoom, mousePoint, annotations);
                 this.engine.setSelectedAnnotation(selected);
                 this.engine.setAnnotations(annotations);
             }

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

@@ -48,12 +48,13 @@ export function selectRectangleAtPoint(zoom, mousePoint, annotations) {
     }
 }
 export function updateActiveRectangleAnchor(zoom, mousePoint, selectedAnnotation) {
-    if (!selectedAnnotation)
+    if (!selectedAnnotation || selectedAnnotation.type !== DrawMode.RECTANGLE)
         return null;
-    const points = getRectangleCorners(selectedAnnotation);
+    const rect = selectedAnnotation;
+    const points = getRectangleCorners(rect);
     const pointSize = ACTIVE_POINT_SIZE / zoom;
     const { x: mouseX, y: mouseY } = mousePoint;
-    const { x, y, width: w, height: h } = selectedAnnotation;
+    const { x, y, width: w, height: h } = rect;
     if (mouseX >= points[0].x - pointSize / 2 &&
         mouseX <= points[0].x + pointSize / 2 &&
         mouseY >= points[0].y - pointSize / 2 &&
@@ -96,7 +97,7 @@ export function updateActiveRectangleAnchor(zoom, mousePoint, selectedAnnotation
 }
 export function getRectangleCursorByAnnotations(mousePoint, annotations, zoom) {
     const target = annotations.find((a) => a.selected);
-    if (!target)
+    if (!target || target.type !== DrawMode.RECTANGLE)
         return 'default';
     return getRectangleCursor(mousePoint, target, zoom);
 }

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

@@ -2,6 +2,7 @@ import { ACTIVE_POINT_SIZE } from './rectangleMath';
 import { MouseAction } from '../../utils/mouseActions';
 import { drawCross } from '../../renderer/drawCross';
 import { getRectangleCorners } from './rectangleHitTest';
+import { DrawMode } from '../annotationTypes';
 export const rectangleRenderer = {
     drawAnnotation(context, engine, annotation) {
         const { zoom } = engine.getImageCanvasState();
@@ -28,6 +29,8 @@ export const rectangleRenderer = {
     },
 };
 function drawActiveRect(ctx, annotation, zoom, drawLineSize) {
+    if (annotation.type !== DrawMode.RECTANGLE)
+        return;
     const { x, y, width, height, selected } = annotation;
     if (!selected)
         return;
@@ -44,6 +47,8 @@ function drawActiveRect(ctx, annotation, zoom, drawLineSize) {
     });
 }
 export function getRectangleCursor(mousePoint, annotation, zoom) {
+    if (annotation.type !== DrawMode.RECTANGLE)
+        return 'default';
     const pointSize = ACTIVE_POINT_SIZE / zoom;
     const { x, y, width: w, height: h } = annotation;
     if (w <= 0 || h <= 0)
@@ -71,6 +76,9 @@ export function getRectangleCursor(mousePoint, annotation, zoom) {
         return 'ew-resize';
     if (mouseY >= y && mouseY <= y + h && Math.abs(mouseX - (x + w)) <= pointSize / 2)
         return 'ew-resize';
+    if (mouseX > x && mouseX < x + w && mouseY > y && mouseY < y + h) {
+        return 'move';
+    }
     return 'default';
 }
 function drawNewRectFromPoints(context, startPoint, endPoint, zoom, drawLineSize, color) {

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

@@ -1,65 +1,68 @@
+import { DrawMode } from '../annotationTypes';
 import { RectangleAnchor } from './rectangleTypes';
 export function applyRectangleMove({ annotations, dw, dh, mousePoint, prevMousePoint }) {
     if (!mousePoint || !prevMousePoint)
         return;
     const findIndex = annotations.findIndex((annotation) => annotation.selected);
     const findAnnotation = annotations[findIndex];
-    if (findIndex < 0 || !findAnnotation)
+    if (findIndex < 0 || !findAnnotation || findAnnotation.type !== DrawMode.RECTANGLE)
         return;
+    const rect = findAnnotation;
     const dx = mousePoint.x - prevMousePoint.x;
     const dy = mousePoint.y - prevMousePoint.y;
-    const newX = findAnnotation.x + dx;
-    const newY = findAnnotation.y + dy;
-    findAnnotation.x = Math.max(0, Math.min(newX, dw - findAnnotation.width));
-    findAnnotation.y = Math.max(0, Math.min(newY, dh - findAnnotation.height));
+    const newX = rect.x + dx;
+    const newY = rect.y + dy;
+    rect.x = Math.max(0, Math.min(newX, dw - rect.width));
+    rect.y = Math.max(0, Math.min(newY, dh - rect.height));
 }
 export function applyRectangleResize({ annotations, dw, dh, mousePoint, prevMousePoint, rectangleAnchor, }) {
     const findIndex = annotations.findIndex((annotation) => annotation.selected);
     const findAnnotation = annotations[findIndex];
-    if (findIndex >= 0 && findAnnotation) {
+    if (findIndex >= 0 && findAnnotation && findAnnotation.type === DrawMode.RECTANGLE) {
+        const rect = findAnnotation;
         const dx = mousePoint.x - prevMousePoint.x;
         const dy = mousePoint.y - prevMousePoint.y;
         switch (rectangleAnchor) {
             case RectangleAnchor.LEFT_TOP:
-                findAnnotation.x += dx;
-                findAnnotation.y += dy;
-                findAnnotation.width -= dx;
-                findAnnotation.height -= dy;
+                rect.x += dx;
+                rect.y += dy;
+                rect.width -= dx;
+                rect.height -= dy;
                 break;
             case RectangleAnchor.RIGHT_TOP:
-                findAnnotation.y += dy;
-                findAnnotation.width += dx;
-                findAnnotation.height -= dy;
+                rect.y += dy;
+                rect.width += dx;
+                rect.height -= dy;
                 break;
             case RectangleAnchor.LEFT_BOTTOM:
-                findAnnotation.x += dx;
-                findAnnotation.width -= dx;
-                findAnnotation.height += dy;
+                rect.x += dx;
+                rect.width -= dx;
+                rect.height += dy;
                 break;
             case RectangleAnchor.RIGHT_BOTTOM:
-                findAnnotation.width += dx;
-                findAnnotation.height += dy;
+                rect.width += dx;
+                rect.height += dy;
                 break;
             case RectangleAnchor.TOP:
-                findAnnotation.y += dy;
-                findAnnotation.height -= dy;
+                rect.y += dy;
+                rect.height -= dy;
                 break;
             case RectangleAnchor.BOTTOM:
-                findAnnotation.height += dy;
+                rect.height += dy;
                 break;
             case RectangleAnchor.LEFT:
-                findAnnotation.x += dx;
-                findAnnotation.width -= dx;
+                rect.x += dx;
+                rect.width -= dx;
                 break;
             case RectangleAnchor.RIGHT:
-                findAnnotation.width += dx;
+                rect.width += dx;
                 break;
             default:
                 break;
         }
-        findAnnotation.x = Math.max(0, Math.min(findAnnotation.x, dw - findAnnotation.width));
-        findAnnotation.y = Math.max(0, Math.min(findAnnotation.y, dh - findAnnotation.height));
-        findAnnotation.width = Math.max(0, Math.min(findAnnotation.width, dw - findAnnotation.x));
-        findAnnotation.height = Math.max(0, Math.min(findAnnotation.height, dh - findAnnotation.y));
+        rect.x = Math.max(0, Math.min(rect.x, dw - rect.width));
+        rect.y = Math.max(0, Math.min(rect.y, dh - rect.height));
+        rect.width = Math.max(0, Math.min(rect.width, dw - rect.x));
+        rect.height = Math.max(0, Math.min(rect.height, dh - rect.y));
     }
 }

package/dist/engine/interaction/drawModeRouter.js

@@ -1,8 +1,34 @@
 import { RectangleController } from '../annotation/rectangle/rectangleController';
 import { RectangleInteraction } from '../annotation/rectangle/rectangleInteraction';
+import { PolygonController } from '../annotation/polygon/polygonController';
+import { PolygonInteraction } from '../annotation/polygon/polygonInteraction';
 import { DrawMode } from '../annotation/annotationTypes';
 export function drawModeRouter(engine) {
-    const rectangle = new RectangleInteraction(new RectangleController(engine));
+    const rectangleCtrl = new RectangleController(engine);
+    const polygonCtrl = new PolygonController(engine);
+    const rectangle = new RectangleInteraction(rectangleCtrl);
+    const polygon = new PolygonInteraction(polygonCtrl);
+    let currentDragInteraction = null;
+    function getActiveInteraction() {
+        // If an interaction is mid-draw, keep it stickied (Polygon can take multiple clicks)
+        if (polygonCtrl.isDrawingNewPolygon)
+            return polygon;
+        if (rectangleCtrl.isDrawingNewRectangle)
+            return rectangle;
+        const selected = engine.getSelectedAnnotation();
+        if (selected) {
+            if (selected.type === DrawMode.RECTANGLE)
+                return rectangle;
+            if (selected.type === DrawMode.POLYGON)
+                return polygon;
+        }
+        const drawMode = engine.getDrawing().mode;
+        if (drawMode === DrawMode.RECTANGLE)
+            return rectangle;
+        if (drawMode === DrawMode.POLYGON)
+            return polygon;
+        return rectangle; // fallback
+    }
     return {
         getType() {
             const drawMode = engine.getDrawing().mode;
@@ -11,44 +37,38 @@ export function drawModeRouter(engine) {
             return false;
         },
         getRenderState() {
-            const drawMode = engine.getDrawing().mode;
-            if (drawMode === DrawMode.RECTANGLE) {
-                return rectangle.getRenderState();
-            }
-            return null;
+            const active = getActiveInteraction();
+            return active.getRenderState ? active.getRenderState() : null;
         },
         getRedrawLayers() {
-            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
-                return rectangle.getRedrawLayers();
-            }
-            return {
-                imageCanvas: false,
-                annotationsCanvas: false,
-            };
+            return getActiveInteraction().getRedrawLayers?.() || { imageCanvas: false, annotationsCanvas: false };
         },
         handleMouseDown(e) {
             if (!engine.isEditable())
                 return false;
-            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
-                return rectangle.handleMouseDown(e);
-            }
-            return false;
+            currentDragInteraction = getActiveInteraction();
+            return currentDragInteraction.handleMouseDown?.(e) ?? false;
         },
         handleMouseMove(e) {
-            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
-                return rectangle.handleMouseMove(e);
-            }
-            return false;
+            const active = currentDragInteraction || getActiveInteraction();
+            return active.handleMouseMove?.(e) ?? false;
         },
         handleMouseUp(e) {
-            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
-                return rectangle.handleMouseUp(e);
-            }
-            return false;
+            const active = currentDragInteraction || getActiveInteraction();
+            const result = active.handleMouseUp?.(e) ?? false;
+            currentDragInteraction = null;
+            return result;
         },
         handleMouseLeave(e) {
-            if (engine.getDrawing().mode === DrawMode.RECTANGLE) {
-                return rectangle.handleMouseLeave(e);
+            const active = currentDragInteraction || getActiveInteraction();
+            const result = active.handleMouseLeave?.(e) ?? false;
+            currentDragInteraction = null;
+            return result;
+        },
+        handleKeyDown(e) {
+            const active = getActiveInteraction();
+            if (active.handleKeyDown) {
+                return active.handleKeyDown(e);
             }
             return false;
         },

package/dist/engine/interaction/interactionController.d.ts

@@ -10,4 +10,5 @@ export declare class InteractionController {
     handleMouseUp: (e: MouseEvent) => void;
     handleMouseLeave: (e: MouseEvent) => void;
     handleWheel: (e: WheelEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => RedrawLayers;
 }

package/dist/engine/interaction/interactionController.js

@@ -42,6 +42,23 @@ export class InteractionController {
                     break;
             }
         };
+        this.handleKeyDown = (e) => {
+            const layers = {
+                imageCanvas: false,
+                annotationsCanvas: false,
+            };
+            for (const interaction of this.interactions) {
+                const handled = interaction.handleKeyDown?.(e);
+                const interactionLayers = interaction.getRedrawLayers?.();
+                if (interactionLayers) {
+                    layers.imageCanvas = layers.imageCanvas || interactionLayers.imageCanvas;
+                    layers.annotationsCanvas = layers.annotationsCanvas || interactionLayers.annotationsCanvas;
+                }
+                if (handled)
+                    break;
+            }
+            return layers;
+        };
     }
     getInteractions() {
         return this.interactions;

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

@@ -12,4 +12,5 @@ export interface Interaction {
     handleMouseUp?(e: MouseEvent): boolean | void;
     handleMouseLeave?(e: MouseEvent): boolean | void;
     handleWheel?(e: WheelEvent): boolean | void;
+    handleKeyDown?(e: KeyboardEvent): boolean | void;
 }

package/dist/engine/interaction/pointerInteraction.js

@@ -1,5 +1,6 @@
 import { DrawMode } from '../annotation/annotationTypes';
 import { getRectangleCursor } from '../annotation/rectangle/rectangleRenderer';
+import { getPolygonCursor } from '../annotation/polygon/polygonHitTest';
 import { getCanvasMousePoint } from '../utils/mousePoint';
 export class PointerInteraction {
     constructor(engine) {
@@ -37,11 +38,15 @@ export class PointerInteraction {
         const canvas = this.engine.getAnnotationsCanvas();
         const annotation = this.engine.getSelectedAnnotation();
         const { zoom } = this.engine.getImageCanvasState();
-        const { mode } = this.engine.getDrawing();
         let cursor = 'default';
         if (annotation && this.mousePoint) {
-            if (mode === DrawMode.RECTANGLE)
+            if (annotation.type === DrawMode.RECTANGLE) {
                 cursor = getRectangleCursor(this.mousePoint, annotation, zoom);
+            }
+            else if (annotation.type === DrawMode.POLYGON) {
+                const renderState = this.engine.getDrawRenderState();
+                cursor = getPolygonCursor(this.mousePoint, annotation, zoom, renderState?.isEdgeInsertReady);
+            }
         }
         canvas.style.cursor = cursor;
     }

package/dist/engine/public/annotationEngine.d.ts

@@ -51,11 +51,12 @@ export declare class AnnotationEngine {
     clearCanvasAll(): void;
     private clearCanvas;
     resetCanvas(): void;
-    getAnnotations(): import("../annotation/annotationTypes").RectangleAnnotation[];
+    getAnnotations(): Annotation[];
     setAnnotations(annotation: Annotation[]): void;
     appendAnnotation(annotation: Annotation): void;
     private syncAnnotations;
     private drawAnnotations;
+    redrawAnnotations(): void;
     getSelectedAnnotation(): Annotation | null;
     setSelectedAnnotation(target: Annotation | null): void;
     getPointerRenderState(): {
@@ -67,6 +68,7 @@ export declare class AnnotationEngine {
     onMouseUp(e: MouseEvent): void;
     onMouseLeave(e: MouseEvent): void;
     onWheel(e: WheelEvent): void;
+    onKeyDown(e: KeyboardEvent): void;
     initHistory(annotations: Annotation[]): void;
     commitHistory(checkInit?: boolean): void;
     deleteSelected(): void;

package/dist/engine/public/annotationEngine.js

@@ -6,13 +6,14 @@ import { panZoomInteraction } from '../interaction/panZoomInteraction';
 import { rectangleRenderer } from '../annotation/rectangle/rectangleRenderer';
 import { PointerInteraction } from '../interaction/pointerInteraction';
 import { drawModeRouter } from '../interaction/drawModeRouter';
+import { polygonRenderer } from '../annotation/polygon/polygonRenderer';
 export class AnnotationEngine {
     constructor(params) {
         this.history = null;
         this.editable = true;
         this.renderers = {
             RECTANGLE: rectangleRenderer,
-            // POLYGON: polygonRenderer,
+            POLYGON: polygonRenderer,
         };
         this.imageCanvas = params.imageCanvas;
         this.image = params.image;
@@ -114,11 +115,14 @@ export class AnnotationEngine {
         this.drawCanvas(this.annotationsCanvas, undefined);
     }
     drawCanvas(canvas, image) {
-        const { moveX, moveY, zoomX, zoomY, dx, dy, zoom } = this.getImageCanvasState();
         const context = canvas.getContext('2d');
         if (!context)
             return;
+        context.save();
+        context.setTransform(1, 0, 0, 1, 0, 0);
         context.clearRect(0, 0, canvas.width, canvas.height);
+        context.restore();
+        const { moveX, moveY, zoomX, zoomY, dx, dy, zoom } = this.getImageCanvasState();
         context.save();
         context.translate(dx, dy);
         context.translate(moveX, moveY);
@@ -178,6 +182,9 @@ export class AnnotationEngine {
             renderer?.drawEditorUI?.(context, this);
         }
     }
+    redrawAnnotations() {
+        this.drawAnnotationsCanvas();
+    }
     getSelectedAnnotation() {
         return this.annotations.find((a) => a.selected) ?? null;
     }
@@ -193,6 +200,11 @@ export class AnnotationEngine {
         if (changed) {
             this.drawAnnotationsCanvas();
         }
+        if (target) {
+            // Dispatch custom event so React components can sync their drawMode state
+            const event = new CustomEvent('annotationSelected', { detail: { type: target.type } });
+            window.dispatchEvent(event);
+        }
     }
     // ----------------- Interaction -----------------
     getPointerRenderState() {
@@ -229,6 +241,15 @@ export class AnnotationEngine {
         this.interactionController.handleWheel(e);
         this.drawCanvasAll();
     }
+    onKeyDown(e) {
+        const layers = this.interactionController.handleKeyDown(e);
+        if (layers && layers.imageCanvas) {
+            this.drawImageCanvas();
+        }
+        if (layers && layers.annotationsCanvas) {
+            this.drawAnnotationsCanvas();
+        }
+    }
     // ----------------- History -----------------
     initHistory(annotations) {
         this.history = createHistory();