@reekon-tools/boldr-utils 1.6.20 → 1.6.24

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

@@ -1,9 +1,21 @@
 import { stampTileSize } from '../stampLayout.js';
 import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, } from '../measurementGeometry.js';
-import { hitShapeOutline } from '../shapeGeometry.js';
+import { hitShapeOutline, visualShapeBounds } from '../shapeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.js';
-import { editTextShape, findTextShapeAt } from './textEditing.js';
+import { editTextShape } from './textEditing.js';
 const HIT_PADDING = 6;
+// Whether an element id refers to a text shape (findHit reports text, lines,
+// rects and ellipses all as kind 'shape'; only text supports tap-to-edit).
+const isTextShape = (doc, id) => doc.shapes.some((s) => s.id === id && s.kind === 'text');
+// Re-tap-to-edit for text. The pointer-down records a text shape's id here only
+// when that shape was *already* selected before this gesture; a release with no
+// movement then re-opens its editor. Held at module scope (not in ToolState)
+// because the native tap gesture synthesizes pointer-down and pointer-up in a
+// single React tick — a ToolState set on down isn't visible to up, but this is.
+// Only one select gesture is ever in flight, so a shared cell is safe. A first
+// tap (shape not yet selected) leaves this null, so it only selects; the second
+// tap edits. Cleared on drag, release, and cancel.
+let pendingTextEditId = null;
 // Hit-test in doc-space. Crude but fast — good enough for v1; tools can
 // override via `hitTest` for more precision later.
 const hitStroke = (stroke, p) => {
@@ -303,6 +315,105 @@ const rectCornerPatch = (doc, id, corner, delta) => {
         ],
     };
 };
+// --- Geometric-shape corner resize (rect/ellipse/polygon). The shape twin of
+// the rectangle-annotation corner drag above: drag one bounding-box corner to
+// scale length and width about the opposite (fixed) corner. Shared by the
+// native UI-thread drag via DragSelectionConfig AND the web pointer handlers. ---
+// Doc-space floor on a resized shape's width/height. Keeps a corner drag from
+// collapsing a shape to a line (and from crossing the fixed corner, which would
+// mirror a triangle), so the scale stays positive on both axes. The native
+// shapeResizeScale worklet inlines the same value — keep them in sync.
+const MIN_SHAPE_EXTENT = 1;
+// Which shapes get the corner-scale handles: rect (two-corner geometry, scaled
+// exactly like the rectangle annotation), polygon/triangle (all points scaled
+// about the fixed corner) and ellipse. Lines/arrows resize via their endpoint
+// handles and text via its own font-size handle, so both are excluded here.
+const isCornerResizableShape = (s) => (s.kind === 'rect' || s.kind === 'ellipse' || s.kind === 'polygon') &&
+    s.geometry.points.length >= 2;
+// The shape's visual bounds expressed as the {a,b} rect the rectCornerPoint/
+// oppositeRectCorner helpers consume (so shapes reuse the exact corner math the
+// rectangle annotation already uses). Uses visualShapeBounds, so the corner
+// handles/hit-test sit on the same box the selection outline draws — for an
+// ellipse that's the circle's bounding square, not the raw drag rect.
+const shapeCornerRect = (s) => {
+    const vb = visualShapeBounds(s);
+    if (!vb)
+        return null;
+    return { a: { x: vb.minX, y: vb.minY }, b: { x: vb.maxX, y: vb.maxY } };
+};
+// Which bounding-box corner of a (selected) resizable shape is under `world`,
+// or null. Mirrors findRectCornerHit but reads the box from the shape's points.
+const findShapeCornerHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || !isCornerResizableShape(s))
+        return null;
+    const rect = shapeCornerRect(s);
+    if (!rect)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    let best = null;
+    for (const corner of ['tl', 'tr', 'bl', 'br']) {
+        const p = rectCornerPoint(rect, corner);
+        const d = (world.x - p.x) ** 2 + (world.y - p.y) ** 2;
+        if (d <= r2 && (!best || d < best.d))
+            best = { corner, d };
+    }
+    if (!best)
+        return null;
+    return {
+        corner: best.corner,
+        moving: rectCornerPoint(rect, best.corner),
+        fixed: rectCornerPoint(rect, oppositeRectCorner(best.corner)),
+    };
+};
+// Scale every geometry point about the fixed (opposite) corner so the grabbed
+// corner follows the drag. The moving corner is clamped so it can't cross or
+// collapse onto the fixed corner (min extent on each axis), keeping the scale
+// positive — no flip, no zero-size shape.
+//
+// rect/polygon scale length and width INDEPENDENTLY (a two-point rect's grabbed
+// corner tracks the finger; a polygon's whole outline scales). An ellipse
+// renders as a circle (radius = half its larger extent), so it scales
+// UNIFORMLY off the diagonal instead — otherwise a non-uniform drag would
+// preview as an oval and then snap back to a circle on commit.
+const shapeCornerPatch = (doc, id, corner, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s || !isCornerResizableShape(s))
+        return null;
+    const rect = shapeCornerRect(s);
+    if (!rect)
+        return null;
+    const fixed = rectCornerPoint(rect, oppositeRectCorner(corner));
+    const moving = rectCornerPoint(rect, corner);
+    const denomX = moving.x - fixed.x;
+    const denomY = moving.y - fixed.y;
+    // Clamp the dragged offset to the same side of the fixed corner, magnitude
+    // >= MIN_SHAPE_EXTENT, so the scale factor never flips sign or hits zero.
+    const clampOffset = (offset, sign) => sign >= 0
+        ? Math.max(MIN_SHAPE_EXTENT, offset)
+        : Math.min(-MIN_SHAPE_EXTENT, offset);
+    const offX = clampOffset(moving.x + delta.x - fixed.x, denomX >= 0 ? 1 : -1);
+    const offY = clampOffset(moving.y + delta.y - fixed.y, denomY >= 0 ? 1 : -1);
+    let sx = denomX !== 0 ? offX / denomX : 1;
+    let sy = denomY !== 0 ? offY / denomY : 1;
+    if (s.kind === 'ellipse') {
+        // Uniform: ratio of the new corner-distance to the old, so the circle
+        // grows/shrinks about the fixed corner without distorting.
+        const oldDiag = Math.hypot(denomX, denomY);
+        const s0 = oldDiag !== 0 ? Math.hypot(offX, offY) / oldDiag : 1;
+        sx = s0;
+        sy = s0;
+    }
+    const points = s.geometry.points.map((p) => ({
+        x: fixed.x + (p.x - fixed.x) * sx,
+        y: fixed.y + (p.y - fixed.y) * sy,
+    }));
+    return {
+        ops: [
+            { op: 'updateShape', id, patch: { geometry: { ...s.geometry, points } } },
+        ],
+    };
+};
 // --- Text-shape resize (corner-scale about the top-left anchor; shared by the
 // native UI-thread drag via DragSelectionConfig AND the web pointer handlers) ---
 // Resize geometry when the (selected) text shape's corner handle is under
@@ -355,6 +466,9 @@ const dragPatch = (s, doc, delta, zoom) => {
     if (s.mode === 'rect-corner' && s.corner) {
         return rectCornerPatch(doc, s.id, s.corner, delta);
     }
+    if (s.mode === 'shape-corner' && s.corner) {
+        return shapeCornerPatch(doc, s.id, s.corner, delta);
+    }
     const op = translatePatch(s.elementKind, s.id, doc, delta);
     return op ? { ops: [op] } : null;
 };
@@ -382,6 +496,8 @@ export const createSelectTool = () => ({
         buildResizePatch: resizePatch,
         hitTestRectCorner: findRectCornerHit,
         buildRectCornerPatch: rectCornerPatch,
+        hitTestShapeCorner: findShapeCornerHit,
+        buildShapeCornerPatch: shapeCornerPatch,
     },
     // Web pointer path. Mirrors the native UI-thread drag using the same shared
     // helpers: an endpoint handle on the selected annotation resizes the line;
@@ -389,6 +505,10 @@ export const createSelectTool = () => ({
     onPointerDown(event, ctx) {
         const { world } = event;
         const zoom = ctx.viewport.state.zoom;
+        // Reset the re-tap-to-edit latch; only a body grab of an already-selected
+        // text shape (below) re-arms it. Grabbing a handle or empty canvas leaves
+        // it cleared, so neither can leak an edit into the next release.
+        pendingTextEditId = null;
         // Endpoint/resize handles show only on the selected element — check first,
         // UNLESS the grab is on that element's tile: the tile is the move/slide
         // affordance and must win over a handle sitting under it, so a selected
@@ -432,6 +552,19 @@ export const createSelectTool = () => ({
                     delta: { x: 0, y: 0 },
                 };
             }
+            const shapeCorner = findShapeCornerHit(ctx.document, selId, world, zoom);
+            if (shapeCorner) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'shape-corner',
+                    corner: shapeCorner.corner,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
             const rectCorner = findRectCornerHit(ctx.document, selId, world, zoom);
             if (rectCorner) {
                 ctx.setSelection({ ids: [selId] });
@@ -451,6 +584,15 @@ export const createSelectTool = () => ({
             ctx.setSelection(null);
             return { kind: 'idle' };
         }
+        // Re-tapping an already-selected text shape (without dragging) opens its
+        // editor on release — see onPointerUp. `selId` is the selection from before
+        // this down, so a first tap only selects; the second tap edits.
+        pendingTextEditId =
+            hit.kind === 'shape' &&
+                hit.id === selId &&
+                isTextShape(ctx.document, hit.id)
+                ? hit.id
+                : null;
         ctx.setSelection({ ids: [hit.id] });
         const mode = hit.kind === 'measurement' &&
             classifyGrab(ctx.document, hit.id, world, zoom, ctx.tileViewportScale) ===
@@ -474,32 +616,39 @@ export const createSelectTool = () => ({
             x: event.world.x - s.start.x,
             y: event.world.y - s.start.y,
         };
+        // Any real movement turns this into a drag, not a re-tap — disarm the edit.
+        if (delta.x !== 0 || delta.y !== 0)
+            pendingTextEditId = null;
         const patch = dragPatch(s, ctx.document, delta, ctx.viewport.state.zoom);
         if (patch)
             ctx.preview(patch);
         return { ...s, delta };
     },
     onPointerUp(_event, ctx, state) {
+        const editId = pendingTextEditId;
+        pendingTextEditId = null;
         const s = state;
-        if (s?.kind !== 'dragging')
+        // A moved selection commits its drag and is never a tap-to-edit.
+        if (s?.kind === 'dragging' && (s.delta.x !== 0 || s.delta.y !== 0)) {
+            const patch = dragPatch(s, ctx.document, s.delta, ctx.viewport.state.zoom);
+            if (patch)
+                ctx.commit(patch);
             return;
-        if (s.delta.x === 0 && s.delta.y === 0)
-            return;
-        const patch = dragPatch(s, ctx.document, s.delta, ctx.viewport.state.zoom);
-        if (patch)
-            ctx.commit(patch);
+        }
+        // No movement: re-tapping an already-selected text shape re-opens its
+        // editor (the same edit flow as tapping it with the text tool, via the
+        // shared editTextShape). `editId` was latched on the down, so this survives
+        // the native tap's synchronous down+up where `state` cannot.
+        if (editId) {
+            const shape = ctx.document.shapes.find((sh) => sh.id === editId);
+            if (shape && shape.kind === 'text')
+                editTextShape(ctx, shape);
+        }
     },
     onCancel(_state, ctx) {
+        pendingTextEditId = null;
         ctx.preview({ ops: [] });
     },
-    // Long-pressing a placed text shape re-opens the editor (the same edit flow
-    // as tapping it with the text tool, via the shared editTextShape). A hold on
-    // any other element — or empty canvas — is ignored.
-    onLongPress(event, ctx) {
-        const shape = findTextShapeAt(ctx.document, event.world);
-        if (shape)
-            editTextShape(ctx, shape);
-    },
     hitTest(element, p) {
         if (element.kind === 'measurement')
             return hitPlacedMeasurement(element, p);

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

@@ -8,6 +8,7 @@ export interface ShapeToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     minDragPx?: number;
 }
@@ -18,6 +19,7 @@ export declare const buildShapeFromDrag: (opts: {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     layerId: string;
     id?: string;

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

@@ -24,10 +24,12 @@ export const buildShapeFromDrag = (opts) => ({
         strokeWidth: opts.width,
         ...(opts.dash && { dash: true }),
         // Caps only mean something on an open line; 'round' is the implicit
-        // default so it stays un-persisted.
+        // default so it stays un-persisted. Only 'arrow' matters for the start.
         ...(opts.kind === 'line' &&
             opts.cap &&
             opts.cap !== 'round' && { cap: opts.cap }),
+        ...(opts.kind === 'line' &&
+            opts.startCap === 'arrow' && { startCap: 'arrow' }),
     },
     createdAt: Date.now(),
 });
@@ -42,6 +44,7 @@ export const createShapeTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
     const cap = options.cap;
+    const startCap = options.startCap;
     const dash = options.dash ?? false;
     const minDragPx = options.minDragPx ?? 4;
     return {
@@ -49,7 +52,14 @@ export const createShapeTool = (options = {}) => {
         label: options.label ?? DEFAULT_LABELS[kind],
         cursor: 'crosshair',
         // Drives UI-thread rubber-banding on native (see ShapeDrawConfig).
-        shapeDraw: { kind, color, width, ...(cap && { cap }), dash },
+        shapeDraw: {
+            kind,
+            color,
+            width,
+            ...(cap && { cap }),
+            ...(startCap === 'arrow' && { startCap: 'arrow' }),
+            dash,
+        },
         onPointerDown(event, ctx) {
             return {
                 kind: 'shape-drawing',
@@ -60,6 +70,7 @@ export const createShapeTool = (options = {}) => {
                     color,
                     width,
                     cap,
+                    startCap,
                     dash,
                     layerId: firstLayerId(ctx.document),
                 }),

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

@@ -1,7 +1,7 @@
 import { hitTestTextShape } from '../textGeometry.js';
 // Topmost text shape under a world point (z-order, top first), or null. Shared
-// by the text tool (tap-to-edit) and the select tool (long-press-to-edit) so a
-// press resolves to the same element from either tool.
+// by the text tool (tap-to-edit) and the select tool (tap-a-selected-shape-to-
+// edit) so a press resolves to the same element from either tool.
 export const findTextShapeAt = (doc, world) => {
     for (let i = doc.shapes.length - 1; i >= 0; i--) {
         const s = doc.shapes[i];

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

@@ -16,6 +16,14 @@ export interface AnnotationCanvasHandle {
     }): void;
     setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
     associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
+    bindColumn(id: AnnotationElementId, binding: {
+        groupId: string;
+        columnId: string;
+    }): void;
+    placeColumnTileAtCenter(binding: {
+        groupId: string;
+        columnId: string;
+    }): AnnotationElementId;
     deleteSelected(): void;
 }
 export interface UseAnnotationCanvasStateProps {

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { createViewportApi, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
-import { viewportTileScale } from './stampLayout.js';
 // Platform-agnostic state machine for the annotation canvas. Web and native
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
@@ -22,11 +21,13 @@ export const useAnnotationCanvasState = (props) => {
         return map;
     }, [measurements]);
     const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
-    // How large the document renders when fit to this canvas, as a tile-footprint
-    // multiplier (zoom-independent). Keeps tiles a consistent fraction of the
-    // drawing on a phone vs a desktop pane. Used by the overlays (drawn size) and
-    // the tools (hit box) so both agree.
-    const tileViewportScale = useMemo(() => viewportTileScale(width, height, canvas.viewport.width, canvas.viewport.height), [width, height, canvas.viewport.width, canvas.viewport.height]);
+    // Tiles are sized independently of the canvas: their footprint is base ×
+    // per-tile scale × the document-wide `tileScaleFactor` ("Tile size" slider),
+    // never the canvas pixel size — so resizing the pane no longer rescales tiles.
+    // Retained as a (constant 1) value because the overlays (drawn size) and tools
+    // (hit box) thread it; keeping them in lockstep at 1 means both still agree.
+    // (See stampLayout.ts for why the old per-canvas multiplier was retired.)
+    const tileViewportScale = 1;
     const ctx = useMemo(() => ({
         document: canvas,
         selection,
@@ -317,6 +318,39 @@ export const useAnnotationCanvasState = (props) => {
                     ],
                 });
             },
+            bindColumn(id, binding) {
+                const c = ctxRef.current;
+                c.commit({
+                    ops: [
+                        {
+                            op: 'updateMeasurement',
+                            id,
+                            patch: { groupId: binding.groupId, columnId: binding.columnId },
+                        },
+                    ],
+                });
+            },
+            placeColumnTileAtCenter(binding) {
+                const c = ctxRef.current;
+                const anchor = c.viewport.screenToWorld({
+                    x: width / 2,
+                    y: height / 2,
+                });
+                const placed = {
+                    id: `measurement-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e9).toString(36)}`,
+                    layerId: c.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    groupId: binding.groupId,
+                    columnId: binding.columnId,
+                    anchor,
+                    showLabel: true,
+                    showValue: true,
+                    createdAt: Date.now(),
+                };
+                c.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                // Select it so the consumer can immediately move it / open its editor.
+                c.setSelection({ ids: [placed.id] });
+                return placed.id;
+            },
             deleteSelected() {
                 const c = ctxRef.current;
                 const ids = c.selection?.ids;

package/dist/types/annotation.d.ts

@@ -13,6 +13,7 @@ export interface AnnotationStroke {
     color: string;
     width: number;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
     dash?: boolean;
     points: number[];
     pressure?: number[];
@@ -29,6 +30,7 @@ export interface AnnotationShapeStyle {
     dash?: boolean;
     textDecoration?: AnnotationTextDecoration;
     cap?: StrokeCap;
+    startCap?: StrokeCap;
 }
 export interface AnnotationShape {
     id: AnnotationElementId;
@@ -50,6 +52,7 @@ export interface PlacedMeasurementRef {
     measurementPath?: string;
     measurementId?: string;
     groupId?: string;
+    columnId?: string;
     anchor: Vec2;
     placement?: MeasurementPlacement;
     line?: {
@@ -64,6 +67,7 @@ export interface PlacedMeasurementRef {
     lineColor?: string;
     lineWidth?: number;
     lineCap?: StrokeCap;
+    lineStartCap?: StrokeCap;
     lineDash?: boolean;
     leader?: {
         from: Vec2;

package/dist/types/annotation.js

@@ -12,8 +12,14 @@ export const createEmptyCanvasState = (viewport) => ({
     viewport: {
         width: viewport?.width ?? 1000,
         height: viewport?.height ?? 1000,
-        backgroundImage: viewport?.backgroundImage,
-        backgroundFit: viewport?.backgroundFit,
+        // Only include the optional keys when defined — emitting explicit
+        // `undefined` values breaks Firestore writes (RN rejects undefined fields).
+        ...(viewport?.backgroundImage !== undefined
+            ? { backgroundImage: viewport.backgroundImage }
+            : {}),
+        ...(viewport?.backgroundFit !== undefined
+            ? { backgroundFit: viewport.backgroundFit }
+            : {}),
     },
     strokes: [],
     shapes: [],

package/package.json

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