Don't reset cache while zooming using a gesture (#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 #1056

* update snapshot tests

.watchmanconfig

+{}

src/appState.ts

     lastPointerDownWith: "mouse",
     selectedElementIds: {},
     collaborators: new Map(),
+    shouldCacheIgnoreZoom: false,
   };
 }
 

src/components/App.tsx

         viewBackgroundColor: this.state.viewBackgroundColor,
         zoom: this.state.zoom,
         remotePointerViewportCoords: pointerViewportCoords,
+        shouldCacheIgnoreZoom: this.state.shouldCacheIgnoreZoom,
       },
       {
         renderOptimizations: true,
         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;
     }
     this.socket && this.broadcastMouseLocation({ pointerCoords });
   };
 
+  private resetShouldCacheIgnoreZoomDebounced = debounce(() => {
+    this.setState({ shouldCacheIgnoreZoom: false });
+  }, 1000);
+
   private saveDebounced = debounce(() => {
     saveToLocalStorage(globalSceneState.getAllElements(), this.state);
   }, 300);

src/renderer/renderElement.ts

   }
   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;
 ) {
   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!,
         (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);
 }

src/scene/export.ts

       scrollY: normalizeScroll(-minY + exportPadding),
       zoom: 1,
       remotePointerViewportCoords: {},
+      shouldCacheIgnoreZoom: false,
     },
     {
       renderScrollbars: false,

src/scene/types.ts

   // null indicates transparent bg
   viewBackgroundColor: string | null;
   zoom: number;
+  shouldCacheIgnoreZoom: boolean;
   remotePointerViewportCoords: { [id: string]: { x: number; y: number } };
 };
 

src/tests/__snapshots__/regressionTests.test.tsx.snap

     "id2": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id1": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id2": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id2": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id3": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
   "scrolledOutside": false,
   "selectedElementIds": Object {},
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id0": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": true,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id7": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id5": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id3": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id1": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id8": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id6": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id4": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id2": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id9": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id4": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
   "scrolledOutside": false,
   "selectedElementIds": Object {},
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id1": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": true,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
     "id2": true,
   },
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }
   "scrolledOutside": false,
   "selectedElementIds": Object {},
   "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
   "viewBackgroundColor": "#ffffff",
   "zoom": 1,
 }

src/types.ts

   lastPointerDownWith: PointerType;
   selectedElementIds: { [id: string]: boolean };
   collaborators: Map<string, { pointer?: { x: number; y: number } }>;
+  shouldCacheIgnoreZoom: boolean;
 };
 
 export type PointerCoords = Readonly<{