@reekon-tools/boldr-utils 1.6.20 → 1.6.24

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -3,6 +3,7 @@ import { Canvas, Circle, DashPathEffect, Group, Line, Path, Rect, Skia, } from '
 import { normalizeRect, placementOf } from './measurementGeometry.js';
 import { arrowheadTriangle, dashIntervals, toSkiaStrokeCap, } from './strokeGeometry.js';
 import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeometry.js';
+import { visualShapeBounds } from './shapeGeometry.js';
 import { BackgroundImageElement } from './elements/BackgroundImageElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
@@ -50,25 +51,6 @@ const strokeBounds = (points) => {
     }
     return { minX, minY, maxX, maxY };
 };
-// Bounds of a Vec2[] (shape geometry), or null if empty.
-const pointsBounds = (pts) => {
-    if (pts.length === 0)
-        return null;
-    let { x: minX, y: minY } = pts[0];
-    let { x: maxX, y: maxY } = pts[0];
-    for (let i = 1; i < pts.length; i++) {
-        const p = pts[i];
-        if (p.x < minX)
-            minX = p.x;
-        if (p.x > maxX)
-            maxX = p.x;
-        if (p.y < minY)
-            minY = p.y;
-        if (p.y > maxY)
-            maxY = p.y;
-    }
-    return { minX, minY, maxX, maxY };
-};
 // Wraps a single element in the live drag transform while it's being dragged
 // (native, UI-thread). When not dragging it renders the element untouched, so
 // the element's React.memo still bails out on unrelated re-renders.
@@ -92,7 +74,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, 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) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, resolveImageUrl, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, 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
@@ -114,22 +96,33 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                         // 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 headPath = (tip, from) => {
+                                const [apex, baseL, baseR] = arrowheadTriangle(tip, from, 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));
+                            };
+                            const endArrow = hasArrow ? headPath(b, a) : null;
+                            const startArrow = shape.style.startCap === 'arrow' ? headPath(a, b) : null;
+                            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, startArrow && (_jsx(Path, { path: startArrow, color: stroke, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, 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));
                     }
                 }
+                // Non-line shapes track the live transform of whichever resize is in
+                // flight: text scales uniformly via a transform (`resizingId`); a
+                // group move translates (`draggingId`). A rect/ellipse/polygon corner
+                // resize instead re-renders the SCALED OUTLINE live (`shapeResizePath`)
+                // at a constant stroke — a non-uniform scale transform would warp the
+                // stroke width (top/bottom edges thicken with scaleY).
+                if (shape.id === shapeResizeId && shapeResizePath) {
+                    const stroke = shape.style.stroke ?? '#000000';
+                    const strokeWidth = shape.style.strokeWidth ?? 2;
+                    return (_jsxs(Group, { children: [shape.style.fill && (_jsx(Path, { path: shapeResizePath, color: shape.style.fill, style: "fill" })), _jsx(Path, { path: shapeResizePath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeJoin: "round", children: shape.style.dash && (_jsx(DashPathEffect, { intervals: dashIntervals(strokeWidth) })) })] }, 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
@@ -155,23 +148,26 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 const p2 = isEndpointDrag && liveLineP2 ? liveLineP2 : placed.line.b;
                 const lineColor = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
                 const lineWidth = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
-                // Solid filled-triangle arrowhead at endpoint b (the line's "end").
-                // Built from the static endpoints, so it's skipped during a live
-                // endpoint drag (it reappears on release) rather than lagging the
-                // moving finger.
-                const arrowPath = (() => {
-                    if (placed.lineCap !== 'arrow' || isEndpointDrag || !placed.line) {
-                        return null;
-                    }
-                    const [apex, baseL, baseR] = arrowheadTriangle(placed.line.b, placed.line.a, lineWidth);
+                // Solid filled-triangle arrowheads at endpoint b (the "end", lineCap)
+                // and/or endpoint a (the "start", lineStartCap). Built from the static
+                // endpoints, so they're skipped during a live endpoint drag (they
+                // reappear on release) rather than lagging the moving finger.
+                const headPath = (tip, from) => {
+                    const [apex, baseL, baseR] = arrowheadTriangle(tip, from, lineWidth);
                     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;
-                })();
-                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 })] }))] }));
+                };
+                const endArrow = placed.line && !isEndpointDrag && placed.lineCap === 'arrow'
+                    ? headPath(placed.line.b, placed.line.a)
+                    : null;
+                const startArrow = placed.line && !isEndpointDrag && placed.lineStartCap === 'arrow'
+                    ? headPath(placed.line.a, placed.line.b)
+                    : null;
+                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) })) }), startArrow && (_jsx(Path, { path: startArrow, color: lineColor, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, 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)
@@ -188,20 +184,34 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     // above), not a bounding box — matching the measurement-line UX.
                     if (shape.kind === 'line' || shape.kind === 'arrow')
                         return null;
+                    // During a corner resize the box tracks the live scaled bounds
+                    // (`shapeResizeBox`) at a constant stroke — a transform would warp it
+                    // like the shape — and the corner handles hide (they'd warp into
+                    // ellipses under a non-uniform scale; the rect annotation hides its
+                    // handles mid-drag for the same reason).
+                    if (shape.id === shapeResizeId && shapeResizeBox) {
+                        return (_jsx(Rect, { x: shapeResizeBox.x, y: shapeResizeBox.y, width: shapeResizeBox.width, height: shapeResizeBox.height, color: SELECTION_COLOR, style: "stroke", strokeWidth: SELECTION_STROKE }));
+                    }
                     // 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
                     // scales with the shape during a native UI-thread resize.
                     const isText = shape.kind === 'text';
-                    const b = isText
-                        ? textShapeBounds(shape)
-                        : pointsBounds(shape.geometry.points);
+                    const b = isText ? textShapeBounds(shape) : visualShapeBounds(shape);
                     if (!b)
                         return null;
                     const isResizing = shape.id === resizingId;
                     const liveTransform = isResizing ? resizeTransform : dragTransform;
+                    const isLive = isDragging || isResizing;
                     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(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) }))] }));
+                    // Rect/ellipse/polygon shapes get four bounding-box corner handles
+                    // (drawn at the un-padded visual-bounds corners so they line up with
+                    // the hit-test) to scale length and width — the shape twin of the
+                    // rectangle-annotation corner handles.
+                    const cornerResizable = shape.kind === 'rect' ||
+                        shape.kind === 'ellipse' ||
+                        shape.kind === 'polygon';
+                    return (_jsxs(_Fragment, { children: [_jsx(SelectionBox, { bounds: b, isDragging: isLive, transform: liveTransform }), resizeGeom && handleRadius != null && (_jsx(DraggableElement, { isDragging: isLive, transform: liveTransform, children: _jsx(Handle, { c: resizeGeom.handle, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }) })), cornerResizable && handleRadius != null && (_jsxs(DraggableElement, { isDragging: isDragging, transform: dragTransform, children: [_jsx(Handle, { c: { x: b.minX, y: b.minY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.maxX, y: b.minY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.minX, y: b.maxY }, r: handleRadius, ringWidth: handleRingWidth, color: SELECTION_COLOR }), _jsx(Handle, { c: { x: b.maxX, y: b.maxY }, 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

@@ -39,6 +39,7 @@ export interface FreehandConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minSampleDistance: number;
 }
@@ -47,6 +48,7 @@ export interface ShapeDrawConfig {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
 }
 export type DragElementKind = 'stroke' | 'shape' | 'measurement';
@@ -68,6 +70,12 @@ export interface DragSelectionConfig {
         fixed: Vec2;
     } | null;
     buildRectCornerPatch?(doc: AnnotationCanvasState, id: AnnotationElementId, corner: RectCorner, delta: Vec2): AnnotationDocumentPatch | null;
+    hitTestShapeCorner?(doc: AnnotationCanvasState, id: AnnotationElementId, world: Vec2, zoom: number): {
+        corner: RectCorner;
+        moving: Vec2;
+        fixed: Vec2;
+    } | null;
+    buildShapeCornerPatch?(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;

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

@@ -45,34 +45,54 @@ export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
     // historical behavior).
     const closed = geometry.closed !== false;
     const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points, closed) : null), [kind, geometry.points, closed]);
-    // Solid filled-triangle arrowhead at the shape's end point. Drawn for the
-    // legacy 'arrow' kind, for a 'line' with cap === 'arrow' (the arrow tool and
-    // the end-cap editor both produce this), and for an OPEN polygon with cap
-    // === 'arrow' (its last segment has a direction). Mirrors StrokeElement.
-    const arrowHead = useMemo(() => {
-        let from;
-        let end;
-        if ((kind === 'line' || kind === 'arrow') &&
-            (kind === 'arrow' || style.cap === 'arrow')) {
-            [from, end] = geometry.points;
+    // Solid filled-triangle arrowheads. The END head is drawn for the legacy
+    // 'arrow' kind, for a 'line' with cap === 'arrow' (the arrow tool and the
+    // end-cap editor both produce this), and for an OPEN polygon with cap ===
+    // 'arrow'. The START head is drawn for a 'line'/'arrow' or open polygon with
+    // startCap === 'arrow' (so a line can be headed at either end or both).
+    // Mirrors StrokeElement.
+    const arrowHeads = useMemo(() => {
+        // The two anchor segments: [endTip, endFrom] points the end head, and
+        // [startTip, startFrom] points the start head (pointing back out of the
+        // first point). For an open polygon those are the last/first segments.
+        let endTip;
+        let endFrom;
+        let startTip;
+        let startFrom;
+        if (kind === 'line' || kind === 'arrow') {
+            const [a, b] = geometry.points;
+            endTip = b;
+            endFrom = a;
+            startTip = a;
+            startFrom = b;
         }
-        else if (kind === 'polygon' && !closed && style.cap === 'arrow') {
+        else if (kind === 'polygon' && !closed) {
             const n = geometry.points.length;
             if (n >= 2) {
-                from = geometry.points[n - 2];
-                end = geometry.points[n - 1];
+                endTip = geometry.points[n - 1];
+                endFrom = geometry.points[n - 2];
+                startTip = geometry.points[0];
+                startFrom = geometry.points[1];
             }
         }
-        if (!from || !end || (from.x === end.x && from.y === end.y))
-            return null;
-        const [apex, baseL, baseR] = arrowheadTriangle(end, from, 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;
-    }, [kind, geometry.points, closed, style.cap, strokeWidth]);
+        const head = (tip, from) => {
+            if (!tip || !from || (tip.x === from.x && tip.y === from.y))
+                return null;
+            const [apex, baseL, baseR] = arrowheadTriangle(tip, from, 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;
+        };
+        const wantEnd = kind === 'arrow' || style.cap === 'arrow';
+        const wantStart = style.startCap === 'arrow';
+        return {
+            end: wantEnd ? head(endTip, endFrom) : null,
+            start: wantStart ? head(startTip, startFrom) : null,
+        };
+    }, [kind, geometry.points, closed, style.cap, style.startCap, strokeWidth]);
     // Text shapes render through the Skia Paragraph API so decorations (solid
     // underline / wavy squiggle / highlight band) paint natively. The loaded font
     // is registered into a provider so the Paragraph draws with the same typeface
@@ -171,12 +191,12 @@ export const ShapeElement = memo(({ shape, font, textFontMgr }) => {
             const [a, b] = geometry.points;
             if (!a || !b)
                 return null;
-            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
+            return (_jsxs(_Fragment, { children: [_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), children: dashEffect }), arrowHeads.start && (_jsx(Path, { path: arrowHeads.start, color: stroke, style: "fill" })), arrowHeads.end && (_jsx(Path, { path: arrowHeads.end, color: stroke, style: "fill" }))] }));
         }
         case 'polygon': {
             if (!polyPath)
                 return null;
-            return (_jsxs(_Fragment, { children: [fill && closed && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), strokeJoin: "round", children: dashEffect }), arrowHead && _jsx(Path, { path: arrowHead, color: stroke, style: "fill" })] }));
+            return (_jsxs(_Fragment, { children: [fill && closed && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: toSkiaStrokeCap(style.cap), strokeJoin: "round", children: dashEffect }), arrowHeads.start && (_jsx(Path, { path: arrowHeads.start, color: stroke, style: "fill" })), arrowHeads.end && (_jsx(Path, { path: arrowHeads.end, color: stroke, style: "fill" }))] }));
         }
         case 'text': {
             // `origin` is the TOP-LEFT of the text block; textGeometry derives the

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

@@ -12,16 +12,13 @@ export const pointsToSkPath = (points) => {
     }
     return path;
 };
-// A solid filled-triangle arrowhead at the stroke's end (vertex at the last
-// point, base corners back along the final segment), or null when the cap isn't
-// 'arrow'. Rendered as a separate filled <Path> on top of the stroked line.
-const arrowheadPath = (stroke) => {
-    const n = stroke.points.length;
-    if (stroke.cap !== 'arrow' || n < 4)
+// A solid filled-triangle arrowhead at `tip`, with its base back toward `from`,
+// rendered as a separate filled <Path> on top of the stroked line. Null when
+// the two points coincide (e.g. a tap-dot), which has no direction to point.
+const headPath = (tip, from, width) => {
+    if (tip.x === from.x && tip.y === from.y)
         return null;
-    const end = { x: stroke.points[n - 2], y: stroke.points[n - 1] };
-    const from = { x: stroke.points[n - 4], y: stroke.points[n - 3] };
-    const [apex, baseL, baseR] = arrowheadTriangle(end, from, stroke.width);
+    const [apex, baseL, baseR] = arrowheadTriangle(tip, from, width);
     const path = Skia.Path.Make();
     path.moveTo(apex.x, apex.y);
     path.lineTo(baseL.x, baseL.y);
@@ -29,17 +26,35 @@ const arrowheadPath = (stroke) => {
     path.close();
     return path;
 };
+// Arrowheads at the stroke's end (cap) and/or start (startCap). Each is null
+// unless the corresponding cap is 'arrow'. The start head points back out of
+// the first point (base toward the second).
+const arrowheadPaths = (stroke) => {
+    const n = stroke.points.length;
+    if (n < 4)
+        return { start: null, end: null };
+    const first = { x: stroke.points[0], y: stroke.points[1] };
+    const second = { x: stroke.points[2], y: stroke.points[3] };
+    const last = { x: stroke.points[n - 2], y: stroke.points[n - 1] };
+    const penult = { x: stroke.points[n - 4], y: stroke.points[n - 3] };
+    return {
+        end: stroke.cap === 'arrow' ? headPath(last, penult, stroke.width) : null,
+        start: stroke.startCap === 'arrow'
+            ? headPath(first, second, stroke.width)
+            : null,
+    };
+};
 // Memoized: the canvas re-renders the whole element list on every commit,
 // preview, and selection change, but applyPatch preserves the identity of
 // unchanged strokes — so memo lets all but the changed stroke bail out.
 export const StrokeElement = memo(({ stroke }) => {
     const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
-    const arrow = useMemo(() => arrowheadPath(stroke), [stroke.points, stroke.cap, stroke.width]);
+    const arrows = useMemo(() => arrowheadPaths(stroke), [stroke.points, stroke.cap, stroke.startCap, stroke.width]);
     const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
     // A tap-dot is a zero-length two-point path; a dash effect would erase it
     // (the contour has no length to dash), so dots always render solid.
     const isDot = stroke.points.length === 4 &&
         stroke.points[0] === stroke.points[2] &&
         stroke.points[1] === stroke.points[3];
-    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity, children: stroke.dash && !isDot && (_jsx(DashPathEffect, { intervals: dashIntervals(stroke.width) })) }), arrow && (_jsx(Path, { path: arrow, color: stroke.color, style: "fill", opacity: opacity }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: toSkiaStrokeCap(stroke.cap), strokeJoin: "round", opacity: opacity, children: stroke.dash && !isDot && (_jsx(DashPathEffect, { intervals: dashIntervals(stroke.width) })) }), arrows.start && (_jsx(Path, { path: arrows.start, color: stroke.color, style: "fill", opacity: opacity })), arrows.end && (_jsx(Path, { path: arrows.end, color: stroke.color, style: "fill", opacity: opacity }))] }));
 });

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

@@ -3,3 +3,10 @@ export type ShapeToolKind = 'line' | 'rect' | 'triangle' | 'ellipse';
 export declare const annotationKindFor: (kind: ShapeToolKind) => AnnotationShapeKind;
 export declare const shapePointsFromDrag: (kind: ShapeToolKind, a: Vec2, b: Vec2) => Vec2[];
 export declare const hitShapeOutline: (shape: AnnotationShape, p: Vec2, tol: number) => boolean;
+export interface ShapeBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const visualShapeBounds: (shape: AnnotationShape) => ShapeBounds | null;

package/dist/annotation/canvas/shapeGeometry.js

@@ -114,3 +114,39 @@ export const hitShapeOutline = (shape, p, tol) => {
             return false;
     }
 };
+// Axis-aligned bounds of a shape AS RENDERED — the source of truth for the
+// selection box, its corner-resize handles, and the corner hit-test, so all
+// three agree on where the shape's edges are. For most kinds this is just the
+// bounding box of the geometry points, but an ellipse renders as a CIRCLE
+// (radius = half its larger extent, centered on the drag midpoint), so its
+// visual bounds are the square that circle inscribes — otherwise the selection
+// box hugs the raw (often non-square) drag rect instead of the visible circle.
+// Returns null for text and degenerate (< 2 point) geometry; text shapes box
+// from textGeometry's estimated bounds and lines draw handles on their
+// endpoints, so neither routes through here.
+export const visualShapeBounds = (shape) => {
+    const pts = shape.geometry.points;
+    if (pts.length < 2)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const p of pts) {
+        if (p.x < minX)
+            minX = p.x;
+        if (p.y < minY)
+            minY = p.y;
+        if (p.x > maxX)
+            maxX = p.x;
+        if (p.y > maxY)
+            maxY = p.y;
+    }
+    if (shape.kind === 'ellipse') {
+        const cx = (minX + maxX) / 2;
+        const cy = (minY + maxY) / 2;
+        const r = Math.max(maxX - minX, maxY - minY) / 2;
+        return { minX: cx - r, minY: cy - r, maxX: cx + r, maxY: cy + r };
+    }
+    return { minX, minY, maxX, maxY };
+};

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

@@ -5,7 +5,5 @@ 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">, tileScaleFactor?: number, viewportScale?: number) => number;
+export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId">) => boolean;
+export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId" | "scale">, tileScaleFactor?: number, viewportScale?: number) => number;

package/dist/annotation/canvas/stampLayout.js

@@ -30,60 +30,40 @@ 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;
-};
+// --- Tile sizing is independent of canvas size ------------------------------
+// A measurement tile's footprint is base × per-tile `scale` × the document-wide
+// `tileScaleFactor` (below) — and NOTHING tied to the canvas's pixel size, so
+// the same document shows the same tiles at any canvas/window size.
+//
+// Earlier builds multiplied the footprint by a per-canvas `viewportTileScale`
+// derived from how large the document rendered when fit to the canvas, to keep a
+// tile a constant fraction of the drawing across devices. But that made a tile's
+// size change whenever the canvas was resized (e.g. dragging a desktop pane) —
+// the same document read with different-sized tiles at different window sizes.
+// That auto-multiplier is retired in favor of the user-driven "Tile size"
+// slider (the document-wide `tileScaleFactor`), which is explicit, persisted,
+// and consistent everywhere. Mobile is unchanged — its old factor was already
+// pinned at 1, calibrated to a phone's width.
+//
+// `stampTileSize` keeps its `viewportScale` parameter (default 1) only so the
+// render overlay, hit-test, and tools that thread it stay call-compatible; it is
+// now always 1.
 // 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;
+// is attached (id or path) OR it is bound to a form column (`columnId`). Such
+// stamps use STAMP_INPUT_TILE_SIZE. A column-bound tile is a full editable
+// input *card* (it shows the column's label + value editor), so it takes the
+// full STAMP_TILE_SIZE like an associated tile — only the truly blank "+"
+// placeholder uses the compact input size.
+export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath && !m.columnId;
 // 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 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`.
+// per-stamp `scale` and the document-wide `tileScaleFactor`. 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 document-wide knob (default 1, from
+// `AnnotationCanvasState.tileScaleFactor`, driven by the "Tile size" slider).
+// `viewportScale` is retained for call compatibility and is always 1 — the old
+// per-canvas multiplier was retired (see the note above). Independent of zoom.
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => (isUnassociatedStamp(m) ? STAMP_INPUT_TILE_SIZE : STAMP_TILE_SIZE) *
     (m.scale ?? 1) *
     tileScaleFactor *

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

@@ -4,6 +4,7 @@ export interface PenToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minSampleDistance?: number;
     variant?: 'pen' | 'marker' | 'highlighter';

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

@@ -10,6 +10,7 @@ export const createPenTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
     const cap = options.cap ?? 'round';
+    const startCap = options.startCap ?? 'round';
     const dash = options.dash ?? false;
     const variant = options.variant ?? 'pen';
     const minSampleDistance = options.minSampleDistance ?? 1.5;
@@ -28,7 +29,15 @@ export const createPenTool = (options = {}) => {
         cursor: 'crosshair',
         // Drives UI-thread drawing on native (see FreehandConfig). The
         // onPointerDown/Move/Up below remain the web/parity implementation.
-        freehand: { variant, color, width, cap, dash, minSampleDistance },
+        freehand: {
+            variant,
+            color,
+            width,
+            cap,
+            ...(startCap === 'arrow' && { startCap: 'arrow' }),
+            dash,
+            minSampleDistance,
+        },
         onPointerDown(event, ctx) {
             const stroke = {
                 id: makeId('stroke'),
@@ -37,6 +46,7 @@ export const createPenTool = (options = {}) => {
                 color,
                 width,
                 cap,
+                ...(startCap === 'arrow' && { startCap: 'arrow' }),
                 ...(dash && { dash }),
                 points: [event.world.x, event.world.y],
                 pressure: event.pressure !== undefined ? [event.pressure] : undefined,