@reekon-tools/boldr-utils 1.8.1 → 1.8.2

package/dist/annotation/canvas/svgRasterPlan.js

@@ -0,0 +1,225 @@
+// A whole-SVG raster may not exceed this per side. Kept modest because a full
+// raster is retained for the lifetime of the zoom level.
+export const FULL_RASTER_CAP = 4096;
+// A visible-region crop may not exceed this per side. Crops are transient and
+// sized by the screen, and every WebGL implementation this app targets
+// supports ≥8192px textures.
+export const CROP_RASTER_CAP = 8192;
+// Absolute pixel budget for one raster (≈96MB RGBA) — the caps above bound
+// each side, this bounds the area.
+export const MAX_RASTER_PIXELS = 24000000;
+// Fraction of the visible region added on each side of a crop, so small pans
+// stay inside the bitmap instead of re-rasterizing.
+export const CROP_MARGIN = 0.35;
+// Re-rasterize when the needed density outgrows the bitmap by this factor
+// (sharpen promptly on zoom-in)…
+export const REGEN_SCALE_UP = 1.3;
+// …or when the bitmap is this much denser than needed (reclaim memory lazily
+// on zoom-out; minified drawing looks fine meanwhile).
+export const REGEN_SCALE_DOWN = 0.5;
+const EMPTY_RECT = { x: 0, y: 0, width: 0, height: 0 };
+const intersectRect = (a, b) => {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    if (right <= x || bottom <= y)
+        return null;
+    return { x, y, width: right - x, height: bottom - y };
+};
+// Does `outer` contain `inner`, within eps svg-local px? An empty inner
+// (off-screen SVG) is trivially contained.
+export const rectContains = (outer, inner, eps = 0.5) => inner.width <= 0 ||
+    inner.height <= 0 ||
+    (inner.x >= outer.x - eps &&
+        inner.y >= outer.y - eps &&
+        inner.x + inner.width <= outer.x + outer.width + eps &&
+        inner.y + inner.height <= outer.y + outer.height + eps);
+// Clamp per-axis densities so `rect` rasterized at (zx, zy) fits the side cap
+// and the pixel budget, and derive the integer bitmap size.
+const capScales = (rect, zx, zy, cap) => {
+    let cx = Math.min(zx, cap / rect.width);
+    let cy = Math.min(zy, cap / rect.height);
+    const pixels = rect.width * cx * rect.height * cy;
+    if (pixels > MAX_RASTER_PIXELS) {
+        const r = Math.sqrt(MAX_RASTER_PIXELS / pixels);
+        cx *= r;
+        cy *= r;
+    }
+    const outWidth = Math.max(1, Math.ceil(rect.width * cx));
+    const outHeight = Math.max(1, Math.ceil(rect.height * cy));
+    return {
+        outWidth,
+        outHeight,
+        zx: outWidth / rect.width,
+        zy: outHeight / rect.height,
+    };
+};
+// Plan the raster the current viewport needs, or null when the inputs can't
+// produce one (degenerate sizes).
+export const planSvgRaster = (input) => {
+    const { widthPx, heightPx, dims, viewport, screenWidth, screenHeight } = input;
+    if (!(widthPx > 0) || !(heightPx > 0))
+        return null;
+    if (!(dims.width > 0) || !(dims.height > 0))
+        return null;
+    const zoom = viewport.zoom > 0 ? viewport.zoom : 1;
+    const dpr = input.dpr > 0 ? input.dpr : 1;
+    // Doc units per svg-local px (per-axis: 'stretch' fits are anisotropic).
+    const sx = dims.width / widthPx;
+    const sy = dims.height / heightPx;
+    // Device px per svg-local px the screen currently shows.
+    const zx = zoom * sx * dpr;
+    const zy = zoom * sy * dpr;
+    if (!Number.isFinite(zx) || !Number.isFinite(zy) || zx <= 0 || zy <= 0) {
+        return null;
+    }
+    const whole = { x: 0, y: 0, width: widthPx, height: heightPx };
+    const visibleDoc = {
+        x: viewport.pan.x,
+        y: viewport.pan.y,
+        width: Math.max(0, screenWidth) / zoom,
+        height: Math.max(0, screenHeight) / zoom,
+    };
+    const visible = intersectRect({
+        x: (visibleDoc.x - dims.x) / sx,
+        y: (visibleDoc.y - dims.y) / sy,
+        width: visibleDoc.width / sx,
+        height: visibleDoc.height / sy,
+    }, whole);
+    // Whole-SVG raster whenever the needed density fits the budget — pan never
+    // invalidates it. Also the fallback when the SVG is entirely off-screen
+    // (capped density; only used until something is visible again).
+    const fullFits = widthPx * zx <= FULL_RASTER_CAP &&
+        heightPx * zy <= FULL_RASTER_CAP &&
+        widthPx * zx * heightPx * zy <= MAX_RASTER_PIXELS;
+    if (fullFits || !visible) {
+        const capped = capScales(whole, zx, zy, FULL_RASTER_CAP);
+        return {
+            full: true,
+            rect: whole,
+            visible: visible ?? EMPTY_RECT,
+            ...capped,
+        };
+    }
+    const marginX = visible.width * CROP_MARGIN;
+    const marginY = visible.height * CROP_MARGIN;
+    const rect = intersectRect({
+        x: visible.x - marginX,
+        y: visible.y - marginY,
+        width: visible.width + marginX * 2,
+        height: visible.height + marginY * 2,
+    }, whole);
+    const capped = capScales(rect, zx, zy, CROP_RASTER_CAP);
+    return { full: false, rect, visible, ...capped };
+};
+// Should the applied raster be replaced by what `plan` asks for? Scale drift
+// beyond the regen thresholds always regenerates; otherwise a full raster
+// stands, and a crop stands while the visible region stays inside it.
+export const shouldRegenerateRaster = (applied, plan) => {
+    if (!plan)
+        return false;
+    if (!applied)
+        return true;
+    const rx = plan.zx / applied.zx;
+    const ry = plan.zy / applied.zy;
+    if (rx > REGEN_SCALE_UP ||
+        ry > REGEN_SCALE_UP ||
+        rx < REGEN_SCALE_DOWN ||
+        ry < REGEN_SCALE_DOWN) {
+        return true;
+    }
+    if (applied.full)
+        return false;
+    return !rectContains(applied.rect, plan.visible);
+};
+// --- SVG root-size normalization (DOM-free half) -----------------------------
+//
+// The browser rasterizes an <img> SVG from its root width/height; a root
+// without a viewBox doesn't scale at all (it clips). Given the root's
+// attributes, decide the viewBox to enforce and the user-unit size to pin the
+// root to — the coordinate space raster crops are expressed in.
+// Parse an absolute SVG length attribute. Percentages and other relative
+// units have no meaning outside a CSS layout context — treated as absent.
+export const parseSvgLength = (value) => {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    if (!/^\d*\.?\d+(px)?$/.test(trimmed))
+        return null;
+    const parsed = parseFloat(trimmed);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+};
+export const parseViewBox = (value) => {
+    if (!value)
+        return null;
+    const parts = value
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (parts.length !== 4 || parts.some((n) => !Number.isFinite(n))) {
+        return null;
+    }
+    const [x, y, width, height] = parts;
+    if (!(width > 0) || !(height > 0))
+        return null;
+    return { x, y, width, height };
+};
+export const svgIntrinsicSize = (viewBoxAttr, widthAttr, heightAttr, fallbackWidth, fallbackHeight) => {
+    const vb = parseViewBox(viewBoxAttr);
+    if (vb) {
+        return {
+            viewBox: viewBoxAttr.trim(),
+            minX: vb.x,
+            minY: vb.y,
+            width: vb.width,
+            height: vb.height,
+        };
+    }
+    const w = parseSvgLength(widthAttr);
+    const h = parseSvgLength(heightAttr);
+    if (w && h) {
+        return { viewBox: `0 0 ${w} ${h}`, minX: 0, minY: 0, width: w, height: h };
+    }
+    return {
+        viewBox: `0 0 ${fallbackWidth} ${fallbackHeight}`,
+        minX: 0,
+        minY: 0,
+        width: fallbackWidth,
+        height: fallbackHeight,
+    };
+};
+// Wrap a normalized SVG document in an outer <svg> whose viewBox is the crop
+// window (user units) and whose width/height are the output size in device
+// px. The wrapper's intrinsic size then EQUALS the raster destination, so
+// drawImage(img, 0, 0) never scales — critical on Chromium, which rasterizes
+// SVG drawImage sources at their intrinsic size and would otherwise magnify
+// that bitmap (the "still blurry under zoom" failure). Nesting — rather than
+// editing the inner root's viewBox — keeps percentage lengths and viewport-
+// relative units inside the document resolving against the ORIGINAL viewport.
+// preserveAspectRatio="none" absorbs the sub-pixel aspect drift from integer
+// output sizes (and any anisotropic density caps).
+export const wrapSvgForRaster = (innerXml, cropUserUnits, outWidth, outHeight) => `<svg xmlns="http://www.w3.org/2000/svg" width="${outWidth}" ` +
+    `height="${outHeight}" viewBox="${cropUserUnits.x} ${cropUserUnits.y} ` +
+    `${cropUserUnits.width} ${cropUserUnits.height}" ` +
+    `preserveAspectRatio="none">${innerXml}</svg>`;
+// Skia's SVG module and browsers disagree on the default font-size when a
+// document never specifies one: browsers use the CSS initial value 'medium'
+// (16px), Skia's is larger — unsized <text> renders visibly bigger on native
+// than the same SVG in a browser. Injecting an explicit, inheritable 16 on
+// the root pins the two to the same spec-aligned default; any font-size the
+// document does set (on the root or below) still wins through inheritance.
+// String surgery, not DOM — the native path has no DOMParser.
+export const ensureRootFontSize = (svgText, px = 16) => {
+    const match = /<svg\b[^>]*>/i.exec(svgText);
+    if (!match)
+        return svgText;
+    const tag = match[0];
+    if (/\bfont-size\s*=/i.test(tag))
+        return svgText;
+    if (/\bstyle\s*=\s*["'][^"']*font-size/i.test(tag))
+        return svgText;
+    const selfClosing = tag.endsWith('/>');
+    const insertAt = match.index + tag.length - (selfClosing ? 2 : 1);
+    return (svgText.slice(0, insertAt) + ` font-size="${px}"` + svgText.slice(insertAt));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reekon-tools/boldr-utils",
-  "version": "1.8.1",
+  "version": "1.8.2",
   "description": "Shared utilities for formulas and measurement conversion used in Reekon apps",
   "author": "REEKON Tools",
   "license": "MIT",

package/dist/canvas/AnnotationCanvas.d.ts

@@ -1,11 +0,0 @@
-import { type ReactNode } from 'react';
-import type { AnnotationCanvasInnerProps } from './AnnotationCanvasInner.js';
-export type { AnnotationCanvasHandle, GestureConfig, PanTrigger, } from './AnnotationCanvasInner.js';
-export interface CanvasKitOpts {
-    locateFile?: (file: string) => string;
-}
-export type AnnotationCanvasProps = AnnotationCanvasInnerProps & {
-    fallback?: ReactNode;
-    canvasKitOpts?: CanvasKitOpts;
-};
-export declare const AnnotationCanvas: ({ fallback, canvasKitOpts, ...rest }: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvas.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { WithSkiaWeb } from '@shopify/react-native-skia/lib/module/web/index.js';
-// Web-only entry point: lazy-loads CanvasKit wasm via WithSkiaWeb. Imperative
-// API (undo/redo/zoom) is exposed through the `imperativeRef` prop rather
-// than React refs, since WithSkiaWeb can't forward refs through its lazy
-// component boundary. The native build sits in `AnnotationCanvas.native.tsx`
-// and skips WithSkiaWeb entirely (no wasm to load).
-export const AnnotationCanvas = ({ fallback, canvasKitOpts, ...rest }) => (_jsx(WithSkiaWeb, { getComponent: () => import('./AnnotationCanvasInner.js').then((m) => ({
-        default: m.AnnotationCanvasInner,
-    })), fallback: fallback ?? null, componentProps: rest, opts: canvasKitOpts }));

package/dist/canvas/AnnotationCanvas.native.d.ts

@@ -1,8 +0,0 @@
-import type { AnnotationCanvasInnerProps } from './AnnotationCanvasInner.native.js';
-export type { AnnotationCanvasHandle, } from './useAnnotationCanvasState.js';
-export type { GestureConfig, PanTrigger, } from './AnnotationCanvasInner.js';
-export type AnnotationCanvasProps = AnnotationCanvasInnerProps & {
-    fallback?: unknown;
-    canvasKitOpts?: unknown;
-};
-export declare const AnnotationCanvas: (props: AnnotationCanvasProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvas.native.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { AnnotationCanvasInner } from './AnnotationCanvasInner.native.js';
-export const AnnotationCanvas = (props) => {
-    const { fallback: _f, canvasKitOpts: _o, ...rest } = props;
-    return _jsx(AnnotationCanvasInner, { ...rest });
-};

package/dist/canvas/AnnotationCanvasInner.d.ts

@@ -1,39 +0,0 @@
-import { type CSSProperties, type MutableRefObject } from 'react';
-import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../types/firestore.js';
-import type { AnnotationCanvasState, AnnotationDocumentPatch, Selection } from '../types/annotation.js';
-import type { MeasurementRef } from './measurementPicker.js';
-import type { Tool } from './Tool.js';
-import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
-import { type ViewportState } from './viewport.js';
-import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
-export type { AnnotationCanvasHandle };
-export interface AnnotationCanvasInnerProps {
-    canvas: AnnotationCanvasState;
-    onCommit(patch: AnnotationDocumentPatch): void;
-    tools: Tool[];
-    activeToolId: string;
-    selection: Selection | null;
-    onSelectionChange(selection: Selection | null): void;
-    measurements?: Measurement[];
-    fallbackUnit?: Units;
-    fractionalTolerance?: FractionalTolerance;
-    decimalTolerance?: DecimalTolerance;
-    resolveImageUrl?: (storagePath: string) => Promise<string>;
-    pickMeasurement?: () => Promise<MeasurementRef | null>;
-    renderMeasurementStamp?: RenderMeasurementStamp;
-    stampFontSource?: unknown;
-    stampValueFontSize?: number;
-    stampLabelFontSize?: number;
-    gestures?: GestureConfig;
-    width: number;
-    height: number;
-    initialViewport?: ViewportState;
-    style?: CSSProperties;
-    imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
-}
-export type PanTrigger = 'middleMouse' | 'rightMouse' | 'space';
-export interface GestureConfig {
-    wheel?: 'zoom' | 'pan' | 'auto';
-    panTriggers?: PanTrigger[];
-}
-export declare const AnnotationCanvasInner: (props: AnnotationCanvasInnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/canvas/AnnotationCanvasInner.js

@@ -1,219 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFont } from '@shopify/react-native-skia';
-import { useCallback, useEffect, useRef, } from 'react';
-import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
-import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
-import { STAMP_TILE_SIZE } from './stampLayout.js';
-const DEFAULT_PAN_TRIGGERS = ['middleMouse', 'space'];
-export const AnnotationCanvasInner = (props) => {
-    const { fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, stampFontSource, stampValueFontSize = 14, stampLabelFontSize = 11, gestures, width, height, style, activeToolId, tools, } = props;
-    const wheelMode = gestures?.wheel ?? 'auto';
-    const panTriggers = gestures?.panTriggers ?? DEFAULT_PAN_TRIGGERS;
-    const allowSpacePan = panTriggers.includes('space');
-    const allowMiddlePan = panTriggers.includes('middleMouse');
-    const allowRightPan = panTriggers.includes('rightMouse');
-    const valueFont = useFont(stampFontSource, stampValueFontSize);
-    const labelFont = useFont(stampFontSource, stampLabelFontSize);
-    const state = useAnnotationCanvasState(props);
-    const containerRef = useRef(null);
-    const panGestureRef = useRef(null);
-    const spaceDownRef = useRef(false);
-    const activeTool = tools.find((t) => t.id === activeToolId) ?? null;
-    const toCanvasPointer = useCallback((event) => {
-        const rect = containerRef.current?.getBoundingClientRect();
-        const screen = {
-            x: event.clientX - (rect?.left ?? 0),
-            y: event.clientY - (rect?.top ?? 0),
-        };
-        return {
-            pointerId: event.pointerId,
-            screen,
-            world: state.ctx.viewport.screenToWorld(screen),
-            pressure: event.pressure || undefined,
-            shiftKey: event.shiftKey,
-            altKey: event.altKey,
-            metaKey: event.metaKey,
-            ctrlKey: event.ctrlKey,
-        };
-    }, [state.ctx.viewport]);
-    const isPanTriggerDown = useCallback((event) => {
-        if (allowMiddlePan && event.button === 1)
-            return true;
-        if (allowRightPan && event.button === 2)
-            return true;
-        if (allowSpacePan && event.button === 0 && spaceDownRef.current)
-            return true;
-        return false;
-    }, [allowMiddlePan, allowRightPan, allowSpacePan]);
-    const handlePointerDown = useCallback((event) => {
-        const rect = containerRef.current?.getBoundingClientRect();
-        const screen = {
-            x: event.clientX - (rect?.left ?? 0),
-            y: event.clientY - (rect?.top ?? 0),
-        };
-        if (isPanTriggerDown(event)) {
-            panGestureRef.current = { pointerId: event.pointerId, lastScreen: screen };
-            event.currentTarget.setPointerCapture(event.pointerId);
-            event.preventDefault();
-            return;
-        }
-        event.currentTarget.setPointerCapture(event.pointerId);
-        state.dispatchPointerDown(toCanvasPointer(event));
-    }, [state, toCanvasPointer, isPanTriggerDown]);
-    const handlePointerMove = useCallback((event) => {
-        const pan = panGestureRef.current;
-        if (pan && event.pointerId === pan.pointerId) {
-            const rect = containerRef.current?.getBoundingClientRect();
-            const screen = {
-                x: event.clientX - (rect?.left ?? 0),
-                y: event.clientY - (rect?.top ?? 0),
-            };
-            state.pan({
-                x: screen.x - pan.lastScreen.x,
-                y: screen.y - pan.lastScreen.y,
-            });
-            panGestureRef.current = { pointerId: pan.pointerId, lastScreen: screen };
-            return;
-        }
-        state.dispatchPointerMove(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
-    const handlePointerUp = useCallback((event) => {
-        const pan = panGestureRef.current;
-        if (pan && event.pointerId === pan.pointerId) {
-            panGestureRef.current = null;
-            return;
-        }
-        state.dispatchPointerUp(toCanvasPointer(event));
-    }, [state, toCanvasPointer]);
-    const handlePointerCancel = useCallback(() => {
-        panGestureRef.current = null;
-        state.dispatchPointerCancel();
-    }, [state]);
-    const handleWheel = useCallback((event) => {
-        const rect = containerRef.current?.getBoundingClientRect();
-        const focal = {
-            x: event.clientX - (rect?.left ?? 0),
-            y: event.clientY - (rect?.top ?? 0),
-        };
-        if (event.ctrlKey || event.metaKey) {
-            const factor = Math.exp(-event.deltaY / 200);
-            state.zoom(focal, state.ctx.viewport.state.zoom * factor);
-            return;
-        }
-        if (wheelMode === 'zoom') {
-            const factor = Math.exp(-event.deltaY / 300);
-            state.zoom(focal, state.ctx.viewport.state.zoom * factor);
-            return;
-        }
-        if (event.shiftKey) {
-            state.pan({ x: event.deltaY, y: event.deltaX });
-            return;
-        }
-        state.pan({ x: event.deltaX, y: event.deltaY });
-    }, [state, wheelMode]);
-    const handleContextMenu = useCallback((event) => {
-        if (allowRightPan)
-            event.preventDefault();
-    }, [allowRightPan]);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const stop = (e) => {
-            if (e.target === el || el.contains(e.target)) {
-                e.preventDefault();
-            }
-        };
-        el.addEventListener('wheel', stop, { passive: false });
-        return () => el.removeEventListener('wheel', stop);
-    }, []);
-    useEffect(() => {
-        if (!allowSpacePan)
-            return;
-        const onKeyDown = (e) => {
-            if (e.code === 'Space' && !e.repeat) {
-                spaceDownRef.current = true;
-                if (containerRef.current)
-                    containerRef.current.style.cursor = 'grab';
-            }
-        };
-        const onKeyUp = (e) => {
-            if (e.code === 'Space') {
-                spaceDownRef.current = false;
-                if (containerRef.current)
-                    containerRef.current.style.cursor = '';
-            }
-        };
-        window.addEventListener('keydown', onKeyDown);
-        window.addEventListener('keyup', onKeyUp);
-        return () => {
-            window.removeEventListener('keydown', onKeyDown);
-            window.removeEventListener('keyup', onKeyUp);
-        };
-    }, [allowSpacePan]);
-    const containerStyle = {
-        position: 'relative',
-        width,
-        height,
-        overflow: 'hidden',
-        touchAction: 'none',
-        userSelect: 'none',
-        cursor: activeTool?.cursor ?? 'default',
-        ...style,
-    };
-    const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
-    const { renderMeasurementStamp, selection } = props;
-    return (_jsxs("div", { ref: containerRef, style: containerStyle, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onWheel: handleWheel, onContextMenu: handleContextMenu, children: [AnnotationCanvasSkia({
-                width,
-                height,
-                effectiveCanvas: state.effectiveCanvas,
-                worldTransform: state.worldTransform,
-                measurementsById: state.measurementsById,
-                fallbackUnit,
-                fractionalTolerance,
-                decimalTolerance,
-                resolveImageUrl,
-                valueFont,
-                labelFont,
-                hideMeasurementStamps: !!renderMeasurementStamp,
-                penDrawingStroke: state.penDrawingStroke,
-                customPreview,
-            }), renderMeasurementStamp && (_jsx("div", { style: {
-                    position: 'absolute',
-                    inset: 0,
-                    pointerEvents: 'none',
-                }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = STAMP_TILE_SIZE * (placed.scale ?? 1);
-                    const cx = (placed.anchor.x - state.viewport.pan.x) * state.viewport.zoom;
-                    const cy = (placed.anchor.y - state.viewport.pan.y) * state.viewport.zoom;
-                    const isSelected = selection?.ids.includes(placed.id) ?? false;
-                    return (_jsxs("div", { style: {
-                            position: 'absolute',
-                            left: 0,
-                            top: 0,
-                            width: size,
-                            height: size,
-                            transform: `translate(${cx - size / 2}px, ${cy - size / 2}px)`,
-                        }, children: [renderMeasurementStamp({
-                                placed,
-                                measurement: state.measurementsById.get(placed.measurementId) ?? null,
-                                selected: isSelected,
-                                size,
-                                zoom: state.viewport.zoom,
-                            }), isSelected && (_jsx("div", { role: "button", "aria-label": "Remove measurement", onPointerDown: (e) => {
-                                    e.stopPropagation();
-                                    state.ctx.commit({
-                                        ops: [{ op: 'removeMeasurement', id: placed.id }],
-                                    });
-                                    state.ctx.setSelection(null);
-                                }, style: {
-                                    position: 'absolute',
-                                    top: -10,
-                                    right: -10,
-                                    width: 40,
-                                    height: 40,
-                                    cursor: 'pointer',
-                                    pointerEvents: 'auto',
-                                } }))] }, placed.id));
-                }) }))] }));
-};

package/dist/canvas/AnnotationCanvasInner.native.d.ts

@@ -1,35 +0,0 @@
-import { type MutableRefObject } from 'react';
-import { type ViewStyle } from 'react-native';
-import type { RenderMeasurementStamp } from './measurementStampOverlay.js';
-import type { DecimalTolerance, FractionalTolerance, Measurement, Units } from '../types/firestore.js';
-import type { AnnotationCanvasState, AnnotationDocumentPatch, Selection } from '../types/annotation.js';
-import type { MeasurementRef } from './measurementPicker.js';
-import type { Tool } from './Tool.js';
-import { type AnnotationCanvasHandle } from './useAnnotationCanvasState.js';
-import type { ViewportState } from './viewport.js';
-export type { AnnotationCanvasHandle };
-export interface AnnotationCanvasInnerProps {
-    canvas: AnnotationCanvasState;
-    onCommit(patch: AnnotationDocumentPatch): void;
-    tools: Tool[];
-    activeToolId: string;
-    selection: Selection | null;
-    onSelectionChange(selection: Selection | null): void;
-    measurements?: Measurement[];
-    fallbackUnit?: Units;
-    fractionalTolerance?: FractionalTolerance;
-    decimalTolerance?: DecimalTolerance;
-    resolveImageUrl?: (storagePath: string) => Promise<string>;
-    pickMeasurement?: () => Promise<MeasurementRef | null>;
-    renderMeasurementStamp?: RenderMeasurementStamp;
-    stampFontSource?: unknown;
-    stampValueFontSize?: number;
-    stampLabelFontSize?: number;
-    gestures?: unknown;
-    width: number;
-    height: number;
-    initialViewport?: ViewportState;
-    style?: ViewStyle;
-    imperativeRef?: MutableRefObject<AnnotationCanvasHandle | null>;
-}
-export declare const AnnotationCanvasInner: (props: AnnotationCanvasInnerProps) => import("react/jsx-runtime").JSX.Element;