canvasengine 2.0.0-beta.7 → 2.0.0-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.7",
+  "version": "2.0.0-beta.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/DisplayObject.ts

@@ -170,7 +170,7 @@ export function DisplayObject(extendClass) {
           effect(() => {
             setter(parentSize() * (parseInt(size) / 100));
             if (this.isFlex) {
-              this.#applyFlexLayout();
+              this.applyFlexLayout();
             }
           });
         } else {
@@ -188,7 +188,7 @@ export function DisplayObject(extendClass) {
         );
     }
 
-    #applyFlexLayout() {
+    applyFlexLayout() {
       this.calculateLayout();
       for (let child of this.children) {
         const { left, top } = child.node.getComputedLayout();
@@ -201,7 +201,7 @@ export function DisplayObject(extendClass) {
       if (!this.parent) return;
       if (props.flexDirection || props.justifyContent) {
         this.isFlex = true;
-        this.#applyFlexLayout();
+        this.applyFlexLayout();
       }
     }
 

package/src/components/Text.ts

@@ -65,8 +65,8 @@ class CanvasText extends DisplayObject(PixiText) {
         this.typewriterOptions = props.typewriter;
       }
     }
-    if (props.text) {
-      this.text = props.text;
+    if (props.text !== undefined) {
+      this.text = ''+props.text;
     }
     if (props.text !== undefined && props.text !== this.fullText && this.fullProps.typewriter) {
       this.text = "";

package/src/engine/animation.ts

@@ -1,10 +1,11 @@
 import { effect, signal, type WritableSignal } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
 
-interface AnimateOptions<T> {
+export interface AnimateOptions<T> {
   duration?: number;
   ease?: (t: number) => number;
   onUpdate?: (value: T) => void;
+  onComplete?: () => void;
 }
 
 export interface AnimatedState<T> {
@@ -15,7 +16,7 @@ export interface AnimatedState<T> {
 
 export interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
   (): T;
-  set: (newValue: T) => void;
+  set: (newValue: T, options?: AnimateOptions<T>) => Promise<void>;
   animatedState: WritableSignal<AnimatedState<T>>;
   update: (updater: (value: T) => T) => void;
 }
@@ -60,7 +61,8 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
 
   function animatedSignal(): AnimatedState<T>;
   function animatedSignal(newValue: T): void;
-  function animatedSignal(newValue?: T): AnimatedState<T> | void {
+  function animatedSignal(newValue: T, animationConfig: AnimateOptions<T>): void;
+  function animatedSignal(newValue?: T, animationConfig: AnimateOptions<T> = {}): AnimatedState<T> | void {
     if (newValue === undefined) {
       return privateSignal();
     }
@@ -82,6 +84,7 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
        // TODO
        duration: 20,
       ...options,
+      ...animationConfig,
       from: prevState.current,
       to: newValue,
       onUpdate: (value) => {
@@ -105,9 +108,42 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
   fn.update = (updater: (value: T) => any) => {
     animatedSignal(updater(privateSignal().current));
   }
-  fn.set = (newValue: T) => {
-    animatedSignal(newValue);
+  fn.set = async (newValue: T, animationConfig: AnimateOptions<T> = {}) => {
+    return new Promise<void>((resolve) => {
+      animatedSignal(newValue, {
+        ...animationConfig,
+        onComplete: resolve
+      });
+    })
   }
 
   return fn as any
+}
+
+/**
+ * Executes a sequence of animations. If an array is provided as an element in the sequence,
+ * those animations will be executed in parallel.
+ * 
+ * @param sequence Array of animation functions or arrays of animation functions for parallel execution
+ * @returns Promise that resolves when all animations are complete
+ * @example
+ * ```ts
+ * await animatedSequence([
+ *   () => value1.set(10),
+ *   [
+ *     () => value2.set(20),
+ *     () => value3.set(30)
+ *   ],
+ *   () => value1.set(0)
+ * ])
+ * ```
+ */
+export async function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]) {
+  for (const item of sequence) {
+    if (Array.isArray(item)) {
+      await Promise.all(item.map(fn => fn()));
+    } else {
+      await item();
+    }
+  }
 }

package/src/engine/reactive.ts

@@ -344,9 +344,8 @@ export function loop<T>(
     }
   };
 
-  const { items, keys } = getInitialItems();
-
   return defer(() => {
+    const { items, keys } = getInitialItems();
     let initialItems = [...items];
     let initialKeys = keys ? [...keys] : undefined;
     let init = true;
@@ -354,8 +353,7 @@ export function loop<T>(
       map((event: ArrayChange<T> | ObjectChange<T>): FlowResult => {
         const { type, items } = event;
         const index = 'index' in event ? event.index : (event as ObjectChange<T>).key;
-
-        if (init) {
+        if (init && type != "add") {
           if (elements.length > 0) {
             return {
               elements: elements,
@@ -410,6 +408,7 @@ export function loop<T>(
             // For array updates, use addAt with the items array
             newElements = addAt(items as T[], index);
           }
+          init = false;
           return {
             prev: lastElement,
             elements: newElements,