@archireport/react-native-drawing 0.2.0

package/src/renderers/PolygonRenderer.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from "react";
+import { Path, Group } from "@shopify/react-native-skia";
+import type { PolygonObject, Size } from "../types";
+import { denormalizePoints } from "../utils/coordinates";
+
+interface PolygonRendererProps {
+  object: PolygonObject;
+  canvasSize: Size;
+}
+
+function buildPolygonPath(
+  points: { x: number; y: number }[],
+  closed: boolean,
+): string | null {
+  if (points.length < 2) return null;
+  const parts = [`M ${points[0]!.x} ${points[0]!.y}`];
+  for (let i = 1; i < points.length; i++) {
+    parts.push(`L ${points[i]!.x} ${points[i]!.y}`);
+  }
+  if (closed) parts.push("Z");
+  return parts.join(" ");
+}
+
+export const PolygonRenderer = React.memo(function PolygonRenderer({
+  object,
+  canvasSize,
+}: PolygonRendererProps) {
+  const denormalized = useMemo(
+    () => denormalizePoints(object.points, canvasSize),
+    [object.points, canvasSize],
+  );
+
+  const pathString = useMemo(
+    () => buildPolygonPath(denormalized, object.closed),
+    [denormalized, object.closed],
+  );
+
+  if (!pathString) return null;
+
+  const hasFill =
+    object.closed && object.backgroundColor && object.backgroundAlpha;
+  const fillColor = hasFill
+    ? object.backgroundColor!.replace(
+        /[\d.]+\)$/,
+        `${object.backgroundAlpha})`,
+      )
+    : undefined;
+
+  return (
+    <Group>
+      {fillColor && (
+        <Path path={pathString} style="fill" color={fillColor} />
+      )}
+      <Path
+        path={pathString}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+        color={object.color}
+        strokeCap="round"
+        strokeJoin="round"
+      />
+    </Group>
+  );
+});
+
+export { buildPolygonPath };

package/src/renderers/RectRenderer.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo } from "react";
+import { Rect, Group } from "@shopify/react-native-skia";
+import type { RectangleObject, Size } from "../types";
+import { denormalize } from "../utils/coordinates";
+
+interface RectRendererProps {
+  object: RectangleObject;
+  canvasSize: Size;
+}
+
+export const RectRenderer = React.memo(function RectRenderer({
+  object,
+  canvasSize,
+}: RectRendererProps) {
+  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 && (
+        <Rect
+          x={rect.x}
+          y={rect.y}
+          width={rect.width}
+          height={rect.height}
+          color={fillColor}
+          style="fill"
+        />
+      )}
+      <Rect
+        x={rect.x}
+        y={rect.y}
+        width={rect.width}
+        height={rect.height}
+        color={object.color}
+        style="stroke"
+        strokeWidth={object.lineWidth}
+      />
+    </Group>
+  );
+});