@reekon-tools/boldr-utils 1.6.10 → 1.6.12

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

@@ -0,0 +1,668 @@
+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 { 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 { 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 { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
+let strokeCounter = 0;
+const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
+// Screen-px radius of a measurement-annotation endpoint handle dot. Divided by
+// the live zoom so the handle is a constant on-screen size.
+const HANDLE_RADIUS_PX = 7;
+// 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.
+//
+// Performance model: the viewport lives in Reanimated shared values
+// (`zoom`/`panX`/`panY`) so two-finger pan/zoom runs entirely on the UI
+// thread — the gesture worklets mutate the shared values and a derived
+// transform feeds Skia's <Group> with zero React renders per frame. The JS
+// snapshot in `useAnnotationCanvasState` (which tools' screenToWorld reads)
+// is only re-synced once each gesture ends. The tool/tap path still hops to
+// JS (`runOnJS(true)`) since drawing/selection are React-state operations.
+export const AnnotationCanvasInner = (props) => {
+    const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, width, height, style, } = props;
+    const valueFont = useFont(stampFontSource, stampValueFontSize);
+    const state = useAnnotationCanvasState(props);
+    // Latest state behind a ref so the gesture object can be built once and
+    // never rebuilt mid-gesture — its JS callbacks read `stateRef.current`.
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    // 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);
+    const panX = useSharedValue(state.viewport.pan.x);
+    const panY = useSharedValue(state.viewport.pan.y);
+    const pinchStartZoom = useSharedValue(state.viewport.zoom);
+    // Skia consumes this directly and re-renders the transform on the UI thread.
+    const worldTransform = useDerivedValue(() => {
+        'worklet';
+        return [
+            { scale: zoom.value },
+            { translateX: -panX.value },
+            { translateY: -panY.value },
+        ];
+    });
+    // In-flight freehand stroke, owned by the UI thread. The drawing gesture
+    // appends world-space points to `livePoints`; `livePath` rebuilds the Skia
+    // 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);
+    const livePath = useDerivedValue(() => {
+        'worklet';
+        const pts = livePoints.value;
+        const path = Skia.Path.Make();
+        if (pts.length >= 2) {
+            path.moveTo(pts[0], pts[1]);
+            for (let i = 2; i < pts.length; i += 2) {
+                path.lineTo(pts[i], pts[i + 1]);
+            }
+        }
+        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.
+    const placedStrokes = state.effectiveCanvas.strokes;
+    useEffect(() => {
+        if (!pendingClearStrokeId)
+            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 freehand = state.activeTool?.freehand ?? null;
+    const panViewport = !!state.activeTool?.panViewport;
+    const dragSelection = state.activeTool?.dragSelection ?? null;
+    // 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
+    // element gets the transform — flipping it to null in the same commit that
+    // bakes the translation into the element's points avoids any flicker.
+    const dragX = useSharedValue(0);
+    const dragY = useSharedValue(0);
+    const dragTransform = useDerivedValue(() => {
+        'worklet';
+        return [{ translateX: dragX.value }, { translateY: dragY.value }];
+    });
+    const [draggingId, setDraggingId] = useState(null);
+    // The element grabbed at drag-start, carried to drag-end to build the commit.
+    const dragTargetRef = useRef(null);
+    // Set on a real drag end so onFinalize doesn't double-clear on the cancel path.
+    const dragEnded = useSharedValue(false);
+    // Slide-along-line (measurement annotation tile grabbed). `slidingId` (React
+    // state) gates which tile slides; `slideCtx` carries the line endpoints + the
+    // tile's position-at-grab so the overlay worklet can map the live drag delta
+    // to a clamped/snapped position along the line — pure UI-thread math, no
+    // per-frame JS. The Skia line stays static (draggingId is NOT set), only the
+    // tile moves.
+    const [slidingId, setSlidingId] = useState(null);
+    const slideCtx = useSharedValue({ ax: 0, ay: 0, bx: 0, by: 0, t0: 0.5 });
+    const slideTargetRef = useRef(null);
+    // Endpoint drag (resize/rotate a measurement annotation's line). `epDragId`
+    // (React state) marks which annotation's line renders from the live endpoints;
+    // `epCtx` carries the base endpoints, the tile's linePos, and which handle
+    // (0 = a, 1 = b) is moving, so the Skia line + overlay tile can be driven on
+    // the UI thread from `dragX`/`dragY`.
+    const [epDragId, setEpDragId] = useState(null);
+    const epCtx = useSharedValue({ ax: 0, ay: 0, bx: 0, by: 0, t0: 0.5, handle: 0 });
+    const epTargetRef = useRef(null);
+    // Live line endpoints during an endpoint drag: the grabbed handle follows the
+    // finger (dragX/dragY); the other stays put. Fed to the Skia <Line> for the
+    // dragged annotation.
+    const liveLineP1 = useDerivedValue(() => {
+        'worklet';
+        const c = epCtx.value;
+        return c.handle === 0
+            ? { x: c.ax + dragX.value, y: c.ay + dragY.value }
+            : { x: c.ax, y: c.ay };
+    });
+    const liveLineP2 = useDerivedValue(() => {
+        'worklet';
+        const c = epCtx.value;
+        return c.handle === 1
+            ? { x: c.bx + dragX.value, y: c.by + dragY.value }
+            : { x: c.bx, y: c.by };
+    });
+    // Screen-constant endpoint handle radius: a fixed pixel size divided by the
+    // live zoom (the handles are drawn inside the zoom-scaled world group).
+    const handleRadius = useDerivedValue(() => {
+        'worklet';
+        return HANDLE_RADIUS_PX / zoom.value;
+    });
+    // Per-gesture refs so we always emit a matching down/move/up sequence.
+    const pointerIdRef = useRef(1);
+    const inFlightRef = useRef(null);
+    // >0 while a viewport (pan/zoom) gesture is active. Guards the JS→UI sync
+    // effect so an in-flight gesture's shared values are never clobbered by a
+    // late-flushing setViewport from a previous gesture.
+    const activeViewportGestures = useRef(0);
+    // Push JS-originated viewport changes (initial mount, zoomToFit, resetView)
+    // onto the UI thread. Gesture-driven changes already live in the shared
+    // values, so during a gesture this is skipped; the post-gesture re-sync
+    // writes back identical values (no visual jump).
+    useEffect(() => {
+        if (activeViewportGestures.current > 0)
+            return;
+        zoom.value = state.viewport.zoom;
+        panX.value = state.viewport.pan.x;
+        panY.value = state.viewport.pan.y;
+    }, [state.viewport, zoom, panX, panY]);
+    const gesture = useMemo(() => {
+        const buildEvent = (pointerId, screen) => ({
+            pointerId,
+            screen,
+            world: stateRef.current.ctx.viewport.screenToWorld(screen),
+        });
+        // Commit the final viewport to the JS snapshot once a gesture ends, so
+        // tools' screenToWorld/worldToScreen reflect the new pan/zoom.
+        const syncViewport = (next) => {
+            stateRef.current.setViewport(next);
+        };
+        const beginViewportGesture = () => {
+            activeViewportGestures.current += 1;
+        };
+        const endViewportGesture = () => {
+            activeViewportGestures.current = Math.max(0, activeViewportGestures.current - 1);
+        };
+        const toolPan = Gesture.Pan()
+            .minPointers(1)
+            .maxPointers(1)
+            .runOnJS(true)
+            .onBegin((e) => {
+            const id = pointerIdRef.current++;
+            const screen = { x: e.x, y: e.y };
+            inFlightRef.current = { id, lastScreen: screen };
+            stateRef.current.dispatchPointerDown(buildEvent(id, screen));
+        })
+            .onUpdate((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            const screen = { x: e.x, y: e.y };
+            f.lastScreen = screen;
+            stateRef.current.dispatchPointerMove(buildEvent(f.id, screen));
+        })
+            .onEnd((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            stateRef.current.dispatchPointerUp(buildEvent(f.id, { x: e.x, y: e.y }));
+            inFlightRef.current = null;
+        })
+            .onFinalize(() => {
+            if (inFlightRef.current) {
+                stateRef.current.dispatchPointerCancel();
+                inFlightRef.current = null;
+            }
+        });
+        const tap = Gesture.Tap()
+            .maxDuration(250)
+            .runOnJS(true)
+            .onEnd((e) => {
+            const st = stateRef.current;
+            const screen = { x: e.x, y: e.y };
+            // Freehand tools (pen/marker/highlighter): a tap places a single dot.
+            // The draw Pan needs movement to activate, so a pure tap never reaches
+            // it — handle the dot here. Commit a degenerate two-point path (the
+            // same world point twice); StrokeElement strokes it with a round cap,
+            // which renders as a filled dot of diameter = stroke width.
+            const fh = st.activeTool?.freehand;
+            if (fh) {
+                const world = st.ctx.viewport.screenToWorld(screen);
+                // A zero-length dot has no direction ('arrow') and is invisible with a
+                // 'butt' cap, so coerce both to 'round' (a 'square' dot is fine).
+                const cap = fh.cap ?? 'round';
+                const stroke = {
+                    id: makeStrokeId(),
+                    layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    tool: fh.variant,
+                    color: fh.color,
+                    width: fh.width,
+                    cap: cap === 'butt' || cap === 'arrow' ? 'round' : cap,
+                    points: [world.x, world.y, world.x, world.y],
+                    createdAt: Date.now(),
+                };
+                st.ctx.commit({ ops: [{ op: 'addStroke', stroke }] });
+                return;
+            }
+            // 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));
+        });
+        // Viewport pan — runs on the UI thread (no runOnJS), mutating the shared
+        // viewport directly. Mirrors viewport.ts `panBy`. Used for both the
+        // two-finger pan (always available) and the one-finger Hand tool.
+        const buildViewportPan = (minP, maxP) => Gesture.Pan()
+            .minPointers(minP)
+            .maxPointers(maxP)
+            .onBegin(() => {
+            'worklet';
+            runOnJS(beginViewportGesture)();
+        })
+            .onChange((e) => {
+            'worklet';
+            panX.value -= e.changeX / zoom.value;
+            panY.value -= e.changeY / zoom.value;
+        })
+            .onEnd(() => {
+            'worklet';
+            runOnJS(syncViewport)({
+                zoom: zoom.value,
+                pan: { x: panX.value, y: panY.value },
+            });
+        })
+            .onFinalize(() => {
+            'worklet';
+            runOnJS(endViewportGesture)();
+        });
+        const viewportPan = buildViewportPan(2, 2);
+        // Pinch-to-zoom about the focal point — UI thread. Mirrors viewport.ts
+        // `zoomAt`: keep the world point under the focal screen point fixed.
+        const pinch = Gesture.Pinch()
+            .onBegin(() => {
+            'worklet';
+            pinchStartZoom.value = zoom.value;
+            runOnJS(beginViewportGesture)();
+        })
+            .onUpdate((e) => {
+            'worklet';
+            const clamped = Math.min(50, Math.max(0.05, pinchStartZoom.value * e.scale));
+            // World point currently under the focal screen point (using the live
+            // zoom/pan), then re-anchor pan so it stays put at the new zoom.
+            const focalWorldX = e.focalX / zoom.value + panX.value;
+            const focalWorldY = e.focalY / zoom.value + panY.value;
+            panX.value = focalWorldX - e.focalX / clamped;
+            panY.value = focalWorldY - e.focalY / clamped;
+            zoom.value = clamped;
+        })
+            .onEnd(() => {
+            'worklet';
+            runOnJS(syncViewport)({
+                zoom: zoom.value,
+                pan: { x: panX.value, y: panY.value },
+            });
+        })
+            .onFinalize(() => {
+            'worklet';
+            runOnJS(endViewportGesture)();
+        });
+        // Freehand drawing (pen/marker/highlighter) — one finger, UI thread.
+        // Accumulates world-space points into `livePoints` (which feeds the live
+        // Skia path) and commits the finished stroke once, on pointer-up. No JS
+        // hop or React render per sample.
+        const buildDrawPan = (fh) => {
+            const minDistSq = fh.minSampleDistance * fh.minSampleDistance;
+            const commitFreehand = (worldPoints) => {
+                // Need at least two distinct samples to make a stroke.
+                if (worldPoints.length >= 4) {
+                    const st = stateRef.current;
+                    const stroke = {
+                        id: makeStrokeId(),
+                        layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                        tool: fh.variant,
+                        color: fh.color,
+                        width: fh.width,
+                        cap: fh.cap ?? 'round',
+                        points: worldPoints,
+                        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);
+                }
+                else {
+                    // Nothing committed (too few samples) — no stroke to wait for, so drop
+                    // the stray preview immediately.
+                    livePoints.value = [];
+                }
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onBegin((e) => {
+                'worklet';
+                drawCommitted.value = false;
+                // screen → world using the live viewport (single finger, so the
+                // viewport isn't moving here).
+                livePoints.value = [
+                    e.x / zoom.value + panX.value,
+                    e.y / zoom.value + panY.value,
+                ];
+            })
+                .onChange((e) => {
+                'worklet';
+                const wx = e.x / zoom.value + panX.value;
+                const wy = e.y / zoom.value + panY.value;
+                const pts = livePoints.value;
+                const n = pts.length;
+                if (n >= 2) {
+                    const dx = wx - pts[n - 2];
+                    const dy = wy - pts[n - 1];
+                    if (dx * dx + dy * dy < minDistSq)
+                        return;
+                }
+                livePoints.value = [...pts, wx, wy];
+            })
+                .onEnd(() => {
+                'worklet';
+                drawCommitted.value = true;
+                runOnJS(commitFreehand)([...livePoints.value]);
+            })
+                .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 = [];
+            });
+        };
+        // Element drag (select tool) — one finger, UI thread. Hit-tests on the JS
+        // thread at drag-start (needs the document), then translates the hit
+        // element via a shared-value Skia transform and commits once on release.
+        // `draggingId` gates which element gets the transform; clearing it in the
+        // same tick as the commit avoids any flicker (see DragSelectionConfig).
+        const buildSelectDragPan = (cfg) => {
+            const beginSelectDrag = (screen) => {
+                const st = stateRef.current;
+                const world = st.ctx.viewport.screenToWorld(screen);
+                const zoomNow = st.ctx.viewport.state.zoom;
+                // Endpoint handles show only on the selected annotation, so check the
+                // current selection's handles before the general hit-test.
+                const selId = st.ctx.selection?.ids[0];
+                if (selId) {
+                    const handle = cfg.hitTestHandle?.(st.ctx.document, selId, world, zoomNow);
+                    if (handle) {
+                        const m = st.ctx.document.placedMeasurements.find((x) => x.id === selId);
+                        if (m?.line) {
+                            epCtx.value = {
+                                ax: m.line.a.x,
+                                ay: m.line.a.y,
+                                bx: m.line.b.x,
+                                by: m.line.b.y,
+                                t0: m.linePos ?? 0.5,
+                                handle: handle === 'a' ? 0 : 1,
+                            };
+                            epTargetRef.current = { id: selId, handle };
+                            setEpDragId(selId);
+                            return;
+                        }
+                    }
+                }
+                const hit = cfg.hitTest(st.ctx.document, world, zoomNow);
+                if (!hit) {
+                    st.ctx.setSelection(null);
+                    dragTargetRef.current = null;
+                    return;
+                }
+                st.ctx.setSelection({ ids: [hit.id] });
+                // Grabbing a line annotation's tile slides it; otherwise group-move.
+                const grab = hit.kind === 'measurement'
+                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow)
+                    : 'move';
+                if (grab === 'slide') {
+                    const m = st.ctx.document.placedMeasurements.find((x) => x.id === hit.id);
+                    if (m?.line) {
+                        slideCtx.value = {
+                            ax: m.line.a.x,
+                            ay: m.line.a.y,
+                            bx: m.line.b.x,
+                            by: m.line.b.y,
+                            t0: m.linePos ?? 0.5,
+                        };
+                        slideTargetRef.current = { id: hit.id };
+                        setSlidingId(hit.id);
+                        return;
+                    }
+                }
+                dragTargetRef.current = hit;
+                setDraggingId(hit.id);
+            };
+            const endSelectDrag = (dx, dy) => {
+                const st = stateRef.current;
+                // Endpoint commit: move the grabbed endpoint by the world delta.
+                const epT = epTargetRef.current;
+                if (epT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildEndpointPatch?.(st.ctx.document, epT.id, epT.handle, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    epTargetRef.current = null;
+                    setEpDragId(null);
+                    return;
+                }
+                // Slide commit: map the final world delta to a clamped/snapped linePos.
+                const slideT = slideTargetRef.current;
+                if (slideT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildSlidePatch?.(st.ctx.document, slideT.id, { x: dx, y: dy }, st.ctx.viewport.state.zoom);
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    slideTargetRef.current = null;
+                    setSlidingId(null);
+                    return;
+                }
+                const target = dragTargetRef.current;
+                if (target && (dx !== 0 || dy !== 0)) {
+                    const patch = cfg.buildTranslatePatch(st.ctx.document, target.id, target.kind, {
+                        x: dx,
+                        y: dy,
+                    });
+                    if (patch)
+                        st.ctx.commit(patch);
+                }
+                // Unwrap in the same render batch as the commit: the element lands at
+                // its new baked-in points with no transform. The stale dragX/dragY are
+                // never applied while draggingId is null, and are reset on next start.
+                dragTargetRef.current = null;
+                setDraggingId(null);
+            };
+            const cancelSelectDrag = () => {
+                // No commit — dropping draggingId/slidingId/epDragId snaps everything back.
+                dragTargetRef.current = null;
+                slideTargetRef.current = null;
+                epTargetRef.current = null;
+                setDraggingId(null);
+                setSlidingId(null);
+                setEpDragId(null);
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onStart((e) => {
+                'worklet';
+                dragEnded.value = false;
+                dragX.value = 0;
+                dragY.value = 0;
+                // Hit-test at the touch-down point — onStart fires only after the
+                // pan threshold, so back out the accumulated translation.
+                runOnJS(beginSelectDrag)({
+                    x: e.x - e.translationX,
+                    y: e.y - e.translationY,
+                });
+            })
+                .onChange((e) => {
+                'worklet';
+                // World-space delta from the drag origin. Applied to the element
+                // only once draggingId is set; otherwise it affects nothing.
+                dragX.value = e.translationX / zoom.value;
+                dragY.value = e.translationY / zoom.value;
+            })
+                .onEnd(() => {
+                'worklet';
+                dragEnded.value = true;
+                runOnJS(endSelectDrag)(dragX.value, dragY.value);
+            })
+                .onFinalize(() => {
+                'worklet';
+                if (!dragEnded.value)
+                    runOnJS(cancelSelectDrag)();
+            });
+        };
+        // One finger, by active tool:
+        //  - freehand (pen/marker/highlighter) → draw 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;
+        return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), oneFinger);
+    }, [
+        zoom,
+        panX,
+        panY,
+        pinchStartZoom,
+        livePoints,
+        freehand,
+        panViewport,
+        dragSelection,
+        dragX,
+        dragY,
+        dragEnded,
+        slideCtx,
+        epCtx,
+    ]);
+    const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
+    const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
+    const { renderMeasurementStamp, 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,
+                        effectiveCanvas: state.effectiveCanvas,
+                        worldTransform,
+                        resolveImageUrl,
+                        valueFont,
+                        // Freehand drawing runs on the UI thread via `livePreview`, so the
+                        // JS-state pen preview is unused on native.
+                        penDrawingStroke: null,
+                        livePreview: freehand
+                            ? {
+                                path: livePath,
+                                color: freehand.color,
+                                width: freehand.width,
+                                cap: freehand.cap ?? 'round',
+                                opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
+                            }
+                            : null,
+                        draggingId,
+                        dragTransform,
+                        selectedId: selection?.ids[0] ?? null,
+                        endpointDragId: epDragId,
+                        liveLineP1,
+                        liveLineP2,
+                        handleRadius,
+                        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, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, renderMeasurementStamp: renderMeasurementStamp, 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, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, renderMeasurementStamp, onRemove, }) => {
+    const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
+    const half = size / 2;
+    const anchorX = placed.anchor.x;
+    const anchorY = placed.anchor.y;
+    // doc → screen each frame, on the UI thread. Position is a translate
+    // transform (cheap, no layout) so the pin stays glued to its anchor. While
+    // dragging, the world-space drag offset is folded in; while sliding, the
+    // position is mapped onto the line. `dragging`/`sliding` are captured props,
+    // so the moment they flip false (on commit) the worklet drops the live offset
+    // in the same render the new anchor arrives — no flicker.
+    const animatedStyle = useAnimatedStyle(() => {
+        'worklet';
+        let worldX = anchorX;
+        let worldY = anchorY;
+        if (sliding) {
+            // WORKLET TWIN of selectTool.buildSlidePatch — keep in sync.
+            // t = clamp(t0 + (delta·ab)/|ab|²), snap to center with a screen-px detent.
+            const c = slideCtx.value;
+            const abx = c.bx - c.ax;
+            const aby = c.by - c.ay;
+            const lenSq = abx * abx + aby * aby;
+            let t = lenSq === 0
+                ? c.t0
+                : c.t0 + (dragX.value * abx + dragY.value * aby) / lenSq;
+            t = t < 0 ? 0 : t > 1 ? 1 : t;
+            const lineLen = Math.sqrt(lenSq);
+            const snapT = lineLen > 0 ? 12 / zoom.value / lineLen : 0; // SLIDE_SNAP_PX = 12
+            if (Math.abs(t - 0.5) <= snapT)
+                t = 0.5;
+            worldX = c.ax + abx * t;
+            worldY = c.ay + aby * t;
+        }
+        else if (endpointDragging) {
+            // Tile stays at its linePos along the LIVE line: fold the drag delta into
+            // the moving endpoint (handle 0 = a, 1 = b), then lerp at t0.
+            const c = epCtx.value;
+            const ax = c.handle === 0 ? c.ax + dragX.value : c.ax;
+            const ay = c.handle === 0 ? c.ay + dragY.value : c.ay;
+            const bx = c.handle === 1 ? c.bx + dragX.value : c.bx;
+            const by = c.handle === 1 ? c.by + dragY.value : c.by;
+            worldX = ax + (bx - ax) * c.t0;
+            worldY = ay + (by - ay) * c.t0;
+        }
+        else if (dragging) {
+            worldX = anchorX + dragX.value;
+            worldY = anchorY + dragY.value;
+        }
+        const cx = (worldX - panX.value) * zoom.value;
+        const cy = (worldY - panY.value) * zoom.value;
+        return {
+            transform: [{ translateX: cx - half }, { translateY: cy - half }],
+        };
+    });
+    return (_jsxs(Animated.View, { pointerEvents: "box-none", style: [
+            { position: 'absolute', left: 0, top: 0, width: size, height: size },
+            animatedStyle,
+        ], children: [_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: renderMeasurementStamp({
+                    placed,
+                    measurement,
+                    selected,
+                    size,
+                    zoom: zoomSnapshot,
+                }) }), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
+                    position: 'absolute',
+                    top: -8,
+                    right: -8,
+                    width: 36,
+                    height: 36,
+                } }))] }));
+};