add system font loading

improve drawing
implement staggered text
begin refactor of drawing code

app/src/primitives/AnimatedEntities.ts

@@ -1,5 +1,11 @@
 import { z } from "zod";
-import { EllipseEntity, EntityType, RectEntity, TextEntity } from "./Entities";
+import {
+  BaseEntity,
+  EllipseEntity,
+  EntityType,
+  RectEntity,
+  TextEntity,
+} from "./Entities";
 import { AnimatedVec2 } from "./Values";
 import { TextPaint } from "./Paint";
 
@@ -20,7 +26,7 @@ export const AnimatedTransform = z.object({
   scale: AnimatedVec2,
 });
 
-export const AnimatedStaggeredText = z.object({
+export const AnimatedStaggeredTextEntity = BaseEntity.extend({
   /** Transform applied to the whole layer. */
   transform: AnimatedTransform,
   /** The staggered delay that is applied for each letter. Gets multiplied by the index of the letter. */
@@ -31,6 +37,7 @@ export const AnimatedStaggeredText = z.object({
     paint: TextPaint,
   }),
   text: z.string(),
+  origin: AnimatedVec2,
   animation_data: AnimationData,
   type: z.literal(EntityType.Enum.StaggeredText),
 });
@@ -60,7 +67,7 @@ export const AnimatedEllipseEntity = EllipseEntity.extend({
 export const AnimatedEntity = z.discriminatedUnion("type", [
   AnimatedRectEntity,
   AnimatedTextEntity,
-  AnimatedStaggeredText,
+  AnimatedStaggeredTextEntity,
   AnimatedEllipseEntity,
 ]);
 

app/src/primitives/Entities.ts

@@ -6,10 +6,6 @@ const EntityTypeOptions = ["Text", "Ellipse", "Rect", "StaggeredText"] as const;
 
 export const EntityType = z.enum(EntityTypeOptions);
 
-export const GeometryEntity = z.object({
-  paint: Paint,
-});
-
 export const Transform = z.object({
   skew: Vec2,
   rotate: Vec2,
@@ -17,12 +13,25 @@ export const Transform = z.object({
   scale: Vec2,
 });
 
-export const StaggeredText = z.object({
+export const Cache = z.object({
+  valid: z.boolean().optional().default(false),
+});
+
+export const BaseEntity = z.object({
+  id: z.string(),
+  cache: Cache,
+});
+
+export const GeometryEntity = BaseEntity.extend({
+  paint: Paint,
+});
+
+export const StaggeredText = BaseEntity.extend({
   letter: z.object({
-    position: Vec2,
-    transform: Transform,
+    transform: z.array(Transform).optional(),
     paint: TextPaint,
   }),
+  origin: Vec2,
   text: z.string(),
   type: z.literal(EntityType.Enum.StaggeredText),
 });
@@ -43,7 +52,7 @@ export const EllipseEntity = GeometryEntity.extend({
   transform: z.nullable(Transform),
 });
 
-export const TextEntity = z.object({
+export const TextEntity = BaseEntity.extend({
   type: z.literal(EntityType.Enum.Text),
   paint: TextPaint,
   origin: Vec2,
@@ -55,6 +64,7 @@ export const Entity = z.discriminatedUnion("type", [
   RectEntity,
   EllipseEntity,
   TextEntity,
+  StaggeredText,
 ]);
 
 export const Entities = z.array(Entity);