@reekon-tools/boldr-utils 1.15.3 → 1.15.5

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

@@ -7,9 +7,10 @@ import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useShare
 import { stampTileDims } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
-import { backgroundLayersOf } from './backgroundLayers.js';
+import { backgroundLayersOf, backgroundLayerDocRect, } from './backgroundLayers.js';
 import { BackgroundSkImageLoader } from './elements/BackgroundImageElement.js';
-import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
+import { buildRemoveMeasurementOps, linePosOf, } from './measurementGeometry.js';
+import { planeEdgeLine, planeGridSegments, planeGridSegmentsForScale, resolvePlaneGridSpacingUm, } from './planeGeometry.js';
 import { buildShapeFromDrag } from './tools/shapeTool.js';
 import { SELECTION_PAD } from './textGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
@@ -272,6 +273,7 @@ export const AnnotationCanvasInner = (props) => {
     const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? null;
+    const planeEdit = state.activeTool?.planeEdit ?? null;
     const longPressEnabled = !!state.activeTool?.onLongPress;
     // In-flight shape rubber-band (line/arrow/rect/triangle/circle tools),
     // owned by the UI thread — the shape twin of `livePoints`. The drag worklet
@@ -476,6 +478,134 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RING_PX / zoom.value;
     });
+    // ---- Plane-calibration handle drag (UI thread; Tool.planeEdit) ----------
+    // The plane tool's JS preview path re-rendered the whole canvas (and
+    // recomputed the photo-spanning grid) per pointer-move, dropping JS frames
+    // on device. Instead the drag runs like the select tool's: the gesture
+    // begin hit-tests once on JS, the translation lives in shared values, and
+    // the drop commits exactly once. Everything the drag visually moves is
+    // rebuilt per frame on the UI thread: the outline (worklet twin of
+    // PlaneElement's path), the grid (planeGeometry's generators are worklets),
+    // and the dimension-tile chips (a plane branch in the RN overlay's animated
+    // style, driven by planeTileCtx). Only the tiles' computed VALUES wait for
+    // the commit — they're user-entered dims, which a corner drag can't change.
+    // planeDragMode: 0 idle · 1 handle drag (UI thread) · 2 everything else
+    // (marking / blocked-creation), which streams JS pointer events like
+    // toolPan would have.
+    const planeDragMode = useSharedValue(0);
+    const planeDragEnded = useSharedValue(false);
+    const planeDragTX = useSharedValue(0);
+    const planeDragTY = useSharedValue(0);
+    const planeDragStartX = useSharedValue(0);
+    const planeDragStartY = useSharedValue(0);
+    // React gate for the live render (which plane / which handle); mirrored in
+    // a ref for the gesture's JS handlers, which must read the latest value
+    // without re-building the gesture.
+    const [planeDrag, setPlaneDrag] = useState(null);
+    const planeDragRef = useRef(planeDrag);
+    const planeJsPointerRef = useRef(null);
+    // The dragged handle's live world position: grab-start + screen translation
+    // converted to doc units by the live zoom.
+    const planeDragHandle = useDerivedValue(() => {
+        'worklet';
+        return {
+            x: planeDragStartX.value + planeDragTX.value / zoom.value,
+            y: planeDragStartY.value + planeDragTY.value / zoom.value,
+        };
+    });
+    // WORKLET TWIN of PlaneElement's outline path (quad ring / reference line;
+    // the scale ticks are skipped live and reappear on commit). The committed
+    // plane + dragged index are captured from React state — setPlaneDrag
+    // renders before any movement applies, so the capture is fresh.
+    const planeDragPlane = planeDrag
+        ? ((state.effectiveCanvas.planes ?? []).find((p) => p.id === planeDrag.planeId) ?? null)
+        : null;
+    const planeDragIndexVal = planeDrag?.index ?? -1;
+    const planeDragPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        if (!planeDragPlane || planeDragMode.value !== 1)
+            return path;
+        const lx = planeDragStartX.value + planeDragTX.value / zoom.value;
+        const ly = planeDragStartY.value + planeDragTY.value / zoom.value;
+        if (planeDragPlane.mode === 'perspective') {
+            const c = planeDragPlane.corners;
+            const px = (i) => (i === planeDragIndexVal ? lx : c[i].x);
+            const py = (i) => (i === planeDragIndexVal ? ly : c[i].y);
+            path.moveTo(px(0), py(0));
+            path.lineTo(px(1), py(1));
+            path.lineTo(px(2), py(2));
+            path.lineTo(px(3), py(3));
+            path.close();
+            return path;
+        }
+        const a = planeDragIndexVal === 0 ? { x: lx, y: ly } : planeDragPlane.refLine.a;
+        const b = planeDragIndexVal === 1 ? { x: lx, y: ly } : planeDragPlane.refLine.b;
+        path.moveTo(a.x, a.y);
+        path.lineTo(b.x, b.y);
+        return path;
+    });
+    // Live grid during the drag. Spacing and bounds are start-of-drag constants
+    // computed on JS (the dims a corner drag can't change decide the spacing;
+    // the photo rect decides the bounds — both mirror PlaneElement's inputs),
+    // captured into the derived value; the segments themselves recompute per
+    // frame on the UI thread from the live corner — planeGeometry's generators
+    // carry 'worklet' directives for exactly this call site. Scale mode's doc
+    // spacing tracks the live reference line, which is correct: stretching the
+    // line IS changing the calibration's ratio.
+    const planeDragGridBounds = useMemo(() => {
+        const first = backgroundLayers[0];
+        return first
+            ? backgroundLayerDocRect(first)
+            : {
+                x: 0,
+                y: 0,
+                width: state.effectiveCanvas.viewport.width,
+                height: state.effectiveCanvas.viewport.height,
+            };
+    }, [backgroundLayers, state.effectiveCanvas.viewport]);
+    const planeDragGridSpacing = planeDragPlane && planeDragPlane.gridVisible !== false
+        ? resolvePlaneGridSpacingUm(planeDragPlane, 'metric', {
+            width: planeDragGridBounds.width,
+            height: planeDragGridBounds.height,
+        })
+        : null;
+    const planeDragGridPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        if (!planeDragPlane ||
+            planeDragGridSpacing == null ||
+            planeDragMode.value !== 1) {
+            return path;
+        }
+        const lx = planeDragStartX.value + planeDragTX.value / zoom.value;
+        const ly = planeDragStartY.value + planeDragTY.value / zoom.value;
+        let segments;
+        if (planeDragPlane.mode === 'perspective') {
+            const c = planeDragPlane.corners;
+            const live = [0, 1, 2, 3].map((i) => i === planeDragIndexVal ? { x: lx, y: ly } : c[i]);
+            // A mid-drag non-convex quad yields a null homography → empty grid for
+            // that frame; the outline keeps tracking and the drop snaps back.
+            segments = planeGridSegments({ ...planeDragPlane, corners: live }, planeDragGridSpacing, planeDragGridBounds);
+        }
+        else {
+            const a = planeDragIndexVal === 0 ? { x: lx, y: ly } : planeDragPlane.refLine.a;
+            const b = planeDragIndexVal === 1 ? { x: lx, y: ly } : planeDragPlane.refLine.b;
+            segments = planeGridSegmentsForScale({ ...planeDragPlane, refLine: { a, b } }, planeDragGridSpacing, planeDragGridBounds);
+        }
+        for (const s of segments) {
+            path.moveTo(s.a.x, s.a.y);
+            path.lineTo(s.b.x, s.b.y);
+        }
+        return path;
+    });
+    // Per-tile follow data for the dragged plane's dimension chips, written
+    // once at drag begin (see beginPlaneDrag): the committed edge endpoints,
+    // whether each end follows the dragged handle, and the tile's linePos.
+    // The overlay's animated style lerps along the live edge at that same
+    // linePos — the exact anchor syncDimensionTileOps recomputes on commit,
+    // so the chip lands where it already is.
+    const planeTileCtx = useSharedValue({});
     // Rectangle-annotation corner drag. `rectDragId` (React state) marks which
     // annotation's rect renders from the live geometry; `rectCtx` carries the
     // fixed (opposite) corner and the grabbed corner's start position so the
@@ -1487,12 +1617,158 @@ export const AnnotationCanvasInner = (props) => {
                     runOnJS(cancelSelectDrag)();
             });
         };
+        // Plane tool: a hybrid pan. Handle drags run on the UI thread (shared
+        // values → live outline; single commit on release — see the planeDrag*
+        // values above); everything else (scale-mode marking, blocked-creation
+        // taps) falls back to streaming JS pointer events exactly like toolPan.
+        // The begin hit-test runs once on JS and decides the mode.
+        const buildPlaneEditPan = (cfg) => {
+            const beginPlaneDrag = (origin) => {
+                const st = stateRef.current;
+                const world = st.ctx.viewport.screenToWorld(origin);
+                const index = cfg.hitHandle(st.ctx.document, world, st.viewport.zoom);
+                const planeId = st.ctx.document.planes?.[0]?.id ?? null;
+                if (index != null && planeId != null) {
+                    const start = cfg.handlePoints(st.ctx.document)[index];
+                    if (start) {
+                        planeDragStartX.value = start.x;
+                        planeDragStartY.value = start.y;
+                        // Follow data for the plane's dimension chips: each tile's edge
+                        // (planeEdgeLine — the committed geometry its line mirrors), which
+                        // endpoint(s) track the grabbed handle (coordinate equality with
+                        // the handle's start — both values come from the same committed
+                        // plane, so exact comparison is sound), and its linePos.
+                        const plane = st.ctx.document.planes?.find((p) => p.id === planeId);
+                        const follow = {};
+                        if (plane) {
+                            for (const m of st.ctx.document.placedMeasurements) {
+                                if (m.planeId !== planeId || !m.planeEdge)
+                                    continue;
+                                const edge = planeEdgeLine(plane, m.planeEdge);
+                                if (!edge)
+                                    continue;
+                                follow[m.id] = {
+                                    ax: edge.a.x,
+                                    ay: edge.a.y,
+                                    bx: edge.b.x,
+                                    by: edge.b.y,
+                                    ma: edge.a.x === start.x && edge.a.y === start.y ? 1 : 0,
+                                    mb: edge.b.x === start.x && edge.b.y === start.y ? 1 : 0,
+                                    t: linePosOf(m),
+                                };
+                            }
+                        }
+                        planeTileCtx.value = follow;
+                        planeDragMode.value = 1;
+                        const drag = { planeId, index };
+                        planeDragRef.current = drag;
+                        setPlaneDrag(drag);
+                        // Precision drop — the loupe follows the finger like the select
+                        // tool's sub-drags.
+                        setMagnifying(true);
+                        return;
+                    }
+                }
+                planeDragMode.value = 2;
+                const id = pointerIdRef.current++;
+                planeJsPointerRef.current = { id };
+                st.dispatchPointerDown(buildEvent(id, origin));
+            };
+            const movePlaneDragJs = (screen) => {
+                const f = planeJsPointerRef.current;
+                if (f)
+                    stateRef.current.dispatchPointerMove(buildEvent(f.id, screen));
+            };
+            const endPlaneDrag = (screen, translation) => {
+                const st = stateRef.current;
+                if (planeDragMode.value === 2) {
+                    const f = planeJsPointerRef.current;
+                    if (f)
+                        st.dispatchPointerUp(buildEvent(f.id, screen));
+                }
+                else if (planeDragMode.value === 1 && planeDragRef.current) {
+                    // Commit the position the live outline showed: handle start + the
+                    // finger's translation. NOT screenToWorld(finger) — the hit-test
+                    // accepts a grab anywhere inside the handle's radius, so the
+                    // finger's absolute position is off the handle by that grab offset,
+                    // and committing it made the corner visibly shift on release.
+                    // Zoom can't change mid-drag (this pan won the gesture race, so the
+                    // pinch never activated), so reading it at drop matches every frame.
+                    const world = {
+                        x: planeDragStartX.value + translation.x / zoom.value,
+                        y: planeDragStartY.value + translation.y / zoom.value,
+                    };
+                    const patch = cfg.buildHandleDropPatch(st.ctx.document, planeDragRef.current.index, world);
+                    // Null = invalid drop (non-convex) — clearing the drag state below
+                    // snaps the outline back to the committed plane.
+                    if (patch)
+                        st.ctx.commit(patch);
+                }
+                planeDragMode.value = 0;
+                planeDragRef.current = null;
+                planeJsPointerRef.current = null;
+                setPlaneDrag(null);
+                setMagnifying(false);
+            };
+            const cancelPlaneDrag = () => {
+                if (planeDragMode.value === 2 && planeJsPointerRef.current) {
+                    stateRef.current.dispatchPointerCancel();
+                }
+                planeDragMode.value = 0;
+                planeDragRef.current = null;
+                planeJsPointerRef.current = null;
+                setPlaneDrag(null);
+                setMagnifying(false);
+            };
+            return Gesture.Pan()
+                .minPointers(1)
+                .maxPointers(1)
+                .onStart((e) => {
+                'worklet';
+                planeDragEnded.value = false;
+                planeDragMode.value = 0;
+                planeDragTX.value = e.translationX;
+                planeDragTY.value = e.translationY;
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                // Hit-test at the touch-down point — onStart fires only after the
+                // pan threshold, so back out the accumulated translation.
+                runOnJS(beginPlaneDrag)({
+                    x: e.x - e.translationX,
+                    y: e.y - e.translationY,
+                });
+            })
+                .onChange((e) => {
+                'worklet';
+                planeDragTX.value = e.translationX;
+                planeDragTY.value = e.translationY;
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                if (planeDragMode.value === 2) {
+                    runOnJS(movePlaneDragJs)({ x: e.x, y: e.y });
+                }
+            })
+                .onEnd((e) => {
+                'worklet';
+                planeDragEnded.value = true;
+                // The final translation travels as an argument rather than being
+                // read back from the shared values on JS: the last onChange isn't
+                // guaranteed to have carried it, and onEnd doesn't write them.
+                runOnJS(endPlaneDrag)({ x: e.x, y: e.y }, { x: e.translationX, y: e.translationY });
+            })
+                .onFinalize(() => {
+                'worklet';
+                if (!planeDragEnded.value)
+                    runOnJS(cancelPlaneDrag)();
+            });
+        };
         // 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 → no separate gesture: viewportPan above already spans one
         //    finger (min 1), so panning and pinching stay one uncancelled stream
         //  - select → drag the hit element on the UI thread
+        //  - plane tool → handle drags on the UI thread, marking on the JS thread
         //  - everything else → dispatch pointer events on the JS thread
         const oneFinger = freehand
             ? buildDrawPan(freehand)
@@ -1500,9 +1776,11 @@ export const AnnotationCanvasInner = (props) => {
                 ? buildShapeDrawPan(shapeDraw)
                 : panViewport
                     ? null
-                    : dragSelection
-                        ? buildSelectDragPan(dragSelection)
-                        : toolPan;
+                    : planeEdit
+                        ? buildPlaneEditPan(planeEdit)
+                        : dragSelection
+                            ? buildSelectDragPan(dragSelection)
+                            : toolPan;
         // Long-press only joins the race when the active tool acts on it, so it
         // never pre-empts a one-finger drag/draw on tools that ignore holds.
         return Gesture.Race(tap, ...(longPressEnabled ? [longPress] : []), Gesture.Simultaneous(viewportPan, pinch), ...(oneFinger ? [oneFinger] : []));
@@ -1520,6 +1798,14 @@ export const AnnotationCanvasInner = (props) => {
         shapeDraw,
         panViewport,
         dragSelection,
+        planeEdit,
+        planeDragMode,
+        planeDragEnded,
+        planeDragTX,
+        planeDragTY,
+        planeDragStartX,
+        planeDragStartY,
+        planeTileCtx,
         longPressEnabled,
         dragX,
         dragY,
@@ -1613,6 +1899,13 @@ export const AnnotationCanvasInner = (props) => {
             ? handleRingWidth
             : undefined,
         showPlaneHandles: activeTool?.planeEditing === true,
+        // UI-thread plane handle drag: while set, the Skia tree swaps the plane's
+        // static element for the live outline + handles (see AnnotationCanvasSkia).
+        planeDragId: planeDrag?.planeId ?? null,
+        planeDragIndex: planeDrag?.index ?? null,
+        planeDragPath,
+        planeDragGridPath,
+        planeDragHandle,
         customPreview,
     };
     // Lens window for the loupe: an opaque white base + the magnified scene
@@ -1628,7 +1921,7 @@ export const AnnotationCanvasInner = (props) => {
     // non-fullscreen canvas (e.g. a diagram strip) escape into surrounding UI.
     _jsxs(GestureHandlerRootView, { style: [{ width, height, overflow: 'hidden' }, style], children: [backgroundLayers.map((layer) => (_jsx(BackgroundSkImageLoader, { layer: layer, resolveUrl: resolveImageUrl, onImage: onBackgroundSkImage }, layer.id))), _jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), 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)
-                        : (resolveStampMeasurement?.(placed) ?? 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, tileScaleFactor: state.tileScaleFactor, headerTileScaleFactor: state.headerTileScaleFactor, fileTileScaleFactor: state.fileTileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
+                        : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, planeEdgeDragging: planeDrag != null && placed.planeId === planeDrag.planeId, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, planeTileCtx: planeTileCtx, planeDragTX: planeDragTX, planeDragTY: planeDragTY, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.tileScaleFactor, headerTileScaleFactor: state.headerTileScaleFactor, fileTileScaleFactor: state.fileTileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
                         ? () => {
                             const defaultRemove = () => {
                                 const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
@@ -1644,7 +1937,7 @@ export const AnnotationCanvasInner = (props) => {
                     wrapContent: loupeWrap,
                 }) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, headerTileScaleFactor, fileTileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, planeEdgeDragging, planeTileCtx, planeDragTX, planeDragTY, renderMeasurementStamp, tileScaleFactor, headerTileScaleFactor, fileTileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
     // Square tile or wide group-header pill — one footprint source of truth
     // shared with the hit-test (stampTileDims).
     const { width, height } = stampTileDims(placed, tileScaleFactor, tileViewportScale, headerTileScaleFactor ?? tileScaleFactor, fileTileScaleFactor ?? tileScaleFactor);
@@ -1658,6 +1951,7 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
     const removeSize = Math.min(36, Math.min(width, height) * 0.4);
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;
+    const placedId = placed.id;
     // doc → screen each frame, on the UI thread. Position is a translate
     // transform (cheap, no layout) so the tile stays glued to its anchor. While
     // dragging, the world-space drag offset is folded in; while sliding, the
@@ -1736,6 +2030,22 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
             worldX = (c.fx + c.mx + dragX.value) / 2;
             worldY = (c.fy + c.my + dragY.value) / 2;
         }
+        else if (planeEdgeDragging) {
+            // Tile stays at its linePos along the LIVE plane edge. The plane drag's
+            // translation is screen px (unlike dragX/dragY's world units), so it
+            // converts through the live zoom, same as the outline twin.
+            const c = planeTileCtx.value[placedId];
+            if (c) {
+                const dx = planeDragTX.value / zoom.value;
+                const dy = planeDragTY.value / zoom.value;
+                const ax = c.ma === 1 ? c.ax + dx : c.ax;
+                const ay = c.ma === 1 ? c.ay + dy : c.ay;
+                const bx = c.mb === 1 ? c.bx + dx : c.bx;
+                const by = c.mb === 1 ? c.by + dy : c.by;
+                worldX = ax + (bx - ax) * c.t;
+                worldY = ay + (by - ay) * c.t;
+            }
+        }
         else if (dragging) {
             worldX = anchorX + dragX.value;
             worldY = anchorY + dragY.value;

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

@@ -89,9 +89,18 @@ export interface AnnotationCanvasSkiaProps {
         value: number;
     };
     showPlaneHandles?: boolean;
+    planeDragId?: string | null;
+    planeDragIndex?: number | null;
+    planeDragPath?: SkPath | {
+        value: SkPath;
+    };
+    planeDragGridPath?: SkPath | {
+        value: SkPath;
+    };
+    planeDragHandle?: AnimatedPoint;
     customPreview?: ReactNode;
     wrapContent?: (content: ReactNode) => ReactNode;
     canvasRef?: RefObject<CanvasRef | null>;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -6,7 +6,7 @@ import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeome
 import { visualShapeBounds } from './shapeGeometry.js';
 import { backgroundLayerDocRect, backgroundLayersOf, } from './backgroundLayers.js';
 import { BackgroundLayerElement } from './elements/BackgroundImageElement.js';
-import { PlaneElement } from './elements/PlaneElement.js';
+import { PlaneElement, PLANE_CHROME_COLOR, PLANE_GRID_COLOR, PLANE_GRID_OPACITY, PLANE_GRID_WIDTH, PLANE_OUTLINE_WIDTH, } from './elements/PlaneElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
 // Default visual constants for the measurement-annotation line (the tile itself
@@ -80,7 +80,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, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, customPreview, wrapContent, canvasRef, }) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, customPreview, wrapContent, canvasRef, }) => {
     // Doc rect a SCALE-mode plane grid covers: the first background layer (the
     // photo being calibrated), else the document rect. Pinned to layer 0 like
     // the tile-sizing reference — adding a second image must not re-span the
@@ -94,7 +94,16 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
             width: effectiveCanvas.viewport.width,
             height: effectiveCanvas.viewport.height,
         };
-    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), (effectiveCanvas.planes ?? []).map((plane) => (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, plane.id))), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
+    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), (effectiveCanvas.planes ?? []).map((plane) => {
+                if (plane.id === planeDragId && planeDragPath) {
+                    const statics = plane.mode === 'perspective'
+                        ? plane.corners
+                        : [plane.refLine.a, plane.refLine.b];
+                    return (_jsxs(Group, { children: [planeDragGridPath && (_jsx(Path, { path: planeDragGridPath, color: PLANE_GRID_COLOR, style: "stroke", strokeWidth: PLANE_GRID_WIDTH, opacity: PLANE_GRID_OPACITY })), _jsx(Path, { path: planeDragPath, color: PLANE_CHROME_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH, strokeJoin: "round" }), handleRadius != null &&
+                                statics.map((p, i) => i === planeDragIndex ? null : (_jsxs(Group, { children: [_jsx(Circle, { c: p, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: p, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }, i))), handleRadius != null && planeDragHandle && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: planeDragHandle, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: planeDragHandle, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }))] }, plane.id));
+                }
+                return (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, plane.id));
+            }), 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
@@ -162,6 +171,11 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
+                // A dimension tile's line IS its calibration edge: while that plane's
+                // handle is being live-dragged, the stale committed edge would linger
+                // under the moving live outline — hide it until the drop commits.
+                if (placed.planeId && placed.planeId === planeDragId)
+                    return null;
                 const isEndpointDrag = placed.id === endpointDragId;
                 const isSelected = placed.id === selectedId;
                 const p1 = isEndpointDrag && liveLineP1 ? liveLineP1 : placed.line.a;

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

@@ -90,6 +90,11 @@ export interface DragSelectionConfig {
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
+export interface PlaneEditConfig {
+    hitHandle(doc: AnnotationCanvasState, world: Vec2, zoom: number): number | null;
+    handlePoints(doc: AnnotationCanvasState): Vec2[];
+    buildHandleDropPatch(doc: AnnotationCanvasState, index: number, world: Vec2): AnnotationDocumentPatch | null;
+}
 export interface Tool {
     id: string;
     label: string;
@@ -100,6 +105,7 @@ export interface Tool {
     panViewport?: boolean;
     dragSelection?: DragSelectionConfig;
     planeEditing?: boolean;
+    planeEdit?: PlaneEditConfig;
     onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;

package/dist/annotation/canvas/elements/PlaneElement.d.ts

@@ -1,4 +1,9 @@
 import type { PlaneCalibration } from '../../../types/annotation.js';
+export declare const PLANE_CHROME_COLOR: "#BD30A8";
+export declare const PLANE_OUTLINE_WIDTH = 14;
+export declare const PLANE_GRID_COLOR = "#FFD1F8";
+export declare const PLANE_GRID_OPACITY = 0.9;
+export declare const PLANE_GRID_WIDTH = 2.5;
 type AnimatedNumber = number | {
     value: number;
 };

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

@@ -8,12 +8,15 @@ import { FormulaColors } from '../../../theme/colors.js';
 // information: the formula purple outlines the calibrated quad / reference
 // line (and inks its handles and dimension-tile lines — see planeTool), while
 // the grid it casts gets its own pale pink so the two never blur.
-const PLANE_COLOR = FormulaColors.purple;
-const PLANE_GRID_COLOR = '#FFD1F8';
-const PLANE_GRID_OPACITY = 0.9;
+// Exported for the live UI-thread handle drag, which redraws the outline and
+// grid in AnnotationCanvasSkia while this element is hidden.
+export const PLANE_CHROME_COLOR = FormulaColors.purple;
+export const PLANE_OUTLINE_WIDTH = 14;
+const PLANE_COLOR = PLANE_CHROME_COLOR;
+export const PLANE_GRID_COLOR = '#FFD1F8';
+export const PLANE_GRID_OPACITY = 0.9;
 // Doc-space stroke widths (scale with zoom, like the drawn shapes).
-const PLANE_GRID_WIDTH = 2.5;
-const PLANE_OUTLINE_WIDTH = 14;
+export const PLANE_GRID_WIDTH = 2.5;
 // Cross-tick half-length (doc units) marking the ends of a scale-mode
 // reference line, so it reads as "a measured span", not just a line.
 const REF_TICK_LEN = 18;

package/dist/annotation/canvas/measurementGeometry.js

@@ -44,7 +44,10 @@ export const projectToLinePos = (line, world) => {
 export const snapLinePos = (t, threshold = 0.06) => Math.abs(t - 0.5) <= threshold ? 0.5 : t;
 // Euclidean length of a line in doc space (used to convert a screen-px snap
 // radius into a t-space threshold).
+// 'worklet': called from planeGeometry's grid generators, which run per-frame
+// on the UI thread during a plane handle drag. Inert everywhere else.
 export const lineLength = (line) => {
+    'worklet';
     const dx = line.b.x - line.a.x;
     const dy = line.b.y - line.a.y;
     return Math.sqrt(dx * dx + dy * dy);

package/dist/annotation/canvas/planeGeometry.js

@@ -7,15 +7,17 @@
 // SIZING (stampLayout.ts). Everything here is plane calibration — mapping
 // DOC-space geometry to physical lengths in micrometers.
 //
-// v1 keeps all of this on the JS thread (values recompute on commit, not
-// per-frame), so there are no worklet twins of these functions yet. If live
-// drag readouts are ever needed, the twin goes next to the existing geometry
-// twins in AnnotationCanvasInner.native.tsx.
+// The homography/grid chain carries 'worklet' directives (inert everywhere
+// but a Reanimated build): AnnotationCanvasInner.native.tsx rebuilds the grid
+// per frame on the UI thread during a plane handle drag, calling these
+// directly rather than maintaining an inline twin of ~200 lines of math.
+// Values (planeDistanceUm etc.) still recompute on commit, JS-side.
 import { lineLength } from './measurementGeometry.js';
 // Degeneracy guards are scaled to the quad's own extent — doc coordinates are
 // arbitrary (a photo canvas is typically ~1000 units across), so a fixed
 // epsilon would misfire on very small or very large documents.
 const relativeEps = (corners) => {
+    'worklet';
     let span = 1;
     for (const p of corners) {
         span = Math.max(span, Math.abs(p.x), Math.abs(p.y));
@@ -27,6 +29,7 @@ const relativeEps = (corners) => {
 // (collinear/coincident corners). Corners must already be in TL,TR,BR,BL order
 // (see normalizeQuadOrder).
 export const homographyFromQuad = (corners) => {
+    'worklet';
     const [p0, p1, p2, p3] = corners;
     const eps = relativeEps(corners);
     const sx = p0.x - p1.x + p2.x - p3.x;
@@ -71,6 +74,7 @@ export const homographyFromQuad = (corners) => {
 // Returns null when that entry (a·e − b·d) is ~zero — the inverse would put
 // the whole doc plane on the vanishing line.
 export const invertHomography = (m) => {
+    'worklet';
     const norm = m.a * m.e - m.b * m.d;
     if (Math.abs(norm) < 1e-12)
         return null;
@@ -88,6 +92,7 @@ export const invertHomography = (m) => {
 // Apply a homography to a point. Null when the point sits (numerically) on the
 // vanishing line — the plane there is at infinity.
 export const applyHomography = (m, p) => {
+    'worklet';
     const w = m.g * p.x + m.h * p.y + 1;
     if (Math.abs(w) < 1e-12)
         return null;
@@ -148,12 +153,15 @@ export const normalizeQuadOrder = (pts) => {
 // The dimensions a calibration has been given so far. Null until the user has
 // entered them all (through the plane's dimension tiles) — an incomplete
 // calibration renders its geometry but computes nothing.
-const perspectiveDims = (cal) => cal.widthUm != null &&
-    cal.widthUm > 0 &&
-    cal.heightUm != null &&
-    cal.heightUm > 0
-    ? { widthUm: cal.widthUm, heightUm: cal.heightUm }
-    : null;
+const perspectiveDims = (cal) => {
+    'worklet';
+    return cal.widthUm != null &&
+        cal.widthUm > 0 &&
+        cal.heightUm != null &&
+        cal.heightUm > 0
+        ? { widthUm: cal.widthUm, heightUm: cal.heightUm }
+        : null;
+};
 // Doc-space point → plane coordinates in micrometers (x across the rectangle's
 // width, y down its height; the TL corner is the origin). Null when the
 // calibration's quad is degenerate, its dimensions aren't entered yet, or the
@@ -333,6 +341,7 @@ export const resolvePlaneGridSpacingUm = (cal, system, scaleBounds) => {
 const GRID_EXTENT_CAP = 12;
 // Liang–Barsky segment/rect clip, DOC space. Null when fully outside.
 const clipSegmentToRect = (a, b, rect) => {
+    'worklet';
     const dx = b.x - a.x;
     const dy = b.y - a.y;
     let t0 = 0;
@@ -385,6 +394,7 @@ const clipSegmentToRect = (a, b, rect) => {
 // far side of the horizon are dropped (w stays positive across a segment
 // only when it's positive at both ends — w is affine on the plane).
 export const planeGridSegments = (cal, spacingUm, bounds) => {
+    'worklet';
     const dims = perspectiveDims(cal);
     const h = homographyFromQuad(cal.corners);
     if (!dims ||
@@ -476,6 +486,7 @@ export const planeGridSegments = (cal, spacingUm, bounds) => {
 // rect, or the document rect when there's no background), DOC space. Lines
 // anchor at the bounds origin.
 export const planeGridSegmentsForScale = (cal, spacingUm, bounds) => {
+    'worklet';
     const refDoc = lineLength(cal.refLine);
     const lengthUm = cal.lengthUm ?? 0;
     if (!(refDoc > 0) ||

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

@@ -25,6 +25,22 @@ const committedPlane = (doc) => doc.planes?.[0] ?? null;
 const planeHandles = (plane) => plane.mode === 'perspective'
     ? plane.corners
     : [plane.refLine.a, plane.refLine.b];
+// Index of the committed calibration's handle under `world`, or null —
+// shared by the tool's JS pointer path and the native UI-thread drag
+// (Tool.planeEdit.hitHandle).
+const hitHandleAt = (doc, world, zoom) => {
+    const plane = committedPlane(doc);
+    if (!plane)
+        return null;
+    const tol = HANDLE_GRAB_PX / zoom;
+    const tolSq = tol * tol;
+    const handles = planeHandles(plane);
+    for (let i = 0; i < handles.length; i++) {
+        if (distSq(world, handles[i]) <= tolSq)
+            return i;
+    }
+    return null;
+};
 // The committed plane with one handle moved to `p`.
 const withHandleMoved = (plane, index, p) => {
     if (plane.mode === 'perspective') {
@@ -217,18 +233,26 @@ export const createPlaneTool = (options) => {
         return null;
     };
     // Which committed-plane handle a press landed on, if any.
-    const hitHandle = (ctx, world) => {
-        const plane = committedPlane(ctx.document);
+    const hitHandle = (ctx, world) => hitHandleAt(ctx.document, world, ctx.viewport.state.zoom);
+    // Drop patch for a handle drag — shared by the JS pointer path below and
+    // the native UI-thread drag (Tool.planeEdit). Null (snap back, host
+    // toasted) when the drop would break the quad.
+    const handleDropPatch = (doc, index, world) => {
+        const plane = committedPlane(doc);
         if (!plane)
             return null;
-        const tol = HANDLE_GRAB_PX / ctx.viewport.state.zoom;
-        const tolSq = tol * tol;
-        const handles = planeHandles(plane);
-        for (let i = 0; i < handles.length; i++) {
-            if (distSq(world, handles[i]) <= tolSq)
-                return i;
+        const next = withHandleMoved(plane, index, world);
+        if (next.mode === 'perspective' &&
+            !isQuadConvexNonDegenerate(next.corners)) {
+            options.onInvalidQuad?.();
+            return null;
         }
-        return null;
+        return {
+            ops: [
+                { op: 'setPlane', plane: next },
+                ...syncDimensionTileOps(doc, next),
+            ],
+        };
     };
     return {
         id: options.id ?? `plane-${mode}`,
@@ -236,6 +260,17 @@ export const createPlaneTool = (options) => {
             (mode === 'perspective' ? 'Perspective plane' : 'Scale reference'),
         cursor: 'crosshair',
         planeEditing: true,
+        // UI-thread handle drags on native (see PlaneEditConfig in Tool.ts): the
+        // same pure hit-test and drop-patch the JS pointer path below uses, so
+        // both platforms share one source of truth.
+        planeEdit: {
+            hitHandle: hitHandleAt,
+            handlePoints: (doc) => {
+                const plane = committedPlane(doc);
+                return plane ? planeHandles(plane) : [];
+            },
+            buildHandleDropPatch: handleDropPatch,
+        },
         onPointerDown(event, ctx) {
             // Editing an existing plane wins over starting new geometry — but only
             // when nothing is mid-mark (a quad in progress keeps collecting taps).
@@ -305,23 +340,12 @@ export const createPlaneTool = (options) => {
                 ctx.preview({ ops: [] });
                 if (!s.moved)
                     return;
-                const plane = committedPlane(ctx.document);
-                if (!plane)
-                    return;
-                const next = withHandleMoved(plane, s.handleIndex, event.world);
-                // A corner drag that breaks the quad snaps back instead of committing
-                // a plane the homography can't invert.
-                if (next.mode === 'perspective' &&
-                    !isQuadConvexNonDegenerate(next.corners)) {
-                    options.onInvalidQuad?.();
-                    return;
-                }
-                ctx.commit({
-                    ops: [
-                        { op: 'setPlane', plane: next },
-                        ...syncDimensionTileOps(ctx.document, next),
-                    ],
-                });
+                // A drop that breaks the quad snaps back (handleDropPatch returns
+                // null and raises onInvalidQuad) instead of committing a plane the
+                // homography can't invert.
+                const patch = handleDropPatch(ctx.document, s.handleIndex, event.world);
+                if (patch)
+                    ctx.commit(patch);
                 return;
             }
             // While a calibration exists, a TAP on one of its dimension tiles

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -105,6 +105,18 @@ export const useAnnotationCanvasState = (props) => {
     const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, tileScalePlatform, animateViewport, imperativeRef, } = props;
     const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
     const [toolState, setToolState] = useState(undefined);
+    // Synchronous mirror for the DISPATCHERS. The native tap gesture
+    // synthesizes pointerDown + pointerUp inside one JS task, so the up runs
+    // before React re-renders — a dispatcher reading the state closure would
+    // hand onPointerUp the PRE-tap state (undefined) and tap-driven tools
+    // (quad corners, dimension-tile taps) silently no-op. React state remains
+    // the render-side source (renderPreview / penDrawingStroke); every write
+    // goes through updateToolState so the two never drift.
+    const toolStateRef = useRef(undefined);
+    const updateToolState = (next) => {
+        toolStateRef.current = next;
+        setToolState(next);
+    };
     const [previewPatch, setPreviewPatch] = useState(null);
     const undoStackRef = useRef([]);
     const redoStackRef = useRef([]);
@@ -317,17 +329,22 @@ export const useAnnotationCanvasState = (props) => {
             return;
         prev.onDeactivate?.(ctxRef.current);
         activePointerIdRef.current = null;
-        setToolState(undefined);
+        updateToolState(undefined);
         setPreviewPatch(null);
+        // updateToolState is a stable-in-effect helper (ref + setState); the
+        // effect only re-runs on a tool identity change.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTool]);
     const dispatchPointerDown = useCallback((event) => {
         if (!activeTool)
             return;
         activePointerIdRef.current = event.pointerId;
-        const next = activeTool.onPointerDown?.(event, ctx, toolState);
+        const next = activeTool.onPointerDown?.(event, ctx, toolStateRef.current);
         if (next !== undefined)
-            setToolState(next);
-    }, [activeTool, ctx, toolState]);
+            updateToolState(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchPointerMove = useCallback((event) => {
         if (!activeTool)
             return;
@@ -335,10 +352,12 @@ export const useAnnotationCanvasState = (props) => {
             event.pointerId !== activePointerIdRef.current) {
             return;
         }
-        const next = activeTool.onPointerMove?.(event, ctx, toolState);
+        const next = activeTool.onPointerMove?.(event, ctx, toolStateRef.current);
         if (next !== undefined)
-            setToolState(next);
-    }, [activeTool, ctx, toolState]);
+            updateToolState(next);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchPointerUp = useCallback((event) => {
         if (!activeTool)
             return;
@@ -346,10 +365,12 @@ export const useAnnotationCanvasState = (props) => {
             event.pointerId !== activePointerIdRef.current) {
             return;
         }
-        activeTool.onPointerUp?.(event, ctx, toolState);
+        activeTool.onPointerUp?.(event, ctx, toolStateRef.current);
         activePointerIdRef.current = null;
-        setToolState(undefined);
-    }, [activeTool, ctx, toolState]);
+        updateToolState(undefined);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [activeTool, ctx]);
     const dispatchLongPress = useCallback((event) => {
         if (!activeTool)
             return;
@@ -364,11 +385,13 @@ export const useAnnotationCanvasState = (props) => {
         // vertices visible across an interrupting two-finger pan) wins over the
         // clear instead of being clobbered by it.
         activePointerIdRef.current = null;
-        setToolState(undefined);
+        const prevToolState = toolStateRef.current;
+        updateToolState(undefined);
         setPreviewPatch(null);
         if (activeTool)
-            activeTool.onCancel?.(toolState, ctx);
-    }, [activeTool, ctx, toolState]);
+            activeTool.onCancel?.(prevToolState, ctx);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeTool, ctx]);
     const pan = useCallback((deltaScreen) => {
         setViewport((v) => panBy(v, deltaScreen));
     }, []);

package/package.json

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