fix cache

add font propertie to rust text paint
layout improvements

app/src/drawers/cache.ts

@@ -1,3 +1,4 @@
+import { C } from "@tauri-apps/api/event-30ea0228";
 import { BaseEntity } from "primitives/Entities";
 import { z } from "zod";
 
@@ -20,7 +21,12 @@ export function handleEntityCache<
     if (cached) {
       cache.cleanup(cached);
     }
-    return cache.build();
+
+    const nextCache = cache.build();
+
+    cache.set(entity.id, nextCache);
+
+    return nextCache;
   } else {
     if (!cached) {
       const nextCache = cache.build();

app/src/drawers/draw.ts

@@ -124,7 +124,7 @@ export class Drawer {
     animatedEntities: z.input<typeof AnimatedEntities>,
     prepareDependencies: boolean
   ) {
-    console.time("calculate");
+    //  console.time("calculate");
 
     if (this.didLoad) {
       const renderState = useRenderStateStore.getState().renderState;
@@ -145,20 +145,20 @@ export class Drawer {
         }
       );
     } else {
-      console.timeEnd("calculate");
+      // console.timeEnd("calculate");
     }
   }
 
   requestRedraw(rebuild: boolean) {
-    if (this.didLoad && this.surface) {
+    if (this.didLoad && this.surface && !this.isLocked) {
       if (rebuild && this.raf !== undefined) {
         cancelAnimationFrame(this.raf);
-        this.surface.flush();
+        // this.surface.flush();
         this.raf = this.surface.requestAnimationFrame((canvas) =>
           this.draw(canvas)
         );
       } else {
-        this.surface.flush();
+        // this.surface.flush();
         this.raf = this.surface.requestAnimationFrame((canvas) =>
           this.draw(canvas)
         );
@@ -169,7 +169,7 @@ export class Drawer {
   draw(canvas: Canvas) {
     if (this.CanvasKit && this.entities && !this.isLocked) {
       this.isLocked = true;
-      console.time("draw");
+      //console.time("draw");
       const CanvasKit = this.CanvasKit;
 
       canvas.clear(CanvasKit.WHITE);
@@ -191,12 +191,19 @@ export class Drawer {
                 TextCache,
                 TextEntityCache
               >(entity, {
-                build: () =>
-                  buildTextCache(
+                build: () => {
+                  const cache = buildTextCache(
                     CanvasKit,
                     entity,
                     this.dependenciesService.dependencies
-                  ),
+                  );
+
+                  useEntitiesStore
+                    .getState()
+                    .updateEntityById(entity.id, { cache: { valid: true } });
+
+                  return cache;
+                },
                 get: () => this.cache.text.get(entity.id),
                 set: (id, cache) => this.cache.text.set(id, cache),
                 cleanup: (cache) => {
@@ -245,7 +252,7 @@ export class Drawer {
         }
       });
       this.isLocked = false;
-      console.timeEnd("draw");
+      //console.timeEnd("draw");
     }
   }
 }

app/src/drawers/staggered-text.ts

@@ -203,82 +203,86 @@ export default function drawStaggeredText(
 
   buildPaintStyle(CanvasKit, paint, entity.letter.paint);
 
-  // Draw all those runs.
-  for (let i = 0; i < measuredLetters.length; i++) {
-    const measuredLetter = measuredLetters[i];
+  if (glyphs) {
+    // Draw all those runs.
+    for (let i = 0; i < measuredLetters.length; i++) {
+      const measuredLetter = measuredLetters[i];
 
-    const glyph = glyphs.subarray(i, i + 1);
+      const glyph = glyphs.subarray(i, i + 1);
 
-    const blob = CanvasKit.TextBlob.MakeFromGlyphs(
-      glyph as unknown as Array<number>,
-      font
-    );
-    if (blob) {
-      canvas.save();
+      const blob = CanvasKit.TextBlob.MakeFromGlyphs(
+        glyph as unknown as Array<number>,
+        font
+      );
+      if (blob) {
+        canvas.save();
 
-      const width = measuredLetters
-        .filter((letter) => letter.line === 0)
-        .reduce((prev, curr) => curr.bounds.x_advance + prev, 0);
+        const width = measuredLetters
+          .filter((letter) => letter.line === 0)
+          .reduce((prev, curr) => curr.bounds.x_advance + prev, 0);
 
-      const lineOffset = (entity.letter.paint.size / 2) * measuredLetter.line;
+        const lineOffset = (entity.letter.paint.size / 2) * measuredLetter.line;
 
-      const entityOrigin = [
-        entity.origin[0] - width / 2,
-        entity.origin[1] + lineOffset,
-      ];
+        const entityOrigin = [
+          entity.origin[0] - width / 2,
+          entity.origin[1] + lineOffset,
+        ];
 
-      const lineCount = measuredLetters
-        .map((e) => e.line)
-        .sort((a, b) => a - b)[measuredLetters.length - 1];
+        const lineCount = measuredLetters
+          .map((e) => e.line)
+          .sort((a, b) => a - b)[measuredLetters.length - 1];
 
-      if (entity.letter.transform && entity.letter.transform[i]) {
-        const letterTransform = entity.letter.transform[i];
-        const letterOrigin = [0, 0];
+        if (entity.letter.transform && entity.letter.transform[i]) {
+          const letterTransform = entity.letter.transform[i];
+          const letterOrigin = [0, 0];
 
-        let origin = letterOrigin.map(
-          (val, index) => val + entityOrigin[index]
-        );
+          let origin = letterOrigin.map(
+            (val, index) => val + entityOrigin[index]
+          );
 
-        // Calculate the spacing
+          // Calculate the spacing
 
-        const spacing =
-          measuredLetter.bounds.x_advance - measuredLetter.bounds.width;
+          const spacing =
+            measuredLetter.bounds.x_advance - measuredLetter.bounds.width;
 
-        //console.log(spacing);
+          //console.log(spacing);
 
-        // Center the origin
+          // Center the origin
 
-        origin[0] =
-          origin[0] + measuredLetter.bounds.width / 2 + measuredLetter.offset.x;
-        origin[1] = origin[1] - metrics.descent + lineOffset;
+          origin[0] =
+            origin[0] +
+            measuredLetter.bounds.width / 2 +
+            measuredLetter.offset.x;
+          origin[1] = origin[1] - metrics.descent + lineOffset;
 
-        //console.log(measuredLetter.bounds);
+          //console.log(measuredLetter.bounds);
 
-        canvas.translate(origin[0], origin[1]);
+          canvas.translate(origin[0], origin[1]);
 
-        canvas.scale(letterTransform.scale[0], letterTransform.scale[1]);
+          canvas.scale(letterTransform.scale[0], letterTransform.scale[1]);
 
-        canvas.translate(
-          -origin[0] + measuredLetter.offset.x,
-          -origin[1] + lineOffset
-        );
+          canvas.translate(
+            -origin[0] + measuredLetter.offset.x,
+            -origin[1] + lineOffset
+          );
 
-        /*  canvas.translate(
+          /*  canvas.translate(
           measuredLetter.offset.x + measuredLetter.bounds.width / 2,
           0
         ); */
-      }
+        }
 
-      /*     canvas.translate(
+        /*     canvas.translate(
         width * -0.5,
         lineCount * (-entity.letter.paint.size / 2)
       ); */
 
-      canvas.drawTextBlob(blob, entityOrigin[0], entityOrigin[1], paint);
+        canvas.drawTextBlob(blob, entityOrigin[0], entityOrigin[1], paint);
 
-      canvas.restore();
+        canvas.restore();
 
-      blob.delete();
+        blob.delete();
+      }
     }
   }
 }