@reekon-tools/boldr-utils 1.17.2 → 1.17.4

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Group, Line, Rect, RoundedRect, Skia, rect, rrect, useFont, } from '@shopify/react-native-skia';
+import { Group, Path, Rect, RoundedRect, Skia, rect, rrect, useFont, } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
@@ -44,8 +44,14 @@ const LOUPE_RADIUS = 16; // lens corner radius
 const LOUPE_BORDER_WIDTH = 2;
 const LOUPE_BORDER_COLOR = '#1F2937';
 const LOUPE_BG_COLOR = '#FFFFFF';
-const LOUPE_CROSSHAIR_COLOR = '#1F293799'; // ~60% dark — marks the exact point
-const LOUPE_CROSSHAIR_ARM = 9; // half-length of each crosshair arm, points
+// Black crosshair marking the dragged plane handle INSIDE the lens (replacing
+// the disc, which covered the exact pixel being placed). Sizes are screen
+// points inside the lens. The old fixed center crosshair was removed: the
+// lens center is the FINGER, which sits off the handle by the grab offset,
+// so it marked the wrong point.
+const LOUPE_CROSS_COLOR = '#000000';
+const LOUPE_CROSS_ARM_PX = 9; // half-length of each arm
+const LOUPE_CROSS_WIDTH_PX = 1.5;
 // Native fingerprint: one finger drives the active tool, two fingers
 // pan/zoom the viewport. Tap counts as a brief pointer down+up so tools
 // like measurement-stamp (which only listen to onPointerUp) work via tap.
@@ -478,6 +484,17 @@ export const AnnotationCanvasInner = (props) => {
         'worklet';
         return HANDLE_RING_PX / zoom.value;
     });
+    // Loupe variants: divided by the loupe's extra magnification too, so handles
+    // stay screen-constant INSIDE the lens as well — chrome shouldn't magnify
+    // with the content, and at 2× it covers the very point being placed.
+    const loupeHandleRadius = useDerivedValue(() => {
+        'worklet';
+        return HANDLE_RADIUS_PX / zoom.value / LOUPE_MAGNIFICATION;
+    });
+    const loupeHandleRingWidth = useDerivedValue(() => {
+        'worklet';
+        return HANDLE_RING_PX / zoom.value / LOUPE_MAGNIFICATION;
+    });
     // ---- Plane-calibration handle drag (UI thread; Tool.planeEdit) ----------
     // The plane tool's JS preview path re-rendered the whole canvas (and
     // recomputed the photo-spanning grid) per pointer-move, dropping JS frames
@@ -513,6 +530,29 @@ export const AnnotationCanvasInner = (props) => {
             y: planeDragStartY.value + planeDragTY.value / zoom.value,
         };
     });
+    // Black crosshair marking the dragged handle inside the lens, replacing its
+    // disc there (the loupe render passes planeDragHandleHidden). Built in
+    // SCREEN space and drawn as lens chrome inside the clip (see loupeWrap), so
+    // its size is fixed pixels: project the handle through the same math as
+    // loupeTransform — lensCenter + MAG · (screen(handle) − finger). That
+    // offset from center is the grab offset the drag preserves, which is why a
+    // fixed center mark sat visibly OFF the point and was removed.
+    const loupeCrossPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        if (planeDragMode.value !== 1)
+            return path;
+        const p = planeDragHandle.value;
+        const sx = (p.x - panX.value) * zoom.value;
+        const sy = (p.y - panY.value) * zoom.value;
+        const x = loupeCx + LOUPE_MAGNIFICATION * (sx - magTouchX.value);
+        const y = loupeCy + LOUPE_MAGNIFICATION * (sy - magTouchY.value);
+        path.moveTo(x - LOUPE_CROSS_ARM_PX, y);
+        path.lineTo(x + LOUPE_CROSS_ARM_PX, y);
+        path.moveTo(x, y - LOUPE_CROSS_ARM_PX);
+        path.lineTo(x, y + LOUPE_CROSS_ARM_PX);
+        return path;
+    }, [loupeCx, loupeCy]);
     // WORKLET TWIN of PlaneElement's outline path (quad ring / reference line;
     // the scale ticks are skipped live and reappear on commit). The committed
     // plane + dragged index are captured from React state — setPlaneDrag
@@ -1913,7 +1953,7 @@ export const AnnotationCanvasInner = (props) => {
     // point under the finger. Drawn in the overlay canvas's screen space (the
     // 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 })] }));
+    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(Path, { path: loupeCrossPath, color: LOUPE_CROSS_COLOR, style: "stroke", strokeWidth: LOUPE_CROSS_WIDTH_PX })] }), _jsx(RoundedRect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, r: LOUPE_RADIUS, color: LOUPE_BORDER_COLOR, style: "stroke", strokeWidth: LOUPE_BORDER_WIDTH })] }));
     return (
     // overflow hidden mirrors the web container: the Skia surface clips its
     // drawing to the canvas box by construction, but the stamp overlay is
@@ -1935,6 +1975,16 @@ export const AnnotationCanvasInner = (props) => {
                     ...skiaProps,
                     worldTransform: loupeTransform,
                     wrapContent: loupeWrap,
+                    // Chrome stays screen-constant inside the lens: handles at their
+                    // normal pixel size, the plane outline at its normal apparent
+                    // thickness — only the CONTENT magnifies. At 2× the fat
+                    // calibration chrome covered the exact point being placed.
+                    handleRadius: loupeHandleRadius,
+                    handleRingWidth: loupeHandleRingWidth,
+                    planeOutlineScale: 1 / LOUPE_MAGNIFICATION,
+                    // The dragged handle renders as the black crosshair drawn in the
+                    // lens chrome (loupeCrossPath) instead of its disc.
+                    planeDragHandleHidden: true,
                 }) }))] }));
 };
 const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, planeEdgeDragging, planeTileCtx, planeDragTX, planeDragTY, renderMeasurementStamp, tileScaleFactor, headerTileScaleFactor, fileTileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {

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

@@ -98,9 +98,11 @@ export interface AnnotationCanvasSkiaProps {
         value: SkPath;
     };
     planeDragHandle?: AnimatedPoint;
+    planeOutlineScale?: number;
+    planeDragHandleHidden?: boolean;
     customPreview?: ReactNode;
     wrapContent?: (content: ReactNode) => ReactNode;
     canvasRef?: RefObject<CanvasRef | null>;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, planeOutlineScale, planeDragHandleHidden, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -80,7 +80,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, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, customPreview, wrapContent, canvasRef, }) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, valueFont, textFontMgr, penDrawingStroke, livePreview, shapePreview, draggingId, dragTransform, resizingId, resizeTransform, selectedId, endpointDragId, shapeEndpointDragId, liveLineP1, liveLineP2, rectDragId, liveRect, shapeResizeId, shapeResizePath, shapeResizeBox, handleRadius, handleRingWidth, showPlaneHandles, planeDragId, planeDragIndex, planeDragPath, planeDragGridPath, planeDragHandle, planeOutlineScale = 1, planeDragHandleHidden, customPreview, wrapContent, canvasRef, }) => {
     // Doc rect a SCALE-mode plane grid covers: the first background layer (the
     // photo being calibrated), else the document rect. Pinned to layer 0 like
     // the tile-sizing reference — adding a second image must not re-span the
@@ -99,10 +99,12 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                     const statics = plane.mode === 'perspective'
                         ? plane.corners
                         : [plane.refLine.a, plane.refLine.b];
-                    return (_jsxs(Group, { children: [planeDragGridPath && (_jsx(Path, { path: planeDragGridPath, color: PLANE_GRID_COLOR, style: "stroke", strokeWidth: PLANE_GRID_WIDTH, opacity: PLANE_GRID_OPACITY })), _jsx(Path, { path: planeDragPath, color: PLANE_CHROME_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH, strokeJoin: "round" }), handleRadius != null &&
-                                statics.map((p, i) => i === planeDragIndex ? null : (_jsxs(Group, { children: [_jsx(Circle, { c: p, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: p, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }, i))), handleRadius != null && planeDragHandle && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: planeDragHandle, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: planeDragHandle, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }))] }, plane.id));
+                    return (_jsxs(Group, { children: [planeDragGridPath && (_jsx(Path, { path: planeDragGridPath, color: PLANE_GRID_COLOR, style: "stroke", strokeWidth: PLANE_GRID_WIDTH, opacity: PLANE_GRID_OPACITY })), _jsx(Path, { path: planeDragPath, color: PLANE_CHROME_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH * planeOutlineScale, strokeJoin: "round" }), handleRadius != null &&
+                                statics.map((p, i) => i === planeDragIndex ? null : (_jsxs(Group, { children: [_jsx(Circle, { c: p, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: p, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }, i))), handleRadius != null &&
+                                planeDragHandle &&
+                                !planeDragHandleHidden && (_jsxs(_Fragment, { children: [_jsx(Circle, { c: planeDragHandle, r: handleRadius, color: PLANE_CHROME_COLOR }), _jsx(Circle, { c: planeDragHandle, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }))] }, plane.id));
                 }
-                return (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, plane.id));
+                return (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined, outlineScale: planeOutlineScale }, plane.id));
             }), 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

package/dist/annotation/canvas/elements/PlaneElement.d.ts

@@ -18,6 +18,7 @@ export interface PlaneElementProps {
     showHandles: boolean;
     handleRadius?: AnimatedNumber;
     handleRingWidth?: AnimatedNumber;
+    outlineScale?: number;
 }
-export declare const PlaneElement: import("react").MemoExoticComponent<({ plane, scaleBounds, showHandles, handleRadius, handleRingWidth, }: PlaneElementProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const PlaneElement: import("react").MemoExoticComponent<({ plane, scaleBounds, showHandles, handleRadius, handleRingWidth, outlineScale, }: PlaneElementProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -34,7 +34,7 @@ const segmentsPath = (segments) => {
 // The grid respects the plane's stored gridSpacingUm (hosts stamp it at
 // dimension-entry time from the unit the user typed); absent, it falls back
 // to an auto "nice metric" spacing for the calibrated extent.
-export const PlaneElement = memo(({ plane, scaleBounds, showHandles, handleRadius, handleRingWidth, }) => {
+export const PlaneElement = memo(({ plane, scaleBounds, showHandles, handleRadius, handleRingWidth, outlineScale = 1, }) => {
     const gridVisible = plane.gridVisible !== false;
     const gridPath = useMemo(() => {
         if (!gridVisible)
@@ -99,7 +99,7 @@ export const PlaneElement = memo(({ plane, scaleBounds, showHandles, handleRadiu
             ? plane.corners
             : [plane.refLine.a, plane.refLine.b]
         : [];
-    return (_jsxs(Group, { children: [gridPath && (_jsx(Path, { path: gridPath, color: PLANE_GRID_COLOR, style: "stroke", strokeWidth: PLANE_GRID_WIDTH, opacity: PLANE_GRID_OPACITY })), _jsx(Path, { path: outlinePath, color: PLANE_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH, strokeJoin: "round" }), handleRadius != null &&
+    return (_jsxs(Group, { children: [gridPath && (_jsx(Path, { path: gridPath, color: PLANE_GRID_COLOR, style: "stroke", strokeWidth: PLANE_GRID_WIDTH, opacity: PLANE_GRID_OPACITY })), _jsx(Path, { path: outlinePath, color: PLANE_COLOR, style: "stroke", strokeWidth: PLANE_OUTLINE_WIDTH * outlineScale, strokeJoin: "round" }), handleRadius != null &&
                 handlePoints.map((p, i) => (_jsxs(Group, { children: [_jsx(Circle, { c: p, r: handleRadius, color: PLANE_COLOR }), _jsx(Circle, { c: p, r: handleRadius, color: "#FFFFFF", style: "stroke", strokeWidth: handleRingWidth })] }, i)))] }));
 }, 
 // Value-compare the bounds rect: AnnotationCanvasSkia derives it fresh each
@@ -111,6 +111,7 @@ export const PlaneElement = memo(({ plane, scaleBounds, showHandles, handleRadiu
     prev.showHandles === next.showHandles &&
     prev.handleRadius === next.handleRadius &&
     prev.handleRingWidth === next.handleRingWidth &&
+    prev.outlineScale === next.outlineScale &&
     prev.scaleBounds.x === next.scaleBounds.x &&
     prev.scaleBounds.y === next.scaleBounds.y &&
     prev.scaleBounds.width === next.scaleBounds.width &&

package/dist/export/buildJobCsv.d.ts

@@ -15,6 +15,7 @@ export type BuildJobCsvInput = {
     measurementsByGroup: Map<string, Measurement[]>;
     objectsByGroup: Map<string, ExportObjectRow[]>;
     formatMeasurementValue: (value: number, device?: string) => string;
+    applyGroupFormula?: (group: Group, measurement: Measurement) => number | null;
     unitPrefs: {
         defaultUnit?: Units;
         fractionalTolerance?: FractionalTolerance;

package/dist/export/buildJobCsv.js

@@ -39,7 +39,7 @@ const userCell = (user) => (user ? [user.firstName, user.lastName].filter(Boolea
 // trailing "Objects" column (list groups) or extend the form row (form
 // groups), one skipped column after the existing cells.
 export function buildJobCsv(input) {
-    const { scope, activeGroupId, config, groups, sections, formulas, measurementsByGroup, objectsByGroup, formatMeasurementValue, unitPrefs, } = input;
+    const { scope, activeGroupId, config, groups, sections, formulas, measurementsByGroup, objectsByGroup, formatMeasurementValue, applyGroupFormula, unitPrefs, } = input;
     const csvRows = [];
     let listGroups;
     let formGroups;
@@ -82,9 +82,13 @@ export function buildJobCsv(input) {
                 headerCells.push(escapeCSVField(''), escapeCSVField('Objects'));
             }
             csvRows.push(headerCells.join(','));
-            // Export rows in the card/table display order (incomplete first, then
-            // capture time), regardless of the order the caller fetched them in.
-            const measurements = sortMeasurementsByCompleted(measurementsByGroup.get(group.id) ?? []).filter(measurementPassesFilter);
+            // File-scratch measurements (non-null fileId: created inside a CAD/PDF
+            // canvas, never saved into the group) live in the same subcollection
+            // but are internal — the group cards hide them, so exports must too.
+            // Then export rows in the card/table display order (incomplete first,
+            // then capture time), regardless of the order the caller fetched them
+            // in.
+            const measurements = sortMeasurementsByCompleted((measurementsByGroup.get(group.id) ?? []).filter((m) => m.fileId == null)).filter(measurementPassesFilter);
             // Objects fill a parallel column, one per row from the top; extra rows
             // are emitted when a group has more objects than measurements.
             const rowCount = Math.max(measurements.length, objects.length);
@@ -94,12 +98,22 @@ export function buildJobCsv(input) {
                 if (includeField('measurement')) {
                     // Angles and unitless numbers store their value as entered, not as
                     // micrometers — running them through the length formatter would
-                    // render 45° as ~0. Emit them as-is with their own suffix.
-                    row.push(escapeCSVField(measurement
-                        ? isScalarMeasurement(measurement.type)
-                            ? `${measurement.value}${scalarValueSuffix(measurement.type)}`
-                            : formatMeasurementValue(measurement.value, measurement.device)
-                        : ''));
+                    // render 45° as ~0. Emit them as-is with their own suffix. Group
+                    // formulas apply to length measurements only, same as the tiles.
+                    let cell = '';
+                    if (measurement) {
+                        if (isScalarMeasurement(measurement.type)) {
+                            cell = `${measurement.value}${scalarValueSuffix(measurement.type)}`;
+                        }
+                        else {
+                            const formulaValue = applyGroupFormula?.(group, measurement) ?? null;
+                            cell =
+                                formulaValue !== null
+                                    ? formatMeasurementValue(formulaValue)
+                                    : formatMeasurementValue(measurement.value, measurement.device);
+                        }
+                    }
+                    row.push(escapeCSVField(cell));
                 }
                 if (includeField('label')) {
                     row.push(escapeCSVField(measurement?.label || ''));

package/package.json

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