@reekon-tools/boldr-utils 1.19.1 → 1.19.3

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

@@ -492,17 +492,6 @@ 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
@@ -538,29 +527,9 @@ 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]);
+    // (The lens crosshair marking the dragged point — loupeCrossPath — is
+    // declared after the resize sections below: it mirrors every precision
+    // drag's live-point math, not just this plane handle's.)
     // 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
@@ -833,6 +802,91 @@ export const AnnotationCanvasInner = (props) => {
         const nmy = c.fy + (c.my - c.fy) * shapeResizeScale.value.sy;
         return Math.abs(nmy - c.fy) + SELECTION_PAD * 2;
     });
+    // Black crosshair marking the DRAGGED POINT inside the lens — every
+    // precision drag the loupe shows, not a fixed center mark: the lens center
+    // is the FINGER, which sits off the dragged point by the grab offset the
+    // drags deliberately preserve, so a center mark pointed at the wrong pixel
+    // (doubly wrong at 2×). Built in SCREEN space and drawn as lens chrome
+    // inside the clip (see loupeWrap), so its size is fixed pixels: the point
+    // projects through the same math as loupeTransform —
+    // lensCenter + MAG · (screen(point) − finger). Each branch is a one-line
+    // mirror of that drag's worklet twin above; 'center' covers the pointer-path
+    // drag-to-draw tools, whose tip IS the finger (no grab offset). The mode is
+    // React state captured at drag start — set before the loupe mounts.
+    const loupeCrossMode = planeDrag
+        ? 'plane'
+        : epDragId || shapeEpDragId
+            ? 'endpoint'
+            : rectDragId
+                ? 'rect-corner'
+                : shapeResizeId
+                    ? 'shape-corner'
+                    : resizingId
+                        ? 'text-resize'
+                        : 'center';
+    const loupeCrossPath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        let x = loupeCx;
+        let y = loupeCy;
+        if (loupeCrossMode !== 'center') {
+            let wx = 0;
+            let wy = 0;
+            if (loupeCrossMode === 'plane') {
+                if (planeDragMode.value !== 1)
+                    return path;
+                const p = planeDragHandle.value;
+                wx = p.x;
+                wy = p.y;
+            }
+            else if (loupeCrossMode === 'endpoint') {
+                // Measurement-line and shape line/arrow endpoint drags both stage
+                // their line in epCtx; the grabbed end follows the finger.
+                const c = epCtx.value;
+                wx = (c.handle === 0 ? c.ax : c.bx) + dragX.value;
+                wy = (c.handle === 0 ? c.ay : c.by) + dragY.value;
+            }
+            else if (loupeCrossMode === 'rect-corner') {
+                const c = rectCtx.value;
+                wx = c.mx + dragX.value;
+                wy = c.my + dragY.value;
+            }
+            else if (loupeCrossMode === 'shape-corner') {
+                // The grabbed corner under the live (clamped, possibly uniform)
+                // scale — matches shapeResizeScale, so ellipses mark the true corner.
+                const c = shapeResizeCtx.value;
+                const s = shapeResizeScale.value;
+                wx = c.fx + (c.mx - c.fx) * s.sx;
+                wy = c.fy + (c.my - c.fy) * s.sy;
+            }
+            else {
+                // WORKLET TWIN of resizeTransform's clamped scale above: the corner
+                // handle under scale-about-pivot.
+                const c = resizeCtx.value;
+                const bx = c.hx - c.px;
+                const by = c.hy - c.py;
+                const baseLen = Math.sqrt(bx * bx + by * by);
+                let s = 1;
+                if (baseLen > 0) {
+                    const nx = bx + dragX.value;
+                    const ny = by + dragY.value;
+                    s = Math.sqrt(nx * nx + ny * ny) / baseLen;
+                }
+                s = Math.min(c.maxS, Math.max(c.minS, s));
+                wx = c.px + bx * s;
+                wy = c.py + by * s;
+            }
+            const sx = (wx - panX.value) * zoom.value;
+            const sy = (wy - panY.value) * zoom.value;
+            x = loupeCx + LOUPE_MAGNIFICATION * (sx - magTouchX.value);
+            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, loupeCrossMode]);
     // Per-gesture refs so we always emit a matching down/move/up sequence.
     const pointerIdRef = useRef(1);
     const inFlightRef = useRef(null);
@@ -2007,16 +2061,17 @@ 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,
+                    // Inside the lens only the CONTENT magnifies; chrome doesn't.
+                    // Handle discs don't render at all (handleRadius undefined gates
+                    // every Handle/plane-disc draw) — the black crosshair drawn in
+                    // the lens chrome (loupeCrossPath) marks the dragged point, and
+                    // at 2× a disc just covered the pixel being placed. Plane
+                    // outlines and measurement lines drop to their normal apparent
+                    // thickness instead of doubling.
+                    handleRadius: undefined,
+                    handleRingWidth: undefined,
                     planeOutlineScale: 1 / LOUPE_MAGNIFICATION,
-                    // The dragged handle renders as the black crosshair drawn in the
-                    // lens chrome (loupeCrossPath) instead of its disc.
-                    planeDragHandleHidden: true,
+                    measurementLineScale: 1 / LOUPE_MAGNIFICATION,
                 }) }))] }));
 };
 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

@@ -100,10 +100,10 @@ export interface AnnotationCanvasSkiaProps {
     };
     planeDragHandle?: AnimatedPoint;
     planeOutlineScale?: number;
-    planeDragHandleHidden?: boolean;
+    measurementLineScale?: number;
     customPreview?: ReactNode;
     wrapContent?: (content: ReactNode) => ReactNode;
     canvasRef?: RefObject<CanvasRef | null>;
 }
-export declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, backgroundContent, 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 declare const AnnotationCanvasSkia: ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, backgroundContent, 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, measurementLineScale, 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, backgroundContent, 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, }) => {
+export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTransform, viewport, resolveImageUrl, backgroundSkImages, backgroundContent, 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, measurementLineScale = 1, 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
@@ -100,9 +100,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                         ? 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 * 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));
+                                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 (_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) => {
@@ -183,7 +181,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 const p1 = isEndpointDrag && liveLineP1 ? liveLineP1 : placed.line.a;
                 const p2 = isEndpointDrag && liveLineP2 ? liveLineP2 : placed.line.b;
                 const lineColor = placed.lineColor ?? MEASUREMENT_LINE_COLOR;
-                const lineWidth = placed.lineWidth ?? MEASUREMENT_LINE_WIDTH;
+                const lineWidth = (placed.lineWidth ?? MEASUREMENT_LINE_WIDTH) * measurementLineScale;
                 // 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

package/dist/types/firestore.d.ts

@@ -451,6 +451,7 @@ export interface Label extends FirestoreDoc, Timestamps {
      *  the matching print-settings selector (measurement/QR/image) instead of
      *  the public label library. Absent/null = ordinary library label. */
     templateType?: 'measurement' | 'qr' | 'image' | null;
+    starred?: boolean;
 }
 export interface LabelRow {
     id: string;
@@ -603,6 +604,11 @@ export interface UserDocument extends FirestoreDoc, Timestamps {
      *  shared across orgs, so the star can't live on the template doc (that's
      *  `Template.starred`, for the org's own templates). */
     starredPublicTemplateIds?: string[];
+    /** Public labels this user starred in the label library. Same reasoning as
+     *  `starredPublicTemplateIds`: public labels are shared across orgs, so the
+     *  star can't live on the label doc (that's `Label.starred`, for the org's
+     *  own labels). */
+    starredPublicLabelIds?: string[];
 }
 export interface UserComment extends FirestoreDoc, Timestamps {
     comment: string;

package/package.json

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