TheCloud/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-08-03 18:27:04 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Fix the root cause of flushSync flickering (#9791)

Browse Source 
* More reliable width and height change detection

* Put the dimensions useEffect before the scene render one, just in case
This commit is contained in:
Omar Brikaa 2025-07-28 00:52:07 +03:00 committed by GitHub
parent d6a934ed19
commit 37ad85cbaf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
packages/excalidraw/components/canvases/StaticCanvas.tsx
View File

@ -34,6 +34,13 @@ const StaticCanvas = (props: StaticCanvasProps) => {
const wrapperRef = useRef<HTMLDivElement>(null);
const isComponentMounted = useRef(false);
useEffect(() => {
props.canvas.style.width = `${props.appState.width}px`;
props.canvas.style.height = `${props.appState.height}px`;
props.canvas.width = props.appState.width * props.scale;
props.canvas.height = props.appState.height * props.scale;
}, [props.appState.height, props.appState.width, props.canvas, props.scale]);
useEffect(() => {
const wrapper = wrapperRef.current;
if (!wrapper) {
@ -49,26 +56,6 @@ const StaticCanvas = (props: StaticCanvasProps) => {
canvas.classList.add("excalidraw__canvas", "static");
}
const widthString = `${props.appState.width}px`;
const heightString = `${props.appState.height}px`;
if (canvas.style.width !== widthString) {
canvas.style.width = widthString;
}
if (canvas.style.height !== heightString) {
canvas.style.height = heightString;
}
const scaledWidth = props.appState.width * props.scale;
const scaledHeight = props.appState.height * props.scale;
// setting width/height resets the canvas even if dimensions not changed,
// which would cause flicker when we skip frame (due to throttling)
if (canvas.width !== scaledWidth) {
canvas.width = scaledWidth;
}
if (canvas.height !== scaledHeight) {
canvas.height = scaledHeight;
}
renderStaticScene(
{
canvas,