canvasengine 2.0.0-beta.5 → 2.0.0-beta.7

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';
@@ -54,6 +54,7 @@ type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'sp
 type Size = number | `${number}%`;
 type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>;
 interface DisplayObjectProps {
+    attach?: any;
     ref?: string;
     x?: SignalOrPrimitive<number>;
     y?: SignalOrPrimitive<number>;
@@ -203,6 +204,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>;
 };
@@ -225,10 +232,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;
@@ -244,14 +253,21 @@ 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 cond(condition: Signal, createElementFn: () => 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.
+ *
+ * @param {Signal<boolean> | boolean} condition - A signal or boolean that determines whether to create an element.
+ * @param {Function} createElementFn - A function that returns an element or a promise that resolves to an element.
+ * @returns {Observable} An observable that emits the created or destroyed element.
+ */
+declare function cond(condition: Signal<boolean> | boolean, createElementFn: () => Element | Promise<Element>): FlowObservable;
 
 declare abstract class Directive {
     abstract onDestroy(): any;
@@ -758,7 +774,7 @@ type SpritePropTypes = SpritePropsWithImage | SpritePropsWithSheet;
 declare const Sprite: ComponentFunction<SpritePropTypes>;
 
 interface VideoProps {
-    source: string;
+    src: string;
     paused?: boolean;
     loop?: boolean;
     muted?: boolean;
@@ -1098,4 +1114,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 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 };

package/dist/index.js

@@ -1115,8 +1115,7 @@ import {
   defer,
   from,
   map,
-  of,
-  switchMap
+  of
 } from "rxjs";
 var components = {};
 var isElement = (value) => {
@@ -1308,19 +1307,42 @@ function createComponent(tag, props) {
 }
 function loop(itemsSubject, createElementFn) {
   let elements = [];
-  const addAt = (items, insertIndex) => {
-    return items.map((item, index) => {
-      const element = createElementFn(item, insertIndex + index);
-      elements.splice(insertIndex + index, 0, element);
+  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 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)
+      };
+    }
+  };
+  const { items, keys } = getInitialItems();
   return defer(() => {
-    let initialItems = [...itemsSubject._subject.items];
+    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 {
@@ -1328,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,
@@ -1342,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 {
@@ -1373,34 +1431,59 @@ function loop(itemsSubject, createElementFn) {
 }
 function cond(condition, createElementFn) {
   let element = null;
-  return condition.observable.pipe(
-    switchMap((bool) => {
-      if (bool) {
-        let _el = createElementFn();
-        if (isPromise(_el)) {
-          return from(_el).pipe(
-            map((el) => {
-              element = _el;
-              return {
+  if (isSignal2(condition)) {
+    const signalCondition = condition;
+    return new Observable((subscriber) => {
+      return signalCondition.observable.subscribe((bool) => {
+        if (bool) {
+          let _el = createElementFn();
+          if (isPromise(_el)) {
+            from(_el).subscribe((el) => {
+              element = el;
+              subscriber.next({
                 type: "init",
                 elements: [el]
-              };
-            })
-          );
+              });
+            });
+          } else {
+            element = _el;
+            subscriber.next({
+              type: "init",
+              elements: [element]
+            });
+          }
+        } else if (element) {
+          destroyElement(element);
+          subscriber.next({
+            elements: []
+          });
+        } else {
+          subscriber.next({
+            elements: []
+          });
         }
-        element = _el;
-        return of({
-          type: "init",
-          elements: [element]
-        });
-      } else if (element) {
-        destroyElement(element);
+      });
+    });
+  } else {
+    if (condition) {
+      let _el = createElementFn();
+      if (isPromise(_el)) {
+        return from(_el).pipe(
+          map((el) => ({
+            type: "init",
+            elements: [el]
+          }))
+        );
       }
       return of({
-        elements: []
+        type: "init",
+        elements: [_el]
       });
-    })
-  );
+    }
+    return of({
+      elements: []
+    });
+  }
 }
 
 // src/hooks/useProps.ts
@@ -2625,7 +2708,7 @@ function Video(props) {
   });
   return h(Sprite2, {
     ...props,
-    image: props.source,
+    image: props.src,
     loader: {
       onComplete: (texture) => {
         const source = texture.source.resource;