canvasengine 2.0.0-beta.6 → 2.0.0-beta.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.8",
   "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

@@ -23,8 +23,15 @@ export type ArrayChange<T> = {
   items: T[];
 };
 
+export type ObjectChange<T> = {
+  type: "add" | "remove" | "update" | "init" | "reset";
+  key?: string;
+  value?: T;
+  items: T[];
+};
+
 type ElementObservable<T> = Observable<
-  ArrayChange<T> & {
+  (ArrayChange<T> | ObjectChange<T>) & {
     value: Element | Element[];
   }
 >;
@@ -53,10 +60,13 @@ export interface Element<T = ComponentInstance> {
   allElements: Subject<void>;
 }
 
-type FlowObservable = Observable<{
+type FlowResult = {
   elements: Element[];
   prev?: Element;
-}>;
+  fullElements?: Element[];
+};
+
+type FlowObservable = Observable<FlowResult>;
 
 const components: { [key: string]: any } = {};
 
@@ -292,32 +302,58 @@ export function createComponent(tag: string, props?: Props): Element {
 }
 
 /**
- * Observes a BehaviorSubject containing an array of items and dynamically creates child elements for each item.
+ * Observes a BehaviorSubject containing an array or object of items and dynamically creates child elements for each item.
  *
- * @param {BehaviorSubject<Array>} itemsSubject - A BehaviorSubject that emits an array of items.
+ * @param {WritableArraySignal<T> | WritableObjectSignal<T>} itemsSubject - A signal that emits an array or object of items.
  * @param {Function} createElementFn - A function that takes an item and returns an element representation.
  * @returns {Observable} An observable that emits the list of created child elements.
  */
-export function loop<T = any>(
-  itemsSubject: WritableArraySignal<T>,
-  createElementFn: (item: any, index: number) => Element | Promise<Element>
+export function loop<T>(
+  itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>,
+  createElementFn: (item: T, index: number | string) => Element | null
 ): FlowObservable {
   let elements: Element[] = [];
 
-  const addAt = (items, insertIndex: number) => {
+  const isArraySignal = '_subject' in itemsSubject && 'items' in (itemsSubject as any)._subject;
+
+  const addAt = (items: T[], insertIndex: number | string, keys?: string[]): Element[] => {
     return items.map((item, index) => {
-      const element = createElementFn(item, insertIndex + index);
-      elements.splice(insertIndex + index, 0, element as Element);
+      const key = keys ? keys[index] : (typeof insertIndex === 'number' ? insertIndex + index : insertIndex);
+      const element = createElementFn(item, key);
+      if (typeof insertIndex === 'number') {
+        elements.splice(insertIndex + index, 0, element);
+      } else {
+        elements.push(element);
+      }
       return element;
     });
   };
 
+  const getInitialItems = () => {
+    if (isArraySignal) {
+      return {
+        items: (itemsSubject as any)._subject.items as T[],
+        keys: undefined as string[] | undefined
+      };
+    } else {
+      const entries = Object.entries((itemsSubject as any)._subject.value.value) as [string, T][];
+      return {
+        items: entries.map(([_, value]) => value),
+        keys: entries.map(([key]) => key)
+      };
+    }
+  };
+
   return defer(() => {
-    let initialItems = [...itemsSubject._subject.items];
+    const { items, keys } = getInitialItems();
+    let initialItems = [...items];
+    let initialKeys = keys ? [...keys] : undefined;
     let init = true;
-    return itemsSubject.observable.pipe(
-      map((event: ArrayChange<T>) => {
-        const { type, items, index } = event;
+    return (itemsSubject.observable as Observable<ArrayChange<T> | ObjectChange<T>>).pipe(
+      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 (elements.length > 0) {
             return {
@@ -325,8 +361,9 @@ export function loop<T = any>(
               fullElements: elements,
             };
           }
-          const newElements = addAt(initialItems, 0);
+          const newElements = addAt(initialItems, 0, initialKeys);
           initialItems = [];
+          initialKeys = undefined;
           init = false;
           return {
             elements: newElements,
@@ -339,25 +376,64 @@ export function loop<T = any>(
             });
             elements = [];
           }
-          const newElements = addAt(items, 0);
+          if (!isArraySignal) {
+            const entries = Object.entries((itemsSubject as any)._subject.value.value) as [string, T][];
+            const newElements = addAt(
+              entries.map(([_, value]) => value),
+              0,
+              entries.map(([key]) => key)
+            );
+            return {
+              elements: newElements,
+              fullElements: elements,
+            };
+          }
+          const newElements = addAt(items as T[], 0);
           return {
             elements: newElements,
             fullElements: elements,
           };
         } else if (type == "add" && index != undefined) {
-          const lastElement = elements[index - 1];
-          const newElements = addAt(items, index);
+          const lastElement = typeof index === 'number' ? elements[index - 1] : elements[elements.length - 1];
+          let newElements: Element[];
+          if (!isArraySignal && typeof index === 'string') {
+            // For object updates, create a single element with the new value
+            const value = (event as ObjectChange<T>).value;
+            if (value !== undefined) {
+              newElements = [createElementFn(value, index)];
+              elements.push(newElements[0]);
+            } else {
+              newElements = [];
+            }
+          } else {
+            // For array updates, use addAt with the items array
+            newElements = addAt(items as T[], index);
+          }
           return {
             prev: lastElement,
             elements: newElements,
             fullElements: elements,
           };
-        } else if (index != undefined && type == "remove") {
-          const currentElement = elements[index];
-          destroyElement(currentElement);
-          elements.splice(index, 1);
+        } else if (type == "remove") {
+          if (!isArraySignal && typeof index === 'string') {
+            // For object property deletion
+            const elementIndex = elements.findIndex(el => {
+              return el.props.text === index || el.props.key === index;
+            });
+            if (elementIndex !== -1) {
+              const currentElement = elements[elementIndex];
+              destroyElement(currentElement);
+              elements.splice(elementIndex, 1);
+            }
+          } else if (typeof index === 'number') {
+            // For array element deletion
+            const currentElement = elements[index];
+            destroyElement(currentElement);
+            elements.splice(index, 1);
+          }
           return {
             elements: [],
+            fullElements: elements,
           };
         }
         return {