@reekon-tools/boldr-utils 1.6.12 → 1.6.14

package/dist/annotation/canvas/AnnotationCanvasSkia.d.ts

@@ -10,6 +10,9 @@ type AnimatedPoint = {
         y: number;
     };
 };
+type AnimatedNumber = number | {
+    value: number;
+};
 export interface AnnotationCanvasSkiaProps {
     width: number;
     height: number;
@@ -24,23 +27,50 @@ export interface AnnotationCanvasSkiaProps {
         path: SkPath | {
             value: SkPath;
         };
+        handoffPaths?: (SkPath | {
+            value: SkPath;
+        })[];
         color: string;
         width: number;
         cap?: StrokeCap;
+        dash?: boolean;
         opacity: number;
     } | null;
+    shapePreview?: {
+        path: SkPath | {
+            value: SkPath;
+        };
+        headPath: SkPath | {
+            value: SkPath;
+        };
+        color: string;
+        width: number;
+        cap?: StrokeCap;
+        dash?: boolean;
+    } | null;
     draggingId?: string | null;
     dragTransform?: Transforms3d | {
         value: Transforms3d;
     };
+    resizingId?: string | null;
+    resizeTransform?: Transforms3d | {
+        value: Transforms3d;
+    };
     selectedId?: string | null;
     endpointDragId?: string | null;
     liveLineP1?: AnimatedPoint;
     liveLineP2?: AnimatedPoint;
+    rectDragId?: string | null;
+    liveRect?: {
+        x: AnimatedNumber;
+        y: AnimatedNumber;
+        width: AnimatedNumber;
+        height: AnimatedNumber;
+    };
     handleRadius?: number | {
         value: number;
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, draggingId, dragTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Canvas, Circle, Group, Line, Path, Rect, Skia, } from '@shopify/react-native-skia';
-import { placementOf } from './measurementGeometry.js';
-import { arrowheadTriangle, toSkiaStrokeCap } from './strokeGeometry.js';
+import { Canvas, Circle, DashPathEffect, Group, Line, Path, Rect, Skia, } from '@shopify/react-native-skia';
+import { normalizeRect, placementOf } from './measurementGeometry.js';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from './strokeGeometry.js';
+import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeometry.js';
 import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
@@ -17,8 +18,9 @@ const MEASUREMENT_HANDLE_COLOR = '#0066FF';
 // Selection bounding box for strokes/shapes (measurements get handles instead).
 // Padding + stroke width are in doc units (scale with zoom) — simple and clear;
 // the box is only a "this is selected" affordance, not a precise gizmo.
+// SELECTION_PAD lives in textGeometry.ts (Skia-free) so the select tool can
+// hit-test the text resize handle, which sits on the padded box corner.
 const SELECTION_COLOR = '#0066FF';
-const SELECTION_PAD = 6;
 const SELECTION_STROKE = 1.5;
 // Bounds of a flat [x,y,x,y,…] stroke point array, or null if empty.
 const strokeBounds = (points) => {
@@ -84,7 +86,22 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // since the function-call pattern works identically on native we use it
 // in both Inners for consistency. Don't add hooks here; this is a plain
 // JSX-returning helper, not a component.
-export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, draggingId, dragTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId, transform: dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+                // Rectangle annotation: a stroked border whose center carries the
+                // tile. A corner drag renders from the live geometry (outside the
+                // group translate, like an endpoint drag); otherwise the committed
+                // rect + (when selected) four corner handles, wrapped for group move.
+                if (placementOf(placed) === 'rectangle' && placed.rect) {
+                    const isSelected = placed.id === selectedId;
+                    const isRectDrag = placed.id === rectDragId;
+                    const rectColor = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
+                    const rectWidth = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+                    if (isRectDrag && liveRect) {
+                        return (_jsx(Rect, { x: liveRect.x, y: liveRect.y, width: liveRect.width, height: liveRect.height, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }, placed.id));
+                    }
+                    const n = normalizeRect(placed.rect);
+                    return (_jsxs(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: [_jsx(Rect, { x: n.minX, y: n.minY, width: n.maxX - n.minX, height: n.maxY - n.minY, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: { x: n.minX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.minX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }, placed.id));
+                }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
                 const isEndpointDrag = placed.id === endpointDragId;
@@ -109,7 +126,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     p.close();
                     return p;
                 })();
-                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: p1, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: p2, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }));
+                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: p1, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: p2, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)
@@ -122,8 +139,20 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 const shape = effectiveCanvas.shapes.find((s) => s.id === selectedId);
                 if (shape) {
-                    const b = pointsBounds(shape.geometry.points);
-                    return b ? (_jsx(SelectionBox, { bounds: b, isDragging: isDragging, transform: dragTransform })) : null;
+                    // Text shapes derive their box from the estimated text bounds (the
+                    // stored geometry is just the top-left anchor) and add a corner
+                    // resize handle; both track the live resize transform so the chrome
+                    // scales with the shape during a native UI-thread resize.
+                    const isText = shape.kind === 'text';
+                    const b = isText
+                        ? textShapeBounds(shape)
+                        : pointsBounds(shape.geometry.points);
+                    if (!b)
+                        return null;
+                    const isResizing = shape.id === resizingId;
+                    const liveTransform = isResizing ? resizeTransform : dragTransform;
+                    const resizeGeom = isText ? textResizeGeometry(shape) : null;
+                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isDragging || isResizing, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isDragging || isResizing, transform: liveTransform, children: _jsx(Circle, { c: resizeGeom.handle, r: handleRadius, color: SELECTION_COLOR }) }))] }));
                 }
                 return null;
-            })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity })), customPreview] }) }));
+            })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), shapePreview && (_jsxs(_Fragment, { children: [_jsx(Path, { path: shapePreview.path, color: shapePreview.color, style: "stroke", strokeWidth: shapePreview.width, strokeCap: toSkiaStrokeCap(shapePreview.cap), strokeJoin: "round", children: shapePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(shapePreview.width) })) }), _jsx(Path, { path: shapePreview.headPath, color: shapePreview.color, style: "fill" })] })), livePreview?.handoffPaths?.map((p, i) => (_jsx(Path, { path: p, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) }, i))), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) })), customPreview] }) }));

package/dist/annotation/canvas/Tool.d.ts

@@ -1,7 +1,13 @@
 import type { ReactNode, ComponentType } from 'react';
 import type { AnnotationCanvasState, AnnotationDocumentPatch, AnnotationElement, AnnotationElementId, Selection, StrokeCap, Vec2 } from '../../types/annotation.js';
 import type { MeasurementRef } from './measurementPicker.js';
+import type { RectCorner } from './measurementGeometry.js';
+import type { ShapeToolKind } from './shapeGeometry.js';
+import type { ResizeGeometry } from './textGeometry.js';
 import type { ViewportApi } from './viewport.js';
+export type RequestTextInput = (options?: {
+    initialText?: string;
+}) => Promise<string | null>;
 export interface CanvasPointerEvent {
     pointerId: number;
     world: Vec2;
@@ -20,6 +26,9 @@ export interface ToolContext {
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
     requestPickMeasurement(): Promise<MeasurementRef | null>;
+    requestTextInput(options?: {
+        initialText?: string;
+    }): Promise<string | null>;
     applyPan(deltaScreen: Vec2): void;
     applyZoom(focalScreen: Vec2, nextZoom: number): void;
 }
@@ -29,8 +38,16 @@ export interface FreehandConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    dash?: boolean;
     minSampleDistance: number;
 }
+export interface ShapeDrawConfig {
+    kind: ShapeToolKind;
+    color: string;
+    width: number;
+    cap?: StrokeCap;
+    dash?: boolean;
+}
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
 export interface DragSelectionConfig {
     hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number): {
@@ -42,6 +59,14 @@ export interface DragSelectionConfig {
     buildSlidePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2, zoom: number): AnnotationDocumentPatch | null;
     hitTestHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
     buildEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestRectCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
+        corner: RectCorner;
+        moving: Vec2;
+        fixed: Vec2;
+    } | null;
+    buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
+    buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
 export interface Tool {
     id: string;
@@ -49,12 +74,14 @@ export interface Tool {
     icon?: ComponentType;
     cursor?: string;
     freehand?: FreehandConfig;
+    shapeDraw?: ShapeDrawConfig;
     panViewport?: boolean;
     dragSelection?: DragSelectionConfig;
     onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onCancel?(state: ToolState, ctx: ToolContext): void;
+    onDeactivate?(ctx: ToolContext): void;
     renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;
     hitTest?(element: AnnotationElement, worldPoint: Vec2): boolean;
 }

package/dist/annotation/canvas/elements/BackgroundImageElement.js

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Image, useImage } from '@shopify/react-native-skia';
 import { memo, useEffect, useRef, useState } from 'react';
 const computeFit = (imgW, imgH, docW, docH, fit) => {
-    if (fit === 'stretch') {
+    // Guard against unknown/zero image dimensions: dividing by them yields
+    // Infinity → NaN geometry, and a <Image> with NaN bounds renders nothing
+    // (a silent "background never appears"). Fall back to filling the doc.
+    if (!(imgW > 0) || !(imgH > 0) || fit === 'stretch') {
         return { x: 0, y: 0, width: docW, height: docH };
     }
     const scale = fit === 'cover'

package/dist/annotation/canvas/elements/ShapeElement.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Circle, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
+import { Circle, DashPathEffect, Group, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
 import { memo, useMemo } from 'react';
-const polygonPath = (points) => {
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE, TEXT_BASELINE_FACTOR, TEXT_LINE_HEIGHT_FACTOR, } from '../textGeometry.js';
+// Outline width of dash-styled text, as a fraction of the base font size.
+// Drawn pre-scale (inside the fontSize/baseSize Group), so the outline — and
+// the dash pattern derived from it — scales with the glyphs.
+const TEXT_OUTLINE_WIDTH_FACTOR = 1 / 16;
+const polygonPath = (points, closed) => {
     const path = Skia.Path.Make();
     if (points.length === 0)
         return path;
@@ -9,7 +15,8 @@ const polygonPath = (points) => {
     for (let i = 1; i < points.length; i++) {
         path.lineTo(points[i].x, points[i].y);
     }
-    path.close();
+    if (closed)
+        path.close();
     return path;
 };
 // Memoized — see StrokeElement. Unchanged shapes keep their identity across
@@ -19,7 +26,39 @@ export const ShapeElement = memo(({ shape, font }) => {
     const stroke = style.stroke ?? '#000000';
     const fill = style.fill;
     const strokeWidth = style.strokeWidth ?? 2;
-    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points) : null), [kind, geometry.points]);
+    // Polygons auto-close unless explicitly left open (absent === closed, the
+    // historical behavior).
+    const closed = geometry.closed !== false;
+    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points, closed) : null), [kind, geometry.points, closed]);
+    // Solid filled-triangle arrowhead at the shape's end point. Drawn for the
+    // legacy 'arrow' kind, for a 'line' with cap === 'arrow' (the arrow tool and
+    // the end-cap editor both produce this), and for an OPEN polygon with cap
+    // === 'arrow' (its last segment has a direction). Mirrors StrokeElement.
+    const arrowHead = useMemo(() => {
+        let from;
+        let end;
+        if ((kind === 'line' || kind === 'arrow') &&
+            (kind === 'arrow' || style.cap === 'arrow')) {
+            [from, end] = geometry.points;
+        }
+        else if (kind === 'polygon' && !closed && style.cap === 'arrow') {
+            const n = geometry.points.length;
+            if (n >= 2) {
+                from = geometry.points[n - 2];
+                end = geometry.points[n - 1];
+            }
+        }
+        if (!from || !end || (from.x === end.x && from.y === end.y))
+            return null;
+        const [apex, baseL, baseR] = arrowheadTriangle(end, from, strokeWidth);
+        const p = Skia.Path.Make();
+        p.moveTo(apex.x, apex.y);
+        p.lineTo(baseL.x, baseL.y);
+        p.lineTo(baseR.x, baseR.y);
+        p.close();
+        return p;
+    }, [kind, geometry.points, closed, style.cap, strokeWidth]);
+    const dashEffect = style.dash ? (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) : null;
     switch (kind) {
         case 'rect': {
             const [a, b] = geometry.points;
@@ -29,7 +68,7 @@ export const ShapeElement = memo(({ shape, font }) => {
             const y = Math.min(a.y, b.y);
             const w = Math.abs(b.x - a.x);
             const h = Math.abs(b.y - a.y);
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'ellipse': {
             const [a, b] = geometry.points;
@@ -38,27 +77,47 @@ export const ShapeElement = memo(({ shape, font }) => {
             const cx = (a.x + b.x) / 2;
             const cy = (a.y + b.y) / 2;
             const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth, children: dashEffect })] }));
         }
         case 'line':
         case 'arrow': {
             const [a, b] = geometry.points;
             if (!a || !b)
                 return null;
-            return (_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: "round" }));
+            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'polygon': {
             if (!polyPath)
                 return null;
-            return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+            return (_jsxs(_Fragment, { children: [fill && closed && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), strokeJoin: "round", children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
         }
         case 'text': {
+            // `origin` is the TOP-LEFT of the text block (textGeometry derives
+            // bounds/hit boxes from the same anchor + factors, so chrome and glyphs
+            // agree). The shared font is loaded at one fixed size; style.fontSize is
+            // honored by scaling the glyph outlines about the anchor — Skia text is
+            // vector, so this is loss-free. Lines are laid out with the textGeometry
+            // factors; Skia <Text> y is the BASELINE, hence the baseline offset.
             const [origin] = geometry.points;
             if (!origin || !text)
                 return null;
             if (!font)
                 return null;
-            return (_jsx(Text, { x: origin.x, y: origin.y, text: text, font: font, color: stroke }));
+            const fontSize = style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+            const baseSize = font.getSize();
+            const scale = baseSize > 0 ? fontSize / baseSize : 1;
+            // Dash-styled text strokes the glyph outlines (a dash effect is a path
+            // effect — it needs stroked geometry, so it can't apply to filled
+            // glyphs) and runs the shared dash pattern along them.
+            const outlineWidth = baseSize * TEXT_OUTLINE_WIDTH_FACTOR;
+            return (_jsx(Group, { transform: [
+                    { translateX: origin.x },
+                    { translateY: origin.y },
+                    { scale },
+                ], children: text.split('\n').map((line, i) => (_jsx(Text, { x: 0, y: (i * TEXT_LINE_HEIGHT_FACTOR + TEXT_BASELINE_FACTOR) * baseSize, text: line, font: font, color: stroke, ...(style.dash && {
+                        style: 'stroke',
+                        strokeWidth: outlineWidth,
+                    }), children: style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(outlineWidth) })) }, i))) }));
         }
     }
 });

package/dist/annotation/canvas/elements/StrokeElement.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Path, Skia } from '@shopify/react-native-skia';
+import { DashPathEffect, Path, Skia, } from '@shopify/react-native-skia';
 import { memo, useMemo } from 'react';
-import { arrowheadTriangle, toSkiaStrokeCap } from '../strokeGeometry.js';
+import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from '../strokeGeometry.js';
 export const pointsToSkPath = (points) => {
     const path = Skia.Path.Make();
     if (points.length < 2)
@@ -36,5 +36,10 @@ export const StrokeElement = memo(({ stroke }) => {
     const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
     const arrow = useMemo(() => arrowheadPath(stroke), [stroke.points, stroke.cap, stroke.width]);
     const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
-    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity }), arrow && (_jsx(Path, { path: arrow, color: stroke.color, style: "fill", opacity: opacity }))] }));
+    // A tap-dot is a zero-length two-point path; a dash effect would erase it
+    // (the contour has no length to dash), so dots always render solid.
+    const isDot = stroke.points.length === 4 &&
+        stroke.points[0] === stroke.points[2] &&
+        stroke.points[1] === stroke.points[3];
+    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity, children: stroke.dash && !isDot && (_jsx(DashPathEffect, { intervals: dashIntervals(stroke.width) })) }), arrow && (_jsx(Path, { path: arrow, color: stroke.color, style: "fill", opacity: opacity }))] }));
 });

package/dist/annotation/canvas/measurementGeometry.d.ts

@@ -16,6 +16,27 @@ export declare const lineLength: (line: {
     a: Vec2;
     b: Vec2;
 }) => number;
+export interface NormalizedRect {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const normalizeRect: (rect: {
+    a: Vec2;
+    b: Vec2;
+}) => NormalizedRect;
+export declare const rectCenter: (rect: {
+    a: Vec2;
+    b: Vec2;
+}) => Vec2;
+export type RectCorner = 'tl' | 'tr' | 'bl' | 'br';
+export declare const rectCornerPoint: (rect: {
+    a: Vec2;
+    b: Vec2;
+}, corner: RectCorner) => Vec2;
+export declare const oppositeRectCorner: (corner: RectCorner) => RectCorner;
+export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number) => boolean;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -1,12 +1,13 @@
 // Pure geometry for measurement annotations (the `placement: 'line'` variant
-// of PlacedMeasurementRef). Skia-free and dependency-free so it's safe in tools,
-// hit-tests, and unit tests.
+// of PlacedMeasurementRef). Skia-free (its only import is the stampLayout
+// constant) so it's safe in tools, hit-tests, and unit tests.
 //
 // NOTE: the native overlay's `useAnimatedStyle` and the live-line derived values
 // run on the UI thread and CANNOT call these functions across the worklet
 // boundary, so they inline the same math. Those inlined copies are the "worklet
 // twins" of these helpers — if you change the math here, change them too (they
 // are commented as such in AnnotationCanvasInner.native.tsx).
+import { STAMP_TILE_SIZE } from './stampLayout.js';
 // Default position of the tile along its line when `linePos` is absent: center.
 export const DEFAULT_LINE_POS = 0.5;
 export const lerp = (a, b, t) => ({
@@ -48,8 +49,102 @@ export const lineLength = (line) => {
     const dy = line.b.y - line.a.y;
     return Math.sqrt(dx * dx + dy * dy);
 };
+export const normalizeRect = (rect) => ({
+    minX: Math.min(rect.a.x, rect.b.x),
+    minY: Math.min(rect.a.y, rect.b.y),
+    maxX: Math.max(rect.a.x, rect.b.x),
+    maxY: Math.max(rect.a.y, rect.b.y),
+});
+// The tile anchor for a rectangle annotation: always the center. Any op that
+// changes `rect` must write this into `anchor` in the same patch.
+export const rectCenter = (rect) => ({
+    x: (rect.a.x + rect.b.x) / 2,
+    y: (rect.a.y + rect.b.y) / 2,
+});
+export const rectCornerPoint = (rect, corner) => {
+    const n = normalizeRect(rect);
+    switch (corner) {
+        case 'tl':
+            return { x: n.minX, y: n.minY };
+        case 'tr':
+            return { x: n.maxX, y: n.minY };
+        case 'bl':
+            return { x: n.minX, y: n.maxY };
+        case 'br':
+            return { x: n.maxX, y: n.maxY };
+    }
+};
+export const oppositeRectCorner = (corner) => {
+    switch (corner) {
+        case 'tl':
+            return 'br';
+        case 'tr':
+            return 'bl';
+        case 'bl':
+            return 'tr';
+        case 'br':
+            return 'tl';
+    }
+};
+// --- Hit-testing a placed measurement (tile + line/rect body). Shared by the
+// select tool and the pan tool's view-mode tap-select. ---
+// Doc-space padding around hit boxes (matches the select tool's stroke pad).
+const STAMP_HIT_PADDING = 6;
+// Screen-space grab tolerance (px) for a measurement-annotation line or rect
+// border, converted to doc space via zoom (the body is a thin world-space
+// stroke). Matches the select tool's drag-grab tolerance so tap-select and
+// drag-grab agree on what counts as "on the measurement".
+const LINE_GRAB_PX = 12;
+const segmentDistSq = (p, a, b) => {
+    const abx = b.x - a.x;
+    const aby = b.y - a.y;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq === 0 ? 0 : ((p.x - a.x) * abx + (p.y - a.y) * aby) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    const dx = p.x - (a.x + t * abx);
+    const dy = p.y - (a.y + t * aby);
+    return dx * dx + dy * dy;
+};
+// Whether a world-space point hits a placed measurement: the (screen-constant)
+// stamp tile around the anchor, the line body of a line annotation, or the
+// border ring of a rectangle annotation (interiors stay transparent to hits so
+// elements inside remain reachable).
+export const hitPlacedMeasurement = (m, p, zoom = 1) => {
+    // The stamp renders as a constant *screen*-size square centered on the
+    // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
+    // screen-space half-extent (+ padding) back to doc space via the zoom so
+    // the hit box always matches what's drawn.
+    const scale = m.scale ?? 1;
+    const half = ((STAMP_TILE_SIZE * scale) / 2 + STAMP_HIT_PADDING) / zoom;
+    const dx = Math.abs(p.x - m.anchor.x);
+    const dy = Math.abs(p.y - m.anchor.y);
+    if (dx <= half && dy <= half)
+        return true;
+    // Measurement annotation: also grab anywhere along the line body.
+    if (m.line) {
+        const r = LINE_GRAB_PX / zoom;
+        if (segmentDistSq(p, m.line.a, m.line.b) <= r * r)
+            return true;
+    }
+    // Rectangle annotation: grab anywhere along the border.
+    if (m.rect && placementOf(m) === 'rectangle') {
+        const n = normalizeRect(m.rect);
+        const r2 = (LINE_GRAB_PX / zoom) ** 2;
+        const tl = { x: n.minX, y: n.minY };
+        const tr = { x: n.maxX, y: n.minY };
+        const br = { x: n.maxX, y: n.maxY };
+        const bl = { x: n.minX, y: n.maxY };
+        if (segmentDistSq(p, tl, tr) <= r2 ||
+            segmentDistSq(p, tr, br) <= r2 ||
+            segmentDistSq(p, br, bl) <= r2 ||
+            segmentDistSq(p, bl, tl) <= r2) {
+            return true;
+        }
+    }
+    return false;
+};
 export const buildRemoveMeasurementOps = (placed) => {
-    if (placementOf(placed) === 'line' && placed.measurementId) {
+    if (placementOf(placed) !== 'none' && placed.measurementId) {
         return {
             ops: [
                 {

package/dist/annotation/canvas/shapeGeometry.d.ts

@@ -0,0 +1,5 @@
+import type { AnnotationShape, AnnotationShapeKind, Vec2 } from '../../types/annotation.js';
+export type ShapeToolKind = 'line' | 'rect' | 'triangle' | 'ellipse';
+export declare const annotationKindFor: (kind: ShapeToolKind) => AnnotationShapeKind;
+export declare const shapePointsFromDrag: (kind: ShapeToolKind, a: Vec2, b: Vec2) => Vec2[];
+export declare const hitShapeOutline: (shape: AnnotationShape, p: Vec2, tol: number) => boolean;