feat: Add polygon debugging

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

excalidraw-app/components/DebugCanvas.tsx

@@ -75,6 +75,39 @@ const renderCubicBezier = (
   context.restore();
 };
 
+const isPolygon = (data: any): data is GlobalPoint[] => {
+  return (
+    Array.isArray(data) &&
+    data.every((point) => Array.isArray(point) && point.length === 2)
+  );
+};
+
+const renderPolygon = (
+  context: CanvasRenderingContext2D,
+  zoom: number,
+  points: GlobalPoint[],
+  color: string,
+) => {
+  if (points.length < 3) {
+    return;
+  }
+
+  context.save();
+  context.fillStyle = color;
+  context.globalAlpha = 0.3;
+  context.beginPath();
+  context.moveTo(points[0][0] * zoom, points[0][1] * zoom);
+  for (let i = 1; i < points.length; i++) {
+    context.lineTo(points[i][0] * zoom, points[i][1] * zoom);
+  }
+  context.closePath();
+  context.fill();
+  context.globalAlpha = 1.0;
+  context.strokeStyle = color;
+  context.stroke();
+  context.restore();
+};
+
 const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
   context.strokeStyle = "#888";
   context.save();
@@ -280,6 +313,14 @@ const render = (
           el.color,
         );
         break;
+      case isPolygon(el.data):
+        renderPolygon(
+          context,
+          appState.zoom.value,
+          el.data as GlobalPoint[],
+          el.color,
+        );
+        break;
       default:
         throw new Error(`Unknown element type ${JSON.stringify(el)}`);
     }

packages/common/src/visualdebug.ts

@@ -21,9 +21,11 @@ declare global {
   }
 }
 
+export type Polygon = GlobalPoint[];
+
 export type DebugElement = {
   color: string;
-  data: LineSegment<GlobalPoint> | Curve<GlobalPoint>;
+  data: LineSegment<GlobalPoint> | Curve<GlobalPoint> | Polygon;
   permanent: boolean;
 };
 
@@ -129,6 +131,20 @@ export const debugDrawBounds = (
   );
 };
 
+export const debugDrawPolygon = (
+  points: GlobalPoint[],
+  opts?: {
+    color?: string;
+    permanent?: boolean;
+  },
+) => {
+  addToCurrentFrame({
+    color: opts?.color ?? "blue",
+    data: points,
+    permanent: !!opts?.permanent,
+  });
+};
+
 export const debugDrawPoints = (
   {
     x,