@reekon-tools/boldr-utils 1.6.11 → 1.6.13

package/dist/{canvas → annotation/canvas}/measurementStampOverlay.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { PlacedMeasurementRef } from '../types/annotation.js';
-import type { Measurement } from '../types/firestore.js';
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { Measurement } from '../../types/firestore.js';
 export interface MeasurementStampRenderArgs {
     placed: PlacedMeasurementRef;
     measurement: Measurement | null;

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

@@ -0,0 +1 @@
+export declare const STAMP_TILE_SIZE = 96;

package/dist/annotation/canvas/stampLayout.js

@@ -0,0 +1,11 @@
+// Shared layout constant for the placed measurement stamp. Lives in a
+// Skia-free module so both the render path (the `renderMeasurementStamp`
+// overlay — see measurementStampOverlay.ts) and the hit-test (selectTool)
+// can import it without dragging @shopify/react-native-skia into the
+// consumer's static import graph.
+// Constant SCREEN-space edge length of a placed measurement rendered as a
+// square tile. The tile is a fixed-size pin: its on-screen size is this times
+// `placed.scale` and does NOT change with zoom (only its position tracks the
+// canvas). Also drives the select-tool hit box, which converts it back to doc
+// space via the zoom.
+export const STAMP_TILE_SIZE = 96;

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

@@ -0,0 +1,5 @@
+import type { StrokeCap, Vec2 } from '../../types/annotation.js';
+export declare const toSkiaStrokeCap: (cap: StrokeCap | undefined) => "butt" | "round" | "square";
+export declare const dashIntervals: (width: number) => [number, number];
+export declare const arrowheadLength: (width: number) => number;
+export declare const arrowheadTriangle: (end: Vec2, from: Vec2, width: number) => [Vec2, Vec2, Vec2];

package/dist/annotation/canvas/strokeGeometry.js

@@ -0,0 +1,41 @@
+// Pure helpers for stroke end-cap rendering. Skia-free and dependency-free so
+// they're safe in element renderers, the measurement-line pass, and unit tests.
+// Map our end-cap style to a Skia-valid strokeCap. 'arrow' is NOT a Skia cap
+// (we draw an arrowhead separately), so the base line uses a 'round' cap.
+// Absent === 'round'.
+export const toSkiaStrokeCap = (cap) => cap === 'butt' || cap === 'square' ? cap : 'round';
+// Dash pattern ([on, off], doc units) for dashed strokes/lines/rect borders.
+// Scales with the stroke width so thick strokes read as dashed rather than
+// dotted, floored so thin strokes still show distinct dashes. Single source
+// for every dashed paint in the canvas — keep all platforms identical.
+export const dashIntervals = (width) => [
+    Math.max(width * 3, 6),
+    Math.max(width * 2, 4),
+];
+// Forward length of the arrowhead (line end → apex), as a multiple of stroke
+// width (clamped to a minimum so thin strokes still get a visible head). Doc
+// units. Kept small since the head is a solid filled triangle.
+export const arrowheadLength = (width) => Math.max(width * 2, 6);
+// Half the arrowhead's base width. Kept >= the round-cap radius (width / 2) so
+// the triangle fully covers the shaft's end cap.
+const arrowheadHalfBase = (width) => Math.max(width * 0.9, 4);
+// A solid-triangle arrowhead pointing in the travel direction (from `from`
+// toward `end`). Returns [apex, baseLeft, baseRight]: the apex sits FORWARD of
+// the line end (so the point isn't swallowed by the shaft or its end cap), and
+// the base straddles the end point (so the triangle hides the cap bulge).
+export const arrowheadTriangle = (end, from, width) => {
+    const dx = end.x - from.x;
+    const dy = end.y - from.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const ux = dx / len; // unit travel direction
+    const uy = dy / len;
+    const px = -uy; // unit perpendicular
+    const py = ux;
+    const head = arrowheadLength(width);
+    const half = arrowheadHalfBase(width);
+    return [
+        { x: end.x + ux * head, y: end.y + uy * head }, // apex, forward of the end
+        { x: end.x + px * half, y: end.y + py * half }, // base left
+        { x: end.x - px * half, y: end.y - py * half }, // base right
+    ];
+};

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

@@ -0,0 +1,24 @@
+import type { AnnotationShape, Vec2 } from '../../types/annotation.js';
+export declare const DEFAULT_TEXT_FONT_SIZE = 24;
+export declare const MIN_TEXT_FONT_SIZE = 8;
+export declare const MAX_TEXT_FONT_SIZE = 200;
+export declare const TEXT_LINE_HEIGHT_FACTOR = 1.2;
+export declare const TEXT_BASELINE_FACTOR = 0.8;
+export declare const SELECTION_PAD = 6;
+export declare const estimateLineWidth: (line: string, fontSize: number) => number;
+export interface TextBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export declare const textShapeBounds: (shape: AnnotationShape) => TextBounds | null;
+export declare const hitTestTextShape: (shape: AnnotationShape, p: Vec2, padding?: number) => boolean;
+export interface ResizeGeometry {
+    pivot: Vec2;
+    handle: Vec2;
+    minScale: number;
+    maxScale: number;
+}
+export declare const textResizeGeometry: (shape: AnnotationShape) => ResizeGeometry | null;
+export declare const resizeScaleFromDrag: (geom: ResizeGeometry, delta: Vec2) => number;

package/dist/annotation/canvas/textGeometry.js

@@ -0,0 +1,110 @@
+// Geometry for `kind: 'text'` shapes. A text shape stores only its TOP-LEFT
+// anchor (`geometry.points[0]`), its content (`text`, '\n'-separated lines) and
+// its size (`style.fontSize`, doc units); everything else — bounds, hit boxes,
+// the resize handle, line layout — derives from those through this module.
+//
+// This module is deliberately Skia-free: tools (selectTool, textTool) need the
+// same bounds the renderer uses, and tools must stay importable without
+// touching @shopify/react-native-skia (see penTool.ts). So bounds are
+// ESTIMATED from per-character advance-width factors rather than measured with
+// a real SkFont. The renderer (ShapeElement) lays glyphs out with the same
+// line-height/baseline factors, so boxes and glyphs agree vertically; widths
+// are approximate, which is fine for selection chrome and hit-testing.
+export const DEFAULT_TEXT_FONT_SIZE = 24;
+export const MIN_TEXT_FONT_SIZE = 8;
+export const MAX_TEXT_FONT_SIZE = 200;
+// Line height and baseline offset (from the line top), as multiples of
+// fontSize. The renderer uses the same factors so the estimated box always
+// brackets the drawn glyphs vertically.
+export const TEXT_LINE_HEIGHT_FACTOR = 1.2;
+export const TEXT_BASELINE_FACTOR = 0.8;
+// Selection-box padding in doc units. Lives here (Skia-free) rather than in
+// AnnotationCanvasSkia so tools can hit-test selection chrome — the text
+// resize handle sits on the padded box corner — without importing the Skia
+// tree. AnnotationCanvasSkia imports this for every selection box.
+export const SELECTION_PAD = 6;
+// Advance width / fontSize per character class, tuned for a bold geometric
+// sans (the app font is Metropolis Bold). Estimates, not measurements — see
+// the module comment.
+const NARROW = new Set("ijl!|.,:;'`".split(''));
+const SLIM = new Set('ftr()[]{}"- '.split(''));
+const WIDE = new Set('mwMW@%'.split(''));
+const charWidthFactor = (ch) => {
+    if (NARROW.has(ch))
+        return 0.3;
+    if (SLIM.has(ch))
+        return 0.42;
+    if (WIDE.has(ch))
+        return 0.92;
+    if (ch >= 'A' && ch <= 'Z')
+        return 0.72;
+    return 0.6;
+};
+export const estimateLineWidth = (line, fontSize) => {
+    let w = 0;
+    for (const ch of line)
+        w += charWidthFactor(ch);
+    return w * fontSize;
+};
+const textFontSize = (shape) => shape.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+// Estimated bounds of a text shape, or null when it isn't a renderable text
+// shape (wrong kind, no anchor, no text).
+export const textShapeBounds = (shape) => {
+    if (shape.kind !== 'text')
+        return null;
+    const origin = shape.geometry.points[0];
+    if (!origin || !shape.text)
+        return null;
+    const fontSize = textFontSize(shape);
+    const lines = shape.text.split('\n');
+    let width = 0;
+    for (const line of lines) {
+        const w = estimateLineWidth(line, fontSize);
+        if (w > width)
+            width = w;
+    }
+    return {
+        minX: origin.x,
+        minY: origin.y,
+        maxX: origin.x + width,
+        maxY: origin.y + lines.length * TEXT_LINE_HEIGHT_FACTOR * fontSize,
+    };
+};
+// Whether a world point is on a text shape (its estimated box + padding).
+export const hitTestTextShape = (shape, p, padding = SELECTION_PAD) => {
+    const b = textShapeBounds(shape);
+    if (!b)
+        return false;
+    return (p.x >= b.minX - padding &&
+        p.x <= b.maxX + padding &&
+        p.y >= b.minY - padding &&
+        p.y <= b.maxY + padding);
+};
+export const textResizeGeometry = (shape) => {
+    const b = textShapeBounds(shape);
+    if (!b)
+        return null;
+    const fontSize = textFontSize(shape);
+    return {
+        pivot: { x: b.minX, y: b.minY },
+        handle: { x: b.maxX + SELECTION_PAD, y: b.maxY + SELECTION_PAD },
+        minScale: MIN_TEXT_FONT_SIZE / fontSize,
+        maxScale: MAX_TEXT_FONT_SIZE / fontSize,
+    };
+};
+// Uniform scale for a resize drag: how far the handle has moved from the
+// pivot, relative to where it started, clamped to the geometry's scale range.
+// The native resize preview worklet in AnnotationCanvasInner.native.tsx is a
+// WORKLET TWIN of this math — keep them in sync.
+export const resizeScaleFromDrag = (geom, delta) => {
+    const bx = geom.handle.x - geom.pivot.x;
+    const by = geom.handle.y - geom.pivot.y;
+    const baseLen = Math.sqrt(bx * bx + by * by);
+    let s = 1;
+    if (baseLen > 0) {
+        const nx = bx + delta.x;
+        const ny = by + delta.y;
+        s = Math.sqrt(nx * nx + ny * ny) / baseLen;
+    }
+    return Math.min(geom.maxScale, Math.max(geom.minScale, s));
+};

package/dist/{canvas → annotation/canvas}/tools/measurementStampTool.d.ts

@@ -1,4 +1,4 @@
-import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { PlacedMeasurementRef } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export interface MeasurementStampToolOptions {
     autoSwitchToSelect?: boolean;

package/dist/{canvas → annotation/canvas}/tools/measurementStampTool.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
 let counter = 0;
 const makeId = () => `measurement-${Date.now().toString(36)}-${(counter++).toString(36)}`;
 const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;

package/dist/{canvas → annotation/canvas}/tools/panTool.js

@@ -5,6 +5,9 @@ export const createPanTool = (options = {}) => ({
     id: 'pan',
     label: 'Hand',
     cursor: options.cursor ?? 'grab',
+    // Native pans the viewport on the UI thread (see Tool.panViewport). The
+    // onPointer* handlers below remain the web/parity implementation.
+    panViewport: true,
     onPointerDown(event, _ctx, _state) {
         return { kind: 'panning', lastScreen: event.screen };
     },

package/dist/{canvas → annotation/canvas}/tools/penTool.d.ts

@@ -1,8 +1,10 @@
-import type { AnnotationStroke } from '../../types/annotation.js';
+import type { AnnotationStroke, StrokeCap } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export interface PenToolOptions {
     color?: string;
     width?: number;
+    cap?: StrokeCap;
+    dash?: boolean;
     minSampleDistance?: number;
     variant?: 'pen' | 'marker' | 'highlighter';
 }

package/dist/{canvas → annotation/canvas}/tools/penTool.js

@@ -1,4 +1,4 @@
-import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
 const distSq = (ax, ay, bx, by) => {
     const dx = ax - bx;
     const dy = ay - by;
@@ -9,13 +9,22 @@ const makeId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).t
 export const createPenTool = (options = {}) => {
     const color = options.color ?? '#111827';
     const width = options.width ?? 2;
+    const cap = options.cap ?? 'round';
+    const dash = options.dash ?? false;
     const variant = options.variant ?? 'pen';
     const minSampleDistance = options.minSampleDistance ?? 1.5;
     const minSampleDistanceSq = minSampleDistance * minSampleDistance;
+    // A degenerate single-point dot has no direction (so 'arrow' is meaningless)
+    // and is invisible with a 'butt' cap (zero-length path), so a dot falls back
+    // to a visible, directionless cap.
+    const dotCap = cap === 'butt' || cap === 'arrow' ? 'round' : cap;
     return {
         id: variant,
         label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
         cursor: 'crosshair',
+        // Drives UI-thread drawing on native (see FreehandConfig). The
+        // onPointerDown/Move/Up below remain the web/parity implementation.
+        freehand: { variant, color, width, cap, dash, minSampleDistance },
         onPointerDown(event, ctx) {
             const stroke = {
                 id: makeId('stroke'),
@@ -23,6 +32,8 @@ export const createPenTool = (options = {}) => {
                 tool: variant,
                 color,
                 width,
+                cap,
+                ...(dash && { dash }),
                 points: [event.world.x, event.world.y],
                 pressure: event.pressure !== undefined ? [event.pressure] : undefined,
                 createdAt: Date.now(),
@@ -54,10 +65,28 @@ export const createPenTool = (options = {}) => {
             const s = state;
             if (s?.kind !== 'pen-drawing')
                 return;
-            // Need at least two distinct samples to be a stroke.
-            if (s.stroke.points.length < 4)
-                return;
-            ctx.commit({ ops: [{ op: 'addStroke', stroke: s.stroke }] });
+            const pts = s.stroke.points;
+            if (pts.length >= 4) {
+                // Two or more distinct samples → a normal stroke.
+                ctx.commit({ ops: [{ op: 'addStroke', stroke: s.stroke }] });
+            }
+            else if (pts.length === 2) {
+                // A click with no drag → a single dot. Duplicate the point so the
+                // stroke renders as a filled dot of diameter = width. A 'butt' cap
+                // would make the zero-length path invisible, so the dot uses dotCap.
+                ctx.commit({
+                    ops: [
+                        {
+                            op: 'addStroke',
+                            stroke: {
+                                ...s.stroke,
+                                cap: dotCap,
+                                points: [pts[0], pts[1], pts[0], pts[1]],
+                            },
+                        },
+                    ],
+                });
+            }
         },
         // No renderPreview. The canvas inner detects PenDrawingState in
         // toolState and renders the in-flight stroke directly with its own