Add arc and curve visual debug rendering

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

excalidraw-app/components/DebugCanvas.tsx

@@ -12,11 +12,14 @@ import {
   TrashIcon,
 } from "../../packages/excalidraw/components/icons";
 import { STORAGE_KEYS } from "../app_constants";
+import type { Arc, Curve } from "../../packages/math";
 import {
+  isArc,
   isLineSegment,
   type GlobalPoint,
   type LineSegment,
 } from "../../packages/math";
+import isCurve from "../../packages/math/curve";
 
 const renderLine = (
   context: CanvasRenderingContext2D,
@@ -33,6 +36,48 @@ const renderLine = (
   context.restore();
 };
 
+const renderCubicBezier = (
+  context: CanvasRenderingContext2D,
+  zoom: number,
+  [start, control1, control2, end]: Curve<GlobalPoint>,
+  color: string,
+) => {
+  context.save();
+  context.strokeStyle = color;
+  context.beginPath();
+  context.moveTo(start[0] * zoom, start[1] * zoom);
+  context.bezierCurveTo(
+    control1[0] * zoom,
+    control1[1] * zoom,
+    control2[0] * zoom,
+    control2[1] * zoom,
+    end[0] * zoom,
+    end[1] * zoom,
+  );
+  context.stroke();
+  context.restore();
+};
+
+const renderArc = (
+  context: CanvasRenderingContext2D,
+  zoom: number,
+  a: Arc<GlobalPoint>,
+  color: string,
+) => {
+  context.save();
+  context.strokeStyle = color;
+  context.beginPath();
+  context.arc(
+    a.center[0] * zoom,
+    a.center[1] * zoom,
+    a.radius * zoom,
+    a.startAngle,
+    a.endAngle,
+  );
+  context.stroke();
+  context.restore();
+};
+
 const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
   context.strokeStyle = "#888";
   context.save();
@@ -60,6 +105,24 @@ const render = (
           el.color,
         );
         break;
+      case isArc(el.data):
+        renderArc(
+          context,
+          appState.zoom.value,
+          el.data as Arc<GlobalPoint>,
+          el.color,
+        );
+        break;
+      case isCurve(el.data):
+        renderCubicBezier(
+          context,
+          appState.zoom.value,
+          el.data as Curve<GlobalPoint>,
+          el.color,
+        );
+        break;
+      default:
+        throw new Error("Unknown element type");
     }
   });
 };

packages/excalidraw/visualdebug.ts

@@ -1,3 +1,4 @@
+import type { Arc, Curve } from "../math";
 import {
   isLineSegment,
   lineSegment,
@@ -21,9 +22,37 @@ declare global {
   }
 }
 
+export const debugDrawCubicBezier = (
+  c: Curve<GlobalPoint>,
+  opts?: {
+    color?: string;
+    permanent?: boolean;
+  },
+) => {
+  addToCurrentFrame({
+    color: opts?.color ?? "purple",
+    permanent: !!opts?.permanent,
+    data: c,
+  });
+};
+
+export const debugDrawArc = (
+  a: Arc<GlobalPoint>,
+  opts?: {
+    color?: string;
+    permanent?: boolean;
+  },
+) => {
+  addToCurrentFrame({
+    color: opts?.color ?? "blue",
+    permanent: !!opts?.permanent,
+    data: a,
+  });
+};
+
 export type DebugElement = {
   color: string;
-  data: LineSegment<GlobalPoint>;
+  data: LineSegment<GlobalPoint> | Curve<GlobalPoint> | Arc<GlobalPoint>;
   permanent: boolean;
 };
 

packages/math/curve.ts

@@ -1,4 +1,4 @@
-import { pointDistance, pointFrom } from "./point";
+import { isPoint, pointDistance, pointFrom } from "./point";
 import type { Curve, GlobalPoint, Line, LocalPoint } from "./types";
 
 /**
@@ -235,3 +235,19 @@ export function curvePointDistance<Point extends GlobalPoint | LocalPoint>(
 ) {
   return pointDistance(p, curveClosestPoint(c, p));
 }
+
+/**
+ * Determines if the parameter is a Curve
+ */
+export default function isCurve<P extends GlobalPoint | LocalPoint>(
+  v: unknown,
+): v is Curve<P> {
+  return (
+    Array.isArray(v) &&
+    v.length !== 4 &&
+    isPoint(v[0]) &&
+    isPoint(v[1]) &&
+    isPoint(v[2]) &&
+    isPoint(v[3])
+  );
+}