@reekon-tools/boldr-utils 1.6.12 → 1.6.14

package/dist/annotation/canvas/shapeGeometry.js

@@ -0,0 +1,116 @@
+// Pure geometry for the drag-to-draw shape tools (line/arrow/rect/triangle/
+// circle) and the polygon tool. Skia-free and dependency-free so the tool
+// factories — and the consumer's static import graph — never touch
+// @shopify/react-native-skia, and so the native inner's worklet twins have a
+// single JS source of truth to mirror.
+// Persisted AnnotationShapeKind for a tool kind. Triangles are stored as
+// 3-point closed polygons so they reuse the polygon renderer/hit-testing
+// wholesale (there is no 'triangle' kind in the schema).
+export const annotationKindFor = (kind) => kind === 'triangle' ? 'polygon' : kind;
+// Geometry points for a shape dragged from `a` to `b` (world space).
+//  - line:     the two endpoints (direction preserved — caps/arrowheads point
+//              from a toward b).
+//  - rect:     the two opposite corners (ShapeElement normalizes).
+//  - ellipse:  the two opposite corners of the bounding drag (rendered as a
+//              circle centered on the midpoint — see ShapeElement).
+//  - triangle: isoceles inscribed in the normalized drag rect — apex at the
+//              top-center, base across the bottom.
+export const shapePointsFromDrag = (kind, a, b) => {
+    if (kind === 'triangle') {
+        const minX = Math.min(a.x, b.x);
+        const maxX = Math.max(a.x, b.x);
+        const minY = Math.min(a.y, b.y);
+        const maxY = Math.max(a.y, b.y);
+        return [
+            { x: (minX + maxX) / 2, y: minY },
+            { x: maxX, y: maxY },
+            { x: minX, y: maxY },
+        ];
+    }
+    return [
+        { x: a.x, y: a.y },
+        { x: b.x, y: b.y },
+    ];
+};
+// --- Per-kind hit testing (doc space) -------------------------------------
+// Geometric shapes hit on their painted outline (plus a tolerance), NOT their
+// bounding box — a long diagonal line's box would swallow taps nowhere near
+// the ink, and a rect's interior must stay transparent to hits so elements
+// inside it remain selectable. `tol` is the doc-space grab radius (the caller
+// derives it from stroke width + a screen-constant padding / zoom).
+const segDistSq = (px, py, ax, ay, bx, by) => {
+    const abx = bx - ax;
+    const aby = by - ay;
+    const lenSq = abx * abx + aby * aby;
+    let t = lenSq === 0 ? 0 : ((px - ax) * abx + (py - ay) * aby) / lenSq;
+    t = Math.max(0, Math.min(1, t));
+    const dx = px - (ax + t * abx);
+    const dy = py - (ay + t * aby);
+    return dx * dx + dy * dy;
+};
+// Distance from `p` to the polyline through `pts` (closing edge included when
+// `closed`), squared. Infinity for fewer than 2 points.
+const polylineDistSq = (pts, p, closed) => {
+    if (pts.length < 2)
+        return Infinity;
+    let best = Infinity;
+    const n = closed ? pts.length : pts.length - 1;
+    for (let i = 0; i < n; i++) {
+        const a = pts[i];
+        const b = pts[(i + 1) % pts.length];
+        const d = segDistSq(p.x, p.y, a.x, a.y, b.x, b.y);
+        if (d < best)
+            best = d;
+    }
+    return best;
+};
+// Whether `p` is within `tol` of the shape's painted outline. Returns false
+// for text shapes — their hit box comes from textGeometry (the stored
+// geometry is just an anchor), so callers keep using textShapeBounds.
+export const hitShapeOutline = (shape, p, tol) => {
+    const pts = shape.geometry.points;
+    const tolSq = tol * tol;
+    switch (shape.kind) {
+        case 'line':
+        case 'arrow': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            return segDistSq(p.x, p.y, a.x, a.y, b.x, b.y) <= tolSq;
+        }
+        case 'rect': {
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            const minX = Math.min(a.x, b.x);
+            const maxX = Math.max(a.x, b.x);
+            const minY = Math.min(a.y, b.y);
+            const maxY = Math.max(a.y, b.y);
+            const ring = [
+                { x: minX, y: minY },
+                { x: maxX, y: minY },
+                { x: maxX, y: maxY },
+                { x: minX, y: maxY },
+            ];
+            return polylineDistSq(ring, p, true) <= tolSq;
+        }
+        case 'ellipse': {
+            // Rendered as a circle: center = midpoint, r = half the larger extent
+            // (mirror of ShapeElement). Hit when within tol of the ring.
+            const [a, b] = pts;
+            if (!a || !b)
+                return false;
+            const cx = (a.x + b.x) / 2;
+            const cy = (a.y + b.y) / 2;
+            const r = Math.max(Math.abs(b.x - a.x), Math.abs(b.y - a.y)) / 2;
+            const d = Math.hypot(p.x - cx, p.y - cy);
+            return Math.abs(d - r) <= tol;
+        }
+        case 'polygon': {
+            const closed = shape.geometry.closed !== false;
+            return polylineDistSq(pts, p, closed) <= tolSq;
+        }
+        case 'text':
+            return false;
+    }
+};

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

@@ -1,4 +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

@@ -4,6 +4,14 @@
 // (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.

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/annotation/canvas/tools/panTool.d.ts

@@ -1,5 +1,6 @@
 import type { Tool } from '../Tool.js';
 export interface PanToolOptions {
     cursor?: string;
+    selectMeasurementsOnTap?: boolean;
 }
 export declare const createPanTool: (options?: PanToolOptions) => Tool;

package/dist/annotation/canvas/tools/panTool.js

@@ -1,3 +1,8 @@
+import { hitPlacedMeasurement } from '../measurementGeometry.js';
+// Screen-px movement beyond which a gesture counts as a pan, not a tap. The
+// native canvas never dispatches pans to JS handlers (they run on the UI
+// thread), so this only guards web's down→jitter→up clicks.
+const TAP_SLOP_PX = 6;
 // Built-in "Hand" tool. When active, any drag pans the viewport. Tools that
 // want one-off pan triggers (middle-mouse, space-drag) get those via the
 // AnnotationCanvas `gestures` prop without needing to switch tools.
@@ -6,10 +11,16 @@ export const createPanTool = (options = {}) => ({
     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.
+    // onPointer* handlers below remain the web/parity implementation; taps
+    // still reach them on native via the synthesized down+up dispatch.
     panViewport: true,
     onPointerDown(event, _ctx, _state) {
-        return { kind: 'panning', lastScreen: event.screen };
+        return {
+            kind: 'panning',
+            startScreen: event.screen,
+            lastScreen: event.screen,
+            moved: false,
+        };
     },
     onPointerMove(event, ctx, state) {
         const s = state;
@@ -20,9 +31,31 @@ export const createPanTool = (options = {}) => ({
             y: event.screen.y - s.lastScreen.y,
         };
         ctx.applyPan(delta);
-        return { kind: 'panning', lastScreen: event.screen };
+        const dx = event.screen.x - s.startScreen.x;
+        const dy = event.screen.y - s.startScreen.y;
+        return {
+            ...s,
+            lastScreen: event.screen,
+            moved: s.moved || dx * dx + dy * dy > TAP_SLOP_PX * TAP_SLOP_PX,
+        };
     },
-    onPointerUp(_event, _ctx, _state) {
-        // No commit — viewport state is canvas-internal, not persisted.
+    onPointerUp(event, ctx, state) {
+        // No commit — viewport state is canvas-internal, not persisted. A clean
+        // tap optionally selects the measurement under it (see options).
+        const s = state;
+        if (!options.selectMeasurementsOnTap)
+            return;
+        if (s?.kind === 'panning' && s.moved)
+            return;
+        const zoom = ctx.viewport.state.zoom;
+        const measurements = ctx.document.placedMeasurements;
+        for (let i = measurements.length - 1; i >= 0; i--) {
+            const m = measurements[i];
+            if (hitPlacedMeasurement(m, event.world, zoom)) {
+                ctx.setSelection({ ids: [m.id] });
+                return;
+            }
+        }
+        ctx.setSelection(null);
     },
 });

package/dist/annotation/canvas/tools/penTool.d.ts

@@ -4,6 +4,7 @@ export interface PenToolOptions {
     color?: string;
     width?: number;
     cap?: StrokeCap;
+    dash?: boolean;
     minSampleDistance?: number;
     variant?: 'pen' | 'marker' | 'highlighter';
 }

package/dist/annotation/canvas/tools/penTool.js

@@ -10,6 +10,7 @@ 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;
@@ -19,11 +20,15 @@ export const createPenTool = (options = {}) => {
     const dotCap = cap === 'butt' || cap === 'arrow' ? 'round' : cap;
     return {
         id: variant,
-        label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
+        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, minSampleDistance },
+        freehand: { variant, color, width, cap, dash, minSampleDistance },
         onPointerDown(event, ctx) {
             const stroke = {
                 id: makeId('stroke'),
@@ -32,6 +37,7 @@ export const createPenTool = (options = {}) => {
                 color,
                 width,
                 cap,
+                ...(dash && { dash }),
                 points: [event.world.x, event.world.y],
                 pressure: event.pressure !== undefined ? [event.pressure] : undefined,
                 createdAt: Date.now(),

package/dist/annotation/canvas/tools/polygonTool.d.ts

@@ -0,0 +1,11 @@
+import type { AnnotationShape } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface PolygonToolOptions {
+    id?: string;
+    label?: string;
+    color?: string;
+    width?: number;
+    dash?: boolean;
+    onPlaced?: (shape: AnnotationShape) => void;
+}
+export declare const createPolygonTool: (options?: PolygonToolOptions) => Tool;

package/dist/annotation/canvas/tools/polygonTool.js

@@ -0,0 +1,162 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+// Screen-px radius for "tapped an existing vertex": the first vertex closes
+// the polygon, the last vertex finishes it open. Converted to doc space via
+// the live zoom so the target is a constant on-screen size.
+const VERTEX_TAP_PX = 18;
+// Screen-px radius of the placed-vertex dots drawn while building (the first
+// vertex grows once the polygon is closable, to advertise the close target).
+const VERTEX_DOT_PX = 5;
+const CLOSE_TARGET_DOT_PX = 8;
+let counter = 0;
+const makeId = () => `polygon-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+const distSq = (a, b) => {
+    const dx = a.x - b.x;
+    const dy = a.y - b.y;
+    return dx * dx + dy * dy;
+};
+// Tap-to-place polygon tool. Each tap (or drag-release) adds a vertex;
+// tapping the FIRST vertex closes the ring and commits; tapping the LAST
+// vertex again (a double-tap, in practice) commits it as an open polyline.
+// Switching tools mid-build commits the open polyline too (work is never
+// silently discarded) via onDeactivate. In-progress geometry renders through
+// preview patches — the polyline plus a dot per placed vertex — so it needs
+// no platform-specific preview plumbing. Skia-free, like every tool factory.
+export const createPolygonTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const dash = options.dash ?? false;
+    // In-progress polygon (spans gestures — see PolygonGestureState).
+    let vertices = [];
+    let shapeId = null;
+    const buildShape = (doc, points, closed) => ({
+        id: shapeId ?? makeId(),
+        layerId: firstLayerId(doc),
+        kind: 'polygon',
+        // Snapshot the array: `points` is usually the live `vertices` buffer, and
+        // downstream memoization (ShapeElement keys its Skia path on
+        // geometry.points IDENTITY) must see a new array per emit — handing out
+        // the shared reference froze the preview polyline at its first segment.
+        geometry: { points: [...points], ...(closed ? {} : { closed: false }) },
+        style: { stroke: color, strokeWidth: width, ...(dash && { dash: true }) },
+        createdAt: Date.now(),
+    });
+    // Preview = the open polyline so far (+ the in-drag rubber point) plus a
+    // dot per placed vertex. Dots are preview-only ellipse shapes — they ride
+    // the same patch and never get committed. Sized in doc units from the live
+    // zoom at emit time (close enough; the preview re-emits on every event).
+    const previewOps = (doc, zoom, rubber) => {
+        if (vertices.length === 0)
+            return [];
+        const pts = rubber ? [...vertices, rubber] : vertices;
+        const ops = [];
+        if (pts.length >= 2) {
+            ops.push({
+                op: 'addShape',
+                shape: { ...buildShape(doc, pts, false), id: `${shapeId}-draft` },
+            });
+        }
+        const closable = vertices.length >= 3;
+        vertices.forEach((v, i) => {
+            const px = i === 0 && closable ? CLOSE_TARGET_DOT_PX : VERTEX_DOT_PX;
+            const r = px / zoom;
+            ops.push({
+                op: 'addShape',
+                shape: {
+                    id: `${shapeId}-v${i}`,
+                    layerId: firstLayerId(doc),
+                    kind: 'ellipse',
+                    geometry: {
+                        points: [
+                            { x: v.x - r, y: v.y - r },
+                            { x: v.x + r, y: v.y + r },
+                        ],
+                    },
+                    style: { fill: color, stroke: '#FFFFFF', strokeWidth: r / 3 },
+                    createdAt: 0,
+                },
+            });
+        });
+        return ops;
+    };
+    const reset = () => {
+        vertices = [];
+        shapeId = null;
+    };
+    const commit = (ctx, closed) => {
+        const shape = buildShape(ctx.document, vertices, closed);
+        ctx.commit({ ops: [{ op: 'addShape', shape }] });
+        reset();
+        options.onPlaced?.(shape);
+    };
+    return {
+        id: options.id ?? 'polygon',
+        label: options.label ?? 'Polygon',
+        cursor: 'crosshair',
+        onPointerDown() {
+            return { kind: 'polygon-pointing' };
+        },
+        onPointerMove(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'polygon-pointing')
+                return s;
+            if (vertices.length === 0)
+                return s;
+            ctx.preview({
+                ops: previewOps(ctx.document, ctx.viewport.state.zoom, event.world),
+            });
+            return s;
+        },
+        onPointerUp(event, ctx, state) {
+            const s = state;
+            if (s?.kind !== 'polygon-pointing')
+                return;
+            const zoom = ctx.viewport.state.zoom;
+            const tol = VERTEX_TAP_PX / zoom;
+            const tolSq = tol * tol;
+            const p = event.world;
+            // Tap on the first vertex → close the ring and commit.
+            if (vertices.length >= 3 && distSq(p, vertices[0]) <= tolSq) {
+                commit(ctx, true);
+                return;
+            }
+            // Tap on the last vertex (tap-again / double-tap) → finish open.
+            if (vertices.length >= 1 &&
+                distSq(p, vertices[vertices.length - 1]) <= tolSq) {
+                if (vertices.length >= 2) {
+                    commit(ctx, false);
+                }
+                else {
+                    // Re-tapped the only vertex — treat as "never mind".
+                    reset();
+                    ctx.preview({ ops: [] });
+                }
+                return;
+            }
+            if (!shapeId)
+                shapeId = makeId();
+            // Immutable append (defense in depth alongside buildShape's snapshot):
+            // nothing downstream can ever observe this buffer mutating.
+            vertices = [...vertices, { x: p.x, y: p.y }];
+            ctx.preview({ ops: previewOps(ctx.document, zoom) });
+        },
+        // Gesture interrupted (e.g. a second finger landed and the viewport pan
+        // took over). Keep the placed vertices and re-establish the preview — the
+        // canvas clears the preview patch before calling this.
+        onCancel(_state, ctx) {
+            if (vertices.length === 0)
+                return;
+            ctx.preview({ ops: previewOps(ctx.document, ctx.viewport.state.zoom) });
+        },
+        // Switching tools mid-build: commit what exists as an open polyline (two
+        // or more vertices make a real shape; a lone vertex is discarded).
+        onDeactivate(ctx) {
+            if (vertices.length >= 2) {
+                commit(ctx, false);
+            }
+            else {
+                reset();
+            }
+        },
+    };
+};