@reekon-tools/boldr-utils 1.15.0 → 1.15.2

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -306,12 +306,15 @@ export const AnnotationCanvasInner = (props) => {
                 // act on them (view mode's pan tool selects measurements but must not
                 // advertise draggability).
                 selectedId: selection?.ids[0] ?? null,
-                handleRadius: activeTool?.dragSelection
+                // Plane-calibration handles reuse the same screen-constant sizing —
+                // the plane tool (planeEditing) is the only tool that can drag them.
+                handleRadius: activeTool?.dragSelection || activeTool?.planeEditing
                     ? HANDLE_PX / state.viewport.zoom
                     : undefined,
-                handleRingWidth: activeTool?.dragSelection
+                handleRingWidth: activeTool?.dragSelection || activeTool?.planeEditing
                     ? HANDLE_RING_PX / state.viewport.zoom
                     : undefined,
+                showPlaneHandles: activeTool?.planeEditing === true,
                 customPreview,
             }), renderMeasurementStamp && (_jsx("div", { style: {
                     position: 'absolute',

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

@@ -1603,9 +1603,16 @@ export const AnnotationCanvasInner = (props) => {
         // Endpoint/corner handles are drag affordances — only the select tool can
         // act on them, so suppress them when the active tool has no drag support
         // (e.g. view mode's pan tool, where a selected measurement still shows its
-        // tile chrome but must not advertise draggability).
-        handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
-        handleRingWidth: activeTool?.dragSelection ? handleRingWidth : undefined,
+        // tile chrome but must not advertise draggability). Plane-calibration
+        // handles reuse the same screen-constant sizing; the plane tool
+        // (planeEditing) is the only tool that can drag those.
+        handleRadius: activeTool?.dragSelection || activeTool?.planeEditing
+            ? handleRadius
+            : undefined,
+        handleRingWidth: activeTool?.dragSelection || activeTool?.planeEditing
+            ? handleRingWidth
+            : undefined,
+        showPlaneHandles: activeTool?.planeEditing === true,
         customPreview,
     };
     // Lens window for the loupe: an opaque white base + the magnified scene

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

@@ -88,9 +88,10 @@ export interface AnnotationCanvasSkiaProps {
     handleRingWidth?: number | {
         value: number;
     };
+    showPlaneHandles?: 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, 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, customPreview, wrapContent, canvasRef, }: AnnotationCanvasSkiaProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/annotation/canvas/AnnotationCanvasSkia.js

@@ -6,6 +6,7 @@ import { SELECTION_PAD, textResizeGeometry, textShapeBounds, } from './textGeome
 import { visualShapeBounds } from './shapeGeometry.js';
 import { backgroundLayerDocRect, backgroundLayersOf, } from './backgroundLayers.js';
 import { BackgroundLayerElement } from './elements/BackgroundImageElement.js';
+import { PlaneElement } from './elements/PlaneElement.js';
 import { ShapeElement } from './elements/ShapeElement.js';
 import { StrokeElement } from './elements/StrokeElement.js';
 // Default visual constants for the measurement-annotation line (the tile itself
@@ -79,8 +80,21 @@ 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, customPreview, wrapContent, canvasRef, }) => {
-    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), effectiveCanvas.strokes.map((stroke) => (_jsx(DraggableElement, { isDragging: stroke.id === draggingId, transform: dragTransform, children: _jsx(StrokeElement, { stroke: stroke }) }, stroke.id))), effectiveCanvas.shapes.map((shape) => {
+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, 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
+    // grid.
+    const firstLayer = backgroundLayersOf(effectiveCanvas.viewport)[0];
+    const planeScaleBounds = firstLayer
+        ? backgroundLayerDocRect(firstLayer)
+        : {
+            x: 0,
+            y: 0,
+            width: effectiveCanvas.viewport.width,
+            height: effectiveCanvas.viewport.height,
+        };
+    const world = (_jsxs(Group, { transform: worldTransform, children: [backgroundLayersOf(effectiveCanvas.viewport).map((layer) => (_jsx(DraggableElement, { isDragging: layer.id === draggingId || layer.id === resizingId, transform: layer.id === resizingId ? resizeTransform : dragTransform, children: _jsx(BackgroundLayerElement, { layer: layer, resolveUrl: resolveImageUrl, skImage: backgroundSkImages?.[layer.id], viewport: viewport, screenWidth: width, screenHeight: height }) }, layer.id))), (effectiveCanvas.planes ?? []).map((plane) => (_jsx(PlaneElement, { plane: plane, scaleBounds: planeScaleBounds, showHandles: showPlaneHandles === true, handleRadius: showPlaneHandles ? handleRadius : undefined, handleRingWidth: showPlaneHandles ? handleRingWidth : undefined }, 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
                 // from the live endpoints (one following the finger) — the shape twin
@@ -173,7 +187,7 @@ export const AnnotationCanvasSkia = ({ width, height, effectiveCanvas, worldTran
                 const startArrow = placed.line && !isEndpointDrag && placed.lineStartCap === 'arrow'
                     ? headPath(placed.line.a, placed.line.b)
                     : null;
-                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), startArrow && (_jsx(Path, { path: startArrow, color: lineColor, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, color: lineColor, style: "fill" })), isSelected && handleRadius != null && (_jsxs(_Fragment, { children: [_jsx(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
+                const content = (_jsxs(_Fragment, { children: [_jsx(Line, { p1: p1, p2: p2, color: lineColor, style: "stroke", strokeWidth: lineWidth, strokeCap: toSkiaStrokeCap(placed.lineCap), children: placed.lineDash && (_jsx(DashPathEffect, { intervals: dashIntervals(lineWidth) })) }), startArrow && (_jsx(Path, { path: startArrow, color: lineColor, style: "fill" })), endArrow && (_jsx(Path, { path: endArrow, color: lineColor, style: "fill" })), isSelected && handleRadius != null && !placed.planeEdge && (_jsxs(_Fragment, { children: [_jsx(Handle, { c: p1, r: handleRadius, ringWidth: handleRingWidth }), _jsx(Handle, { c: p2, r: handleRadius, ringWidth: handleRingWidth })] }))] }));
                 return isEndpointDrag ? (_jsx(Group, { children: content }, placed.id)) : (_jsx(DraggableElement, { isDragging: placed.id === draggingId, transform: dragTransform, children: content }, placed.id));
             }), (() => {
                 if (!selectedId)

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

@@ -99,6 +99,7 @@ export interface Tool {
     shapeDraw?: ShapeDrawConfig;
     panViewport?: boolean;
     dragSelection?: DragSelectionConfig;
+    planeEditing?: boolean;
     onPointerDown?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerMove?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;
     onPointerUp?(event: CanvasPointerEvent, ctx: ToolContext, state: ToolState): ToolState | void;

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

@@ -0,0 +1,18 @@
+import type { PlaneCalibration } from '../../../types/annotation.js';
+type AnimatedNumber = number | {
+    value: number;
+};
+export interface PlaneElementProps {
+    plane: PlaneCalibration;
+    scaleBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    showHandles: boolean;
+    handleRadius?: AnimatedNumber;
+    handleRingWidth?: AnimatedNumber;
+}
+export declare const PlaneElement: import("react").MemoExoticComponent<({ plane, scaleBounds, showHandles, handleRadius, handleRingWidth, }: PlaneElementProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Group, Path, Skia } from '@shopify/react-native-skia';
+import { memo, useMemo } from 'react';
+import { planeGridSegments, planeGridSegmentsForScale, resolvePlaneGridSpacingUm, } from '../planeGeometry.js';
+import { FormulaColors } from '../../../theme/colors.js';
+// Plane-calibration chrome colors. Deliberately NOT the selection blue
+// (#0066FF — measurement chrome) so the calibration reads as its own layer of
+// information: the formula purple outlines the calibrated quad / reference
+// line (and inks its handles and dimension-tile lines — see planeTool), while
+// the grid it casts gets its own pale pink so the two never blur.
+const PLANE_COLOR = FormulaColors.purple;
+const PLANE_GRID_COLOR = '#FFD1F8';
+const PLANE_GRID_OPACITY = 0.9;
+// Doc-space stroke widths (scale with zoom, like the drawn shapes).
+const PLANE_GRID_WIDTH = 2.5;
+const PLANE_OUTLINE_WIDTH = 4;
+// Cross-tick half-length (doc units) marking the ends of a scale-mode
+// reference line, so it reads as "a measured span", not just a line.
+const REF_TICK_LEN = 18;
+const segmentsPath = (segments) => {
+    const path = Skia.Path.Make();
+    for (const { a, b } of segments) {
+        path.moveTo(a.x, a.y);
+        path.lineTo(b.x, b.y);
+    }
+    return path;
+};
+// The calibration overlay: grid + outline (+ editing handles). Memoized like
+// ShapeElement — applyOp replaces the plane object only when a setPlane op
+// lands (previews included), so unrelated re-renders reuse the built paths.
+// 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, }) => {
+    const gridVisible = plane.gridVisible !== false;
+    const gridPath = useMemo(() => {
+        if (!gridVisible)
+            return null;
+        const bounds = {
+            x: scaleBounds.x,
+            y: scaleBounds.y,
+            width: scaleBounds.width,
+            height: scaleBounds.height,
+        };
+        const spacing = resolvePlaneGridSpacingUm(plane, 'metric', {
+            width: bounds.width,
+            height: bounds.height,
+        });
+        if (spacing == null)
+            return null;
+        const segments = plane.mode === 'perspective'
+            ? planeGridSegments(plane, spacing, bounds)
+            : planeGridSegmentsForScale(plane, spacing, bounds);
+        return segments.length > 0 ? segmentsPath(segments) : null;
+        // Keyed on the bounds' VALUES: the caller derives the rect object fresh
+        // each render (backgroundLayerDocRect), so identity would thrash.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        plane,
+        gridVisible,
+        scaleBounds.x,
+        scaleBounds.y,
+        scaleBounds.width,
+        scaleBounds.height,
+    ]);
+    const outlinePath = useMemo(() => {
+        const path = Skia.Path.Make();
+        if (plane.mode === 'perspective') {
+            const [tl, tr, br, bl] = plane.corners;
+            path.moveTo(tl.x, tl.y);
+            path.lineTo(tr.x, tr.y);
+            path.lineTo(br.x, br.y);
+            path.lineTo(bl.x, bl.y);
+            path.close();
+            return path;
+        }
+        // Scale mode: the reference line with a perpendicular tick at each end.
+        const { a, b } = plane.refLine;
+        const dx = b.x - a.x;
+        const dy = b.y - a.y;
+        const len = Math.sqrt(dx * dx + dy * dy);
+        path.moveTo(a.x, a.y);
+        path.lineTo(b.x, b.y);
+        if (len > 0) {
+            const nx = (-dy / len) * REF_TICK_LEN;
+            const ny = (dx / len) * REF_TICK_LEN;
+            path.moveTo(a.x - nx, a.y - ny);
+            path.lineTo(a.x + nx, a.y + ny);
+            path.moveTo(b.x - nx, b.y - ny);
+            path.lineTo(b.x + nx, b.y + ny);
+        }
+        return path;
+    }, [plane]);
+    const handlePoints = showHandles
+        ? plane.mode === 'perspective'
+            ? 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 &&
+                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
+// render (backgroundLayerDocRect returns a new object), so the default
+// shallow compare would re-render this element on every canvas render and
+// defeat the grid-path memoization. Everything else compares by identity —
+// applyOp replaces the plane object only when a setPlane op lands.
+(prev, next) => prev.plane === next.plane &&
+    prev.showHandles === next.showHandles &&
+    prev.handleRadius === next.handleRadius &&
+    prev.handleRingWidth === next.handleRingWidth &&
+    prev.scaleBounds.x === next.scaleBounds.x &&
+    prev.scaleBounds.y === next.scaleBounds.y &&
+    prev.scaleBounds.width === next.scaleBounds.width &&
+    prev.scaleBounds.height === next.scaleBounds.height);
+PlaneElement.displayName = 'PlaneElement';

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

@@ -0,0 +1,48 @@
+import type { PlacedMeasurementRef, PlaneCalibration, PlaneEdge, PlanePerspectiveCalibration, PlaneScaleCalibration, Vec2 } from '../../types/annotation.js';
+export interface Homography {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+    g: number;
+    h: number;
+}
+export declare const homographyFromQuad: (corners: readonly [Vec2, Vec2, Vec2, Vec2]) => Homography | null;
+export declare const invertHomography: (m: Homography) => Homography | null;
+export declare const applyHomography: (m: Homography, p: Vec2) => Vec2 | null;
+export declare const isQuadConvexNonDegenerate: (corners: readonly [Vec2, Vec2, Vec2, Vec2]) => boolean;
+export declare const normalizeQuadOrder: (pts: readonly Vec2[]) => [Vec2, Vec2, Vec2, Vec2] | null;
+export declare const docToPlaneUm: (cal: PlanePerspectiveCalibration, p: Vec2) => Vec2 | null;
+export declare const planeDistanceUm: (cal: PlaneCalibration, a: Vec2, b: Vec2) => number | null;
+export declare const planeEdgeLine: (cal: PlaneCalibration, edge: PlaneEdge) => {
+    a: Vec2;
+    b: Vec2;
+} | null;
+export declare const planeDimensionValueUm: (cal: PlaneCalibration, edge: PlaneEdge) => number | null;
+export declare const withPlaneDimensionUm: (cal: PlaneCalibration, edge: PlaneEdge, um: number) => PlaneCalibration;
+export declare const planeLengthForPlaced: (planes: PlaneCalibration[] | undefined, placed: PlacedMeasurementRef) => number | null;
+export declare const nicePlaneGridSpacingUm: (extentUm: number, system: "metric" | "imperial") => number;
+export declare const resolvePlaneGridSpacingUm: (cal: PlaneCalibration, system: "metric" | "imperial", scaleBounds?: {
+    width: number;
+    height: number;
+}) => number | null;
+export declare const planeGridSegments: (cal: PlanePerspectiveCalibration, spacingUm: number, bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => {
+    a: Vec2;
+    b: Vec2;
+}[];
+export declare const planeGridSegmentsForScale: (cal: PlaneScaleCalibration, spacingUm: number, bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}) => {
+    a: Vec2;
+    b: Vec2;
+}[];