@archireport/react-native-drawing 0.2.0

package/lib/module/DrawingEditor.js

@@ -0,0 +1,811 @@
+"use strict";
+
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from "react";
+import { View, StyleSheet, Platform, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Canvas, Image, useImage, useCanvasRef, Fill, Group, rect } from "@shopify/react-native-skia";
+import { GestureHandlerRootView, GestureDetector, Gesture } from "react-native-gesture-handler";
+import { useSharedValue, useDerivedValue } from "react-native-reanimated";
+import { useDrawingStore } from "./store/useDrawingStore";
+import { useFreehandGesture } from "./hooks/useFreehandGesture";
+import { useShapeGesture } from "./hooks/useShapeGesture";
+import { usePolygonGesture } from "./hooks/usePolygonGesture";
+import { useSelectionGesture } from "./hooks/useSelectionGesture";
+import { useViewportGesture } from "./hooks/useViewportGesture";
+import { ObjectRenderer } from "./renderers/ObjectRenderer";
+import { SelectionOverlay } from "./renderers/SelectionOverlay";
+import { SelectedObjectRenderer } from "./renderers/SelectedObjectRenderer";
+import { FreehandInProgress, ShapeInProgress, PolygonInProgress } from "./renderers/InProgressRenderer";
+import { Toolbar } from "./components/Toolbar";
+import { ColorPalette } from "./components/ColorPalette";
+import { LineWidthSlider } from "./components/LineWidthSlider";
+import { TextAnnotation } from "./components/TextAnnotation";
+import { TextEditModal } from "./components/TextEditModal";
+import { MeasurementEditModal } from "./components/MeasurementEditModal";
+import { ZoomBadge } from "./components/ZoomBadge";
+import { MiniMap } from "./components/MiniMap";
+import { normalize } from "./utils/coordinates";
+import { generateId } from "./utils/serialization";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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"
+  }
+};
+export const DrawingEditor = /*#__PURE__*/forwardRef(function DrawingEditor({
+  imageSource,
+  initialObjects,
+  maxZoom,
+  onSave: _onSave,
+  onDismiss: _onDismiss,
+  style,
+  renderToolbar,
+  renderColorPalette
+}, ref) {
+  // ─── Phone vs tablet detection ───────────────────────────────────────────
+  const {
+    width: winWidth,
+    height: winHeight
+  } = useWindowDimensions();
+  const isPhone = Math.min(winWidth, winHeight) < 768;
+  const insets = useSafeAreaInsets();
+
+  // ─── Store ───────────────────────────────────────────────────────────────
+  const currentTool = useDrawingStore(s => s.currentTool);
+  const strokeColor = useDrawingStore(s => s.strokeColor);
+  const fillColor = useDrawingStore(s => s.fillColor);
+  const fillAlpha = useDrawingStore(s => s.fillAlpha);
+  const lineWidth = useDrawingStore(s => s.lineWidth);
+  const objects = useDrawingStore(s => s.objects);
+  const selectedObjectId = useDrawingStore(s => s.selectedObjectId);
+  const canvasSize = useDrawingStore(s => s.canvasSize);
+  const undoStack = useDrawingStore(s => s.undoStack);
+  const setTool = useDrawingStore(s => s.setTool);
+  const setStrokeColor = useDrawingStore(s => s.setStrokeColor);
+  const setLineWidth = useDrawingStore(s => s.setLineWidth);
+  const setCanvasSize = useDrawingStore(s => s.setCanvasSize);
+  const addObject = useDrawingStore(s => s.addObject);
+  const updateObject = useDrawingStore(s => s.updateObject);
+  const deleteObject = useDrawingStore(s => s.deleteObject);
+  const selectObject = useDrawingStore(s => s.selectObject);
+  const moveObject = useDrawingStore(s => s.moveObject);
+  const undo = useDrawingStore(s => s.undo);
+  const clearAll = useDrawingStore(s => s.clearAll);
+  const loadObjects = useDrawingStore(s => s.loadObjects);
+
+  // ─── Image ───────────────────────────────────────────────────────────────
+  const skiaImage = useImage(typeof imageSource === "string" ? imageSource : imageSource, err => console.warn("[DrawingEditor] Failed to load image:", err.message));
+  const canvasRef = useCanvasRef();
+
+  // ─── Layout ──────────────────────────────────────────────────────────────
+  const [layoutSize, setLayoutSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const [isPointerDown, setIsPointerDown] = useState(false);
+  const wheelTargetRef = useRef(null);
+  const setWheelTargetRef = useCallback(node => {
+    wheelTargetRef.current = node;
+  }, []);
+  const handleLayout = useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent.layout;
+    setLayoutSize({
+      width,
+      height
+    });
+  }, []);
+
+  // Reset store when component mounts (new image selected)
+  useEffect(() => {
+    clearAll();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Load initial objects once canvas is sized
+  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 = useSharedValue(strokeColor);
+  const lineWidthSV = useSharedValue(lineWidth);
+  const fillColorSV = useSharedValue(fillColor);
+  const fillAlphaSV = useSharedValue(fillAlpha);
+  const toolSV = useSharedValue(currentTool);
+  useEffect(() => {
+    colorSV.value = strokeColor;
+  }, [strokeColor]);
+  useEffect(() => {
+    lineWidthSV.value = lineWidth;
+  }, [lineWidth]);
+  useEffect(() => {
+    fillColorSV.value = fillColor;
+  }, [fillColor]);
+  useEffect(() => {
+    fillAlphaSV.value = fillAlpha;
+  }, [fillAlpha]);
+  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 = 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 = useMemo(() => ({
+    width: imageRect.width,
+    height: imageRect.height
+  }), [imageRect.width, imageRect.height]);
+
+  // Sync to store for external consumers
+  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 = useSharedValue(0);
+  const imageOffsetYSV = useSharedValue(0);
+  const imageWidthSV = useSharedValue(0);
+  const imageHeightSV = useSharedValue(0);
+  useEffect(() => {
+    imageOffsetXSV.value = imageRect.x;
+    imageOffsetYSV.value = imageRect.y;
+    imageWidthSV.value = imageRect.width;
+    imageHeightSV.value = imageRect.height;
+  }, [imageRect]);
+
+  // ─── Viewport (zoom/pan) ─────────────────────────────────────────────────
+  const [isZoomed, setIsZoomed] = useState(false);
+  const layoutWidthSV = useSharedValue(0);
+  const layoutHeightSV = useSharedValue(0);
+  useEffect(() => {
+    layoutWidthSV.value = layoutSize.width;
+    layoutHeightSV.value = layoutSize.height;
+  }, [layoutSize]);
+  const handlePinchEnd = useCallback(() => {
+    setTool(null);
+  }, [setTool]);
+  const viewport = 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.
+  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] = useState(false);
+  const [measureEditTarget, setMeasureEditTarget] = useState(null);
+  const lastUsedUnit = useRef("cm");
+  const handleMeasureCreated = useCallback(id => {
+    setMeasureEditTarget(id);
+    setMeasureEditVisible(true);
+  }, []);
+  const handleMeasureSubmit = useCallback((value, unit) => {
+    if (measureEditTarget) {
+      updateObject(measureEditTarget, {
+        text: value,
+        unit
+      });
+    }
+    lastUsedUnit.current = unit;
+    setMeasureEditVisible(false);
+    setMeasureEditTarget(null);
+  }, [measureEditTarget, updateObject]);
+  const handleMeasureCancel = useCallback(() => {
+    if (measureEditTarget) {
+      deleteObject(measureEditTarget);
+    }
+    setMeasureEditVisible(false);
+    setMeasureEditTarget(null);
+  }, [measureEditTarget, deleteObject]);
+
+  // ─── Gesture: Freehand ───────────────────────────────────────────────────
+  const freehand = 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 = 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 = 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 = useRef(currentTool);
+  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 = useCallback((x, y) => {
+    const pos = normalize({
+      x,
+      y
+    }, effectiveCanvasSize);
+    const newText = {
+      id: 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 = useCallback((x, y) => {
+    if (isTextMode) {
+      handleTextTap(x, y);
+    } else {
+      selectObject(null);
+    }
+  }, [isTextMode, handleTextTap, selectObject]);
+
+  // ─── Gesture: Selection (always active) ──────────────────────────────────
+  const selection = useSelectionGesture({
+    canvasSize: effectiveCanvasSize,
+    imageOffsetX: imageOffsetXSV,
+    imageOffsetY: imageOffsetYSV,
+    viewScale: viewport.scale,
+    viewTranslateX: viewport.translateX,
+    viewTranslateY: viewport.translateY,
+    onTapEmpty: handleTapEmpty
+  });
+
+  // ─── Compose all gestures ────────────────────────────────────────────────
+  const composedGesture = useMemo(() => {
+    // Navigation gestures (pinch + two-finger pan) run simultaneously
+    const navigationGestures = 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 = 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 = Gesture.Simultaneous(drawingPanGestures, tapGestures);
+
+    // Navigation and interaction run simultaneously
+    return 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] = useState(false);
+  const [textEditTarget, setTextEditTarget] = useState(null);
+  const [textEditValue, setTextEditValue] = useState("");
+  const handleTextSubmit = useCallback(value => {
+    if (textEditTarget) {
+      updateObject(textEditTarget, {
+        value
+      });
+    }
+    setTextEditVisible(false);
+    setTextEditTarget(null);
+  }, [textEditTarget, updateObject]);
+  const handleTextDoubleTap = 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 = useMemo(() => selectedObjectId ? objects.find(o => o.id === selectedObjectId) ?? null : null, [objects, selectedObjectId]);
+  const textObjects = useMemo(() => objects.filter(o => o.type === "text"), [objects]);
+  const nonTextObjects = useMemo(() => objects.filter(o => o.type !== "text"), [objects]);
+  const unselectedNonTextObjects = useMemo(() => nonTextObjects.filter(o => o.id !== selectedObjectId), [nonTextObjects, selectedObjectId]);
+
+  // ─── Imperative ref ──────────────────────────────────────────────────────
+  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 = useCallback(tool => {
+    setTool(tool);
+  }, [setTool]);
+  const handleUndo = useCallback(() => {
+    undo();
+  }, [undo]);
+  const handleResetZoom = useCallback(() => {
+    viewport.resetViewport();
+  }, [viewport]);
+
+  // ─── Viewport transform for Skia (animated) ─────────────────────────────
+  const viewportTransform = useDerivedValue(() => [{
+    translateX: viewport.translateX.value
+  }, {
+    translateY: viewport.translateY.value
+  }, {
+    scale: viewport.scale.value
+  }]);
+  const usesMoveCursor = selectedObjectId !== null || currentTool === null;
+  const handlePointerDown = useCallback(() => {
+    if (Platform.OS === "web" && usesMoveCursor) {
+      setIsPointerDown(true);
+    }
+  }, [usesMoveCursor]);
+  const handlePointerRelease = useCallback(() => {
+    if (Platform.OS === "web") {
+      setIsPointerDown(false);
+    }
+  }, []);
+  const handleWheel = 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]);
+  useEffect(() => {
+    if (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 = Platform.OS === "web" ? {
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerRelease,
+    onPointerCancel: handlePointerRelease,
+    onPointerLeave: handlePointerRelease
+  } : undefined;
+  const canvasCursorStyle = useMemo(() => {
+    if (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__*/_jsxs(GestureHandlerRootView, {
+    style: [styles.root, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.editorContainer, isPhone ? styles.editorContainerPhone : styles.editorContainerTablet],
+      children: [!isPhone && /*#__PURE__*/_jsx(View, {
+        style: styles.sidebarLeft,
+        children: renderColorPalette ? renderColorPalette({
+          strokeColor,
+          fillColor,
+          fillAlpha,
+          onSelectStrokeColor: setStrokeColor,
+          onSelectFillColor: useDrawingStore.getState().setFillColor,
+          onSelectFillAlpha: useDrawingStore.getState().setFillAlpha
+        }) : /*#__PURE__*/_jsx(ColorPalette, {
+          strokeColor: strokeColor,
+          onSelectColor: setStrokeColor,
+          direction: "vertical"
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.canvasContainer,
+        onLayout: handleLayout,
+        children: [/*#__PURE__*/_jsx(GestureDetector, {
+          gesture: composedGesture,
+          children: /*#__PURE__*/_jsxs(View, {
+            ...webPointerHandlers,
+            ref: setWheelTargetRef,
+            style: [StyleSheet.absoluteFill, canvasCursorStyle],
+            children: [/*#__PURE__*/_jsxs(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: Platform.OS === "web" ? {
+                ...StyleSheet.absoluteFillObject,
+                pointerEvents: "none"
+              } : StyleSheet.absoluteFill,
+              ref: canvasRef,
+              children: [/*#__PURE__*/_jsx(Fill, {
+                color: "black"
+              }), /*#__PURE__*/_jsxs(Group, {
+                transform: viewportTransform,
+                children: [skiaImage && /*#__PURE__*/_jsx(Image, {
+                  image: skiaImage,
+                  x: imageRect.x,
+                  y: imageRect.y,
+                  width: imageRect.width,
+                  height: imageRect.height,
+                  fit: "contain"
+                }), /*#__PURE__*/_jsxs(Group, {
+                  transform: [{
+                    translateX: imageRect.x
+                  }, {
+                    translateY: imageRect.y
+                  }],
+                  clip: rect(0, 0, imageRect.width, imageRect.height),
+                  children: [unselectedNonTextObjects.map(obj => /*#__PURE__*/_jsx(ObjectRenderer, {
+                    object: obj,
+                    canvasSize: effectiveCanvasSize
+                  }, obj.id)), selectedObject && selectedObject.type !== "text" && /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsx(SelectedObjectRenderer, {
+                      object: selectedObject,
+                      canvasSize: effectiveCanvasSize,
+                      isDragging: selection.isDragging,
+                      draggingAnchorIndex: selection.draggingAnchorIndex,
+                      dragOffsetX: selection.dragOffsetX,
+                      dragOffsetY: selection.dragOffsetY
+                    }), /*#__PURE__*/_jsx(SelectionOverlay, {
+                      object: selectedObject,
+                      canvasSize: effectiveCanvasSize,
+                      draggingAnchorIndex: selection.draggingAnchorIndex,
+                      dragOffsetX: selection.dragOffsetX,
+                      dragOffsetY: selection.dragOffsetY,
+                      isDragging: selection.isDragging
+                    })]
+                  }), isFreehand && /*#__PURE__*/_jsx(FreehandInProgress, {
+                    path: freehand.inProgressPath,
+                    color: freehand.inProgressColor,
+                    lineWidth: freehand.inProgressWidth,
+                    isDrawing: freehand.isDrawing
+                  }), isTwoPointShape && /*#__PURE__*/_jsx(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__*/_jsx(PolygonInProgress, {
+                    pointsFlat: polygon.pointsFlat,
+                    pointCount: polygon.pointCount,
+                    isActive: polygon.isActive
+                  })]
+                })]
+              })]
+            }), textObjects.map(textObj => /*#__PURE__*/_jsx(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__*/_jsx(ZoomBadge, {
+          scale: viewport.scale,
+          onPress: handleResetZoom
+        }), /*#__PURE__*/_jsx(MiniMap, {
+          image: skiaImage,
+          imageRect: imageRect,
+          scale: viewport.scale,
+          translateX: viewport.translateX,
+          translateY: viewport.translateY,
+          visible: isZoomed,
+          onPanViewport: viewport.panViewport
+        })]
+      }), !isPhone && /*#__PURE__*/_jsx(View, {
+        style: styles.sidebarRight,
+        children: /*#__PURE__*/_jsx(LineWidthSlider, {
+          value: lineWidth,
+          onValueChange: setLineWidth,
+          orientation: "vertical"
+        })
+      })]
+    }), isPhone ? /*#__PURE__*/_jsxs(View, {
+      style: [styles.phoneBottomArea, {
+        paddingBottom: insets.bottom
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.phoneControlsBar,
+        children: [renderColorPalette ? renderColorPalette({
+          strokeColor,
+          fillColor,
+          fillAlpha,
+          onSelectStrokeColor: setStrokeColor,
+          onSelectFillColor: useDrawingStore.getState().setFillColor,
+          onSelectFillAlpha: useDrawingStore.getState().setFillAlpha
+        }) : /*#__PURE__*/_jsx(ColorPalette, {
+          strokeColor: strokeColor,
+          onSelectColor: setStrokeColor,
+          direction: "horizontal"
+        }), /*#__PURE__*/_jsx(LineWidthSlider, {
+          value: lineWidth,
+          onValueChange: setLineWidth,
+          orientation: "horizontal"
+        })]
+      }), renderToolbar ? renderToolbar({
+        currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed,
+        onResetZoom: handleResetZoom
+      }) : /*#__PURE__*/_jsx(Toolbar, {
+        currentTool: currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed: isZoomed,
+        onResetZoom: handleResetZoom
+      })]
+    }) : /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: styles.toolbarOverlay,
+      children: renderToolbar ? renderToolbar({
+        currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed,
+        onResetZoom: handleResetZoom
+      }) : /*#__PURE__*/_jsx(Toolbar, {
+        currentTool: currentTool,
+        onSelectTool: handleSelectTool,
+        onUndo: handleUndo,
+        canUndo: undoStack.length > 0,
+        isZoomed: isZoomed,
+        onResetZoom: handleResetZoom
+      })
+    }), /*#__PURE__*/_jsx(TextEditModal, {
+      visible: textEditVisible,
+      initialValue: textEditValue,
+      onSubmit: handleTextSubmit,
+      onCancel: () => setTextEditVisible(false)
+    }), /*#__PURE__*/_jsx(MeasurementEditModal, {
+      visible: measureEditVisible,
+      initialValue: "",
+      initialUnit: lastUsedUnit.current,
+      onSubmit: handleMeasureSubmit,
+      onCancel: handleMeasureCancel
+    })]
+  });
+});
+const styles = 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