@archireport/react-native-drawing 0.2.0

package/src/utils/colors.ts

@@ -0,0 +1,98 @@
+/** Preset color palette matching the ArchiReport iOS spec */
+export const PRESET_COLORS = [
+  "rgba(255, 79, 61, 1)", // Red
+  "rgba(94, 112, 255, 1)", // Blue
+  "rgba(66, 224, 125, 1)", // Green
+  "rgba(255, 163, 69, 1)", // Orange
+  "rgba(46, 46, 46, 1)", // Black (dark)
+  "rgba(255, 255, 255, 1)", // White
+] as const;
+
+/** Extended color palette grouped by hue families for a more predictable picker layout */
+export const EXTENDED_COLOR_GROUPS: readonly string[][] = [
+  [
+    // Reds / corals / pinks
+    "rgba(255, 121, 107, 1)",
+    "rgba(255, 79, 61, 1)",
+    "rgba(239, 68, 68, 1)",
+    "rgba(220, 38, 38, 1)",
+    "rgba(183, 28, 28, 1)",
+    "rgba(255, 99, 132, 1)",
+    "rgba(244, 63, 94, 1)",
+    "rgba(219, 39, 119, 1)",
+  ],
+  [
+    // Oranges / ambers / yellows
+    "rgba(255, 190, 92, 1)",
+    "rgba(255, 163, 69, 1)",
+    "rgba(249, 115, 22, 1)",
+    "rgba(234, 88, 12, 1)",
+    "rgba(217, 119, 6, 1)",
+    "rgba(250, 204, 21, 1)",
+    "rgba(234, 179, 8, 1)",
+    "rgba(202, 138, 4, 1)",
+  ],
+  [
+    // Greens
+    "rgba(134, 239, 172, 1)",
+    "rgba(66, 224, 125, 1)",
+    "rgba(74, 222, 128, 1)",
+    "rgba(34, 197, 94, 1)",
+    "rgba(22, 163, 74, 1)",
+    "rgba(45, 212, 191, 1)",
+    "rgba(16, 185, 129, 1)",
+    "rgba(5, 150, 105, 1)",
+  ],
+  [
+    // Teals / cyans
+    "rgba(94, 234, 212, 1)",
+    "rgba(20, 184, 166, 1)",
+    "rgba(13, 148, 136, 1)",
+    "rgba(8, 145, 178, 1)",
+    "rgba(34, 211, 238, 1)",
+    "rgba(6, 182, 212, 1)",
+    "rgba(14, 165, 233, 1)",
+    "rgba(14, 116, 144, 1)",
+  ],
+  [
+    // Blues / indigos
+    "rgba(129, 140, 248, 1)",
+    "rgba(94, 112, 255, 1)",
+    "rgba(96, 165, 250, 1)",
+    "rgba(59, 130, 246, 1)",
+    "rgba(37, 99, 235, 1)",
+    "rgba(29, 78, 216, 1)",
+    "rgba(99, 102, 241, 1)",
+    "rgba(49, 46, 129, 1)",
+  ],
+  [
+    // Purples / violets
+    "rgba(196, 181, 253, 1)",
+    "rgba(139, 92, 246, 1)",
+    "rgba(124, 58, 237, 1)",
+    "rgba(109, 40, 217, 1)",
+    "rgba(168, 85, 247, 1)",
+    "rgba(147, 51, 234, 1)",
+    "rgba(126, 34, 206, 1)",
+    "rgba(107, 33, 168, 1)",
+  ],
+  [
+    // Neutrals
+    "rgba(255, 255, 255, 1)",
+    "rgba(244, 244, 245, 1)",
+    "rgba(212, 212, 216, 1)",
+    "rgba(161, 161, 170, 1)",
+    "rgba(113, 113, 122, 1)",
+    "rgba(63, 63, 70, 1)",
+    "rgba(46, 46, 46, 1)",
+    "rgba(24, 24, 27, 1)",
+  ],
+] as const;
+
+/** Flat version kept for compatibility with existing imports */
+export const EXTENDED_COLORS: string[] = EXTENDED_COLOR_GROUPS.flat();
+
+export const DEFAULT_STROKE_COLOR = PRESET_COLORS[0]!;
+export const DEFAULT_FILL_ALPHA = 0.5;
+export const DEFAULT_LINE_WIDTH = 4;
+export const DEFAULT_MEASURE_UNIT = "m";

package/src/utils/coordinates.ts

@@ -0,0 +1,75 @@
+import type { Point, Size } from "../types";
+
+/**
+ * Convert pixel coordinates to normalized [0,1] range.
+ */
+export function normalize(pixel: Point, canvasSize: Size): Point {
+  if (canvasSize.width === 0 || canvasSize.height === 0) {
+    return { x: 0, y: 0 };
+  }
+  return {
+    x: pixel.x / canvasSize.width,
+    y: pixel.y / canvasSize.height,
+  };
+}
+
+/**
+ * Convert normalized [0,1] coordinates to pixel coordinates.
+ */
+export function denormalize(normalized: Point, canvasSize: Size): Point {
+  return {
+    x: normalized.x * canvasSize.width,
+    y: normalized.y * canvasSize.height,
+  };
+}
+
+/**
+ * Normalize an array of pixel points.
+ */
+export function normalizePoints(pixels: Point[], canvasSize: Size): Point[] {
+  return pixels.map((p) => normalize(p, canvasSize));
+}
+
+/**
+ * Denormalize an array of normalized points.
+ */
+export function denormalizePoints(
+  normalized: Point[],
+  canvasSize: Size,
+): Point[] {
+  return normalized.map((p) => denormalize(p, canvasSize));
+}
+
+/**
+ * Distance between two points (in whatever coordinate space they share).
+ */
+export function distance(a: Point, b: Point): number {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+/**
+ * Angle in radians from point a to point b.
+ */
+export function angle(a: Point, b: Point): number {
+  return Math.atan2(b.y - a.y, b.x - a.x);
+}
+
+/**
+ * Convert screen coordinates to canvas coordinates by inverting the viewport transform.
+ * Must be called from a worklet context.
+ */
+export function screenToCanvas(
+  screenX: number,
+  screenY: number,
+  viewScale: number,
+  viewTranslateX: number,
+  viewTranslateY: number,
+): { x: number; y: number } {
+  "worklet";
+  return {
+    x: (screenX - viewTranslateX) / viewScale,
+    y: (screenY - viewTranslateY) / viewScale,
+  };
+}

package/src/utils/hitTesting.ts

@@ -0,0 +1,242 @@
+import type {
+  DrawingObject,
+  FreehandObject,
+  PolygonObject,
+  TwoPointObject,
+  TextObject,
+  Point,
+  Size,
+} from "../types";
+import { denormalize, denormalizePoints } from "./coordinates";
+import { buildSmoothedPath } from "./smoothing";
+
+const HIT_PADDING = 20; // pixels tolerance for hit-testing lines/paths
+
+/**
+ * Test if a pixel-space tap point hits a drawing object.
+ * All object coordinates are normalized and must be denormalized with canvasSize.
+ *
+ * Returns true if the point is within hit range of the object.
+ */
+export function hitTestObject(
+  object: DrawingObject,
+  tapPoint: Point,
+  canvasSize: Size,
+): boolean {
+  switch (object.type) {
+    case "freehand":
+      return hitTestFreehand(object, tapPoint, canvasSize);
+    case "line":
+    case "arrow":
+    case "measure":
+      return hitTestLine(object, tapPoint, canvasSize);
+    case "rectangle":
+      return hitTestRect(object, tapPoint, canvasSize);
+    case "circle":
+      return hitTestEllipse(object, tapPoint, canvasSize);
+    case "polygon":
+      return hitTestPolygon(object, tapPoint, canvasSize);
+    case "text":
+      return hitTestText(object, tapPoint, canvasSize);
+  }
+}
+
+function hitTestFreehand(
+  object: FreehandObject,
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const points = denormalizePoints(object.points, canvasSize);
+  const padding = HIT_PADDING + object.lineWidth / 2;
+
+  // Check distance to each segment of the smoothed path
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i]!;
+    const b = points[i + 1]!;
+    if (distanceToSegment(tap, a, b) < padding) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function hitTestLine(
+  object: TwoPointObject,
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const from = denormalize(object.from, canvasSize);
+  const to = denormalize(object.to, canvasSize);
+  const padding = HIT_PADDING + object.lineWidth / 2;
+  return distanceToSegment(tap, from, to) < padding;
+}
+
+function hitTestRect(
+  object: DrawingObject & { from: Point; to: Point },
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const from = denormalize(object.from, canvasSize);
+  const to = denormalize(object.to, canvasSize);
+  const padding = HIT_PADDING;
+
+  const minX = Math.min(from.x, to.x) - padding;
+  const maxX = Math.max(from.x, to.x) + padding;
+  const minY = Math.min(from.y, to.y) - padding;
+  const maxY = Math.max(from.y, to.y) + padding;
+
+  // If has fill, hit inside the rect
+  if ("backgroundColor" in object && object.backgroundColor) {
+    return tap.x >= minX && tap.x <= maxX && tap.y >= minY && tap.y <= maxY;
+  }
+
+  // Otherwise, hit the border only
+  const innerMinX = Math.min(from.x, to.x) + padding;
+  const innerMaxX = Math.max(from.x, to.x) - padding;
+  const innerMinY = Math.min(from.y, to.y) + padding;
+  const innerMaxY = Math.max(from.y, to.y) - padding;
+
+  const inOuter =
+    tap.x >= minX && tap.x <= maxX && tap.y >= minY && tap.y <= maxY;
+  const inInner =
+    tap.x >= innerMinX &&
+    tap.x <= innerMaxX &&
+    tap.y >= innerMinY &&
+    tap.y <= innerMaxY;
+
+  return inOuter && !inInner;
+}
+
+function hitTestEllipse(
+  object: DrawingObject & { from: Point; to: Point },
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const from = denormalize(object.from, canvasSize);
+  const to = denormalize(object.to, canvasSize);
+  const cx = (from.x + to.x) / 2;
+  const cy = (from.y + to.y) / 2;
+  const rx = Math.abs(to.x - from.x) / 2;
+  const ry = Math.abs(to.y - from.y) / 2;
+
+  if (rx === 0 || ry === 0) return false;
+
+  const dx = tap.x - cx;
+  const dy = tap.y - cy;
+
+  // Normalized distance from center
+  // If has fill, hit inside the ellipse
+  if ("backgroundColor" in object && object.backgroundColor) {
+    const outerRx = rx + HIT_PADDING;
+    const outerRy = ry + HIT_PADDING;
+    return (
+      (dx * dx) / (outerRx * outerRx) + (dy * dy) / (outerRy * outerRy) <= 1
+    );
+  }
+
+  // Otherwise, hit the border ring
+  const padding =
+    HIT_PADDING +
+    ("lineWidth" in object
+      ? (object as { lineWidth: number }).lineWidth / 2
+      : 2);
+  const outerRx = rx + padding;
+  const outerRy = ry + padding;
+  const innerRx = Math.max(0, rx - padding);
+  const innerRy = Math.max(0, ry - padding);
+
+  const outerDist =
+    (dx * dx) / (outerRx * outerRx) + (dy * dy) / (outerRy * outerRy);
+  const innerDist =
+    innerRx > 0 && innerRy > 0
+      ? (dx * dx) / (innerRx * innerRx) + (dy * dy) / (innerRy * innerRy)
+      : Infinity;
+
+  return outerDist <= 1 && innerDist >= 1;
+}
+
+function hitTestText(
+  object: TextObject,
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const pos = denormalize(object.position, canvasSize);
+  const w = object.width * canvasSize.width;
+  const h = object.height * canvasSize.height;
+
+  return (
+    tap.x >= pos.x && tap.x <= pos.x + w && tap.y >= pos.y && tap.y <= pos.y + h
+  );
+}
+
+function hitTestPolygon(
+  object: PolygonObject,
+  tap: Point,
+  canvasSize: Size,
+): boolean {
+  const points = denormalizePoints(object.points, canvasSize);
+  if (points.length < 2) return false;
+  const padding = HIT_PADDING + object.lineWidth / 2;
+
+  // If filled and closed, check if point is inside the polygon
+  if (object.closed && object.backgroundColor) {
+    if (pointInPolygon(tap, points)) return true;
+  }
+
+  // Check distance to each segment (including closing segment if closed)
+  const len = points.length;
+  for (let i = 0; i < len - 1; i++) {
+    if (distanceToSegment(tap, points[i]!, points[i + 1]!) < padding) {
+      return true;
+    }
+  }
+  // Closing segment
+  if (object.closed && len >= 3) {
+    if (distanceToSegment(tap, points[len - 1]!, points[0]!) < padding) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/** Ray-casting point-in-polygon test */
+function pointInPolygon(p: Point, polygon: Point[]): boolean {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i]!.x;
+    const yi = polygon[i]!.y;
+    const xj = polygon[j]!.x;
+    const yj = polygon[j]!.y;
+    const intersect =
+      yi > p.y !== yj > p.y && p.x < ((xj - xi) * (p.y - yi)) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+
+/**
+ * Returns the minimum distance from point p to segment [a, b].
+ */
+function distanceToSegment(p: Point, a: Point, b: Point): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  const lenSq = dx * dx + dy * dy;
+
+  if (lenSq === 0) {
+    // a and b are the same point
+    return Math.sqrt((p.x - a.x) ** 2 + (p.y - a.y) ** 2);
+  }
+
+  let t = ((p.x - a.x) * dx + (p.y - a.y) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+
+  const projX = a.x + t * dx;
+  const projY = a.y + t * dy;
+
+  return Math.sqrt((p.x - projX) ** 2 + (p.y - projY) ** 2);
+}
+
+/**
+ * Export for use in selection gesture calculations.
+ */
+export { buildSmoothedPath, distanceToSegment };

package/src/utils/serialization.ts

@@ -0,0 +1,45 @@
+import type { DrawingObject, Size } from "../types";
+
+/**
+ * Serialize drawing state to a JSON-compatible structure.
+ */
+export function serializeObjects(
+  objects: DrawingObject[],
+  canvasSize: Size,
+): string {
+  return JSON.stringify({
+    version: 1,
+    canvasSize,
+    objects,
+  });
+}
+
+/**
+ * Deserialize drawing state from JSON.
+ */
+export function deserializeObjects(json: string): {
+  objects: DrawingObject[];
+  canvasSize: Size;
+} | null {
+  try {
+    const data = JSON.parse(json) as {
+      version?: number;
+      canvasSize?: Size;
+      objects?: DrawingObject[];
+    };
+    if (!data.objects || !data.canvasSize) return null;
+    return {
+      objects: data.objects,
+      canvasSize: data.canvasSize,
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Generate a unique ID for drawing objects.
+ */
+export function generateId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2, 8);
+}

package/src/utils/shapeDetection.ts

@@ -0,0 +1,160 @@
+import type { Point } from "../types";
+
+/**
+ * Count the number of direction changes (inflections) in a series of points.
+ * An inflection is when the general direction of movement reverses or sharply changes.
+ */
+function countInflections(points: Point[], startIndex = 0): number {
+  if (points.length < 3) return 0;
+
+  let inflections = 0;
+  for (let i = Math.max(startIndex, 1); i < points.length - 1; i++) {
+    const prev = points[i - 1]!;
+    const curr = points[i]!;
+    const next = points[i + 1]!;
+
+    const dx1 = curr.x - prev.x;
+    const dy1 = curr.y - prev.y;
+    const dx2 = next.x - curr.x;
+    const dy2 = next.y - curr.y;
+
+    // Cross product sign change indicates direction change
+    const cross = dx1 * dy2 - dy1 * dx2;
+    if (i > Math.max(startIndex, 1)) {
+      const prevPrev = points[i - 2]!;
+      const pdx1 = prev.x - prevPrev.x;
+      const pdy1 = prev.y - prevPrev.y;
+      const prevCross = pdx1 * dy1 - pdy1 * dx1;
+      if (prevCross * cross < 0) {
+        inflections++;
+      }
+    }
+  }
+  return inflections;
+}
+
+/**
+ * Compute total angle traversed by the path.
+ * Used for circle detection (should be ~2π for a full circle).
+ */
+function totalAngleTraversed(points: Point[]): number {
+  if (points.length < 3) return 0;
+
+  let totalAngle = 0;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1]!;
+    const curr = points[i]!;
+    const next = points[i + 1]!;
+
+    const a1 = Math.atan2(curr.y - prev.y, curr.x - prev.x);
+    const a2 = Math.atan2(next.y - curr.y, next.x - curr.x);
+    let delta = a2 - a1;
+
+    // Normalize to [-π, π]
+    while (delta > Math.PI) delta -= 2 * Math.PI;
+    while (delta < -Math.PI) delta += 2 * Math.PI;
+
+    totalAngle += delta;
+  }
+  return totalAngle;
+}
+
+function dist(a: Point, b: Point): number {
+  const dx = a.x - b.x;
+  const dy = a.y - b.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function boundingRect(points: Point[]): {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+} {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const p of points) {
+    if (p.x < minX) minX = p.x;
+    if (p.y < minY) minY = p.y;
+    if (p.x > maxX) maxX = p.x;
+    if (p.y > maxY) maxY = p.y;
+  }
+
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY,
+  };
+}
+
+export type DetectedShape =
+  | { type: "circle"; from: Point; to: Point }
+  | { type: "rectangle"; from: Point; to: Point }
+  | { type: "line"; from: Point; to: Point }
+  | null;
+
+/**
+ * Attempt to detect a geometric shape from freehand points.
+ * Returns the detected shape or null if no shape is recognized.
+ *
+ * Points should be in pixel coordinates. Duration in milliseconds.
+ */
+export function detectShape(
+  points: Point[],
+  durationMs: number,
+): DetectedShape {
+  if (points.length < 5) return null;
+
+  const first = points[0]!;
+  const last = points[points.length - 1]!;
+  const startEndDist = dist(first, last);
+  const inflections = countInflections(points);
+
+  // ── Circle detection ──
+  // Duration < 1.5s, inflections ≤ 5, distance start↔end < threshold,
+  // total angle ≈ 2π (±45°)
+  if (durationMs < 1500 && inflections <= 5 && startEndDist < 150) {
+    const totalAngle = Math.abs(totalAngleTraversed(points));
+    const twoPi = 2 * Math.PI;
+    const tolerance = Math.PI / 4; // 45°
+
+    if (Math.abs(totalAngle - twoPi) < tolerance) {
+      const bbox = boundingRect(points);
+      return {
+        type: "circle",
+        from: { x: bbox.x, y: bbox.y },
+        to: { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+      };
+    }
+  }
+
+  // ── Rectangle detection ──
+  // Duration < 12s, inflections ≤ 15, distance start↔end < threshold
+  if (durationMs < 12000 && inflections <= 15 && startEndDist < 30) {
+    const bbox = boundingRect(points);
+    return {
+      type: "rectangle",
+      from: { x: bbox.x, y: bbox.y },
+      to: { x: bbox.x + bbox.width, y: bbox.y + bbox.height },
+    };
+  }
+
+  // ── Line detection ──
+  // Duration < 4s, inflections ≤ 4 (checked from 11th point onward)
+  if (durationMs < 4000 && points.length >= 11) {
+    const lineInflections = countInflections(points, 10);
+    if (lineInflections <= 4) {
+      return {
+        type: "line",
+        from: first,
+        to: last,
+      };
+    }
+  }
+
+  return null;
+}

package/src/utils/smoothing.ts

@@ -0,0 +1,84 @@
+import type { Point } from "../types";
+
+/**
+ * Build a smoothed SVG path string from an array of pixel-space points
+ * using quadratic Bezier curves through midpoints.
+ *
+ * This is the standard "midpoint smoothing" algorithm for touch-based drawing:
+ * each raw point becomes a control point, and the curve passes through the
+ * midpoints between consecutive raw points.
+ */
+export function buildSmoothedPath(points: Point[]): string {
+  const n = points.length;
+  if (n === 0) return "";
+  if (n === 1) return `M ${points[0]!.x} ${points[0]!.y}`;
+
+  const first = points[0]!;
+
+  if (n === 2) {
+    const second = points[1]!;
+    return `M ${first.x} ${first.y} L ${second.x} ${second.y}`;
+  }
+
+  // Start at first point
+  const parts: string[] = [`M ${first.x} ${first.y}`];
+
+  // Line to first midpoint
+  const p1 = points[1]!;
+  const m0x = (first.x + p1.x) / 2;
+  const m0y = (first.y + p1.y) / 2;
+  parts.push(`L ${m0x} ${m0y}`);
+
+  // Quadratic curves through midpoints
+  for (let i = 1; i < n - 1; i++) {
+    const cp = points[i]!;
+    const next = points[i + 1]!;
+    const mx = (cp.x + next.x) / 2;
+    const my = (cp.y + next.y) / 2;
+    parts.push(`Q ${cp.x} ${cp.y} ${mx} ${my}`);
+  }
+
+  // Line to last point
+  const last = points[n - 1]!;
+  parts.push(`L ${last.x} ${last.y}`);
+
+  return parts.join(" ");
+}
+
+/**
+ * Build a smoothed SVG path from a flat array [x0, y0, x1, y1, ...].
+ * Used in worklets where Point objects aren't available.
+ */
+export function buildSmoothedPathFromFlat(coords: number[]): string {
+  "worklet";
+  const n = coords.length / 2;
+  if (n < 1) return "";
+  if (n === 1) return `M ${coords[0]} ${coords[1]}`;
+
+  if (n === 2) {
+    return `M ${coords[0]} ${coords[1]} L ${coords[2]} ${coords[3]}`;
+  }
+
+  let svg = `M ${coords[0]} ${coords[1]}`;
+
+  // Line to first midpoint
+  const m0x = (coords[0]! + coords[2]!) / 2;
+  const m0y = (coords[1]! + coords[3]!) / 2;
+  svg += ` L ${m0x} ${m0y}`;
+
+  // Quadratic curves through midpoints
+  for (let i = 1; i < n - 1; i++) {
+    const cx = coords[i * 2]!;
+    const cy = coords[i * 2 + 1]!;
+    const nx = coords[(i + 1) * 2]!;
+    const ny = coords[(i + 1) * 2 + 1]!;
+    const mx = (cx + nx) / 2;
+    const my = (cy + ny) / 2;
+    svg += ` Q ${cx} ${cy} ${mx} ${my}`;
+  }
+
+  // Line to last point
+  svg += ` L ${coords[(n - 1) * 2]} ${coords[(n - 1) * 2 + 1]}`;
+
+  return svg;
+}