From 48deb68326dc25502ce8b9f98e6ecd1576239c1b Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
Date: Sun, 26 Feb 2023 21:25:46 +0100
Subject: [PATCH] throttle attempt

---
 src/components/App.tsx        | 57 +++++++++++++++++++++--------------
 src/renderer/renderElement.ts |  2 +-
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5b9311f8d..43c87c727 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1283,7 +1283,10 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  private renderScene = () => {
+  private renderScene = (
+    renderingElements: NonDeletedExcalidrawElement[] = [],
+    shouldCacheIgnoreZoom: boolean | null = null,
+  ) => {
     const cursorButton: {
       [id: string]: string | undefined;
     } = {};
@@ -1321,25 +1324,26 @@ class App extends React.Component<AppProps, AppState> {
       cursorButton[socketId] = user.button;
     });
 
-    const renderingElements = this.scene
-      .getNonDeletedElements()
-      .filter((element) => {
-        if (isImageElement(element)) {
-          if (
-            // not placed on canvas yet (but in elements array)
-            this.state.pendingImageElementId === element.id
-          ) {
-            return false;
-          }
-        }
-        // don't render text element that's being currently edited (it's
-        // rendered on remote only)
-        return (
-          !this.state.editingElement ||
-          this.state.editingElement.type !== "text" ||
-          element.id !== this.state.editingElement.id
-        );
-      });
+    renderingElements =
+      renderingElements.length > 0
+        ? renderingElements
+        : this.scene.getNonDeletedElements().filter((element) => {
+            if (isImageElement(element)) {
+              if (
+                // not placed on canvas yet (but in elements array)
+                this.state.pendingImageElementId === element.id
+              ) {
+                return false;
+              }
+            }
+            // don't render text element that's being currently edited (it's
+            // rendered on remote only)
+            return (
+              !this.state.editingElement ||
+              this.state.editingElement.type !== "text" ||
+              element.id !== this.state.editingElement.id
+            );
+          });
 
     const selectionColor = getComputedStyle(
       document.querySelector(".excalidraw")!,
@@ -1363,7 +1367,10 @@ class App extends React.Component<AppProps, AppState> {
           remoteSelectedElementIds,
           remotePointerUsernames: pointerUsernames,
           remotePointerUserStates: pointerUserStates,
-          shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
+          shouldCacheIgnoreZoom:
+            shouldCacheIgnoreZoom === null
+              ? this.state.shouldCacheIgnoreZoom
+              : shouldCacheIgnoreZoom,
           theme: this.state.theme,
           imageCache: this.imageCache,
           isExporting: false,
@@ -6367,7 +6374,13 @@ class App extends React.Component<AppProps, AppState> {
 
   private resetShouldCacheIgnoreZoomDebounced = debounce(() => {
     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);
 
diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
index 755a45327..d39b9fbb6 100644
--- a/src/renderer/renderElement.ts
+++ b/src/renderer/renderElement.ts
@@ -234,7 +234,7 @@ const drawElementOnCanvas = (
       if (fillShape) {
         rc.draw(fillShape);
       }
-      
+
       context.fillStyle = element.strokeColor;
       context.fill(path);