mirror of
https://github.com/excalidraw/excalidraw
synced 2025-07-25 13:58:22 +08:00
improve debug
This commit is contained in:
@ -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)}
|
||||||
|
@ -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: {
|
||||||
|
Reference in New Issue
Block a user