refactor drawing

implement shareable cache logic
improve caching
fix drawing bug

app/src/drawers/draw.ts

@@ -1,49 +1,115 @@
 import { invoke } from "@tauri-apps/api";
-import InitCanvasKit, { CanvasKit } from "canvaskit-wasm";
+import InitCanvasKit, { Canvas, CanvasKit, Surface } from "canvaskit-wasm";
 import { AnimatedEntities } from "primitives/AnimatedEntities";
-import { Entities } from "primitives/Entities";
+import { Entities, EntityType, StaggeredText } from "primitives/Entities";
 import { useRenderStateStore } from "stores/render-state.store";
 import { useTimelineStore } from "stores/timeline.store";
 import { z } from "zod";
-import { StaggeredTextCache } from "./staggered-text";
+import drawStaggeredText, {
+  StaggeredTextCache,
+  StaggeredTextEntityCache,
+  calculateLetters,
+} from "./staggered-text";
+import drawText from "./text";
+import drawEllipse from "./ellipse";
+import drawRect from "./rect";
+import { useEntitiesStore } from "stores/entities.store";
+import { handleEntityCache } from "./cache";
+
+function typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
+  return array.buffer.slice(
+    array.byteOffset,
+    array.byteLength + array.byteOffset
+  );
+}
 
 /**
  *
- * TODO Add dependency logic for e.g. dynamically loading fonts, images etc.
+ * TODO Add more sophisticated dependency logic for e.g. dynamically loading fonts, images etc.
  */
 
 export class Drawer {
-  private readonly didLoad: boolean;
+  private didLoad: boolean;
   private entities: z.output<typeof Entities> | undefined;
   private ckDidLoad: boolean;
   private dependenciesDidLoad: boolean;
+  drawCount: number;
   private CanvasKit: CanvasKit | undefined;
   cache: { staggeredText: Map<string, StaggeredTextCache> };
+  surface: Surface | undefined;
+  fontData: ArrayBuffer | undefined;
+  raf: number | undefined;
+  isLocked: boolean;
 
   constructor() {
     this.entities = undefined;
     this.CanvasKit = undefined;
     this.ckDidLoad = false;
     this.dependenciesDidLoad = false;
+    this.drawCount = 0;
+    this.surface = undefined;
+    this.fontData = undefined;
     this.cache = {
       staggeredText: new Map(),
     };
+    this.isLocked = false;
+    this.raf = undefined;
     this.didLoad = this.ckDidLoad && this.dependenciesDidLoad;
   }
 
-  init() {
-    InitCanvasKit({
+  async init(canvas: HTMLCanvasElement) {
+    await this.loadCanvasKit(canvas);
+    await this.loadDependencies(false);
+
+    this.didLoad = this.ckDidLoad && this.dependenciesDidLoad;
+  }
+
+  async loadCanvasKit(canvas: HTMLCanvasElement) {
+    await InitCanvasKit({
       locateFile: (file) =>
         "https://unpkg.com/canvaskit-wasm@latest/bin/" + file,
     }).then((CanvasKit) => {
-      this.CanvasKit = CanvasKit;
+      if (canvas) {
+        const CSurface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+        if (CSurface) {
+          this.CanvasKit = CanvasKit;
+          this.surface = CSurface;
+          this.ckDidLoad = true;
+        }
+      }
     });
   }
 
+  async loadDependencies(remote: boolean) {
+    if (remote) {
+      await fetch(
+        "https://storage.googleapis.com/skia-cdn/misc/Roboto-Regular.ttf"
+      )
+        .then((response) => response.arrayBuffer())
+        .then((arrayBuffer) => {
+          this.fontData = arrayBuffer;
+          this.dependenciesDidLoad = true;
+        });
+    } else {
+      await invoke("get_system_font", { fontName: "Helvetica-Bold" }).then(
+        (data) => {
+          if (Array.isArray(data)) {
+            const u8 = new Uint8Array(data as any);
+            const buffer = typedArrayToBuffer(u8);
+            this.fontData = buffer;
+            this.dependenciesDidLoad = true;
+          }
+        }
+      );
+    }
+  }
+
   /**
    * Updates the entities based on the input
    */
   update(animatedEntities: z.input<typeof AnimatedEntities>) {
+    console.time("calculate");
+
     const parsedAnimatedEntities = AnimatedEntities.parse(animatedEntities);
 
     if (this.didLoad) {
@@ -59,9 +125,17 @@ export class Drawer {
           duration,
         },
       }).then((data) => {
+        console.timeEnd("calculate");
         const parsedEntities = Entities.safeParse(data);
         if (parsedEntities.success) {
           this.entities = parsedEntities.data;
+
+          const isCached = this.entities.reduce(
+            (prev, curr) => prev && curr.cache.valid,
+            true
+          );
+
+          this.requestRedraw(!isCached);
         } else {
           console.error(parsedEntities.error);
         }
@@ -69,8 +143,79 @@ export class Drawer {
     }
   }
 
-  draw() {
-    if (this.didLoad) {
+  requestRedraw(rebuild: boolean) {
+    if (this.didLoad && this.surface) {
+      if (rebuild && this.raf !== undefined) {
+        cancelAnimationFrame(this.raf);
+        this.surface.flush();
+        this.raf = this.surface.requestAnimationFrame((canvas) =>
+          this.draw(canvas)
+        );
+      } else {
+        this.surface.flush();
+        this.raf = this.surface.requestAnimationFrame((canvas) =>
+          this.draw(canvas)
+        );
+      }
+    }
+  }
+
+  draw(canvas: Canvas) {
+    if (this.CanvasKit && this.entities && this.fontData && !this.isLocked) {
+      this.isLocked = true;
+      console.time("draw");
+      const CanvasKit = this.CanvasKit;
+      const fontData = this.fontData;
+
+      canvas.clear(CanvasKit.WHITE);
+
+      this.drawCount++;
+
+      [...this.entities].reverse().forEach((entity) => {
+        switch (entity.type) {
+          case EntityType.Enum.Rect:
+            drawRect(CanvasKit, canvas, entity);
+            break;
+          case EntityType.Enum.Ellipse:
+            drawEllipse(CanvasKit, canvas, entity);
+            break;
+          case EntityType.Enum.Text:
+            drawText(CanvasKit, canvas, entity, fontData);
+            break;
+          case EntityType.Enum.StaggeredText:
+            {
+              const cache = handleEntityCache<
+                z.output<typeof StaggeredText>,
+                StaggeredTextCache,
+                StaggeredTextEntityCache
+              >(entity, {
+                build: () => {
+                  const cache = calculateLetters(CanvasKit, entity, fontData);
+                  useEntitiesStore
+                    .getState()
+                    .updateEntityById(entity.id, { cache: { valid: true } });
+
+                  return cache;
+                },
+                get: () => this.cache.staggeredText.get(entity.id),
+                set: (id, cache) => this.cache.staggeredText.set(id, cache),
+                cleanup: (cache) => {
+                  cache.font.delete();
+                  cache.typeface.delete();
+                  CanvasKit.Free(cache.glyphs);
+                },
+              });
+
+              drawStaggeredText(CanvasKit, canvas, entity, cache);
+            }
+
+            break;
+          default:
+            break;
+        }
+      });
+      this.isLocked = false;
+      console.timeEnd("draw");
     }
   }
 }