@archireport/react-native-drawing 0.2.0

package/lib/module/hooks/useViewportGesture.js

@@ -0,0 +1,234 @@
+"use strict";
+
+import { useCallback } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import { useSharedValue, withTiming, runOnJS } from "react-native-reanimated";
+const DEFAULT_MAX_ZOOM = 5;
+const RESET_DURATION = 250;
+function clampTranslate(tx, ty, scale, _layoutW, _layoutH, imgOffX, imgOffY, imgW, imgH) {
+  "worklet";
+
+  // The image occupies [imgOffX, imgOffY] to [imgOffX+imgW, imgOffY+imgH] in layout space.
+  // After zoom, the image spans imgW*scale in canvas coords, displayed from (imgOffX*scale + tx).
+  // We want the scaled image to cover its original area:
+  //   - Left edge of scaled image <= left edge of original area:  imgOffX*scale + tx <= imgOffX
+  //   - Right edge of scaled image >= right edge of original area: imgOffX*scale + tx + imgW*scale >= imgOffX + imgW
+  // Simplify:
+  //   tx <= imgOffX * (1 - scale)
+  //   tx >= (imgOffX + imgW) * (1 - scale) + (layoutW - imgOffX - imgW) ... no, let's think differently.
+  //
+  // Viewport model: the canvas is rendered with transform [translate(tx,ty), scale(s)] applied from origin.
+  // A point at canvas coords (cx, cy) maps to screen (cx*s + tx, cy*s + ty).
+  // Image starts at canvas (imgOffX, imgOffY) with size (imgW, imgH).
+  // On screen, image top-left = (imgOffX*s + tx, imgOffY*s + ty).
+  // On screen, image bottom-right = ((imgOffX+imgW)*s + tx, (imgOffY+imgH)*s + ty).
+  //
+  // Constraint: image should fill the original viewport area [imgOffX..imgOffX+imgW] x [imgOffY..imgOffY+imgH]:
+  //   imgOffX*s + tx <= imgOffX         =>  tx <= imgOffX*(1-s)
+  //   (imgOffX+imgW)*s + tx >= imgOffX+imgW  =>  tx >= (imgOffX+imgW)*(1-s)
+  //   same for Y.
+  const minTx = (imgOffX + imgW) * (1 - scale);
+  const maxTx = imgOffX * (1 - scale);
+  const minTy = (imgOffY + imgH) * (1 - scale);
+  const maxTy = imgOffY * (1 - scale);
+  const clampedTx = Math.min(maxTx, Math.max(minTx, tx));
+  const clampedTy = Math.min(maxTy, Math.max(minTy, ty));
+  return [clampedTx, clampedTy];
+}
+export function useViewportGesture({
+  maxZoom = DEFAULT_MAX_ZOOM,
+  layoutWidth,
+  layoutHeight,
+  imageOffsetX,
+  imageOffsetY,
+  imageWidth,
+  imageHeight,
+  onPinchEnd
+}) {
+  const scale = useSharedValue(1);
+  const translateX = useSharedValue(0);
+  const translateY = useSharedValue(0);
+
+  // Saved state at gesture start
+  const savedScale = useSharedValue(1);
+  const savedTranslateX = useSharedValue(0);
+  const savedTranslateY = useSharedValue(0);
+
+  // Saved focal point at pinch start (for stable zoom center)
+  const savedFocalX = useSharedValue(0);
+  const savedFocalY = useSharedValue(0);
+
+  // Flag to prevent 2-finger pan from interfering during pinch
+  const isPinching = useSharedValue(false);
+
+  // ─── Pinch-to-zoom ──────────────────────────────────────────────────────
+  const pinchGesture = Gesture.Pinch().onBegin(e => {
+    "worklet";
+
+    isPinching.value = true;
+    savedScale.value = scale.value;
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+    savedFocalX.value = e.focalX;
+    savedFocalY.value = e.focalY;
+  }).onUpdate(e => {
+    "worklet";
+
+    const newScale = Math.min(maxZoom, Math.max(1, savedScale.value * e.scale));
+
+    // Canvas point under initial focal at gesture start:
+    const canvasFocalX = (savedFocalX.value - savedTranslateX.value) / savedScale.value;
+    const canvasFocalY = (savedFocalY.value - savedTranslateY.value) / savedScale.value;
+
+    // Pan delta from finger movement since gesture start:
+    const focalDeltaX = e.focalX - savedFocalX.value;
+    const focalDeltaY = e.focalY - savedFocalY.value;
+
+    // New translate: zoom around initial focal + follow finger pan
+    const newTx = savedFocalX.value - canvasFocalX * newScale + focalDeltaX;
+    const newTy = savedFocalY.value - canvasFocalY * newScale + focalDeltaY;
+    scale.value = newScale;
+    const [cx, cy] = clampTranslate(newTx, newTy, newScale, layoutWidth.value, layoutHeight.value, imageOffsetX.value, imageOffsetY.value, imageWidth.value, imageHeight.value);
+    translateX.value = cx;
+    translateY.value = cy;
+  }).onEnd(() => {
+    "worklet";
+
+    isPinching.value = false;
+    if (scale.value <= 1.05) {
+      // Snap back to 1x if close enough
+      scale.value = withTiming(1, {
+        duration: RESET_DURATION
+      });
+      translateX.value = withTiming(0, {
+        duration: RESET_DURATION
+      });
+      translateY.value = withTiming(0, {
+        duration: RESET_DURATION
+      });
+    } else if (onPinchEnd) {
+      // Zoomed in — notify caller so it can deactivate the tool
+      runOnJS(onPinchEnd)();
+    }
+  }).onFinalize(() => {
+    "worklet";
+
+    isPinching.value = false;
+  });
+
+  // ─── Two-finger pan (only when zoomed and NOT pinching) ─────────────────
+  const twoFingerPanGesture = Gesture.Pan().minPointers(2).maxPointers(2).onBegin(() => {
+    "worklet";
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }).onUpdate(e => {
+    "worklet";
+
+    // Skip if pinch is active — pinch handles its own panning
+    if (isPinching.value) return;
+    if (scale.value <= 1) return;
+    const newTx = savedTranslateX.value + e.translationX;
+    const newTy = savedTranslateY.value + e.translationY;
+    const [cx, cy] = clampTranslate(newTx, newTy, scale.value, layoutWidth.value, layoutHeight.value, imageOffsetX.value, imageOffsetY.value, imageWidth.value, imageHeight.value);
+    translateX.value = cx;
+    translateY.value = cy;
+  });
+
+  // ─── Single-finger pan (when zoomed with no active tool) ───────────────
+  const singleFingerPanGesture = Gesture.Pan().minPointers(1).maxPointers(1).minDistance(5).onBegin(() => {
+    "worklet";
+
+    savedTranslateX.value = translateX.value;
+    savedTranslateY.value = translateY.value;
+  }).onUpdate(e => {
+    "worklet";
+
+    if (scale.value <= 1) return;
+    const newTx = savedTranslateX.value + e.translationX;
+    const newTy = savedTranslateY.value + e.translationY;
+    const [cx, cy] = clampTranslate(newTx, newTy, scale.value, layoutWidth.value, layoutHeight.value, imageOffsetX.value, imageOffsetY.value, imageWidth.value, imageHeight.value);
+    translateX.value = cx;
+    translateY.value = cy;
+  });
+
+  // ─── Double-tap two-finger reset ───────────────────────────────────────
+  const doubleTapResetGesture = Gesture.Tap().numberOfTaps(2).minPointers(2).maxDuration(500).onEnd(() => {
+    "worklet";
+
+    scale.value = withTiming(1, {
+      duration: RESET_DURATION
+    });
+    translateX.value = withTiming(0, {
+      duration: RESET_DURATION
+    });
+    translateY.value = withTiming(0, {
+      duration: RESET_DURATION
+    });
+  });
+
+  // ─── Programmatic reset ────────────────────────────────────────────────
+  const resetViewport = useCallback(() => {
+    scale.value = withTiming(1, {
+      duration: RESET_DURATION
+    });
+    translateX.value = withTiming(0, {
+      duration: RESET_DURATION
+    });
+    translateY.value = withTiming(0, {
+      duration: RESET_DURATION
+    });
+  }, [scale, translateX, translateY]);
+  const zoomAt = useCallback((screenX, screenY, scaleFactor) => {
+    if (imageWidth.value <= 0 || imageHeight.value <= 0) return;
+    const previousScale = scale.value;
+    const nextScale = Math.min(maxZoom, Math.max(1, previousScale * scaleFactor));
+    if (Math.abs(nextScale - previousScale) < 0.001) return;
+    if (nextScale <= 1.05) {
+      scale.value = withTiming(1, {
+        duration: RESET_DURATION
+      });
+      translateX.value = withTiming(0, {
+        duration: RESET_DURATION
+      });
+      translateY.value = withTiming(0, {
+        duration: RESET_DURATION
+      });
+      return;
+    }
+    const canvasFocalX = (screenX - translateX.value) / previousScale;
+    const canvasFocalY = (screenY - translateY.value) / previousScale;
+    const nextTranslateX = screenX - canvasFocalX * nextScale;
+    const nextTranslateY = screenY - canvasFocalY * nextScale;
+    const [clampedX, clampedY] = clampTranslate(nextTranslateX, nextTranslateY, nextScale, layoutWidth.value, layoutHeight.value, imageOffsetX.value, imageOffsetY.value, imageWidth.value, imageHeight.value);
+    scale.value = nextScale;
+    translateX.value = clampedX;
+    translateY.value = clampedY;
+    if (previousScale <= 1.05 && onPinchEnd) {
+      onPinchEnd();
+    }
+  }, [maxZoom, onPinchEnd, scale, translateX, translateY, layoutWidth, layoutHeight, imageOffsetX, imageOffsetY, imageWidth, imageHeight]);
+
+  // ─── Programmatic pan (for minimap drag) ────────────────────────────────
+  const panViewport = useCallback((dtx, dty) => {
+    const newTx = translateX.value + dtx;
+    const newTy = translateY.value + dty;
+    const [cx, cy] = clampTranslate(newTx, newTy, scale.value, layoutWidth.value, layoutHeight.value, imageOffsetX.value, imageOffsetY.value, imageWidth.value, imageHeight.value);
+    translateX.value = cx;
+    translateY.value = cy;
+  }, [scale, translateX, translateY, layoutWidth, layoutHeight, imageOffsetX, imageOffsetY, imageWidth, imageHeight]);
+  return {
+    pinchGesture,
+    twoFingerPanGesture,
+    singleFingerPanGesture,
+    doubleTapResetGesture,
+    scale,
+    translateX,
+    translateY,
+    isPinching,
+    resetViewport,
+    panViewport,
+    zoomAt
+  };
+}
+//# sourceMappingURL=useViewportGesture.js.map

package/lib/module/hooks/useViewportGesture.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","Gesture","useSharedValue","withTiming","runOnJS","DEFAULT_MAX_ZOOM","RESET_DURATION","clampTranslate","tx","ty","scale","_layoutW","_layoutH","imgOffX","imgOffY","imgW","imgH","minTx","maxTx","minTy","maxTy","clampedTx","Math","min","max","clampedTy","useViewportGesture","maxZoom","layoutWidth","layoutHeight","imageOffsetX","imageOffsetY","imageWidth","imageHeight","onPinchEnd","translateX","translateY","savedScale","savedTranslateX","savedTranslateY","savedFocalX","savedFocalY","isPinching","pinchGesture","Pinch","onBegin","e","value","focalX","focalY","onUpdate","newScale","canvasFocalX","canvasFocalY","focalDeltaX","focalDeltaY","newTx","newTy","cx","cy","onEnd","duration","onFinalize","twoFingerPanGesture","Pan","minPointers","maxPointers","translationX","translationY","singleFingerPanGesture","minDistance","doubleTapResetGesture","Tap","numberOfTaps","maxDuration","resetViewport","zoomAt","screenX","screenY","scaleFactor","previousScale","nextScale","abs","nextTranslateX","nextTranslateY","clampedX","clampedY","panViewport","dtx","dty"],"sourceRoot":"../../../src","sources":["hooks/useViewportGesture.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,OAAO,QAAQ,8BAA8B;AACtD,SAASC,cAAc,EAAEC,UAAU,EAAEC,OAAO,QAAQ,yBAAyB;AAE7E,MAAMC,gBAAgB,GAAG,CAAC;AAC1B,MAAMC,cAAc,GAAG,GAAG;AAa1B,SAASC,cAAcA,CACrBC,EAAU,EACVC,EAAU,EACVC,KAAa,EACbC,QAAgB,EAChBC,QAAgB,EAChBC,OAAe,EACfC,OAAe,EACfC,IAAY,EACZC,IAAY,EACM;EAClB,SAAS;;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,MAAMC,KAAK,GAAG,CAACJ,OAAO,GAAGE,IAAI,KAAK,CAAC,GAAGL,KAAK,CAAC;EAC5C,MAAMQ,KAAK,GAAGL,OAAO,IAAI,CAAC,GAAGH,KAAK,CAAC;EACnC,MAAMS,KAAK,GAAG,CAACL,OAAO,GAAGE,IAAI,KAAK,CAAC,GAAGN,KAAK,CAAC;EAC5C,MAAMU,KAAK,GAAGN,OAAO,IAAI,CAAC,GAAGJ,KAAK,CAAC;EAEnC,MAAMW,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACL,KAAK,EAAEI,IAAI,CAACE,GAAG,CAACP,KAAK,EAAET,EAAE,CAAC,CAAC;EACtD,MAAMiB,SAAS,GAAGH,IAAI,CAACC,GAAG,CAACH,KAAK,EAAEE,IAAI,CAACE,GAAG,CAACL,KAAK,EAAEV,EAAE,CAAC,CAAC;EAEtD,OAAO,CAACY,SAAS,EAAEI,SAAS,CAAC;AAC/B;AAEA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,OAAO,GAAGtB,gBAAgB;EAC1BuB,WAAW;EACXC,YAAY;EACZC,YAAY;EACZC,YAAY;EACZC,UAAU;EACVC,WAAW;EACXC;AACyB,CAAC,EAAE;EAC5B,MAAMxB,KAAK,GAAGR,cAAc,CAAC,CAAC,CAAC;EAC/B,MAAMiC,UAAU,GAAGjC,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMkC,UAAU,GAAGlC,cAAc,CAAC,CAAC,CAAC;;EAEpC;EACA,MAAMmC,UAAU,GAAGnC,cAAc,CAAC,CAAC,CAAC;EACpC,MAAMoC,eAAe,GAAGpC,cAAc,CAAC,CAAC,CAAC;EACzC,MAAMqC,eAAe,GAAGrC,cAAc,CAAC,CAAC,CAAC;;EAEzC;EACA,MAAMsC,WAAW,GAAGtC,cAAc,CAAC,CAAC,CAAC;EACrC,MAAMuC,WAAW,GAAGvC,cAAc,CAAC,CAAC,CAAC;;EAErC;EACA,MAAMwC,UAAU,GAAGxC,cAAc,CAAC,KAAK,CAAC;;EAExC;EACA,MAAMyC,YAAY,GAAG1C,OAAO,CAAC2C,KAAK,CAAC,CAAC,CACjCC,OAAO,CAAEC,CAAC,IAAK;IACd,SAAS;;IACTJ,UAAU,CAACK,KAAK,GAAG,IAAI;IACvBV,UAAU,CAACU,KAAK,GAAGrC,KAAK,CAACqC,KAAK;IAC9BT,eAAe,CAACS,KAAK,GAAGZ,UAAU,CAACY,KAAK;IACxCR,eAAe,CAACQ,KAAK,GAAGX,UAAU,CAACW,KAAK;IACxCP,WAAW,CAACO,KAAK,GAAGD,CAAC,CAACE,MAAM;IAC5BP,WAAW,CAACM,KAAK,GAAGD,CAAC,CAACG,MAAM;EAC9B,CAAC,CAAC,CACDC,QAAQ,CAAEJ,CAAC,IAAK;IACf,SAAS;;IACT,MAAMK,QAAQ,GAAG7B,IAAI,CAACC,GAAG,CACvBI,OAAO,EACPL,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEa,UAAU,CAACU,KAAK,GAAGD,CAAC,CAACpC,KAAK,CACxC,CAAC;;IAED;IACA,MAAM0C,YAAY,GAChB,CAACZ,WAAW,CAACO,KAAK,GAAGT,eAAe,CAACS,KAAK,IAAIV,UAAU,CAACU,KAAK;IAChE,MAAMM,YAAY,GAChB,CAACZ,WAAW,CAACM,KAAK,GAAGR,eAAe,CAACQ,KAAK,IAAIV,UAAU,CAACU,KAAK;;IAEhE;IACA,MAAMO,WAAW,GAAGR,CAAC,CAACE,MAAM,GAAGR,WAAW,CAACO,KAAK;IAChD,MAAMQ,WAAW,GAAGT,CAAC,CAACG,MAAM,GAAGR,WAAW,CAACM,KAAK;;IAEhD;IACA,MAAMS,KAAK,GAAGhB,WAAW,CAACO,KAAK,GAAGK,YAAY,GAAGD,QAAQ,GAAGG,WAAW;IACvE,MAAMG,KAAK,GAAGhB,WAAW,CAACM,KAAK,GAAGM,YAAY,GAAGF,QAAQ,GAAGI,WAAW;IAEvE7C,KAAK,CAACqC,KAAK,GAAGI,QAAQ;IACtB,MAAM,CAACO,EAAE,EAAEC,EAAE,CAAC,GAAGpD,cAAc,CAC7BiD,KAAK,EACLC,KAAK,EACLN,QAAQ,EACRvB,WAAW,CAACmB,KAAK,EACjBlB,YAAY,CAACkB,KAAK,EAClBjB,YAAY,CAACiB,KAAK,EAClBhB,YAAY,CAACgB,KAAK,EAClBf,UAAU,CAACe,KAAK,EAChBd,WAAW,CAACc,KACd,CAAC;IACDZ,UAAU,CAACY,KAAK,GAAGW,EAAE;IACrBtB,UAAU,CAACW,KAAK,GAAGY,EAAE;EACvB,CAAC,CAAC,CACDC,KAAK,CAAC,MAAM;IACX,SAAS;;IACTlB,UAAU,CAACK,KAAK,GAAG,KAAK;IACxB,IAAIrC,KAAK,CAACqC,KAAK,IAAI,IAAI,EAAE;MACvB;MACArC,KAAK,CAACqC,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;MACzD6B,UAAU,CAACY,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;MAC9D8B,UAAU,CAACW,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;IAChE,CAAC,MAAM,IAAI4B,UAAU,EAAE;MACrB;MACA9B,OAAO,CAAC8B,UAAU,CAAC,CAAC,CAAC;IACvB;EACF,CAAC,CAAC,CACD4B,UAAU,CAAC,MAAM;IAChB,SAAS;;IACTpB,UAAU,CAACK,KAAK,GAAG,KAAK;EAC1B,CAAC,CAAC;;EAEJ;EACA,MAAMgB,mBAAmB,GAAG9D,OAAO,CAAC+D,GAAG,CAAC,CAAC,CACtCC,WAAW,CAAC,CAAC,CAAC,CACdC,WAAW,CAAC,CAAC,CAAC,CACdrB,OAAO,CAAC,MAAM;IACb,SAAS;;IACTP,eAAe,CAACS,KAAK,GAAGZ,UAAU,CAACY,KAAK;IACxCR,eAAe,CAACQ,KAAK,GAAGX,UAAU,CAACW,KAAK;EAC1C,CAAC,CAAC,CACDG,QAAQ,CAAEJ,CAAC,IAAK;IACf,SAAS;;IACT;IACA,IAAIJ,UAAU,CAACK,KAAK,EAAE;IACtB,IAAIrC,KAAK,CAACqC,KAAK,IAAI,CAAC,EAAE;IACtB,MAAMS,KAAK,GAAGlB,eAAe,CAACS,KAAK,GAAGD,CAAC,CAACqB,YAAY;IACpD,MAAMV,KAAK,GAAGlB,eAAe,CAACQ,KAAK,GAAGD,CAAC,CAACsB,YAAY;IACpD,MAAM,CAACV,EAAE,EAAEC,EAAE,CAAC,GAAGpD,cAAc,CAC7BiD,KAAK,EACLC,KAAK,EACL/C,KAAK,CAACqC,KAAK,EACXnB,WAAW,CAACmB,KAAK,EACjBlB,YAAY,CAACkB,KAAK,EAClBjB,YAAY,CAACiB,KAAK,EAClBhB,YAAY,CAACgB,KAAK,EAClBf,UAAU,CAACe,KAAK,EAChBd,WAAW,CAACc,KACd,CAAC;IACDZ,UAAU,CAACY,KAAK,GAAGW,EAAE;IACrBtB,UAAU,CAACW,KAAK,GAAGY,EAAE;EACvB,CAAC,CAAC;;EAEJ;EACA,MAAMU,sBAAsB,GAAGpE,OAAO,CAAC+D,GAAG,CAAC,CAAC,CACzCC,WAAW,CAAC,CAAC,CAAC,CACdC,WAAW,CAAC,CAAC,CAAC,CACdI,WAAW,CAAC,CAAC,CAAC,CACdzB,OAAO,CAAC,MAAM;IACb,SAAS;;IACTP,eAAe,CAACS,KAAK,GAAGZ,UAAU,CAACY,KAAK;IACxCR,eAAe,CAACQ,KAAK,GAAGX,UAAU,CAACW,KAAK;EAC1C,CAAC,CAAC,CACDG,QAAQ,CAAEJ,CAAC,IAAK;IACf,SAAS;;IACT,IAAIpC,KAAK,CAACqC,KAAK,IAAI,CAAC,EAAE;IACtB,MAAMS,KAAK,GAAGlB,eAAe,CAACS,KAAK,GAAGD,CAAC,CAACqB,YAAY;IACpD,MAAMV,KAAK,GAAGlB,eAAe,CAACQ,KAAK,GAAGD,CAAC,CAACsB,YAAY;IACpD,MAAM,CAACV,EAAE,EAAEC,EAAE,CAAC,GAAGpD,cAAc,CAC7BiD,KAAK,EACLC,KAAK,EACL/C,KAAK,CAACqC,KAAK,EACXnB,WAAW,CAACmB,KAAK,EACjBlB,YAAY,CAACkB,KAAK,EAClBjB,YAAY,CAACiB,KAAK,EAClBhB,YAAY,CAACgB,KAAK,EAClBf,UAAU,CAACe,KAAK,EAChBd,WAAW,CAACc,KACd,CAAC;IACDZ,UAAU,CAACY,KAAK,GAAGW,EAAE;IACrBtB,UAAU,CAACW,KAAK,GAAGY,EAAE;EACvB,CAAC,CAAC;;EAEJ;EACA,MAAMY,qBAAqB,GAAGtE,OAAO,CAACuE,GAAG,CAAC,CAAC,CACxCC,YAAY,CAAC,CAAC,CAAC,CACfR,WAAW,CAAC,CAAC,CAAC,CACdS,WAAW,CAAC,GAAG,CAAC,CAChBd,KAAK,CAAC,MAAM;IACX,SAAS;;IACTlD,KAAK,CAACqC,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;IACzD6B,UAAU,CAACY,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;IAC9D8B,UAAU,CAACW,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;EAChE,CAAC,CAAC;;EAEJ;EACA,MAAMqE,aAAa,GAAG3E,WAAW,CAAC,MAAM;IACtCU,KAAK,CAACqC,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;IACzD6B,UAAU,CAACY,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;IAC9D8B,UAAU,CAACW,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;MAAE0D,QAAQ,EAAEvD;IAAe,CAAC,CAAC;EAChE,CAAC,EAAE,CAACI,KAAK,EAAEyB,UAAU,EAAEC,UAAU,CAAC,CAAC;EAEnC,MAAMwC,MAAM,GAAG5E,WAAW,CACxB,CAAC6E,OAAe,EAAEC,OAAe,EAAEC,WAAmB,KAAK;IACzD,IAAI/C,UAAU,CAACe,KAAK,IAAI,CAAC,IAAId,WAAW,CAACc,KAAK,IAAI,CAAC,EAAE;IAErD,MAAMiC,aAAa,GAAGtE,KAAK,CAACqC,KAAK;IACjC,MAAMkC,SAAS,GAAG3D,IAAI,CAACC,GAAG,CACxBI,OAAO,EACPL,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEwD,aAAa,GAAGD,WAAW,CACzC,CAAC;IAED,IAAIzD,IAAI,CAAC4D,GAAG,CAACD,SAAS,GAAGD,aAAa,CAAC,GAAG,KAAK,EAAE;IAEjD,IAAIC,SAAS,IAAI,IAAI,EAAE;MACrBvE,KAAK,CAACqC,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;MACzD6B,UAAU,CAACY,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;MAC9D8B,UAAU,CAACW,KAAK,GAAG5C,UAAU,CAAC,CAAC,EAAE;QAAE0D,QAAQ,EAAEvD;MAAe,CAAC,CAAC;MAC9D;IACF;IAEA,MAAM8C,YAAY,GAAG,CAACyB,OAAO,GAAG1C,UAAU,CAACY,KAAK,IAAIiC,aAAa;IACjE,MAAM3B,YAAY,GAAG,CAACyB,OAAO,GAAG1C,UAAU,CAACW,KAAK,IAAIiC,aAAa;IAEjE,MAAMG,cAAc,GAAGN,OAAO,GAAGzB,YAAY,GAAG6B,SAAS;IACzD,MAAMG,cAAc,GAAGN,OAAO,GAAGzB,YAAY,GAAG4B,SAAS;IACzD,MAAM,CAACI,QAAQ,EAAEC,QAAQ,CAAC,GAAG/E,cAAc,CACzC4E,cAAc,EACdC,cAAc,EACdH,SAAS,EACTrD,WAAW,CAACmB,KAAK,EACjBlB,YAAY,CAACkB,KAAK,EAClBjB,YAAY,CAACiB,KAAK,EAClBhB,YAAY,CAACgB,KAAK,EAClBf,UAAU,CAACe,KAAK,EAChBd,WAAW,CAACc,KACd,CAAC;IAEDrC,KAAK,CAACqC,KAAK,GAAGkC,SAAS;IACvB9C,UAAU,CAACY,KAAK,GAAGsC,QAAQ;IAC3BjD,UAAU,CAACW,KAAK,GAAGuC,QAAQ;IAE3B,IAAIN,aAAa,IAAI,IAAI,IAAI9C,UAAU,EAAE;MACvCA,UAAU,CAAC,CAAC;IACd;EACF,CAAC,EACD,CACEP,OAAO,EACPO,UAAU,EACVxB,KAAK,EACLyB,UAAU,EACVC,UAAU,EACVR,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,WAAW,CAEf,CAAC;;EAED;EACA,MAAMsD,WAAW,GAAGvF,WAAW,CAC7B,CAACwF,GAAW,EAAEC,GAAW,KAAK;IAC5B,MAAMjC,KAAK,GAAGrB,UAAU,CAACY,KAAK,GAAGyC,GAAG;IACpC,MAAM/B,KAAK,GAAGrB,UAAU,CAACW,KAAK,GAAG0C,GAAG;IACpC,MAAM,CAAC/B,EAAE,EAAEC,EAAE,CAAC,GAAGpD,cAAc,CAC7BiD,KAAK,EACLC,KAAK,EACL/C,KAAK,CAACqC,KAAK,EACXnB,WAAW,CAACmB,KAAK,EACjBlB,YAAY,CAACkB,KAAK,EAClBjB,YAAY,CAACiB,KAAK,EAClBhB,YAAY,CAACgB,KAAK,EAClBf,UAAU,CAACe,KAAK,EAChBd,WAAW,CAACc,KACd,CAAC;IACDZ,UAAU,CAACY,KAAK,GAAGW,EAAE;IACrBtB,UAAU,CAACW,KAAK,GAAGY,EAAE;EACvB,CAAC,EACD,CACEjD,KAAK,EACLyB,UAAU,EACVC,UAAU,EACVR,WAAW,EACXC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,UAAU,EACVC,WAAW,CAEf,CAAC;EAED,OAAO;IACLU,YAAY;IACZoB,mBAAmB;IACnBM,sBAAsB;IACtBE,qBAAqB;IACrB7D,KAAK;IACLyB,UAAU;IACVC,UAAU;IACVM,UAAU;IACViC,aAAa;IACbY,WAAW;IACXX;EACF,CAAC;AACH","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+export { DrawingEditor } from "./DrawingEditor";
+
+// ─── Store ───────────────────────────────────────────────────────────────────
+export { useDrawingStore } from "./store/useDrawingStore";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+export { normalize, denormalize, normalizePoints, denormalizePoints, screenToCanvas } from "./utils/coordinates";
+export { serializeObjects, deserializeObjects, generateId } from "./utils/serialization";
+export { PRESET_COLORS, DEFAULT_STROKE_COLOR } from "./utils/colors";
+
+// ─── Reusable UI Components ─────────────────────────────────────────────────
+export { Toolbar } from "./components/Toolbar";
+export { ColorPalette } from "./components/ColorPalette";
+export { LineWidthSlider } from "./components/LineWidthSlider";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DrawingEditor","useDrawingStore","normalize","denormalize","normalizePoints","denormalizePoints","screenToCanvas","serializeObjects","deserializeObjects","generateId","PRESET_COLORS","DEFAULT_STROKE_COLOR","Toolbar","ColorPalette","LineWidthSlider"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA;AACA,SAASA,aAAa,QAAQ,iBAAiB;;AAE/C;AACA,SAASC,eAAe,QAAQ,yBAAyB;;AAGzD;;AAyBA;AACA,SACEC,SAAS,EACTC,WAAW,EACXC,eAAe,EACfC,iBAAiB,EACjBC,cAAc,QACT,qBAAqB;AAC5B,SACEC,gBAAgB,EAChBC,kBAAkB,EAClBC,UAAU,QACL,uBAAuB;AAC9B,SAASC,aAAa,EAAEC,oBAAoB,QAAQ,gBAAgB;;AAEpE;AACA,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,eAAe,QAAQ,8BAA8B","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/renderers/ArrowRenderer.js

@@ -0,0 +1,113 @@
+"use strict";
+
+import React, { useMemo } from "react";
+import { Path } from "@shopify/react-native-skia";
+import { denormalize } from "../utils/coordinates";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Build an arrow path.
+ * - lineWidth < 8: simple line + triangular head
+ * - lineWidth >= 8: filled body with wider triangular head
+ */
+function buildArrowPath(fx, fy, tx, ty, lineWidth) {
+  const dx = tx - fx;
+  const dy = ty - fy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return "";
+  const angle = Math.atan2(dy, dx);
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  if (lineWidth < 8) {
+    // Simple arrow: line + triangular head
+    const headLen = lineWidth * 2;
+    const headW = lineWidth * 2;
+
+    // Head points
+    const hx1 = tx - headLen * cos + headW / 2 * sin;
+    const hy1 = ty - headLen * sin - headW / 2 * cos;
+    const hx2 = tx - headLen * cos - headW / 2 * sin;
+    const hy2 = ty - headLen * sin + headW / 2 * cos;
+    return `M ${fx} ${fy} L ${tx} ${ty} ` + `M ${tx} ${ty} L ${hx1} ${hy1} M ${tx} ${ty} L ${hx2} ${hy2}`;
+  }
+
+  // Filled arrow: rectangular body + triangular head
+  const headLen = lineWidth * 3;
+  const headW = lineWidth * 3;
+  const bodyW = lineWidth;
+  const bodyLen = Math.max(0, len - headLen);
+
+  // Body rectangle (in local space: from origin going right)
+  // Then transformed via rotation
+  const halfBody = bodyW / 2;
+
+  // Points in local space (arrow points to the right)
+  const b1 = {
+    x: 0,
+    y: -halfBody
+  };
+  const b2 = {
+    x: bodyLen,
+    y: -halfBody
+  };
+  const b3 = {
+    x: bodyLen,
+    y: halfBody
+  };
+  const b4 = {
+    x: 0,
+    y: halfBody
+  };
+
+  // Head triangle in local space
+  const h1 = {
+    x: bodyLen,
+    y: -headW / 2
+  };
+  const h2 = {
+    x: len,
+    y: 0
+  };
+  const h3 = {
+    x: bodyLen,
+    y: headW / 2
+  };
+
+  // Transform function: rotate + translate
+  const transform = p => ({
+    x: fx + p.x * cos - p.y * sin,
+    y: fy + p.x * sin + p.y * cos
+  });
+  const tb1 = transform(b1);
+  const tb2 = transform(b2);
+  const tb3 = transform(b3);
+  const tb4 = transform(b4);
+  const th1 = transform(h1);
+  const th2 = transform(h2);
+  const th3 = transform(h3);
+  return `M ${tb1.x} ${tb1.y} L ${tb2.x} ${tb2.y} L ${tb3.x} ${tb3.y} L ${tb4.x} ${tb4.y} Z ` + `M ${th1.x} ${th1.y} L ${th2.x} ${th2.y} L ${th3.x} ${th3.y} Z`;
+}
+export const ArrowRenderer = /*#__PURE__*/React.memo(function ArrowRenderer({
+  object,
+  canvasSize
+}) {
+  const from = useMemo(() => denormalize(object.from, canvasSize), [object.from, canvasSize]);
+  const to = useMemo(() => denormalize(object.to, canvasSize), [object.to, canvasSize]);
+  const pathString = useMemo(() => buildArrowPath(from.x, from.y, to.x, to.y, object.lineWidth), [from, to, object.lineWidth]);
+  if (!pathString) return null;
+  if (object.lineWidth < 8) {
+    return /*#__PURE__*/_jsx(Path, {
+      path: pathString,
+      style: "stroke",
+      strokeWidth: object.lineWidth,
+      color: object.color,
+      strokeCap: "round",
+      strokeJoin: "round"
+    });
+  }
+  return /*#__PURE__*/_jsx(Path, {
+    path: pathString,
+    style: "fill",
+    color: object.color
+  });
+});
+//# sourceMappingURL=ArrowRenderer.js.map

package/lib/module/renderers/ArrowRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Path","denormalize","jsx","_jsx","buildArrowPath","fx","fy","tx","ty","lineWidth","dx","dy","len","Math","sqrt","angle","atan2","cos","sin","headLen","headW","hx1","hy1","hx2","hy2","bodyW","bodyLen","max","halfBody","b1","x","y","b2","b3","b4","h1","h2","h3","transform","p","tb1","tb2","tb3","tb4","th1","th2","th3","ArrowRenderer","memo","object","canvasSize","from","to","pathString","path","style","strokeWidth","color","strokeCap","strokeJoin"],"sourceRoot":"../../../src","sources":["renderers/ArrowRenderer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/renderers/CircleRenderer.js

@@ -0,0 +1,46 @@
+"use strict";
+
+import React, { useMemo } from "react";
+import { Oval, Group } from "@shopify/react-native-skia";
+import { denormalize } from "../utils/coordinates";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const CircleRenderer = /*#__PURE__*/React.memo(function CircleRenderer({
+  object,
+  canvasSize
+}) {
+  const from = useMemo(() => denormalize(object.from, canvasSize), [object.from, canvasSize]);
+  const to = useMemo(() => denormalize(object.to, canvasSize), [object.to, canvasSize]);
+  const rect = useMemo(() => {
+    const x = Math.min(from.x, to.x);
+    const y = Math.min(from.y, to.y);
+    const width = Math.abs(to.x - from.x);
+    const height = Math.abs(to.y - from.y);
+    return {
+      x,
+      y,
+      width,
+      height
+    };
+  }, [from, to]);
+  const hasFill = object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill ? object.backgroundColor.replace(/[\d.]+\)$/, `${object.backgroundAlpha})`) : undefined;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [fillColor && /*#__PURE__*/_jsx(Oval, {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      color: fillColor,
+      style: "fill"
+    }), /*#__PURE__*/_jsx(Oval, {
+      x: rect.x,
+      y: rect.y,
+      width: rect.width,
+      height: rect.height,
+      color: object.color,
+      style: "stroke",
+      strokeWidth: object.lineWidth
+    })]
+  });
+});
+//# sourceMappingURL=CircleRenderer.js.map

package/lib/module/renderers/CircleRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Oval","Group","denormalize","jsx","_jsx","jsxs","_jsxs","CircleRenderer","memo","object","canvasSize","from","to","rect","x","Math","min","y","width","abs","height","hasFill","backgroundColor","backgroundAlpha","fillColor","replace","undefined","children","color","style","strokeWidth","lineWidth"],"sourceRoot":"../../../src","sources":["renderers/CircleRenderer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,EAAEC,KAAK,QAAQ,4BAA4B;AAExD,SAASC,WAAW,QAAQ,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOnD,OAAO,MAAMC,cAAc,gBAAGT,KAAK,CAACU,IAAI,CAAC,SAASD,cAAcA,CAAC;EAC/DE,MAAM;EACNC;AACmB,CAAC,EAAE;EACtB,MAAMC,IAAI,GAAGZ,OAAO,CAClB,MAAMG,WAAW,CAACO,MAAM,CAACE,IAAI,EAAED,UAAU,CAAC,EAC1C,CAACD,MAAM,CAACE,IAAI,EAAED,UAAU,CAC1B,CAAC;EACD,MAAME,EAAE,GAAGb,OAAO,CAChB,MAAMG,WAAW,CAACO,MAAM,CAACG,EAAE,EAAEF,UAAU,CAAC,EACxC,CAACD,MAAM,CAACG,EAAE,EAAEF,UAAU,CACxB,CAAC;EAED,MAAMG,IAAI,GAAGd,OAAO,CAAC,MAAM;IACzB,MAAMe,CAAC,GAAGC,IAAI,CAACC,GAAG,CAACL,IAAI,CAACG,CAAC,EAAEF,EAAE,CAACE,CAAC,CAAC;IAChC,MAAMG,CAAC,GAAGF,IAAI,CAACC,GAAG,CAACL,IAAI,CAACM,CAAC,EAAEL,EAAE,CAACK,CAAC,CAAC;IAChC,MAAMC,KAAK,GAAGH,IAAI,CAACI,GAAG,CAACP,EAAE,CAACE,CAAC,GAAGH,IAAI,CAACG,CAAC,CAAC;IACrC,MAAMM,MAAM,GAAGL,IAAI,CAACI,GAAG,CAACP,EAAE,CAACK,CAAC,GAAGN,IAAI,CAACM,CAAC,CAAC;IACtC,OAAO;MAAEH,CAAC;MAAEG,CAAC;MAAEC,KAAK;MAAEE;IAAO,CAAC;EAChC,CAAC,EAAE,CAACT,IAAI,EAAEC,EAAE,CAAC,CAAC;EAEd,MAAMS,OAAO,GAAGZ,MAAM,CAACa,eAAe,IAAIb,MAAM,CAACc,eAAe;EAChE,MAAMC,SAAS,GAAGH,OAAO,GACrBZ,MAAM,CAACa,eAAe,CAAEG,OAAO,CAAC,WAAW,EAAE,GAAGhB,MAAM,CAACc,eAAe,GAAG,CAAC,GAC1EG,SAAS;EAEb,oBACEpB,KAAA,CAACL,KAAK;IAAA0B,QAAA,GACHH,SAAS,iBACRpB,IAAA,CAACJ,IAAI;MACHc,CAAC,EAAED,IAAI,CAACC,CAAE;MACVG,CAAC,EAAEJ,IAAI,CAACI,CAAE;MACVC,KAAK,EAAEL,IAAI,CAACK,KAAM;MAClBE,MAAM,EAAEP,IAAI,CAACO,MAAO;MACpBQ,KAAK,EAAEJ,SAAU;MACjBK,KAAK,EAAC;IAAM,CACb,CACF,eACDzB,IAAA,CAACJ,IAAI;MACHc,CAAC,EAAED,IAAI,CAACC,CAAE;MACVG,CAAC,EAAEJ,IAAI,CAACI,CAAE;MACVC,KAAK,EAAEL,IAAI,CAACK,KAAM;MAClBE,MAAM,EAAEP,IAAI,CAACO,MAAO;MACpBQ,KAAK,EAAEnB,MAAM,CAACmB,KAAM;MACpBC,KAAK,EAAC,QAAQ;MACdC,WAAW,EAAErB,MAAM,CAACsB;IAAU,CAC/B,CAAC;EAAA,CACG,CAAC;AAEZ,CAAC,CAAC","ignoreList":[]}

package/lib/module/renderers/FreehandRenderer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+import React, { useMemo } from "react";
+import { Path } from "@shopify/react-native-skia";
+import { denormalizePoints } from "../utils/coordinates";
+import { buildSmoothedPath } from "../utils/smoothing";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FreehandRenderer = /*#__PURE__*/React.memo(function FreehandRenderer({
+  object,
+  canvasSize
+}) {
+  const pathString = useMemo(() => {
+    const denormalized = denormalizePoints(object.points, canvasSize);
+    return buildSmoothedPath(denormalized);
+  }, [object.points, canvasSize]);
+  if (!pathString) return null;
+  return /*#__PURE__*/_jsx(Path, {
+    path: pathString,
+    style: "stroke",
+    strokeWidth: object.lineWidth,
+    color: object.color,
+    strokeCap: "round",
+    strokeJoin: "round"
+  });
+});
+//# sourceMappingURL=FreehandRenderer.js.map

package/lib/module/renderers/FreehandRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","Path","denormalizePoints","buildSmoothedPath","jsx","_jsx","FreehandRenderer","memo","object","canvasSize","pathString","denormalized","points","path","style","strokeWidth","lineWidth","color","strokeCap","strokeJoin"],"sourceRoot":"../../../src","sources":["renderers/FreehandRenderer.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,iBAAiB,QAAQ,oBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOvD,OAAO,MAAMC,gBAAgB,gBAAGP,KAAK,CAACQ,IAAI,CAAC,SAASD,gBAAgBA,CAAC;EACnEE,MAAM;EACNC;AACqB,CAAC,EAAE;EACxB,MAAMC,UAAU,GAAGV,OAAO,CAAC,MAAM;IAC/B,MAAMW,YAAY,GAAGT,iBAAiB,CAACM,MAAM,CAACI,MAAM,EAAEH,UAAU,CAAC;IACjE,OAAON,iBAAiB,CAACQ,YAAY,CAAC;EACxC,CAAC,EAAE,CAACH,MAAM,CAACI,MAAM,EAAEH,UAAU,CAAC,CAAC;EAE/B,IAAI,CAACC,UAAU,EAAE,OAAO,IAAI;EAE5B,oBACEL,IAAA,CAACJ,IAAI;IACHY,IAAI,EAAEH,UAAW;IACjBI,KAAK,EAAC,QAAQ;IACdC,WAAW,EAAEP,MAAM,CAACQ,SAAU;IAC9BC,KAAK,EAAET,MAAM,CAACS,KAAM;IACpBC,SAAS,EAAC,OAAO;IACjBC,UAAU,EAAC;EAAO,CACnB,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}

package/lib/module/renderers/InProgressRenderer.js

@@ -0,0 +1,169 @@
+"use strict";
+
+import React from "react";
+import { Path, Line as SkiaLine, Rect, Oval, Group, Skia } from "@shopify/react-native-skia";
+import { useDerivedValue } from "react-native-reanimated";
+
+// ─── Freehand In-Progress ────────────────────────────────────────────────────
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Empty path constant used as fallback when not drawing
+const EMPTY_PATH = Skia.Path.Make();
+export const FreehandInProgress = /*#__PURE__*/React.memo(function FreehandInProgress({
+  path,
+  color,
+  lineWidth
+}) {
+  const safePath = useDerivedValue(() => path.value ?? EMPTY_PATH);
+  return /*#__PURE__*/_jsx(Path, {
+    path: safePath,
+    style: "stroke",
+    strokeWidth: lineWidth,
+    color: color,
+    strokeCap: "round",
+    strokeJoin: "round"
+  });
+});
+
+// ─── Polygon In-Progress ─────────────────────────────────────────────────────
+
+const POLYGON_VERTEX_RADIUS = 8;
+const POLYGON_VERTEX_COLOR = "rgba(0, 122, 255, 0.8)";
+export const PolygonInProgress = /*#__PURE__*/React.memo(function PolygonInProgress({
+  pointsFlat,
+  pointCount
+}) {
+  // Build a path of circles at each vertex using a derived path with addCircle
+  const verticesPath = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    const count = pointCount.value;
+    const flat = pointsFlat.value;
+    for (let i = 0; i < count; i++) {
+      const cx = flat[i * 2];
+      const cy = flat[i * 2 + 1];
+      p.addCircle(cx, cy, POLYGON_VERTEX_RADIUS);
+    }
+    return p;
+  });
+  return /*#__PURE__*/_jsx(Path, {
+    path: verticesPath,
+    style: "fill",
+    color: POLYGON_VERTEX_COLOR
+  });
+});
+
+// ─── Shape In-Progress ───────────────────────────────────────────────────────
+
+export const ShapeInProgress = /*#__PURE__*/React.memo(function ShapeInProgress({
+  shapeType,
+  startX,
+  startY,
+  currentX,
+  currentY,
+  color,
+  lineWidth,
+  fillColor,
+  fillAlpha,
+  isDrawing
+}) {
+  // Hide when not actively drawing (prevents ghost shapes when switching tools)
+  const opacity = useDerivedValue(() => isDrawing.value ? 1 : 0);
+
+  // Derived values for the shape bounds
+  const x = useDerivedValue(() => Math.min(startX.value, currentX.value));
+  const y = useDerivedValue(() => Math.min(startY.value, currentY.value));
+  const width = useDerivedValue(() => Math.abs(currentX.value - startX.value));
+  const height = useDerivedValue(() => Math.abs(currentY.value - startY.value));
+
+  // Derived point values for Line-based shapes
+  const p1 = useDerivedValue(() => ({
+    x: startX.value,
+    y: startY.value
+  }));
+  const p2 = useDerivedValue(() => ({
+    x: currentX.value,
+    y: currentY.value
+  }));
+  const resolvedFillColor = useDerivedValue(() => {
+    if (!fillColor.value || !isDrawing.value) return "transparent";
+    return fillColor.value.replace(/[\d.]+\)$/, `${fillAlpha.value})`);
+  });
+  switch (shapeType) {
+    case "line":
+      return /*#__PURE__*/_jsx(Group, {
+        opacity: opacity,
+        children: /*#__PURE__*/_jsx(SkiaLine, {
+          p1: p1,
+          p2: p2,
+          color: color,
+          style: "stroke",
+          strokeWidth: lineWidth,
+          strokeCap: "round"
+        })
+      });
+    case "arrow":
+      return /*#__PURE__*/_jsx(Group, {
+        opacity: opacity,
+        children: /*#__PURE__*/_jsx(SkiaLine, {
+          p1: p1,
+          p2: p2,
+          color: color,
+          style: "stroke",
+          strokeWidth: lineWidth,
+          strokeCap: "round"
+        })
+      });
+    case "rectangle":
+      return /*#__PURE__*/_jsxs(Group, {
+        opacity: opacity,
+        children: [/*#__PURE__*/_jsx(Rect, {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          color: resolvedFillColor,
+          style: "fill"
+        }), /*#__PURE__*/_jsx(Rect, {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          color: color,
+          style: "stroke",
+          strokeWidth: lineWidth
+        })]
+      });
+    case "circle":
+      return /*#__PURE__*/_jsxs(Group, {
+        opacity: opacity,
+        children: [/*#__PURE__*/_jsx(Oval, {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          color: resolvedFillColor,
+          style: "fill"
+        }), /*#__PURE__*/_jsx(Oval, {
+          x: x,
+          y: y,
+          width: width,
+          height: height,
+          color: color,
+          style: "stroke",
+          strokeWidth: lineWidth
+        })]
+      });
+    case "measure":
+      return /*#__PURE__*/_jsx(Group, {
+        opacity: opacity,
+        children: /*#__PURE__*/_jsx(SkiaLine, {
+          p1: p1,
+          p2: p2,
+          color: color,
+          style: "stroke",
+          strokeWidth: lineWidth,
+          strokeCap: "round"
+        })
+      });
+  }
+});
+//# sourceMappingURL=InProgressRenderer.js.map