@archireport/react-native-drawing 0.2.0

package/src/DrawingEditor.tsx

@@ -0,0 +1,1071 @@
+import {
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+} from "react";
+import { View, StyleSheet, Platform, useWindowDimensions, type LayoutChangeEvent } 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 type { ViewStyle } from "react-native";
+
+import type {
+  DrawingEditorProps,
+  DrawingEditorRef,
+  ToolType,
+  TextObject,
+  MeasureObject,
+  TwoPointShapeType,
+  Size,
+} from "./types";
+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";
+
+const TWO_POINT_TOOLS: TwoPointShapeType[] = [
+  "line",
+  "arrow",
+  "rectangle",
+  "circle",
+  "measure",
+];
+
+const WEB_CURSOR_STYLES = {
+  default: { cursor: "default" } as unknown as ViewStyle,
+  crosshair: { cursor: "crosshair" } as unknown as ViewStyle,
+  grab: { cursor: "grab" } as unknown as ViewStyle,
+  grabbing: { cursor: "grabbing" } as unknown as ViewStyle,
+  text: { cursor: "text" } as unknown as ViewStyle,
+};
+
+interface WebWheelEventLike {
+  ctrlKey?: boolean;
+  deltaY?: number;
+  clientX?: number;
+  clientY?: number;
+  preventDefault?: () => void;
+  currentTarget?: {
+    getBoundingClientRect?: () => {
+      left: number;
+      top: number;
+    };
+  };
+  nativeEvent?: {
+    ctrlKey?: boolean;
+    deltaY?: number;
+    clientX?: number;
+    clientY?: number;
+    preventDefault?: () => void;
+  };
+}
+
+interface WebWheelTarget {
+  addEventListener?: (
+    type: "wheel",
+    listener: (event: WebWheelEventLike) => void,
+    options?: { passive: boolean },
+  ) => void;
+  removeEventListener?: (
+    type: "wheel",
+    listener: (event: WebWheelEventLike) => void,
+    options?: { passive: boolean },
+  ) => void;
+}
+
+export const DrawingEditor = forwardRef<DrawingEditorRef, DrawingEditorProps>(
+  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<Size>({ width: 0, height: 0 });
+    const [isPointerDown, setIsPointerDown] = useState(false);
+    const wheelTargetRef = useRef<WebWheelTarget | null>(null);
+
+    const setWheelTargetRef = useCallback((node: unknown) => {
+      wheelTargetRef.current = node as WebWheelTarget | null;
+    }, []);
+
+    const handleLayout = useCallback((event: LayoutChangeEvent) => {
+      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<ToolType | null>(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 as TwoPointShapeType,
+    );
+    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<Size>(
+      () => ({
+        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<string | null>(
+      null,
+    );
+    const lastUsedUnit = useRef("cm");
+
+    const handleMeasureCreated = useCallback(
+      (id: string) => {
+        setMeasureEditTarget(id);
+        setMeasureEditVisible(true);
+      },
+      [],
+    );
+
+    const handleMeasureSubmit = useCallback(
+      (value: string, unit: string) => {
+        if (measureEditTarget) {
+          updateObject(measureEditTarget, {
+            text: value,
+            unit,
+          } as Partial<MeasureObject>);
+        }
+        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") as TwoPointShapeType,
+      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: number, y: number) => {
+        const pos = normalize({ x, y }, effectiveCanvasSize);
+        const newText: TextObject = {
+          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: number, y: number) => {
+        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<string | null>(null);
+    const [textEditValue, setTextEditValue] = useState("");
+
+    const handleTextSubmit = useCallback(
+      (value: string) => {
+        if (textEditTarget) {
+          updateObject(textEditTarget, { value } as Partial<TextObject>);
+        }
+        setTextEditVisible(false);
+        setTextEditTarget(null);
+      },
+      [textEditTarget, updateObject],
+    );
+
+    const handleTextDoubleTap = useCallback(
+      (id: string) => {
+        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 is TextObject => 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: ToolType | null) => {
+        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: WebWheelEventLike) => {
+        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<ViewStyle | undefined>(() => {
+      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 (
+      <GestureHandlerRootView style={[styles.root, style]}>
+        <View style={[styles.editorContainer, isPhone ? styles.editorContainerPhone : styles.editorContainerTablet]}>
+          {/* ── Left: Color Palette (tablet only) ──────────────────────── */}
+          {!isPhone && (
+            <View style={styles.sidebarLeft}>
+              {renderColorPalette ? (
+                renderColorPalette({
+                  strokeColor,
+                  fillColor,
+                  fillAlpha,
+                  onSelectStrokeColor: setStrokeColor,
+                  onSelectFillColor: useDrawingStore.getState().setFillColor,
+                  onSelectFillAlpha: useDrawingStore.getState().setFillAlpha,
+                })
+              ) : (
+                <ColorPalette
+                  strokeColor={strokeColor}
+                  onSelectColor={setStrokeColor}
+                  direction="vertical"
+                />
+              )}
+            </View>
+          )}
+
+          {/* ── Center: Canvas ──────────────────────────────────────────── */}
+          <View style={styles.canvasContainer} onLayout={handleLayout}>
+            <GestureDetector gesture={composedGesture}>
+              <View
+                {...webPointerHandlers}
+                ref={setWheelTargetRef}
+                style={[StyleSheet.absoluteFill, canvasCursorStyle]}
+              >
+                <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}
+                >
+                  {/* Background */}
+                  <Fill color="black" />
+
+                  {/* Viewport transform group (zoom/pan) */}
+                  <Group
+                    transform={viewportTransform}
+                  >
+                    {/* Background image */}
+                    {skiaImage && (
+                      <Image
+                        image={skiaImage}
+                        x={imageRect.x}
+                        y={imageRect.y}
+                        width={imageRect.width}
+                        height={imageRect.height}
+                        fit="contain"
+                      />
+                    )}
+
+                    {/* Drawing group: offset to image rect and clip to bounds */}
+                    <Group
+                      transform={[
+                        { translateX: imageRect.x },
+                        { translateY: imageRect.y },
+                      ]}
+                      clip={rect(0, 0, imageRect.width, imageRect.height)}
+                    >
+                    {/* Non-selected objects (excluding text — rendered as native views) */}
+                    {unselectedNonTextObjects.map((obj) => (
+                      <ObjectRenderer
+                        key={obj.id}
+                        object={obj}
+                        canvasSize={effectiveCanvasSize}
+                      />
+                    ))}
+
+                    {/* Selected object with live animated drag/resize */}
+                    {selectedObject && selectedObject.type !== "text" && (
+                      <>
+                        <SelectedObjectRenderer
+                          object={selectedObject}
+                          canvasSize={effectiveCanvasSize}
+                          isDragging={selection.isDragging}
+                          draggingAnchorIndex={
+                            selection.draggingAnchorIndex
+                          }
+                          dragOffsetX={selection.dragOffsetX}
+                          dragOffsetY={selection.dragOffsetY}
+                        />
+                        <SelectionOverlay
+                          object={selectedObject}
+                          canvasSize={effectiveCanvasSize}
+                          draggingAnchorIndex={
+                            selection.draggingAnchorIndex
+                          }
+                          dragOffsetX={selection.dragOffsetX}
+                          dragOffsetY={selection.dragOffsetY}
+                          isDragging={selection.isDragging}
+                        />
+                      </>
+                    )}
+
+                    {/* In-progress freehand */}
+                    {isFreehand && (
+                      <FreehandInProgress
+                        path={freehand.inProgressPath}
+                        color={freehand.inProgressColor}
+                        lineWidth={freehand.inProgressWidth}
+                        isDrawing={freehand.isDrawing}
+                      />
+                    )}
+
+                    {/* In-progress shape */}
+                    {isTwoPointShape && (
+                      <ShapeInProgress
+                        shapeType={currentTool as TwoPointShapeType}
+                        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}
+                      />
+                    )}
+
+                    {/* In-progress polygon: blue dots at each placed vertex */}
+                    {isPolygon && (
+                      <PolygonInProgress
+                        pointsFlat={polygon.pointsFlat}
+                        pointCount={polygon.pointCount}
+                        isActive={polygon.isActive}
+                      />
+                    )}
+                  </Group>
+                  </Group>
+                </Canvas>
+
+                {/* Text annotations (native RN views overlaying the canvas) */}
+                {textObjects.map((textObj) => (
+                  <TextAnnotation
+                    key={textObj.id}
+                    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}
+                  />
+                ))}
+              </View>
+            </GestureDetector>
+
+            {/* ── Zoom UI overlays ─────────────────────────────────────── */}
+            <ZoomBadge
+              scale={viewport.scale}
+              onPress={handleResetZoom}
+            />
+            <MiniMap
+              image={skiaImage}
+              imageRect={imageRect}
+              scale={viewport.scale}
+              translateX={viewport.translateX}
+              translateY={viewport.translateY}
+              visible={isZoomed}
+              onPanViewport={viewport.panViewport}
+            />
+          </View>
+
+          {/* ── Right: Line Width Slider (tablet only) ─────────────────── */}
+          {!isPhone && (
+            <View style={styles.sidebarRight}>
+              <LineWidthSlider
+                value={lineWidth}
+                onValueChange={setLineWidth}
+                orientation="vertical"
+              />
+            </View>
+          )}
+        </View>
+
+        {/* ── Bottom: phone layout (flex) or tablet (absolute) ──────── */}
+        {isPhone ? (
+          <View style={[styles.phoneBottomArea, { paddingBottom: insets.bottom }]}>
+            {/* Controls bar */}
+            <View style={styles.phoneControlsBar}>
+              {renderColorPalette ? (
+                renderColorPalette({
+                  strokeColor,
+                  fillColor,
+                  fillAlpha,
+                  onSelectStrokeColor: setStrokeColor,
+                  onSelectFillColor: useDrawingStore.getState().setFillColor,
+                  onSelectFillAlpha: useDrawingStore.getState().setFillAlpha,
+                })
+              ) : (
+                <ColorPalette
+                  strokeColor={strokeColor}
+                  onSelectColor={setStrokeColor}
+                  direction="horizontal"
+                />
+              )}
+              <LineWidthSlider
+                value={lineWidth}
+                onValueChange={setLineWidth}
+                orientation="horizontal"
+              />
+            </View>
+            {/* Toolbar */}
+            {renderToolbar ? (
+              renderToolbar({
+                currentTool,
+                onSelectTool: handleSelectTool,
+                onUndo: handleUndo,
+                canUndo: undoStack.length > 0,
+                isZoomed,
+                onResetZoom: handleResetZoom,
+              })
+            ) : (
+              <Toolbar
+                currentTool={currentTool}
+                onSelectTool={handleSelectTool}
+                onUndo={handleUndo}
+                canUndo={undoStack.length > 0}
+                isZoomed={isZoomed}
+                onResetZoom={handleResetZoom}
+              />
+            )}
+          </View>
+        ) : (
+          <View pointerEvents="box-none" style={styles.toolbarOverlay}>
+            {renderToolbar ? (
+              renderToolbar({
+                currentTool,
+                onSelectTool: handleSelectTool,
+                onUndo: handleUndo,
+                canUndo: undoStack.length > 0,
+                isZoomed,
+                onResetZoom: handleResetZoom,
+              })
+            ) : (
+              <Toolbar
+                currentTool={currentTool}
+                onSelectTool={handleSelectTool}
+                onUndo={handleUndo}
+                canUndo={undoStack.length > 0}
+                isZoomed={isZoomed}
+                onResetZoom={handleResetZoom}
+              />
+            )}
+          </View>
+        )}
+
+        {/* ── Modals ──────────────────────────────────────────────────── */}
+        <TextEditModal
+          visible={textEditVisible}
+          initialValue={textEditValue}
+          onSubmit={handleTextSubmit}
+          onCancel={() => setTextEditVisible(false)}
+        />
+        <MeasurementEditModal
+          visible={measureEditVisible}
+          initialValue=""
+          initialUnit={lastUsedUnit.current}
+          onSubmit={handleMeasureSubmit}
+          onCancel={handleMeasureCancel}
+        />
+      </GestureHandlerRootView>
+    );
+  },
+);
+
+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",
+  },
+});