canvasengine 2.0.0-beta.20 → 2.0.0-beta.21

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export * from '@signe/reactive';
 import { BehaviorSubject, Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
 import * as PIXI from 'pixi.js';
-import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Geometry, Shader, Texture, TextStyle, Application, Matrix } from 'pixi.js';
+import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Geometry, Shader, Texture, TextStyle, ApplicationOptions, Application, Matrix } from 'pixi.js';
 import * as howler from 'howler';
 export { howler as Howl };
 export { Howler } from 'howler';
@@ -982,6 +982,8 @@ interface NineSliceSpriteProps extends DisplayObjectProps {
 }
 declare function NineSliceSprite(props: NineSliceSpriteProps): Element<ComponentInstance>;
 
+declare const DOMContainer: ComponentFunction<any>;
+
 interface DOMContainerProps extends DisplayObjectProps {
     element: string | {
         value: HTMLElement;
@@ -997,9 +999,9 @@ interface DOMContainerProps extends DisplayObjectProps {
             value?: string | Record<string, string | number>;
         };
     };
-    sortableChildren?: boolean;
+    onBeforeDestroy?: OnHook;
 }
-declare const DOMContainer: ComponentFunction<DOMContainerProps>;
+declare const DOMElement: ComponentFunction<DOMContainerProps>;
 
 interface Listen<T = any> {
     config: T | undefined;
@@ -1059,7 +1061,7 @@ declare function on(triggerSignal: any, callback: (config: any) => void | Promis
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
  */
-declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => Promise<{
+declare const bootstrapCanvas: (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: ApplicationOptions) => Promise<{
     canvasElement: Element<ComponentInstance>;
     app: Application<PIXI.Renderer>;
 }>;
@@ -1220,6 +1222,7 @@ declare function isFunction(val: unknown): boolean;
  * ```
  */
 declare function isObject(val: unknown): boolean;
+declare function isObservable(val: unknown): boolean;
 /**
  * Sets a value in an object using a dot notation path
  * @param {Record<string, any>} obj - Target object
@@ -1273,13 +1276,14 @@ declare const utils_get: typeof get;
 declare const utils_isBrowser: typeof isBrowser;
 declare const utils_isFunction: typeof isFunction;
 declare const utils_isObject: typeof isObject;
+declare const utils_isObservable: typeof isObservable;
 declare const utils_isPromise: typeof isPromise;
 declare const utils_log: typeof log;
 declare const utils_preciseNow: typeof preciseNow;
 declare const utils_set: typeof set;
 declare const utils_setObservablePoint: typeof setObservablePoint;
 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 { 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_isObservable as isObservable, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
 }
 
-export { type AnimateOptions, type AnimatedSignal, type AnimatedState, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DOMContainer, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, Mesh, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Svg, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, tick, trigger, useDefineProps, useProps };
+export { type AnimateOptions, type AnimatedSignal, type AnimatedState, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DOMContainer, DOMElement, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, Mesh, NineSliceSprite, type OnHook, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Svg, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, tick, trigger, useDefineProps, useProps };

package/dist/index.js

@@ -38,12 +38,14 @@ __export(utils_exports, {
   isBrowser: () => isBrowser,
   isFunction: () => isFunction,
   isObject: () => isObject,
+  isObservable: () => isObservable,
   isPromise: () => isPromise,
   log: () => log,
   preciseNow: () => preciseNow,
   set: () => set,
   setObservablePoint: () => setObservablePoint
 });
+import { Observable } from "rxjs";
 function isBrowser() {
   return typeof window !== "undefined";
 }
@@ -101,6 +103,9 @@ function isFunction(val) {
 function isObject(val) {
   return typeof val == "object" && val != null && !Array.isArray(val) && val.constructor === Object;
 }
+function isObservable(val) {
+  return val instanceof Observable;
+}
 function set(obj, path, value, onlyPlainObject = false) {
   if (Object(obj) !== obj) return obj;
   if (typeof path === "string") {
@@ -964,12 +969,13 @@ import { isSignal as isSignal2, signal as signal2 } from "@signe/reactive";
 // src/engine/reactive.ts
 import { isComputed, isSignal, signal } from "@signe/reactive";
 import {
-  Observable,
+  Observable as Observable2,
   Subject,
   defer,
   from,
   map,
-  of
+  of,
+  share
 } from "rxjs";
 var components = {};
 var isElement = (value) => {
@@ -1124,7 +1130,7 @@ function createComponent(tag, props) {
     if (isPromise(child)) {
       child = await child;
     }
-    if (child instanceof Observable) {
+    if (child instanceof Observable2) {
       child.subscribe(
         ({
           elements: comp,
@@ -1171,7 +1177,7 @@ function loop(itemsSubject, createElementFn) {
     let elementMap = /* @__PURE__ */ new Map();
     let isFirstSubscription = true;
     const isArraySignal = (signal10) => Array.isArray(signal10());
-    return new Observable((subscriber) => {
+    return new Observable2((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
           isFirstSubscription = false;
@@ -1324,7 +1330,7 @@ function cond(condition, createElementFn) {
   let element = null;
   if (isSignal(condition)) {
     const signalCondition = condition;
-    return new Observable((subscriber) => {
+    return new Observable2((subscriber) => {
       return signalCondition.observable.subscribe((bool) => {
         if (bool) {
           let _el = createElementFn();
@@ -1354,7 +1360,7 @@ function cond(condition, createElementFn) {
           });
         }
       });
-    });
+    }).pipe(share());
   } else {
     if (condition) {
       let _el = createElementFn();
@@ -3830,6 +3836,9 @@ function NineSliceSprite(props) {
 
 // src/components/DOMContainer.ts
 import { DOMContainer as PixiDOMContainer } from "pixi.js";
+
+// src/components/DOMElement.ts
+import { isSignal as isSignal6 } from "@signe/reactive";
 var EVENTS4 = [
   "click",
   "mouseover",
@@ -3869,34 +3878,91 @@ var EVENTS4 = [
   "selectall",
   "selectnone"
 ];
-var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
+var CanvasDOMElement = class {
   constructor() {
-    super(...arguments);
-    this.disableLayout = true;
     this.eventListeners = /* @__PURE__ */ new Map();
+    this.onBeforeDestroy = null;
+    this.valueSignal = null;
+    this.isFormElementType = false;
+  }
+  /**
+   * Checks if the element is a form element that supports the value attribute
+   * @param elementType - The element type string from props
+   * @returns true if the element is a form element with value support
+   */
+  isFormElement(elementType) {
+    const formElements = ["input", "textarea", "select"];
+    return formElements.includes(elementType.toLowerCase());
   }
   onInit(props) {
-    super.onInit(props);
-    if (props.element === void 0) {
-      throw new Error("DOMContainer: element is required");
-    }
     if (typeof props.element === "string") {
       this.element = document.createElement(props.element);
+      this.isFormElementType = this.isFormElement(props.element);
     } else {
       this.element = props.element.value;
+      this.isFormElementType = this.isFormElement(this.element.tagName);
+    }
+    if (props.onBeforeDestroy || props["on-before-destroy"]) {
+      this.onBeforeDestroy = props.onBeforeDestroy || props["on-before-destroy"];
     }
     for (const event of EVENTS4) {
       if (props.attrs?.[event]) {
         const eventHandler = (e) => {
-          props.attrs[event]?.(e);
+          if (event === "submit" && this.element.tagName.toLowerCase() === "form") {
+            e.preventDefault();
+            const formData = new FormData(this.element);
+            const formObject = {};
+            formData.forEach((value, key) => {
+              if (formObject[key]) {
+                if (Array.isArray(formObject[key])) {
+                  formObject[key].push(value);
+                } else {
+                  formObject[key] = [formObject[key], value];
+                }
+              } else {
+                formObject[key] = value;
+              }
+            });
+            props.attrs[event]?.(e, formObject);
+          } else {
+            props.attrs[event]?.(e);
+          }
         };
         this.eventListeners.set(event, eventHandler);
         this.element.addEventListener(event, eventHandler, false);
       }
     }
+    if (props.children) {
+      for (const child of props.children) {
+        if (isObservable(child)) {
+          child.subscribe(({ elements }) => {
+            for (const element of elements) {
+              this.element.appendChild(element.componentInstance.element);
+            }
+          });
+        } else {
+          this.element.appendChild(child.componentInstance.element);
+        }
+      }
+    }
+    this.onUpdate(props);
+  }
+  onMount(context) {
+    const props = context.propObservables;
+    const attrs = props.attrs;
+    if (this.isFormElementType && attrs?.value && isSignal6(attrs.value)) {
+      this.valueSignal = attrs.value;
+      this.element.value = this.valueSignal();
+      const inputHandler = (e) => {
+        const target = e.target;
+        this.valueSignal.set(target.value);
+      };
+      this.eventListeners.set("input", inputHandler);
+      this.element.addEventListener("input", inputHandler, false);
+    }
   }
   onUpdate(props) {
-    super.onUpdate(props);
+    if (!this.element) return;
     for (const [key, value] of Object.entries(props.attrs || {})) {
       if (key === "class") {
         const classList = value.items || value.value || value;
@@ -3923,6 +3989,16 @@ var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
             }
           }
         }
+      } else if (key === "value" && this.isFormElementType) {
+        if (isSignal6(value)) {
+          const currentValue = this.element.value;
+          const signalValue = value();
+          if (currentValue !== signalValue) {
+            this.element.value = signalValue;
+          }
+        } else {
+          this.element.value = value;
+        }
       } else if (!EVENTS4.includes(key)) {
         this.element.setAttribute(key, value);
       }
@@ -3930,21 +4006,37 @@ var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
     if (props.textContent) {
       this.element.textContent = props.textContent;
     }
-    if (props.sortableChildren !== void 0) {
-      this.sortableChildren = props.sortableChildren;
-    }
   }
   async onDestroy(parent, afterDestroy) {
     if (this.element) {
+      if (this.onBeforeDestroy) {
+        await this.onBeforeDestroy();
+      }
       for (const [event, handler] of this.eventListeners) {
         this.element.removeEventListener(event, handler, false);
       }
       this.eventListeners.clear();
+      this.element.remove();
+      if (afterDestroy) {
+        afterDestroy();
+      }
     }
-    const _afterDestroyCallback = async () => {
-      afterDestroy();
-    };
-    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+};
+registerComponent("DOMElement", CanvasDOMElement);
+var DOMElement = (props) => {
+  return createComponent("DOMElement", props);
+};
+
+// src/components/DOMContainer.ts
+var CanvasDOMContainer = class extends DisplayObject(PixiDOMContainer) {
+  constructor() {
+    super(...arguments);
+    this.disableLayout = true;
+  }
+  onInit(props) {
+    const div = h(DOMElement, { element: "div" }, props.children);
+    this.element = div.componentInstance.element;
   }
 };
 registerComponent("DOMContainer", CanvasDOMContainer);
@@ -3955,17 +4047,22 @@ var DOMContainer = (props) => {
 // src/engine/bootstrap.ts
 import "@pixi/layout";
 import { Application as Application3 } from "pixi.js";
-var bootstrapCanvas = async (rootElement, canvas) => {
+var bootstrapCanvas = async (rootElement, canvas, options) => {
   const app = new Application3();
   await app.init({
     resizeTo: rootElement,
-    autoStart: false
+    autoStart: false,
+    ...options ?? {}
   });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != "Canvas") {
     throw new Error("Canvas is required");
   }
   canvasElement.render(rootElement, app);
+  const { backgroundColor } = useProps(canvasElement.props, {
+    backgroundColor: "black"
+  });
+  app.renderer.background.color = backgroundColor();
   return {
     canvasElement,
     app
@@ -4097,13 +4194,14 @@ var RadialGradient = class {
 };
 
 // src/index.ts
-import { isObservable } from "rxjs";
+import { isObservable as isObservable2 } from "rxjs";
 import * as Howl3 from "howler";
 export {
   Canvas2 as Canvas,
   Circle,
   Container4 as Container,
   DOMContainer,
+  DOMElement,
   DisplayObject,
   EVENTS2 as EVENTS,
   Easing,
@@ -4134,7 +4232,7 @@ export {
   h,
   isAnimatedSignal,
   isElement,
-  isObservable,
+  isObservable2 as isObservable,
   isPrimitive,
   isTrigger,
   loop,