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

package/dist/index.d.ts

@@ -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;
@@ -1114,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, type ObjectChange, 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

@@ -1308,9 +1308,9 @@ function createComponent(tag, props) {
 function loop(itemsSubject, createElementFn) {
   let elements = [];
   const isArraySignal = "_subject" in itemsSubject && "items" in itemsSubject._subject;
-  const addAt = (items2, insertIndex, keys2) => {
-    return items2.map((item, index) => {
-      const key = keys2 ? keys2[index] : typeof insertIndex === "number" ? insertIndex + index : insertIndex;
+  const addAt = (items, insertIndex, keys) => {
+    return items.map((item, index) => {
+      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);
@@ -1334,8 +1334,8 @@ function loop(itemsSubject, createElementFn) {
       };
     }
   };
-  const { items, keys } = getInitialItems();
   return defer(() => {
+    const { items, keys } = getInitialItems();
     let initialItems = [...items];
     let initialKeys = keys ? [...keys] : void 0;
     let init = true;
@@ -1343,7 +1343,7 @@ function loop(itemsSubject, createElementFn) {
       map((event) => {
         const { type, items: items2 } = event;
         const index = "index" in event ? event.index : event.key;
-        if (init) {
+        if (init && type != "add") {
           if (elements.length > 0) {
             return {
               elements,
@@ -1396,6 +1396,7 @@ function loop(itemsSubject, createElementFn) {
           } else {
             newElements = addAt(items2, index);
           }
+          init = false;
           return {
             prev: lastElement,
             elements: newElements,
@@ -1638,7 +1639,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);
@@ -1707,7 +1708,7 @@ function DisplayObject(extendClass) {
           effect3(() => {
             setter(parentSize() * (parseInt(size) / 100));
             if (this.isFlex) {
-              __privateMethod(this, _DisplayObject_instances, applyFlexLayout_fn).call(this);
+              this.applyFlexLayout();
             }
           });
         } else {
@@ -1723,6 +1724,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,
@@ -1900,18 +1909,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 = {
@@ -2277,7 +2279,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();
     }
@@ -2295,6 +2297,7 @@ function animatedSignal(initialValue, options = {}) {
       // TODO
       duration: 20,
       ...options,
+      ...animationConfig,
       from: prevState.current,
       to: newValue,
       onUpdate: (value) => {
@@ -2315,11 +2318,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;
@@ -2821,8 +2838,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 = "";
@@ -3218,6 +3235,7 @@ export {
   utils_exports as Utils,
   Video,
   Viewport,
+  animatedSequence,
   animatedSignal,
   bootstrapCanvas,
   cond,