@archireport/react-native-drawing 0.2.0

package/src/hooks/useFreehandGesture.ts

@@ -0,0 +1,249 @@
+import { useCallback } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import {
+  useSharedValue,
+  useDerivedValue,
+  runOnJS,
+} from "react-native-reanimated";
+import { Skia } from "@shopify/react-native-skia";
+import type { Point, Size, FreehandObject, DrawingObject } from "../types";
+import { buildSmoothedPathFromFlat } from "../utils/smoothing";
+import { normalize, screenToCanvas } from "../utils/coordinates";
+import { generateId } from "../utils/serialization";
+import { detectShape } from "../utils/shapeDetection";
+import { useDrawingStore } from "../store/useDrawingStore";
+
+const MIN_GESTURE_DURATION_MS = 300;
+const MIN_GESTURE_DISTANCE = 5;
+
+interface UseFreehandGestureOptions {
+  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 };
+}
+
+export function useFreehandGesture({
+  colorSV,
+  lineWidthSV,
+  fillColorSV,
+  fillAlphaSV,
+  canvasSize,
+  enabled,
+  imageOffsetX,
+  imageOffsetY,
+  imageWidth,
+  imageHeight,
+  viewScale,
+  viewTranslateX,
+  viewTranslateY,
+}: UseFreehandGestureOptions) {
+  const rawPoints = useSharedValue<number[]>([]);
+  const isDrawing = useSharedValue(false);
+  const gestureStartTime = useSharedValue(0);
+  const gestureStartPos = useSharedValue<[number, number]>([0, 0]);
+
+  const addObject = useDrawingStore((s) => s.addObject);
+
+  // Build the path in the Skia worklet on every points update
+  const inProgressPath = useDerivedValue(() => {
+    if (!isDrawing.value) return null;
+    const svg = buildSmoothedPathFromFlat(rawPoints.value);
+    if (!svg) return null;
+    const path = Skia.Path.MakeFromSVGString(svg);
+    return path;
+  });
+
+  const inProgressColor = useDerivedValue(() => colorSV.value);
+  const inProgressWidth = useDerivedValue(() => lineWidthSV.value);
+
+  const commitPath = useCallback(
+    (
+      flatPoints: number[],
+      durationMs: number,
+      color: string,
+      lineWidth: number,
+      fillColor: string | null,
+      fillAlpha: number,
+    ) => {
+      const n = flatPoints.length / 2;
+      if (n < 2) return;
+
+      // Convert flat array to Point[]
+      const pixelPoints: Point[] = [];
+      for (let i = 0; i < n; i++) {
+        pixelPoints.push({ x: flatPoints[i * 2]!, y: flatPoints[i * 2 + 1]! });
+      }
+
+      // Try auto shape detection
+      const detected = detectShape(pixelPoints, durationMs);
+
+      let obj: DrawingObject;
+
+      if (detected) {
+        const from = normalize(detected.from, canvasSize);
+        const to = normalize(detected.to, canvasSize);
+
+        switch (detected.type) {
+          case "circle":
+            obj = {
+              id: generateId(),
+              type: "circle",
+              from,
+              to,
+              color,
+              lineWidth,
+              backgroundColor: fillColor ?? undefined,
+              backgroundAlpha: fillColor ? fillAlpha : undefined,
+            };
+            break;
+          case "rectangle":
+            obj = {
+              id: generateId(),
+              type: "rectangle",
+              from,
+              to,
+              color,
+              lineWidth,
+              backgroundColor: fillColor ?? undefined,
+              backgroundAlpha: fillColor ? fillAlpha : undefined,
+            };
+            break;
+          case "line":
+            obj = {
+              id: generateId(),
+              type: "line",
+              from,
+              to,
+              color,
+              lineWidth,
+            };
+            break;
+        }
+      } else {
+        // Store as freehand with normalized points
+        const normalizedPoints = pixelPoints.map((p) =>
+          normalize(p, canvasSize),
+        );
+        obj = {
+          id: generateId(),
+          type: "freehand",
+          points: normalizedPoints,
+          color,
+          lineWidth,
+        } satisfies FreehandObject;
+      }
+
+      addObject(obj);
+    },
+    [canvasSize, addObject],
+  );
+
+  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();
+      gestureStartPos.value = [x, y];
+      rawPoints.value = [x, y];
+    })
+    .onUpdate((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),
+      );
+      // Append new point
+      rawPoints.value = [...rawPoints.value, x, y];
+    })
+    .onEnd((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),
+      );
+      const duration = Date.now() - gestureStartTime.value;
+      const [sx, sy] = gestureStartPos.value;
+      const dist = Math.sqrt((x - sx) ** 2 + (y - sy) ** 2);
+
+      // Cancel accidental taps (< 300ms and < 5px movement)
+      if (duration < MIN_GESTURE_DURATION_MS && dist < MIN_GESTURE_DISTANCE) {
+        isDrawing.value = false;
+        rawPoints.value = [];
+        return;
+      }
+
+      const pts = rawPoints.value;
+      const color = colorSV.value;
+      const lw = lineWidthSV.value;
+      const fc = fillColorSV.value;
+      const fa = fillAlphaSV.value;
+
+      isDrawing.value = false;
+      rawPoints.value = [];
+
+      runOnJS(commitPath)(pts, duration, color, lw, fc, fa);
+    })
+    .onFinalize(() => {
+      "worklet";
+      isDrawing.value = false;
+      rawPoints.value = [];
+    });
+
+  return {
+    gesture,
+    inProgressPath,
+    inProgressColor,
+    inProgressWidth,
+    isDrawing,
+  };
+}

package/src/hooks/usePolygonGesture.ts

@@ -0,0 +1,162 @@
+import { useCallback } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import { useSharedValue, runOnJS } from "react-native-reanimated";
+import type { PolygonObject, Size, Point } from "../types";
+import { normalize, screenToCanvas } from "../utils/coordinates";
+import { generateId } from "../utils/serialization";
+import { useDrawingStore } from "../store/useDrawingStore";
+
+/** Distance in pixels to auto-close the polygon when tapping near the first point */
+const CLOSE_DISTANCE = 30;
+
+interface UsePolygonGestureOptions {
+  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 };
+}
+
+export function usePolygonGesture({
+  colorSV,
+  lineWidthSV,
+  fillColorSV,
+  fillAlphaSV,
+  canvasSize,
+  enabled,
+  imageOffsetX,
+  imageOffsetY,
+  imageWidth,
+  imageHeight,
+  viewScale,
+  viewTranslateX,
+  viewTranslateY,
+}: UsePolygonGestureOptions) {
+  // Flat array of pixel coordinates: [x0, y0, x1, y1, ...]
+  const pointsFlat = useSharedValue<number[]>([]);
+  const pointCount = useSharedValue(0);
+  const isActive = useSharedValue(false);
+
+  const addObject = useDrawingStore((s) => s.addObject);
+
+  const commitPolygon = useCallback(
+    (
+      flatPoints: number[],
+      closed: boolean,
+      color: string,
+      lineWidth: number,
+      fillColor: string | null,
+      fillAlpha: number,
+    ) => {
+      const count = flatPoints.length / 2;
+      if (count < 3) return; // Need at least 3 points for a polygon
+
+      const normalizedPoints: Point[] = [];
+      for (let i = 0; i < count; i++) {
+        normalizedPoints.push(
+          normalize(
+            { x: flatPoints[i * 2]!, y: flatPoints[i * 2 + 1]! },
+            canvasSize,
+          ),
+        );
+      }
+
+      const obj: PolygonObject = {
+        id: generateId(),
+        type: "polygon",
+        points: normalizedPoints,
+        closed,
+        color,
+        lineWidth,
+        backgroundColor: closed && fillColor ? fillColor : undefined,
+        backgroundAlpha: closed && fillColor ? fillAlpha : undefined,
+      };
+
+      addObject(obj);
+    },
+    [canvasSize, addObject],
+  );
+
+  const resetState = useCallback(() => {
+    pointsFlat.value = [];
+    pointCount.value = 0;
+    isActive.value = false;
+  }, [pointsFlat, pointCount, isActive]);
+
+  const gesture = Gesture.Tap()
+    .enabled(enabled)
+    .maxDuration(500)
+    .onEnd((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),
+      );
+
+      const flat = pointsFlat.value;
+      const count = pointCount.value;
+
+      // Check if should close
+      if (count >= 3) {
+        const firstX = flat[0]!;
+        const firstY = flat[1]!;
+        const dx = x - firstX;
+        const dy = y - firstY;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist < CLOSE_DISTANCE) {
+          // Close — commit on JS thread
+          const snapshot = flat.slice();
+          runOnJS(commitPolygon)(
+            snapshot,
+            true,
+            colorSV.value,
+            lineWidthSV.value,
+            fillColorSV.value,
+            fillAlphaSV.value,
+          );
+          pointsFlat.value = [];
+          pointCount.value = 0;
+          isActive.value = false;
+          return;
+        }
+      }
+
+      // Add point
+      const newFlat = [...flat, x, y];
+      pointsFlat.value = newFlat;
+      pointCount.value = count + 1;
+      isActive.value = true;
+    });
+
+  /** Cancel the current polygon construction (e.g. on tool switch) — discard points */
+  const cancel = useCallback(() => {
+    resetState();
+  }, [resetState]);
+
+  return {
+    gesture,
+    pointsFlat,
+    pointCount,
+    isActive,
+    cancel,
+  };
+}

package/src/hooks/useSelectionGesture.ts

@@ -0,0 +1,293 @@
+import { useCallback, useEffect } from "react";
+import { Gesture } from "react-native-gesture-handler";
+import { runOnJS, useSharedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import { screenToCanvas } from "../utils/coordinates";
+import type { Size, Point } from "../types";
+import { useDrawingStore } from "../store/useDrawingStore";
+import { hitTestObject } from "../utils/hitTesting";
+import {
+  getAnchorPoints,
+  ANCHOR_HIT_RADIUS,
+} from "../renderers/SelectionOverlay";
+
+interface UseSelectionGestureOptions {
+  canvasSize: Size;
+  imageOffsetX: { value: number };
+  imageOffsetY: { value: number };
+  viewScale: { value: number };
+  viewTranslateX: { value: number };
+  viewTranslateY: { value: number };
+  onTapEmpty?: (x: number, y: number) => void;
+}
+
+export function useSelectionGesture({
+  canvasSize,
+  imageOffsetX,
+  imageOffsetY,
+  viewScale,
+  viewTranslateX,
+  viewTranslateY,
+  onTapEmpty,
+}: UseSelectionGestureOptions) {
+  const isDragging = useSharedValue(false);
+  const dragStartX = useSharedValue(0);
+  const dragStartY = useSharedValue(0);
+  // Live pixel offset for visual feedback during drag
+  const dragOffsetX: SharedValue<number> = useSharedValue(0);
+  const dragOffsetY: SharedValue<number> = useSharedValue(0);
+  // Which anchor is being dragged (-1 = none, moving whole object)
+  const draggingAnchorIndex = useSharedValue(-1);
+  // True between onEnd and the React re-render that commits the new position
+  const pendingCommit = useSharedValue(false);
+
+  // Pre-computed anchor positions in pixel coords (for worklet access)
+  const anchor0X = useSharedValue(0);
+  const anchor0Y = useSharedValue(0);
+  const anchor1X = useSharedValue(0);
+  const anchor1Y = useSharedValue(0);
+  const hasAnchors = useSharedValue(false);
+  // Flat array of all anchor positions [x0, y0, x1, y1, ...] for N-anchor objects
+  const allAnchorsFlat = useSharedValue<number[]>([]);
+  const anchorCount = useSharedValue(0);
+
+  const objects = useDrawingStore((s) => s.objects);
+  const selectedObjectId = useDrawingStore((s) => s.selectedObjectId);
+  const selectObject = useDrawingStore((s) => s.selectObject);
+  const moveObject = useDrawingStore((s) => s.moveObject);
+  const resizeObject = useDrawingStore((s) => s.resizeObject);
+
+  // Sync anchor positions to shared values whenever selection changes
+  useEffect(() => {
+    if (!selectedObjectId) {
+      hasAnchors.value = false;
+      anchorCount.value = 0;
+      allAnchorsFlat.value = [];
+      return;
+    }
+    const obj = objects.find((o) => o.id === selectedObjectId);
+    if (!obj) {
+      hasAnchors.value = false;
+      anchorCount.value = 0;
+      allAnchorsFlat.value = [];
+      return;
+    }
+    const anchors = getAnchorPoints(obj, canvasSize);
+    if (anchors.length >= 2) {
+      anchor0X.value = anchors[0]!.x;
+      anchor0Y.value = anchors[0]!.y;
+      anchor1X.value = anchors[1]!.x;
+      anchor1Y.value = anchors[1]!.y;
+      hasAnchors.value = true;
+      // Store all anchors for N-vertex objects (polygon)
+      const flat: number[] = [];
+      for (const a of anchors) {
+        flat.push(a.x, a.y);
+      }
+      allAnchorsFlat.value = flat;
+      anchorCount.value = anchors.length;
+    } else {
+      hasAnchors.value = false;
+      anchorCount.value = 0;
+      allAnchorsFlat.value = [];
+    }
+  }, [selectedObjectId, objects, canvasSize]);
+
+  const handleTap = useCallback(
+    (x: number, y: number) => {
+      const tapPoint: Point = { x, y };
+
+      // Find the topmost object that is hit (reverse iteration)
+      for (let i = objects.length - 1; i >= 0; i--) {
+        const obj = objects[i]!;
+        if (hitTestObject(obj, tapPoint, canvasSize)) {
+          selectObject(obj.id);
+          return;
+        }
+      }
+      // Tap on empty space → delegate or deselect
+      if (onTapEmpty) {
+        onTapEmpty(x, y);
+      } else {
+        selectObject(null);
+      }
+    },
+    [objects, canvasSize, selectObject, onTapEmpty],
+  );
+
+  const resetDragState = useCallback(() => {
+    isDragging.value = false;
+    dragOffsetX.value = 0;
+    dragOffsetY.value = 0;
+    draggingAnchorIndex.value = -1;
+    pendingCommit.value = false;
+  }, [
+    isDragging,
+    dragOffsetX,
+    dragOffsetY,
+    draggingAnchorIndex,
+    pendingCommit,
+  ]);
+
+  const handleDragEnd = useCallback(
+    (dx: number, dy: number) => {
+      if (!selectedObjectId) {
+        // No store update will occur — reset immediately
+        resetDragState();
+        return;
+      }
+
+      // Convert pixel delta to normalized delta
+      const normalizedDx = canvasSize.width > 0 ? dx / canvasSize.width : 0;
+      const normalizedDy = canvasSize.height > 0 ? dy / canvasSize.height : 0;
+
+      moveObject(selectedObjectId, normalizedDx, normalizedDy);
+      // Drag state is reset by SelectedObjectRenderer's useEffect
+      // when the component re-renders with the updated object.
+    },
+    [selectedObjectId, canvasSize, moveObject, resetDragState],
+  );
+
+  const handleResizeEnd = useCallback(
+    (anchorIndex: number, dx: number, dy: number) => {
+      if (!selectedObjectId) {
+        resetDragState();
+        return;
+      }
+
+      const normalizedDx = canvasSize.width > 0 ? dx / canvasSize.width : 0;
+      const normalizedDy = canvasSize.height > 0 ? dy / canvasSize.height : 0;
+
+      resizeObject(selectedObjectId, anchorIndex, normalizedDx, normalizedDy);
+      // Drag state is reset by SelectedObjectRenderer's useEffect
+    },
+    [selectedObjectId, canvasSize, resizeObject, resetDragState],
+  );
+
+  const tapGesture = Gesture.Tap().onEnd((e) => {
+    "worklet";
+    const canvas = screenToCanvas(
+      e.x,
+      e.y,
+      viewScale.value,
+      viewTranslateX.value,
+      viewTranslateY.value,
+    );
+    const x = canvas.x - imageOffsetX.value;
+    const y = canvas.y - imageOffsetY.value;
+    runOnJS(handleTap)(x, y);
+  });
+
+  const panGesture = Gesture.Pan()
+    .enabled(selectedObjectId !== null)
+    .maxPointers(1)
+    .minDistance(5)
+    .onBegin((e) => {
+      "worklet";
+      const canvas = screenToCanvas(
+        e.x,
+        e.y,
+        viewScale.value,
+        viewTranslateX.value,
+        viewTranslateY.value,
+      );
+      const x = canvas.x - imageOffsetX.value;
+      const y = canvas.y - imageOffsetY.value;
+
+      pendingCommit.value = false;
+      isDragging.value = true;
+      dragStartX.value = e.x;
+      dragStartY.value = e.y;
+      dragOffsetX.value = 0;
+      dragOffsetY.value = 0;
+
+      // Check if we hit an anchor handle
+      draggingAnchorIndex.value = -1;
+      if (hasAnchors.value) {
+        const hitRadius = ANCHOR_HIT_RADIUS;
+        let bestDist = hitRadius;
+        let bestIdx = -1;
+        const flat = allAnchorsFlat.value;
+        const count = anchorCount.value;
+        for (let i = 0; i < count; i++) {
+          const ax = flat[i * 2]!;
+          const ay = flat[i * 2 + 1]!;
+          const d = Math.sqrt((x - ax) ** 2 + (y - ay) ** 2);
+          if (d < bestDist) {
+            bestDist = d;
+            bestIdx = i;
+          }
+        }
+        if (bestIdx >= 0) {
+          draggingAnchorIndex.value = bestIdx;
+        }
+      }
+    })
+    .onUpdate((e) => {
+      "worklet";
+      // Scale drag offset by 1/scale so visual feedback matches canvas coordinates
+      dragOffsetX.value = (e.x - dragStartX.value) / viewScale.value;
+      dragOffsetY.value = (e.y - dragStartY.value) / viewScale.value;
+    })
+    .onEnd((e) => {
+      "worklet";
+      // Convert screen-space deltas to canvas-space deltas
+      const dx = (e.x - dragStartX.value) / viewScale.value;
+      const dy = (e.y - dragStartY.value) / viewScale.value;
+
+      // Keep isDragging + offsets alive so the object stays at its dragged
+      // position until React re-renders with the committed store update.
+      // SelectedObjectRenderer's useEffect will reset drag state atomically.
+      pendingCommit.value = true;
+
+      if (draggingAnchorIndex.value >= 0) {
+        runOnJS(handleResizeEnd)(draggingAnchorIndex.value, dx, dy);
+      } else {
+        runOnJS(handleDragEnd)(dx, dy);
+      }
+    })
+    .onFinalize(() => {
+      "worklet";
+      // Only reset if onEnd didn't fire (gesture was cancelled)
+      if (!pendingCommit.value) {
+        isDragging.value = false;
+        dragOffsetX.value = 0;
+        dragOffsetY.value = 0;
+        draggingAnchorIndex.value = -1;
+      }
+    });
+
+  // Double-tap for editing measurement text or text annotations
+  const doubleTapGesture = Gesture.Tap()
+    .numberOfTaps(2)
+    .minPointers(1)
+    .onEnd((e) => {
+      "worklet";
+      const canvas = screenToCanvas(
+        e.x,
+        e.y,
+        viewScale.value,
+        viewTranslateX.value,
+        viewTranslateY.value,
+      );
+      const x = canvas.x - imageOffsetX.value;
+      const y = canvas.y - imageOffsetY.value;
+      // Will be handled in the DrawingEditor for opening edit modals
+      runOnJS(handleDoubleTap)(x, y);
+    });
+
+  const handleDoubleTap = useCallback((_x: number, _y: number) => {
+    // Double-tap handling is delegated to DrawingEditor via callbacks
+    // This hook just detects the gesture
+  }, []);
+
+  return {
+    tapGesture,
+    panGesture,
+    doubleTapGesture,
+    isDragging,
+    dragOffsetX,
+    dragOffsetY,
+    draggingAnchorIndex,
+  };
+}