@reekon-tools/boldr-utils 1.6.18 → 1.6.19

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -9,6 +9,9 @@ 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;
 const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, gestures, width, height, style, activeToolId, tools, } = props;
@@ -206,13 +209,16 @@ 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;

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

@@ -15,6 +15,9 @@ const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++
 // 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.
@@ -315,6 +318,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 +348,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
@@ -758,6 +772,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 +822,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 +831,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 +894,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 +938,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);
             };
@@ -1018,6 +1067,7 @@ export const AnnotationCanvasInner = (props) => {
                         resizeTransform,
                         selectedId: selection?.ids[0] ?? null,
                         endpointDragId: epDragId,
+                        shapeEndpointDragId: shapeEpDragId,
                         liveLineP1,
                         liveLineP2,
                         rectDragId,
@@ -1033,18 +1083,21 @@ 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;
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;

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,15 +51,17 @@ 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;

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

@@ -109,14 +109,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 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;

package/dist/annotation/canvas/stampLayout.js

@@ -15,13 +15,74 @@ export const STAMP_TILE_SIZE = 96;
 // inputs read as lightweight tap targets; associated tiles keep STAMP_TILE_SIZE
 // so existing saved annotations are visually unchanged. The single knob for #6.
 export const STAMP_INPUT_TILE_SIZE = 56;
+// Document-wide tile scale factor (AnnotationCanvasState.tileScaleFactor): one
+// knob that shrinks/grows EVERY measurement tile on the canvas at once, on top
+// of each tile's own `scale`. Lets a user pull tiles down on a dense drawing
+// where lines crowd together, or bump them up on a sparse one. Like `scale` it
+// is purely a screen-space multiplier — it does NOT change with zoom. Absent ===
+// DEFAULT_TILE_SCALE (visually identical to documents written before the knob
+// existed).
+export const DEFAULT_TILE_SCALE = 1;
+export const TILE_SCALE_MIN = 0.4;
+export const TILE_SCALE_MAX = 2;
+// Clamp a tile-scale-factor candidate to the supported range. The single guard
+// for the value before it lands in the document (slider input, restored docs).
+export const clampTileScale = (v) => v < TILE_SCALE_MIN ? TILE_SCALE_MIN : v > TILE_SCALE_MAX ? TILE_SCALE_MAX : v;
+// --- Viewport-relative tile sizing ------------------------------------------
+// A bare-pixel tile is the same size on every device, but the SAME document is
+// fit into wildly different canvases (a phone window vs a desktop pane), so the
+// drawing renders much larger on desktop and a fixed-px tile reads as a tiny
+// fraction of it. To keep a tile a CONSISTENT fraction of the drawing across
+// platforms — while staying independent of the user's live zoom — the tile
+// footprint is multiplied by `viewportTileScale`, which tracks how large the
+// document renders when fit to the canvas (NOT the live zoom).
+// Rendered document width (screen px) at which a tile uses its unscaled base
+// size. Calibrated to a large phone's width so phone canvases land at scale 1
+// (mobile visually unchanged); larger canvases scale up proportionally.
+const TILE_VIEWPORT_REFERENCE_PX = 430;
+// Clamp so phone-sized canvases never shrink tiles below base (lower = 1) and
+// very large monitors don't produce runaway tiles (upper = 4).
+const TILE_VIEWPORT_SCALE_MIN = 1;
+const TILE_VIEWPORT_SCALE_MAX = 4;
+// Screen-px width the document occupies when fit to the canvas:
+//   docW * fitZoom, fitZoom = min(canvasW/docW, canvasH/docH)
+//            = min(canvasW, docW * canvasH / docH)
+// This — not the raw canvas size — governs the tile's fraction of the drawing,
+// so the same document at the same canvas aspect yields the same value on web
+// and native. Falls back to canvasW when doc dimensions are unknown.
+export const renderedDocWidthAtFit = (canvasW, canvasH, docW, docH) => {
+    if (!(docW > 0) || !(docH > 0) || !(canvasW > 0) || !(canvasH > 0)) {
+        return canvasW > 0 ? canvasW : TILE_VIEWPORT_REFERENCE_PX;
+    }
+    return Math.min(canvasW, (docW * canvasH) / docH);
+};
+// Multiplier folded into the tile footprint so tiles are a consistent fraction
+// of the rendered drawing on any canvas. Zoom-INDEPENDENT (a function of canvas
+// + doc dimensions only), so the tile still never changes size as the user
+// pinches/wheels. Defaults to 1 (callers without canvas dimensions are
+// unaffected — e.g. legacy tests).
+export const viewportTileScale = (canvasW, canvasH, docW, docH) => {
+    const s = renderedDocWidthAtFit(canvasW, canvasH, docW, docH) /
+        TILE_VIEWPORT_REFERENCE_PX;
+    return s < TILE_VIEWPORT_SCALE_MIN
+        ? TILE_VIEWPORT_SCALE_MIN
+        : s > TILE_VIEWPORT_SCALE_MAX
+            ? TILE_VIEWPORT_SCALE_MAX
+            : s;
+};
 // A placed measurement is an unassociated input until a measurement reference
 // is attached (id or path). Such stamps use STAMP_INPUT_TILE_SIZE.
 export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath;
 // Screen-space edge length for a placed stamp: the compact input size while
 // unassociated, full size once a measurement is attached, then scaled by the
-// per-stamp `scale`. The ONE source of truth for tile footprint — render
-// overlay, hit-test, and slide-grab classification all call this so the drawn
-// tile and its touch box always agree.
-export const stampTileSize = (m) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
-    (m.scale ?? 1);
+// per-stamp `scale`, the document-wide `tileScaleFactor`, and the
+// `viewportTileScale` (so tiles read at a consistent fraction of the drawing on
+// any canvas). The ONE source of truth for tile footprint — render overlay,
+// hit-test, and slide-grab classification all call this so the drawn tile and
+// its touch box always agree. `tileScaleFactor` is the canvas-level knob
+// (default 1, from `AnnotationCanvasState.tileScaleFactor`); `viewportScale`
+// (default 1) is the per-canvas multiplier from `viewportTileScale`.
+export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
+    (m.scale ?? 1) *
+    tileScaleFactor *
+    viewportScale;

package/dist/annotation/canvas/tools/measurementLineTool.d.ts

@@ -0,0 +1,12 @@
+import type { PlacedMeasurementRef } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface MeasurementLineToolOptions {
+    id?: string;
+    label?: string;
+    minDragPx?: number;
+    autoSwitchToSelect?: boolean;
+    selectToolId?: string;
+    onAutoSwitch?: (toToolId: string) => void;
+    onPlaced?: (measurement: PlacedMeasurementRef) => void;
+}
+export declare const createMeasurementLineTool: (options?: MeasurementLineToolOptions) => Tool;

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

@@ -0,0 +1,95 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { DEFAULT_LINE_POS, recomputeAnchor } from '../measurementGeometry.js';
+let counter = 0;
+const makeId = () => `annotation-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+// Build the blank line-measurement annotation for a drag from `a` to `b`: a
+// 2-point line with a value tile magnetized to its center (linePos 0.5). The
+// payload mirrors useAnnotationCanvasState's placeAnnotationAtCenter so a drawn
+// line and a (legacy) center-placed one are byte-identical once committed.
+const buildLineMeasurement = (opts) => {
+    const line = { a: opts.a, b: opts.b };
+    return {
+        id: opts.id,
+        layerId: opts.layerId,
+        placement: 'line',
+        line,
+        linePos: DEFAULT_LINE_POS,
+        // Center of the line; recomputeAnchor keeps this in sync on edits.
+        anchor: recomputeAnchor(line, 'line', DEFAULT_LINE_POS, {
+            x: (opts.a.x + opts.b.x) / 2,
+            y: (opts.a.y + opts.b.y) / 2,
+        }),
+        showLabel: true,
+        showValue: true,
+        createdAt: Date.now(),
+    };
+};
+// Drag-to-draw measurement-line tool. Press-drag rubber-bands a measurement
+// annotation (a line with a blank value tile at its center); release commits
+// it. Mirrors createShapeTool's interaction so "input lines" are placed the
+// same way as shapes — draw to add, not tap-the-icon-to-add — replacing the
+// old center-place affordance. The annotation stays blank (no measurement
+// associated) until the user fills it via the tile / picker. Skia-free, like
+// every tool factory; it renders its live preview through ctx.preview, so it
+// works on web and (via the generic tool-pan dispatch) on native.
+export const createMeasurementLineTool = (options = {}) => {
+    const minDragPx = options.minDragPx ?? 4;
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: options.id ?? 'measure-line',
+        label: options.label ?? 'Measurement line',
+        cursor: 'crosshair',
+        onPointerDown(event) {
+            return {
+                kind: 'measurement-line-drawing',
+                id: makeId(),
+                startWorld: event.world,
+                startScreen: event.screen,
+                moved: false,
+            };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'measurement-line-drawing')
+                return s;
+            const measurement = buildLineMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                a: s.startWorld,
+                b: event.world,
+            });
+            ctx.preview({ ops: [{ op: 'addMeasurement', measurement }] });
+            return { ...s, moved: true };
+        },
+        onPointerUp(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'measurement-line-drawing')
+                return;
+            const dx = event.screen.x - s.startScreen.x;
+            const dy = event.screen.y - s.startScreen.y;
+            if (!s.moved || dx * dx + dy * dy < minDragPx * minDragPx) {
+                // Accidental tap — discard the rubber-band, commit nothing.
+                ctx.preview({ ops: [] });
+                return;
+            }
+            const measurement = buildLineMeasurement({
+                id: s.id,
+                layerId: firstLayerId(ctx.document),
+                a: s.startWorld,
+                b: event.world,
+            });
+            ctx.commit({ ops: [{ op: 'addMeasurement', measurement }] });
+            // Leave it selected (and hand back to select) so the blank line can be
+            // filled / moved straight away — the same flow as the text tool.
+            ctx.setSelection({ ids: [measurement.id] });
+            options.onPlaced?.(measurement);
+            if (autoSwitchToSelect)
+                options.onAutoSwitch?.(selectToolId);
+        },
+        onCancel(_state, ctx) {
+            ctx.preview({ ops: [] });
+        },
+    };
+};

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

@@ -51,7 +51,7 @@ export const createPanTool = (options = {}) => ({
         const measurements = ctx.document.placedMeasurements;
         for (let i = measurements.length - 1; i >= 0; i--) {
             const m = measurements[i];
-            if (hitPlacedMeasurement(m, event.world, zoom)) {
+            if (hitPlacedMeasurement(m, event.world, zoom, ctx.document.tileScaleFactor, ctx.tileViewportScale)) {
                 ctx.setSelection({ ids: [m.id] });
                 return;
             }