@reekon-tools/boldr-utils 1.6.18 → 1.6.20

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -9,6 +9,16 @@ import { stampTileSize } from './stampLayout.js';
 // Screen-px radius of a measurement-annotation endpoint handle (matches the
 // native HANDLE_RADIUS_PX). Divided by zoom for a constant on-screen size.
 const HANDLE_PX = 7;
+// Screen-px stroke width of the handle's colored ring (matches native
+// HANDLE_RING_PX); the white-disc + ring keeps the knob legible on any line.
+const HANDLE_RING_PX = 2;
+// Press-and-hold timing/tolerance. The DOM has no native long-press, so it's
+// derived from a hold timer: pressing without moving past the slop for this
+// long fires the tool's onLongPress; movement or an early release cancels it.
+// 500ms / RN's default delayLongPress so web matches native + the stamp
+// overlay's press target below.
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
 const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, } = props;
@@ -36,7 +46,19 @@ export const AnnotationCanvasInner = (props) => {
     const containerRef = useRef(null);
     const panGestureRef = useRef(null);
     const spaceDownRef = useRef(false);
+    // Armed hold timer + its origin, for the derived long-press (see handlers).
+    const longPressTimerRef = useRef(null);
+    const longPressRef = useRef(null);
     const activeTool = tools.find((t) => t.id === activeToolId) ?? null;
+    const clearLongPress = useCallback(() => {
+        if (longPressTimerRef.current != null) {
+            clearTimeout(longPressTimerRef.current);
+            longPressTimerRef.current = null;
+        }
+        longPressRef.current = null;
+    }, []);
+    // Drop any armed hold timer if the canvas unmounts mid-press.
+    useEffect(() => clearLongPress, [clearLongPress]);
     const toCanvasPointer = useCallback((event) => {
         const rect = containerRef.current?.getBoundingClientRect();
         const screen = {
@@ -79,8 +101,31 @@ export const AnnotationCanvasInner = (props) => {
             return;
         }
         event.currentTarget.setPointerCapture(event.pointerId);
-        state.dispatchPointerDown(toCanvasPointer(event));
-    }, [state, toCanvasPointer, isPanTriggerDown]);
+        const canvasEvent = toCanvasPointer(event);
+        state.dispatchPointerDown(canvasEvent);
+        // Arm the hold timer only when the active tool acts on a long-press (the
+        // select tool, to re-open the text editor). The pointer keeps driving the
+        // tool underneath; if the hold fires before any movement past the slop,
+        // dispatchLongPress runs with the (unmoved) down point. Movement or
+        // pointer up/cancel clears it below.
+        if (activeTool?.onLongPress && event.button === 0) {
+            clearLongPress();
+            const { screen, pointerId } = canvasEvent;
+            longPressRef.current = { pointerId, start: screen };
+            longPressTimerRef.current = setTimeout(() => {
+                longPressTimerRef.current = null;
+                const lp = longPressRef.current;
+                if (!lp)
+                    return;
+                longPressRef.current = null;
+                state.dispatchLongPress({
+                    pointerId: lp.pointerId,
+                    screen: lp.start,
+                    world: state.ctx.viewport.screenToWorld(lp.start),
+                });
+            }, LONG_PRESS_MS);
+        }
+    }, [state, toCanvasPointer, isPanTriggerDown, activeTool, clearLongPress]);
     const handlePointerMove = useCallback((event) => {
         const pan = panGestureRef.current;
         if (pan && event.pointerId === pan.pointerId) {
@@ -99,20 +144,33 @@ export const AnnotationCanvasInner = (props) => {
             };
             return;
         }
+        // Moving past the slop turns the press into a drag — cancel the hold so a
+        // drag never also fires a long-press.
+        const lp = longPressRef.current;
+        if (lp && event.pointerId === lp.pointerId) {
+            const rect = containerRef.current?.getBoundingClientRect();
+            const dx = event.clientX - (rect?.left ?? 0) - lp.start.x;
+            const dy = event.clientY - (rect?.top ?? 0) - lp.start.y;
+            if (dx * dx + dy * dy > LONG_PRESS_SLOP_PX * LONG_PRESS_SLOP_PX) {
+                clearLongPress();
+            }
+        }
         state.dispatchPointerMove(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
+    }, [state, toCanvasPointer, clearLongPress]);
     const handlePointerUp = useCallback((event) => {
+        clearLongPress();
         const pan = panGestureRef.current;
         if (pan && event.pointerId === pan.pointerId) {
             panGestureRef.current = null;
             return;
         }
         state.dispatchPointerUp(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
+    }, [state, toCanvasPointer, clearLongPress]);
     const handlePointerCancel = useCallback(() => {
+        clearLongPress();
         panGestureRef.current = null;
         state.dispatchPointerCancel();
-    }, [state]);
+    }, [state, clearLongPress]);
     const handleWheel = useCallback((event) => {
         const rect = containerRef.current?.getBoundingClientRect();
         const focal = {
@@ -206,19 +264,25 @@ export const AnnotationCanvasInner = (props) => {
                 handleRadius: activeTool?.dragSelection
                     ? HANDLE_PX / state.viewport.zoom
                     : undefined,
+                handleRingWidth: activeTool?.dragSelection
+                    ? HANDLE_RING_PX / state.viewport.zoom
+                    : undefined,
                 customPreview,
             }), renderMeasurementStamp && (_jsx("div", { style: {
                     position: 'absolute',
                     inset: 0,
                     pointerEvents: 'none',
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = stampTileSize(placed);
+                    const size = stampTileSize(placed, state.effectiveCanvas.tileScaleFactor, state.tileViewportScale);
                     const cx = (placed.anchor.x - state.viewport.pan.x) * state.viewport.zoom;
                     const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
                     const isSelected = selection?.ids.includes(placed.id) ?? false;
                     const measurement = placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
                         : null;
+                    // Corner-pinned, tile-proportional remove target (see the style
+                    // comment below) so it can't blanket a small tile and eat its grab.
+                    const removeSize = Math.min(40, size * 0.4);
                     return (_jsxs("div", { style: {
                             position: 'absolute',
                             left: 0,
@@ -241,11 +305,15 @@ export const AnnotationCanvasInner = (props) => {
                                     if (!keepSelection)
                                         state.ctx.setSelection(null);
                                 }, style: {
+                                    // Sized as a fraction of the tile and corner-pinned so it
+                                    // never covers the center. A fixed 40px target blanketed
+                                    // small tiles (the tile-scale slider shrinks them), eating
+                                    // the center grab so a selected tile couldn't be dragged.
                                     position: 'absolute',
-                                    top: -10,
-                                    right: -10,
-                                    width: 40,
-                                    height: 40,
+                                    top: 0,
+                                    right: 0,
+                                    width: removeSize,
+                                    height: removeSize,
                                     cursor: 'pointer',
                                     pointerEvents: 'auto',
                                 } }))] }, placed.id));
@@ -255,8 +323,7 @@ export const AnnotationCanvasInner = (props) => {
 // long-press, so it's derived: pointerdown arms a timer; if it fires before
 // the pointer lifts (or leaves/cancels), the long-press callback runs and the
 // trailing click is swallowed. Mirrors the native overlay's TouchableOpacity
-// onPress/onLongPress semantics (500ms, RN's default delayLongPress).
-const LONG_PRESS_MS = 500;
+// onPress/onLongPress semantics (LONG_PRESS_MS, RN's default delayLongPress).
 const StampPressTarget = ({ onPress, onLongPress, }) => {
     const timerRef = useRef(null);
     const longPressFiredRef = useRef(false);

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

@@ -12,9 +12,18 @@ import { buildShapeFromDrag } from './tools/shapeTool.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
+// Press-and-hold timing/tolerance for the long-press gesture (matches the
+// measurement-stamp overlay's TouchableOpacity feel — 500ms / RN default).
+// Holding still this long without moving past the slop fires onLongPress;
+// moving first lets the drag win instead.
+const LONG_PRESS_MS = 500;
+const LONG_PRESS_SLOP_PX = 10;
 // 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;
+// Screen-px stroke width of the handle's colored ring (white-disc + ring, so the
+// knob stays legible over a line of any color). Also zoom-divided.
+const HANDLE_RING_PX = 2;
 // 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.
@@ -152,6 +161,7 @@ export const AnnotationCanvasInner = (props) => {
     const shapeDraw = state.activeTool?.shapeDraw ?? null;
     const panViewport = !!state.activeTool?.panViewport;
     const dragSelection = state.activeTool?.dragSelection ?? 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
     // tracks the start/current world points; derived paths below render the
@@ -315,6 +325,13 @@ export const AnnotationCanvasInner = (props) => {
     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);
+    // Endpoint drag of a line/arrow SHAPE (vs. a measurement line above).
+    // `shapeEpDragId` (React state) tells the Skia layer to render that shape's
+    // line from the live endpoints; the live geometry rides the SAME `epCtx` +
+    // `liveLineP1`/`liveLineP2` shared values (only one endpoint drag is ever in
+    // flight). A separate target ref keys the commit to buildShapeEndpointPatch.
+    const [shapeEpDragId, setShapeEpDragId] = useState(null);
+    const shapeEpTargetRef = 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.
@@ -338,6 +355,10 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RADIUS_PX / zoom.value;
     });
+    const handleRingWidth = useDerivedValue(() => {
+        'worklet';
+        return HANDLE_RING_PX / zoom.value;
+    });
     // 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
@@ -465,6 +486,20 @@ export const AnnotationCanvasInner = (props) => {
                 inFlightRef.current = null;
             }
         });
+        // Press-and-hold (one finger, no movement) → dispatch a long-press to the
+        // active tool (the select tool re-opens the text editor for a placed text
+        // shape). Races against the one-finger drag: holding still activates this
+        // at LONG_PRESS_MS, moving first activates the drag/pan instead (this one's
+        // maxDistance cancels it). A quick tap is shorter than the hold, so the tap
+        // gesture still owns selection.
+        const longPress = Gesture.LongPress()
+            .minDuration(LONG_PRESS_MS)
+            .maxDistance(LONG_PRESS_SLOP_PX)
+            .runOnJS(true)
+            .onStart((e) => {
+            const id = pointerIdRef.current++;
+            stateRef.current.dispatchLongPress(buildEvent(id, { x: e.x, y: e.y }));
+        });
         const tap = Gesture.Tap()
             .maxDuration(250)
             .runOnJS(true)
@@ -738,9 +773,13 @@ export const AnnotationCanvasInner = (props) => {
                 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.
+                // current selection's handles before the general hit-test — UNLESS the
+                // grab is on that element's tile, which must stay draggable (the tile
+                // is the move/slide affordance and wins over a handle sitting under it,
+                // so a selected tile isn't stuck until you deselect it).
                 const selId = st.ctx.selection?.ids[0];
-                if (selId) {
+                if (selId &&
+                    !cfg.isSelectedTileGrab?.(st.ctx.document, selId, world, zoomNow, st.ctx.tileViewportScale)) {
                     const handle = cfg.hitTestHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (handle) {
                         const m = st.ctx.document.placedMeasurements.find((x) => x.id === selId);
@@ -758,6 +797,27 @@ export const AnnotationCanvasInner = (props) => {
                             return;
                         }
                     }
+                    // Endpoint handle of a line/arrow shape — selected-element-only, and
+                    // distinct from the measurement-line handle above (different storage).
+                    const shapeHandle = cfg.hitTestShapeHandle?.(st.ctx.document, selId, world, zoomNow);
+                    if (shapeHandle) {
+                        const s = st.ctx.document.shapes.find((x) => x.id === selId);
+                        const a = s?.geometry.points[0];
+                        const b = s?.geometry.points[1];
+                        if (a && b) {
+                            epCtx.value = {
+                                ax: a.x,
+                                ay: a.y,
+                                bx: b.x,
+                                by: b.y,
+                                t0: 0.5,
+                                handle: shapeHandle === 'a' ? 0 : 1,
+                            };
+                            shapeEpTargetRef.current = { id: selId, handle: shapeHandle };
+                            setShapeEpDragId(selId);
+                            return;
+                        }
+                    }
                     // Corner resize handle (text shapes) — also selected-element-only.
                     const resizeGeom = cfg.hitTestResizeHandle?.(st.ctx.document, selId, world, zoomNow);
                     if (resizeGeom) {
@@ -787,7 +847,7 @@ export const AnnotationCanvasInner = (props) => {
                         return;
                     }
                 }
-                const hit = cfg.hitTest(st.ctx.document, world, zoomNow);
+                const hit = cfg.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
                 if (!hit) {
                     st.ctx.setSelection(null);
                     dragTargetRef.current = null;
@@ -796,7 +856,7 @@ export const AnnotationCanvasInner = (props) => {
                 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)
+                    ? cfg.classifyMeasurementGrab?.(st.ctx.document, hit.id, world, zoomNow, st.ctx.tileViewportScale)
                     : 'move';
                 if (grab === 'slide') {
                     const m = st.ctx.document.placedMeasurements.find((x) => x.id === hit.id);
@@ -859,6 +919,18 @@ export const AnnotationCanvasInner = (props) => {
                     setEpDragId(null);
                     return;
                 }
+                // Shape endpoint commit: move the grabbed endpoint by the world delta.
+                const sepT = shapeEpTargetRef.current;
+                if (sepT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildShapeEndpointPatch?.(st.ctx.document, sepT.id, sepT.handle, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    shapeEpTargetRef.current = null;
+                    setShapeEpDragId(null);
+                    return;
+                }
                 // Slide commit: map the final world delta to a clamped/snapped linePos.
                 const slideT = slideTargetRef.current;
                 if (slideT) {
@@ -891,11 +963,13 @@ export const AnnotationCanvasInner = (props) => {
                 dragTargetRef.current = null;
                 slideTargetRef.current = null;
                 epTargetRef.current = null;
+                shapeEpTargetRef.current = null;
                 resizeTargetRef.current = null;
                 rectTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
+                setShapeEpDragId(null);
                 setResizingId(null);
                 setRectDragId(null);
             };
@@ -947,7 +1021,9 @@ export const AnnotationCanvasInner = (props) => {
                     : dragSelection
                         ? buildSelectDragPan(dragSelection)
                         : toolPan;
-        return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), oneFinger);
+        // 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);
     }, [
         zoom,
         panX,
@@ -962,6 +1038,7 @@ export const AnnotationCanvasInner = (props) => {
         shapeDraw,
         panViewport,
         dragSelection,
+        longPressEnabled,
         dragX,
         dragY,
         dragEnded,
@@ -1018,6 +1095,7 @@ export const AnnotationCanvasInner = (props) => {
                         resizeTransform,
                         selectedId: selection?.ids[0] ?? null,
                         endpointDragId: epDragId,
+                        shapeEndpointDragId: shapeEpDragId,
                         liveLineP1,
                         liveLineP2,
                         rectDragId,
@@ -1033,19 +1111,28 @@ export const AnnotationCanvasInner = (props) => {
                         // measurement still shows its tile chrome but must not advertise
                         // draggability).
                         handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
+                        handleRingWidth: activeTool?.dragSelection
+                            ? handleRingWidth
+                            : undefined,
                         customPreview,
                     }) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
-                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
+                        : null, selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.effectiveCanvas.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
                         const { ops, keepSelection } = buildRemoveMeasurementOps(placed);
                         state.ctx.commit({ ops });
                         if (!keepSelection)
                             state.ctx.setSelection(null);
                     } }, placed.id))) }))] }));
 };
-const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, onStampPress, onStampLongPress, onRemove, }) => {
-    const size = stampTileSize(placed);
+const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
+    const size = stampTileSize(placed, tileScaleFactor, tileViewportScale);
     const half = size / 2;
+    // Remove-"X" touch target, sized as a fraction of the tile and corner-pinned
+    // so it never reaches the center. A FIXED 36px+hitSlop target blanketed small
+    // tiles (the tile-scale slider can shrink them to ~38px), swallowing the
+    // center grab and making a selected tile impossible to drag (it had to be
+    // deselected first). Capped so it doesn't grow past the old size on big tiles.
+    const removeSize = Math.min(36, size * 0.4);
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;
     // doc → screen each frame, on the UI thread. Position is a translate
@@ -1113,11 +1200,11 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
                     selected,
                     size,
                     zoom: zoomSnapshot,
-                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: onRemove, style: {
+                }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", onPress: onRemove, style: {
                     position: 'absolute',
-                    top: -8,
-                    right: -8,
-                    width: 36,
-                    height: 36,
+                    top: 0,
+                    right: 0,
+                    width: removeSize,
+                    height: removeSize,
                 } }))] }));
 };

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

@@ -59,6 +59,7 @@ export interface AnnotationCanvasSkiaProps {
     };
     selectedId?: string | null;
     endpointDragId?: string | null;
+    shapeEndpointDragId?: string | null;
     liveLineP1?: AnimatedPoint;
     liveLineP2?: AnimatedPoint;
     rectDragId?: string | null;
@@ -71,7 +72,10 @@ export interface AnnotationCanvasSkiaProps {
     handleRadius?: number | {
         value: number;
     };
+    handleRingWidth?: number | {
+        value: number;
+    };
     customPreview?: ReactNode;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, customPreview, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -22,6 +22,12 @@ const MEASUREMENT_HANDLE_COLOR = '#0066FF';
 // hit-test the text resize handle, which sits on the padded box corner.
 const SELECTION_COLOR = '#0066FF';
 const SELECTION_STROKE = 1.5;
+// A draggable selection handle (line endpoints, rect corners, text resize):
+// a white disc with a colored ring, so it reads as a distinct, grabbable knob
+// over a line of ANY color — including the default measurement-line blue, which
+// a solid-colored handle would camouflage into. `c`/`r`/`ringWidth` may be
+// Reanimated values (native live-drag) or plain numbers (web).
+const Handle = ({ c, r, ringWidth, color = MEASUREMENT_HANDLE_COLOR, }) => (_jsxs(_Fragment, { children: [_jsx(Circle, { c: c, r: r, color: "#FFFFFF" }), _jsx(Circle, { c: c, r: r, color: color, style: "stroke", strokeWidth: ringWidth })] }));
 // Bounds of a flat [x,y,x,y,…] stroke point array, or null if empty.
 const strokeBounds = (points) => {
     if (points.length < 2)
@@ -86,7 +92,46 @@ const SelectionBox = ({ bounds, isDragging, transform, }) => (_jsx(DraggableElem
 // since the function-call pattern works identically on native we use it
 // in both Inners for consistency. Don't add hooks here; this is a plain
 // JSX-returning helper, not a component.
-export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }) }, shape.id))), effectiveCanvas.placedMeasurements.map((placed) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, handleRadius, handleRingWidth, customPreview, }) => (_jsx(Canvas, { style: { width, height }, children: _jsxs(Group, { transform: worldTransform, children: [effectiveCanvas.viewport.backgroundImage && (_jsx(BackgroundImageElement, { image: effectiveCanvas.viewport.backgroundImage, docWidth: effectiveCanvas.viewport.width, docHeight: effectiveCanvas.viewport.height, fit: effectiveCanvas.viewport.backgroundFit ?? 'contain', resolveUrl: resolveImageUrl })), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
+                // 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
+                // of the measurement-line endpoint drag below. Other shapes, and
+                // unselected lines, fall through to the plain ShapeElement render so
+                // their memoization is preserved.
+                if (shape.kind === 'line' || shape.kind === 'arrow') {
+                    const isEndpointDrag = shape.id === shapeEndpointDragId;
+                    const isSelected = shape.id === selectedId;
+                    const [a, b] = shape.geometry.points;
+                    if ((isEndpointDrag || isSelected) && a && b) {
+                        const stroke = shape.style.stroke ?? '#000000';
+                        const strokeWidth = shape.style.strokeWidth ?? 2;
+                        const hasArrow = shape.kind === 'arrow' || shape.style.cap === 'arrow';
+                        const handles = handleRadius != null ? (_jsxs(_Fragment, { children: [_jsx(Handle, { c: isEndpointDrag && liveLineP1 ? liveLineP1 : a, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: isEndpointDrag && liveLineP2 ? liveLineP2 : b, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR })] })) : null;
+                        // Endpoint drag: render the body live from the moving endpoints
+                        // (outside any group translate), suppressing the static arrowhead
+                        // so it doesn't lag the finger — it reappears on commit. Selected
+                        // but idle: reuse ShapeElement for the body (caps/arrowhead/dash)
+                        // and overlay the handles, both wrapped so a group move tracks.
+                        if (isEndpointDrag) {
+                            const arrowPath = (() => {
+                                if (!hasArrow)
+                                    return null;
+                                const [apex, baseL, baseR] = arrowheadTriangle(b, a, strokeWidth);
+                                const p = Skia.Path.Make();
+                                p.moveTo(apex.x, apex.y);
+                                p.lineTo(baseL.x, baseL.y);
+                                p.lineTo(baseR.x, baseR.y);
+                                p.close();
+                                return p;
+                            })();
+                            return (_jsxs(Group, { children: [_jsx(Line, { p1: liveLineP1 ?? a, p2: liveLineP2 ?? b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(shape.style.cap), children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) }), handles, arrowPath && (_jsx(Path, { path: arrowPath, color: stroke, style: "fill" }))] }, shape.id));
+                        }
+                        return (_jsxs(DraggableElement, { isDragging: shape.id === draggingId, transform: dragTransform, children: [_jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }), handles] }, shape.id));
+                    }
+                }
+                return (_jsx(DraggableElement, { isDragging: shape.id === draggingId || shape.id === resizingId, transform: shape.id === resizingId ? resizeTransform : dragTransform, children: _jsx(ShapeElement, { shape: shape, font: valueFont, textFontMgr: textFontMgr }) }, shape.id));
+            }), effectiveCanvas.placedMeasurements.map((placed) => {
                 // Rectangle annotation: a stroked border whose center carries the
                 // tile. A corner drag renders from the live geometry (outside the
                 // group translate, like an endpoint drag); otherwise the committed
@@ -100,7 +145,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                         return (_jsx(Rect, { x: liveRect.x, y: liveRect.y, width: liveRect.width, height: liveRect.height, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }, placed.id));
                     }
                     const n = normalizeRect(placed.rect);
-                    return (_jsxs(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: [_jsx(Rect, { x: n.minX, y: n.minY, width: n.maxX - n.minX, height: n.maxY - n.minY, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: { x: n.minX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.minY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.minX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: { x: n.maxX, y: n.maxY }, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }, placed.id));
+                    return (_jsxs(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: [_jsx(Rect, { x: n.minX, y: n.minY, width: n.maxX - n.minX, height: n.maxY - n.minY, color: rectColor, style: "stroke", strokeWidth: rectWidth, children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(rectWidth) })) }), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Handle, { c: { x: n.minX, y: n.minY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.maxX, y: n.minY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.minX, y: n.maxY }, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: { x: n.maxX, y: n.maxY }, r: handleRadius, ringWidth: handleRingWidth })] }))] }, placed.id));
                 }
                 if (placementOf(placed) !== 'line' || !placed.line)
                     return null;
@@ -126,7 +171,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     p.close();
                     return p;
                 })();
-                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: p1, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR }), _jsx(Circle, { c: p2, r: handleRadius, color: MEASUREMENT_HANDLE_COLOR })] }))] }));
+                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), arrowPath && (_jsx(Path, { path: arrowPath, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)
@@ -139,6 +184,10 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 }
                 const shape = effectiveCanvas.shapes.find((s) => s.id === selectedId);
                 if (shape) {
+                    // Line/arrow shapes show endpoint handles (drawn with the shape
+                    // above), not a bounding box — matching the measurement-line UX.
+                    if (shape.kind === 'line' || shape.kind === 'arrow')
+                        return null;
                     // Text shapes derive their box from the estimated text bounds (the
                     // stored geometry is just the top-left anchor) and add a corner
                     // resize handle; both track the live resize transform so the chrome
@@ -152,7 +201,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     const isResizing = shape.id === resizingId;
                     const liveTransform = isResizing ? resizeTransform : dragTransform;
                     const resizeGeom = isText ? textResizeGeometry(shape) : null;
-                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isDragging || isResizing, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isDragging || isResizing, transform: liveTransform, children: _jsx(Circle, { c: resizeGeom.handle, r: handleRadius, color: SELECTION_COLOR }) }))] }));
+                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isDragging || isResizing, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isDragging || isResizing, transform: liveTransform, children: _jsx(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) }))] }));
                 }
                 return null;
             })(), penDrawingStroke && _jsx(StrokeElement, { stroke: penDrawingStroke }), shapePreview && (_jsxs(_Fragment, { children: [_jsx(Path, { path: shapePreview.path, color: shapePreview.color, style: "stroke", strokeWidth: shapePreview.width, strokeCap: toSkiaStrokeCap(shapePreview.cap), strokeJoin: "round", children: shapePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(shapePreview.width) })) }), _jsx(Path, { path: shapePreview.headPath, color: shapePreview.color, style: "fill" })] })), livePreview?.handoffPaths?.map((p, i) => (_jsx(Path, { path: p, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) }, i))), livePreview && (_jsx(Path, { path: livePreview.path, color: livePreview.color, style: "stroke", strokeWidth: livePreview.width, strokeCap: toSkiaStrokeCap(livePreview.cap), strokeJoin: "round", opacity: livePreview.opacity, children: livePreview.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(livePreview.width) })) })), customPreview] }) }));

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

@@ -22,6 +22,7 @@ export interface ToolContext {
     document: AnnotationCanvasState;
     selection: Selection | null;
     viewport: ViewportApi;
+    tileViewportScale: number;
     preview(patch: AnnotationDocumentPatch): void;
     commit(patch: AnnotationDocumentPatch): void;
     setSelection(selection: Selection | null): void;
@@ -50,21 +51,24 @@ export interface ShapeDrawConfig {
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
 export interface DragSelectionConfig {
-    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number): {
+    hitTest(doc: AnnotationCanvasState, world: Vec2, zoom: number, viewportTileScale?: number): {
         id: AnnotationElementId;
         kind: DragElementKind;
     } | null;
     buildTranslatePatch(doc: AnnotationCanvasState, id: AnnotationElementId, kind: DragElementKind, delta: Vec2): AnnotationDocumentPatch | null;
-    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'slide' | 'move';
+    classifyMeasurementGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): 'slide' | 'move';
     buildSlidePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2, zoom: number): AnnotationDocumentPatch | null;
     hitTestHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
     buildEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestShapeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): 'a' | 'b' | null;
+    buildShapeEndpointPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, handle: 'a' | 'b', delta: Vec2): AnnotationDocumentPatch | null;
     hitTestRectCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
         corner: RectCorner;
         moving: Vec2;
         fixed: Vec2;
     } | null;
     buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    isSelectedTileGrab?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number, viewportTileScale?: number): boolean;
     hitTestResizeHandle?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): ResizeGeometry | null;
     buildResizePatch?(doc: AnnotationCanvasState, id: AnnotationElementId, delta: Vec2): AnnotationDocumentPatch | null;
 }
@@ -80,6 +84,7 @@ export interface Tool {
     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;
+    onLongPress?(event: CanvasPointerEvent, ctx: ToolContext): void;
     onCancel?(state: ToolState, ctx: ToolContext): void;
     onDeactivate?(ctx: ToolContext): void;
     renderPreview?(state: ToolState, ctx: ToolContext): ReactNode;

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

@@ -36,7 +36,7 @@ export declare const rectCornerPoint: (rect: {
     b: Vec2;
 }, corner: RectCorner) => Vec2;
 export declare const oppositeRectCorner: (corner: RectCorner) => RectCorner;
-export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number) => boolean;
+export declare const hitPlacedMeasurement: (m: PlacedMeasurementRef, p: Vec2, zoom?: number, tileScaleFactor?: number, viewportScale?: number) => boolean;
 export interface RemoveMeasurementResult {
     ops: AnnotationPatchOp[];
     keepSelection: boolean;

package/dist/annotation/canvas/measurementGeometry.js

@@ -92,9 +92,10 @@ export const oppositeRectCorner = (corner) => {
 const STAMP_HIT_PADDING = 6;
 // Screen-space grab tolerance (px) for a measurement-annotation line or rect
 // border, converted to doc space via zoom (the body is a thin world-space
-// stroke). Matches the select tool's drag-grab tolerance so tap-select and
-// drag-grab agree on what counts as "on the measurement".
-const LINE_GRAB_PX = 12;
+// stroke). Deliberately wider than a fingertip so a thin line isn't fiddly to
+// grab on touch, and kept in sync with the select tool's SHAPE_GRAB_PX so
+// tap-select and drag-grab agree on what counts as "on the measurement".
+const LINE_GRAB_PX = 32;
 const segmentDistSq = (p, a, b) => {
     const abx = b.x - a.x;
     const aby = b.y - a.y;
@@ -109,14 +110,15 @@ const segmentDistSq = (p, a, b) => {
 // stamp tile around the anchor, the line body of a line annotation, or the
 // border ring of a rectangle annotation (interiors stay transparent to hits so
 // elements inside remain reachable).
-export const hitPlacedMeasurement = (m, p, zoom = 1) => {
+export const hitPlacedMeasurement = (m, p, zoom = 1, tileScaleFactor = 1, viewportScale = 1) => {
     // The stamp renders as a constant *screen*-size square centered on the
     // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
     // screen-space half-extent (+ padding) back to doc space via the zoom so
     // the hit box always matches what's drawn.
     // Unassociated inputs use the smaller input-tile footprint (#6); the helper
     // folds in scale + the associated/blank size so the hit box matches the draw.
-    const half = (stampTileSize(m) / 2 + STAMP_HIT_PADDING) / zoom;
+    const half = (stampTileSize(m, tileScaleFactor, viewportScale) / 2 + STAMP_HIT_PADDING) /
+        zoom;
     const dx = Math.abs(p.x - m.anchor.x);
     const dy = Math.abs(p.y - m.anchor.y);
     if (dx <= half && dy <= half)

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

@@ -1,5 +1,11 @@
 import type { PlacedMeasurementRef } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
-export declare const STAMP_INPUT_TILE_SIZE = 56;
+export declare const STAMP_INPUT_TILE_SIZE = 44;
+export declare const DEFAULT_TILE_SCALE = 1;
+export declare const TILE_SCALE_MIN = 0.4;
+export declare const TILE_SCALE_MAX = 2;
+export declare const clampTileScale: (v: number) => number;
+export declare const renderedDocWidthAtFit: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
+export declare const viewportTileScale: (canvasW: number, canvasH: number, docW: number, docH: number) => number;
 export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath">) => boolean;
-export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">) => number;
+export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "scale">, tileScaleFactor?: number, viewportScale?: number) => number;