@revideo/2d 0.5.6 → 0.5.7-alpha.1076

package/src/lib/components/Layout.ts

@@ -1,10 +1,8 @@
 import {
   BBox,
-  boolLerp,
+  DependencyContext,
   InterpolationFunction,
-  modify,
   Origin,
-  originToOffset,
   PossibleSpacing,
   PossibleVector2,
   SerializedVector2,
@@ -13,14 +11,18 @@ import {
   SimpleSignal,
   SimpleVector2Signal,
   SpacingSignal,
-  threadable,
   ThreadGenerator,
   TimingFunction,
-  tween,
   Vector2,
   Vector2Signal,
+  boolLerp,
+  modify,
+  originToOffset,
+  threadable,
+  tween,
 } from '@revideo/core';
 import {
+  Vector2LengthSignal,
   addInitializer,
   cloneable,
   computed,
@@ -30,7 +32,6 @@ import {
   interpolation,
   nodeName,
   signal,
-  Vector2LengthSignal,
   vector2Signal,
 } from '../decorators';
 import {spacingSignal} from '../decorators/spacingSignal';
@@ -283,6 +284,8 @@ export class Layout extends Node {
   @signal()
   public declare readonly textAlign: SimpleSignal<CanvasTextAlign, this>;
 
+  protected fontLoaded: boolean = false;
+
   protected getX(): number {
     if (this.isLayoutRoot()) {
       return this.x.context.getter();
@@ -961,6 +964,15 @@ export class Layout extends Node {
 
   @computed()
   protected applyFont() {
+    if (!this.fontLoaded) {
+      DependencyContext.collectPromise(
+        (async () => {
+          await document.fonts?.ready;
+          this.fontLoaded = true;
+        })(),
+      );
+    }
+
     this.element.style.fontFamily = this.fontFamily.isInitial()
       ? ''
       : this.fontFamily();

package/src/lib/components/Txt.test.tsx

@@ -10,6 +10,7 @@ describe('Txt', () => {
 
   it('Handle plain text', () => {
     const node = (<Txt lineWidth={8}>test</Txt>) as Txt;
+    node.toPromise();
 
     const parseSpy = vi.spyOn(node as any, 'parseChildren');
     const leaf = node.childAs<TxtLeaf>(0);
@@ -38,6 +39,7 @@ describe('Txt', () => {
         Apple <Txt>Banana</Txt> Cherry
       </Txt>
     ) as Txt;
+    node.toPromise();
 
     const first = node.childAs<TxtLeaf>(0);
     const second = node.childAs<Txt>(1);

package/src/lib/components/TxtLeaf.ts

@@ -61,9 +61,9 @@ export class TxtLeaf extends Shape {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
-    await document.fonts?.ready;
     this.requestFontUpdate();
     this.applyStyle(context);
+    await document.fonts?.ready;
     this.applyText(context);
     context.font = this.styles.font;
     if ('letterSpacing' in context) {

package/src/lib/components/__tests__/clone.test.tsx

@@ -52,6 +52,7 @@ describe('clone', () => {
     const template = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
+    template.toPromise();
     const clone = template.snapshotClone({end: 0});
 
     expect(clone.lineWidth()).toBe(8);

package/src/lib/components/__tests__/state.test.tsx

@@ -12,6 +12,7 @@ describe('state', () => {
     const circle = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
+    circle.toPromise();
     circle.save();
 
     circle.lineWidth(16);