@archireport/react-native-drawing 0.2.0

package/src/renderers/SelectedObjectRenderer.tsx

@@ -0,0 +1,738 @@
+import React, { useEffect, useMemo } from "react";
+import { Platform } from "react-native";
+import {
+  Line as SkiaLine,
+  Rect,
+  Oval,
+  Group,
+  Path,
+  Skia,
+  Text,
+  matchFont,
+} from "@shopify/react-native-skia";
+import { useDerivedValue } from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
+import type { DrawingObject, TwoPointObject, FreehandObject, PolygonObject, MeasureObject, Size } from "../types";
+import { denormalize, denormalizePoints } from "../utils/coordinates";
+import { buildSmoothedPath } from "../utils/smoothing";
+
+const FONT_FAMILY = Platform.OS === "android" ? "sans-serif" : "System";
+const TEXT_GAP_PADDING = 6;
+
+interface SelectedObjectRendererProps {
+  object: DrawingObject;
+  canvasSize: Size;
+  isDragging: SharedValue<boolean>;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+}
+
+/**
+ * Renders the selected object with animated positions that follow
+ * the drag gesture in real-time — both for move and resize.
+ */
+export const SelectedObjectRenderer = React.memo(
+  function SelectedObjectRenderer({
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  }: SelectedObjectRendererProps) {
+    // When the store commits new positions after a drag, the component
+    // re-renders with the updated object. Reset drag state at that point
+    // so the transition from "base + offset" to "newBase + 0" is atomic.
+    useEffect(() => {
+      if (isDragging.value) {
+        isDragging.value = false;
+        dragOffsetX.value = 0;
+        dragOffsetY.value = 0;
+        draggingAnchorIndex.value = -1;
+      }
+    }, [object, isDragging, dragOffsetX, dragOffsetY, draggingAnchorIndex]);
+
+    switch (object.type) {
+      case "line":
+        return (
+          <AnimatedLine
+            object={object as TwoPointObject}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "measure":
+        return (
+          <AnimatedMeasurement
+            object={object as MeasureObject}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "arrow":
+        return (
+          <AnimatedArrow
+            object={object as TwoPointObject}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "rectangle":
+        return (
+          <AnimatedRect
+            object={object as TwoPointObject & { backgroundColor?: string; backgroundAlpha?: number }}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "circle":
+        return (
+          <AnimatedOval
+            object={object as TwoPointObject & { backgroundColor?: string; backgroundAlpha?: number }}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "freehand":
+        return (
+          <AnimatedFreehand
+            object={object as FreehandObject}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "polygon":
+        return (
+          <AnimatedPolygon
+            object={object as PolygonObject}
+            canvasSize={canvasSize}
+            isDragging={isDragging}
+            draggingAnchorIndex={draggingAnchorIndex}
+            dragOffsetX={dragOffsetX}
+            dragOffsetY={dragOffsetY}
+          />
+        );
+      case "text":
+        return null;
+    }
+  },
+);
+
+// ─── Shared types ────────────────────────────────────────────────────────────
+
+interface AnimatedShapeProps {
+  object: TwoPointObject;
+  canvasSize: Size;
+  isDragging: SharedValue<boolean>;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+}
+
+/**
+ * Hook: compute animated from/to pixel positions for a two-point object.
+ * - anchor -1 (move): both points shift
+ * - anchor 0: only `from` shifts
+ * - anchor 1: only `to` shifts
+ */
+function useAnimatedEndpoints(
+  object: TwoPointObject,
+  canvasSize: Size,
+  isDragging: SharedValue<boolean>,
+  draggingAnchorIndex: SharedValue<number>,
+  dragOffsetX: SharedValue<number>,
+  dragOffsetY: SharedValue<number>,
+) {
+  const baseFrom = useMemo(
+    () => denormalize(object.from, canvasSize),
+    [object.from, canvasSize],
+  );
+  const baseTo = useMemo(
+    () => denormalize(object.to, canvasSize),
+    [object.to, canvasSize],
+  );
+
+  const fromX = useDerivedValue(() => {
+    if (!isDragging.value) return baseFrom.x;
+    // Move or resize anchor 0 → from moves
+    if (draggingAnchorIndex.value <= 0) return baseFrom.x + dragOffsetX.value;
+    return baseFrom.x;
+  });
+  const fromY = useDerivedValue(() => {
+    if (!isDragging.value) return baseFrom.y;
+    if (draggingAnchorIndex.value <= 0) return baseFrom.y + dragOffsetY.value;
+    return baseFrom.y;
+  });
+  const toX = useDerivedValue(() => {
+    if (!isDragging.value) return baseTo.x;
+    // Move or resize anchor 1 → to moves
+    if (draggingAnchorIndex.value < 0 || draggingAnchorIndex.value === 1)
+      return baseTo.x + dragOffsetX.value;
+    return baseTo.x;
+  });
+  const toY = useDerivedValue(() => {
+    if (!isDragging.value) return baseTo.y;
+    if (draggingAnchorIndex.value < 0 || draggingAnchorIndex.value === 1)
+      return baseTo.y + dragOffsetY.value;
+    return baseTo.y;
+  });
+
+  return { fromX, fromY, toX, toY };
+}
+
+// ─── Line / Measure ──────────────────────────────────────────────────────────
+
+function AnimatedLine({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: AnimatedShapeProps) {
+  const { fromX, fromY, toX, toY } = useAnimatedEndpoints(
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  );
+
+  const p1 = useDerivedValue(() => ({ x: fromX.value, y: fromY.value }));
+  const p2 = useDerivedValue(() => ({ x: toX.value, y: toY.value }));
+
+  return (
+    <SkiaLine
+      p1={p1}
+      p2={p2}
+      color={object.color}
+      style="stroke"
+      strokeWidth={object.lineWidth}
+      strokeCap="round"
+    />
+  );
+}
+
+// ─── Arrow ───────────────────────────────────────────────────────────────────
+
+function AnimatedArrow({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: AnimatedShapeProps) {
+  const { fromX, fromY, toX, toY } = useAnimatedEndpoints(
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  );
+
+  const arrowPath = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    const fx = fromX.value;
+    const fy = fromY.value;
+    const tx = toX.value;
+    const ty = toY.value;
+
+    const ddx = tx - fx;
+    const ddy = ty - fy;
+    const len = Math.sqrt(ddx * ddx + ddy * ddy);
+    if (len === 0) return p;
+
+    const angle = Math.atan2(ddy, ddx);
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const lw = object.lineWidth;
+
+    if (lw < 8) {
+      const headLen = lw * 2;
+      const headW = lw * 2;
+      p.moveTo(fx, fy);
+      p.lineTo(tx, ty);
+      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;
+      p.moveTo(tx, ty);
+      p.lineTo(hx1, hy1);
+      p.moveTo(tx, ty);
+      p.lineTo(hx2, hy2);
+    } else {
+      const headLen = lw * 3;
+      const headW = lw * 3;
+      const bodyW = lw;
+      const bodyLen = Math.max(0, len - headLen);
+      const halfBody = bodyW / 2;
+
+      const tf = (px: number, py: number) => ({
+        x: fx + px * cos - py * sin,
+        y: fy + px * sin + py * cos,
+      });
+
+      const tb1 = tf(0, -halfBody);
+      const tb2 = tf(bodyLen, -halfBody);
+      const tb3 = tf(bodyLen, halfBody);
+      const tb4 = tf(0, halfBody);
+      const th1 = tf(bodyLen, -headW / 2);
+      const th2 = tf(len, 0);
+      const th3 = tf(bodyLen, headW / 2);
+
+      p.moveTo(tb1.x, tb1.y);
+      p.lineTo(tb2.x, tb2.y);
+      p.lineTo(tb3.x, tb3.y);
+      p.lineTo(tb4.x, tb4.y);
+      p.close();
+      p.moveTo(th1.x, th1.y);
+      p.lineTo(th2.x, th2.y);
+      p.lineTo(th3.x, th3.y);
+      p.close();
+    }
+
+    return p;
+  });
+
+  if (object.lineWidth < 8) {
+    return (
+      <Path
+        path={arrowPath}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    );
+  }
+
+  return <Path path={arrowPath} style="fill" color={object.color} />;
+}
+
+// ─── Rectangle ───────────────────────────────────────────────────────────────
+
+function AnimatedRect({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: AnimatedShapeProps & { object: TwoPointObject & { backgroundColor?: string; backgroundAlpha?: number } }) {
+  const { fromX, fromY, toX, toY } = useAnimatedEndpoints(
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  );
+
+  const x = useDerivedValue(() => Math.min(fromX.value, toX.value));
+  const y = useDerivedValue(() => Math.min(fromY.value, toY.value));
+  const width = useDerivedValue(() => Math.abs(toX.value - fromX.value));
+  const height = useDerivedValue(() => Math.abs(toY.value - fromY.value));
+
+  const hasFill = object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill
+    ? object.backgroundColor!.replace(
+        /[\d.]+\)$/,
+        `${object.backgroundAlpha})`,
+      )
+    : undefined;
+
+  return (
+    <Group>
+      {fillColor && (
+        <Rect
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          color={fillColor}
+          style="fill"
+        />
+      )}
+      <Rect
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        color={object.color}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+      />
+    </Group>
+  );
+}
+
+// ─── Circle / Oval ───────────────────────────────────────────────────────────
+
+function AnimatedOval({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: AnimatedShapeProps & { object: TwoPointObject & { backgroundColor?: string; backgroundAlpha?: number } }) {
+  const { fromX, fromY, toX, toY } = useAnimatedEndpoints(
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  );
+
+  const x = useDerivedValue(() => Math.min(fromX.value, toX.value));
+  const y = useDerivedValue(() => Math.min(fromY.value, toY.value));
+  const width = useDerivedValue(() => Math.abs(toX.value - fromX.value));
+  const height = useDerivedValue(() => Math.abs(toY.value - fromY.value));
+
+  const hasFill = object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill
+    ? object.backgroundColor!.replace(
+        /[\d.]+\)$/,
+        `${object.backgroundAlpha})`,
+      )
+    : undefined;
+
+  return (
+    <Group>
+      {fillColor && (
+        <Oval
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          color={fillColor}
+          style="fill"
+        />
+      )}
+      <Oval
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        color={object.color}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+      />
+    </Group>
+  );
+}
+
+// ─── Freehand ────────────────────────────────────────────────────────────────
+
+function AnimatedFreehand({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: {
+  object: FreehandObject;
+  canvasSize: Size;
+  isDragging: SharedValue<boolean>;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+}) {
+  const pathString = useMemo(() => {
+    const denormalized = denormalizePoints(object.points, canvasSize);
+    return buildSmoothedPath(denormalized);
+  }, [object.points, canvasSize]);
+
+  // For freehand, we use a Group transform for whole-object move.
+  // Anchor-specific resize isn't well suited to visual preview for freehand.
+  const transform = useDerivedValue(() => {
+    if (!isDragging.value) return [{ translateX: 0 }, { translateY: 0 }];
+    if (draggingAnchorIndex.value < 0) {
+      return [
+        { translateX: dragOffsetX.value },
+        { translateY: dragOffsetY.value },
+      ];
+    }
+    // For endpoint resize on freehand, no visual preview of the path deformation
+    return [{ translateX: 0 }, { translateY: 0 }];
+  });
+
+  if (!pathString) return null;
+
+  return (
+    <Group transform={transform}>
+      <Path
+        path={pathString}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    </Group>
+  );
+}
+
+// ─── Polygon ─────────────────────────────────────────────────────────────────
+
+function AnimatedPolygon({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: {
+  object: PolygonObject;
+  canvasSize: Size;
+  isDragging: SharedValue<boolean>;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+}) {
+  const basePoints = useMemo(
+    () => denormalizePoints(object.points, canvasSize),
+    [object.points, canvasSize],
+  );
+
+  // Build animated path; move-all translates, vertex-drag moves one point
+  const animatedPath = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    if (basePoints.length < 2) return p;
+
+    for (let i = 0; i < basePoints.length; i++) {
+      let x = basePoints[i]!.x;
+      let y = basePoints[i]!.y;
+
+      if (isDragging.value) {
+        if (draggingAnchorIndex.value < 0) {
+          // Move whole object
+          x += dragOffsetX.value;
+          y += dragOffsetY.value;
+        } else if (draggingAnchorIndex.value === i) {
+          // Move single vertex
+          x += dragOffsetX.value;
+          y += dragOffsetY.value;
+        }
+      }
+
+      if (i === 0) p.moveTo(x, y);
+      else p.lineTo(x, y);
+    }
+    if (object.closed) p.close();
+    return p;
+  });
+
+  const hasFill =
+    object.closed && object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill
+    ? object.backgroundColor!.replace(
+        /[\d.]+\)$/,
+        `${object.backgroundAlpha})`,
+      )
+    : undefined;
+
+  return (
+    <Group>
+      {fillColor && (
+        <Path path={animatedPath} style="fill" color={fillColor} />
+      )}
+      <Path
+        path={animatedPath}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    </Group>
+  );
+}
+
+// ─── Measurement ─────────────────────────────────────────────────────────────
+
+function AnimatedMeasurement({
+  object,
+  canvasSize,
+  isDragging,
+  draggingAnchorIndex,
+  dragOffsetX,
+  dragOffsetY,
+}: {
+  object: MeasureObject;
+  canvasSize: Size;
+  isDragging: SharedValue<boolean>;
+  draggingAnchorIndex: SharedValue<number>;
+  dragOffsetX: SharedValue<number>;
+  dragOffsetY: SharedValue<number>;
+}) {
+  const { fromX, fromY, toX, toY } = useAnimatedEndpoints(
+    object,
+    canvasSize,
+    isDragging,
+    draggingAnchorIndex,
+    dragOffsetX,
+    dragOffsetY,
+  );
+
+  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],
+  );
+
+  const textWidth = useMemo(() => {
+    if (!hasLabel) return 0;
+    return font.getTextWidth(labelText);
+  }, [font, labelText, hasLabel]);
+
+  const gapHalfWidth = hasLabel ? textWidth / 2 + TEXT_GAP_PADDING : 0;
+
+  const measurePath = useDerivedValue(() => {
+    const p = Skia.Path.Make();
+    const fx = fromX.value;
+    const fy = fromY.value;
+    const tx = toX.value;
+    const ty = toY.value;
+
+    const ddx = tx - fx;
+    const ddy = ty - fy;
+    const len = Math.sqrt(ddx * ddx + ddy * ddy);
+    if (len === 0) return p;
+
+    const angle = Math.atan2(ddy, ddx);
+    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 lw = object.lineWidth;
+
+    const headLen = Math.min(lw * 3, len / 4);
+    const headW = lw * 2;
+    const extLen = lw * 4;
+
+    const mx = (fx + tx) / 2;
+    const my = (fy + ty) / 2;
+
+    // Main line with gap for label
+    if (gapHalfWidth > 0 && len > gapHalfWidth * 2) {
+      const gsX = mx - gapHalfWidth * cos;
+      const gsY = my - gapHalfWidth * sin;
+      const geX = mx + gapHalfWidth * cos;
+      const geY = my + gapHalfWidth * sin;
+      p.moveTo(fx, fy);
+      p.lineTo(gsX, gsY);
+      p.moveTo(geX, geY);
+      p.lineTo(tx, ty);
+    } else {
+      p.moveTo(fx, fy);
+      p.lineTo(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;
+    p.moveTo(fx, fy);
+    p.lineTo(ah1x, ah1y);
+    p.moveTo(fx, fy);
+    p.lineTo(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;
+    p.moveTo(tx, ty);
+    p.lineTo(bh1x, bh1y);
+    p.moveTo(tx, ty);
+    p.lineTo(bh2x, bh2y);
+
+    // Extension lines
+    if (object.measureStyle === 0 || object.measureStyle === 2) {
+      p.moveTo(fx + extLen * perpCos, fy + extLen * perpSin);
+      p.lineTo(fx - extLen * perpCos, fy - extLen * perpSin);
+      p.moveTo(tx + extLen * perpCos, ty + extLen * perpSin);
+      p.lineTo(tx - extLen * perpCos, ty - extLen * perpSin);
+    }
+
+    return p;
+  });
+
+  // Animated text transform: translate to midpoint + rotate
+  const textTransform = useDerivedValue(() => {
+    const mx = (fromX.value + toX.value) / 2;
+    const my = (fromY.value + toY.value) / 2;
+    const rawAngle = Math.atan2(
+      toY.value - fromY.value,
+      toX.value - fromX.value,
+    );
+    const finalAngle =
+      rawAngle > Math.PI / 2
+        ? rawAngle - Math.PI
+        : rawAngle < -Math.PI / 2
+          ? rawAngle + Math.PI
+          : rawAngle;
+    return [
+      { translateX: mx },
+      { translateY: my },
+      { rotate: finalAngle },
+    ];
+  });
+
+  const textX = -textWidth / 2;
+  const textY = fontSize / 3;
+
+  return (
+    <Group>
+      <Path
+        path={measurePath}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+      {hasLabel && (
+        <Group transform={textTransform}>
+          <Text
+            x={textX}
+            y={textY}
+            text={labelText}
+            font={font}
+            color={object.color}
+          />
+        </Group>
+      )}
+    </Group>
+  );
+}