@reekon-tools/boldr-utils 1.6.23 → 1.6.25

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skia, useFont } from '@shopify/react-native-skia';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Group, Line, Rect, RoundedRect, Skia, rect, rrect, useFont, } from '@shopify/react-native-skia';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { StyleSheet, TouchableOpacity, View, } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView, } from 'react-native-gesture-handler';
@@ -7,8 +7,10 @@ import Animated, { runOnJS, runOnUI, useAnimatedStyle, useDerivedValue, useShare
 import { stampTileSize } from './stampLayout.js';
 import { DEFAULT_LAYER_ID, } from '../../types/annotation.js';
 import { AnnotationCanvasSkia } from './AnnotationCanvasSkia.js';
+import { useBackgroundSkImage } from './elements/BackgroundImageElement.js';
 import { buildRemoveMeasurementOps, } from './measurementGeometry.js';
 import { buildShapeFromDrag } from './tools/shapeTool.js';
+import { SELECTION_PAD } from './textGeometry.js';
 import { useAnnotationCanvasState, } from './useAnnotationCanvasState.js';
 let strokeCounter = 0;
 const makeStrokeId = () => `stroke-${Date.now().toString(36)}-${(strokeCounter++).toString(36)}`;
@@ -24,6 +26,24 @@ const HANDLE_RADIUS_PX = 7;
 // Screen-px stroke width of the handle's colored ring (white-disc + ring, so the
 // knob stays legible over a line of any color). Also zoom-divided.
 const HANDLE_RING_PX = 2;
+// Doc-space floor on a shape-corner resize's width/height — the worklet twin of
+// selectTool's MIN_SHAPE_EXTENT (the live preview must clamp identically to the
+// buildShapeCornerPatch commit). Keep the two in sync.
+const MIN_SHAPE_EXTENT = 1;
+// Magnifying-glass loupe. A separate, top-most overlay canvas re-draws the Skia
+// scene zoomed around the finger and clipped to a fixed lens window, so it sits
+// ABOVE the RN measurement/input overlay (which the main canvas sits below) and
+// never touches the main canvas (no flicker). It mounts only during a precision
+// gesture, so there's no cost at rest.
+const LOUPE_SIZE_FRACTION = 0.3; // of the smaller canvas dimension
+const LOUPE_MARGIN = 12; // points from the top-left corner
+const LOUPE_MAGNIFICATION = 2; // extra zoom inside the lens, on top of viewport
+const LOUPE_RADIUS = 16; // lens corner radius
+const LOUPE_BORDER_WIDTH = 2;
+const LOUPE_BORDER_COLOR = '#1F2937';
+const LOUPE_BG_COLOR = '#FFFFFF';
+const LOUPE_CROSSHAIR_COLOR = '#1F293799'; // ~60% dark — marks the exact point
+const LOUPE_CROSSHAIR_ARM = 9; // half-length of each crosshair arm, points
 // 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.
@@ -36,13 +56,22 @@ const HANDLE_RING_PX = 2;
 // is only re-synced once each gesture ends. The tool/tap path still hops to
 // JS (`runOnJS(true)`) since drawing/selection are React-state operations.
 export const AnnotationCanvasInner = (props) => {
-    const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, width, height, style, } = props;
+    const { resolveImageUrl, stampFontSource, stampValueFontSize = 14, width, height, style, magnifierTopOffset = 0, } = props;
     const valueFont = useFont(stampFontSource, stampValueFontSize);
     const state = useAnnotationCanvasState(props);
+    // Decode the background image ONCE here and share it with both the main
+    // canvas and the magnifier loupe. If each canvas loaded its own, the loupe
+    // would flash its blank base every gesture while it re-resolved + re-decoded.
+    const backgroundSkImage = useBackgroundSkImage(state.effectiveCanvas.viewport.backgroundImage, resolveImageUrl);
     // Latest state behind a ref so the gesture object can be built once and
     // never rebuilt mid-gesture — its JS callbacks read `stateRef.current`.
     const stateRef = useRef(state);
     stateRef.current = state;
+    // Open-value-entry callback (edit mode). Rides a ref so the gesture needn't
+    // rebuild when it changes; the second-tap-on-selected detection lives in the
+    // tap gesture below (it compares against the selection captured pre-tap).
+    const onStampDoubleTapRef = useRef(props.onMeasurementStampDoubleTap);
+    onStampDoubleTapRef.current = props.onMeasurementStampDoubleTap;
     // Live viewport on the UI thread. Initialised from the JS snapshot; kept in
     // sync from JS only when not actively gesturing (see the effect below).
     const zoom = useSharedValue(state.viewport.zoom);
@@ -58,6 +87,40 @@ export const AnnotationCanvasInner = (props) => {
             { translateY: -panY.value },
         ];
     });
+    // Magnifying-glass loupe. The live touch (screen points) rides shared values
+    // the gesture worklets update; `magnifying` (React state) gates whether the
+    // loupe shader wraps the canvas at all — so the extra fullscreen pass exists
+    // only while a precision gesture is in flight (drawing, shape rubber-band,
+    // endpoint/corner drags), never during idle renders or viewport pan/zoom.
+    const magTouchX = useSharedValue(0);
+    const magTouchY = useSharedValue(0);
+    const [magnifying, setMagnifying] = useState(false);
+    // Lens geometry (screen points): a fixed square in the top-left, pushed below
+    // any overlaid toolbar by magnifierTopOffset. Its CENTER maps to the live
+    // touch point, so the magnified slice is the canvas around the finger.
+    const loupeSize = Math.round(Math.min(width, height) * LOUPE_SIZE_FRACTION);
+    const loupeX = LOUPE_MARGIN;
+    const loupeY = magnifierTopOffset + LOUPE_MARGIN;
+    const loupeCx = loupeX + loupeSize / 2;
+    const loupeCy = loupeY + loupeSize / 2;
+    // World→lens transform: take the live screen point under the finger to the
+    // lens center, scaled by LOUPE_MAGNIFICATION on top of the viewport zoom.
+    // screen' = lensCenter + m * (worldTransform(world) - touch). Composed as a
+    // transform list (last entry applied to the point first), prepended onto the
+    // viewport's own [scale, -pan] ops.
+    const loupeTransform = useDerivedValue(() => {
+        'worklet';
+        return [
+            { translateX: loupeCx },
+            { translateY: loupeCy },
+            { scale: LOUPE_MAGNIFICATION },
+            { translateX: -magTouchX.value },
+            { translateY: -magTouchY.value },
+            { scale: zoom.value },
+            { translateX: -panX.value },
+            { translateY: -panY.value },
+        ];
+    }, [loupeCx, loupeCy]);
     // In-flight freehand stroke, owned by the UI thread. The drawing gesture
     // appends world-space points to `livePoints`; `livePath` rebuilds the Skia
     // path off it. React state is untouched until the stroke commits on
@@ -179,13 +242,14 @@ export const AnnotationCanvasInner = (props) => {
     // Live mirror of the active shape tool's config for the worklet path
     // builders (the derived values are created once, so they can't close over
     // the changing `shapeDraw` prop).
-    const shapeCfg = useSharedValue({ kind: 'line', cap: 'round', width: 2 });
+    const shapeCfg = useSharedValue({ kind: 'line', cap: 'round', startCap: 'round', width: 2 });
     useEffect(() => {
         if (!shapeDraw)
             return;
         shapeCfg.value = {
             kind: shapeDraw.kind,
             cap: shapeDraw.cap ?? 'round',
+            startCap: shapeDraw.startCap ?? 'round',
             width: shapeDraw.width,
         };
     }, [shapeDraw, shapeCfg]);
@@ -256,15 +320,20 @@ export const AnnotationCanvasInner = (props) => {
             path.close();
         };
         for (const e of handoffShapes.value) {
-            if (e.kind === 'line' && e.cap === 'arrow') {
+            if (e.kind !== 'line')
+                continue;
+            // End head at b (points a→b); start head at a (points b→a, args swapped).
+            if (e.cap === 'arrow')
                 addHead(e.ax, e.ay, e.bx, e.by);
-            }
+            if (e.startCap === 'arrow')
+                addHead(e.bx, e.by, e.ax, e.ay);
         }
         const s = liveShape.value;
-        if (s.active &&
-            shapeCfg.value.kind === 'line' &&
-            shapeCfg.value.cap === 'arrow') {
-            addHead(s.ax, s.ay, s.bx, s.by);
+        if (s.active && shapeCfg.value.kind === 'line') {
+            if (shapeCfg.value.cap === 'arrow')
+                addHead(s.ax, s.ay, s.bx, s.by);
+            if (shapeCfg.value.startCap === 'arrow')
+                addHead(s.bx, s.by, s.ax, s.ay);
         }
         return path;
     });
@@ -420,6 +489,124 @@ export const AnnotationCanvasInner = (props) => {
             { translateY: -c.py },
         ];
     });
+    // Geometric-shape corner resize (rect/ellipse/polygon). `shapeResizeId`
+    // (React state) gates which shape renders live; `shapeResizeCtx` carries the
+    // fixed (opposite) corner and the grabbed corner's start position (from
+    // DragSelectionConfig.hitTestShapeCorner), and `shapeResizePts` the shape's
+    // start geometry. The preview re-renders the shape from live GEOMETRY (a
+    // derived path) rather than a scale transform — a non-uniform scale transform
+    // would warp the stroke width (top/bottom edges thicken with scaleY); drawing
+    // the scaled outline at a constant stroke keeps it crisp. The commit on
+    // release goes through buildShapeCornerPatch, which scales identically.
+    const [shapeResizeId, setShapeResizeId] = useState(null);
+    const shapeResizeCtx = useSharedValue({ fx: 0, fy: 0, mx: 0, my: 0, uni: 0 });
+    // The resized shape's start geometry: kind + flat [x,y,x,y,…] points.
+    const shapeResizePts = useSharedValue({
+        kind: '',
+        pts: [],
+    });
+    const shapeResizeTargetRef = useRef(null);
+    // Live scale factors about the fixed corner. WORKLET TWIN of
+    // selectTool.shapeCornerPatch — keep the clamp + the ellipse uniform-scale
+    // branch in sync. Read by the path + box derived values below.
+    const shapeResizeScale = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const denomX = c.mx - c.fx;
+        const denomY = c.my - c.fy;
+        let offX = c.mx + dragX.value - c.fx;
+        let offY = c.my + dragY.value - c.fy;
+        offX =
+            denomX >= 0
+                ? Math.max(MIN_SHAPE_EXTENT, offX)
+                : Math.min(-MIN_SHAPE_EXTENT, offX);
+        offY =
+            denomY >= 0
+                ? Math.max(MIN_SHAPE_EXTENT, offY)
+                : Math.min(-MIN_SHAPE_EXTENT, offY);
+        let sx = denomX !== 0 ? offX / denomX : 1;
+        let sy = denomY !== 0 ? offY / denomY : 1;
+        if (c.uni === 1) {
+            const oldDiag = Math.sqrt(denomX * denomX + denomY * denomY);
+            const s0 = oldDiag !== 0 ? Math.sqrt(offX * offX + offY * offY) / oldDiag : 1;
+            sx = s0;
+            sy = s0;
+        }
+        return { sx, sy };
+    });
+    // The shape's outline scaled about the fixed corner, rebuilt per frame.
+    // WORKLET TWIN of ShapeElement's per-kind rendering (rect/ellipse/polygon) —
+    // keep in sync.
+    const shapeResizePath = useDerivedValue(() => {
+        'worklet';
+        const path = Skia.Path.Make();
+        const g = shapeResizePts.value;
+        const c = shapeResizeCtx.value;
+        const { sx, sy } = shapeResizeScale.value;
+        const n = g.pts.length;
+        if (n < 4)
+            return path;
+        const px = (i) => c.fx + (g.pts[i] - c.fx) * sx;
+        const py = (i) => c.fy + (g.pts[i + 1] - c.fy) * sy;
+        if (g.kind === 'rect' || g.kind === 'ellipse') {
+            const ax = px(0);
+            const ay = py(0);
+            const bx = px(2);
+            const by = py(2);
+            if (g.kind === 'ellipse') {
+                const r = Math.max(Math.abs(bx - ax), Math.abs(by - ay)) / 2;
+                path.addCircle((ax + bx) / 2, (ay + by) / 2, r);
+            }
+            else {
+                const minX = Math.min(ax, bx);
+                const maxX = Math.max(ax, bx);
+                const minY = Math.min(ay, by);
+                const maxY = Math.max(ay, by);
+                path.moveTo(minX, minY);
+                path.lineTo(maxX, minY);
+                path.lineTo(maxX, maxY);
+                path.lineTo(minX, maxY);
+                path.close();
+            }
+        }
+        else {
+            // polygon (incl. triangle): the scaled outline through every point.
+            path.moveTo(px(0), py(0));
+            for (let i = 2; i < n; i += 2)
+                path.lineTo(px(i), py(i));
+            path.close();
+        }
+        return path;
+    });
+    // Live selection box: the scaled visual bounds (fixed corner ↔ scaled moving
+    // corner) padded by SELECTION_PAD, so the box tracks the resize at a constant
+    // stroke too (the transform would have warped it like the shape). Four
+    // separate derived values so each feeds its own animated <Rect> prop (Skia
+    // animates props individually — see `liveRect`).
+    const shapeResizeBoxX = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmx = c.fx + (c.mx - c.fx) * shapeResizeScale.value.sx;
+        return Math.min(c.fx, nmx) - SELECTION_PAD;
+    });
+    const shapeResizeBoxY = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmy = c.fy + (c.my - c.fy) * shapeResizeScale.value.sy;
+        return Math.min(c.fy, nmy) - SELECTION_PAD;
+    });
+    const shapeResizeBoxW = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmx = c.fx + (c.mx - c.fx) * shapeResizeScale.value.sx;
+        return Math.abs(nmx - c.fx) + SELECTION_PAD * 2;
+    });
+    const shapeResizeBoxH = useDerivedValue(() => {
+        'worklet';
+        const c = shapeResizeCtx.value;
+        const nmy = c.fy + (c.my - c.fy) * shapeResizeScale.value.sy;
+        return Math.abs(nmy - c.fy) + SELECTION_PAD * 2;
+    });
     // Per-gesture refs so we always emit a matching down/move/up sequence.
     const pointerIdRef = useRef(1);
     const inFlightRef = useRef(null);
@@ -463,6 +650,8 @@ export const AnnotationCanvasInner = (props) => {
             const id = pointerIdRef.current++;
             const screen = { x: e.x, y: e.y };
             inFlightRef.current = { id, lastScreen: screen };
+            magTouchX.value = e.x;
+            magTouchY.value = e.y;
             stateRef.current.dispatchPointerDown(buildEvent(id, screen));
         })
             .onUpdate((e) => {
@@ -471,6 +660,12 @@ export const AnnotationCanvasInner = (props) => {
                 return;
             const screen = { x: e.x, y: e.y };
             f.lastScreen = screen;
+            // Drag-to-draw tools (measurement line / rectangle) run through this
+            // JS-thread pointer path; show the loupe once the touch actually moves
+            // so a plain tap-to-place tool never flashes it.
+            magTouchX.value = e.x;
+            magTouchY.value = e.y;
+            setMagnifying(true);
             stateRef.current.dispatchPointerMove(buildEvent(f.id, screen));
         })
             .onEnd((e) => {
@@ -481,6 +676,7 @@ export const AnnotationCanvasInner = (props) => {
             inFlightRef.current = null;
         })
             .onFinalize(() => {
+            setMagnifying(false);
             if (inFlightRef.current) {
                 stateRef.current.dispatchPointerCancel();
                 inFlightRef.current = null;
@@ -530,11 +726,33 @@ export const AnnotationCanvasInner = (props) => {
                 st.ctx.commit({ ops: [{ op: 'addStroke', stroke }] });
                 return;
             }
+            // Capture the selection BEFORE this tap re-selects, so we can tell a
+            // first tap (select) from a second tap on the already-selected tile.
+            const prevSelectedId = st.ctx.selection?.ids[0] ?? null;
             // Otherwise synthesize a down+up sequence so tools that only listen to
             // onPointerUp (e.g. measurement stamp) still fire.
             const id = pointerIdRef.current++;
             st.dispatchPointerDown(buildEvent(id, screen));
             st.dispatchPointerUp(buildEvent(id, screen));
+            // Edit-mode "tap the selected tile to open value entry": when the select
+            // tool is active the stamp overlay is non-interactive (so drag/select
+            // keep working), which means the view-mode TouchableOpacity can't catch
+            // the tap. Mirror handleViewStampPress here — a first tap only selects, a
+            // second tap on the same (already-selected) tile fires the consumer
+            // callback. Not a timed double-tap: the tile must already have been
+            // selected by a previous tap.
+            const onActivate = onStampDoubleTapRef.current;
+            if (!onActivate || !dragSelection || !prevSelectedId)
+                return;
+            const world = st.ctx.viewport.screenToWorld(screen);
+            const zoomNow = st.ctx.viewport.state.zoom;
+            const hit = dragSelection.hitTest(st.ctx.document, world, zoomNow, st.ctx.tileViewportScale);
+            if (!hit || hit.kind !== 'measurement' || hit.id !== prevSelectedId) {
+                return;
+            }
+            const placed = st.ctx.document.placedMeasurements.find((p) => p.id === hit.id);
+            if (placed)
+                onActivate(placed);
         });
         // Viewport pan — runs on the UI thread (no runOnJS), mutating the shared
         // viewport directly. Mirrors viewport.ts `panBy`. Used for both the
@@ -610,6 +828,7 @@ export const AnnotationCanvasInner = (props) => {
                         color: fh.color,
                         width: fh.width,
                         cap: fh.cap ?? 'round',
+                        ...(fh.startCap === 'arrow' && { startCap: 'arrow' }),
                         ...(fh.dash && { dash: true }),
                         points: worldPoints,
                         createdAt: Date.now(),
@@ -637,9 +856,14 @@ export const AnnotationCanvasInner = (props) => {
                     e.x / zoom.value + panX.value,
                     e.y / zoom.value + panY.value,
                 ];
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                runOnJS(setMagnifying)(true);
             })
                 .onChange((e) => {
                 'worklet';
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
                 const wx = e.x / zoom.value + panX.value;
                 const wy = e.y / zoom.value + panY.value;
                 const pts = livePoints.value;
@@ -675,6 +899,7 @@ export const AnnotationCanvasInner = (props) => {
                 // Cancel path (no onEnd): drop the in-flight preview. After a normal
                 // end the buffer is already empty, so this is a no-op.
                 livePoints.value = [];
+                runOnJS(setMagnifying)(false);
             });
         };
         // Shape rubber-band (line/arrow/rect/triangle/circle tools) — one finger,
@@ -694,6 +919,7 @@ export const AnnotationCanvasInner = (props) => {
                     color: cfg.color,
                     width: cfg.width,
                     cap: cfg.cap,
+                    startCap: cfg.startCap,
                     dash: cfg.dash,
                     layerId: st.ctx.document.layers[0]?.id ?? DEFAULT_LAYER_ID,
                     id,
@@ -709,12 +935,17 @@ export const AnnotationCanvasInner = (props) => {
                 const wx = e.x / zoom.value + panX.value;
                 const wy = e.y / zoom.value + panY.value;
                 liveShape.value = { active: true, ax: wx, ay: wy, bx: wx, by: wy };
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
+                runOnJS(setMagnifying)(true);
             })
                 .onChange((e) => {
                 'worklet';
                 const s = liveShape.value;
                 if (!s.active)
                     return;
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
                 liveShape.value = {
                     active: true,
                     ax: s.ax,
@@ -746,6 +977,7 @@ export const AnnotationCanvasInner = (props) => {
                         id,
                         kind: cfg.kind,
                         cap: cfg.cap ?? 'round',
+                        startCap: cfg.startCap ?? 'round',
                         ax: s.ax,
                         ay: s.ay,
                         bx: s.bx,
@@ -760,6 +992,7 @@ export const AnnotationCanvasInner = (props) => {
                 // Cancel path (no onEnd): drop the in-flight rubber-band. After a
                 // normal end the slot is already inactive, so this is a no-op.
                 liveShape.value = { active: false, ax: 0, ay: 0, bx: 0, by: 0 };
+                runOnJS(setMagnifying)(false);
             });
         };
         // Element drag (select tool) — one finger, UI thread. Hit-tests on the JS
@@ -794,6 +1027,7 @@ export const AnnotationCanvasInner = (props) => {
                             };
                             epTargetRef.current = { id: selId, handle };
                             setEpDragId(selId);
+                            setMagnifying(true);
                             return;
                         }
                     }
@@ -815,6 +1049,7 @@ export const AnnotationCanvasInner = (props) => {
                             };
                             shapeEpTargetRef.current = { id: selId, handle: shapeHandle };
                             setShapeEpDragId(selId);
+                            setMagnifying(true);
                             return;
                         }
                     }
@@ -831,6 +1066,7 @@ export const AnnotationCanvasInner = (props) => {
                         };
                         resizeTargetRef.current = { id: selId };
                         setResizingId(selId);
+                        setMagnifying(true);
                         return;
                     }
                     // Rectangle-annotation corner handle — also selected-element-only.
@@ -844,6 +1080,35 @@ export const AnnotationCanvasInner = (props) => {
                         };
                         rectTargetRef.current = { id: selId, corner: rectCornerHit.corner };
                         setRectDragId(selId);
+                        setMagnifying(true);
+                        return;
+                    }
+                    // Shape (rect/ellipse/polygon) bounding-box corner handle — the shape
+                    // twin of the rect-annotation corner above; scales length and width.
+                    const shapeCornerHit = cfg.hitTestShapeCorner?.(st.ctx.document, selId, world, zoomNow);
+                    if (shapeCornerHit) {
+                        const cornerShape = st.ctx.document.shapes.find((x) => x.id === selId);
+                        shapeResizeCtx.value = {
+                            fx: shapeCornerHit.fixed.x,
+                            fy: shapeCornerHit.fixed.y,
+                            mx: shapeCornerHit.moving.x,
+                            my: shapeCornerHit.moving.y,
+                            uni: cornerShape?.kind === 'ellipse' ? 1 : 0,
+                        };
+                        const flat = [];
+                        for (const p of cornerShape?.geometry.points ?? []) {
+                            flat.push(p.x, p.y);
+                        }
+                        shapeResizePts.value = {
+                            kind: cornerShape?.kind ?? '',
+                            pts: flat,
+                        };
+                        shapeResizeTargetRef.current = {
+                            id: selId,
+                            corner: shapeCornerHit.corner,
+                        };
+                        setShapeResizeId(selId);
+                        setMagnifying(true);
                         return;
                     }
                 }
@@ -878,6 +1143,8 @@ export const AnnotationCanvasInner = (props) => {
             };
             const endSelectDrag = (dx, dy) => {
                 const st = stateRef.current;
+                // Any precision sub-drag that turned the loupe on is ending now.
+                setMagnifying(false);
                 // Resize commit: scale the shape by the final drag (clamped in
                 // buildResizePatch exactly like the live preview).
                 const rT = resizeTargetRef.current;
@@ -907,6 +1174,19 @@ export const AnnotationCanvasInner = (props) => {
                     setRectDragId(null);
                     return;
                 }
+                // Shape-corner commit: scale the shape by dragging the grabbed corner
+                // (opposite corner fixed); buildShapeCornerPatch clamps as the preview.
+                const shapeRT = shapeResizeTargetRef.current;
+                if (shapeRT) {
+                    if (dx !== 0 || dy !== 0) {
+                        const patch = cfg.buildShapeCornerPatch?.(st.ctx.document, shapeRT.id, shapeRT.corner, { x: dx, y: dy });
+                        if (patch)
+                            st.ctx.commit(patch);
+                    }
+                    shapeResizeTargetRef.current = null;
+                    setShapeResizeId(null);
+                    return;
+                }
                 // Endpoint commit: move the grabbed endpoint by the world delta.
                 const epT = epTargetRef.current;
                 if (epT) {
@@ -959,6 +1239,7 @@ export const AnnotationCanvasInner = (props) => {
                 setDraggingId(null);
             };
             const cancelSelectDrag = () => {
+                setMagnifying(false);
                 // No commit — dropping the gating ids snaps everything back.
                 dragTargetRef.current = null;
                 slideTargetRef.current = null;
@@ -966,12 +1247,14 @@ export const AnnotationCanvasInner = (props) => {
                 shapeEpTargetRef.current = null;
                 resizeTargetRef.current = null;
                 rectTargetRef.current = null;
+                shapeResizeTargetRef.current = null;
                 setDraggingId(null);
                 setSlidingId(null);
                 setEpDragId(null);
                 setShapeEpDragId(null);
                 setResizingId(null);
                 setRectDragId(null);
+                setShapeResizeId(null);
             };
             return Gesture.Pan()
                 .minPointers(1)
@@ -981,6 +1264,10 @@ export const AnnotationCanvasInner = (props) => {
                 dragEnded.value = false;
                 dragX.value = 0;
                 dragY.value = 0;
+                // The loupe (turned on by beginSelectDrag only for precision sub-
+                // drags) follows the live finger, not the hit-test origin.
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
                 // Hit-test at the touch-down point — onStart fires only after the
                 // pan threshold, so back out the accumulated translation.
                 runOnJS(beginSelectDrag)({
@@ -990,6 +1277,8 @@ export const AnnotationCanvasInner = (props) => {
             })
                 .onChange((e) => {
                 'worklet';
+                magTouchX.value = e.x;
+                magTouchY.value = e.y;
                 // World-space delta from the drag origin. Applied to the element
                 // only once draggingId is set; otherwise it affects nothing.
                 dragX.value = e.translationX / zoom.value;
@@ -1050,72 +1339,89 @@ export const AnnotationCanvasInner = (props) => {
     const activeTool = props.tools.find((t) => t.id === props.activeToolId) ?? null;
     const customPreview = activeTool?.renderPreview?.(state.customPreviewState, state.ctx);
     const { renderMeasurementStamp, onMeasurementStampPress, onMeasurementStampLongPress, resolveStampMeasurement, onMeasurementStampRemove, 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,
-                        resolveImageUrl,
-                        valueFont,
-                        // Freehand drawing runs on the UI thread via `livePreview`, so the
-                        // JS-state pen preview is unused on native.
-                        penDrawingStroke: null,
-                        livePreview: freehand
-                            ? {
-                                path: livePath,
-                                handoffPaths: [
-                                    handoffPath0,
-                                    handoffPath1,
-                                    handoffPath2,
-                                    handoffPath3,
-                                ],
-                                color: freehand.color,
-                                width: freehand.width,
-                                cap: freehand.cap ?? 'round',
-                                dash: freehand.dash ?? false,
-                                opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
-                            }
-                            : null,
-                        // UI-thread shape rubber-band (live + pending handoffs) — only
-                        // while a shape tool is active (handoffs always release within a
-                        // frame or two of the commit, before the tool can change).
-                        shapePreview: shapeDraw
-                            ? {
-                                path: shapeBodyPath,
-                                headPath: shapeHeadPath,
-                                color: shapeDraw.color,
-                                width: shapeDraw.width,
-                                cap: shapeDraw.cap ?? 'round',
-                                dash: shapeDraw.dash ?? false,
-                            }
-                            : null,
-                        draggingId,
-                        dragTransform,
-                        resizingId,
-                        resizeTransform,
-                        selectedId: selection?.ids[0] ?? null,
-                        endpointDragId: epDragId,
-                        shapeEndpointDragId: shapeEpDragId,
-                        liveLineP1,
-                        liveLineP2,
-                        rectDragId,
-                        liveRect: {
-                            x: liveRectX,
-                            y: liveRectY,
-                            width: liveRectW,
-                            height: liveRectH,
-                        },
-                        // Endpoint/corner handles are drag affordances — only the select
-                        // tool can act on them, so suppress them when the active tool has
-                        // no drag support (e.g. view mode's pan tool, where a selected
-                        // measurement still shows its tile chrome but must not advertise
-                        // draggability).
-                        handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
-                        handleRingWidth: activeTool?.dragSelection
-                            ? handleRingWidth
-                            : undefined,
-                        customPreview,
-                    }) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
+    // The Skia scene props, shared by the main canvas and the loupe overlay. The
+    // loupe re-runs the SAME scene with a magnifying world transform + a lens
+    // clip (see loupeWrap) in a separate top-most canvas, so it shows live vector
+    // content (the dragged line, handles, strokes) magnified above everything.
+    const skiaProps = {
+        width,
+        height,
+        effectiveCanvas: state.effectiveCanvas,
+        worldTransform,
+        resolveImageUrl,
+        backgroundSkImage,
+        valueFont,
+        // Freehand drawing runs on the UI thread via `livePreview`, so the
+        // JS-state pen preview is unused on native.
+        penDrawingStroke: null,
+        livePreview: freehand
+            ? {
+                path: livePath,
+                handoffPaths: [
+                    handoffPath0,
+                    handoffPath1,
+                    handoffPath2,
+                    handoffPath3,
+                ],
+                color: freehand.color,
+                width: freehand.width,
+                cap: freehand.cap ?? 'round',
+                dash: freehand.dash ?? false,
+                opacity: freehand.variant === 'highlighter' ? 0.3 : 1,
+            }
+            : null,
+        // UI-thread shape rubber-band (live + pending handoffs) — only while a
+        // shape tool is active (handoffs always release within a frame or two of
+        // the commit, before the tool can change).
+        shapePreview: shapeDraw
+            ? {
+                path: shapeBodyPath,
+                headPath: shapeHeadPath,
+                color: shapeDraw.color,
+                width: shapeDraw.width,
+                cap: shapeDraw.cap ?? 'round',
+                dash: shapeDraw.dash ?? false,
+            }
+            : null,
+        draggingId,
+        dragTransform,
+        resizingId,
+        resizeTransform,
+        selectedId: selection?.ids[0] ?? null,
+        endpointDragId: epDragId,
+        shapeEndpointDragId: shapeEpDragId,
+        liveLineP1,
+        liveLineP2,
+        rectDragId,
+        liveRect: {
+            x: liveRectX,
+            y: liveRectY,
+            width: liveRectW,
+            height: liveRectH,
+        },
+        shapeResizeId,
+        shapeResizePath,
+        shapeResizeBox: {
+            x: shapeResizeBoxX,
+            y: shapeResizeBoxY,
+            width: shapeResizeBoxW,
+            height: shapeResizeBoxH,
+        },
+        // Endpoint/corner handles are drag affordances — only the select tool can
+        // act on them, so suppress them when the active tool has no drag support
+        // (e.g. view mode's pan tool, where a selected measurement still shows its
+        // tile chrome but must not advertise draggability).
+        handleRadius: activeTool?.dragSelection ? handleRadius : undefined,
+        handleRingWidth: activeTool?.dragSelection ? handleRingWidth : undefined,
+        customPreview,
+    };
+    // Lens window for the loupe: an opaque white base + the magnified scene
+    // clipped to a rounded square, a border, and a crosshair marking the exact
+    // point under the finger. Drawn in the overlay canvas's screen space (the
+    // magnification lives in loupeTransform, applied to `content`).
+    const loupeClip = rrect(rect(loupeX, loupeY, loupeSize, loupeSize), LOUPE_RADIUS, LOUPE_RADIUS);
+    const loupeWrap = (content) => (_jsxs(_Fragment, { children: [_jsxs(Group, { clip: loupeClip, children: [_jsx(Rect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, color: LOUPE_BG_COLOR }), content] }), _jsx(RoundedRect, { x: loupeX, y: loupeY, width: loupeSize, height: loupeSize, r: LOUPE_RADIUS, color: LOUPE_BORDER_COLOR, style: "stroke", strokeWidth: LOUPE_BORDER_WIDTH }), _jsx(Line, { p1: { x: loupeCx - LOUPE_CROSSHAIR_ARM, y: loupeCy }, p2: { x: loupeCx + LOUPE_CROSSHAIR_ARM, y: loupeCy }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 }), _jsx(Line, { p1: { x: loupeCx, y: loupeCy - LOUPE_CROSSHAIR_ARM }, p2: { x: loupeCx, y: loupeCy + LOUPE_CROSSHAIR_ARM }, color: LOUPE_CROSSHAIR_COLOR, strokeWidth: 1.5 })] }));
+    return (_jsxs(GestureHandlerRootView, { style: [{ width, height }, style], children: [_jsx(GestureDetector, { gesture: gesture, children: _jsx(View, { style: { width, height }, collapsable: false, children: AnnotationCanvasSkia(skiaProps) }) }), renderMeasurementStamp && (_jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: state.effectiveCanvas.placedMeasurements.map((placed) => (_jsx(MeasurementStampOverlayItem, { placed: placed, measurement: placed.measurementId
                         ? (state.measurementsById.get(placed.measurementId) ?? null)
                         : (resolveStampMeasurement?.(placed) ?? null), selected: selection?.ids.includes(placed.id) ?? false, dragging: draggingId === placed.id, sliding: slidingId === placed.id, endpointDragging: epDragId === placed.id, rectResizing: rectDragId === placed.id, zoomSnapshot: state.viewport.zoom, zoom: zoom, panX: panX, panY: panY, dragX: dragX, dragY: dragY, slideCtx: slideCtx, epCtx: epCtx, rectCtx: rectCtx, renderMeasurementStamp: renderMeasurementStamp, tileScaleFactor: state.effectiveCanvas.tileScaleFactor, tileViewportScale: state.tileViewportScale, onStampPress: onMeasurementStampPress, onStampLongPress: onMeasurementStampLongPress, onRemove: () => {
                         const defaultRemove = () => {
@@ -1129,7 +1435,11 @@ export const AnnotationCanvasInner = (props) => {
                             return;
                         }
                         defaultRemove();
-                    } }, placed.id))) }))] }));
+                    } }, placed.id))) })), magnifying && (_jsx(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: AnnotationCanvasSkia({
+                    ...skiaProps,
+                    worldTransform: loupeTransform,
+                    wrapContent: loupeWrap,
+                }) }))] }));
 };
 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);