Add visual debug support for arc

excalidraw-app/components/DebugCanvas.tsx

@@ -12,7 +12,13 @@ import {
   TrashIcon,
 } from "../../packages/excalidraw/components/icons";
 import { STORAGE_KEYS } from "../app_constants";
-import { isSegment, type GlobalPoint, type Segment } from "../../packages/math";
+import type { Arc } from "../../packages/math";
+import {
+  isArc,
+  isSegment,
+  type GlobalPoint,
+  type Segment,
+} from "../../packages/math";
 
 const renderLine = (
   context: CanvasRenderingContext2D,
@@ -29,6 +35,26 @@ const renderLine = (
   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();
@@ -56,6 +82,14 @@ const render = (
           el.color,
         );
         break;
+      case isArc(el.data):
+        renderArc(
+          context,
+          appState.zoom.value,
+          el.data as Arc<GlobalPoint>,
+          el.color,
+        );
+        break;
     }
   });
 };

packages/excalidraw/visualdebug.ts

@@ -1,4 +1,4 @@
-import type { Segment } from "../math";
+import type { Arc, Segment } from "../math";
 import { isSegment, segment, pointFrom, type GlobalPoint } from "../math";
 import { isBounds } from "./element/typeChecks";
 import type { Bounds } from "./element/types";
@@ -15,10 +15,24 @@ declare global {
 
 export type DebugElement = {
   color: string;
-  data: Segment<GlobalPoint>;
+  data: Segment<GlobalPoint> | Arc<GlobalPoint>;
   permanent: boolean;
 };
 
+export const debugDrawArc = (
+  a: Arc<GlobalPoint>,
+  opts?: {
+    color?: string;
+    permanent?: boolean;
+  },
+) => {
+  addToCurrentFrame({
+    color: opts?.color ?? "blue",
+    permanent: !!opts?.permanent,
+    data: a,
+  });
+};
+
 export const debugDrawLine = (
   segment: Segment<GlobalPoint> | Segment<GlobalPoint>[],
   opts?: {

packages/math/arc.ts

@@ -5,7 +5,7 @@ import {
   ellipseLineIntersectionPoints,
   ellipseSegmentInterceptPoints,
 } from "./ellipse";
-import { pointFrom, pointDistance } from "./point";
+import { pointFrom, pointDistance, isPoint } from "./point";
 import type { GenericPoint, Segment, Radians, Arc, Line } from "./types";
 import { PRECISION } from "./utils";
 
@@ -135,3 +135,18 @@ export function arcLineInterceptPoints<Point extends GenericPoint>(
       : a.startAngle <= candidateAngle || a.endAngle >= candidateAngle;
   });
 }
+
+export function isArc<Point extends GenericPoint>(v: unknown): v is Arc<Point> {
+  return (
+    v != null &&
+    typeof v === "object" &&
+    Object.hasOwn(v, "center") &&
+    Object.hasOwn(v, "radius") &&
+    Object.hasOwn(v, "startAngle") &&
+    Object.hasOwn(v, "endAngle") &&
+    isPoint((v as Arc<Point>).center) &&
+    typeof (v as Arc<Point>).radius === "number" &&
+    typeof (v as Arc<Point>).startAngle === "number" &&
+    typeof (v as Arc<Point>).endAngle === "number"
+  );
+}