@reekon-tools/boldr-utils 1.6.13 → 1.6.14

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skia, useFont } from '@shopify/react-native-skia';
-import { useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
+import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
 import { STAMP_TILE_SIZE } from './stampLayout.js';
 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 { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
@@ -53,19 +54,19 @@ export const AnnotationCanvasInner = (props) => {
     // path off it. React state is untouched until the stroke commits on
     // pointer-up — so high-frequency drawing never hits the JS thread.
     const livePoints = useSharedValue([]);
-    // Set on a successful stroke end so onFinalize doesn't clear the live path
-    // out from under the (async) commit — the committed stroke replaces it once
-    // it lands in React state. Cleared paths only flicker if there's a gap, so
-    // we keep the live path until commit, and only onFinalize-clear on cancel.
-    const drawCommitted = useSharedValue(false);
-    // Id of a just-committed stroke whose live preview is still showing. We hold
-    // the preview until that stroke is actually present in `effectiveCanvas`
-    // (i.e. rendered + painted), THEN clear it — so the preview and the committed
-    // <StrokeElement> overlap for one frame instead of leaving a gap. Clearing
-    // synchronously in the commit callback would race the (async) React re-render
-    // and erase the preview a frame or two before the committed stroke paints,
-    // which reads as a flash on release. See the clear-on-paint effect below.
-    const [pendingClearStrokeId, setPendingClearStrokeId] = useState(null);
+    // Finished strokes handed off from `livePoints` but not yet confirmed
+    // painted by React. The draw gesture's onEnd moves the live buffer here IN
+    // THE SAME WORKLET TICK (before the commit hops to JS), so a new stroke's
+    // onBegin can repurpose `livePoints` without ever erasing ink whose
+    // committed <StrokeElement> hasn't rendered yet — the gap that used to read
+    // as the previous line flickering when the JS thread was busy. Entries are
+    // removed (on the UI thread, to never race a concurrent onEnd append) once
+    // their stroke is present in `effectiveCanvas`, by the paint-watch effect
+    // below. A list, not a single slot: several quick strokes can be awaiting
+    // paint at once while JS catches up.
+    const handoffStrokes = useSharedValue([]);
+    // JS mirror of the handoff ids whose commits we're waiting to see painted.
+    const [pendingPaintIds, setPendingPaintIds] = useState([]);
     const livePath = useDerivedValue(() => {
         'worklet';
         const pts = livePoints.value;
@@ -78,26 +79,209 @@ export const AnnotationCanvasInner = (props) => {
         }
         return path;
     });
-    // Clear the freehand preview only once the committed stroke is present in the
-    // canvas (this effect runs after that render has painted), so the preview and
-    // the real <StrokeElement> overlap for a frame rather than leaving a gap —
-    // killing the flash that a synchronous clear caused on release.
+    // Each handed-off stroke renders as its OWN <Path> (a fixed pool of slots,
+    // since hooks can't be dynamic): merging them into one path would rasterize
+    // overlaps as single coverage, which visibly under-darkens translucent
+    // variants (highlighter) relative to their committed per-stroke draws. The
+    // last slot absorbs any overflow — 4+ strokes awaiting paint means a
+    // pathological JS stall, where a transient alpha artifact in the overflow
+    // is acceptable. Slots use the CURRENT freehand paint; entries normally
+    // release within a render, long before a human could restyle the pen.
+    const useHandoffSlotPath = (slot, isLast) => useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const entries = handoffStrokes.value;
+        const addPolyline = (pts) => {
+            if (pts.length < 2)
+                return;
+            path.moveTo(pts[0], pts[1]);
+            for (let i = 2; i < pts.length; i += 2) {
+                path.lineTo(pts[i], pts[i + 1]);
+            }
+        };
+        if (isLast) {
+            for (let i = slot; i < entries.length; i++) {
+                addPolyline(entries[i].points);
+            }
+        }
+        else if (entries[slot]) {
+            addPolyline(entries[slot].points);
+        }
+        return path;
+    });
+    const handoffPath0 = useHandoffSlotPath(0, false);
+    const handoffPath1 = useHandoffSlotPath(1, false);
+    const handoffPath2 = useHandoffSlotPath(2, false);
+    const handoffPath3 = useHandoffSlotPath(3, true);
+    // Drop handed-off strokes by id, on the UI thread: onEnd appends to
+    // `handoffStrokes` from a worklet, so a read-filter-write from the JS thread
+    // could interleave with an append and lose the newer stroke. Running the
+    // whole filter as one worklet keeps it serialized with the appends.
+    const removeHandoffStrokes = useCallback((ids) => {
+        runOnUI((toRemove) => {
+            'worklet';
+            handoffStrokes.value = handoffStrokes.value.filter((s) => toRemove.indexOf(s.id) === -1);
+        })(ids);
+    }, [handoffStrokes]);
+    // Release each handed-off stroke only once its committed twin is present in
+    // the canvas, and one frame LATER, not in this effect body. RN Skia's sksg
+    // renderer re-records the scene and dispatches the first draw containing
+    // the committed stroke in a MICROTASK after the Canvas's layout effect
+    // (SkiaSGRoot.render is async) — while a shared-value write here goes to
+    // the UI runtime immediately. If the write wins, the still-active mapper
+    // redraws the PREVIOUS picture (no committed stroke) with the handoff
+    // already cleared: the stroke visibly vanishes until the new recording
+    // lands. A rAF callback runs strictly after this task's microtasks, so the
+    // UI queue is guaranteed to receive draw-new-picture before clear-handoff.
+    // The extra frame of preview+committed overlap is invisible at opacity 1
+    // and a one-frame double-blend for translucent variants.
     const placedStrokes = state.effectiveCanvas.strokes;
     useEffect(() => {
-        if (!pendingClearStrokeId)
+        if (pendingPaintIds.length === 0)
             return;
-        if (placedStrokes.some((s) => s.id === pendingClearStrokeId)) {
-            // Guard: only wipe the preview if a NEW stroke hasn't already begun (its
-            // onBegin flips drawCommitted back to false and has already repurposed
-            // livePoints for the new stroke — clearing here would erase it).
-            if (drawCommitted.value)
-                livePoints.value = [];
-            setPendingClearStrokeId(null);
-        }
-    }, [pendingClearStrokeId, placedStrokes, livePoints, drawCommitted]);
+        const painted = pendingPaintIds.filter((id) => placedStrokes.some((s) => s.id === id));
+        if (painted.length === 0)
+            return;
+        const raf = requestAnimationFrame(() => {
+            removeHandoffStrokes(painted);
+            setPendingPaintIds((prev) => prev.filter((id) => !painted.includes(id)));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [pendingPaintIds, placedStrokes, removeHandoffStrokes]);
     const freehand = state.activeTool?.freehand ?? null;
+    const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? null;
+    // In-flight shape rubber-band (line/arrow/rect/triangle/circle tools),
+    // owned by the UI thread — the shape twin of `livePoints`. The drag worklet
+    // tracks the start/current world points; derived paths below render the
+    // live shape. React is untouched until the single commit on release.
+    const liveShape = useSharedValue({ active: false, ax: 0, ay: 0, bx: 0, by: 0 });
+    // Released shapes awaiting their committed paint — the shape twin of
+    // `handoffStrokes`, with the same lifecycle: appended in the gesture's
+    // onEnd worklet tick, released by the paint-watch effect one rAF after the
+    // committed <ShapeElement> shows up in the effective canvas. Geometry
+    // (kind/cap) rides per entry so a quick sub-tool switch can't morph a
+    // pending shape; paint style comes from the current tool config (entries
+    // release within a render — same accepted caveat as stroke handoffs).
+    const handoffShapes = useSharedValue([]);
+    const [pendingShapePaintIds, setPendingShapePaintIds] = useState([]);
+    // 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 });
+    useEffect(() => {
+        if (!shapeDraw)
+            return;
+        shapeCfg.value = {
+            kind: shapeDraw.kind,
+            cap: shapeDraw.cap ?? 'round',
+            width: shapeDraw.width,
+        };
+    }, [shapeDraw, shapeCfg]);
+    // Outline of the live rubber-band + every pending handoff shape, as one
+    // stroked path. WORKLET TWIN of shapeGeometry.shapePointsFromDrag +
+    // ShapeElement's per-kind rendering — keep in sync. Merging into one path
+    // is safe here (unlike stroke handoffs): shape outlines draw at opacity 1.
+    const shapeBodyPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const add = (kind, ax, ay, bx, by) => {
+            const minX = Math.min(ax, bx);
+            const maxX = Math.max(ax, bx);
+            const minY = Math.min(ay, by);
+            const maxY = Math.max(ay, by);
+            if (kind === 'rect') {
+                path.moveTo(minX, minY);
+                path.lineTo(maxX, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+            else if (kind === 'ellipse') {
+                const r = Math.max(maxX - minX, maxY - minY) / 2;
+                path.addCircle((ax + bx) / 2, (ay + by) / 2, r);
+            }
+            else if (kind === 'triangle') {
+                path.moveTo((minX + maxX) / 2, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+            else {
+                path.moveTo(ax, ay);
+                path.lineTo(bx, by);
+            }
+        };
+        for (const e of handoffShapes.value) {
+            add(e.kind, e.ax, e.ay, e.bx, e.by);
+        }
+        const s = liveShape.value;
+        if (s.active)
+            add(shapeCfg.value.kind, s.ax, s.ay, s.bx, s.by);
+        return path;
+    });
+    // Filled arrowheads for 'line' shapes drawn with cap === 'arrow' (the body
+    // path is stroked, so heads need their own filled path). WORKLET TWIN of
+    // strokeGeometry.arrowheadTriangle — keep in sync.
+    const shapeHeadPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const width = shapeCfg.value.width;
+        const addHead = (ax, ay, bx, by) => {
+            const dx = bx - ax;
+            const dy = by - ay;
+            const len = Math.sqrt(dx * dx + dy * dy);
+            if (len < 0.01)
+                return;
+            const ux = dx / len;
+            const uy = dy / len;
+            const px = -uy;
+            const py = ux;
+            const head = Math.max(width * 2, 6);
+            const half = Math.max(width * 0.9, 4);
+            path.moveTo(bx + ux * head, by + uy * head);
+            path.lineTo(bx + px * half, by + py * half);
+            path.lineTo(bx - px * half, by - py * half);
+            path.close();
+        };
+        for (const e of handoffShapes.value) {
+            if (e.kind === 'line' && e.cap === 'arrow') {
+                addHead(e.ax, e.ay, e.bx, e.by);
+            }
+        }
+        const s = liveShape.value;
+        if (s.active &&
+            shapeCfg.value.kind === 'line' &&
+            shapeCfg.value.cap === 'arrow') {
+            addHead(s.ax, s.ay, s.bx, s.by);
+        }
+        return path;
+    });
+    // Shape twin of removeHandoffStrokes — same UI-thread serialization
+    // rationale (onEnd appends from a worklet; filtering must not interleave).
+    const removeHandoffShapes = useCallback((ids) => {
+        runOnUI((toRemove) => {
+            'worklet';
+            handoffShapes.value = handoffShapes.value.filter((s) => toRemove.indexOf(s.id) === -1);
+        })(ids);
+    }, [handoffShapes]);
+    // Shape twin of the stroke paint-watch effect above — release a handed-off
+    // shape one frame AFTER its committed twin appears, for the same
+    // sksg-microtask-vs-shared-value-write race (see that effect's comment).
+    const placedShapes = state.effectiveCanvas.shapes;
+    useEffect(() => {
+        if (pendingShapePaintIds.length === 0)
+            return;
+        const painted = pendingShapePaintIds.filter((id) => placedShapes.some((s) => s.id === id));
+        if (painted.length === 0)
+            return;
+        const raf = requestAnimationFrame(() => {
+            removeHandoffShapes(painted);
+            setPendingShapePaintIds((prev) => prev.filter((id) => !painted.includes(id)));
+        });
+        return () => cancelAnimationFrame(raf);
+    }, [pendingShapePaintIds, placedShapes, removeHandoffShapes]);
     // UI-thread element drag (select tool). `dragX/dragY` is the live world-space
     // translation the gesture worklet writes; `dragTransform` feeds the Skia
     // group around the dragged element. `draggingId` (React state) gates which
@@ -380,12 +564,12 @@ export const AnnotationCanvasInner = (props) => {
         // hop or React render per sample.
         const buildDrawPan = (fh) => {
             const minDistSq = fh.minSampleDistance * fh.minSampleDistance;
-            const commitFreehand = (worldPoints) => {
+            const commitFreehand = (id, worldPoints) => {
                 // Need at least two distinct samples to make a stroke.
                 if (worldPoints.length >= 4) {
                     const st = stateRef.current;
                     const stroke = {
-                        id: makeStrokeId(),
+                        id,
                         layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
                         tool: fh.variant,
                         color: fh.color,
@@ -396,14 +580,14 @@ export const AnnotationCanvasInner = (props) => {
                         createdAt: Date.now(),
                     };
                     st.ctx.commit({ ops: [{ op: 'addStroke', stroke }] });
-                    // Keep the live preview up until this stroke actually paints (handled
-                    // by the clear-on-paint effect), so there's never a gap on release.
-                    setPendingClearStrokeId(stroke.id);
+                    // The handed-off preview stays up until this stroke actually paints
+                    // (the paint-watch effect releases it), so there's no gap on release.
+                    setPendingPaintIds((prev) => [...prev, id]);
                 }
                 else {
-                    // Nothing committed (too few samples) — no stroke to wait for, so drop
-                    // the stray preview immediately.
-                    livePoints.value = [];
+                    // Nothing committed (too few samples) — no paint to wait for, so
+                    // drop the handed-off entry now.
+                    removeHandoffStrokes([id]);
                 }
             };
             return Gesture.Pan()
@@ -411,9 +595,9 @@ export const AnnotationCanvasInner = (props) => {
                 .maxPointers(1)
                 .onBegin((e) => {
                 'worklet';
-                drawCommitted.value = false;
                 // screen → world using the live viewport (single finger, so the
-                // viewport isn't moving here).
+                // viewport isn't moving here). Any previous stroke has already moved
+                // to `handoffStrokes` (see onEnd), so this can't erase its ink.
                 livePoints.value = [
                     e.x / zoom.value + panX.value,
                     e.y / zoom.value + panY.value,
@@ -435,15 +619,112 @@ export const AnnotationCanvasInner = (props) => {
             })
                 .onEnd(() => {
                 'worklet';
-                drawCommitted.value = true;
-                runOnJS(commitFreehand)([...livePoints.value]);
+                const pts = livePoints.value;
+                if (pts.length < 2) {
+                    livePoints.value = [];
+                    return;
+                }
+                // Hand the finished stroke off in THIS worklet tick: both shared
+                // values feed the same merged livePath, so the swap renders
+                // atomically (no flicker), and the buffer is free for the next
+                // stroke before the commit ever reaches the JS thread. The id is
+                // minted here so the committed stroke and its handed-off preview
+                // can be matched up by the paint-watch effect.
+                const id = `stroke-${Date.now().toString(36)}-${Math.floor(Math.random() * 0x100000000).toString(36)}`;
+                handoffStrokes.value = [...handoffStrokes.value, { id, points: pts }];
+                livePoints.value = [];
+                runOnJS(commitFreehand)(id, pts);
             })
                 .onFinalize(() => {
                 'worklet';
-                // Only clear here on cancel (no onEnd). On success, commitFreehand
-                // clears once the stroke is committed, avoiding a flicker.
-                if (!drawCommitted.value)
-                    livePoints.value = [];
+                // Cancel path (no onEnd): drop the in-flight preview. After a normal
+                // end the buffer is already empty, so this is a no-op.
+                livePoints.value = [];
+            });
+        };
+        // Shape rubber-band (line/arrow/rect/triangle/circle tools) — one finger,
+        // UI thread. The drag worklet tracks start/current world points in
+        // `liveShape` (the derived paths above render it live) and commits the
+        // AnnotationShape once, on release, through the same handoff/paint-watch
+        // dance as freehand strokes so the preview can't clear before the
+        // committed shape's first paint.
+        const buildShapeDrawPan = (cfg) => {
+            const minDragSq = 4 * 4; // screen px² — mirrors shapeTool's minDragPx
+            const commitShape = (id, a, b) => {
+                const st = stateRef.current;
+                const shape = buildShapeFromDrag({
+                    kind: cfg.kind,
+                    a,
+                    b,
+                    color: cfg.color,
+                    width: cfg.width,
+                    cap: cfg.cap,
+                    dash: cfg.dash,
+                    layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    id,
+                });
+                st.ctx.commit({ ops: [{ op: 'addShape', shape }] });
+                setPendingShapePaintIds((prev) => [...prev, id]);
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onBegin((e) => {
+                'worklet';
+                const wx = e.x / zoom.value + panX.value;
+                const wy = e.y / zoom.value + panY.value;
+                liveShape.value = { active: true, ax: wx, ay: wy, bx: wx, by: wy };
+            })
+                .onChange((e) => {
+                'worklet';
+                const s = liveShape.value;
+                if (!s.active)
+                    return;
+                liveShape.value = {
+                    active: true,
+                    ax: s.ax,
+                    ay: s.ay,
+                    bx: e.x / zoom.value + panX.value,
+                    by: e.y / zoom.value + panY.value,
+                };
+            })
+                .onEnd(() => {
+                'worklet';
+                const s = liveShape.value;
+                if (!s.active)
+                    return;
+                // Sub-threshold drags are accidental taps — drop them. (A clean tap
+                // normally wins the gesture race and never gets here anyway.)
+                const dxPx = (s.bx - s.ax) * zoom.value;
+                const dyPx = (s.by - s.ay) * zoom.value;
+                if (dxPx * dxPx + dyPx * dyPx < minDragSq) {
+                    liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
+                    return;
+                }
+                // Hand off in THIS worklet tick (see the stroke onEnd): the live
+                // slot frees atomically with the handoff append, so the preview
+                // never gaps while the commit crosses to the JS thread.
+                const id = `shape-${Date.now().toString(36)}-${Math.floor(Math.random() * 0x100000000).toString(36)}`;
+                handoffShapes.value = [
+                    ...handoffShapes.value,
+                    {
+                        id,
+                        kind: cfg.kind,
+                        cap: cfg.cap ?? 'round',
+                        ax: s.ax,
+                        ay: s.ay,
+                        bx: s.bx,
+                        by: s.by,
+                    },
+                ];
+                liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
+                runOnJS(commitShape)(id, { x: s.ax, y: s.ay }, { x: s.bx, y: s.by });
+            })
+                .onFinalize(() => {
+                'worklet';
+                // Cancel path (no onEnd): drop the in-flight rubber-band. After a
+                // normal end the slot is already inactive, so this is a no-op.
+                liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
             });
         };
         // Element drag (select tool) — one finger, UI thread. Hit-tests on the JS
@@ -653,16 +934,19 @@ export const AnnotationCanvasInner = (props) => {
         };
         // One finger, by active tool:
         //  - freehand (pen/marker/highlighter) → draw on the UI thread
+        //  - shape tools (line/rect/…) → rubber-band on the UI thread
         //  - Hand → pan the viewport on the UI thread (live, no JS round-trip)
         //  - select → drag the hit element on the UI thread
         //  - everything else → dispatch pointer events on the JS thread
         const oneFinger = freehand
             ? buildDrawPan(freehand)
-            : panViewport
-                ? buildViewportPan(1, 1)
-                : dragSelection
-                    ? buildSelectDragPan(dragSelection)
-                    : toolPan;
+            : shapeDraw
+                ? buildShapeDrawPan(shapeDraw)
+                : panViewport
+                    ? buildViewportPan(1, 1)
+                    : dragSelection
+                        ? buildSelectDragPan(dragSelection)
+                        : toolPan;
         return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), oneFinger);
     }, [
         zoom,
@@ -670,7 +954,12 @@ export const AnnotationCanvasInner = (props) => {
         panY,
         pinchStartZoom,
         livePoints,
+        handoffStrokes,
+        removeHandoffStrokes,
+        liveShape,
+        handoffShapes,
         freehand,
+        shapeDraw,
         panViewport,
         dragSelection,
         dragX,
@@ -683,7 +972,7 @@ export const AnnotationCanvasInner = (props) => {
     ]);
     const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, onMeasurementStampPress, selection } = props;
+    const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, selection, } = props;
     return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia({
                         width,
                         height,
@@ -697,6 +986,12 @@ export const AnnotationCanvasInner = (props) => {
                         livePreview: freehand
                             ? {
                                 path: livePath,
+                                handoffPaths: [
+                                    handoffPath0,
+                                    handoffPath1,
+                                    handoffPath2,
+                                    handoffPath3,
+                                ],
                                 color: freehand.color,
                                 width: freehand.width,
                                 cap: freehand.cap ?? 'round',
@@ -704,6 +999,19 @@ export const AnnotationCanvasInner = (props) => {
                                 opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
                             }
                             : null,
+                        // UI-thread shape rubber-band (live + pending handoffs) — only
+                        // while a shape tool is active (handoffs always release within a
+                        // frame or two of the commit, before the tool can change).
+                        shapePreview: shapeDraw
+                            ? {
+                                path: shapeBodyPath,
+                                headPath: shapeHeadPath,
+                                color: shapeDraw.color,
+                                width: shapeDraw.width,
+                                cap: shapeDraw.cap ?? 'round',
+                                dash: shapeDraw.dash ?? false,
+                            }
+                            : null,
                         draggingId,
                         dragTransform,
                         resizingId,
@@ -719,18 +1027,23 @@ export const AnnotationCanvasInner = (props) => {
                             width: liveRectW,
                             height: liveRectH,
                         },
-                        handleRadius,
+                        // 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
+                        // measurement still shows its tile chrome but must not advertise
+                        // draggability).
+                        handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
                         customPreview,
                     }) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
-                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, onStampPress: onMeasurementStampPress, onRemove: () => {
+                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
                         const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
                         state.ctx.commit({ ops });
                         if (!keepSelection)
                             state.ctx.setSelection(null);
                     } }, placed.id))) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onRemove, }) => {
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onStampLongPress, onRemove, }) => {
     const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
     const half = size / 2;
     const anchorX = placed.anchor.x;
@@ -800,7 +1113,7 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
                     selected,
                     size,
                     zoom: zoomSnapshot,
-                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
+                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
                     position: 'absolute',
                     top: -8,
                     right: -8,

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

@@ -27,12 +27,27 @@ 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;
@@ -57,5 +72,5 @@ export interface AnnotationCanvasSkiaProps {
     };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, penDrawingStroke, livePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, 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

@@ -86,7 +86,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, penDrawingStroke, livePreview, 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) => {
+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
@@ -155,4 +155,4 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     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, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) })), 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] }) }));