@reekon-tools/boldr-utils 1.6.17 → 1.6.18

package/dist/canvas/elements/MeasurementStampElement.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Group, Line, RoundedRect, Text, } from '@shopify/react-native-skia';
+import { DecimalTolerance, FractionalTolerance, } from '../../types/firestore.js';
+import { convertMicrometers } from '../../utils/micrometersToUnit.js';
+import { STAMP_HEIGHT, STAMP_PADDING_X, STAMP_PADDING_Y, STAMP_WIDTH, } from '../stampLayout.js';
+const VALUE_FONT_BASELINE_OFFSET = 14;
+const LABEL_FONT_BASELINE_OFFSET = 24;
+const formatValue = (measurement, unit, fractionalTolerance, decimalTolerance) => {
+    if (!measurement)
+        return '—';
+    const result = convertMicrometers(measurement.value, unit, fractionalTolerance, decimalTolerance);
+    return `${result.value}${result.unit ? ` ${result.unit}` : ''}`;
+};
+export const MeasurementStampElement = ({ placed, measurement, fallbackUnit, fractionalTolerance = FractionalTolerance.Sixteenth, decimalTolerance = DecimalTolerance.Hundredth, valueFont, labelFont, }) => {
+    const unit = placed.unitOverride ?? measurement?.unit ?? fallbackUnit;
+    const valueText = formatValue(measurement, unit, fractionalTolerance, decimalTolerance);
+    const label = placed.labelOverride ??
+        measurement?.label ??
+        (measurement
+            ? `M${measurement.measurementIndex ?? ''}`
+            : '');
+    const showLabel = placed.showLabel !== false && !!label;
+    const showValue = placed.showValue !== false;
+    const scale = placed.scale ?? 1;
+    // Fixed-size stamp — no measureText calls. Keeps rendering deterministic
+    // even when no font is loaded (browser/native both).
+    const baseX = placed.anchor.x - (STAMP_WIDTH * scale) / 2;
+    const baseY = placed.anchor.y - (STAMP_HEIGHT * scale) / 2;
+    return (_jsxs(Group, { transform: [{ translateX: baseX }, { translateY: baseY }, { scale }], children: [placed.leader && (_jsx(Line, { p1: placed.leader.from, p2: placed.leader.to, color: "#3B82F6", style: "stroke", strokeWidth: 1.5 })), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#FFFFFFEE" }), _jsx(RoundedRect, { x: 0, y: 0, width: STAMP_WIDTH, height: STAMP_HEIGHT, r: 6, color: "#3B82F6", style: "stroke", strokeWidth: 1.25 }), showValue && valueFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + VALUE_FONT_BASELINE_OFFSET, text: valueText, font: valueFont, color: "#111827" })), showLabel && labelFont && (_jsx(Text, { x: STAMP_PADDING_X, y: STAMP_PADDING_Y + LABEL_FONT_BASELINE_OFFSET, text: label, font: labelFont, color: "#6B7280" }))] }));
+};

package/dist/canvas/elements/ShapeElement.d.ts

@@ -0,0 +1,7 @@
+import { type SkFont } from '@shopify/react-native-skia';
+import type { AnnotationShape } from '../../types/annotation.js';
+export interface ShapeElementProps {
+    shape: AnnotationShape;
+    font?: SkFont | null;
+}
+export declare const ShapeElement: ({ shape, font }: ShapeElementProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/canvas/elements/ShapeElement.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Line, Path, Rect, Skia, Text, } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+const polygonPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length === 0)
+        return path;
+    path.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+        path.lineTo(points[i].x, points[i].y);
+    }
+    path.close();
+    return path;
+};
+export const ShapeElement = ({ shape, font }) => {
+    const { kind, geometry, style, text } = shape;
+    const stroke = style.stroke ?? '#000000';
+    const fill = style.fill;
+    const strokeWidth = style.strokeWidth ?? 2;
+    const polyPath = useMemo(() => (kind === 'polygon' ? polygonPath(geometry.points) : null), [kind, geometry.points]);
+    switch (kind) {
+        case 'rect': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            const x = Math.min(a.x, b.x);
+            const y = Math.min(a.y, b.y);
+            const w = Math.abs(b.x - a.x);
+            const h = Math.abs(b.y - a.y);
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Rect, { x: x, y: y, width: w, height: h, color: fill }), _jsx(Rect, { x: x, y: y, width: w, height: h, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'ellipse': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            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;
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Circle, { cx: cx, cy: cy, r: r, color: fill }), _jsx(Circle, { cx: cx, cy: cy, r: r, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'line':
+        case 'arrow': {
+            const [a, b] = geometry.points;
+            if (!a || !b)
+                return null;
+            return (_jsx(Line, { p1: a, p2: b, color: stroke, style: "stroke", strokeWidth: strokeWidth, strokeCap: "round" }));
+        }
+        case 'polygon': {
+            if (!polyPath)
+                return null;
+            return (_jsxs(_Fragment, { children: [fill && _jsx(Path, { path: polyPath, color: fill }), _jsx(Path, { path: polyPath, color: stroke, style: "stroke", strokeWidth: strokeWidth })] }));
+        }
+        case 'text': {
+            const [origin] = geometry.points;
+            if (!origin || !text)
+                return null;
+            if (!font)
+                return null;
+            return (_jsx(Text, { x: origin.x, y: origin.y, text: text, font: font, color: stroke }));
+        }
+    }
+};

package/dist/canvas/elements/StrokeElement.d.ts

@@ -0,0 +1,7 @@
+import { type SkPath } from '@shopify/react-native-skia';
+import type { AnnotationStroke } from '../../types/annotation.js';
+export declare const pointsToSkPath: (points: number[]) => SkPath;
+export interface StrokeElementProps {
+    stroke: AnnotationStroke;
+}
+export declare const StrokeElement: ({ stroke }: StrokeElementProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/elements/StrokeElement.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Path, Skia } from '@shopify/react-native-skia';
+import { useMemo } from 'react';
+export const pointsToSkPath = (points) => {
+    const path = Skia.Path.Make();
+    if (points.length < 2)
+        return path;
+    path.moveTo(points[0], points[1]);
+    for (let i = 2; i < points.length; i += 2) {
+        path.lineTo(points[i], points[i + 1]);
+    }
+    return path;
+};
+export const StrokeElement = ({ stroke }) => {
+    const path = useMemo(() => pointsToSkPath(stroke.points), [stroke.points]);
+    const opacity = stroke.tool === 'highlighter' ? 0.3 : 1;
+    return (_jsx(Path, { path: path, color: stroke.color, style: "stroke", strokeWidth: stroke.width, strokeCap: "round", strokeJoin: "round", opacity: opacity }));
+};

package/dist/canvas/measurementPicker.d.ts

@@ -0,0 +1,10 @@
+import type { Units } from '../types/firestore.js';
+export interface MeasurementRef {
+    measurementId: string;
+    measurementPath: string;
+    groupId: string;
+    label?: string;
+    value?: number;
+    unit?: Units;
+}
+export type PickMeasurement = () => Promise<MeasurementRef | null>;

package/dist/canvas/measurementPicker.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/measurementStampOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import type { PlacedMeasurementRef } from '../types/annotation.js';
+import type { Measurement } from '../types/firestore.js';
+export interface MeasurementStampRenderArgs {
+    placed: PlacedMeasurementRef;
+    measurement: Measurement | null;
+    selected: boolean;
+    size: number;
+    zoom: number;
+}
+export type RenderMeasurementStamp = (args: MeasurementStampRenderArgs) => ReactNode;

package/dist/canvas/measurementStampOverlay.js

@@ -0,0 +1 @@
+export {};

package/dist/canvas/pointerAdapter.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasPointerEvent } from './Tool.js';
+import type { ViewportApi } from './viewport.js';
+export declare const domEventToCanvasPointerEvent: (event: PointerEvent, canvas: HTMLElement, viewport: ViewportApi) => CanvasPointerEvent;

package/dist/canvas/pointerAdapter.js

@@ -0,0 +1,19 @@
+// Web DOM PointerEvent → CanvasPointerEvent. The native variant will live
+// in pointerAdapter.native.ts and will translate gesture-handler events.
+export const domEventToCanvasPointerEvent = (event, canvas, viewport) => {
+    const rect = canvas.getBoundingClientRect();
+    const screen = {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+    };
+    return {
+        pointerId: event.pointerId,
+        screen,
+        world: viewport.screenToWorld(screen),
+        pressure: event.pressure || undefined,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+        ctrlKey: event.ctrlKey,
+    };
+};

package/dist/canvas/stampLayout.d.ts

@@ -0,0 +1,5 @@
+export declare const STAMP_WIDTH = 120;
+export declare const STAMP_HEIGHT = 44;
+export declare const STAMP_PADDING_X = 10;
+export declare const STAMP_PADDING_Y = 6;
+export declare const STAMP_TILE_SIZE = 120;

package/dist/canvas/stampLayout.js

@@ -0,0 +1,14 @@
+// Shared layout constants for the placed measurement stamp. Lives in a
+// Skia-free module so both render (MeasurementStampElement) and hit-test
+// (selectTool) can import it without dragging @shopify/react-native-skia
+// into the consumer's static import graph.
+export const STAMP_WIDTH = 120;
+export const STAMP_HEIGHT = 44;
+export const STAMP_PADDING_X = 10;
+export const STAMP_PADDING_Y = 6;
+// Constant SCREEN-space edge length of a placed measurement rendered as a
+// square tile (the overlay path — see measurementStampOverlay.ts). 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 = 120;

package/dist/canvas/tools/measurementStampTool.d.ts

@@ -0,0 +1,9 @@
+import type { PlacedMeasurementRef } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface MeasurementStampToolOptions {
+    autoSwitchToSelect?: boolean;
+    onPlaced?: (ref: PlacedMeasurementRef) => void;
+    onAutoSwitch?: (toToolId: string) => void;
+    selectToolId?: string;
+}
+export declare const createMeasurementStampTool: (options?: MeasurementStampToolOptions) => Tool;

package/dist/canvas/tools/measurementStampTool.js

@@ -0,0 +1,37 @@
+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;
+export const createMeasurementStampTool = (options = {}) => {
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: 'measurement',
+        label: 'Place measurement',
+        cursor: 'copy',
+        onPointerUp(event, ctx) {
+            // Tap-to-place. Open the consumer's picker and commit on selection.
+            void ctx.requestPickMeasurement().then((ref) => {
+                if (!ref)
+                    return;
+                const placed = {
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    measurementPath: ref.measurementPath,
+                    measurementId: ref.measurementId,
+                    groupId: ref.groupId,
+                    anchor: event.world,
+                    labelOverride: ref.label,
+                    unitOverride: ref.unit,
+                    showLabel: true,
+                    showValue: true,
+                    createdAt: Date.now(),
+                };
+                ctx.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                options.onPlaced?.(placed);
+                if (autoSwitchToSelect)
+                    options.onAutoSwitch?.(selectToolId);
+            });
+        },
+    };
+};

package/dist/canvas/tools/panTool.d.ts

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

package/dist/canvas/tools/panTool.js

@@ -0,0 +1,25 @@
+// 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.
+export const createPanTool = (options = {}) => ({
+    id: 'pan',
+    label: 'Hand',
+    cursor: options.cursor ?? 'grab',
+    onPointerDown(event, _ctx, _state) {
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerMove(event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'panning')
+            return s;
+        const delta = {
+            x: event.screen.x - s.lastScreen.x,
+            y: event.screen.y - s.lastScreen.y,
+        };
+        ctx.applyPan(delta);
+        return { kind: 'panning', lastScreen: event.screen };
+    },
+    onPointerUp(_event, _ctx, _state) {
+        // No commit — viewport state is canvas-internal, not persisted.
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { AnnotationStroke } from '../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface PenToolOptions {
+    color?: string;
+    width?: number;
+    minSampleDistance?: number;
+    variant?: 'pen' | 'marker' | 'highlighter';
+}
+export interface PenDrawingState {
+    kind: 'pen-drawing';
+    stroke: AnnotationStroke;
+}
+export declare const createPenTool: (options?: PenToolOptions) => Tool;

package/dist/canvas/tools/penTool.js

@@ -0,0 +1,68 @@
+import { DEFAULT_LAYER_ID } from '../../types/annotation.js';
+const distSq = (ax, ay, bx, by) => {
+    const dx = ax - bx;
+    const dy = ay - by;
+    return dx * dx + dy * dy;
+};
+let counter = 0;
+const makeId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+export const createPenTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const width = options.width ?? 2;
+    const variant = options.variant ?? 'pen';
+    const minSampleDistance = options.minSampleDistance ?? 1.5;
+    const minSampleDistanceSq = minSampleDistance * minSampleDistance;
+    return {
+        id: variant,
+        label: variant === 'pen' ? 'Pen' : variant === 'marker' ? 'Marker' : 'Highlighter',
+        cursor: 'crosshair',
+        onPointerDown(event, ctx) {
+            const stroke = {
+                id: makeId('stroke'),
+                layerId: ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                tool: variant,
+                color,
+                width,
+                points: [event.world.x, event.world.y],
+                pressure: event.pressure !== undefined ? [event.pressure] : undefined,
+                createdAt: Date.now(),
+            };
+            return { kind: 'pen-drawing', stroke };
+        },
+        onPointerMove(event, _ctx, state) {
+            const s = state;
+            if (s?.kind !== 'pen-drawing')
+                return s;
+            const len = s.stroke.points.length;
+            const lastX = s.stroke.points[len - 2];
+            const lastY = s.stroke.points[len - 1];
+            if (distSq(lastX, lastY, event.world.x, event.world.y) < minSampleDistanceSq) {
+                return s;
+            }
+            return {
+                kind: 'pen-drawing',
+                stroke: {
+                    ...s.stroke,
+                    points: [...s.stroke.points, event.world.x, event.world.y],
+                    pressure: s.stroke.pressure && event.pressure !== undefined
+                        ? [...s.stroke.pressure, event.pressure]
+                        : s.stroke.pressure,
+                },
+            };
+        },
+        onPointerUp(_event, ctx, state) {
+            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 }] });
+        },
+        // No renderPreview. The canvas inner detects PenDrawingState in
+        // toolState and renders the in-flight stroke directly with its own
+        // (Skia-aware) StrokeElement. Keeping tools Skia-free is what lets
+        // consumers import them statically without breaking WithSkiaWeb's
+        // lazy-load ordering on web.
+    };
+};

package/dist/canvas/tools/selectTool.d.ts

@@ -0,0 +1,2 @@
+import type { Tool } from '../Tool.js';
+export declare const createSelectTool: () => Tool;

package/dist/canvas/tools/selectTool.js

@@ -0,0 +1,182 @@
+import { STAMP_TILE_SIZE } from '../stampLayout.js';
+const HIT_PADDING = 6;
+// Hit-test in doc-space. Crude but fast — good enough for v1; tools can
+// override via `hitTest` for more precision later.
+const hitStroke = (stroke, p) => {
+    const r = stroke.width / 2 + HIT_PADDING;
+    const r2 = r * r;
+    for (let i = 0; i < stroke.points.length - 2; i += 2) {
+        if (segmentDistanceSq(p.x, p.y, stroke.points[i], stroke.points[i + 1], stroke.points[i + 2], stroke.points[i + 3]) <= r2) {
+            return true;
+        }
+    }
+    return false;
+};
+const hitMeasurement = (m, p, zoom = 1) => {
+    // The stamp renders as a constant *screen*-size square centered on the
+    // anchor, so its doc-space footprint shrinks as you zoom in. Convert the
+    // screen-space half-extent (+ padding) back to doc space via the zoom so
+    // the hit box always matches what's drawn.
+    const scale = m.scale ?? 1;
+    const half = ((STAMP_TILE_SIZE * scale) / 2 + HIT_PADDING) / zoom;
+    const dx = Math.abs(p.x - m.anchor.x);
+    const dy = Math.abs(p.y - m.anchor.y);
+    return dx <= half && dy <= half;
+};
+const segmentDistanceSq = (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 cx = ax + t * abx;
+    const cy = ay + t * aby;
+    const dx = px - cx;
+    const dy = py - cy;
+    return dx * dx + dy * dy;
+};
+const findHit = (doc, world, zoom) => {
+    // Hit-test in z-order (top first): measurements > shapes > strokes.
+    for (let i = doc.placedMeasurements.length - 1; i >= 0; i--) {
+        const m = doc.placedMeasurements[i];
+        if (hitMeasurement(m, world, zoom))
+            return { id: m.id, kind: 'measurement' };
+    }
+    for (let i = doc.shapes.length - 1; i >= 0; i--) {
+        // Default shape hit test: bounding box of the shape's points + padding.
+        const s = doc.shapes[i];
+        const pts = s.geometry.points;
+        if (pts.length === 0)
+            continue;
+        let minX = pts[0].x;
+        let maxX = pts[0].x;
+        let minY = pts[0].y;
+        let maxY = pts[0].y;
+        for (let j = 1; j < pts.length; j++) {
+            const p = pts[j];
+            if (p.x < minX)
+                minX = p.x;
+            if (p.x > maxX)
+                maxX = p.x;
+            if (p.y < minY)
+                minY = p.y;
+            if (p.y > maxY)
+                maxY = p.y;
+        }
+        if (world.x >= minX - HIT_PADDING &&
+            world.x <= maxX + HIT_PADDING &&
+            world.y >= minY - HIT_PADDING &&
+            world.y <= maxY + HIT_PADDING) {
+            return { id: s.id, kind: 'shape' };
+        }
+    }
+    for (let i = doc.strokes.length - 1; i >= 0; i--) {
+        const s = doc.strokes[i];
+        if (hitStroke(s, world))
+            return { id: s.id, kind: 'stroke' };
+    }
+    return null;
+};
+const translatePatch = (elementKind, id, doc, delta) => {
+    if (elementKind === 'measurement') {
+        const m = doc.placedMeasurements.find((x) => x.id === id);
+        if (!m)
+            return null;
+        return {
+            op: 'updateMeasurement',
+            id,
+            patch: {
+                anchor: { x: m.anchor.x + delta.x, y: m.anchor.y + delta.y },
+                leader: m.leader
+                    ? {
+                        from: {
+                            x: m.leader.from.x + delta.x,
+                            y: m.leader.from.y + delta.y,
+                        },
+                        to: {
+                            x: m.leader.to.x + delta.x,
+                            y: m.leader.to.y + delta.y,
+                        },
+                    }
+                    : undefined,
+            },
+        };
+    }
+    if (elementKind === 'shape') {
+        const s = doc.shapes.find((x) => x.id === id);
+        if (!s)
+            return null;
+        return {
+            op: 'updateShape',
+            id,
+            patch: {
+                geometry: {
+                    ...s.geometry,
+                    points: s.geometry.points.map((p) => ({
+                        x: p.x + delta.x,
+                        y: p.y + delta.y,
+                    })),
+                },
+            },
+        };
+    }
+    const stroke = doc.strokes.find((x) => x.id === id);
+    if (!stroke)
+        return null;
+    const points = stroke.points.slice();
+    for (let i = 0; i < points.length; i += 2) {
+        points[i] = points[i] + delta.x;
+        points[i + 1] = points[i + 1] + delta.y;
+    }
+    return { op: 'updateStroke', id, patch: { points } };
+};
+export const createSelectTool = () => ({
+    id: 'select',
+    label: 'Select',
+    cursor: 'default',
+    onPointerDown(event, ctx) {
+        const hit = findHit(ctx.document, event.world, ctx.viewport.state.zoom);
+        if (!hit) {
+            ctx.setSelection(null);
+            return { kind: 'idle' };
+        }
+        ctx.setSelection({ ids: [hit.id] });
+        return {
+            kind: 'dragging',
+            id: hit.id,
+            elementKind: hit.kind,
+            start: event.world,
+            delta: { x: 0, y: 0 },
+        };
+    },
+    onPointerMove(event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'dragging')
+            return s;
+        const delta = { x: event.world.x - s.start.x, y: event.world.y - s.start.y };
+        const op = translatePatch(s.elementKind, s.id, ctx.document, delta);
+        if (op)
+            ctx.preview({ ops: [op] });
+        return { ...s, delta };
+    },
+    onPointerUp(_event, ctx, state) {
+        const s = state;
+        if (s?.kind !== 'dragging')
+            return;
+        if (s.delta.x === 0 && s.delta.y === 0)
+            return;
+        const op = translatePatch(s.elementKind, s.id, ctx.document, s.delta);
+        if (op)
+            ctx.commit({ ops: [op] });
+    },
+    onCancel(_state, ctx) {
+        ctx.preview({ ops: [] });
+    },
+    hitTest(element, p) {
+        if (element.kind === 'measurement')
+            return hitMeasurement(element, p);
+        if (element.kind === 'stroke')
+            return hitStroke(element, p);
+        return false;
+    },
+});

package/dist/canvas/useAnnotationCanvasState.d.ts

@@ -0,0 +1,54 @@
+import type { Measurement } from '../types/firestore.js';
+import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationStroke, type Selection, type Vec2 } from '../types/annotation.js';
+import type { MeasurementRef } from './measurementPicker.js';
+import type { CanvasPointerEvent, Tool, ToolContext, ToolState } from './Tool.js';
+import { type ViewportState } from './viewport.js';
+export interface AnnotationCanvasHandle {
+    undo(): void;
+    redo(): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    zoomToFit(): void;
+    resetView(): void;
+    placeMeasurementAtCenter(ref: MeasurementRef): void;
+}
+export interface UseAnnotationCanvasStateProps {
+    canvas: AnnotationCanvasState;
+    onCommit(patch: AnnotationDocumentPatch): void;
+    tools: Tool[];
+    activeToolId: string;
+    selection: Selection | null;
+    onSelectionChange(selection: Selection | null): void;
+    measurements?: Measurement[];
+    pickMeasurement?: () => Promise<MeasurementRef | null>;
+    width: number;
+    height: number;
+    initialViewport?: ViewportState;
+    imperativeRef?: {
+        current: AnnotationCanvasHandle | null;
+    };
+}
+export interface AnnotationCanvasStateApi {
+    effectiveCanvas: AnnotationCanvasState;
+    worldTransform: Array<{
+        scale: number;
+    } | {
+        translateX: number;
+    } | {
+        translateY: number;
+    }>;
+    viewport: ViewportState;
+    measurementsById: Map<string, Measurement>;
+    activeTool: Tool | null;
+    toolState: ToolState;
+    ctx: ToolContext;
+    penDrawingStroke: AnnotationStroke | null;
+    customPreviewState: ToolState;
+    dispatchPointerDown(event: CanvasPointerEvent): void;
+    dispatchPointerMove(event: CanvasPointerEvent): void;
+    dispatchPointerUp(event: CanvasPointerEvent): void;
+    dispatchPointerCancel(): void;
+    pan(deltaScreen: Vec2): void;
+    zoom(focalScreen: Vec2, nextZoom: number): void;
+}
+export declare const useAnnotationCanvasState: (props: UseAnnotationCanvasStateProps) => AnnotationCanvasStateApi;