@archireport/react-native-drawing 0.2.0

package/src/renderers/SelectionOverlay.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from "react";
+import { Circle, Group } from "@shopify/react-native-skia";
+import { useDerivedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import type {
+  DrawingObject,
+  FreehandObject,
+  PolygonObject,
+  TwoPointObject,
+  Size,
+  Point,
+} from "../types";
+import { denormalize, denormalizePoints } from "../utils/coordinates";
+
+interface SelectionOverlayProps {
+  object: DrawingObject;
+  canvasSize: Size;
+  color?: string;
+  draggingAnchorIndex?: SharedValue<number>;
+  dragOffsetX?: SharedValue<number>;
+  dragOffsetY?: SharedValue<number>;
+  isDragging?: SharedValue<boolean>;
+}
+
+export const ANCHOR_RADIUS = 8;
+const ANCHOR_HIT_RADIUS = 24;
+const DEFAULT_ANCHOR_COLOR = "rgba(0, 122, 255, 0.5)";
+
+/**
+ * Get the anchor points (in pixel coordinates) for a drawing object.
+ */
+export function getAnchorPoints(
+  object: DrawingObject,
+  canvasSize: Size,
+): Point[] {
+  switch (object.type) {
+    case "freehand": {
+      const pts = denormalizePoints(
+        (object as FreehandObject).points,
+        canvasSize,
+      );
+      if (pts.length === 0) return [];
+      return [pts[0]!, pts[pts.length - 1]!];
+    }
+    case "polygon": {
+      return denormalizePoints(
+        (object as PolygonObject).points,
+        canvasSize,
+      );
+    }
+    case "text":
+      return [
+        denormalize(object.position, canvasSize),
+        denormalize(
+          {
+            x: object.position.x + object.width,
+            y: object.position.y + object.height,
+          },
+          canvasSize,
+        ),
+      ];
+    default: {
+      const twoPoint = object as TwoPointObject;
+      return [
+        denormalize(twoPoint.from, canvasSize),
+        denormalize(twoPoint.to, canvasSize),
+      ];
+    }
+  }
+}
+
+export { ANCHOR_HIT_RADIUS };
+
+/**
+ * An anchor circle that can animate its position when being dragged.
+ */
+function AnimatedAnchor({
+  baseX,
+  baseY,
+  index,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+  isDragging,
+  radius,
+  color,
+}: {
+  baseX: number;
+  baseY: number;
+  index: number;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+  isDragging: SharedValue<boolean>;
+  radius: number;
+  color: string;
+}) {
+  const cx = useDerivedValue(() => {
+    if (isDragging.value) {
+      if (draggingAnchorIndex.value < 0) {
+        // Moving whole object: all anchors move
+        return baseX + dragOffsetX.value;
+      } else if (draggingAnchorIndex.value === index) {
+        // Resizing: only this anchor moves
+        return baseX + dragOffsetX.value;
+      }
+    }
+    return baseX;
+  });
+  const cy = useDerivedValue(() => {
+    if (isDragging.value) {
+      if (draggingAnchorIndex.value < 0) {
+        return baseY + dragOffsetY.value;
+      } else if (draggingAnchorIndex.value === index) {
+        return baseY + dragOffsetY.value;
+      }
+    }
+    return baseY;
+  });
+
+  return <Circle cx={cx} cy={cy} r={radius} color={color} style="fill" />;
+}
+
+export const SelectionOverlay = React.memo(function SelectionOverlay({
+  object,
+  canvasSize,
+  color = DEFAULT_ANCHOR_COLOR,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+  isDragging,
+}: SelectionOverlayProps) {
+  const anchors = useMemo(
+    () => getAnchorPoints(object, canvasSize),
+    [object, canvasSize],
+  );
+
+  const hasAnimatedProps =
+    draggingAnchorIndex && dragOffsetX && dragOffsetY && isDragging;
+
+  return (
+    <Group>
+      {anchors.map((point, index) =>
+        hasAnimatedProps ? (
+          <AnimatedAnchor
+            key={`anchor-${index}`}
+            baseX={point.x}
+            baseY={point.y}
+            index={index}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+            isDragging={isDragging}
+            radius={ANCHOR_RADIUS}
+            color={color}
+          />
+        ) : (
+          <Circle
+            key={`anchor-${index}`}
+            cx={point.x}
+            cy={point.y}
+            r={ANCHOR_RADIUS}
+            color={color}
+            style="fill"
+          />
+        ),
+      )}
+    </Group>
+  );
+});

package/src/store/useDrawingStore.ts

@@ -0,0 +1,357 @@
+import { create } from "zustand";
+import type {
+  DrawingObject,
+  FreehandObject,
+  PolygonObject,
+  ToolType,
+  UndoAction,
+  Size,
+  TwoPointObject,
+} from "../types";
+import { DEFAULT_STROKE_COLOR, DEFAULT_LINE_WIDTH } from "../utils/colors";
+import { generateId } from "../utils/serialization";
+
+export interface DrawingState {
+  // ─── State ──────────────────────────────────────────────────────────────────
+  objects: DrawingObject[];
+  currentTool: ToolType | null;
+  strokeColor: string;
+  fillColor: string | null;
+  fillAlpha: number;
+  lineWidth: number;
+  selectedObjectId: string | null;
+  canvasSize: Size;
+  undoStack: UndoAction[];
+
+  // ─── Actions ────────────────────────────────────────────────────────────────
+  setTool: (tool: ToolType | null) => void;
+  setStrokeColor: (color: string) => void;
+  setFillColor: (color: string | null) => void;
+  setFillAlpha: (alpha: number) => void;
+  setLineWidth: (width: number) => void;
+  setCanvasSize: (size: Size) => void;
+
+  addObject: (obj: DrawingObject) => void;
+  updateObject: (id: string, updates: Partial<DrawingObject>) => void;
+  deleteObject: (id: string) => void;
+  deleteSelectedObject: () => void;
+  selectObject: (id: string | null) => void;
+  moveObject: (id: string, dx: number, dy: number) => void;
+  resizeObject: (
+    id: string,
+    anchorIndex: number,
+    dx: number,
+    dy: number,
+  ) => void;
+  undo: () => void;
+  clearAll: () => void;
+  loadObjects: (objects: DrawingObject[]) => void;
+}
+
+function cloneObject(obj: DrawingObject): DrawingObject {
+  return JSON.parse(JSON.stringify(obj)) as DrawingObject;
+}
+
+function movePoints(obj: DrawingObject, dx: number, dy: number): DrawingObject {
+  const moved = cloneObject(obj);
+  switch (moved.type) {
+    case "freehand": {
+      const freehand = moved as FreehandObject;
+      freehand.points = freehand.points.map((p) => ({
+        x: p.x + dx,
+        y: p.y + dy,
+      }));
+      break;
+    }
+    case "polygon": {
+      const polygon = moved as PolygonObject;
+      polygon.points = polygon.points.map((p) => ({
+        x: p.x + dx,
+        y: p.y + dy,
+      }));
+      break;
+    }
+    case "text": {
+      moved.position = {
+        x: moved.position.x + dx,
+        y: moved.position.y + dy,
+      };
+      break;
+    }
+    default: {
+      const twoPoint = moved as TwoPointObject;
+      twoPoint.from = { x: twoPoint.from.x + dx, y: twoPoint.from.y + dy };
+      twoPoint.to = { x: twoPoint.to.x + dx, y: twoPoint.to.y + dy };
+      break;
+    }
+  }
+  return moved;
+}
+
+export const useDrawingStore = create<DrawingState>((set, get) => ({
+  // ─── Initial State ────────────────────────────────────────────────────────
+  objects: [],
+  currentTool: "freehand",
+  strokeColor: DEFAULT_STROKE_COLOR,
+  fillColor: null,
+  fillAlpha: 0.5,
+  lineWidth: DEFAULT_LINE_WIDTH,
+  selectedObjectId: null,
+  canvasSize: { width: 0, height: 0 },
+  undoStack: [],
+
+  // ─── Tool & Style ─────────────────────────────────────────────────────────
+  setTool: (tool) => set({ currentTool: tool, selectedObjectId: null }),
+
+  setStrokeColor: (color) => {
+    const { selectedObjectId, objects, undoStack } = get();
+    if (selectedObjectId) {
+      const obj = objects.find((o) => o.id === selectedObjectId);
+      if (obj) {
+        const prevState = cloneObject(obj);
+        set({
+          strokeColor: color,
+          objects: objects.map((o) =>
+            o.id === selectedObjectId ? { ...o, color } : o,
+          ),
+          undoStack: [
+            ...undoStack,
+            {
+              type: "edit",
+              objectId: selectedObjectId,
+              previousState: prevState,
+            },
+          ],
+        });
+        return;
+      }
+    }
+    set({ strokeColor: color });
+  },
+
+  setFillColor: (color) => set({ fillColor: color }),
+  setFillAlpha: (alpha) => set({ fillAlpha: alpha }),
+
+  setLineWidth: (width) => {
+    const { selectedObjectId, objects, undoStack } = get();
+    if (selectedObjectId) {
+      const obj = objects.find((o) => o.id === selectedObjectId);
+      if (obj) {
+        const prevState = cloneObject(obj);
+        set({
+          lineWidth: width,
+          objects: objects.map((o) =>
+            o.id === selectedObjectId ? { ...o, lineWidth: width } : o,
+          ),
+          undoStack: [
+            ...undoStack,
+            {
+              type: "edit",
+              objectId: selectedObjectId,
+              previousState: prevState,
+            },
+          ],
+        });
+        return;
+      }
+    }
+    set({ lineWidth: width });
+  },
+
+  setCanvasSize: (size) => set({ canvasSize: size }),
+
+  // ─── Object Management ────────────────────────────────────────────────────
+  addObject: (obj) => {
+    const id = obj.id || generateId();
+    const withId = { ...obj, id };
+    set((state) => ({
+      objects: [...state.objects, withId],
+      undoStack: [...state.undoStack, { type: "add", objectId: id }],
+    }));
+  },
+
+  updateObject: (id, updates) => {
+    const { objects, undoStack } = get();
+    const obj = objects.find((o) => o.id === id);
+    if (!obj) return;
+    const prevState = cloneObject(obj);
+    set({
+      objects: objects.map((o) =>
+        o.id === id ? ({ ...o, ...updates } as DrawingObject) : o,
+      ),
+      undoStack: [
+        ...undoStack,
+        { type: "edit", objectId: id, previousState: prevState },
+      ],
+    });
+  },
+
+  deleteObject: (id) => {
+    const { objects, undoStack } = get();
+    const obj = objects.find((o) => o.id === id);
+    if (!obj) return;
+    const prevState = cloneObject(obj);
+    set({
+      objects: objects.filter((o) => o.id !== id),
+      selectedObjectId: null,
+      undoStack: [
+        ...undoStack,
+        { type: "delete", objectId: id, previousState: prevState },
+      ],
+    });
+  },
+
+  deleteSelectedObject: () => {
+    const { selectedObjectId } = get();
+    if (selectedObjectId) {
+      get().deleteObject(selectedObjectId);
+    }
+  },
+
+  selectObject: (id) => set({ selectedObjectId: id }),
+
+  moveObject: (id, dx, dy) => {
+    const { objects, undoStack } = get();
+    const obj = objects.find((o) => o.id === id);
+    if (!obj) return;
+    const prevState = cloneObject(obj);
+    const moved = movePoints(obj, dx, dy);
+    set({
+      objects: objects.map((o) => (o.id === id ? moved : o)),
+      undoStack: [
+        ...undoStack,
+        { type: "move", objectId: id, previousState: prevState },
+      ],
+    });
+  },
+
+  resizeObject: (id, anchorIndex, dx, dy) => {
+    const { objects, undoStack } = get();
+    const obj = objects.find((o) => o.id === id);
+    if (!obj) return;
+    const prevState = cloneObject(obj);
+    const resized = cloneObject(obj);
+
+    switch (resized.type) {
+      case "freehand": {
+        const freehand = resized as FreehandObject;
+        if (freehand.points.length === 0) break;
+        if (anchorIndex === 0) {
+          freehand.points[0] = {
+            x: freehand.points[0]!.x + dx,
+            y: freehand.points[0]!.y + dy,
+          };
+        } else if (anchorIndex === 1) {
+          const last = freehand.points.length - 1;
+          freehand.points[last] = {
+            x: freehand.points[last]!.x + dx,
+            y: freehand.points[last]!.y + dy,
+          };
+        }
+        break;
+      }
+      case "polygon": {
+        const polygon = resized as PolygonObject;
+        if (anchorIndex >= 0 && anchorIndex < polygon.points.length) {
+          polygon.points[anchorIndex] = {
+            x: polygon.points[anchorIndex]!.x + dx,
+            y: polygon.points[anchorIndex]!.y + dy,
+          };
+        }
+        break;
+      }
+      case "text": {
+        if (anchorIndex === 0) {
+          resized.position = {
+            x: resized.position.x + dx,
+            y: resized.position.y + dy,
+          };
+        } else if (anchorIndex === 1) {
+          resized.width = Math.max(0.02, resized.width + dx);
+          resized.height = Math.max(0.02, resized.height + dy);
+        }
+        break;
+      }
+      default: {
+        const twoPoint = resized as TwoPointObject;
+        if (anchorIndex === 0) {
+          twoPoint.from = {
+            x: twoPoint.from.x + dx,
+            y: twoPoint.from.y + dy,
+          };
+        } else if (anchorIndex === 1) {
+          twoPoint.to = {
+            x: twoPoint.to.x + dx,
+            y: twoPoint.to.y + dy,
+          };
+        }
+        break;
+      }
+    }
+
+    set({
+      objects: objects.map((o) => (o.id === id ? resized : o)),
+      undoStack: [
+        ...undoStack,
+        { type: "edit", objectId: id, previousState: prevState },
+      ],
+    });
+  },
+
+  // ─── Undo ─────────────────────────────────────────────────────────────────
+  undo: () => {
+    const { undoStack, objects } = get();
+    if (undoStack.length === 0) return;
+
+    const action = undoStack[undoStack.length - 1]!;
+    const newStack = undoStack.slice(0, -1);
+
+    switch (action.type) {
+      case "add":
+        // Remove the added object
+        set({
+          objects: objects.filter((o) => o.id !== action.objectId),
+          undoStack: newStack,
+          selectedObjectId: null,
+        });
+        break;
+
+      case "delete":
+        // Re-insert the deleted object
+        if (action.previousState) {
+          set({
+            objects: [...objects, action.previousState],
+            undoStack: newStack,
+          });
+        }
+        break;
+
+      case "edit":
+      case "move":
+        // Restore previous state
+        if (action.previousState) {
+          set({
+            objects: objects.map((o) =>
+              o.id === action.objectId ? action.previousState! : o,
+            ),
+            undoStack: newStack,
+          });
+        }
+        break;
+    }
+  },
+
+  clearAll: () =>
+    set({
+      objects: [],
+      undoStack: [],
+      selectedObjectId: null,
+    }),
+
+  loadObjects: (objects) =>
+    set({
+      objects,
+      undoStack: [],
+      selectedObjectId: null,
+    }),
+}));

package/src/types.ts

@@ -0,0 +1,186 @@
+import type { ReactNode } from "react";
+import type { ViewStyle } from "react-native";
+
+// ─── Tool Types ──────────────────────────────────────────────────────────────
+
+export type ToolType =
+  | "freehand"
+  | "line"
+  | "arrow"
+  | "rectangle"
+  | "circle"
+  | "polygon"
+  | "measure"
+  | "text";
+
+export type MeasureStyle = 0 | 1 | 2; // EXT_STYLE | INT_STYLE | PIPE_STYLE
+
+// ─── Geometry ────────────────────────────────────────────────────────────────
+
+/** Normalized point: x and y are in [0, 1] relative to canvas size */
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+// ─── Drawing Objects ─────────────────────────────────────────────────────────
+
+interface BaseDrawingObject {
+  id: string;
+  color: string;
+  lineWidth: number;
+}
+
+export interface FreehandObject extends BaseDrawingObject {
+  type: "freehand";
+  points: Point[];
+}
+
+export interface LineObject extends BaseDrawingObject {
+  type: "line";
+  from: Point;
+  to: Point;
+}
+
+export interface ArrowObject extends BaseDrawingObject {
+  type: "arrow";
+  from: Point;
+  to: Point;
+}
+
+export interface RectangleObject extends BaseDrawingObject {
+  type: "rectangle";
+  from: Point;
+  to: Point;
+  backgroundColor?: string;
+  backgroundAlpha?: number;
+}
+
+export interface CircleObject extends BaseDrawingObject {
+  type: "circle";
+  from: Point;
+  to: Point;
+  backgroundColor?: string;
+  backgroundAlpha?: number;
+}
+
+export interface MeasureObject extends BaseDrawingObject {
+  type: "measure";
+  from: Point;
+  to: Point;
+  text: string;
+  unit: string;
+  measureStyle: MeasureStyle;
+}
+
+export interface PolygonObject extends BaseDrawingObject {
+  type: "polygon";
+  points: Point[];
+  closed: boolean;
+  backgroundColor?: string;
+  backgroundAlpha?: number;
+}
+
+export interface TextObject extends BaseDrawingObject {
+  type: "text";
+  position: Point;
+  width: number;
+  height: number;
+  value: string;
+  backgroundColor?: string;
+  backgroundAlpha?: number;
+}
+
+export type DrawingObject =
+  | FreehandObject
+  | LineObject
+  | ArrowObject
+  | RectangleObject
+  | CircleObject
+  | PolygonObject
+  | MeasureObject
+  | TextObject;
+
+export type TwoPointShapeType =
+  | "line"
+  | "arrow"
+  | "rectangle"
+  | "circle"
+  | "measure";
+
+export type TwoPointObject =
+  | LineObject
+  | ArrowObject
+  | RectangleObject
+  | CircleObject
+  | MeasureObject;
+
+// ─── Undo ────────────────────────────────────────────────────────────────────
+
+export type UndoActionType = "add" | "delete" | "edit" | "move";
+
+export interface UndoAction {
+  type: UndoActionType;
+  objectId: string;
+  previousState?: DrawingObject;
+}
+
+// ─── Component Props ─────────────────────────────────────────────────────────
+
+export interface DrawingEditorProps {
+  /** URI string or require() for the background image */
+  imageSource: string | number;
+  /** Pre-existing objects to restore */
+  initialObjects?: DrawingObject[];
+  /** Maximum zoom level (default: 5) */
+  maxZoom?: number;
+  /** Called when the user saves */
+  onSave?: (result: {
+    image: Uint8Array;
+    objects: DrawingObject[];
+    canvasSize: Size;
+  }) => void;
+  /** Called when the user dismisses the editor */
+  onDismiss?: () => void;
+  /** Custom style for the root container */
+  style?: ViewStyle;
+  /** Override the default toolbar */
+  renderToolbar?: (props: ToolbarRenderProps) => ReactNode;
+  /** Override the default color palette */
+  renderColorPalette?: (props: ColorPaletteRenderProps) => ReactNode;
+}
+
+export interface ToolbarRenderProps {
+  currentTool: ToolType | null;
+  onSelectTool: (tool: ToolType | null) => void;
+  onUndo: () => void;
+  canUndo: boolean;
+  /** Whether the canvas is currently zoomed in (scale > 1) */
+  isZoomed: boolean;
+  /** Reset zoom to 1x */
+  onResetZoom: () => void;
+}
+
+export interface ColorPaletteRenderProps {
+  strokeColor: string;
+  fillColor: string | null;
+  fillAlpha: number;
+  onSelectStrokeColor: (color: string) => void;
+  onSelectFillColor: (color: string | null) => void;
+  onSelectFillAlpha: (alpha: number) => void;
+}
+
+export interface DrawingEditorRef {
+  undo: () => void;
+  setTool: (tool: ToolType) => void;
+  exportImage: () => Promise<Uint8Array | null>;
+  exportImageBase64: () => Promise<string | null>;
+  getObjects: () => DrawingObject[];
+  clearAll: () => void;
+  resetZoom: () => void;
+}