From 071043adaeabef3c62f8058a7543472fec52b57f Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Mon, 5 Jan 2026 12:59:02 +0000 Subject: [PATCH] feat: Add polygon debugging Signed-off-by: Mark Tolmacs --- excalidraw-app/components/DebugCanvas.tsx | 41 +++++++++++++++++++++++ packages/common/src/visualdebug.ts | 18 +++++++++- 2 files changed, 58 insertions(+), 1 deletion(-) diff --git a/excalidraw-app/components/DebugCanvas.tsx b/excalidraw-app/components/DebugCanvas.tsx index 9df430376b..2962b2e8d9 100644 --- a/excalidraw-app/components/DebugCanvas.tsx +++ b/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)}`); } diff --git a/packages/common/src/visualdebug.ts b/packages/common/src/visualdebug.ts index 1016be52b5..29e5950261 100644 --- a/packages/common/src/visualdebug.ts +++ b/packages/common/src/visualdebug.ts @@ -21,9 +21,11 @@ declare global { } } +export type Polygon = GlobalPoint[]; + export type DebugElement = { color: string; - data: LineSegment | Curve; + data: LineSegment | Curve | 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,