@archireport/react-native-drawing 0.2.0

package/src/hooks/useShapeGesture.ts

@@ -0,0 +1,256 @@
+import { useCallback } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import {
+  useSharedValue,
+  useDerivedValue,
+  runOnJS,
+} from "react-native-reanimated";
+import type { TwoPointShapeType, DrawingObject, Size } from "../types";
+import { normalize, screenToCanvas } from "../utils/coordinates";
+import { generateId } from "../utils/serialization";
+import { useDrawingStore } from "../store/useDrawingStore";
+
+const MIN_GESTURE_DURATION_MS = 300;
+const MIN_GESTURE_DISTANCE = 5;
+
+interface UseShapeGestureOptions {
+  shapeType: TwoPointShapeType;
+  colorSV: { value: string };
+  lineWidthSV: { value: number };
+  fillColorSV: { value: string | null };
+  fillAlphaSV: { value: number };
+  canvasSize: Size;
+  enabled: boolean;
+  imageOffsetX: { value: number };
+  imageOffsetY: { value: number };
+  imageWidth: { value: number };
+  imageHeight: { value: number };
+  viewScale: { value: number };
+  viewTranslateX: { value: number };
+  viewTranslateY: { value: number };
+  onMeasureCreated?: (id: string) => void;
+}
+
+export function useShapeGesture({
+  shapeType,
+  colorSV,
+  lineWidthSV,
+  fillColorSV,
+  fillAlphaSV,
+  canvasSize,
+  enabled,
+  imageOffsetX,
+  imageOffsetY,
+  imageWidth,
+  imageHeight,
+  viewScale,
+  viewTranslateX,
+  viewTranslateY,
+  onMeasureCreated,
+}: UseShapeGestureOptions) {
+  // Shared values for the in-progress shape (pixel coords)
+  const startX = useSharedValue(0);
+  const startY = useSharedValue(0);
+  const currentX = useSharedValue(0);
+  const currentY = useSharedValue(0);
+  const isDrawing = useSharedValue(false);
+  const gestureStartTime = useSharedValue(0);
+
+  const addObject = useDrawingStore((s) => s.addObject);
+
+  const inProgressColor = useDerivedValue(() => colorSV.value);
+  const inProgressWidth = useDerivedValue(() => lineWidthSV.value);
+  const inProgressFillColor = useDerivedValue(() => fillColorSV.value);
+  const inProgressFillAlpha = useDerivedValue(() => fillAlphaSV.value);
+
+  const commitShape = useCallback(
+    (
+      sx: number,
+      sy: number,
+      ex: number,
+      ey: number,
+      color: string,
+      lineWidth: number,
+      fillColor: string | null,
+      fillAlpha: number,
+    ) => {
+      const from = normalize({ x: sx, y: sy }, canvasSize);
+      const to = normalize({ x: ex, y: ey }, canvasSize);
+
+      let obj: DrawingObject;
+
+      switch (shapeType) {
+        case "line":
+          obj = {
+            id: generateId(),
+            type: "line",
+            from,
+            to,
+            color,
+            lineWidth,
+          };
+          break;
+        case "arrow":
+          obj = {
+            id: generateId(),
+            type: "arrow",
+            from,
+            to,
+            color,
+            lineWidth,
+          };
+          break;
+        case "rectangle":
+          obj = {
+            id: generateId(),
+            type: "rectangle",
+            from,
+            to,
+            color,
+            lineWidth,
+            backgroundColor: fillColor ?? undefined,
+            backgroundAlpha: fillColor ? fillAlpha : undefined,
+          };
+          break;
+        case "circle":
+          obj = {
+            id: generateId(),
+            type: "circle",
+            from,
+            to,
+            color,
+            lineWidth,
+            backgroundColor: fillColor ?? undefined,
+            backgroundAlpha: fillColor ? fillAlpha : undefined,
+          };
+          break;
+        case "measure": {
+          const measureId = generateId();
+          obj = {
+            id: measureId,
+            type: "measure",
+            from,
+            to,
+            color,
+            lineWidth,
+            text: "",
+            unit: "cm",
+            measureStyle: 0,
+          };
+          break;
+        }
+      }
+
+      addObject(obj);
+
+      if (shapeType === "measure" && onMeasureCreated) {
+        onMeasureCreated(obj.id);
+      }
+    },
+    [canvasSize, shapeType, addObject, onMeasureCreated],
+  );
+
+  const gesture = Gesture.Pan()
+    .enabled(enabled)
+    .maxPointers(1)
+    .minDistance(0)
+    .onBegin((e) => {
+      "worklet";
+      const canvas = screenToCanvas(
+        e.x,
+        e.y,
+        viewScale.value,
+        viewTranslateX.value,
+        viewTranslateY.value,
+      );
+      const x = Math.max(
+        0,
+        Math.min(imageWidth.value, canvas.x - imageOffsetX.value),
+      );
+      const y = Math.max(
+        0,
+        Math.min(imageHeight.value, canvas.y - imageOffsetY.value),
+      );
+      isDrawing.value = true;
+      gestureStartTime.value = Date.now();
+      startX.value = x;
+      startY.value = y;
+      currentX.value = x;
+      currentY.value = y;
+    })
+    .onUpdate((e) => {
+      "worklet";
+      const canvas = screenToCanvas(
+        e.x,
+        e.y,
+        viewScale.value,
+        viewTranslateX.value,
+        viewTranslateY.value,
+      );
+      currentX.value = Math.max(
+        0,
+        Math.min(imageWidth.value, canvas.x - imageOffsetX.value),
+      );
+      currentY.value = Math.max(
+        0,
+        Math.min(imageHeight.value, canvas.y - imageOffsetY.value),
+      );
+    })
+    .onEnd((e) => {
+      "worklet";
+      const canvas = screenToCanvas(
+        e.x,
+        e.y,
+        viewScale.value,
+        viewTranslateX.value,
+        viewTranslateY.value,
+      );
+      const clampedX = Math.max(
+        0,
+        Math.min(imageWidth.value, canvas.x - imageOffsetX.value),
+      );
+      const clampedY = Math.max(
+        0,
+        Math.min(imageHeight.value, canvas.y - imageOffsetY.value),
+      );
+      const duration = Date.now() - gestureStartTime.value;
+      const dx = clampedX - startX.value;
+      const dy = clampedY - startY.value;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+
+      if (duration < MIN_GESTURE_DURATION_MS && dist < MIN_GESTURE_DISTANCE) {
+        isDrawing.value = false;
+        return;
+      }
+
+      const sx = startX.value;
+      const sy = startY.value;
+      const ex = currentX.value;
+      const ey = currentY.value;
+      const color = colorSV.value;
+      const lw = lineWidthSV.value;
+      const fc = fillColorSV.value;
+      const fa = fillAlphaSV.value;
+
+      isDrawing.value = false;
+
+      runOnJS(commitShape)(sx, sy, ex, ey, color, lw, fc, fa);
+    })
+    .onFinalize(() => {
+      "worklet";
+      isDrawing.value = false;
+    });
+
+  return {
+    gesture,
+    startX,
+    startY,
+    currentX,
+    currentY,
+    isDrawing,
+    inProgressColor,
+    inProgressWidth,
+    inProgressFillColor,
+    inProgressFillAlpha,
+  };
+}

package/src/hooks/useViewportGesture.ts

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

package/src/index.tsx

@@ -0,0 +1,51 @@
+// ─── Main Component ──────────────────────────────────────────────────────────
+export { DrawingEditor } from "./DrawingEditor";
+
+// ─── Store ───────────────────────────────────────────────────────────────────
+export { useDrawingStore } from "./store/useDrawingStore";
+export type { DrawingState } from "./store/useDrawingStore";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export type {
+  DrawingEditorProps,
+  DrawingEditorRef,
+  DrawingObject,
+  FreehandObject,
+  LineObject,
+  ArrowObject,
+  RectangleObject,
+  CircleObject,
+  PolygonObject,
+  MeasureObject,
+  TextObject,
+  TwoPointObject,
+  ToolType,
+  TwoPointShapeType,
+  MeasureStyle,
+  Point,
+  Size,
+  UndoAction,
+  UndoActionType,
+  ToolbarRenderProps,
+  ColorPaletteRenderProps,
+} from "./types";
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+export {
+  normalize,
+  denormalize,
+  normalizePoints,
+  denormalizePoints,
+  screenToCanvas,
+} from "./utils/coordinates";
+export {
+  serializeObjects,
+  deserializeObjects,
+  generateId,
+} from "./utils/serialization";
+export { PRESET_COLORS, DEFAULT_STROKE_COLOR } from "./utils/colors";
+
+// ─── Reusable UI Components ─────────────────────────────────────────────────
+export { Toolbar } from "./components/Toolbar";
+export { ColorPalette } from "./components/ColorPalette";
+export { LineWidthSlider } from "./components/LineWidthSlider";