@reekon-tools/boldr-utils 1.15.3 → 1.15.4

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

@@ -272,6 +272,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 +477,70 @@ 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
+    // driving a live outline (worklet twin of PlaneElement's outline path), and
+    // the drop commits exactly once. The grid + dimension tiles freeze/hide
+    // until the commit lands.
+    // 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;
+    });
     // 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 +1552,119 @@ 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;
+                        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) => {
+                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) {
+                    const world = st.ctx.viewport.screenToWorld(screen);
+                    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;
+                runOnJS(endPlaneDrag)({ x: e.x, y: e.y });
+            })
+                .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 +1672,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 +1694,13 @@ export const AnnotationCanvasInner = (props) => {
         shapeDraw,
         panViewport,
         dragSelection,
+        planeEdit,
+        planeDragMode,
+        planeDragEnded,
+        planeDragTX,
+        planeDragTY,
+        planeDragStartX,
+        planeDragStartY,
         longPressEnabled,
         dragX,
         dragY,
@@ -1613,6 +1794,12 @@ 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,
+        planeDragHandle,
         customPreview,
     };
     // Lens window for the loupe: an opaque white base + the magnified scene

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

@@ -89,9 +89,15 @@ export interface AnnotationCanvasSkiaProps {
         value: number;
     };
     showPlaneHandles?: boolean;
+    planeDragId?: string | null;
+    planeDragIndex?: number | null;
+    planeDragPath?: 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, 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_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, 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: [_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,6 @@
 import type { PlaneCalibration } from '../../../types/annotation.js';
+export declare const PLANE_CHROME_COLOR: "#BD30A8";
+export declare const PLANE_OUTLINE_WIDTH = 14;
 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;
+// Exported for the live UI-thread handle drag, which redraws the outline 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;
 const PLANE_GRID_COLOR = '#FFD1F8';
 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;
 // 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/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.4",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",