Fast & Furious (#655)

* [WIP] Fast & Furious

* ensure we translate before scaling

* implement canvas caching for rest of elements

* remove unnecessary ts-ignore

* fix for devicePixelRatio

* initialize missing element props on restore

* factor out canvas padding

* remove unnecessary filtering

* simplify renderElement

* regenerate canvas on prop changes

* revert swapping shape resetting with canvas

* fix blurry rendering

* apply devicePixelRatio when clearing canvas

* improve blurriness; fix arrow canvas offset

* revert canvas clearing changes in anticipation of merge

* normalize scrollX/Y on update

* fix getDerivedStateFromProps

* swap derivedState for type brands

* tweak types

* remove renderScene offsets

* move selection element translations to renderElement

* dry out canvas zoom transformations

* fix padding offset

* Render cached canvas based on the zoom level

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Preet <833927+pshihn@users.noreply.github.com>

src/scene/data.ts

@@ -6,7 +6,7 @@ import {
   clearAppStateForLocalStorage,
 } from "../appState";
 
-import { AppState } from "../types";
+import { AppState, FlooredNumber } from "../types";
 import { ExportType } from "./types";
 import { exportToCanvas, exportToSvg } from "./export";
 import nanoid from "nanoid";
@@ -59,17 +59,21 @@ export function serializeAsJSON(
   );
 }
 
+export function normalizeScroll(pos: number) {
+  return Math.floor(pos) as FlooredNumber;
+}
+
 export function calculateScrollCenter(
   elements: readonly ExcalidrawElement[],
-): { scrollX: number; scrollY: number } {
+): { scrollX: FlooredNumber; scrollY: FlooredNumber } {
   const [x1, y1, x2, y2] = getCommonBounds(elements);
 
   const centerX = (x1 + x2) / 2;
   const centerY = (y1 + y2) / 2;
 
   return {
-    scrollX: window.innerWidth / 2 - centerX,
-    scrollY: window.innerHeight / 2 - centerY,
+    scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
+    scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
   };
 }
 
@@ -383,6 +387,10 @@ function restore(
             ? 100
             : element.opacity,
         points,
+        shape: null,
+        canvas: null,
+        canvasOffsetX: element.canvasOffsetX || 0,
+        canvasOffsetY: element.canvasOffsetY || 0,
       };
     });
 
@@ -430,7 +438,9 @@ export function saveToLocalStorage(
   localStorage.setItem(
     LOCAL_STORAGE_KEY,
     JSON.stringify(
-      elements.map(({ shape, ...element }: ExcalidrawElement) => element),
+      elements.map(
+        ({ shape, canvas, ...element }: ExcalidrawElement) => element,
+      ),
     ),
   );
   localStorage.setItem(