add playback

app/src/drawers/text.ts

@@ -1,46 +1,56 @@
-import { Canvas, CanvasKit, Font } from "canvaskit-wasm";
+import { Canvas, CanvasKit, Font, FontMgr, Typeface } from "canvaskit-wasm";
 import { TextEntity } from "primitives/Entities";
 import { convertToFloat } from "@tempblade/common";
 import { z } from "zod";
 import { EntityCache } from "./cache";
+import { Dependencies } from "services/dependencies.service";
+import { buildPaintStyle } from "./paint";
 
 export type TextCache = {
-  font: Font;
+  fontManager: FontMgr;
 };
 
 export type TextEntityCache = EntityCache<TextCache>;
 
+export function buildTextCache(
+  CanvasKit: CanvasKit,
+  entity: z.output<typeof TextEntity>,
+  dependencies: Dependencies
+): TextCache {
+  const fontData = dependencies.fonts.get(entity.paint.fontName) as ArrayBuffer;
+
+  const fontManager = CanvasKit.FontMgr.FromData(fontData) as FontMgr;
+
+  return {
+    fontManager,
+  };
+}
+
 export default function drawText(
   CanvasKit: CanvasKit,
   canvas: Canvas,
   entity: z.output<typeof TextEntity>,
-  fontData: ArrayBuffer
+  cache: TextCache
 ) {
   canvas.save();
-  const fontMgr = CanvasKit.FontMgr.FromData(fontData);
-
-  if (!fontMgr) {
-    console.error("No FontMgr");
-    return;
-  }
 
   const paint = new CanvasKit.Paint();
 
   const color = convertToFloat(entity.paint.style.color.value);
 
-  paint.setColor(color);
+  buildPaintStyle(CanvasKit, paint, entity.paint);
 
   const pStyle = new CanvasKit.ParagraphStyle({
     textStyle: {
       color: color,
-      fontFamilies: ["Helvetica"],
+      fontFamilies: [entity.paint.fontName],
       fontSize: entity.paint.size,
     },
     textDirection: CanvasKit.TextDirection.LTR,
     textAlign: CanvasKit.TextAlign[entity.paint.align],
   });
 
-  const builder = CanvasKit.ParagraphBuilder.Make(pStyle, fontMgr);
+  const builder = CanvasKit.ParagraphBuilder.Make(pStyle, cache.fontManager);
   builder.addText(entity.text);
   const p = builder.build();
   p.layout(900);
@@ -49,7 +59,7 @@ export default function drawText(
 
   canvas.drawParagraph(p, entity.origin[0] - width, entity.origin[1] - height);
 
-  paint.delete();
-
   canvas.restore();
+
+  builder.delete();
 }