@reekon-tools/boldr-utils 1.6.23 → 1.6.24

package/dist/annotation/canvas/AnnotationCanvasInner.native.js

@@ -9,6 +9,7 @@ import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
 import { buildShapeFromDrag } from './tools/shapeTool.js';
+import { SELECTION_PAD } from './textGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
@@ -24,6 +25,10 @@ const HANDLE_RADIUS_PX = 7;
 // Screen-px stroke width of the handle's colored ring (white-disc + ring, so the
 // knob stays legible over a line of any color). Also zoom-divided.
 const HANDLE_RING_PX = 2;
+// Doc-space floor on a shape-corner resize's width/height — the worklet twin of
+// selectTool's MIN_SHAPE_EXTENT (the live preview must clamp identically to the
+// buildShapeCornerPatch commit). Keep the two in sync.
+const MIN_SHAPE_EXTENT = 1;
 // Native fingerprint: one finger drives the active tool, two fingers
 // pan/zoom the viewport. Tap counts as a brief pointer down+up so tools
 // like measurement-stamp (which only listen to onPointerUp) work via tap.
@@ -43,6 +48,11 @@ export const AnnotationCanvasInner = (props) => {
     // never rebuilt mid-gesture — its JS callbacks read `stateRef.current`.
     const stateRef = useRef(state);
     stateRef.current = state;
+    // Open-value-entry callback (edit mode). Rides a ref so the gesture needn't
+    // rebuild when it changes; the second-tap-on-selected detection lives in the
+    // tap gesture below (it compares against the selection captured pre-tap).
+    const onStampDoubleTapRef = useRef(props.onMeasurementStampDoubleTap);
+    onStampDoubleTapRef.current = props.onMeasurementStampDoubleTap;
     // Live viewport on the UI thread. Initialised from the JS snapshot; kept in
     // sync from JS only when not actively gesturing (see the effect below).
     const zoom = useSharedValue(state.viewport.zoom);
@@ -179,13 +189,14 @@ export const AnnotationCanvasInner = (props) => {
     // Live mirror of the active shape tool's config for the worklet path
     // builders (the derived values are created once, so they can't close over
     // the changing `shapeDraw` prop).
-    const shapeCfg = useSharedValue({ kind: 'line', cap: 'round', width: 2 });
+    const shapeCfg = useSharedValue({ kind: 'line', cap: 'round', startCap: 'round', width: 2 });
     useEffect(() => {
         if (!shapeDraw)
             return;
         shapeCfg.value = {
             kind: shapeDraw.kind,
             cap: shapeDraw.cap ?? 'round',
+            startCap: shapeDraw.startCap ?? 'round',
             width: shapeDraw.width,
         };
     }, [shapeDraw, shapeCfg]);
@@ -256,15 +267,20 @@ export const AnnotationCanvasInner = (props) => {
             path.close();
         };
         for (const e of handoffShapes.value) {
-            if (e.kind === 'line' && e.cap === 'arrow') {
+            if (e.kind !== 'line')
+                continue;
+            // End head at b (points a→b); start head at a (points b→a, args swapped).
+            if (e.cap === 'arrow')
                 addHead(e.ax, e.ay, e.bx, e.by);
-            }
+            if (e.startCap === 'arrow')
+                addHead(e.bx, e.by, e.ax, e.ay);
         }
         const s = liveShape.value;
-        if (s.active &&
-            shapeCfg.value.kind === 'line' &&
-            shapeCfg.value.cap === 'arrow') {
-            addHead(s.ax, s.ay, s.bx, s.by);
+        if (s.active && shapeCfg.value.kind === 'line') {
+            if (shapeCfg.value.cap === 'arrow')
+                addHead(s.ax, s.ay, s.bx, s.by);
+            if (shapeCfg.value.startCap === 'arrow')
+                addHead(s.bx, s.by, s.ax, s.ay);
         }
         return path;
     });
@@ -420,6 +436,124 @@ export const AnnotationCanvasInner = (props) => {
             { translateY: -c.py },
         ];
     });
+    // Geometric-shape corner resize (rect/ellipse/polygon). `shapeResizeId`
+    // (React state) gates which shape renders live; `shapeResizeCtx` carries the
+    // fixed (opposite) corner and the grabbed corner's start position (from
+    // DragSelectionConfig.hitTestShapeCorner), and `shapeResizePts` the shape's
+    // start geometry. The preview re-renders the shape from live GEOMETRY (a
+    // derived path) rather than a scale transform — a non-uniform scale transform
+    // would warp the stroke width (top/bottom edges thicken with scaleY); drawing
+    // the scaled outline at a constant stroke keeps it crisp. The commit on
+    // release goes through buildShapeCornerPatch, which scales identically.
+    const [shapeResizeId, setShapeResizeId] = useState(null);
+    const shapeResizeCtx = useSharedValue({ fx: 0, fy: 0, mx: 0, my: 0, uni: 0 });
+    // The resized shape's start geometry: kind + flat [x,y,x,y,…] points.
+    const shapeResizePts = useSharedValue({
+        kind: '',
+        pts: [],
+    });
+    const shapeResizeTargetRef = useRef(null);
+    // Live scale factors about the fixed corner. WORKLET TWIN of
+    // selectTool.shapeCornerPatch — keep the clamp + the ellipse uniform-scale
+    // branch in sync. Read by the path + box derived values below.
+    const shapeResizeScale = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const denomX = c.mx - c.fx;
+        const denomY = c.my - c.fy;
+        let offX = c.mx + dragX.value - c.fx;
+        let offY = c.my + dragY.value - c.fy;
+        offX =
+            denomX >= 0
+                ? Math.max(MIN_SHAPE_EXTENT, offX)
+                : Math.min(-MIN_SHAPE_EXTENT, offX);
+        offY =
+            denomY >= 0
+                ? Math.max(MIN_SHAPE_EXTENT, offY)
+                : Math.min(-MIN_SHAPE_EXTENT, offY);
+        let sx = denomX !== 0 ? offX / denomX : 1;
+        let sy = denomY !== 0 ? offY / denomY : 1;
+        if (c.uni === 1) {
+            const oldDiag = Math.sqrt(denomX * denomX + denomY * denomY);
+            const s0 = oldDiag !== 0 ? Math.sqrt(offX * offX + offY * offY) / oldDiag : 1;
+            sx = s0;
+            sy = s0;
+        }
+        return { sx, sy };
+    });
+    // The shape's outline scaled about the fixed corner, rebuilt per frame.
+    // WORKLET TWIN of ShapeElement's per-kind rendering (rect/ellipse/polygon) —
+    // keep in sync.
+    const shapeResizePath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const g = shapeResizePts.value;
+        const c = shapeResizeCtx.value;
+        const { sx, sy } = shapeResizeScale.value;
+        const n = g.pts.length;
+        if (n < 4)
+            return path;
+        const px = (i) => c.fx + (g.pts[i] - c.fx) * sx;
+        const py = (i) => c.fy + (g.pts[i + 1] - c.fy) * sy;
+        if (g.kind === 'rect' || g.kind === 'ellipse') {
+            const ax = px(0);
+            const ay = py(0);
+            const bx = px(2);
+            const by = py(2);
+            if (g.kind === 'ellipse') {
+                const r = Math.max(Math.abs(bx - ax), Math.abs(by - ay)) / 2;
+                path.addCircle((ax + bx) / 2, (ay + by) / 2, r);
+            }
+            else {
+                const minX = Math.min(ax, bx);
+                const maxX = Math.max(ax, bx);
+                const minY = Math.min(ay, by);
+                const maxY = Math.max(ay, by);
+                path.moveTo(minX, minY);
+                path.lineTo(maxX, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+        }
+        else {
+            // polygon (incl. triangle): the scaled outline through every point.
+            path.moveTo(px(0), py(0));
+            for (let i = 2; i < n; i += 2)
+                path.lineTo(px(i), py(i));
+            path.close();
+        }
+        return path;
+    });
+    // Live selection box: the scaled visual bounds (fixed corner ↔ scaled moving
+    // corner) padded by SELECTION_PAD, so the box tracks the resize at a constant
+    // stroke too (the transform would have warped it like the shape). Four
+    // separate derived values so each feeds its own animated <Rect> prop (Skia
+    // animates props individually — see `liveRect`).
+    const shapeResizeBoxX = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmx = c.fx + (c.mx - c.fx) * shapeResizeScale.value.sx;
+        return Math.min(c.fx, nmx) - SELECTION_PAD;
+    });
+    const shapeResizeBoxY = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmy = c.fy + (c.my - c.fy) * shapeResizeScale.value.sy;
+        return Math.min(c.fy, nmy) - SELECTION_PAD;
+    });
+    const shapeResizeBoxW = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmx = c.fx + (c.mx - c.fx) * shapeResizeScale.value.sx;
+        return Math.abs(nmx - c.fx) + SELECTION_PAD * 2;
+    });
+    const shapeResizeBoxH = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmy = c.fy + (c.my - c.fy) * shapeResizeScale.value.sy;
+        return Math.abs(nmy - c.fy) + SELECTION_PAD * 2;
+    });
     // Per-gesture refs so we always emit a matching down/move/up sequence.
     const pointerIdRef = useRef(1);
     const inFlightRef = useRef(null);
@@ -530,11 +664,33 @@ export const AnnotationCanvasInner = (props) => {
                 st.ctx.commit({ ops: [{ op: 'addStroke', stroke }] });
                 return;
             }
+            // Capture the selection BEFORE this tap re-selects, so we can tell a
+            // first tap (select) from a second tap on the already-selected tile.
+            const prevSelectedId = st.ctx.selection?.ids[0] ?? null;
             // Otherwise synthesize a down+up sequence so tools that only listen to
             // onPointerUp (e.g. measurement stamp) still fire.
             const id = pointerIdRef.current++;
             st.dispatchPointerDown(buildEvent(id, screen));
             st.dispatchPointerUp(buildEvent(id, screen));
+            // Edit-mode "tap the selected tile to open value entry": when the select
+            // tool is active the stamp overlay is non-interactive (so drag/select
+            // keep working), which means the view-mode TouchableOpacity can't catch
+            // the tap. Mirror handleViewStampPress here — a first tap only selects, a
+            // second tap on the same (already-selected) tile fires the consumer
+            // callback. Not a timed double-tap: the tile must already have been
+            // selected by a previous tap.
+            const onActivate = onStampDoubleTapRef.current;
+            if (!onActivate || !dragSelection || !prevSelectedId)
+                return;
+            const world = st.ctx.viewport.screenToWorld(screen);
+            const zoomNow = st.ctx.viewport.state.zoom;
+            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
+            if (!hit || hit.kind !== 'measurement' || hit.id !== prevSelectedId) {
+                return;
+            }
+            const placed = st.ctx.document.placedMeasurements.find((p) => p.id === hit.id);
+            if (placed)
+                onActivate(placed);
         });
         // Viewport pan — runs on the UI thread (no runOnJS), mutating the shared
         // viewport directly. Mirrors viewport.ts `panBy`. Used for both the
@@ -610,6 +766,7 @@ export const AnnotationCanvasInner = (props) => {
                         color: fh.color,
                         width: fh.width,
                         cap: fh.cap ?? 'round',
+                        ...(fh.startCap === 'arrow' && { startCap: 'arrow' }),
                         ...(fh.dash && { dash: true }),
                         points: worldPoints,
                         createdAt: Date.now(),
@@ -694,6 +851,7 @@ export const AnnotationCanvasInner = (props) => {
                     color: cfg.color,
                     width: cfg.width,
                     cap: cfg.cap,
+                    startCap: cfg.startCap,
                     dash: cfg.dash,
                     layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
                     id,
@@ -746,6 +904,7 @@ export const AnnotationCanvasInner = (props) => {
                         id,
                         kind: cfg.kind,
                         cap: cfg.cap ?? 'round',
+                        startCap: cfg.startCap ?? 'round',
                         ax: s.ax,
                         ay: s.ay,
                         bx: s.bx,
@@ -846,6 +1005,33 @@ export const AnnotationCanvasInner = (props) => {
                         setRectDragId(selId);
                         return;
                     }
+                    // Shape (rect/ellipse/polygon) bounding-box corner handle — the shape
+                    // twin of the rect-annotation corner above; scales length and width.
+                    const shapeCornerHit = cfg.hitTestShapeCorner?.(st.ctx.document, selId, world, zoomNow);
+                    if (shapeCornerHit) {
+                        const cornerShape = st.ctx.document.shapes.find((x) => x.id === selId);
+                        shapeResizeCtx.value = {
+                            fx: shapeCornerHit.fixed.x,
+                            fy: shapeCornerHit.fixed.y,
+                            mx: shapeCornerHit.moving.x,
+                            my: shapeCornerHit.moving.y,
+                            uni: cornerShape?.kind === 'ellipse' ? 1 : 0,
+                        };
+                        const flat = [];
+                        for (const p of cornerShape?.geometry.points ?? []) {
+                            flat.push(p.x, p.y);
+                        }
+                        shapeResizePts.value = {
+                            kind: cornerShape?.kind ?? '',
+                            pts: flat,
+                        };
+                        shapeResizeTargetRef.current = {
+                            id: selId,
+                            corner: shapeCornerHit.corner,
+                        };
+                        setShapeResizeId(selId);
+                        return;
+                    }
                 }
                 const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
                 if (!hit) {
@@ -907,6 +1093,19 @@ export const AnnotationCanvasInner = (props) => {
                     setRectDragId(null);
                     return;
                 }
+                // Shape-corner commit: scale the shape by dragging the grabbed corner
+                // (opposite corner fixed); buildShapeCornerPatch clamps as the preview.
+                const shapeRT = shapeResizeTargetRef.current;
+                if (shapeRT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildShapeCornerPatch?.(st.ctx.document, shapeRT.id, shapeRT.corner, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    shapeResizeTargetRef.current = null;
+                    setShapeResizeId(null);
+                    return;
+                }
                 // Endpoint commit: move the grabbed endpoint by the world delta.
                 const epT = epTargetRef.current;
                 if (epT) {
@@ -966,12 +1165,14 @@ export const AnnotationCanvasInner = (props) => {
                 shapeEpTargetRef.current = null;
                 resizeTargetRef.current = null;
                 rectTargetRef.current = null;
+                shapeResizeTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
                 setShapeEpDragId(null);
                 setResizingId(null);
                 setRectDragId(null);
+                setShapeResizeId(null);
             };
             return Gesture.Pan()
                 .minPointers(1)
@@ -1105,6 +1306,14 @@ export const AnnotationCanvasInner = (props) => {
                             width: liveRectW,
                             height: liveRectH,
                         },
+                        shapeResizeId,
+                        shapeResizePath,
+                        shapeResizeBox: {
+                            x: shapeResizeBoxX,
+                            y: shapeResizeBoxY,
+                            width: shapeResizeBoxW,
+                            height: shapeResizeBoxH,
+                        },
                         // Endpoint/corner handles are drag affordances — only the select
                         // tool can act on them, so suppress them when the active tool has
                         // no drag support (e.g. view mode's pan tool, where a selected

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

@@ -69,6 +69,16 @@ export interface AnnotationCanvasSkiaProps {
         width: AnimatedNumber;
         height: AnimatedNumber;
     };
+    shapeResizeId?: string | null;
+    shapeResizePath?: SkPath | {
+        value: SkPath;
+    };
+    shapeResizeBox?: {
+        x: AnimatedNumber;
+        y: AnimatedNumber;
+        width: AnimatedNumber;
+        height: AnimatedNumber;
+    };
     handleRadius?: number | {
         value: number;
     };
@@ -77,5 +87,5 @@ export interface AnnotationCanvasSkiaProps {
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -3,6 +3,7 @@ import { Canvas, Circle, DashPathEffect, Group, Line, Path, Rect, Skia, } from '
 import { normalizeRect, placementOf } from './measurementGeometry.js';
 import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from './strokeGeometry.js';
 import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeometry.js';
+import { visualShapeBounds } from './shapeGeometry.js';
 import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
@@ -50,25 +51,6 @@ const strokeBounds = (points) => {
     }
     return { minX, minY, maxX, maxY };
 };
-// Bounds of a Vec2[] (shape geometry), or null if empty.
-const pointsBounds = (pts) => {
-    if (pts.length === 0)
-        return null;
-    let { x: minX, y: minY } = pts[0];
-    let { x: maxX, y: maxY } = pts[0];
-    for (let i = 1; i < pts.length; i++) {
-        const p = pts[i];
-        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;
-    }
-    return { minX, minY, maxX, maxY };
-};
 // Wraps a single element in the live drag transform while it's being dragged
 // (native, UI-thread). When not dragging it renders the element untouched, so
 // the element's React.memo still bails out on unrelated re-renders.
@@ -92,7 +74,7 @@ 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, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, 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) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, 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) => {
                 // Line/arrow shapes support endpoint editing. When selected they show
                 // grab handles at both ends; during an endpoint drag the line renders
                 // from the live endpoints (one following the finger) — the shape twin
@@ -114,22 +96,33 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                         // but idle: reuse ShapeElement for the body (caps/arrowhead/dash)
                         // and overlay the handles, both wrapped so a group move tracks.
                         if (isEndpointDrag) {
-                            const arrowPath = (() => {
-                                if (!hasArrow)
-                                    return null;
-                                const [apex, baseL, baseR] = arrowheadTriangle(b, a, strokeWidth);
+                            const headPath = (tip, from) => {
+                                const [apex, baseL, baseR] = arrowheadTriangle(tip, 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;
-                            })();
-                            return (_jsxs(Group, { children: [_jsx(Line, { p1: liveLineP1 ?? a, p2: liveLineP2 ?? b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(shape.style.cap), children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) }), handles, arrowPath && (_jsx(Path, { path: arrowPath, color: stroke, style: "fill" }))] }, shape.id));
+                            };
+                            const endArrow = hasArrow ? headPath(b, a) : null;
+                            const startArrow = shape.style.startCap === 'arrow' ? headPath(a, b) : null;
+                            return (_jsxs(Group, { children: [_jsx(Line, { p1: liveLineP1 ?? a, p2: liveLineP2 ?? b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(shape.style.cap), children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) }), handles, startArrow && (_jsx(Path, { path: startArrow, color: stroke, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, color: stroke, style: "fill" }))] }, shape.id));
                         }
                         return (_jsxs(DraggableElement, { isDragging: shape.id === draggingId, transform: dragTransform, children: [_jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }), handles] }, shape.id));
                     }
                 }
+                // Non-line shapes track the live transform of whichever resize is in
+                // flight: text scales uniformly via a transform (`resizingId`); a
+                // group move translates (`draggingId`). A rect/ellipse/polygon corner
+                // resize instead re-renders the SCALED OUTLINE live (`shapeResizePath`)
+                // at a constant stroke — a non-uniform scale transform would warp the
+                // stroke width (top/bottom edges thicken with scaleY).
+                if (shape.id === shapeResizeId && shapeResizePath) {
+                    const stroke = shape.style.stroke ?? '#000000';
+                    const strokeWidth = shape.style.strokeWidth ?? 2;
+                    return (_jsxs(Group, { children: [shape.style.fill && (_jsx(Path, { path: shapeResizePath, color: shape.style.fill, style: "fill" })), _jsx(Path, { path: shapeResizePath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeJoin: "round", children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) })] }, shape.id));
+                }
                 return (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }) }, shape.id));
             }), effectiveCanvas.placedMeasurements.map((placed) => {
                 // Rectangle annotation: a stroked border whose center carries the
@@ -155,23 +148,26 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 const p2 = isEndpointDrag && liveLineP2 ? liveLineP2 : placed.line.b;
                 const lineColor = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
                 const lineWidth = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
-                // Solid filled-triangle arrowhead at endpoint b (the line's "end").
-                // Built from the static endpoints, so it's skipped during a live
-                // endpoint drag (it reappears on release) rather than lagging the
-                // moving finger.
-                const arrowPath = (() => {
-                    if (placed.lineCap !== 'arrow' || isEndpointDrag || !placed.line) {
-                        return null;
-                    }
-                    const [apex, baseL, baseR] = arrowheadTriangle(placed.line.b, placed.line.a, lineWidth);
+                // Solid filled-triangle arrowheads at endpoint b (the "end", lineCap)
+                // and/or endpoint a (the "start", lineStartCap). Built from the static
+                // endpoints, so they're skipped during a live endpoint drag (they
+                // reappear on release) rather than lagging the moving finger.
+                const headPath = (tip, from) => {
+                    const [apex, baseL, baseR] = arrowheadTriangle(tip, from, lineWidth);
                     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;
-                })();
-                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(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
+                };
+                const endArrow = placed.line && !isEndpointDrag && placed.lineCap === 'arrow'
+                    ? headPath(placed.line.b, placed.line.a)
+                    : null;
+                const startArrow = placed.line && !isEndpointDrag && placed.lineStartCap === 'arrow'
+                    ? headPath(placed.line.a, placed.line.b)
+                    : null;
+                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) })) }), startArrow && (_jsx(Path, { path: startArrow, color: lineColor, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)
@@ -188,20 +184,34 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     // above), not a bounding box — matching the measurement-line UX.
                     if (shape.kind === 'line' || shape.kind === 'arrow')
                         return null;
+                    // During a corner resize the box tracks the live scaled bounds
+                    // (`shapeResizeBox`) at a constant stroke — a transform would warp it
+                    // like the shape — and the corner handles hide (they'd warp into
+                    // ellipses under a non-uniform scale; the rect annotation hides its
+                    // handles mid-drag for the same reason).
+                    if (shape.id === shapeResizeId && shapeResizeBox) {
+                        return (_jsx(Rect, { x: shapeResizeBox.x, y: shapeResizeBox.y, width: shapeResizeBox.width, height: shapeResizeBox.height, color: SELECTION_COLOR, style: "stroke", strokeWidth: SELECTION_STROKE }));
+                    }
                     // 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);
+                    const b = isText ? textShapeBounds(shape) : visualShapeBounds(shape);
                     if (!b)
                         return null;
                     const isResizing = shape.id === resizingId;
                     const liveTransform = isResizing ? resizeTransform : dragTransform;
+                    const isLive = isDragging || isResizing;
                     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(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) }))] }));
+                    // Rect/ellipse/polygon shapes get four bounding-box corner handles
+                    // (drawn at the un-padded visual-bounds corners so they line up with
+                    // the hit-test) to scale length and width — the shape twin of the
+                    // rectangle-annotation corner handles.
+                    const cornerResizable = shape.kind === 'rect' ||
+                        shape.kind === 'ellipse' ||
+                        shape.kind === 'polygon';
+                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isLive, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isLive, transform: liveTransform, children: _jsx(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) })), cornerResizable && handleRadius != null && (_jsxs(DraggableElement, { isDragging: isDragging, transform: dragTransform, children: [_jsx(Handle, { c: { x: b.minX, y: b.minY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.maxX, y: b.minY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.minX, y: b.maxY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.maxX, y: b.maxY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR })] }))] }));
                 }
                 return null;
             })(), 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

@@ -39,6 +39,7 @@ export interface FreehandConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minSampleDistance: number;
 }
@@ -47,6 +48,7 @@ export interface ShapeDrawConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
@@ -68,6 +70,12 @@ export interface DragSelectionConfig {
         fixed: Vec2;
     } | null;
     buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestShapeCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
+        corner: RectCorner;
+        moving: Vec2;
+        fixed: Vec2;
+    } | null;
+    buildShapeCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
     isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): boolean;
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;

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

@@ -45,34 +45,54 @@ export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
     // 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;
+    // Solid filled-triangle arrowheads. The END head is 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'. The START head is drawn for a 'line'/'arrow' or open polygon with
+    // startCap === 'arrow' (so a line can be headed at either end or both).
+    // Mirrors StrokeElement.
+    const arrowHeads = useMemo(() => {
+        // The two anchor segments: [endTip, endFrom] points the end head, and
+        // [startTip, startFrom] points the start head (pointing back out of the
+        // first point). For an open polygon those are the last/first segments.
+        let endTip;
+        let endFrom;
+        let startTip;
+        let startFrom;
+        if (kind === 'line' || kind === 'arrow') {
+            const [a, b] = geometry.points;
+            endTip = b;
+            endFrom = a;
+            startTip = a;
+            startFrom = b;
         }
-        else if (kind === 'polygon' && !closed && style.cap === 'arrow') {
+        else if (kind === 'polygon' && !closed) {
             const n = geometry.points.length;
             if (n >= 2) {
-                from = geometry.points[n - 2];
-                end = geometry.points[n - 1];
+                endTip = geometry.points[n - 1];
+                endFrom = geometry.points[n - 2];
+                startTip = geometry.points[0];
+                startFrom = geometry.points[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 head = (tip, from) => {
+            if (!tip || !from || (tip.x === from.x && tip.y === from.y))
+                return null;
+            const [apex, baseL, baseR] = arrowheadTriangle(tip, 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;
+        };
+        const wantEnd = kind === 'arrow' || style.cap === 'arrow';
+        const wantStart = style.startCap === 'arrow';
+        return {
+            end: wantEnd ? head(endTip, endFrom) : null,
+            start: wantStart ? head(startTip, startFrom) : null,
+        };
+    }, [kind, geometry.points, closed, style.cap, style.startCap, strokeWidth]);
     // Text shapes render through the Skia Paragraph API so decorations (solid
     // underline / wavy squiggle / highlight band) paint natively. The loaded font
     // is registered into a provider so the Paragraph draws with the same typeface
@@ -171,12 +191,12 @@ export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
             const [a, b] = geometry.points;
             if (!a || !b)
                 return null;
-            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" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHeads.start && (_jsx(Path, { path: arrowHeads.start, color: stroke, style: "fill" })), arrowHeads.end && (_jsx(Path, { path: arrowHeads.end, color: stroke, style: "fill" }))] }));
         }
         case 'polygon': {
             if (!polyPath)
                 return null;
-            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" })] }));
+            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 }), arrowHeads.start && (_jsx(Path, { path: arrowHeads.start, color: stroke, style: "fill" })), arrowHeads.end && (_jsx(Path, { path: arrowHeads.end, color: stroke, style: "fill" }))] }));
         }
         case 'text': {
             // `origin` is the TOP-LEFT of the text block; textGeometry derives the

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

@@ -12,16 +12,13 @@ export const pointsToSkPath = (points) => {
     }
     return path;
 };
-// A solid filled-triangle arrowhead at the stroke's end (vertex at the last
-// point, base corners back along the final segment), or null when the cap isn't
-// 'arrow'. Rendered as a separate filled <Path> on top of the stroked line.
-const arrowheadPath = (stroke) => {
-    const n = stroke.points.length;
-    if (stroke.cap !== 'arrow' || n < 4)
+// A solid filled-triangle arrowhead at `tip`, with its base back toward `from`,
+// rendered as a separate filled <Path> on top of the stroked line. Null when
+// the two points coincide (e.g. a tap-dot), which has no direction to point.
+const headPath = (tip, from, width) => {
+    if (tip.x === from.x && tip.y === from.y)
         return null;
-    const end = { x: stroke.points[n - 2], y: stroke.points[n - 1] };
-    const from = { x: stroke.points[n - 4], y: stroke.points[n - 3] };
-    const [apex, baseL, baseR] = arrowheadTriangle(end, from, stroke.width);
+    const [apex, baseL, baseR] = arrowheadTriangle(tip, from, width);
     const path = Skia.Path.Make();
     path.moveTo(apex.x, apex.y);
     path.lineTo(baseL.x, baseL.y);
@@ -29,17 +26,35 @@ const arrowheadPath = (stroke) => {
     path.close();
     return path;
 };
+// Arrowheads at the stroke's end (cap) and/or start (startCap). Each is null
+// unless the corresponding cap is 'arrow'. The start head points back out of
+// the first point (base toward the second).
+const arrowheadPaths = (stroke) => {
+    const n = stroke.points.length;
+    if (n < 4)
+        return { start: null, end: null };
+    const first = { x: stroke.points[0], y: stroke.points[1] };
+    const second = { x: stroke.points[2], y: stroke.points[3] };
+    const last = { x: stroke.points[n - 2], y: stroke.points[n - 1] };
+    const penult = { x: stroke.points[n - 4], y: stroke.points[n - 3] };
+    return {
+        end: stroke.cap === 'arrow' ? headPath(last, penult, stroke.width) : null,
+        start: stroke.startCap === 'arrow'
+            ? headPath(first, second, stroke.width)
+            : null,
+    };
+};
 // Memoized: the canvas re-renders the whole element list on every commit,
 // preview, and selection change, but applyPatch preserves the identity of
 // unchanged strokes — so memo lets all but the changed stroke bail out.
 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 arrows = useMemo(() => arrowheadPaths(stroke), [stroke.points, stroke.cap, stroke.startCap, stroke.width]);
     const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
     // 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 }))] }));
+    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) })) }), arrows.start && (_jsx(Path, { path: arrows.start, color: stroke.color, style: "fill", opacity: opacity })), arrows.end && (_jsx(Path, { path: arrows.end, color: stroke.color, style: "fill", opacity: opacity }))] }));
 });

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

@@ -3,3 +3,10 @@ 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;
+export interface ShapeBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const visualShapeBounds: (shape: AnnotationShape) => ShapeBounds | null;

package/dist/annotation/canvas/shapeGeometry.js

@@ -114,3 +114,39 @@ export const hitShapeOutline = (shape, p, tol) => {
             return false;
     }
 };
+// Axis-aligned bounds of a shape AS RENDERED — the source of truth for the
+// selection box, its corner-resize handles, and the corner hit-test, so all
+// three agree on where the shape's edges are. For most kinds this is just the
+// bounding box of the geometry points, but an ellipse renders as a CIRCLE
+// (radius = half its larger extent, centered on the drag midpoint), so its
+// visual bounds are the square that circle inscribes — otherwise the selection
+// box hugs the raw (often non-square) drag rect instead of the visible circle.
+// Returns null for text and degenerate (< 2 point) geometry; text shapes box
+// from textGeometry's estimated bounds and lines draw handles on their
+// endpoints, so neither routes through here.
+export const visualShapeBounds = (shape) => {
+    const pts = shape.geometry.points;
+    if (pts.length < 2)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of pts) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    if (shape.kind === 'ellipse') {
+        const cx = (minX + maxX) / 2;
+        const cy = (minY + maxY) / 2;
+        const r = Math.max(maxX - minX, maxY - minY) / 2;
+        return { minX: cx - r, minY: cy - r, maxX: cx + r, maxY: cy + r };
+    }
+    return { minX, minY, maxX, maxY };
+};

package/dist/annotation/canvas/tools/penTool.d.ts

@@ -4,6 +4,7 @@ export interface PenToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minSampleDistance?: number;
     variant?: 'pen' | 'marker' | 'highlighter';

package/dist/annotation/canvas/tools/penTool.js

@@ -10,6 +10,7 @@ export const createPenTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
     const cap = options.cap ?? 'round';
+    const startCap = options.startCap ?? 'round';
     const dash = options.dash ?? false;
     const variant = options.variant ?? 'pen';
     const minSampleDistance = options.minSampleDistance ?? 1.5;
@@ -28,7 +29,15 @@ export const createPenTool = (options = {}) => {
         cursor: 'crosshair',
         // Drives UI-thread drawing on native (see FreehandConfig). The
         // onPointerDown/Move/Up below remain the web/parity implementation.
-        freehand: { variant, color, width, cap, dash, minSampleDistance },
+        freehand: {
+            variant,
+            color,
+            width,
+            cap,
+            ...(startCap === 'arrow' && { startCap: 'arrow' }),
+            dash,
+            minSampleDistance,
+        },
         onPointerDown(event, ctx) {
             const stroke = {
                 id: makeId('stroke'),
@@ -37,6 +46,7 @@ export const createPenTool = (options = {}) => {
                 color,
                 width,
                 cap,
+                ...(startCap === 'arrow' && { startCap: 'arrow' }),
                 ...(dash && { dash }),
                 points: [event.world.x, event.world.y],
                 pressure: event.pressure !== undefined ? [event.pressure] : undefined,

package/dist/annotation/canvas/tools/selectTool.js

@@ -1,6 +1,6 @@
 import { stampTileSize } from '../stampLayout.js';
 import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, } from '../measurementGeometry.js';
-import { hitShapeOutline } from '../shapeGeometry.js';
+import { hitShapeOutline, visualShapeBounds } from '../shapeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.js';
 import { editTextShape } from './textEditing.js';
 const HIT_PADDING = 6;
@@ -315,6 +315,105 @@ const rectCornerPatch = (doc, id, corner, delta) => {
         ],
     };
 };
+// --- Geometric-shape corner resize (rect/ellipse/polygon). The shape twin of
+// the rectangle-annotation corner drag above: drag one bounding-box corner to
+// scale length and width about the opposite (fixed) corner. Shared by the
+// native UI-thread drag via DragSelectionConfig AND the web pointer handlers. ---
+// Doc-space floor on a resized shape's width/height. Keeps a corner drag from
+// collapsing a shape to a line (and from crossing the fixed corner, which would
+// mirror a triangle), so the scale stays positive on both axes. The native
+// shapeResizeScale worklet inlines the same value — keep them in sync.
+const MIN_SHAPE_EXTENT = 1;
+// Which shapes get the corner-scale handles: rect (two-corner geometry, scaled
+// exactly like the rectangle annotation), polygon/triangle (all points scaled
+// about the fixed corner) and ellipse. Lines/arrows resize via their endpoint
+// handles and text via its own font-size handle, so both are excluded here.
+const isCornerResizableShape = (s) => (s.kind === 'rect' || s.kind === 'ellipse' || s.kind === 'polygon') &&
+    s.geometry.points.length >= 2;
+// The shape's visual bounds expressed as the {a,b} rect the rectCornerPoint/
+// oppositeRectCorner helpers consume (so shapes reuse the exact corner math the
+// rectangle annotation already uses). Uses visualShapeBounds, so the corner
+// handles/hit-test sit on the same box the selection outline draws — for an
+// ellipse that's the circle's bounding square, not the raw drag rect.
+const shapeCornerRect = (s) => {
+    const vb = visualShapeBounds(s);
+    if (!vb)
+        return null;
+    return { a: { x: vb.minX, y: vb.minY }, b: { x: vb.maxX, y: vb.maxY } };
+};
+// Which bounding-box corner of a (selected) resizable shape is under `world`,
+// or null. Mirrors findRectCornerHit but reads the box from the shape's points.
+const findShapeCornerHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || !isCornerResizableShape(s))
+        return null;
+    const rect = shapeCornerRect(s);
+    if (!rect)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    let best = null;
+    for (const corner of ['tl', 'tr', 'bl', 'br']) {
+        const p = rectCornerPoint(rect, corner);
+        const d = (world.x - p.x) ** 2 + (world.y - p.y) ** 2;
+        if (d <= r2 && (!best || d < best.d))
+            best = { corner, d };
+    }
+    if (!best)
+        return null;
+    return {
+        corner: best.corner,
+        moving: rectCornerPoint(rect, best.corner),
+        fixed: rectCornerPoint(rect, oppositeRectCorner(best.corner)),
+    };
+};
+// Scale every geometry point about the fixed (opposite) corner so the grabbed
+// corner follows the drag. The moving corner is clamped so it can't cross or
+// collapse onto the fixed corner (min extent on each axis), keeping the scale
+// positive — no flip, no zero-size shape.
+//
+// rect/polygon scale length and width INDEPENDENTLY (a two-point rect's grabbed
+// corner tracks the finger; a polygon's whole outline scales). An ellipse
+// renders as a circle (radius = half its larger extent), so it scales
+// UNIFORMLY off the diagonal instead — otherwise a non-uniform drag would
+// preview as an oval and then snap back to a circle on commit.
+const shapeCornerPatch = (doc, id, corner, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || !isCornerResizableShape(s))
+        return null;
+    const rect = shapeCornerRect(s);
+    if (!rect)
+        return null;
+    const fixed = rectCornerPoint(rect, oppositeRectCorner(corner));
+    const moving = rectCornerPoint(rect, corner);
+    const denomX = moving.x - fixed.x;
+    const denomY = moving.y - fixed.y;
+    // Clamp the dragged offset to the same side of the fixed corner, magnitude
+    // >= MIN_SHAPE_EXTENT, so the scale factor never flips sign or hits zero.
+    const clampOffset = (offset, sign) => sign >= 0
+        ? Math.max(MIN_SHAPE_EXTENT, offset)
+        : Math.min(-MIN_SHAPE_EXTENT, offset);
+    const offX = clampOffset(moving.x + delta.x - fixed.x, denomX >= 0 ? 1 : -1);
+    const offY = clampOffset(moving.y + delta.y - fixed.y, denomY >= 0 ? 1 : -1);
+    let sx = denomX !== 0 ? offX / denomX : 1;
+    let sy = denomY !== 0 ? offY / denomY : 1;
+    if (s.kind === 'ellipse') {
+        // Uniform: ratio of the new corner-distance to the old, so the circle
+        // grows/shrinks about the fixed corner without distorting.
+        const oldDiag = Math.hypot(denomX, denomY);
+        const s0 = oldDiag !== 0 ? Math.hypot(offX, offY) / oldDiag : 1;
+        sx = s0;
+        sy = s0;
+    }
+    const points = s.geometry.points.map((p) => ({
+        x: fixed.x + (p.x - fixed.x) * sx,
+        y: fixed.y + (p.y - fixed.y) * sy,
+    }));
+    return {
+        ops: [
+            { op: 'updateShape', id, patch: { geometry: { ...s.geometry, points } } },
+        ],
+    };
+};
 // --- Text-shape resize (corner-scale about the top-left anchor; shared by the
 // native UI-thread drag via DragSelectionConfig AND the web pointer handlers) ---
 // Resize geometry when the (selected) text shape's corner handle is under
@@ -367,6 +466,9 @@ const dragPatch = (s, doc, delta, zoom) => {
     if (s.mode === 'rect-corner' && s.corner) {
         return rectCornerPatch(doc, s.id, s.corner, delta);
     }
+    if (s.mode === 'shape-corner' && s.corner) {
+        return shapeCornerPatch(doc, s.id, s.corner, delta);
+    }
     const op = translatePatch(s.elementKind, s.id, doc, delta);
     return op ? { ops: [op] } : null;
 };
@@ -394,6 +496,8 @@ export const createSelectTool = () => ({
         buildResizePatch: resizePatch,
         hitTestRectCorner: findRectCornerHit,
         buildRectCornerPatch: rectCornerPatch,
+        hitTestShapeCorner: findShapeCornerHit,
+        buildShapeCornerPatch: shapeCornerPatch,
     },
     // Web pointer path. Mirrors the native UI-thread drag using the same shared
     // helpers: an endpoint handle on the selected annotation resizes the line;
@@ -448,6 +552,19 @@ export const createSelectTool = () => ({
                     delta: { x: 0, y: 0 },
                 };
             }
+            const shapeCorner = findShapeCornerHit(ctx.document, selId, world, zoom);
+            if (shapeCorner) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'shape-corner',
+                    corner: shapeCorner.corner,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
             const rectCorner = findRectCornerHit(ctx.document, selId, world, zoom);
             if (rectCorner) {
                 ctx.setSelection({ ids: [selId] });

package/dist/annotation/canvas/tools/shapeTool.d.ts

@@ -8,6 +8,7 @@ export interface ShapeToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minDragPx?: number;
 }
@@ -18,6 +19,7 @@ export declare const buildShapeFromDrag: (opts: {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     layerId: string;
     id?: string;

package/dist/annotation/canvas/tools/shapeTool.js

@@ -24,10 +24,12 @@ export const buildShapeFromDrag = (opts) => ({
         strokeWidth: opts.width,
         ...(opts.dash && { dash: true }),
         // Caps only mean something on an open line; 'round' is the implicit
-        // default so it stays un-persisted.
+        // default so it stays un-persisted. Only 'arrow' matters for the start.
         ...(opts.kind === 'line' &&
             opts.cap &&
             opts.cap !== 'round' && { cap: opts.cap }),
+        ...(opts.kind === 'line' &&
+            opts.startCap === 'arrow' && { startCap: 'arrow' }),
     },
     createdAt: Date.now(),
 });
@@ -42,6 +44,7 @@ export const createShapeTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
     const cap = options.cap;
+    const startCap = options.startCap;
     const dash = options.dash ?? false;
     const minDragPx = options.minDragPx ?? 4;
     return {
@@ -49,7 +52,14 @@ export const createShapeTool = (options = {}) => {
         label: options.label ?? DEFAULT_LABELS[kind],
         cursor: 'crosshair',
         // Drives UI-thread rubber-banding on native (see ShapeDrawConfig).
-        shapeDraw: { kind, color, width, ...(cap && { cap }), dash },
+        shapeDraw: {
+            kind,
+            color,
+            width,
+            ...(cap && { cap }),
+            ...(startCap === 'arrow' && { startCap: 'arrow' }),
+            dash,
+        },
         onPointerDown(event, ctx) {
             return {
                 kind: 'shape-drawing',
@@ -60,6 +70,7 @@ export const createShapeTool = (options = {}) => {
                     color,
                     width,
                     cap,
+                    startCap,
                     dash,
                     layerId: firstLayerId(ctx.document),
                 }),

package/dist/types/annotation.d.ts

@@ -13,6 +13,7 @@ export interface AnnotationStroke {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     points: number[];
     pressure?: number[];
@@ -29,6 +30,7 @@ export interface AnnotationShapeStyle {
     dash?: boolean;
     textDecoration?: AnnotationTextDecoration;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
 }
 export interface AnnotationShape {
     id: AnnotationElementId;
@@ -65,6 +67,7 @@ export interface PlacedMeasurementRef {
     lineColor?: string;
     lineWidth?: number;
     lineCap?: StrokeCap;
+    lineStartCap?: StrokeCap;
     lineDash?: boolean;
     leader?: {
         from: Vec2;

package/dist/types/annotation.js

@@ -12,8 +12,14 @@ export const createEmptyCanvasState = (viewport) => ({
     viewport: {
         width: viewport?.width ?? 1000,
         height: viewport?.height ?? 1000,
-        backgroundImage: viewport?.backgroundImage,
-        backgroundFit: viewport?.backgroundFit,
+        // Only include the optional keys when defined — emitting explicit
+        // `undefined` values breaks Firestore writes (RN rejects undefined fields).
+        ...(viewport?.backgroundImage !== undefined
+            ? { backgroundImage: viewport.backgroundImage }
+            : {}),
+        ...(viewport?.backgroundFit !== undefined
+            ? { backgroundFit: viewport.backgroundFit }
+            : {}),
     },
     strokes: [],
     shapes: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.6.23",
+  "version": "1.6.24",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",