@reekon-tools/boldr-utils 1.6.36 → 1.6.38

package/dist/annotation/canvas/AnnotationCanvasInner.js

@@ -5,7 +5,7 @@ import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { TEXT_FONT_FAMILY } from './elements/ShapeElement.js';
 import { buildRemoveMeasurementOps, hitPlacedMeasurement, } from './measurementGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
-import { stampTileSize } from './stampLayout.js';
+import { stampTileDims } from './stampLayout.js';
 // Screen-px radius of a measurement-annotation endpoint handle (matches the
 // native HANDLE_RADIUS_PX). Divided by zoom for a constant on-screen size.
 const HANDLE_PX = 7;
@@ -317,7 +317,9 @@ export const AnnotationCanvasInner = (props) => {
                     inset: 0,
                     pointerEvents: 'none',
                 }, children: state.effectiveCanvas.placedMeasurements.map((placed) => {
-                    const size = stampTileSize(placed, state.tileScaleFactor, state.tileViewportScale);
+                    // Square tile or wide group-header pill — one footprint source of
+                    // truth shared with the hit-test (stampTileDims).
+                    const { width, height } = stampTileDims(placed, state.tileScaleFactor, state.tileViewportScale);
                     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;
@@ -326,19 +328,21 @@ export const AnnotationCanvasInner = (props) => {
                         : (resolveStampMeasurement?.(placed) ?? null);
                     // Corner-pinned, tile-proportional remove target (see the style
                     // comment below) so it can't blanket a small tile and eat its grab.
-                    const removeSize = Math.min(40, size * 0.4);
+                    const removeSize = Math.min(40, Math.min(width, height) * 0.4);
                     return (_jsxs("div", { style: {
                             position: 'absolute',
                             left: 0,
                             top: 0,
-                            width: size,
-                            height: size,
-                            transform: `translate(${cx - size / 2}px, ${cy - size / 2}px)`,
+                            width,
+                            height,
+                            transform: `translate(${cx - width / 2}px, ${cy - height / 2}px)`,
                         }, children: [renderMeasurementStamp({
                                 placed,
                                 measurement,
                                 selected: isSelected,
-                                size,
+                                size: width,
+                                width,
+                                height,
                                 zoom: state.viewport.zoom,
                             }), onMeasurementStampPress && (_jsx(StampPressTarget, { onPress: () => onMeasurementStampPress(placed), onLongPress: onMeasurementStampLongPress
                                     ? () => onMeasurementStampLongPress(placed)

package/dist/annotation/canvas/AnnotationCanvasInner.native.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
 import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useSharedValue, } from 'react-native-reanimated';
-import { stampTileSize } from './stampLayout.js';
+import { stampTileDims } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
 import { useBackgroundSkImage } from './elements/BackgroundImageElement.js';
@@ -1446,14 +1446,17 @@ export const AnnotationCanvasInner = (props) => {
                 }) }))] }));
 };
 const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging, sliding, endpointDragging, rectResizing, zoomSnapshot, zoom, panX, panY, dragX, dragY, slideCtx, epCtx, rectCtx, renderMeasurementStamp, tileScaleFactor, tileViewportScale, onStampPress, onStampLongPress, onRemove, }) => {
-    const size = stampTileSize(placed, tileScaleFactor, tileViewportScale);
-    const half = size / 2;
+    // Square tile or wide group-header pill — one footprint source of truth
+    // shared with the hit-test (stampTileDims).
+    const { width, height } = stampTileDims(placed, tileScaleFactor, tileViewportScale);
+    const halfW = width / 2;
+    const halfH = height / 2;
     // Remove-"X" touch target, sized as a fraction of the tile and corner-pinned
     // so it never reaches the center. A FIXED 36px+hitSlop target blanketed small
     // tiles (the tile-scale slider can shrink them to ~38px), swallowing the
     // center grab and making a selected tile impossible to drag (it had to be
     // deselected first). Capped so it doesn't grow past the old size on big tiles.
-    const removeSize = Math.min(36, size * 0.4);
+    const removeSize = Math.min(36, Math.min(width, height) * 0.4);
     const anchorX = placed.anchor.x;
     const anchorY = placed.anchor.y;
     // doc → screen each frame, on the UI thread. Position is a translate
@@ -1509,17 +1512,19 @@ const MeasurementStampOverlayItem = ({ placed, measurement, selected, dragging,
         const cx = (worldX - panX.value) * zoom.value;
         const cy = (worldY - panY.value) * zoom.value;
         return {
-            transform: [{ translateX: cx - half }, { translateY: cy - half }],
+            transform: [{ translateX: cx - halfW }, { translateY: cy - halfH }],
         };
     });
     return (_jsxs(Animated.View, { pointerEvents: "box-none", style: [
-            { position: 'absolute', left: 0, top: 0, width: size, height: size },
+            { position: 'absolute', left: 0, top: 0, width, height },
             animatedStyle,
         ], children: [_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: renderMeasurementStamp({
                     placed,
                     measurement,
                     selected,
-                    size,
+                    size: width,
+                    width,
+                    height,
                     zoom: zoomSnapshot,
                 }) }), onStampPress && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Open measurement", onPress: () => onStampPress(placed), onLongPress: onStampLongPress ? () => onStampLongPress(placed) : undefined, style: StyleSheet.absoluteFill })), selected && measurement && onRemove && (_jsx(TouchableOpacity, { accessibilityRole: "button", accessibilityLabel: "Remove measurement", onPress: onRemove, style: {
                     position: 'absolute',

package/dist/annotation/canvas/measurementGeometry.js

@@ -7,7 +7,7 @@
 // boundary, so they inline the same math. Those inlined copies are the "worklet
 // twins" of these helpers — if you change the math here, change them too (they
 // are commented as such in AnnotationCanvasInner.native.tsx).
-import { stampTileSize } from './stampLayout.js';
+import { stampTileDims } from './stampLayout.js';
 // Default position of the tile along its line when `linePos` is absent: center.
 export const DEFAULT_LINE_POS = 0.5;
 export const lerp = (a, b, t) => ({
@@ -111,16 +111,18 @@ const segmentDistSq = (p, a, b) => {
 // border ring of a rectangle annotation (interiors stay transparent to hits so
 // elements inside remain reachable).
 export const hitPlacedMeasurement = (m, p, zoom = 1, tileScaleFactor = 1, viewportScale = 1) => {
-    // The stamp renders as a constant *screen*-size square centered on the
+    // The stamp renders as a constant *screen*-size box 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
+    // screen-space half-extents (+ padding) back to doc space via the zoom so
     // the hit box always matches what's drawn (blank and populated stamps share
-    // the footprint — see stampLayout).
-    const half = (stampTileSize(m, tileScaleFactor, viewportScale) / 2 + STAMP_HIT_PADDING) /
-        zoom;
+    // the square footprint; group-header chips are a wide pill — see
+    // stampTileDims in stampLayout).
+    const dims = stampTileDims(m, tileScaleFactor, viewportScale);
+    const halfW = (dims.width / 2 + STAMP_HIT_PADDING) / zoom;
+    const halfH = (dims.height / 2 + STAMP_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)
+    if (dx <= halfW && dy <= halfH)
         return true;
     // Measurement annotation: also grab anywhere along the line body.
     if (m.line) {

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

@@ -6,6 +6,8 @@ export interface MeasurementStampRenderArgs {
     measurement: Measurement | null;
     selected: boolean;
     size: number;
+    width: number;
+    height: number;
     zoom: number;
 }
 export type RenderMeasurementStamp = (args: MeasurementStampRenderArgs) => ReactNode;

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

@@ -1,5 +1,7 @@
 import type { AnnotationCanvasState, PlacedMeasurementRef, TileScalePlatform } from '../../types/annotation.js';
 export declare const STAMP_TILE_SIZE = 96;
+export declare const GROUP_HEADER_TILE_WIDTH = 240;
+export declare const GROUP_HEADER_TILE_HEIGHT = 64;
 export declare const DEFAULT_TILE_SCALE = 1;
 export declare const TILE_SCALE_MIN = 0.4;
 export declare const TILE_SCALE_MAX = 2;
@@ -7,5 +9,10 @@ export declare const resolveTileScaleFactor: (canvas: Pick<AnnotationCanvasState
 export declare const clampTileScale: (v: number) => number;
 export declare const tileDocSizeForFactor: (factor: number, zoom: number) => number;
 export declare const tileScaleFromDocSize: (docSize: number, zoom: number) => number;
-export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId">) => boolean;
+export declare const isUnassociatedStamp: (m: Pick<PlacedMeasurementRef, "measurementId" | "measurementPath" | "columnId" | "isGroupHeader">) => boolean;
 export declare const stampTileSize: (m: Pick<PlacedMeasurementRef, "scale">, tileScaleFactor?: number, viewportScale?: number) => number;
+export interface StampTileDims {
+    width: number;
+    height: number;
+}
+export declare const stampTileDims: (m: Pick<PlacedMeasurementRef, "scale" | "isGroupHeader">, tileScaleFactor?: number, viewportScale?: number) => StampTileDims;

package/dist/annotation/canvas/stampLayout.js

@@ -12,6 +12,12 @@
 // user who set the tile-scale slider against blank tiles saw their tiles
 // balloon once populated (Asana 1216233394800417).
 export const STAMP_TILE_SIZE = 96;
+// Screen-space footprint of a group-header chip (`isGroupHeader`) — a wide
+// pill rather than the square tile, same 3.75:1 ratio as the legacy Nutrient
+// header stamp (150×40). Like STAMP_TILE_SIZE it is a fixed-size pin scaled by
+// `placed.scale` × the document-wide tile-scale factor, never by zoom.
+export const GROUP_HEADER_TILE_WIDTH = 240;
+export const GROUP_HEADER_TILE_HEIGHT = 64;
 // Document-wide tile scale factor: one knob that shrinks/grows EVERY
 // measurement tile on the canvas at once, on top of each tile's own `scale`.
 // Lets a user pull tiles down on a dense drawing where lines crowd together,
@@ -76,8 +82,9 @@ export const tileScaleFromDocSize = (docSize, zoom) => (docSize * zoom) / STAMP_
 // A placed measurement is an unassociated input until a measurement reference
 // is attached (id or path) OR it is bound to a form column (`columnId`). Such
 // stamps render as the blank "+" placeholder (same footprint as a populated
-// tile — see STAMP_TILE_SIZE).
-export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath && !m.columnId;
+// tile — see STAMP_TILE_SIZE). Group-header chips carry neither ref but are
+// NOT inputs — never treat them as blank "+" placeholders.
+export const isUnassociatedStamp = (m) => !m.isGroupHeader && !m.measurementId && !m.measurementPath && !m.columnId;
 // Screen-space edge length for a placed stamp: the base size scaled by the
 // per-stamp `scale` and the document-wide `tileScaleFactor`. Blank and
 // populated stamps share the footprint so a tile never resizes when it gains a
@@ -89,3 +96,12 @@ export const isUnassociatedStamp = (m) => !m.measurementId && !m.measurementPath
 // retained for call compatibility and is always 1 — the old per-canvas
 // multiplier was retired (see the note above). Independent of zoom.
 export const stampTileSize = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => STAMP_TILE_SIZE * (m.scale ?? 1) * tileScaleFactor * viewportScale;
+export const stampTileDims = (m, tileScaleFactor = DEFAULT_TILE_SCALE, viewportScale = 1) => {
+    const k = (m.scale ?? 1) * tileScaleFactor * viewportScale;
+    return m.isGroupHeader
+        ? {
+            width: GROUP_HEADER_TILE_WIDTH * k,
+            height: GROUP_HEADER_TILE_HEIGHT * k,
+        }
+        : { width: STAMP_TILE_SIZE * k, height: STAMP_TILE_SIZE * k };
+};

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

@@ -1,4 +1,4 @@
-import { stampTileSize } from '../stampLayout.js';
+import { stampTileDims } from '../stampLayout.js';
 import { placementOf, linePosOf, snapLinePos, lerp, recomputeAnchor, rectCenter, rectCornerPoint, oppositeRectCorner, hitPlacedMeasurement, } from '../measurementGeometry.js';
 import { hitShapeOutline, visualShapeBounds } from '../shapeGeometry.js';
 import { DEFAULT_TEXT_FONT_SIZE, resizeScaleFromDrag, textResizeGeometry, textShapeBounds, } from '../textGeometry.js';
@@ -157,10 +157,11 @@ const isOnMeasurementTile = (doc, id, world, zoom, viewportTileScale = 1, tileSc
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return false;
-    const half = (stampTileSize(m, tileScaleFactor, viewportTileScale) / 2 + HIT_PADDING) /
-        zoom;
-    return (Math.abs(world.x - m.anchor.x) <= half &&
-        Math.abs(world.y - m.anchor.y) <= half);
+    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale);
+    const halfW = (dims.width / 2 + HIT_PADDING) / zoom;
+    const halfH = (dims.height / 2 + HIT_PADDING) / zoom;
+    return (Math.abs(world.x - m.anchor.x) <= halfW &&
+        Math.abs(world.y - m.anchor.y) <= halfH);
 };
 // --- Measurement-annotation grab logic (shared by the native UI-thread drag
 // via DragSelectionConfig AND the web pointer handlers — one source of truth) ---
@@ -170,13 +171,14 @@ const classifyGrab = (doc, id, world, zoom, viewportTileScale = 1, tileScaleFact
     const m = doc.placedMeasurements.find((x) => x.id === id);
     if (!m)
         return 'move';
-    // Same footprint the tile is drawn at (smaller for unassociated inputs, #6;
-    // folds in the document-wide tile scale + viewport scale so slide-grab
-    // matches the draw).
-    const half = (stampTileSize(m, tileScaleFactor, viewportTileScale) / 2 + HIT_PADDING) /
-        zoom;
-    const onTile = Math.abs(world.x - m.anchor.x) <= half &&
-        Math.abs(world.y - m.anchor.y) <= half;
+    // Same footprint the tile is drawn at (wide pill for group headers; folds in
+    // the document-wide tile scale + viewport scale so slide-grab matches the
+    // draw).
+    const dims = stampTileDims(m, tileScaleFactor, viewportTileScale);
+    const halfW = (dims.width / 2 + HIT_PADDING) / zoom;
+    const halfH = (dims.height / 2 + HIT_PADDING) / zoom;
+    const onTile = Math.abs(world.x - m.anchor.x) <= halfW &&
+        Math.abs(world.y - m.anchor.y) <= halfH;
     return onTile && placementOf(m) === 'line' && m.line ? 'slide' : 'move';
 };
 // Slide the tile along its line by a world-space drag delta (relative to

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

@@ -30,6 +30,9 @@ export interface AnnotationCanvasHandle {
         groupId: string;
         columnId: string;
     }): AnnotationElementId;
+    placeGroupHeaderAtCenter(ref: {
+        groupId: string;
+    }): AnnotationElementId;
     deleteSelected(): void;
 }
 export interface UseAnnotationCanvasStateProps {

package/dist/annotation/canvas/useAnnotationCanvasState.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { applyPatch, invertPatch, DEFAULT_LAYER_ID, } from '../../types/annotation.js';
-import { resolveTileScaleFactor, stampTileSize, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
+import { resolveTileScaleFactor, stampTileDims, tileDocSizeForFactor, tileScaleFromDocSize, } from './stampLayout.js';
 import { createViewportApi, fitRectToScreen, imageDocRect, panBy, zoomAt, DEFAULT_VIEWPORT, } from './viewport.js';
 import { buildRemoveMeasurementOps, recomputeAnchor, rectCenter, DEFAULT_LINE_POS, } from './measurementGeometry.js';
 // The viewport that frames the document's content on screen. When a background
@@ -306,14 +306,16 @@ export const useAnnotationCanvasState = (props) => {
                 const m = c.document.placedMeasurements.find((x) => x.id === id);
                 if (!m)
                     return;
-                // The tile is a screen-constant square centered on its anchor, so its
-                // half-edge is screen px regardless of zoom (stampTileSize).
-                const half = stampTileSize(m, c.tileScaleFactor, c.tileViewportScale) / 2;
+                // The tile is a screen-constant box centered on its anchor, so its
+                // half-extents are screen px regardless of zoom (stampTileDims).
+                const dims = stampTileDims(m, c.tileScaleFactor, c.tileViewportScale);
+                const halfW = dims.width / 2;
+                const halfH = dims.height / 2;
                 const s = c.viewport.worldToScreen(m.anchor);
-                if (s.x - half >= 0 &&
-                    s.x + half <= width &&
-                    s.y - half >= 0 &&
-                    s.y + half <= height) {
+                if (s.x - halfW >= 0 &&
+                    s.x + halfW <= width &&
+                    s.y - halfH >= 0 &&
+                    s.y + halfH <= height) {
                     return;
                 }
                 setViewport((v) => ({
@@ -509,6 +511,28 @@ export const useAnnotationCanvasState = (props) => {
                 c.setSelection({ ids: [placed.id] });
                 return placed.id;
             },
+            placeGroupHeaderAtCenter(ref) {
+                const c = ctxRef.current;
+                const anchor = c.viewport.screenToWorld({
+                    x: width / 2,
+                    y: height / 2,
+                });
+                // No showLabel/showValue/placement — a header is not an input; it
+                // renders the group's name/index, resolved live by the consumer.
+                const placed = {
+                    id: `header-${Date.now().toString(36)}-${Math.floor(Math.random() * 1e9).toString(36)}`,
+                    layerId: c.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
+                    isGroupHeader: true,
+                    groupId: ref.groupId,
+                    anchor,
+                    createdAt: Date.now(),
+                };
+                c.commit({ ops: [{ op: 'addMeasurement', measurement: placed }] });
+                // Select it so the consumer can immediately move it (the consumer is
+                // responsible for switching to its move/select tool).
+                c.setSelection({ ids: [placed.id] });
+                return placed.id;
+            },
             deleteSelected() {
                 const c = ctxRef.current;
                 const ids = c.selection?.ids;

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));
+                }) }))] }));
+};