@reekon-tools/boldr-utils 1.6.23 → 1.6.25

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

@@ -1,6 +1,6 @@
 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 } from './textEditing.js';
 const HIT_PADDING = 6;
@@ -315,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
@@ -367,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;
 };
@@ -394,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;
@@ -448,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] });

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/useAnnotationCanvasState.js

@@ -1,7 +1,23 @@
 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 { createViewportApi, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
+// The viewport that frames the document's content on screen. When a background
+// image is present we fit its rendered rect (so the whole image shows, filling
+// the viewport regardless of its pixel resolution — never the native-resolution
+// top-left crop a 1:1 viewport gives a high-res image); otherwise we fit the
+// document rect. Shared by the load-time auto-fit and the zoomToFit/resetView
+// handle methods so they stay in lockstep.
+const computeContentFit = (canvas, width, height) => {
+    if (!(width > 0) || !(height > 0))
+        return DEFAULT_VIEWPORT;
+    const { viewport } = canvas;
+    const bg = viewport.backgroundImage;
+    const rect = bg
+        ? imageDocRect(bg.widthPx, bg.heightPx, viewport.width, viewport.height, viewport.backgroundFit ?? 'contain')
+        : { x: 0, y: 0, width: viewport.width, height: viewport.height };
+    return fitRectToScreen(rect, width, height);
+};
 // 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).
@@ -21,6 +37,25 @@ export const useAnnotationCanvasState = (props) => {
         return map;
     }, [measurements]);
     const viewportApi = useMemo(() => createViewportApi(viewport), [viewport]);
+    // Frame the document the first time it carries a background image. The doc
+    // hydrates asynchronously (it opens empty, then the persisted canvas — with
+    // its background — arrives), and a high-res image at the 1:1 default viewport
+    // would otherwise show only its top-left corner. We fit it to the screen
+    // exactly once per mount; the user's own pan/zoom afterwards is preserved.
+    // (Adding a background mid-session also fits it, so you see the whole image
+    // you just dropped in.) Canvases that never gain a background keep the 1:1
+    // default — for a screen-sized document that already frames it correctly.
+    const didInitialFitRef = useRef(false);
+    useEffect(() => {
+        if (didInitialFitRef.current)
+            return;
+        if (!canvas.viewport.backgroundImage)
+            return;
+        if (!(width > 0) || !(height > 0))
+            return;
+        didInitialFitRef.current = true;
+        setViewport(computeContentFit(canvas, width, height));
+    }, [canvas, width, 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.
@@ -174,17 +209,13 @@ export const useAnnotationCanvasState = (props) => {
                 return redoStackRef.current.length > 0;
             },
             zoomToFit() {
-                setViewport(() => {
-                    const docW = canvas.viewport.width;
-                    const docH = canvas.viewport.height;
-                    const z = Math.min(width / docW, height / docH);
-                    const offsetX = (width - docW * z) / 2;
-                    const offsetY = (height - docH * z) / 2;
-                    return { zoom: z, pan: { x: -offsetX / z, y: -offsetY / z } };
-                });
+                setViewport(computeContentFit(canvas, width, height));
             },
             resetView() {
-                setViewport(DEFAULT_VIEWPORT);
+                // "Reset view" frames the whole document/image again — the same fit the
+                // canvas opens with — rather than snapping to a 1:1 top-left view, which
+                // for a high-res background is the very crop this is meant to escape.
+                setViewport(computeContentFit(canvas, width, height));
             },
             placeMeasurementAtCenter(ref) {
                 const c = ctxRef.current;

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

@@ -1,4 +1,4 @@
-import type { Vec2 } from '../../types/annotation.js';
+import type { BackgroundFit, Vec2 } from '../../types/annotation.js';
 export interface ViewportState {
     zoom: number;
     pan: Vec2;
@@ -12,5 +12,17 @@ export interface ViewportApi {
 export declare const createViewportApi: (state: ViewportState) => ViewportApi;
 export declare const DEFAULT_VIEWPORT: ViewportState;
 export declare const fitToScreen: (docWidth: number, docHeight: number, screenWidth: number, screenHeight: number, padding?: number) => ViewportState;
+export declare const imageDocRect: (imgW: number, imgH: number, docW: number, docH: number, fit?: BackgroundFit) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare const fitRectToScreen: (rect: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}, screenWidth: number, screenHeight: number, padding?: number) => ViewportState;
 export declare const zoomAt: (state: ViewportState, focalScreen: Vec2, nextZoom: number) => ViewportState;
 export declare const panBy: (state: ViewportState, deltaScreen: Vec2) => ViewportState;

package/dist/annotation/canvas/viewport.js

@@ -29,6 +29,38 @@ export const fitToScreen = (docWidth, docHeight, screenWidth, screenHeight, padd
         pan: { x: -offsetX / zoom, y: -offsetY / zoom },
     };
 };
+// The doc-space rectangle a background image occupies, given the image's
+// intrinsic pixel size, the document dimensions, and the fit mode. This mirrors
+// the math in BackgroundImageElement (which renders the image into this rect),
+// so "fit the image to the screen" lines up exactly with what is drawn.
+export const imageDocRect = (imgW, imgH, docW, docH, fit = 'contain') => {
+    // Unknown/zero image dimensions (or an explicit stretch) fill the doc — the
+    // same guard BackgroundImageElement uses to avoid NaN geometry.
+    if (!(imgW > 0) || !(imgH > 0) || fit === 'stretch') {
+        return { x: 0, y: 0, width: docW, height: docH };
+    }
+    const scale = fit === 'cover'
+        ? Math.max(docW / imgW, docH / imgH)
+        : Math.min(docW / imgW, docH / imgH);
+    const w = imgW * scale;
+    const h = imgH * scale;
+    return { x: (docW - w) / 2, y: (docH - h) / 2, width: w, height: h };
+};
+// Fit a doc-space rectangle into the screen: the largest zoom that keeps the
+// whole rect visible, centered, with optional screen-space padding.
+export const fitRectToScreen = (rect, screenWidth, screenHeight, padding = 0) => {
+    const availableW = Math.max(1, screenWidth - padding * 2);
+    const availableH = Math.max(1, screenHeight - padding * 2);
+    const zoom = Math.min(availableW / Math.max(1, rect.width), availableH / Math.max(1, rect.height));
+    const renderedW = rect.width * zoom;
+    const renderedH = rect.height * zoom;
+    const offsetX = (screenWidth - renderedW) / 2;
+    const offsetY = (screenHeight - renderedH) / 2;
+    return {
+        zoom,
+        pan: { x: rect.x - offsetX / zoom, y: rect.y - offsetY / zoom },
+    };
+};
 // Zoom toward a focal screen point so the world point under the cursor stays
 // fixed. Used for wheel-zoom on web and pinch on native.
 export const zoomAt = (state, focalScreen, nextZoom) => {

package/dist/exports.d.ts

@@ -22,7 +22,7 @@ export type { CanvasPointerEvent, RequestTextInput, ShapeDrawConfig, Tool, ToolC
 export type { MeasurementRef, PickMeasurement, } from './annotation/canvas/measurementPicker.js';
 export type { MeasurementStampRenderArgs, RenderMeasurementStamp, } from './annotation/canvas/measurementStampOverlay.js';
 export { STAMP_TILE_SIZE, STAMP_INPUT_TILE_SIZE, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, stampTileSize, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
-export { createViewportApi, fitToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, type ViewportApi, type ViewportState, } from './annotation/canvas/viewport.js';
+export { createViewportApi, fitToScreen, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, type ViewportApi, type ViewportState, } from './annotation/canvas/viewport.js';
 export { createPenTool, type PenToolOptions, } from './annotation/canvas/tools/penTool.js';
 export { createSelectTool } from './annotation/canvas/tools/selectTool.js';
 export { createMeasurementStampTool, type MeasurementStampToolOptions, } from './annotation/canvas/tools/measurementStampTool.js';

package/dist/exports.js

@@ -22,7 +22,7 @@ export { useAnnotationCanvasDoc, } from './annotation/data/hooks/useAnnotationCa
 export { hydrateCanvasState } from './annotation/data/canvasPersistence.js';
 export { InMemoryAnnotationProvider } from './annotation/data/InMemoryAnnotationProvider.js';
 export { STAMP_TILE_SIZE, STAMP_INPUT_TILE_SIZE, DEFAULT_TILE_SCALE, TILE_SCALE_MIN, TILE_SCALE_MAX, clampTileScale, stampTileSize, isUnassociatedStamp, } from './annotation/canvas/stampLayout.js';
-export { createViewportApi, fitToScreen, panBy, zoomAt, DEFAULT_VIEWPORT, } from './annotation/canvas/viewport.js';
+export { createViewportApi, fitToScreen, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './annotation/canvas/viewport.js';
 export { createPenTool, } from './annotation/canvas/tools/penTool.js';
 export { createSelectTool } from './annotation/canvas/tools/selectTool.js';
 export { createMeasurementStampTool, } from './annotation/canvas/tools/measurementStampTool.js';

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;
@@ -65,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.23",
+  "version": "1.6.25",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",