@archireport/react-native-drawing 0.2.0

package/src/renderers/ArrowRenderer.tsx

@@ -0,0 +1,123 @@
+import React, { useMemo } from "react";
+import { Path } from "@shopify/react-native-skia";
+import type { ArrowObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+interface ArrowRendererProps {
+  object: ArrowObject;
+  canvasSize: Size;
+}
+
+/**
+ * Build an arrow path.
+ * - lineWidth < 8: simple line + triangular head
+ * - lineWidth >= 8: filled body with wider triangular head
+ */
+function buildArrowPath(
+  fx: number,
+  fy: number,
+  tx: number,
+  ty: number,
+  lineWidth: number,
+): string {
+  const dx = tx - fx;
+  const dy = ty - fy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return "";
+
+  const angle = Math.atan2(dy, dx);
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+
+  if (lineWidth < 8) {
+    // Simple arrow: line + triangular head
+    const headLen = lineWidth * 2;
+    const headW = lineWidth * 2;
+
+    // Head points
+    const hx1 = tx - headLen * cos + (headW / 2) * sin;
+    const hy1 = ty - headLen * sin - (headW / 2) * cos;
+    const hx2 = tx - headLen * cos - (headW / 2) * sin;
+    const hy2 = ty - headLen * sin + (headW / 2) * cos;
+
+    return (
+      `M ${fx} ${fy} L ${tx} ${ty} ` +
+      `M ${tx} ${ty} L ${hx1} ${hy1} M ${tx} ${ty} L ${hx2} ${hy2}`
+    );
+  }
+
+  // Filled arrow: rectangular body + triangular head
+  const headLen = lineWidth * 3;
+  const headW = lineWidth * 3;
+  const bodyW = lineWidth;
+  const bodyLen = Math.max(0, len - headLen);
+
+  // Body rectangle (in local space: from origin going right)
+  // Then transformed via rotation
+  const halfBody = bodyW / 2;
+
+  // Points in local space (arrow points to the right)
+  const b1 = { x: 0, y: -halfBody };
+  const b2 = { x: bodyLen, y: -halfBody };
+  const b3 = { x: bodyLen, y: halfBody };
+  const b4 = { x: 0, y: halfBody };
+
+  // Head triangle in local space
+  const h1 = { x: bodyLen, y: -headW / 2 };
+  const h2 = { x: len, y: 0 };
+  const h3 = { x: bodyLen, y: headW / 2 };
+
+  // Transform function: rotate + translate
+  const transform = (p: { x: number; y: number }) => ({
+    x: fx + p.x * cos - p.y * sin,
+    y: fy + p.x * sin + p.y * cos,
+  });
+
+  const tb1 = transform(b1);
+  const tb2 = transform(b2);
+  const tb3 = transform(b3);
+  const tb4 = transform(b4);
+  const th1 = transform(h1);
+  const th2 = transform(h2);
+  const th3 = transform(h3);
+
+  return (
+    `M ${tb1.x} ${tb1.y} L ${tb2.x} ${tb2.y} L ${tb3.x} ${tb3.y} L ${tb4.x} ${tb4.y} Z ` +
+    `M ${th1.x} ${th1.y} L ${th2.x} ${th2.y} L ${th3.x} ${th3.y} Z`
+  );
+}
+
+export const ArrowRenderer = React.memo(function ArrowRenderer({
+  object,
+  canvasSize,
+}: ArrowRendererProps) {
+  const from = useMemo(
+    () => denormalize(object.from, canvasSize),
+    [object.from, canvasSize],
+  );
+  const to = useMemo(
+    () => denormalize(object.to, canvasSize),
+    [object.to, canvasSize],
+  );
+  const pathString = useMemo(
+    () => buildArrowPath(from.x, from.y, to.x, to.y, object.lineWidth),
+    [from, to, object.lineWidth],
+  );
+
+  if (!pathString) return null;
+
+  if (object.lineWidth < 8) {
+    return (
+      <Path
+        path={pathString}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    );
+  }
+
+  return <Path path={pathString} style="fill" color={object.color} />;
+});

package/src/renderers/CircleRenderer.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from "react";
+import { Oval, Group } from "@shopify/react-native-skia";
+import type { CircleObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+interface CircleRendererProps {
+  object: CircleObject;
+  canvasSize: Size;
+}
+
+export const CircleRenderer = React.memo(function CircleRenderer({
+  object,
+  canvasSize,
+}: CircleRendererProps) {
+  const from = useMemo(
+    () => denormalize(object.from, canvasSize),
+    [object.from, canvasSize],
+  );
+  const to = useMemo(
+    () => denormalize(object.to, canvasSize),
+    [object.to, canvasSize],
+  );
+
+  const rect = useMemo(() => {
+    const x = Math.min(from.x, to.x);
+    const y = Math.min(from.y, to.y);
+    const width = Math.abs(to.x - from.x);
+    const height = Math.abs(to.y - from.y);
+    return { x, y, width, height };
+  }, [from, to]);
+
+  const hasFill = object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill
+    ? object.backgroundColor!.replace(/[\d.]+\)$/, `${object.backgroundAlpha})`)
+    : undefined;
+
+  return (
+    <Group>
+      {fillColor && (
+        <Oval
+          x={rect.x}
+          y={rect.y}
+          width={rect.width}
+          height={rect.height}
+          color={fillColor}
+          style="fill"
+        />
+      )}
+      <Oval
+        x={rect.x}
+        y={rect.y}
+        width={rect.width}
+        height={rect.height}
+        color={object.color}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+      />
+    </Group>
+  );
+});

package/src/renderers/FreehandRenderer.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from "react";
+import { Path } from "@shopify/react-native-skia";
+import type { FreehandObject, Size } from "../types";
+import { denormalizePoints } from "../utils/coordinates";
+import { buildSmoothedPath } from "../utils/smoothing";
+
+interface FreehandRendererProps {
+  object: FreehandObject;
+  canvasSize: Size;
+}
+
+export const FreehandRenderer = React.memo(function FreehandRenderer({
+  object,
+  canvasSize,
+}: FreehandRendererProps) {
+  const pathString = useMemo(() => {
+    const denormalized = denormalizePoints(object.points, canvasSize);
+    return buildSmoothedPath(denormalized);
+  }, [object.points, canvasSize]);
+
+  if (!pathString) return null;
+
+  return (
+    <Path
+      path={pathString}
+      style="stroke"
+      strokeWidth={object.lineWidth}
+      color={object.color}
+      strokeCap="round"
+      strokeJoin="round"
+    />
+  );
+});

package/src/renderers/InProgressRenderer.tsx

@@ -0,0 +1,217 @@
+import React from "react";
+import {
+  Path,
+  Line as SkiaLine,
+  Rect,
+  Oval,
+  Group,
+  Skia,
+} from "@shopify/react-native-skia";
+import { useDerivedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import type { TwoPointShapeType } from "../types";
+import type { SkPath } from "@shopify/react-native-skia";
+
+// ─── Freehand In-Progress ────────────────────────────────────────────────────
+
+interface FreehandInProgressProps {
+  path: SharedValue<SkPath | null>;
+  color: SharedValue<string>;
+  lineWidth: SharedValue<number>;
+  isDrawing: SharedValue<boolean>;
+}
+
+// Empty path constant used as fallback when not drawing
+const EMPTY_PATH = Skia.Path.Make();
+
+export const FreehandInProgress = React.memo(function FreehandInProgress({
+  path,
+  color,
+  lineWidth,
+}: FreehandInProgressProps) {
+  const safePath = useDerivedValue(() => path.value ?? EMPTY_PATH);
+
+  return (
+    <Path
+      path={safePath}
+      style="stroke"
+      strokeWidth={lineWidth}
+      color={color}
+      strokeCap="round"
+      strokeJoin="round"
+    />
+  );
+});
+
+// ─── Polygon In-Progress ─────────────────────────────────────────────────────
+
+const POLYGON_VERTEX_RADIUS = 8;
+const POLYGON_VERTEX_COLOR = "rgba(0, 122, 255, 0.8)";
+
+interface PolygonInProgressProps {
+  pointsFlat: SharedValue<number[]>;
+  pointCount: SharedValue<number>;
+  isActive: SharedValue<boolean>;
+}
+
+export const PolygonInProgress = React.memo(function PolygonInProgress({
+  pointsFlat,
+  pointCount,
+}: PolygonInProgressProps) {
+  // Build a path of circles at each vertex using a derived path with addCircle
+  const verticesPath = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    const count = pointCount.value;
+    const flat = pointsFlat.value;
+    for (let i = 0; i < count; i++) {
+      const cx = flat[i * 2]!;
+      const cy = flat[i * 2 + 1]!;
+      p.addCircle(cx, cy, POLYGON_VERTEX_RADIUS);
+    }
+    return p;
+  });
+
+  return (
+    <Path
+      path={verticesPath}
+      style="fill"
+      color={POLYGON_VERTEX_COLOR}
+    />
+  );
+});
+
+// ─── Shape In-Progress ───────────────────────────────────────────────────────
+
+interface ShapeInProgressProps {
+  shapeType: TwoPointShapeType;
+  startX: SharedValue<number>;
+  startY: SharedValue<number>;
+  currentX: SharedValue<number>;
+  currentY: SharedValue<number>;
+  color: SharedValue<string>;
+  lineWidth: SharedValue<number>;
+  fillColor: SharedValue<string | null>;
+  fillAlpha: SharedValue<number>;
+  isDrawing: SharedValue<boolean>;
+}
+
+export const ShapeInProgress = React.memo(function ShapeInProgress({
+  shapeType,
+  startX,
+  startY,
+  currentX,
+  currentY,
+  color,
+  lineWidth,
+  fillColor,
+  fillAlpha,
+  isDrawing,
+}: ShapeInProgressProps) {
+  // Hide when not actively drawing (prevents ghost shapes when switching tools)
+  const opacity = useDerivedValue(() => (isDrawing.value ? 1 : 0));
+
+  // Derived values for the shape bounds
+  const x = useDerivedValue(() => Math.min(startX.value, currentX.value));
+  const y = useDerivedValue(() => Math.min(startY.value, currentY.value));
+  const width = useDerivedValue(() => Math.abs(currentX.value - startX.value));
+  const height = useDerivedValue(() => Math.abs(currentY.value - startY.value));
+
+  // Derived point values for Line-based shapes
+  const p1 = useDerivedValue(() => ({ x: startX.value, y: startY.value }));
+  const p2 = useDerivedValue(() => ({ x: currentX.value, y: currentY.value }));
+
+  const resolvedFillColor = useDerivedValue(() => {
+    if (!fillColor.value || !isDrawing.value) return "transparent";
+    return fillColor.value.replace(/[\d.]+\)$/, `${fillAlpha.value})`);
+  });
+
+  switch (shapeType) {
+    case "line":
+      return (
+        <Group opacity={opacity}>
+          <SkiaLine
+            p1={p1}
+            p2={p2}
+            color={color}
+            style="stroke"
+            strokeWidth={lineWidth}
+            strokeCap="round"
+          />
+        </Group>
+      );
+
+    case "arrow":
+      return (
+        <Group opacity={opacity}>
+          <SkiaLine
+            p1={p1}
+            p2={p2}
+            color={color}
+            style="stroke"
+            strokeWidth={lineWidth}
+            strokeCap="round"
+          />
+        </Group>
+      );
+
+    case "rectangle":
+      return (
+        <Group opacity={opacity}>
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            color={resolvedFillColor}
+            style="fill"
+          />
+          <Rect
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            color={color}
+            style="stroke"
+            strokeWidth={lineWidth}
+          />
+        </Group>
+      );
+
+    case "circle":
+      return (
+        <Group opacity={opacity}>
+          <Oval
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            color={resolvedFillColor}
+            style="fill"
+          />
+          <Oval
+            x={x}
+            y={y}
+            width={width}
+            height={height}
+            color={color}
+            style="stroke"
+            strokeWidth={lineWidth}
+          />
+        </Group>
+      );
+
+    case "measure":
+      return (
+        <Group opacity={opacity}>
+          <SkiaLine
+            p1={p1}
+            p2={p2}
+            color={color}
+            style="stroke"
+            strokeWidth={lineWidth}
+            strokeCap="round"
+          />
+        </Group>
+      );
+  }
+});

package/src/renderers/LineRenderer.tsx

@@ -0,0 +1,34 @@
+import React, { useMemo } from "react";
+import { Line as SkiaLine } from "@shopify/react-native-skia";
+import type { LineObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+interface LineRendererProps {
+  object: LineObject;
+  canvasSize: Size;
+}
+
+export const LineRenderer = React.memo(function LineRenderer({
+  object,
+  canvasSize,
+}: LineRendererProps) {
+  const from = useMemo(
+    () => denormalize(object.from, canvasSize),
+    [object.from, canvasSize],
+  );
+  const to = useMemo(
+    () => denormalize(object.to, canvasSize),
+    [object.to, canvasSize],
+  );
+
+  return (
+    <SkiaLine
+      p1={from}
+      p2={to}
+      color={object.color}
+      style="stroke"
+      strokeWidth={object.lineWidth}
+      strokeCap="round"
+    />
+  );
+});

package/src/renderers/MeasurementRenderer.tsx

@@ -0,0 +1,179 @@
+import React, { useMemo } from "react";
+import { Platform } from "react-native";
+import { Path, Group, Text, matchFont } from "@shopify/react-native-skia";
+import type { MeasureObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+const FONT_FAMILY = Platform.OS === "android" ? "sans-serif" : "System";
+
+interface MeasurementRendererProps {
+  object: MeasureObject;
+  canvasSize: Size;
+}
+
+const TEXT_GAP_PADDING = 6;
+
+/**
+ * Build a measurement / cotation path with a gap in the middle for the label.
+ * - Two inward-pointing arrowheads
+ * - Perpendicular extension lines at endpoints
+ * - Main line split in two halves around a central gap
+ */
+function buildMeasurementPath(
+  fx: number,
+  fy: number,
+  tx: number,
+  ty: number,
+  lineWidth: number,
+  style: 0 | 1 | 2,
+  gapHalfWidth: number,
+): string {
+  const dx = tx - fx;
+  const dy = ty - fy;
+  const len = Math.sqrt(dx * dx + dy * dy);
+  if (len === 0) return "";
+
+  const angle = Math.atan2(dy, dx);
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const perpCos = Math.cos(angle + Math.PI / 2);
+  const perpSin = Math.sin(angle + Math.PI / 2);
+
+  const headLen = Math.min(lineWidth * 3, len / 4);
+  const headW = lineWidth * 2;
+  const extLen = lineWidth * 4;
+
+  // Midpoint
+  const mx = (fx + tx) / 2;
+  const my = (fy + ty) / 2;
+
+  let svg = "";
+
+  // Main line — split into two segments with gap
+  if (gapHalfWidth > 0 && len > gapHalfWidth * 2) {
+    const gapStartX = mx - gapHalfWidth * cos;
+    const gapStartY = my - gapHalfWidth * sin;
+    const gapEndX = mx + gapHalfWidth * cos;
+    const gapEndY = my + gapHalfWidth * sin;
+    svg += `M ${fx} ${fy} L ${gapStartX} ${gapStartY} `;
+    svg += `M ${gapEndX} ${gapEndY} L ${tx} ${ty} `;
+  } else {
+    svg += `M ${fx} ${fy} L ${tx} ${ty} `;
+  }
+
+  // Arrowhead at "from" pointing toward "to"
+  const ah1x = fx + headLen * cos + (headW / 2) * perpCos;
+  const ah1y = fy + headLen * sin + (headW / 2) * perpSin;
+  const ah2x = fx + headLen * cos - (headW / 2) * perpCos;
+  const ah2y = fy + headLen * sin - (headW / 2) * perpSin;
+  svg += `M ${fx} ${fy} L ${ah1x} ${ah1y} M ${fx} ${fy} L ${ah2x} ${ah2y} `;
+
+  // Arrowhead at "to" pointing toward "from"
+  const bh1x = tx - headLen * cos + (headW / 2) * perpCos;
+  const bh1y = ty - headLen * sin + (headW / 2) * perpSin;
+  const bh2x = tx - headLen * cos - (headW / 2) * perpCos;
+  const bh2y = ty - headLen * sin - (headW / 2) * perpSin;
+  svg += `M ${tx} ${ty} L ${bh1x} ${bh1y} M ${tx} ${ty} L ${bh2x} ${bh2y} `;
+
+  // Extension lines (perpendicular to the main line at each endpoint)
+  if (style === 0 || style === 2) {
+    svg += `M ${fx + extLen * perpCos} ${fy + extLen * perpSin} L ${fx - extLen * perpCos} ${fy - extLen * perpSin} `;
+    svg += `M ${tx + extLen * perpCos} ${ty + extLen * perpSin} L ${tx - extLen * perpCos} ${ty - extLen * perpSin} `;
+  }
+
+  return svg;
+}
+
+export const MeasurementRenderer = React.memo(function MeasurementRenderer({
+  object,
+  canvasSize,
+}: MeasurementRendererProps) {
+  const from = useMemo(
+    () => denormalize(object.from, canvasSize),
+    [object.from, canvasSize],
+  );
+  const to = useMemo(
+    () => denormalize(object.to, canvasSize),
+    [object.to, canvasSize],
+  );
+
+  const labelText = `${object.text}${object.unit}`;
+  const hasLabel = object.text.length > 0;
+
+  const fontSize = Math.max(14, object.lineWidth * 3);
+  const font = useMemo(
+    () => matchFont({ fontFamily: FONT_FAMILY, fontSize }),
+    [fontSize],
+  );
+
+  // Measure text width for the gap
+  const textWidth = useMemo(() => {
+    if (!hasLabel) return 0;
+    return font.getTextWidth(labelText);
+  }, [font, labelText, hasLabel]);
+
+  const gapHalfWidth = hasLabel ? textWidth / 2 + TEXT_GAP_PADDING : 0;
+
+  const pathString = useMemo(
+    () =>
+      buildMeasurementPath(
+        from.x,
+        from.y,
+        to.x,
+        to.y,
+        object.lineWidth,
+        object.measureStyle,
+        gapHalfWidth,
+      ),
+    [from, to, object.lineWidth, object.measureStyle, gapHalfWidth],
+  );
+
+  // Center of the line
+  const midX = (from.x + to.x) / 2;
+  const midY = (from.y + to.y) / 2;
+
+  // Angle of the line — keep text readable (never upside down)
+  const rawAngle = Math.atan2(to.y - from.y, to.x - from.x);
+  const angle =
+    rawAngle > Math.PI / 2
+      ? rawAngle - Math.PI
+      : rawAngle < -Math.PI / 2
+        ? rawAngle + Math.PI
+        : rawAngle;
+
+  // Position text centered at origin (will be transformed to midpoint)
+  const textX = -textWidth / 2;
+  const textY = fontSize / 3;
+
+  if (!pathString) return null;
+
+  return (
+    <Group>
+      <Path
+        path={pathString}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+      {hasLabel && (
+        <Group
+          transform={[
+            { translateX: midX },
+            { translateY: midY },
+            { rotate: angle },
+          ]}
+        >
+          <Text
+            x={textX}
+            y={textY}
+            text={labelText}
+            font={font}
+            color={object.color}
+          />
+        </Group>
+      )}
+    </Group>
+  );
+});

package/src/renderers/ObjectRenderer.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import type { DrawingObject, Size } from "../types";
+import { FreehandRenderer } from "./FreehandRenderer";
+import { LineRenderer } from "./LineRenderer";
+import { ArrowRenderer } from "./ArrowRenderer";
+import { RectRenderer } from "./RectRenderer";
+import { CircleRenderer } from "./CircleRenderer";
+import { PolygonRenderer } from "./PolygonRenderer";
+import { MeasurementRenderer } from "./MeasurementRenderer";
+
+interface ObjectRendererProps {
+  object: DrawingObject;
+  canvasSize: Size;
+}
+
+/**
+ * Routes a drawing object to its specialized renderer component.
+ */
+export const ObjectRenderer = React.memo(function ObjectRenderer({
+  object,
+  canvasSize,
+}: ObjectRendererProps) {
+  switch (object.type) {
+    case "freehand":
+      return <FreehandRenderer object={object} canvasSize={canvasSize} />;
+    case "line":
+      return <LineRenderer object={object} canvasSize={canvasSize} />;
+    case "arrow":
+      return <ArrowRenderer object={object} canvasSize={canvasSize} />;
+    case "rectangle":
+      return <RectRenderer object={object} canvasSize={canvasSize} />;
+    case "circle":
+      return <CircleRenderer object={object} canvasSize={canvasSize} />;
+    case "polygon":
+      return <PolygonRenderer object={object} canvasSize={canvasSize} />;
+    case "measure":
+      return <MeasurementRenderer object={object} canvasSize={canvasSize} />;
+    case "text":
+      // Text objects are rendered outside the Skia Canvas as native RN views
+      return null;
+  }
+});