improve debug

This commit is contained in:
dwelle
2025-06-27 14:48:59 +02:00
parent 0199c82e98
commit 62e20aa247
2 changed files with 81 additions and 7 deletions

View File

@ -1,6 +1,11 @@
import { DRAWING_CONFIGS } from "@excalidraw/element"; import { DRAWING_CONFIGS, isFreeDrawElement } from "@excalidraw/element";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useUIAppState } from "@excalidraw/excalidraw/context/ui-appState";
import { useExcalidrawElements } from "@excalidraw/excalidraw/components/App";
import { round } from "../../packages/math/src";
export const FreedrawDebugSliders = () => { export const FreedrawDebugSliders = () => {
const [streamline, setStreamline] = useState<number>( const [streamline, setStreamline] = useState<number>(
DRAWING_CONFIGS.default.variable.streamline, DRAWING_CONFIGS.default.variable.streamline,
@ -14,7 +19,10 @@ export const FreedrawDebugSliders = () => {
window.h = {} as any; window.h = {} as any;
} }
if (!window.h.debugFreedraw) { if (!window.h.debugFreedraw) {
window.h.debugFreedraw = DRAWING_CONFIGS.default.variable; window.h.debugFreedraw = {
enabled: true,
...DRAWING_CONFIGS.default.variable,
};
} }
setStreamline(window.h.debugFreedraw.streamline); setStreamline(window.h.debugFreedraw.streamline);
@ -35,6 +43,29 @@ export const FreedrawDebugSliders = () => {
} }
}; };
const [enabled, setEnabled] = useState<boolean>(
window.h?.debugFreedraw?.enabled ?? true,
);
// counter incrasing each 50ms
const [, setCounter] = useState<number>(0);
useEffect(() => {
const interval = setInterval(() => {
setCounter((prev) => prev + 1);
}, 50);
return () => clearInterval(interval);
}, []);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const elements = useExcalidrawElements();
const appState = useUIAppState();
const newFreedrawElement =
appState.newElement && isFreeDrawElement(appState.newElement)
? appState.newElement
: null;
return ( return (
<div <div
style={{ style={{
@ -53,6 +84,37 @@ export const FreedrawDebugSliders = () => {
fontFamily: "monospace", fontFamily: "monospace",
}} }}
> >
{newFreedrawElement && (
<div>
pressures:{" "}
{newFreedrawElement.simulatePressure
? "simulated"
: JSON.stringify(
newFreedrawElement.pressures
.slice(-4)
.map((x) => round(x, 2))
.join(" ") || [],
)}{" "}
({round(window.__lastPressure__ || 0, 2) || "?"})
</div>
)}
<div>
<label>
{" "}
enabled
<br />
<input
type="checkbox"
checked={enabled}
onChange={(e) => {
if (window.h.debugFreedraw) {
window.h.debugFreedraw.enabled = e.target.checked;
setEnabled(e.target.checked);
}
}}
/>
</label>
</div>
<div> <div>
<label> <label>
Streamline: {streamline.toFixed(2)} Streamline: {streamline.toFixed(2)}

View File

@ -7474,7 +7474,10 @@ class App extends React.Component<AppProps, AppState> {
y: gridY, y: gridY,
}); });
const simulatePressure = event.pressure === 0.5 || event.pressure === 0; const simulatePressure =
event.pressure === 0.5 || event.pressure === 0 || event.pressure === 1;
window.__lastPressure__ = event.pressure;
const freedrawConfig = getFreedrawConfig( const freedrawConfig = getFreedrawConfig(
event.pointerType, event.pointerType,
@ -7497,8 +7500,13 @@ class App extends React.Component<AppProps, AppState> {
drawingConfigs: { drawingConfigs: {
fixedStrokeWidth: this.state.currentItemFixedStrokeWidth, fixedStrokeWidth: this.state.currentItemFixedStrokeWidth,
streamline: streamline:
window.h?.debugFreedraw?.streamline ?? freedrawConfig.streamline, (window.h?.debugFreedraw?.enabled
simplify: window.h?.debugFreedraw?.simplify ?? freedrawConfig.simplify, ? window.h?.debugFreedraw?.streamline
: null) ?? freedrawConfig.streamline,
simplify:
(window.h?.debugFreedraw?.enabled
? window.h?.debugFreedraw?.simplify
: null) ?? freedrawConfig.simplify,
}, },
locked: false, locked: false,
frameId: topLayerFrame ? topLayerFrame.id : null, frameId: topLayerFrame ? topLayerFrame.id : null,
@ -11141,6 +11149,7 @@ class App extends React.Component<AppProps, AppState> {
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
declare global { declare global {
interface Window { interface Window {
__lastPressure__?: number;
h: { h: {
scene: Scene; scene: Scene;
elements: readonly ExcalidrawElement[]; elements: readonly ExcalidrawElement[];
@ -11152,6 +11161,7 @@ declare global {
debugFreedraw?: { debugFreedraw?: {
streamline: number; streamline: number;
simplify: number; simplify: number;
enabled: boolean;
}; };
}; };
} }
@ -11162,8 +11172,10 @@ export const createTestHook = () => {
window.h = window.h || ({} as Window["h"]); window.h = window.h || ({} as Window["h"]);
// Initialize debug freedraw parameters // Initialize debug freedraw parameters
window.h.debugFreedraw = window.h.debugFreedraw = {
window.h.debugFreedraw || DRAWING_CONFIGS.default.variable; enabled: true,
...(window.h.debugFreedraw || DRAWING_CONFIGS.default.variable),
};
Object.defineProperties(window.h, { Object.defineProperties(window.h, {
elements: { elements: {