canvasengine 2.0.0-beta.6 → 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';
@@ -204,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>;
 };
@@ -226,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;
@@ -245,13 +253,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 +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

@@ -1307,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 {
@@ -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 {