Don't reset cache while zooming using a gesture (excalidraw#1103)

* Don't reset cache while zooming using a gesture This reuses the cached canvas while the gesture is happening. Once it has stop updating, then recompute the cache with the proper zoom. This should massively improve performance when panning on big scenes on mobile Fixes excalidraw#1056 * update snapshot tests
veerjainATgmail · Mar 28, 2020 · 24fa657 · 24fa657
1 parent 95eaade
commit 24fa657
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 7 deletions.
diff --git a/.watchmanconfig b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/src/appState.ts b/src/appState.ts
@@ -35,6 +35,7 @@ export function getDefaultAppState(): AppState {
     lastPointerDownWith: "mouse",
     selectedElementIds: {},
     collaborators: new Map(),
+    shouldCacheIgnoreZoom: false,
   };
 }
 

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -481,6 +481,7 @@ export class App extends React.Component<any, AppState> {
         viewBackgroundColor: this.state.viewBackgroundColor,
         zoom: this.state.zoom,
         remotePointerViewportCoords: pointerViewportCoords,
+        shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
       },
       {
         renderOptimizations: true,
@@ -1247,7 +1248,9 @@ export class App extends React.Component<any, AppState> {
         scrollX: normalizeScroll(this.state.scrollX + deltaX / this.state.zoom),
         scrollY: normalizeScroll(this.state.scrollY + deltaY / this.state.zoom),
         zoom: getNormalizedZoom(gesture.initialScale! * scaleFactor),
+        shouldCacheIgnoreZoom: true,
       });
+      this.resetShouldCacheIgnoreZoomDebounced();
     } else {
       gesture.lastCenter = gesture.initialDistance = gesture.initialScale = null;
     }
@@ -2553,6 +2556,10 @@ export class App extends React.Component<any, AppState> {
     this.socket && this.broadcastMouseLocation({ pointerCoords });
   };
 
+  private resetShouldCacheIgnoreZoomDebounced = debounce(() => {
+    this.setState({ shouldCacheIgnoreZoom: false });
+  }, 1000);
+
   private saveDebounced = debounce(() => {
     saveToLocalStorage(globalSceneState.getAllElements(), this.state);
   }, 300);

diff --git a/src/renderer/renderElement.ts b/src/renderer/renderElement.ts
@@ -245,7 +245,11 @@ function generateElement(
   }
   const zoom = sceneState ? sceneState.zoom : 1;
   const prevElementWithCanvas = elementWithCanvasCache.get(element);
-  if (!prevElementWithCanvas || prevElementWithCanvas.canvasZoom !== zoom) {
+  const shouldRegenerateBecauseZoom =
+    prevElementWithCanvas &&
+    prevElementWithCanvas.canvasZoom !== zoom &&
+    !sceneState?.shouldCacheIgnoreZoom;
+  if (!prevElementWithCanvas || shouldRegenerateBecauseZoom) {
     const elementWithCanvas = generateElementCanvas(element, zoom);
     elementWithCanvasCache.set(element, elementWithCanvas);
     return elementWithCanvas;
@@ -261,8 +265,8 @@ function drawElementFromCanvas(
 ) {
   context.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
   context.translate(
-    -CANVAS_PADDING / sceneState.zoom,
-    -CANVAS_PADDING / sceneState.zoom,
+    -CANVAS_PADDING / elementWithCanvas.canvasZoom,
+    -CANVAS_PADDING / elementWithCanvas.canvasZoom,
   );
   context.drawImage(
     elementWithCanvas.canvas!,
@@ -276,12 +280,12 @@ function drawElementFromCanvas(
         (Math.floor(elementWithCanvas.element.y) + sceneState.scrollY) *
           window.devicePixelRatio,
     ),
-    elementWithCanvas.canvas!.width / sceneState.zoom,
-    elementWithCanvas.canvas!.height / sceneState.zoom,
+    elementWithCanvas.canvas!.width / elementWithCanvas.canvasZoom,
+    elementWithCanvas.canvas!.height / elementWithCanvas.canvasZoom,
   );
   context.translate(
-    CANVAS_PADDING / sceneState.zoom,
-    CANVAS_PADDING / sceneState.zoom,
+    CANVAS_PADDING / elementWithCanvas.canvasZoom,
+    CANVAS_PADDING / elementWithCanvas.canvasZoom,
   );
   context.scale(window.devicePixelRatio, window.devicePixelRatio);
 }

diff --git a/src/scene/export.ts b/src/scene/export.ts
@@ -50,6 +50,7 @@ export function exportToCanvas(
       scrollY: normalizeScroll(-minY + exportPadding),
       zoom: 1,
       remotePointerViewportCoords: {},
+      shouldCacheIgnoreZoom: false,
     },
     {
       renderScrollbars: false,

diff --git a/src/scene/types.ts b/src/scene/types.ts
@@ -7,6 +7,7 @@ export type SceneState = {
   // null indicates transparent bg
   viewBackgroundColor: string | null;
   zoom: number;
+  shouldCacheIgnoreZoom: boolean;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
 };