@reekon-tools/boldr-utils 1.6.31 → 1.6.33

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

@@ -1,4 +1,4 @@
-import type { PlacedMeasurementRef } from '../../../types/annotation.js';
+import type { PlacedMeasurementRef, StrokeCap } from '../../../types/annotation.js';
 import type { Tool } from '../Tool.js';
 export type MeasurementToolPlacement = 'line' | 'rectangle' | 'none';
 export interface MeasurementToolOptions {
@@ -11,5 +11,10 @@ export interface MeasurementToolOptions {
     selectToolId?: string;
     onAutoSwitch?: (toToolId: string) => void;
     onPlaced?: (measurement: PlacedMeasurementRef) => void;
+    color?: string;
+    width?: number;
+    cap?: StrokeCap;
+    startCap?: StrokeCap;
+    dash?: boolean;
 }
 export declare const createMeasurementTool: (options?: MeasurementToolOptions) => Tool;

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

@@ -1,5 +1,27 @@
 import { DEFAULT_LAYER_ID } from '../../../types/annotation.js';
 import { DEFAULT_LINE_POS, recomputeAnchor, rectCenter, } from '../measurementGeometry.js';
+// The `line*` style fields for a placed measurement, built from the tool's
+// style options. Undefined fields are dropped (never emitted) so the render
+// defaults apply and Firestore never sees an `undefined` value.
+const lineStyleFields = (placement, style) => {
+    if (placement === 'none')
+        return {};
+    const out = {};
+    if (style.color !== undefined)
+        out.lineColor = style.color;
+    if (style.width !== undefined)
+        out.lineWidth = style.width;
+    if (style.dash !== undefined)
+        out.lineDash = style.dash;
+    // End/start caps are only meaningful on the open `line` path.
+    if (placement === 'line') {
+        if (style.cap !== undefined)
+            out.lineCap = style.cap;
+        if (style.startCap !== undefined)
+            out.lineStartCap = style.startCap;
+    }
+    return out;
+};
 let counter = 0;
 const makeId = () => `annotation-${Date.now().toString(36)}-${(counter++).toString(36)}`;
 const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
@@ -8,13 +30,14 @@ const firstLayerId = (doc) => doc.layers[0]?.id ?? DEFAULT_LAYER_ID;
 // placeAnnotationAtCenter so a drawn annotation is identical to a (legacy)
 // center-placed one once committed.
 const buildMeasurement = (opts) => {
-    const { id, layerId, placement, linePos, a, b } = opts;
+    const { id, layerId, placement, linePos, a, b, style } = opts;
     const base = {
         id,
         layerId,
         showLabel: true,
         showValue: true,
         createdAt: Date.now(),
+        ...lineStyleFields(placement, style),
     };
     if (placement === 'rectangle') {
         const rect = { a, b };
@@ -51,6 +74,13 @@ export const createMeasurementTool = (options = {}) => {
     const minDragPx = options.minDragPx ?? 4;
     const autoSwitchToSelect = options.autoSwitchToSelect ?? true;
     const selectToolId = options.selectToolId ?? 'select';
+    const style = {
+        color: options.color,
+        width: options.width,
+        cap: options.cap,
+        startCap: options.startCap,
+        dash: options.dash,
+    };
     const place = (ctx, measurement) => {
         ctx.commit({ ops: [{ op: 'addMeasurement', measurement }] });
         options.onPlaced?.(measurement);
@@ -78,6 +108,7 @@ export const createMeasurementTool = (options = {}) => {
                     linePos,
                     a: event.world,
                     b: event.world,
+                    style,
                 }));
             },
         };
@@ -108,6 +139,7 @@ export const createMeasurementTool = (options = {}) => {
                 linePos,
                 a: s.startWorld,
                 b: event.world,
+                style,
             });
             ctx.preview({ ops: [{ op: 'addMeasurement', measurement }] });
             return { ...s, moved: true };
@@ -130,6 +162,7 @@ export const createMeasurementTool = (options = {}) => {
                 linePos,
                 a: s.startWorld,
                 b: event.world,
+                style,
             }));
         },
         onCancel(_state, ctx) {

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

@@ -16,6 +16,7 @@ export interface AnnotationCanvasHandle {
     }): void;
     setAnnotationType(id: AnnotationElementId, type: MeasurementPlacement): void;
     centerOnLine(id: AnnotationElementId): void;
+    setLinePos(id: AnnotationElementId, linePos: number): void;
     removeMeasurementValue(id: AnnotationElementId): void;
     associateMeasurement(id: AnnotationElementId, ref: MeasurementRef): void;
     bindColumn(id: AnnotationElementId, binding: {

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -195,6 +195,37 @@ export const useAnnotationCanvasState = (props) => {
     useEffect(() => {
         if (!imperativeRef)
             return;
+        // Shared body for centerOnLine / setLinePos: ensure the annotation is a
+        // 'line' (synthesizing a default horizontal line around the anchor if it
+        // has none) and pin its tile at `linePos` along that line.
+        const applyLinePos = (id, linePos) => {
+            const c = ctxRef.current;
+            const m = c.document.placedMeasurements.find((x) => x.id === id);
+            if (!m)
+                return;
+            let line = m.line;
+            if (!line) {
+                const len = Math.min(400, Math.max(120, canvas.viewport.width * 0.25));
+                line = {
+                    a: { x: m.anchor.x - len / 2, y: m.anchor.y },
+                    b: { x: m.anchor.x + len / 2, y: m.anchor.y },
+                };
+            }
+            c.commit({
+                ops: [
+                    {
+                        op: 'updateMeasurement',
+                        id,
+                        patch: {
+                            placement: 'line',
+                            line,
+                            linePos,
+                            anchor: recomputeAnchor(line, 'line', linePos, m.anchor),
+                        },
+                    },
+                ],
+            });
+        };
         imperativeRef.current = {
             undo() {
                 const entry = undoStackRef.current.pop();
@@ -340,34 +371,10 @@ export const useAnnotationCanvasState = (props) => {
                 });
             },
             centerOnLine(id) {
-                const c = ctxRef.current;
-                const m = c.document.placedMeasurements.find((x) => x.id === id);
-                if (!m)
-                    return;
-                // Same default-line synthesis as setAnnotationType('line') so centering
-                // a floating tile also gives it a line to sit on.
-                let line = m.line;
-                if (!line) {
-                    const len = Math.min(400, Math.max(120, canvas.viewport.width * 0.25));
-                    line = {
-                        a: { x: m.anchor.x - len / 2, y: m.anchor.y },
-                        b: { x: m.anchor.x + len / 2, y: m.anchor.y },
-                    };
-                }
-                c.commit({
-                    ops: [
-                        {
-                            op: 'updateMeasurement',
-                            id,
-                            patch: {
-                                placement: 'line',
-                                line,
-                                linePos: 0.5,
-                                anchor: recomputeAnchor(line, 'line', 0.5, m.anchor),
-                            },
-                        },
-                    ],
-                });
+                applyLinePos(id, 0.5);
+            },
+            setLinePos(id, linePos) {
+                applyLinePos(id, linePos);
             },
             removeMeasurementValue(id) {
                 const c = ctxRef.current;

package/dist/canvas/AnnotationCanvas.d.ts

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+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;

package/dist/canvas/AnnotationCanvasInner.native.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFont } from '@shopify/react-native-skia';
+import { useMemo, useRef } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
+import { STAMP_TILE_SIZE } from './stampLayout.js';
+import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
+// Native fingerprint: one finger drives the active tool, two fingers
+// pan/zoom the viewport. Tap counts as a brief pointer down+up so tools
+// like measurement-stamp (which only listen to onPointerUp) work via tap.
+export const AnnotationCanvasInner = (props) => {
+    const { fallbackUnit, fractionalTolerance, decimalTolerance, resolveImageUrl, stampFontSource, stampValueFontSize = 14, stampLabelFontSize = 11, width, height, style, } = props;
+    const valueFont = useFont(stampFontSource, stampValueFontSize);
+    const labelFont = useFont(stampFontSource, stampLabelFontSize);
+    const state = useAnnotationCanvasState(props);
+    // Per-gesture refs so we always emit a matching down/move/up sequence.
+    const pointerIdRef = useRef(1);
+    const inFlightRef = useRef(null);
+    const pinchStartZoomRef = useRef(1);
+    const buildEvent = (pointerId, screen) => ({
+        pointerId,
+        screen,
+        world: state.ctx.viewport.screenToWorld(screen),
+    });
+    const gesture = useMemo(() => {
+        const toolPan = Gesture.Pan()
+            .minPointers(1)
+            .maxPointers(1)
+            .runOnJS(true)
+            .onBegin((e) => {
+            const id = pointerIdRef.current++;
+            const screen = { x: e.x, y: e.y };
+            inFlightRef.current = { id, lastScreen: screen };
+            state.dispatchPointerDown(buildEvent(id, screen));
+        })
+            .onUpdate((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            const screen = { x: e.x, y: e.y };
+            f.lastScreen = screen;
+            state.dispatchPointerMove(buildEvent(f.id, screen));
+        })
+            .onEnd((e) => {
+            const f = inFlightRef.current;
+            if (!f)
+                return;
+            state.dispatchPointerUp(buildEvent(f.id, { x: e.x, y: e.y }));
+            inFlightRef.current = null;
+        })
+            .onFinalize(() => {
+            if (inFlightRef.current) {
+                state.dispatchPointerCancel();
+                inFlightRef.current = null;
+            }
+        });
+        const tap = Gesture.Tap()
+            .maxDuration(250)
+            .runOnJS(true)
+            .onEnd((e) => {
+            const id = pointerIdRef.current++;
+            const screen = { x: e.x, y: e.y };
+            // Synthesize a down+up sequence so tools that only listen to
+            // onPointerUp (e.g. measurement stamp) still fire.
+            state.dispatchPointerDown(buildEvent(id, screen));
+            state.dispatchPointerUp(buildEvent(id, screen));
+        });
+        const viewportPan = Gesture.Pan()
+            .minPointers(2)
+            .maxPointers(2)
+            .runOnJS(true)
+            .onChange((e) => {
+            state.pan({ x: e.changeX, y: e.changeY });
+        });
+        const pinch = Gesture.Pinch()
+            .runOnJS(true)
+            .onBegin(() => {
+            pinchStartZoomRef.current = state.ctx.viewport.state.zoom;
+        })
+            .onUpdate((e) => {
+            state.zoom({ x: e.focalX, y: e.focalY }, pinchStartZoomRef.current * e.scale);
+        });
+        return Gesture.Race(tap, Gesture.Simultaneous(viewportPan, pinch), toolPan);
+    }, [state]);
+    const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
+    const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
+    const { renderMeasurementStamp, selection } = props;
+    return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, 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(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, 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(View, { pointerEvents: "box-none", style: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            width: size,
+                            height: size,
+                            transform: [
+                                { translateX: cx - size / 2 },
+                                { translateY: cy - size / 2 },
+                            ],
+                        }, children: [_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: renderMeasurementStamp({
+                                    placed,
+                                    measurement: state.measurementsById.get(placed.measurementId) ?? null,
+                                    selected: isSelected,
+                                    size,
+                                    zoom: state.viewport.zoom,
+                                }) }), isSelected && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", hitSlop: 10, onPress: () => {
+                                    state.ctx.commit({
+                                        ops: [{ op: 'removeMeasurement', id: placed.id }],
+                                    });
+                                    state.ctx.setSelection(null);
+                                }, style: {
+                                    position: 'absolute',
+                                    top: -8,
+                                    right: -8,
+                                    width: 36,
+                                    height: 36,
+                                } }))] }, placed.id));
+                }) }))] }));
+};