@reekon-tools/boldr-utils 1.7.0 → 1.7.1

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

@@ -58,12 +58,20 @@ const LOUPE_CROSSHAIR_ARM = 9; // half-length of each crosshair arm, points
 export const AnnotationCanvasInner = (props) => {
     const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, width, height, style, magnifierTopOffset = 0, } = props;
     const valueFont = useFont(stampFontSource, stampValueFontSize);
+    // The animated-viewport implementation needs the Reanimated shared values,
+    // which are created below AFTER the state hook — so the hook gets a stable
+    // trampoline into a ref the implementation fills in each render.
+    const animateViewportImplRef = useRef(null);
+    const animateViewport = useCallback((target, durationMs) => {
+        animateViewportImplRef.current?.(target, durationMs);
+    }, []);
     // This is the native (mobile) renderer, so the canvas reads mobile's
     // tile-scale knob (web and mobile persist separate values — see
     // resolveTileScaleFactor).
     const state = useAnnotationCanvasState({
         ...props,
         tileScalePlatform: 'mobile',
+        animateViewport,
     });
     // Decode the background image ONCE here and share it with both the main
     // canvas and the magnifier loupe. If each canvas loaded its own, the loupe
@@ -620,17 +628,73 @@ export const AnnotationCanvasInner = (props) => {
     // effect so an in-flight gesture's shared values are never clobbered by a
     // late-flushing setViewport from a previous gesture.
     const activeViewportGestures = useRef(0);
+    // >0 while an animated viewport transition (fitContentToRect) is in
+    // flight. Guards the JS→UI sync effect the same way the gesture counter
+    // does: mid-glide re-renders must not snap the shared values back to the
+    // (still-old) JS snapshot.
+    const viewportAnimations = useRef(0);
     // Push JS-originated viewport changes (initial mount, zoomToFit, resetView)
     // onto the UI thread. Gesture-driven changes already live in the shared
     // values, so during a gesture this is skipped; the post-gesture re-sync
-    // writes back identical values (no visual jump).
+    // writes back identical values (no visual jump). Ditto animated transitions.
     useEffect(() => {
         if (activeViewportGestures.current > 0)
             return;
+        if (viewportAnimations.current > 0)
+            return;
         zoom.value = state.viewport.zoom;
         panX.value = state.viewport.pan.x;
         panY.value = state.viewport.pan.y;
     }, [state.viewport, zoom, panX, panY]);
+    // Animated viewport transitions (fitContentToRect with `animated`): a JS
+    // rAF driver eases the same shared values gestures write — DIRECT writes,
+    // three per frame, no React involvement until the single end-of-motion
+    // commit. Direct `.value =` writes are the proven repaint channel for the
+    // Skia consumers (it's exactly how gestures render); driving these values
+    // through reanimated's animation path (withTiming) completed without ever
+    // repainting on device, so it is deliberately not used here. Mid-flight
+    // re-renders can't stomp the drive (the sync effect above is guarded), and
+    // a viewport gesture starting mid-flight ends the drive on its next frame
+    // — before it writes — and owns the viewport from there. A new drive takes
+    // over from the live values, so interrupted transitions resume from where
+    // they actually are.
+    const viewportDriveRef = useRef(null);
+    const cancelViewportDrive = useCallback(() => {
+        if (viewportDriveRef.current != null) {
+            cancelAnimationFrame(viewportDriveRef.current);
+            viewportDriveRef.current = null;
+            viewportAnimations.current = 0;
+        }
+    }, []);
+    useEffect(() => cancelViewportDrive, [cancelViewportDrive]);
+    animateViewportImplRef.current = (target, durationMs) => {
+        cancelViewportDrive();
+        const from = { zoom: zoom.value, panX: panX.value, panY: panY.value };
+        const start = Date.now();
+        const easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - (2 - 2 * t) ** 3 / 2;
+        viewportAnimations.current = 1;
+        const step = () => {
+            if (activeViewportGestures.current > 0) {
+                viewportDriveRef.current = null;
+                viewportAnimations.current = 0;
+                return;
+            }
+            const t = Math.min(1, (Date.now() - start) / durationMs);
+            const eased = easeInOutCubic(t);
+            zoom.value = from.zoom + (target.zoom - from.zoom) * eased;
+            panX.value = from.panX + (target.pan.x - from.panX) * eased;
+            panY.value = from.panY + (target.pan.y - from.panY) * eased;
+            if (t < 1) {
+                viewportDriveRef.current = requestAnimationFrame(step);
+            }
+            else {
+                viewportDriveRef.current = null;
+                viewportAnimations.current = 0;
+                stateRef.current.setViewport(target);
+            }
+        };
+        viewportDriveRef.current = requestAnimationFrame(step);
+    };
     const gesture = useMemo(() => {
         const buildEvent = (pointerId, screen) => ({
             pointerId,
@@ -1427,7 +1491,12 @@ export const AnnotationCanvasInner = (props) => {
     // magnification lives in loupeTransform, applied to `content`).
     const loupeClip = rrect(rect(loupeX, loupeY, loupeSize, loupeSize), LOUPE_RADIUS, LOUPE_RADIUS);
     const loupeWrap = (content) => (_jsxs(_Fragment, { children: [_jsxs(Group, { clip: loupeClip, children: [_jsx(Rect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, color: LOUPE_BG_COLOR }), content] }), _jsx(RoundedRect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, r: LOUPE_RADIUS, color: LOUPE_BORDER_COLOR, style: "stroke", strokeWidth: LOUPE_BORDER_WIDTH }), _jsx(Line, { p1: { x: loupeCx - LOUPE_CROSSHAIR_ARM, y: loupeCy }, p2: { x: loupeCx + LOUPE_CROSSHAIR_ARM, y: loupeCy }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 }), _jsx(Line, { p1: { x: loupeCx, y: loupeCy - LOUPE_CROSSHAIR_ARM }, p2: { x: loupeCx, y: loupeCy + LOUPE_CROSSHAIR_ARM }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 })] }));
-    return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
+    return (
+    // overflow hidden mirrors the web container: the Skia surface clips its
+    // drawing to the canvas box by construction, but the stamp overlay is
+    // plain RN views — without clipping, tiles panned past the edge of a
+    // non-fullscreen canvas (e.g. a diagram strip) escape into surrounding UI.
+    _jsxs(GestureHandlerRootView, { style: [{ width, height, overflow: 'hidden' }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), 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)
                         : (resolveStampMeasurement?.(placed) ?? 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.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: onMeasurementStampRemove
                         ? () => {

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

@@ -18,10 +18,15 @@ const useBackgroundUrl = (image, resolveUrl) => {
         let cancelled = false;
         const resolve = resolveUrlRef.current;
         if (resolve) {
-            resolve(image.storagePath).then((next) => {
+            // A rejecting resolver (e.g. offline URL resolution) must never become
+            // an unhandled rejection here — keep the current url; the consumer's
+            // own retries/invalidations drive the re-resolve.
+            resolve(image.storagePath)
+                .then((next) => {
                 if (!cancelled)
                     setUrl(next);
-            });
+            })
+                .catch(() => { });
         }
         else {
             setUrl(image.downloadUrl);

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

@@ -3,6 +3,12 @@ import { type AnnotationCanvasState, type AnnotationDocumentPatch, type Annotati
 import type { MeasurementRef } from './measurementPicker.js';
 import type { CanvasPointerEvent, RequestTextInput, Tool, ToolContext, ToolState } from './Tool.js';
 import { type ViewportState } from './viewport.js';
+export interface CanvasScreenRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
 export interface AnnotationCanvasHandle {
     undo(): void;
     redo(): void;
@@ -10,6 +16,10 @@ export interface AnnotationCanvasHandle {
     canRedo(): boolean;
     zoomToFit(): void;
     resetView(): void;
+    fitContentToRect(rect: CanvasScreenRect, opts?: {
+        animated?: boolean;
+        durationMs?: number;
+    }): void;
     getTileScaleFactor(): number;
     getTileDocSize(factor: number): number;
     ensureMeasurementVisible(id: AnnotationElementId): void;
@@ -49,6 +59,7 @@ export interface UseAnnotationCanvasStateProps {
     height: number;
     initialViewport?: ViewportState;
     tileScalePlatform?: TileScalePlatform;
+    animateViewport?: (target: ViewportState, durationMs: number) => void;
     imperativeRef?: {
         current: AnnotationCanvasHandle | null;
     };

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -3,22 +3,66 @@ import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotati
 import { resolveTileScaleFactor, stampTileDims, STAMP_TILE_SIZE, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
 import { createViewportApi, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { buildRemoveMeasurementOps, 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))
+// The viewport that frames the document's content inside a screen rect of the
+// canvas box. When a background image is present we fit its rendered rect (so
+// the whole image shows, filling the rect 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. Placed tiles count as content
+// too: authors routinely drop them AROUND the image (dimension labels sit
+// outside the object they measure), and a fit framed on the image alone opens
+// with those tiles off-screen — so the rect is widened to the union of the
+// base rect and every placed tile's doc geometry. Tiles are screen-constant
+// boxes centered on that geometry, so when the union extends past the base
+// rect their half-extent is reserved as screen-space padding; a canvas whose
+// tiles all sit inside the image keeps the exact image fit it had before.
+// Shared by the load-time auto-fit and the zoomToFit/resetView/
+// fitContentToRect handle methods so they stay in lockstep.
+const computeContentFitRect = (canvas, rect) => {
+    if (!(rect.width > 0) || !(rect.height > 0))
         return DEFAULT_VIEWPORT;
     const { viewport } = canvas;
     const bg = viewport.backgroundImage;
-    const rect = bg
+    const baseRect = 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);
+    let minX = baseRect.x;
+    let minY = baseRect.y;
+    let maxX = baseRect.x + baseRect.width;
+    let maxY = baseRect.y + baseRect.height;
+    const extend = (p) => {
+        minX = Math.min(minX, p.x);
+        minY = Math.min(minY, p.y);
+        maxX = Math.max(maxX, p.x);
+        maxY = Math.max(maxY, p.y);
+    };
+    for (const placed of canvas.placedMeasurements) {
+        extend(placed.anchor);
+        if (placed.line) {
+            extend(placed.line.a);
+            extend(placed.line.b);
+        }
+        if (placed.rect) {
+            extend(placed.rect.a);
+            extend(placed.rect.b);
+        }
+    }
+    const extended = minX < baseRect.x ||
+        minY < baseRect.y ||
+        maxX > baseRect.x + baseRect.width ||
+        maxY > baseRect.y + baseRect.height;
+    const fit = fitRectToScreen({ x: minX, y: minY, width: maxX - minX, height: maxY - minY }, rect.width, rect.height, extended ? STAMP_TILE_SIZE / 2 : 0);
+    // fitRectToScreen frames within a box anchored at the origin; shift the
+    // window so the framed content lands in the sub-rect instead
+    // (screen = (world − pan) · zoom, so a +x screen offset is −x/zoom of pan).
+    return {
+        zoom: fit.zoom,
+        pan: {
+            x: fit.pan.x - rect.x / fit.zoom,
+            y: fit.pan.y - rect.y / fit.zoom,
+        },
+    };
 };
+const computeContentFit = (canvas, width, height) => computeContentFitRect(canvas, { x: 0, y: 0, width, height });
 // Default leader length (doc units) for a placed measurement when no explicit
 // length is given. A generous fraction of the document width, clamped, so the
 // leader — and its draggable endcaps — stay clear of the fixed-size value tile
@@ -31,7 +75,7 @@ const defaultLeaderLenDoc = (docWidth) => Math.min(800, Math.max(240, docWidth *
 // inners share this hook; each wraps it with platform-specific event
 // capture and JSX (div + DOM events vs. GestureDetector + RN Views).
 export const useAnnotationCanvasState = (props) => {
-    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, tileScalePlatform, imperativeRef, } = props;
+    const { canvas, onCommit, tools, activeToolId, selection, onSelectionChange, measurements, pickMeasurement, requestTextInput, width, height, initialViewport, tileScalePlatform, animateViewport, imperativeRef, } = props;
     const [viewport, setViewport] = useState(initialViewport ?? DEFAULT_VIEWPORT);
     const [toolState, setToolState] = useState(undefined);
     const [previewPatch, setPreviewPatch] = useState(null);
@@ -321,6 +365,17 @@ export const useAnnotationCanvasState = (props) => {
                 // for a high-res background is the very crop this is meant to escape.
                 setViewport(computeContentFit(canvas, width, height));
             },
+            fitContentToRect(rect, opts) {
+                if (!(rect.width > 0) || !(rect.height > 0))
+                    return;
+                const target = computeContentFitRect(canvas, rect);
+                if (opts?.animated && animateViewport) {
+                    animateViewport(target, opts.durationMs ?? 300);
+                }
+                else {
+                    setViewport(target);
+                }
+            },
             getTileScaleFactor() {
                 return ctxRef.current.tileScaleFactor;
             },

package/dist/calculator/index.d.ts

@@ -2,4 +2,5 @@ export * from './schema.js';
 export * from './units.js';
 export * from './evaluate.js';
 export * from './solve.js';
+export * from './instance.js';
 export { calculatorDefinitionSchema, expressionSymbols, validateCalculatorDefinition, type IssueSeverity, type ValidationIssue, type ValidationResult, } from './validate.js';

package/dist/calculator/index.js

@@ -6,4 +6,5 @@ export * from './schema.js';
 export * from './units.js';
 export * from './evaluate.js';
 export * from './solve.js';
+export * from './instance.js';
 export { calculatorDefinitionSchema, expressionSymbols, validateCalculatorDefinition, } from './validate.js';

package/dist/calculator/instance.d.ts

@@ -0,0 +1,36 @@
+import type { AnnotationCanvasState } from '../types/annotation.js';
+import type { CalculatorDefinition } from './schema.js';
+import type { CalculatorUnit } from './units.js';
+export type CalculatorEntrySource = 'user' | 'tool';
+export interface CalculatorEntryAttribution {
+    deviceId: string;
+    deviceName: string | null;
+    userName: string | null;
+    /** Epoch ms. */
+    at: number;
+}
+export interface CalculatorFieldEntry {
+    value: number | string | string[];
+    source: CalculatorEntrySource;
+    attribution: CalculatorEntryAttribution | null;
+    /** Pinned: edits, clears, and tape readings are refused until unlocked. */
+    locked: boolean;
+    /** Epoch ms. */
+    enteredAt: number;
+}
+export interface CalculatorInstanceFileData {
+    /** Source doc id in the top-level `calculators` collection. */
+    calculatorId: string;
+    /** definition.version at save time. */
+    sourceVersion: number;
+    definition: CalculatorDefinition;
+    entries: Record<string, CalculatorFieldEntry>;
+    /** Session display-unit choices, keyed by field id. */
+    displayUnitOverrides?: Record<string, CalculatorUnit>;
+    /**
+     * Embedded copy of the source diagram canvas. Its background image is
+     * re-uploaded under the instance file's own Storage path (and
+     * viewport.backgroundImage.storagePath repointed) at save time.
+     */
+    canvas?: AnnotationCanvasState;
+}

package/dist/calculator/instance.js

@@ -0,0 +1 @@
+export {};

package/package.json

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