@archireport/react-native-drawing 0.2.0

package/lib/commonjs/DrawingEditor.js

@@ -0,0 +1,815 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawingEditor = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _reactNativeSkia = require("@shopify/react-native-skia");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = require("react-native-reanimated");
+var _useDrawingStore = require("./store/useDrawingStore");
+var _useFreehandGesture = require("./hooks/useFreehandGesture");
+var _useShapeGesture = require("./hooks/useShapeGesture");
+var _usePolygonGesture = require("./hooks/usePolygonGesture");
+var _useSelectionGesture = require("./hooks/useSelectionGesture");
+var _useViewportGesture = require("./hooks/useViewportGesture");
+var _ObjectRenderer = require("./renderers/ObjectRenderer");
+var _SelectionOverlay = require("./renderers/SelectionOverlay");
+var _SelectedObjectRenderer = require("./renderers/SelectedObjectRenderer");
+var _InProgressRenderer = require("./renderers/InProgressRenderer");
+var _Toolbar = require("./components/Toolbar");
+var _ColorPalette = require("./components/ColorPalette");
+var _LineWidthSlider = require("./components/LineWidthSlider");
+var _TextAnnotation = require("./components/TextAnnotation");
+var _TextEditModal = require("./components/TextEditModal");
+var _MeasurementEditModal = require("./components/MeasurementEditModal");
+var _ZoomBadge = require("./components/ZoomBadge");
+var _MiniMap = require("./components/MiniMap");
+var _coordinates = require("./utils/coordinates");
+var _serialization = require("./utils/serialization");
+var _jsxRuntime = require("react/jsx-runtime");
+const TWO_POINT_TOOLS = ["line", "arrow", "rectangle", "circle", "measure"];
+const WEB_CURSOR_STYLES = {
+  default: {
+    cursor: "default"
+  },
+  crosshair: {
+    cursor: "crosshair"
+  },
+  grab: {
+    cursor: "grab"
+  },
+  grabbing: {
+    cursor: "grabbing"
+  },
+  text: {
+    cursor: "text"
+  }
+};
+const DrawingEditor = exports.DrawingEditor = /*#__PURE__*/(0, _react.forwardRef)(function DrawingEditor({
+  imageSource,
+  initialObjects,
+  maxZoom,
+  onSave: _onSave,
+  onDismiss: _onDismiss,
+  style,
+  renderToolbar,
+  renderColorPalette
+}, ref) {
+  // ─── Phone vs tablet detection ───────────────────────────────────────────
+  const {
+    width: winWidth,
+    height: winHeight
+  } = (0, _reactNative.useWindowDimensions)();
+  const isPhone = Math.min(winWidth, winHeight) < 768;
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+
+  // ─── Store ───────────────────────────────────────────────────────────────
+  const currentTool = (0, _useDrawingStore.useDrawingStore)(s => s.currentTool);
+  const strokeColor = (0, _useDrawingStore.useDrawingStore)(s => s.strokeColor);
+  const fillColor = (0, _useDrawingStore.useDrawingStore)(s => s.fillColor);
+  const fillAlpha = (0, _useDrawingStore.useDrawingStore)(s => s.fillAlpha);
+  const lineWidth = (0, _useDrawingStore.useDrawingStore)(s => s.lineWidth);
+  const objects = (0, _useDrawingStore.useDrawingStore)(s => s.objects);
+  const selectedObjectId = (0, _useDrawingStore.useDrawingStore)(s => s.selectedObjectId);
+  const canvasSize = (0, _useDrawingStore.useDrawingStore)(s => s.canvasSize);
+  const undoStack = (0, _useDrawingStore.useDrawingStore)(s => s.undoStack);
+  const setTool = (0, _useDrawingStore.useDrawingStore)(s => s.setTool);
+  const setStrokeColor = (0, _useDrawingStore.useDrawingStore)(s => s.setStrokeColor);
+  const setLineWidth = (0, _useDrawingStore.useDrawingStore)(s => s.setLineWidth);
+  const setCanvasSize = (0, _useDrawingStore.useDrawingStore)(s => s.setCanvasSize);
+  const addObject = (0, _useDrawingStore.useDrawingStore)(s => s.addObject);
+  const updateObject = (0, _useDrawingStore.useDrawingStore)(s => s.updateObject);
+  const deleteObject = (0, _useDrawingStore.useDrawingStore)(s => s.deleteObject);
+  const selectObject = (0, _useDrawingStore.useDrawingStore)(s => s.selectObject);
+  const moveObject = (0, _useDrawingStore.useDrawingStore)(s => s.moveObject);
+  const undo = (0, _useDrawingStore.useDrawingStore)(s => s.undo);
+  const clearAll = (0, _useDrawingStore.useDrawingStore)(s => s.clearAll);
+  const loadObjects = (0, _useDrawingStore.useDrawingStore)(s => s.loadObjects);
+
+  // ─── Image ───────────────────────────────────────────────────────────────
+  const skiaImage = (0, _reactNativeSkia.useImage)(typeof imageSource === "string" ? imageSource : imageSource, err => console.warn("[DrawingEditor] Failed to load image:", err.message));
+  const canvasRef = (0, _reactNativeSkia.useCanvasRef)();
+
+  // ─── Layout ──────────────────────────────────────────────────────────────
+  const [layoutSize, setLayoutSize] = (0, _react.useState)({
+    width: 0,
+    height: 0
+  });
+  const [isPointerDown, setIsPointerDown] = (0, _react.useState)(false);
+  const wheelTargetRef = (0, _react.useRef)(null);
+  const setWheelTargetRef = (0, _react.useCallback)(node => {
+    wheelTargetRef.current = node;
+  }, []);
+  const handleLayout = (0, _react.useCallback)(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setLayoutSize({
+      width,
+      height
+    });
+  }, []);
+
+  // Reset store when component mounts (new image selected)
+  (0, _react.useEffect)(() => {
+    clearAll();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Load initial objects once canvas is sized
+  (0, _react.useEffect)(() => {
+    if (initialObjects && canvasSize.width > 0) {
+      loadObjects(initialObjects);
+    }
+  }, [canvasSize.width > 0]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ─── Shared values synced with store ─────────────────────────────────────
+  const colorSV = (0, _reactNativeReanimated.useSharedValue)(strokeColor);
+  const lineWidthSV = (0, _reactNativeReanimated.useSharedValue)(lineWidth);
+  const fillColorSV = (0, _reactNativeReanimated.useSharedValue)(fillColor);
+  const fillAlphaSV = (0, _reactNativeReanimated.useSharedValue)(fillAlpha);
+  const toolSV = (0, _reactNativeReanimated.useSharedValue)(currentTool);
+  (0, _react.useEffect)(() => {
+    colorSV.value = strokeColor;
+  }, [strokeColor]);
+  (0, _react.useEffect)(() => {
+    lineWidthSV.value = lineWidth;
+  }, [lineWidth]);
+  (0, _react.useEffect)(() => {
+    fillColorSV.value = fillColor;
+  }, [fillColor]);
+  (0, _react.useEffect)(() => {
+    fillAlphaSV.value = fillAlpha;
+  }, [fillAlpha]);
+  (0, _react.useEffect)(() => {
+    toolSV.value = currentTool;
+  }, [currentTool]);
+
+  // ─── Determine active tool shape type ───────────────────────────────────
+  const isFreehand = currentTool === "freehand";
+  const isPolygon = currentTool === "polygon";
+  const isTwoPointShape = TWO_POINT_TOOLS.includes(currentTool);
+  const isTextMode = currentTool === "text";
+
+  // ─── Image fit calculation ───────────────────────────────────────────────
+  const imageRect = (0, _react.useMemo)(() => {
+    if (!skiaImage || layoutSize.width === 0 || layoutSize.height === 0) {
+      return {
+        x: 0,
+        y: 0,
+        width: layoutSize.width,
+        height: layoutSize.height
+      };
+    }
+    const imgW = skiaImage.width();
+    const imgH = skiaImage.height();
+    const scaleX = layoutSize.width / imgW;
+    const scaleY = layoutSize.height / imgH;
+    const scale = Math.min(scaleX, scaleY);
+    const w = imgW * scale;
+    const h = imgH * scale;
+    return {
+      x: (layoutSize.width - w) / 2,
+      y: (layoutSize.height - h) / 2,
+      width: w,
+      height: h
+    };
+  }, [skiaImage, layoutSize]);
+
+  // ─── Effective canvas size = image rect ─────────────────────────────────
+  const effectiveCanvasSize = (0, _react.useMemo)(() => ({
+    width: imageRect.width,
+    height: imageRect.height
+  }), [imageRect.width, imageRect.height]);
+
+  // Sync to store for external consumers
+  (0, _react.useEffect)(() => {
+    if (imageRect.width > 0 && imageRect.height > 0) {
+      setCanvasSize({
+        width: imageRect.width,
+        height: imageRect.height
+      });
+    }
+  }, [imageRect.width, imageRect.height, setCanvasSize]);
+
+  // ─── Image bounds shared values (for worklet access) ─────────────────────
+  const imageOffsetXSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  const imageOffsetYSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  const imageWidthSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  const imageHeightSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    imageOffsetXSV.value = imageRect.x;
+    imageOffsetYSV.value = imageRect.y;
+    imageWidthSV.value = imageRect.width;
+    imageHeightSV.value = imageRect.height;
+  }, [imageRect]);
+
+  // ─── Viewport (zoom/pan) ─────────────────────────────────────────────────
+  const [isZoomed, setIsZoomed] = (0, _react.useState)(false);
+  const layoutWidthSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  const layoutHeightSV = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    layoutWidthSV.value = layoutSize.width;
+    layoutHeightSV.value = layoutSize.height;
+  }, [layoutSize]);
+  const handlePinchEnd = (0, _react.useCallback)(() => {
+    setTool(null);
+  }, [setTool]);
+  const viewport = (0, _useViewportGesture.useViewportGesture)({
+    maxZoom,
+    layoutWidth: layoutWidthSV,
+    layoutHeight: layoutHeightSV,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    imageWidth: imageWidthSV,
+    imageHeight: imageHeightSV,
+    onPinchEnd: handlePinchEnd
+  });
+
+  // Track isZoomed state for UI.
+  // Only tracks zoom level — tool deactivation is handled by onPinchEnd.
+  (0, _react.useEffect)(() => {
+    const id = setInterval(() => {
+      const zoomed = viewport.scale.value > 1.01;
+      setIsZoomed(prev => {
+        if (prev !== zoomed) return zoomed;
+        return prev;
+      });
+    }, 200);
+    return () => clearInterval(id);
+  }, [viewport.scale, viewport.isPinching]);
+
+  // ─── Measurement editing modal ───────────────────────────────────────────
+  const [measureEditVisible, setMeasureEditVisible] = (0, _react.useState)(false);
+  const [measureEditTarget, setMeasureEditTarget] = (0, _react.useState)(null);
+  const lastUsedUnit = (0, _react.useRef)("cm");
+  const handleMeasureCreated = (0, _react.useCallback)(id => {
+    setMeasureEditTarget(id);
+    setMeasureEditVisible(true);
+  }, []);
+  const handleMeasureSubmit = (0, _react.useCallback)((value, unit) => {
+    if (measureEditTarget) {
+      updateObject(measureEditTarget, {
+        text: value,
+        unit
+      });
+    }
+    lastUsedUnit.current = unit;
+    setMeasureEditVisible(false);
+    setMeasureEditTarget(null);
+  }, [measureEditTarget, updateObject]);
+  const handleMeasureCancel = (0, _react.useCallback)(() => {
+    if (measureEditTarget) {
+      deleteObject(measureEditTarget);
+    }
+    setMeasureEditVisible(false);
+    setMeasureEditTarget(null);
+  }, [measureEditTarget, deleteObject]);
+
+  // ─── Gesture: Freehand ───────────────────────────────────────────────────
+  const freehand = (0, _useFreehandGesture.useFreehandGesture)({
+    colorSV,
+    lineWidthSV,
+    fillColorSV,
+    fillAlphaSV,
+    canvasSize: effectiveCanvasSize,
+    enabled: isFreehand && !selectedObjectId,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    imageWidth: imageWidthSV,
+    imageHeight: imageHeightSV,
+    viewScale: viewport.scale,
+    viewTranslateX: viewport.translateX,
+    viewTranslateY: viewport.translateY
+  });
+
+  // ─── Gesture: Shape ──────────────────────────────────────────────────────
+  const shape = (0, _useShapeGesture.useShapeGesture)({
+    shapeType: isTwoPointShape ? currentTool : "line",
+    colorSV,
+    lineWidthSV,
+    fillColorSV,
+    fillAlphaSV,
+    canvasSize: effectiveCanvasSize,
+    enabled: isTwoPointShape && !selectedObjectId,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    imageWidth: imageWidthSV,
+    imageHeight: imageHeightSV,
+    viewScale: viewport.scale,
+    viewTranslateX: viewport.translateX,
+    viewTranslateY: viewport.translateY,
+    onMeasureCreated: handleMeasureCreated
+  });
+
+  // ─── Gesture: Polygon ────────────────────────────────────────────────────
+  const polygon = (0, _usePolygonGesture.usePolygonGesture)({
+    colorSV,
+    lineWidthSV,
+    fillColorSV,
+    fillAlphaSV,
+    canvasSize: effectiveCanvasSize,
+    enabled: isPolygon && !selectedObjectId,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    imageWidth: imageWidthSV,
+    imageHeight: imageHeightSV,
+    viewScale: viewport.scale,
+    viewTranslateX: viewport.translateX,
+    viewTranslateY: viewport.translateY
+  });
+
+  // Cancel polygon construction when switching away from polygon tool
+  const prevToolRef = (0, _react.useRef)(currentTool);
+  (0, _react.useEffect)(() => {
+    if (prevToolRef.current === "polygon" && currentTool !== "polygon") {
+      polygon.cancel();
+    }
+    prevToolRef.current = currentTool;
+  }, [currentTool]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ─── Gesture: Text placement (on empty space tap) ────────────────────────
+  const handleTextTap = (0, _react.useCallback)((x, y) => {
+    const pos = (0, _coordinates.normalize)({
+      x,
+      y
+    }, effectiveCanvasSize);
+    const newText = {
+      id: (0, _serialization.generateId)(),
+      type: "text",
+      position: pos,
+      width: 0.2,
+      // 20% of canvas
+      height: 0.08,
+      value: "Text",
+      color: strokeColor,
+      lineWidth
+    };
+    addObject(newText);
+    setTextEditTarget(newText.id);
+    setTextEditValue("Text");
+    setTextEditVisible(true);
+  }, [effectiveCanvasSize, strokeColor, lineWidth, addObject]);
+
+  // ─── Handle tap on empty space (deselect or place text) ──────────────────
+  const handleTapEmpty = (0, _react.useCallback)((x, y) => {
+    if (isTextMode) {
+      handleTextTap(x, y);
+    } else {
+      selectObject(null);
+    }
+  }, [isTextMode, handleTextTap, selectObject]);
+
+  // ─── Gesture: Selection (always active) ──────────────────────────────────
+  const selection = (0, _useSelectionGesture.useSelectionGesture)({
+    canvasSize: effectiveCanvasSize,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    viewScale: viewport.scale,
+    viewTranslateX: viewport.translateX,
+    viewTranslateY: viewport.translateY,
+    onTapEmpty: handleTapEmpty
+  });
+
+  // ─── Compose all gestures ────────────────────────────────────────────────
+  const composedGesture = (0, _react.useMemo)(() => {
+    // Navigation gestures (pinch + two-finger pan) run simultaneously
+    const navigationGestures = _reactNativeGestureHandler.Gesture.Simultaneous(viewport.pinchGesture, viewport.twoFingerPanGesture);
+
+    // Drawing/selection pan gestures — these must NOT be delayed by tap recognition
+    const noToolActive = currentTool === null;
+    const drawingPanGestures = selectedObjectId ? selection.panGesture : noToolActive && isZoomed ? viewport.singleFingerPanGesture : isFreehand ? freehand.gesture : isTwoPointShape ? shape.gesture : selection.panGesture;
+
+    // Tap gestures (double-tap and single-tap) — run in Exclusive so
+    // double-tap has priority over single-tap, but they don't block pan
+    const tapGestures = _reactNativeGestureHandler.Gesture.Exclusive(viewport.doubleTapResetGesture,
+    // Polygon tap has priority over selection tap when polygon tool is active
+    ...(isPolygon ? [polygon.gesture] : [selection.doubleTapGesture, selection.tapGesture]));
+
+    // Pan and tap gestures run simultaneously — pan starts immediately
+    // without waiting for tap recognition timeout
+    const interactionGestures = _reactNativeGestureHandler.Gesture.Simultaneous(drawingPanGestures, tapGestures);
+
+    // Navigation and interaction run simultaneously
+    return _reactNativeGestureHandler.Gesture.Simultaneous(navigationGestures, interactionGestures);
+  }, [viewport.pinchGesture, viewport.twoFingerPanGesture, viewport.doubleTapResetGesture, viewport.singleFingerPanGesture, selection.doubleTapGesture, selection.panGesture, selection.tapGesture, polygon.gesture, freehand.gesture, shape.gesture, currentTool, selectedObjectId, isZoomed, isFreehand, isTwoPointShape, isPolygon]);
+
+  // ─── Text editing modal ──────────────────────────────────────────────────
+  const [textEditVisible, setTextEditVisible] = (0, _react.useState)(false);
+  const [textEditTarget, setTextEditTarget] = (0, _react.useState)(null);
+  const [textEditValue, setTextEditValue] = (0, _react.useState)("");
+  const handleTextSubmit = (0, _react.useCallback)(value => {
+    if (textEditTarget) {
+      updateObject(textEditTarget, {
+        value
+      });
+    }
+    setTextEditVisible(false);
+    setTextEditTarget(null);
+  }, [textEditTarget, updateObject]);
+  const handleTextDoubleTap = (0, _react.useCallback)(id => {
+    const obj = objects.find(o => o.id === id);
+    if (obj?.type === "text") {
+      setTextEditTarget(id);
+      setTextEditValue(obj.value);
+      setTextEditVisible(true);
+    }
+  }, [objects]);
+
+  // ─── Computed values ─────────────────────────────────────────────────────
+  const selectedObject = (0, _react.useMemo)(() => selectedObjectId ? objects.find(o => o.id === selectedObjectId) ?? null : null, [objects, selectedObjectId]);
+  const textObjects = (0, _react.useMemo)(() => objects.filter(o => o.type === "text"), [objects]);
+  const nonTextObjects = (0, _react.useMemo)(() => objects.filter(o => o.type !== "text"), [objects]);
+  const unselectedNonTextObjects = (0, _react.useMemo)(() => nonTextObjects.filter(o => o.id !== selectedObjectId), [nonTextObjects, selectedObjectId]);
+
+  // ─── Imperative ref ──────────────────────────────────────────────────────
+  (0, _react.useImperativeHandle)(ref, () => ({
+    undo,
+    setTool,
+    exportImage: async () => {
+      // Reset viewport to identity for a clean capture
+      const prevScale = viewport.scale.value;
+      const prevTx = viewport.translateX.value;
+      const prevTy = viewport.translateY.value;
+      viewport.scale.value = 1;
+      viewport.translateX.value = 0;
+      viewport.translateY.value = 0;
+
+      // Wait a frame for Skia to re-render
+      await new Promise(r => requestAnimationFrame(r));
+      const bounds = {
+        x: Math.round(imageRect.x),
+        y: Math.round(imageRect.y),
+        width: Math.round(imageRect.width),
+        height: Math.round(imageRect.height)
+      };
+      const image = canvasRef.current?.makeImageSnapshot(bounds);
+
+      // Restore viewport
+      viewport.scale.value = prevScale;
+      viewport.translateX.value = prevTx;
+      viewport.translateY.value = prevTy;
+      if (!image) return null;
+      return image.encodeToBytes();
+    },
+    exportImageBase64: async () => {
+      // Reset viewport to identity for a clean capture
+      const prevScale = viewport.scale.value;
+      const prevTx = viewport.translateX.value;
+      const prevTy = viewport.translateY.value;
+      viewport.scale.value = 1;
+      viewport.translateX.value = 0;
+      viewport.translateY.value = 0;
+      await new Promise(r => requestAnimationFrame(r));
+      const bounds = {
+        x: Math.round(imageRect.x),
+        y: Math.round(imageRect.y),
+        width: Math.round(imageRect.width),
+        height: Math.round(imageRect.height)
+      };
+      const image = canvasRef.current?.makeImageSnapshot(bounds);
+      viewport.scale.value = prevScale;
+      viewport.translateX.value = prevTx;
+      viewport.translateY.value = prevTy;
+      if (!image) return null;
+      return image.encodeToBase64();
+    },
+    getObjects: () => objects,
+    clearAll,
+    resetZoom: viewport.resetViewport
+  }), [undo, setTool, objects, clearAll, imageRect, viewport]);
+
+  // ─── Toolbar callbacks ───────────────────────────────────────────────────
+  const handleSelectTool = (0, _react.useCallback)(tool => {
+    setTool(tool);
+  }, [setTool]);
+  const handleUndo = (0, _react.useCallback)(() => {
+    undo();
+  }, [undo]);
+  const handleResetZoom = (0, _react.useCallback)(() => {
+    viewport.resetViewport();
+  }, [viewport]);
+
+  // ─── Viewport transform for Skia (animated) ─────────────────────────────
+  const viewportTransform = (0, _reactNativeReanimated.useDerivedValue)(() => [{
+    translateX: viewport.translateX.value
+  }, {
+    translateY: viewport.translateY.value
+  }, {
+    scale: viewport.scale.value
+  }]);
+  const usesMoveCursor = selectedObjectId !== null || currentTool === null;
+  const handlePointerDown = (0, _react.useCallback)(() => {
+    if (_reactNative.Platform.OS === "web" && usesMoveCursor) {
+      setIsPointerDown(true);
+    }
+  }, [usesMoveCursor]);
+  const handlePointerRelease = (0, _react.useCallback)(() => {
+    if (_reactNative.Platform.OS === "web") {
+      setIsPointerDown(false);
+    }
+  }, []);
+  const handleWheel = (0, _react.useCallback)(event => {
+    const wheelEvent = event.nativeEvent ?? event;
+    if (!wheelEvent.ctrlKey || wheelEvent.deltaY === undefined) return;
+    event.preventDefault?.();
+    wheelEvent.preventDefault?.();
+    const bounds = event.currentTarget?.getBoundingClientRect?.();
+    if (!bounds) return;
+    const clientX = wheelEvent.clientX ?? event.clientX;
+    const clientY = wheelEvent.clientY ?? event.clientY;
+    if (clientX === undefined || clientY === undefined) return;
+    const localX = clientX - bounds.left;
+    const localY = clientY - bounds.top;
+    const scaleFactor = Math.min(1.25, Math.max(0.8, Math.exp(-wheelEvent.deltaY * 0.01)));
+    viewport.zoomAt(localX, localY, scaleFactor);
+  }, [viewport]);
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== "web") return;
+    const target = wheelTargetRef.current;
+    if (!target?.addEventListener || !target.removeEventListener) return;
+    const options = {
+      passive: false
+    };
+    target.addEventListener("wheel", handleWheel, options);
+    return () => {
+      target.removeEventListener?.("wheel", handleWheel, options);
+    };
+  }, [handleWheel]);
+  const webPointerHandlers = _reactNative.Platform.OS === "web" ? {
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerRelease,
+    onPointerCancel: handlePointerRelease,
+    onPointerLeave: handlePointerRelease
+  } : undefined;
+  const canvasCursorStyle = (0, _react.useMemo)(() => {
+    if (_reactNative.Platform.OS !== "web") return undefined;
+    if (usesMoveCursor && isPointerDown) {
+      return WEB_CURSOR_STYLES.grabbing;
+    }
+    if (usesMoveCursor) {
+      return WEB_CURSOR_STYLES.grab;
+    }
+    if (isTextMode) return WEB_CURSOR_STYLES.text;
+    if (currentTool) return WEB_CURSOR_STYLES.crosshair;
+    return WEB_CURSOR_STYLES.default;
+  }, [currentTool, isPointerDown, isTextMode, usesMoveCursor]);
+
+  // ─── Render ──────────────────────────────────────────────────────────────
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeGestureHandler.GestureHandlerRootView, {
+    style: [styles.root, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.editorContainer, isPhone ? styles.editorContainerPhone : styles.editorContainerTablet],
+      children: [!isPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sidebarLeft,
+        children: renderColorPalette ? renderColorPalette({
+          strokeColor,
+          fillColor,
+          fillAlpha,
+          onSelectStrokeColor: setStrokeColor,
+          onSelectFillColor: _useDrawingStore.useDrawingStore.getState().setFillColor,
+          onSelectFillAlpha: _useDrawingStore.useDrawingStore.getState().setFillAlpha
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPalette.ColorPalette, {
+          strokeColor: strokeColor,
+          onSelectColor: setStrokeColor,
+          direction: "vertical"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.canvasContainer,
+        onLayout: handleLayout,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+          gesture: composedGesture,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            ...webPointerHandlers,
+            ref: setWheelTargetRef,
+            style: [_reactNative.StyleSheet.absoluteFill, canvasCursorStyle],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Canvas
+            // On web, the Skia <canvas> element must not capture pointer events.
+            // RNGH attaches its listeners to the parent View and calls
+            // setPointerCapture on event.target; if the <canvas> is the topmost
+            // hit target it grabs the pointer and starves the gesture of the move
+            // stream (only stray points get through).
+            // The Skia web view drops the `pointerEvents` prop, so we must deliver
+            // `pointer-events: none` through `style` instead — it is inherited by
+            // the inner <canvas>, making it click-through.
+            , {
+              style: _reactNative.Platform.OS === "web" ? {
+                ..._reactNative.StyleSheet.absoluteFillObject,
+                pointerEvents: "none"
+              } : _reactNative.StyleSheet.absoluteFill,
+              ref: canvasRef,
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Fill, {
+                color: "black"
+              }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+                transform: viewportTransform,
+                children: [skiaImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSkia.Image, {
+                  image: skiaImage,
+                  x: imageRect.x,
+                  y: imageRect.y,
+                  width: imageRect.width,
+                  height: imageRect.height,
+                  fit: "contain"
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSkia.Group, {
+                  transform: [{
+                    translateX: imageRect.x
+                  }, {
+                    translateY: imageRect.y
+                  }],
+                  clip: (0, _reactNativeSkia.rect)(0, 0, imageRect.width, imageRect.height),
+                  children: [unselectedNonTextObjects.map(obj => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ObjectRenderer.ObjectRenderer, {
+                    object: obj,
+                    canvasSize: effectiveCanvasSize
+                  }, obj.id)), selectedObject && selectedObject.type !== "text" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectedObjectRenderer.SelectedObjectRenderer, {
+                      object: selectedObject,
+                      canvasSize: effectiveCanvasSize,
+                      isDragging: selection.isDragging,
+                      draggingAnchorIndex: selection.draggingAnchorIndex,
+                      dragOffsetX: selection.dragOffsetX,
+                      dragOffsetY: selection.dragOffsetY
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectionOverlay.SelectionOverlay, {
+                      object: selectedObject,
+                      canvasSize: effectiveCanvasSize,
+                      draggingAnchorIndex: selection.draggingAnchorIndex,
+                      dragOffsetX: selection.dragOffsetX,
+                      dragOffsetY: selection.dragOffsetY,
+                      isDragging: selection.isDragging
+                    })]
+                  }), isFreehand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InProgressRenderer.FreehandInProgress, {
+                    path: freehand.inProgressPath,
+                    color: freehand.inProgressColor,
+                    lineWidth: freehand.inProgressWidth,
+                    isDrawing: freehand.isDrawing
+                  }), isTwoPointShape && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InProgressRenderer.ShapeInProgress, {
+                    shapeType: currentTool,
+                    startX: shape.startX,
+                    startY: shape.startY,
+                    currentX: shape.currentX,
+                    currentY: shape.currentY,
+                    color: shape.inProgressColor,
+                    lineWidth: shape.inProgressWidth,
+                    fillColor: shape.inProgressFillColor,
+                    fillAlpha: shape.inProgressFillAlpha,
+                    isDrawing: shape.isDrawing
+                  }), isPolygon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InProgressRenderer.PolygonInProgress, {
+                    pointsFlat: polygon.pointsFlat,
+                    pointCount: polygon.pointCount,
+                    isActive: polygon.isActive
+                  })]
+                })]
+              })]
+            }), textObjects.map(textObj => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextAnnotation.TextAnnotation, {
+              object: textObj,
+              canvasSize: effectiveCanvasSize,
+              imageOffset: {
+                x: imageRect.x,
+                y: imageRect.y
+              },
+              isSelected: selectedObjectId === textObj.id,
+              onSelect: selectObject,
+              onMove: moveObject,
+              onDoubleTap: handleTextDoubleTap,
+              onDelete: deleteObject,
+              viewScale: viewport.scale,
+              viewTranslateX: viewport.translateX,
+              viewTranslateY: viewport.translateY
+            }, textObj.id))]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZoomBadge.ZoomBadge, {
+          scale: viewport.scale,
+          onPress: handleResetZoom
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MiniMap.MiniMap, {
+          image: skiaImage,
+          imageRect: imageRect,
+          scale: viewport.scale,
+          translateX: viewport.translateX,
+          translateY: viewport.translateY,
+          visible: isZoomed,
+          onPanViewport: viewport.panViewport
+        })]
+      }), !isPhone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.sidebarRight,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineWidthSlider.LineWidthSlider, {
+          value: lineWidth,
+          onValueChange: setLineWidth,
+          orientation: "vertical"
+        })
+      })]
+    }), isPhone ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.phoneBottomArea, {
+        paddingBottom: insets.bottom
+      }],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.phoneControlsBar,
+        children: [renderColorPalette ? renderColorPalette({
+          strokeColor,
+          fillColor,
+          fillAlpha,
+          onSelectStrokeColor: setStrokeColor,
+          onSelectFillColor: _useDrawingStore.useDrawingStore.getState().setFillColor,
+          onSelectFillAlpha: _useDrawingStore.useDrawingStore.getState().setFillAlpha
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColorPalette.ColorPalette, {
+          strokeColor: strokeColor,
+          onSelectColor: setStrokeColor,
+          direction: "horizontal"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineWidthSlider.LineWidthSlider, {
+          value: lineWidth,
+          onValueChange: setLineWidth,
+          orientation: "horizontal"
+        })]
+      }), renderToolbar ? renderToolbar({
+        currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed,
+        onResetZoom: handleResetZoom
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, {
+        currentTool: currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed: isZoomed,
+        onResetZoom: handleResetZoom
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: styles.toolbarOverlay,
+      children: renderToolbar ? renderToolbar({
+        currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed,
+        onResetZoom: handleResetZoom
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Toolbar.Toolbar, {
+        currentTool: currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed: isZoomed,
+        onResetZoom: handleResetZoom
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextEditModal.TextEditModal, {
+      visible: textEditVisible,
+      initialValue: textEditValue,
+      onSubmit: handleTextSubmit,
+      onCancel: () => setTextEditVisible(false)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MeasurementEditModal.MeasurementEditModal, {
+      visible: measureEditVisible,
+      initialValue: "",
+      initialUnit: lastUsedUnit.current,
+      onSubmit: handleMeasureSubmit,
+      onCancel: handleMeasureCancel
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#000000",
+    position: "relative"
+  },
+  editorContainer: {
+    flex: 1,
+    flexDirection: "row"
+  },
+  editorContainerTablet: {
+    paddingBottom: 92
+  },
+  editorContainerPhone: {
+    flexDirection: "column"
+  },
+  sidebarLeft: {
+    justifyContent: "center",
+    paddingHorizontal: 4
+  },
+  canvasContainer: {
+    flex: 1
+  },
+  sidebarRight: {
+    justifyContent: "center",
+    paddingHorizontal: 4
+  },
+  phoneBottomArea: {
+    backgroundColor: "#000000"
+  },
+  phoneControlsBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 4
+  },
+  toolbarOverlay: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 12,
+    alignItems: "center"
+  }
+});
+//# sourceMappingURL=DrawingEditor.js.map