Dylan/excalidraw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

throttle attempt

Browse Source
This commit is contained in:
zsviczian 2023-02-26 21:25:46 +01:00
parent 1d5e865da1
commit 48deb68326
2 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/App.tsx
View File

@ -1283,7 +1283,10 @@ class App extends React.Component<AppProps, AppState> {
} }
} }
private renderScene = () => { private renderScene = (
renderingElements: NonDeletedExcalidrawElement[] = [],
shouldCacheIgnoreZoom: boolean | null = null,
) => {
const cursorButton: { const cursorButton: {
[id: string]: string | undefined; [id: string]: string | undefined;
} = {}; } = {};
@ -1321,25 +1324,26 @@ class App extends React.Component<AppProps, AppState> {
cursorButton[socketId] = user.button; cursorButton[socketId] = user.button;
}); });
const renderingElements = this.scene renderingElements =
.getNonDeletedElements() renderingElements.length > 0
.filter((element) => { ? renderingElements
if (isImageElement(element)) { : this.scene.getNonDeletedElements().filter((element) => {
if ( if (isImageElement(element)) {
// not placed on canvas yet (but in elements array) if (
this.state.pendingImageElementId === element.id // not placed on canvas yet (but in elements array)
) { this.state.pendingImageElementId === element.id
return false; ) {
} return false;
} }
// don't render text element that's being currently edited (it's }
// rendered on remote only) // don't render text element that's being currently edited (it's
return ( // rendered on remote only)
!this.state.editingElement || return (
this.state.editingElement.type !== "text" || !this.state.editingElement ||
element.id !== this.state.editingElement.id this.state.editingElement.type !== "text" ||
); element.id !== this.state.editingElement.id
}); );
});
const selectionColor = getComputedStyle( const selectionColor = getComputedStyle(
document.querySelector(".excalidraw")!, document.querySelector(".excalidraw")!,
@ -1363,7 +1367,10 @@ class App extends React.Component<AppProps, AppState> {
remoteSelectedElementIds, remoteSelectedElementIds,
remotePointerUsernames: pointerUsernames, remotePointerUsernames: pointerUsernames,
remotePointerUserStates: pointerUserStates, remotePointerUserStates: pointerUserStates,
shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom, shouldCacheIgnoreZoom:
shouldCacheIgnoreZoom === null
? this.state.shouldCacheIgnoreZoom
: shouldCacheIgnoreZoom,
theme: this.state.theme, theme: this.state.theme,
imageCache: this.imageCache, imageCache: this.imageCache,
isExporting: false, isExporting: false,
@ -6367,7 +6374,13 @@ class App extends React.Component<AppProps, AppState> {
private resetShouldCacheIgnoreZoomDebounced = debounce(() => { private resetShouldCacheIgnoreZoomDebounced = debounce(() => {
if (!this.unmounted) { if (!this.unmounted) {
this.setState({ shouldCacheIgnoreZoom: false }); //generateElementWithCanvas
const elements = this.scene.getNonDeletedElements();
for (let i = 0; i < elements.length; i += 200) {
const chunk = elements.slice(i, i + 200);
setTimeout(() => this.renderScene(chunk, false));
}
setTimeout(() => this.setState({ shouldCacheIgnoreZoom: false }));
} }
}, 300); }, 300);