canvasengine 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/index.js

@@ -967,7 +967,7 @@ var ViewportFollow = class extends Directive {
     if (!viewport) {
       throw error("ViewportFollow directive requires a Viewport component to be mounted in the same context");
     }
-    viewport.follow(element.componentInstance);
+    if (viewportFollow) viewport.follow(element.componentInstance);
   }
   onUpdate(props) {
   }
@@ -1112,6 +1112,7 @@ import { isSignal as isSignal2 } from "@signe/reactive";
 import {
   Observable,
   Subject,
+  defer,
   from,
   map,
   of
@@ -1305,90 +1306,135 @@ function createComponent(tag, props) {
   return element;
 }
 function loop(itemsSubject, createElementFn) {
-  let elements = [];
-  let elementMap = /* @__PURE__ */ new Map();
-  return new Observable((subscriber) => {
+  return defer(() => {
+    let elements = [];
+    let elementMap = /* @__PURE__ */ new Map();
+    let isFirstSubscription = true;
     const isArraySignal = (signal7) => Array.isArray(signal7());
-    const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
-      if (change.type === "init" || change.type === "reset") {
-        elements.forEach((el) => el.destroy());
-        elements = [];
-        elementMap.clear();
-        const items = itemsSubject();
-        if (items) {
-          items.forEach((item, index) => {
-            const element = createElementFn(item, index);
-            if (element) {
-              elements.push(element);
-              elementMap.set(index, element);
-            }
+    return new Observable((subscriber) => {
+      const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
+        if (isFirstSubscription) {
+          isFirstSubscription = false;
+          elements.forEach((el) => el.destroy());
+          elements = [];
+          elementMap.clear();
+          const items = itemsSubject();
+          if (items) {
+            items.forEach((item, index) => {
+              const element = createElementFn(item, index);
+              if (element) {
+                elements.push(element);
+                elementMap.set(index, element);
+              }
+            });
+          }
+          subscriber.next({
+            elements: [...elements]
           });
+          return;
         }
-      } else if (change.type === "add" && change.index !== void 0) {
-        const newElements = change.items.map((item, i) => {
-          const element = createElementFn(item, change.index + i);
-          if (element) {
-            elementMap.set(change.index + i, element);
+        if (change.type === "init" || change.type === "reset") {
+          elements.forEach((el) => el.destroy());
+          elements = [];
+          elementMap.clear();
+          const items = itemsSubject();
+          if (items) {
+            items.forEach((item, index) => {
+              const element = createElementFn(item, index);
+              if (element) {
+                elements.push(element);
+                elementMap.set(index, element);
+              }
+            });
           }
-          return element;
-        }).filter((el) => el !== null);
-        elements.splice(change.index, 0, ...newElements);
-      } else if (change.type === "remove" && change.index !== void 0) {
-        const removed = elements.splice(change.index, 1);
-        removed.forEach((el) => {
-          el.destroy();
-          elementMap.delete(change.index);
-        });
-      }
-      subscriber.next({
-        elements
-      });
-    }) : itemsSubject.observable.subscribe((change) => {
-      const key = change.key;
-      if (change.type === "init" || change.type === "reset") {
-        elements.forEach((el) => el.destroy());
-        elements = [];
-        elementMap.clear();
-        const items = itemsSubject();
-        if (items) {
-          Object.entries(items).forEach(([key2, value]) => {
-            const element = createElementFn(value, key2);
+        } else if (change.type === "add" && change.index !== void 0) {
+          const newElements = change.items.map((item, i) => {
+            const element = createElementFn(item, change.index + i);
             if (element) {
-              elements.push(element);
-              elementMap.set(key2, element);
+              elementMap.set(change.index + i, element);
             }
+            return element;
+          }).filter((el) => el !== null);
+          elements.splice(change.index, 0, ...newElements);
+        } else if (change.type === "remove" && change.index !== void 0) {
+          const removed = elements.splice(change.index, 1);
+          removed.forEach((el) => {
+            el.destroy();
+            elementMap.delete(change.index);
           });
         }
-      } else if (change.type === "add" && change.key && change.value !== void 0) {
-        const element = createElementFn(change.value, key);
-        if (element) {
-          elements.push(element);
-          elementMap.set(key, element);
-        }
-      } else if (change.type === "remove" && change.key) {
-        const index = elements.findIndex((el) => elementMap.get(key) === el);
-        if (index !== -1) {
-          const [removed] = elements.splice(index, 1);
-          removed.destroy();
-          elementMap.delete(key);
+        subscriber.next({
+          elements: [...elements]
+          // Create a new array to ensure change detection
+        });
+      }) : itemsSubject.observable.subscribe((change) => {
+        const key = change.key;
+        if (isFirstSubscription) {
+          isFirstSubscription = false;
+          elements.forEach((el) => el.destroy());
+          elements = [];
+          elementMap.clear();
+          const items = itemsSubject();
+          if (items) {
+            Object.entries(items).forEach(([key2, value]) => {
+              const element = createElementFn(value, key2);
+              if (element) {
+                elements.push(element);
+                elementMap.set(key2, element);
+              }
+            });
+          }
+          subscriber.next({
+            elements: [...elements]
+          });
+          return;
         }
-      } else if (change.type === "update" && change.key && change.value !== void 0) {
-        const index = elements.findIndex((el) => elementMap.get(key) === el);
-        if (index !== -1) {
-          const oldElement = elements[index];
-          oldElement.destroy();
-          const newElement = createElementFn(change.value, key);
-          if (newElement) {
-            elements[index] = newElement;
-            elementMap.set(key, newElement);
+        if (change.type === "init" || change.type === "reset") {
+          elements.forEach((el) => el.destroy());
+          elements = [];
+          elementMap.clear();
+          const items = itemsSubject();
+          if (items) {
+            Object.entries(items).forEach(([key2, value]) => {
+              const element = createElementFn(value, key2);
+              if (element) {
+                elements.push(element);
+                elementMap.set(key2, element);
+              }
+            });
+          }
+        } else if (change.type === "add" && change.key && change.value !== void 0) {
+          const element = createElementFn(change.value, key);
+          if (element) {
+            elements.push(element);
+            elementMap.set(key, element);
+          }
+        } else if (change.type === "remove" && change.key) {
+          const index = elements.findIndex((el) => elementMap.get(key) === el);
+          if (index !== -1) {
+            const [removed] = elements.splice(index, 1);
+            removed.destroy();
+            elementMap.delete(key);
+          }
+        } else if (change.type === "update" && change.key && change.value !== void 0) {
+          const index = elements.findIndex((el) => elementMap.get(key) === el);
+          if (index !== -1) {
+            const oldElement = elements[index];
+            oldElement.destroy();
+            const newElement = createElementFn(change.value, key);
+            if (newElement) {
+              elements[index] = newElement;
+              elementMap.set(key, newElement);
+            }
           }
         }
-      }
-      subscriber.next({
-        elements
+        subscriber.next({
+          elements: [...elements]
+          // Create a new array to ensure change detection
+        });
       });
+      return subscription;
     });
-    return subscription;
   });
 }
 function cond(condition, createElementFn) {
@@ -2978,7 +3024,7 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
       this.worldHeight = props.worldHeight;
     }
     if (props.clamp) {
-      this.clamp(props.clamp);
+      this.clamp(props.clamp.value ?? props.clamp);
     }
     if (props.wheel) {
       if (props.wheel === true) {