smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Visual debugger (#8344)

Browse source 
Add visual debugger to the Excalidraw app (only).
This commit is contained in:
Márk Tolmács 2024-08-27 19:46:00 +02:00 • committed by GitHub
parent 26d2296578
commit ea7c702cfc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 555 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

24
packages/excalidraw/element/typeChecks.ts
View file

@ -1,7 +1,9 @@
import type { LineSegment } from "../../utils";
import { ROUNDNESS } from "../constants";
import type { ElementOrToolType } from "../types";
import type { ElementOrToolType, Point } from "../types";
import type { MarkNonNullable } from "../utility-types";
import { assertNever } from "../utils";
import type { Bounds } from "./bounds";
import type {
ExcalidrawElement,
ExcalidrawTextElement,
@ -322,3 +324,23 @@ export const isFixedPointBinding = (
): binding is FixedPointBinding => {
return binding.fixedPoint != null;
};
// TODO: Move this to @excalidraw/math
export const isPoint = (point: unknown): point is Point =>
Array.isArray(point) && point.length === 2;
// TODO: Move this to @excalidraw/math
export const isBounds = (box: unknown): box is Bounds =>
Array.isArray(box) &&
box.length === 4 &&
typeof box[0] === "number" &&
typeof box[1] === "number" &&
typeof box[2] === "number" &&
typeof box[3] === "number";
// TODO: Move this to @excalidraw/math
export const isLineSegment = (segment: unknown): segment is LineSegment =>
Array.isArray(segment) &&
segment.length === 2 &&
isPoint(segment[0]) &&
isPoint(segment[0]);

157
packages/excalidraw/visualdebug.ts Normal file
View file

@ -0,0 +1,157 @@
import type { LineSegment } from "../utils";
import type { BoundingBox, Bounds } from "./element/bounds";
import { isBounds, isLineSegment } from "./element/typeChecks";
import type { Point } from "./types";
// The global data holder to collect the debug operations
declare global {
interface Window {
visualDebug?: {
data: DebugElement[][];
currentFrame?: number;
};
}
}
export type DebugElement = {
color: string;
data: LineSegment;
permanent: boolean;
};
export const debugDrawLine = (
segment: LineSegment | LineSegment[],
opts?: {
color?: string;
permanent?: boolean;
},
) => {
(isLineSegment(segment) ? [segment] : segment).forEach((data) =>
addToCurrentFrame({
color: opts?.color ?? "red",
data,
permanent: !!opts?.permanent,
}),
);
};
export const debugDrawPoint = (
point: Point,
opts?: {
color?: string;
permanent?: boolean;
fuzzy?: boolean;
},
) => {
const xOffset = opts?.fuzzy ? Math.random() * 3 : 0;
const yOffset = opts?.fuzzy ? Math.random() * 3 : 0;
debugDrawLine(
[
[point[0] + xOffset - 10, point[1] + yOffset - 10],
[point[0] + xOffset + 10, point[1] + yOffset + 10],
],
{
color: opts?.color ?? "cyan",
permanent: opts?.permanent,
},
);
debugDrawLine(
[
[point[0] + xOffset - 10, point[1] + yOffset + 10],
[point[0] + xOffset + 10, point[1] + yOffset - 10],
],
{
color: opts?.color ?? "cyan",
permanent: opts?.permanent,
},
);
};
export const debugDrawBoundingBox = (
box: BoundingBox | BoundingBox[],
opts?: {
color?: string;
permanent?: boolean;
},
) => {
(Array.isArray(box) ? box : [box]).forEach((bbox) =>
debugDrawLine(
[
[
[bbox.minX, bbox.minY],
[bbox.maxX, bbox.minY],
],
[
[bbox.maxX, bbox.minY],
[bbox.maxX, bbox.maxY],
],
[
[bbox.maxX, bbox.maxY],
[bbox.minX, bbox.maxY],
],
[
[bbox.minX, bbox.maxY],
[bbox.minX, bbox.minY],
],
],
{
color: opts?.color ?? "cyan",
permanent: opts?.permanent,
},
),
);
};
export const debugDrawBounds = (
box: Bounds | Bounds[],
opts?: {
color: string;
permanent: boolean;
},
) => {
(isBounds(box) ? [box] : box).forEach((bbox) =>
debugDrawLine(
[
[
[bbox[0], bbox[1]],
[bbox[2], bbox[1]],
],
[
[bbox[2], bbox[1]],
[bbox[2], bbox[3]],
],
[
[bbox[2], bbox[3]],
[bbox[0], bbox[3]],
],
[
[bbox[0], bbox[3]],
[bbox[0], bbox[1]],
],
],
{
color: opts?.color ?? "green",
permanent: opts?.permanent,
},
),
);
};
export const debugCloseFrame = () => {
window.visualDebug?.data.push([]);
};
export const debugClear = () => {
if (window.visualDebug?.data) {
window.visualDebug.data = [];
}
};
const addToCurrentFrame = (element: DebugElement) => {
if (window.visualDebug?.data && window.visualDebug.data.length === 0) {
window.visualDebug.data[0] = [];
}
window.visualDebug?.data &&
window.visualDebug.data[window.visualDebug.data.length - 1].push(element);
};