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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _signe_reactive from '@signe/reactive';
-import { WritableSignal, Signal, WritableArraySignal } from '@signe/reactive';
+import { WritableSignal, Signal, WritableArraySignal, WritableObjectSignal } from '@signe/reactive';
 export * from '@signe/reactive';
 import { Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
@@ -13,6 +13,7 @@ interface AnimateOptions<T> {
     duration?: number;
     ease?: (t: number) => number;
     onUpdate?: (value: T) => void;
+    onComplete?: () => void;
 }
 interface AnimatedState<T> {
     current: T;
@@ -21,7 +22,7 @@ interface AnimatedState<T> {
 }
 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;
 }
@@ -45,6 +46,25 @@ declare function isAnimatedSignal(signal: WritableSignal<any>): boolean;
  * animatedValue.animatedState() // { current: 10, start: 10, end: 11 }
  */
 declare function animatedSignal<T>(initialValue: T, options?: AnimateOptions<T>): AnimatedSignal<T>;
+/**
+ * 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)
+ * ])
+ * ```
+ */
+declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]): Promise<void>;
 
 type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
 
@@ -157,7 +177,7 @@ declare function DisplayObject(extendClass: any): {
         onInit(props: any): void;
         onMount({ parent, props }: Element</*elided*/ any>, index?: number): void;
         effectSize(width: Size, height: Size): void;
-        "__#1@#applyFlexLayout"(): void;
+        applyFlexLayout(): void;
         "__#1@#flexRender"(props: any): void;
         onUpdate(props: any): void;
         onDestroy(): void;
@@ -204,6 +224,12 @@ type ArrayChange<T> = {
     index?: number;
     items: T[];
 };
+type ObjectChange<T> = {
+    type: "add" | "remove" | "update" | "init" | "reset";
+    key?: string;
+    value?: T;
+    items: T[];
+};
 type NestedSignalObjects = {
     [Key in string]: NestedSignalObjects | Signal<any>;
 };
@@ -226,10 +252,12 @@ interface Element<T = ComponentInstance> {
     destroy: () => void;
     allElements: Subject<void>;
 }
-type FlowObservable = Observable<{
+type FlowResult = {
     elements: Element[];
     prev?: Element;
-}>;
+    fullElements?: Element[];
+};
+type FlowObservable = Observable<FlowResult>;
 declare const isElement: (value: any) => value is Element;
 declare const isPrimitive: (value: any) => boolean;
 declare function registerComponent(name: any, component: any): void;
@@ -245,13 +273,13 @@ declare function registerComponent(name: any, component: any): void;
  */
 declare 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.
  */
-declare function loop<T = any>(itemsSubject: WritableArraySignal<T>, createElementFn: (item: any, index: number) => Element | Promise<Element>): FlowObservable;
+declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
 /**
  * Conditionally creates and destroys elements based on a condition signal.
  *
@@ -1106,4 +1134,4 @@ declare namespace utils {
   export { utils_arrayEquals as arrayEquals, utils_calculateDistance as calculateDistance, utils_error as error, utils_fps2ms as fps2ms, utils_get as get, utils_isBrowser as isBrowser, utils_isFunction as isFunction, utils_isObject as isObject, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
 }
 
-export { type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
+export { type AnimateOptions, type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, type ObjectChange, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };

package/dist/index.js

@@ -1307,19 +1307,42 @@ function createComponent(tag, props) {
 }
 function loop(itemsSubject, createElementFn) {
   let elements = [];
-  const addAt = (items, insertIndex) => {
+  const isArraySignal = "_subject" in itemsSubject && "items" in itemsSubject._subject;
+  const addAt = (items, insertIndex, keys) => {
     return items.map((item, index) => {
-      const element = createElementFn(item, insertIndex + index);
-      elements.splice(insertIndex + index, 0, 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._subject.items,
+        keys: void 0
+      };
+    } else {
+      const entries = Object.entries(itemsSubject._subject.value.value);
+      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] : void 0;
     let init = true;
     return itemsSubject.observable.pipe(
       map((event) => {
-        const { type, items, index } = event;
+        const { type, items: items2 } = event;
+        const index = "index" in event ? event.index : event.key;
         if (init) {
           if (elements.length > 0) {
             return {
@@ -1327,8 +1350,9 @@ function loop(itemsSubject, createElementFn) {
               fullElements: elements
             };
           }
-          const newElements = addAt(initialItems, 0);
+          const newElements = addAt(initialItems, 0, initialKeys);
           initialItems = [];
+          initialKeys = void 0;
           init = false;
           return {
             elements: newElements,
@@ -1341,25 +1365,60 @@ function loop(itemsSubject, createElementFn) {
             });
             elements = [];
           }
-          const newElements = addAt(items, 0);
+          if (!isArraySignal) {
+            const entries = Object.entries(itemsSubject._subject.value.value);
+            const newElements2 = addAt(
+              entries.map(([_, value]) => value),
+              0,
+              entries.map(([key]) => key)
+            );
+            return {
+              elements: newElements2,
+              fullElements: elements
+            };
+          }
+          const newElements = addAt(items2, 0);
           return {
             elements: newElements,
             fullElements: elements
           };
         } else if (type == "add" && index != void 0) {
-          const lastElement = elements[index - 1];
-          const newElements = addAt(items, index);
+          const lastElement = typeof index === "number" ? elements[index - 1] : elements[elements.length - 1];
+          let newElements;
+          if (!isArraySignal && typeof index === "string") {
+            const value = event.value;
+            if (value !== void 0) {
+              newElements = [createElementFn(value, index)];
+              elements.push(newElements[0]);
+            } else {
+              newElements = [];
+            }
+          } else {
+            newElements = addAt(items2, index);
+          }
           return {
             prev: lastElement,
             elements: newElements,
             fullElements: elements
           };
-        } else if (index != void 0 && type == "remove") {
-          const currentElement = elements[index];
-          destroyElement(currentElement);
-          elements.splice(index, 1);
+        } else if (type == "remove") {
+          if (!isArraySignal && typeof index === "string") {
+            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") {
+            const currentElement = elements[index];
+            destroyElement(currentElement);
+            elements.splice(index, 1);
+          }
           return {
-            elements: []
+            elements: [],
+            fullElements: elements
           };
         }
         return {
@@ -1579,7 +1638,7 @@ var EVENTS2 = [
   "wheelcapture"
 ];
 function DisplayObject(extendClass) {
-  var _canvasContext, _DisplayObject_instances, applyFlexLayout_fn, flexRender_fn, setAlign_fn, setEdgeSize_fn, _a;
+  var _canvasContext, _DisplayObject_instances, flexRender_fn, setAlign_fn, setEdgeSize_fn, _a;
   return _a = class extends extendClass {
     constructor() {
       super(...arguments);
@@ -1648,7 +1707,7 @@ function DisplayObject(extendClass) {
           effect3(() => {
             setter(parentSize() * (parseInt(size) / 100));
             if (this.isFlex) {
-              __privateMethod(this, _DisplayObject_instances, applyFlexLayout_fn).call(this);
+              this.applyFlexLayout();
             }
           });
         } else {
@@ -1664,6 +1723,14 @@ function DisplayObject(extendClass) {
           this.parent.displayHeight
         );
     }
+    applyFlexLayout() {
+      this.calculateLayout();
+      for (let child of this.children) {
+        const { left, top } = child.node.getComputedLayout();
+        child.x = left;
+        child.y = top;
+      }
+    }
     onUpdate(props) {
       this.fullProps = {
         ...this.fullProps,
@@ -1841,18 +1908,11 @@ function DisplayObject(extendClass) {
     getHeight() {
       return this.displayHeight();
     }
-  }, _canvasContext = new WeakMap(), _DisplayObject_instances = new WeakSet(), applyFlexLayout_fn = function() {
-    this.calculateLayout();
-    for (let child of this.children) {
-      const { left, top } = child.node.getComputedLayout();
-      child.x = left;
-      child.y = top;
-    }
-  }, flexRender_fn = function(props) {
+  }, _canvasContext = new WeakMap(), _DisplayObject_instances = new WeakSet(), flexRender_fn = function(props) {
     if (!this.parent) return;
     if (props.flexDirection || props.justifyContent) {
       this.isFlex = true;
-      __privateMethod(this, _DisplayObject_instances, applyFlexLayout_fn).call(this);
+      this.applyFlexLayout();
     }
   }, setAlign_fn = function(methodName, align) {
     const mapping = {
@@ -2218,7 +2278,7 @@ function animatedSignal(initialValue, options = {}) {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
   });
-  function animatedSignal2(newValue) {
+  function animatedSignal2(newValue, animationConfig = {}) {
     if (newValue === void 0) {
       return privateSignal();
     }
@@ -2236,6 +2296,7 @@ function animatedSignal(initialValue, options = {}) {
       // TODO
       duration: 20,
       ...options,
+      ...animationConfig,
       from: prevState.current,
       to: newValue,
       onUpdate: (value) => {
@@ -2256,11 +2317,25 @@ function animatedSignal(initialValue, options = {}) {
   fn.update = (updater) => {
     animatedSignal2(updater(privateSignal().current));
   };
-  fn.set = (newValue) => {
-    animatedSignal2(newValue);
+  fn.set = async (newValue, animationConfig = {}) => {
+    return new Promise((resolve) => {
+      animatedSignal2(newValue, {
+        ...animationConfig,
+        onComplete: resolve
+      });
+    });
   };
   return fn;
 }
+async function animatedSequence(sequence) {
+  for (const item of sequence) {
+    if (Array.isArray(item)) {
+      await Promise.all(item.map((fn) => fn()));
+    } else {
+      await item();
+    }
+  }
+}
 
 // src/components/Sprite.ts
 var log2 = console.log;
@@ -2762,8 +2837,8 @@ var CanvasText = class extends DisplayObject(PixiText) {
         this.typewriterOptions = props.typewriter;
       }
     }
-    if (props.text) {
-      this.text = props.text;
+    if (props.text !== void 0) {
+      this.text = "" + props.text;
     }
     if (props.text !== void 0 && props.text !== this.fullText && this.fullProps.typewriter) {
       this.text = "";
@@ -3159,6 +3234,7 @@ export {
   utils_exports as Utils,
   Video,
   Viewport,
+  animatedSequence,
   animatedSignal,
   bootstrapCanvas,
   cond,