@reekon-tools/boldr-utils 1.6.11 → 1.6.13

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

@@ -0,0 +1,446 @@
+import { STAMP_TILE_SIZE } from '../stampLayout.js';
+import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, normalizeRect, rectCenter, rectCornerPoint, oppositeRectCorner, } from '../measurementGeometry.js';
+import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.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;
+};
+// Screen-space grab tolerance (px) for a measurement-annotation line, converted
+// to doc space via zoom (the line itself is a thin world-space stroke).
+const LINE_GRAB_PX = 12;
+// Screen-px radius of the center snap detent when sliding a tile along its line.
+// Converted to t-space per line via (SNAP_PX / zoom) / lineLength. The native
+// slide worklet inlines the same value — keep them in sync.
+const SLIDE_SNAP_PX = 12;
+// Screen-px grab radius for a line-annotation endpoint handle (converted to doc
+// space via zoom). A bit larger than the drawn handle so it's easy to grab.
+const HANDLE_GRAB_PX = 22;
+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);
+    if (dx <= half && dy <= half)
+        return true;
+    // Measurement annotation: also grab anywhere along the line body.
+    if (m.line) {
+        const r = LINE_GRAB_PX / zoom;
+        if (segmentDistanceSq(p.x, p.y, m.line.a.x, m.line.a.y, m.line.b.x, m.line.b.y) <=
+            r * r) {
+            return true;
+        }
+    }
+    // Rectangle annotation: grab anywhere along the border (the interior stays
+    // transparent to hits so elements behind the rect remain selectable).
+    if (m.rect && placementOf(m) === 'rectangle') {
+        const n = normalizeRect(m.rect);
+        const r2 = (LINE_GRAB_PX / zoom) ** 2;
+        if (segmentDistanceSq(p.x, p.y, n.minX, n.minY, n.maxX, n.minY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.maxX, n.minY, n.maxX, n.maxY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.maxX, n.maxY, n.minX, n.maxY) <= r2 ||
+            segmentDistanceSq(p.x, p.y, n.minX, n.maxY, n.minX, n.minY) <= r2) {
+            return true;
+        }
+    }
+    return false;
+};
+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.
+        // Text shapes store only their top-left anchor, so their box comes from
+        // the estimated text bounds instead.
+        const s = doc.shapes[i];
+        let minX;
+        let maxX;
+        let minY;
+        let maxY;
+        if (s.kind === 'text') {
+            const b = textShapeBounds(s);
+            if (!b)
+                continue;
+            ({ minX, maxX, minY, maxY } = b);
+        }
+        else {
+            const pts = s.geometry.points;
+            if (pts.length === 0)
+                continue;
+            minX = pts[0].x;
+            maxX = pts[0].x;
+            minY = pts[0].y;
+            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;
+        // Group move: translate the whole annotation uniformly. `anchor` stays
+        // consistent with the line (lerp is affine, so translating both endpoints
+        // translates the anchor by the same delta). Only emit keys that exist so
+        // the patch never carries `undefined` (Firestore rejects undefined values).
+        const tx = (p) => ({ x: p.x + delta.x, y: p.y + delta.y });
+        const patch = { anchor: tx(m.anchor) };
+        if (m.line)
+            patch.line = { a: tx(m.line.a), b: tx(m.line.b) };
+        if (m.rect)
+            patch.rect = { a: tx(m.rect.a), b: tx(m.rect.b) };
+        if (m.leader)
+            patch.leader = { from: tx(m.leader.from), to: tx(m.leader.to) };
+        return { op: 'updateMeasurement', id, patch };
+    }
+    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 } };
+};
+// --- Measurement-annotation grab logic (shared by the native UI-thread drag
+// via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
+// Grabbing the tile of a line annotation slides it along the line; everything
+// else (bare stamps, grabs on the line body) is a group move.
+const classifyGrab = (doc, id, world, zoom) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m)
+        return 'move';
+    const scale = m.scale ?? 1;
+    const half = ((STAMP_TILE_SIZE * scale) / 2 + HIT_PADDING) / zoom;
+    const onTile = Math.abs(world.x - m.anchor.x) <= half &&
+        Math.abs(world.y - m.anchor.y) <= half;
+    return onTile && placementOf(m) === 'line' && m.line ? 'slide' : 'move';
+};
+// Slide the tile along its line by a world-space drag delta (relative to
+// grab-start), clamped to [0,1] with a center snap, and rewrite anchor. The
+// native slide worklet in AnnotationCanvasInner.native.tsx mirrors this math.
+const slidePatch = (doc, id, delta, zoom) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.line || placementOf(m) !== 'line')
+        return null;
+    const abx = m.line.b.x - m.line.a.x;
+    const aby = m.line.b.y - m.line.a.y;
+    const lenSq = abx * abx + aby * aby;
+    if (lenSq === 0)
+        return null;
+    let t = linePosOf(m) + (delta.x * abx + delta.y * aby) / lenSq;
+    t = t < 0 ? 0 : t > 1 ? 1 : t;
+    const snapT = SLIDE_SNAP_PX / zoom / Math.sqrt(lenSq);
+    t = snapLinePos(t, snapT);
+    const anchor = lerp(m.line.a, m.line.b, t);
+    return { ops: [{ op: 'updateMeasurement', id, patch: { linePos: t, anchor } }] };
+};
+// Which endpoint handle of a (selected) line annotation is under `world`.
+// Prefers the nearer endpoint when both are within range.
+const findHandleHit = (doc, id, world, zoom) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.line || placementOf(m) !== 'line')
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    const da = (world.x - m.line.a.x) ** 2 + (world.y - m.line.a.y) ** 2;
+    const db = (world.x - m.line.b.x) ** 2 + (world.y - m.line.b.y) ** 2;
+    if (da <= r2 && da <= db)
+        return 'a';
+    if (db <= r2)
+        return 'b';
+    return null;
+};
+// Move one endpoint by a world delta (resize/rotate); keep the tile at its
+// linePos by rewriting anchor.
+const endpointPatch = (doc, id, handle, delta) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.line || placementOf(m) !== 'line')
+        return null;
+    const a = handle === 'a'
+        ? { x: m.line.a.x + delta.x, y: m.line.a.y + delta.y }
+        : m.line.a;
+    const b = handle === 'b'
+        ? { x: m.line.b.x + delta.x, y: m.line.b.y + delta.y }
+        : m.line.b;
+    const line = { a, b };
+    const anchor = recomputeAnchor(line, 'line', linePosOf(m), m.anchor);
+    return { ops: [{ op: 'updateMeasurement', id, patch: { line, anchor } }] };
+};
+// Which corner handle of a (selected) rectangle annotation is under `world`.
+// Prefers the nearest corner when several are within range (small rects).
+const findRectCornerHit = (doc, id, world, zoom) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.rect || placementOf(m) !== 'rectangle')
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    let best = null;
+    for (const corner of ['tl', 'tr', 'bl', 'br']) {
+        const p = rectCornerPoint(m.rect, corner);
+        const d = (world.x - p.x) ** 2 + (world.y - p.y) ** 2;
+        if (d <= r2 && (!best || d < best.d))
+            best = { corner, d };
+    }
+    if (!best)
+        return null;
+    return {
+        corner: best.corner,
+        moving: rectCornerPoint(m.rect, best.corner),
+        fixed: rectCornerPoint(m.rect, oppositeRectCorner(best.corner)),
+    };
+};
+// Drag one rect corner by a world delta (opposite corner fixed) and re-center
+// the anchor, keeping the tile locked to the rect's center.
+const rectCornerPatch = (doc, id, corner, delta) => {
+    const m = doc.placedMeasurements.find((x) => x.id === id);
+    if (!m || !m.rect || placementOf(m) !== 'rectangle')
+        return null;
+    const moving = rectCornerPoint(m.rect, corner);
+    const rect = {
+        a: rectCornerPoint(m.rect, oppositeRectCorner(corner)),
+        b: { x: moving.x + delta.x, y: moving.y + delta.y },
+    };
+    return {
+        ops: [
+            { op: 'updateMeasurement', id, patch: { rect, anchor: rectCenter(rect) } },
+        ],
+    };
+};
+// --- Text-shape resize (corner-scale about the top-left anchor; shared by the
+// native UI-thread drag via DragSelectionConfig AND the web pointer handlers) ---
+// Resize geometry when the (selected) text shape's corner handle is under
+// `world`, else null. The handle is drawn on the padded selection box's
+// bottom-right corner (see AnnotationCanvasSkia); grab radius matches the
+// measurement endpoint handles.
+const findResizeHandleHit = (doc, id, world, zoom) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s)
+        return null;
+    const geom = textResizeGeometry(s);
+    if (!geom)
+        return null;
+    const r2 = (HANDLE_GRAB_PX / zoom) ** 2;
+    const dx = world.x - geom.handle.x;
+    const dy = world.y - geom.handle.y;
+    return dx * dx + dy * dy <= r2 ? geom : null;
+};
+// Scale the text shape's fontSize by the drag (clamped to the geometry's
+// scale range, so it matches the native live preview exactly). The anchor —
+// the scale pivot — is untouched.
+const resizePatch = (doc, id, delta) => {
+    const s = doc.shapes.find((x) => x.id === id);
+    if (!s)
+        return null;
+    const geom = textResizeGeometry(s);
+    if (!geom)
+        return null;
+    const scale = resizeScaleFromDrag(geom, delta);
+    const fontSize = Math.round((s.style.fontSize ?? DEFAULT_TEXT_FONT_SIZE) * scale * 10) / 10;
+    return {
+        ops: [
+            { op: 'updateShape', id, patch: { style: { ...s.style, fontSize } } },
+        ],
+    };
+};
+// Patch for the current drag mode (web pointer path), from a world-space delta.
+const dragPatch = (s, doc, delta, zoom) => {
+    if (s.mode === 'endpoint' && s.handle) {
+        return endpointPatch(doc, s.id, s.handle, delta);
+    }
+    if (s.mode === 'slide')
+        return slidePatch(doc, s.id, delta, zoom);
+    if (s.mode === 'resize')
+        return resizePatch(doc, s.id, delta);
+    if (s.mode === 'rect-corner' && s.corner) {
+        return rectCornerPatch(doc, s.id, s.corner, delta);
+    }
+    const op = translatePatch(s.elementKind, s.id, doc, delta);
+    return op ? { ops: [op] } : null;
+};
+export const createSelectTool = () => ({
+    id: 'select',
+    label: 'Select',
+    cursor: 'default',
+    // Native drags the hit element on the UI thread (see DragSelectionConfig),
+    // reusing the same hit-test and translate logic the pointer handlers below
+    // use for web — one source of truth.
+    dragSelection: {
+        hitTest: (doc, world, zoom) => findHit(doc, world, zoom),
+        buildTranslatePatch: (doc, id, kind, delta) => {
+            const op = translatePatch(kind, id, doc, delta);
+            return op ? { ops: [op] } : null;
+        },
+        classifyMeasurementGrab: classifyGrab,
+        buildSlidePatch: slidePatch,
+        hitTestHandle: findHandleHit,
+        buildEndpointPatch: endpointPatch,
+        hitTestResizeHandle: findResizeHandleHit,
+        buildResizePatch: resizePatch,
+        hitTestRectCorner: findRectCornerHit,
+        buildRectCornerPatch: rectCornerPatch,
+    },
+    // Web pointer path. Mirrors the native UI-thread drag using the same shared
+    // helpers: an endpoint handle on the selected annotation resizes the line;
+    // grabbing a line-annotation tile slides it; everything else group-moves.
+    onPointerDown(event, ctx) {
+        const { world } = event;
+        const zoom = ctx.viewport.state.zoom;
+        // Endpoint/resize handles show only on the selected element — check first.
+        const selId = ctx.selection?.ids[0];
+        if (selId) {
+            const handle = findHandleHit(ctx.document, selId, world, zoom);
+            if (handle) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'measurement',
+                    mode: 'endpoint',
+                    handle,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
+            if (findResizeHandleHit(ctx.document, selId, world, zoom)) {
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'shape',
+                    mode: 'resize',
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
+            const rectCorner = findRectCornerHit(ctx.document, selId, world, zoom);
+            if (rectCorner) {
+                ctx.setSelection({ ids: [selId] });
+                return {
+                    kind: 'dragging',
+                    id: selId,
+                    elementKind: 'measurement',
+                    mode: 'rect-corner',
+                    corner: rectCorner.corner,
+                    start: world,
+                    delta: { x: 0, y: 0 },
+                };
+            }
+        }
+        const hit = findHit(ctx.document, world, zoom);
+        if (!hit) {
+            ctx.setSelection(null);
+            return { kind: 'idle' };
+        }
+        ctx.setSelection({ ids: [hit.id] });
+        const mode = hit.kind === 'measurement' &&
+            classifyGrab(ctx.document, hit.id, world, zoom) === 'slide'
+            ? 'slide'
+            : 'move';
+        return {
+            kind: 'dragging',
+            id: hit.id,
+            elementKind: hit.kind,
+            mode,
+            start: 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 patch = dragPatch(s, ctx.document, delta, ctx.viewport.state.zoom);
+        if (patch)
+            ctx.preview(patch);
+        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 patch = dragPatch(s, ctx.document, s.delta, ctx.viewport.state.zoom);
+        if (patch)
+            ctx.commit(patch);
+    },
+    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/annotation/canvas/tools/textTool.d.ts

@@ -0,0 +1,12 @@
+import type { AnnotationShape } from '../../../types/annotation.js';
+import type { Tool } from '../Tool.js';
+export interface TextToolOptions {
+    color?: string;
+    fontSize?: number;
+    dash?: boolean;
+    autoSwitchToSelect?: boolean;
+    onPlaced?: (shape: AnnotationShape) => void;
+    onAutoSwitch?: (toToolId: string) => void;
+    selectToolId?: string;
+}
+export declare const createTextTool: (options?: TextToolOptions) => Tool;

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

@@ -0,0 +1,78 @@
+import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
+import { DEFAULT_TEXT_FONT_SIZE, hitTestTextShape } from '../textGeometry.js';
+let counter = 0;
+const makeId = () => `text-${Date.now().toString(36)}-${(counter++).toString(36)}`;
+const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
+// Topmost text shape under a world point, for tap-to-edit.
+const findTextShapeAt = (doc, world) => {
+    for (let i = doc.shapes.length - 1; i >= 0; i--) {
+        const s = doc.shapes[i];
+        if (s.kind === 'text' && hitTestTextShape(s, world))
+            return s;
+    }
+    return null;
+};
+// Tap-to-type. Tapping empty canvas opens the consumer's text input and
+// commits a new text shape at the tap point (top-left anchored); tapping an
+// existing text shape re-opens the input pre-filled to edit it (clearing the
+// text deletes the shape). Both paths leave the shape selected and (by
+// default) switch back to select so it can be dragged/resized immediately —
+// the same flow as the measurement stamp tool. Skia-free, like every tool.
+export const createTextTool = (options = {}) => {
+    const color = options.color ?? '#111827';
+    const fontSize = options.fontSize ?? DEFAULT_TEXT_FONT_SIZE;
+    const dash = options.dash ?? false;
+    const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
+    const selectToolId = options.selectToolId ?? 'select';
+    return {
+        id: 'text',
+        label: 'Text',
+        cursor: 'text',
+        onPointerUp(event, ctx) {
+            const existing = findTextShapeAt(ctx.document, event.world);
+            if (existing) {
+                void ctx
+                    .requestTextInput({ initialText: existing.text })
+                    .then((text) => {
+                    if (text === null)
+                        return;
+                    if (text === '') {
+                        ctx.commit({ ops: [{ op: 'removeShape', id: existing.id }] });
+                        ctx.setSelection(null);
+                        return;
+                    }
+                    if (text !== existing.text) {
+                        ctx.commit({
+                            ops: [{ op: 'updateShape', id: existing.id, patch: { text } }],
+                        });
+                    }
+                    ctx.setSelection({ ids: [existing.id] });
+                    if (autoSwitchToSelect)
+                        options.onAutoSwitch?.(selectToolId);
+                });
+                return;
+            }
+            const anchor = event.world;
+            void ctx.requestTextInput().then((text) => {
+                if (!text)
+                    return;
+                const shape = {
+                    id: makeId(),
+                    layerId: firstLayerId(ctx.document),
+                    kind: 'text',
+                    geometry: { points: [anchor] },
+                    // `...(dash && ...)` keeps the key absent (not `false`) for solid
+                    // text, matching the stroke convention (absent === solid).
+                    style: { stroke: color, fontSize, ...(dash && { dash: true }) },
+                    text,
+                    createdAt: Date.now(),
+                };
+                ctx.commit({ ops: [{ op: 'addShape', shape }] });
+                ctx.setSelection({ ids: [shape.id] });
+                options.onPlaced?.(shape);
+                if (autoSwitchToSelect)
+                    options.onAutoSwitch?.(selectToolId);
+            });
+        },
+    };
+};

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

@@ -1,7 +1,7 @@
-import type { Measurement } from '../types/firestore.js';
-import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationStroke, type Selection, type Vec2 } from '../types/annotation.js';
+import type { Measurement } from '../../types/firestore.js';
+import { type AnnotationCanvasState, type AnnotationDocumentPatch, type AnnotationElementId, type AnnotationStroke, type MeasurementPlacement, 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 { CanvasPointerEvent, RequestTextInput, Tool, ToolContext, ToolState } from './Tool.js';
 import { type ViewportState } from './viewport.js';
 export interface AnnotationCanvasHandle {
     undo(): void;
@@ -11,6 +11,12 @@ export interface AnnotationCanvasHandle {
     zoomToFit(): void;
     resetView(): void;
     placeMeasurementAtCenter(ref: MeasurementRef): void;
+    placeAnnotationAtCenter(opts?: {
+        defaultLengthDoc?: number;
+    }): void;
+    setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
+    associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
+    deleteSelected(): void;
 }
 export interface UseAnnotationCanvasStateProps {
     canvas: AnnotationCanvasState;
@@ -21,6 +27,7 @@ export interface UseAnnotationCanvasStateProps {
     onSelectionChange(selection: Selection | null): void;
     measurements?: Measurement[];
     pickMeasurement?: () => Promise<MeasurementRef | null>;
+    requestTextInput?: RequestTextInput;
     width: number;
     height: number;
     initialViewport?: ViewportState;
@@ -50,5 +57,6 @@ export interface AnnotationCanvasStateApi {
     dispatchPointerCancel(): void;
     pan(deltaScreen: Vec2): void;
     zoom(focalScreen: Vec2, nextZoom: number): void;
+    setViewport(next: ViewportState): void;
 }
 export declare const useAnnotationCanvasState: (props: UseAnnotationCanvasStateProps) => AnnotationCanvasStateApi;