canvasengine 2.0.0-beta.20 → 2.0.0-beta.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.22",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/DOMContainer.ts

@@ -5,30 +5,10 @@ import {
   registerComponent,
 } from "../engine/reactive";
 import { ComponentInstance, DisplayObject } from "./DisplayObject";
-import { ComponentFunction } from "../engine/signal";
+import { ComponentFunction, h } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
+import { CanvasDOMElement, DOMElement } from "./DOMElement";
 
-interface DOMContainerProps extends DisplayObjectProps {
-  element:
-    | string
-    | {
-        value: HTMLElement;
-      };
-  textContent?: string;
-  attrs?: Record<string, any> & {
-    class?:
-      | string
-      | string[]
-      | Record<string, boolean>
-      | { items?: string[] }
-      | { value?: string | string[] | Record<string, boolean> };
-    style?:
-      | string
-      | Record<string, string | number>
-      | { value?: string | Record<string, string | number> };
-  };
-  sortableChildren?: boolean;
-}
 
 /**
  * DOMContainer class for managing DOM elements within the canvas engine
@@ -127,96 +107,10 @@ const EVENTS = [
 
 export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
   disableLayout = true;
-  private eventListeners: Map<string, (e: Event) => void> = new Map();
-
-  onInit(props: DOMContainerProps) {
-    super.onInit(props);
-    if (props.element === undefined) {
-      throw new Error("DOMContainer: element is required");
-    }
-    if (typeof props.element === "string") {
-      this.element = document.createElement(props.element);
-    } else {
-      this.element = props.element.value;
-    }
-    for (const event of EVENTS) {
-      if (props.attrs?.[event]) {
-        const eventHandler = (e: Event) => {
-          props.attrs[event]?.(e);
-        };
-        this.eventListeners.set(event, eventHandler);
-        this.element.addEventListener(event, eventHandler, false);
-      }
-    }
-  }
-
-  onUpdate(props: DOMContainerProps) {
-    super.onUpdate(props);
-
-    for (const [key, value] of Object.entries(props.attrs || {})) {
-      if (key === "class") {
-        const classList = value.items || value.value || value;
-
-        // Clear existing classes first
-        this.element.className = "";
-
-        if (typeof classList === "string") {
-          // String: space-separated class names
-          this.element.className = classList;
-        } else if (Array.isArray(classList)) {
-          // Array: array of class names
-          this.element.classList.add(...classList);
-        } else if (typeof classList === "object" && classList !== null) {
-          // Object: { className: boolean }
-          for (const [className, shouldAdd] of Object.entries(classList)) {
-            if (shouldAdd) {
-              this.element.classList.add(className);
-            }
-          }
-        }
-      } else if (key === "style") {
-        const styleValue = value.items || value.value || value;
-
-        if (typeof styleValue === "string") {
-          // String: CSS style string
-          this.element.setAttribute("style", styleValue);
-        } else if (typeof styleValue === "object" && styleValue !== null) {
-          // Object: { property: value }
-          for (const [styleProp, styleVal] of Object.entries(styleValue)) {
-            if (styleVal !== null && styleVal !== undefined) {
-              (this.element.style as any)[styleProp] = styleVal;
-            }
-          }
-        }
-      } else if (!EVENTS.includes(key)) {
-        this.element.setAttribute(key, value);
-      }
-    }
-    if (props.textContent) {
-      this.element.textContent = props.textContent;
-    }
-
-    if (props.sortableChildren !== undefined) {
-      this.sortableChildren = props.sortableChildren;
-    }
-  }
-
-  async onDestroy(
-    parent: Element<ComponentInstance>,
-    afterDestroy: () => void
-  ): Promise<void> {
-    // Remove all event listeners from the DOM element
-    if (this.element) {
-      for (const [event, handler] of this.eventListeners) {
-        this.element.removeEventListener(event, handler, false);
-      }
-      this.eventListeners.clear();
-    }
 
-    const _afterDestroyCallback = async () => {
-      afterDestroy();
-    };
-    await super.onDestroy(parent, _afterDestroyCallback);
+  onInit(props: any) {
+    const div = h(DOMElement, { element: "div" }, props.children) as unknown as Element<CanvasDOMElement>;
+    this.element = div.componentInstance.element;
   }
 }
 
@@ -224,6 +118,6 @@ export interface CanvasDOMContainer extends DisplayObjectProps {}
 
 registerComponent("DOMContainer", CanvasDOMContainer);
 
-export const DOMContainer: ComponentFunction<DOMContainerProps> = (props) => {
+export const DOMContainer: ComponentFunction<any> = (props) => {
   return createComponent("DOMContainer", props);
 };

package/src/components/DOMElement.ts

@@ -0,0 +1,421 @@
+import { DOMContainer as PixiDOMContainer } from "pixi.js";
+import {
+  createComponent,
+  Element,
+  registerComponent,
+} from "../engine/reactive";
+import { ComponentInstance, DisplayObject, OnHook } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+import { isObservable } from "../engine/utils";
+import { isSignal } from "@signe/reactive";
+
+interface DOMContainerProps extends DisplayObjectProps {
+  element:
+    | string
+    | {
+        value: HTMLElement;
+      };
+  textContent?: string;
+  attrs?: Record<string, any> & {
+    class?:
+      | string
+      | string[]
+      | Record<string, boolean>
+      | { items?: string[] }
+      | { value?: string | string[] | Record<string, boolean> };
+    style?:
+      | string
+      | Record<string, string | number>
+      | { value?: string | Record<string, string | number> };
+  };
+  onBeforeDestroy?: OnHook;
+}
+
+/**
+ * DOMContainer class for managing DOM elements within the canvas engine
+ *
+ * This class extends the DisplayObject functionality to handle DOM elements using
+ * PixiJS's native DOMContainer. It provides a bridge between the canvas rendering
+ * system and traditional DOM manipulation with proper transform hierarchy and visibility.
+ *
+ * The DOMContainer is especially useful for rendering standard DOM elements that handle
+ * user input, such as `<input>` or `<textarea>`. This is often simpler and more flexible
+ * than trying to implement text input directly in PixiJS.
+ *
+ * ## Form Elements with Reactive Signals
+ *
+ * For form elements (`input`, `textarea`, `select`), the component supports reactive
+ * two-way data binding using signals. When the `value` attribute is a signal, the
+ * component automatically:
+ * - Sets the initial value from the signal
+ * - Listens for `input` events and updates the signal with the new value
+ * - Updates the DOM element when the signal value changes programmatically
+ *
+ * ## Form Submission Handling
+ *
+ * When a `form` element has a `submit` event handler, the component automatically:
+ * - Prevents the default form submission behavior (stops propagation)
+ * - Collects all form data from input elements within the form
+ * - Passes both the event and the collected form data as parameters to the submit handler
+ * - Handles multiple values for the same field name (e.g., checkboxes with same name)
+ *
+ * @example
+ * ```typescript
+ * import { signal } from '@signe/reactive';
+ *
+ * // Basic usage with input element
+ * const element = document.createElement('input');
+ * element.type = 'text';
+ * element.placeholder = 'Enter text...';
+ *
+ * const domContainer = new DOMContainer({
+ *   element,
+ *   x: 100,
+ *   y: 50,
+ *   anchor: { x: 0.5, y: 0.5 }
+ * });
+ *
+ * // Reactive form input with signal
+ * const inputValue = signal('');
+ *
+ * const reactiveInput = new DOMContainer({
+ *   element: 'input',
+ *   attrs: {
+ *     type: 'text',
+ *     placeholder: 'Type something...',
+ *     value: inputValue // Signal for two-way binding
+ *   }
+ * });
+ *
+ * // The signal will automatically update when user types
+ * inputValue.subscribe(value => {
+ *   console.log('Input value changed:', value);
+ * });
+ *
+ * // You can also update the input programmatically
+ * inputValue.set('New value');
+ *
+ * // Form submission with automatic data collection
+ * const loginForm = new DOMContainer({
+ *   element: 'form',
+ *   attrs: {
+ *     submit: (event, formData) => {
+ *       // event: the submit event (already prevented)
+ *       // formData: object containing all form field values
+ *       console.log('Form submitted with data:', formData);
+ *       // Example formData: { username: 'john', password: 'secret', remember: 'on' }
+ *     }
+ *   },
+ *   children: [
+ *     new DOMContainer({
+ *       element: 'input',
+ *       attrs: { name: 'username', type: 'text', placeholder: 'Username' }
+ *     }),
+ *     new DOMContainer({
+ *       element: 'input',
+ *       attrs: { name: 'password', type: 'password', placeholder: 'Password' }
+ *     }),
+ *     new DOMContainer({
+ *       element: 'input',
+ *       attrs: { name: 'remember', type: 'checkbox', value: 'on' }
+ *     }),
+ *     new DOMContainer({
+ *       element: 'button',
+ *       attrs: { type: 'submit' },
+ *       textContent: 'Login'
+ *     })
+ *   ]
+ * });
+ *
+ * // Using different class and style formats
+ * const containerWithClasses = new DOMContainer({
+ *   element: 'div',
+ *   attrs: {
+ *     // String format: space-separated classes
+ *     class: 'container primary-theme',
+ *
+ *     // Array format: array of class names
+ *     // class: ['container', 'primary-theme'],
+ *
+ *     // Object format: conditional classes
+ *     // class: {
+ *     //   'container': true,
+ *     //   'primary-theme': true,
+ *     //   'disabled': false
+ *     // }
+ *
+ *     // String format: CSS style string
+ *     style: 'background-color: red; padding: 10px;',
+ *
+ *     // Object format: style properties
+ *     // style: {
+ *     //   backgroundColor: 'red',
+ *     //   padding: '10px',
+ *     //   fontSize: 16
+ *     // }
+ *   }
+ * });
+ * ```
+ */
+const EVENTS = [
+  "click",
+  "mouseover",
+  "mouseout",
+  "mouseenter",
+  "mouseleave",
+  "mousemove",
+  "mouseup",
+  "mousedown",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "touchcancel",
+  "wheel",
+  "scroll",
+  "resize",
+  "focus",
+  "blur",
+  "change",
+  "input",
+  "submit",
+  "reset",
+  "keydown",
+  "keyup",
+  "keypress",
+  "contextmenu",
+  "drag",
+  "dragend",
+  "dragenter",
+  "dragleave",
+  "dragover",
+  "drop",
+  "dragstart",
+  "select",
+  "selectstart",
+  "selectend",
+  "selectall",
+  "selectnone",
+];
+
+export class CanvasDOMElement {
+  public element: HTMLElement;
+  private eventListeners: Map<string, (e: Event) => void> = new Map();
+  private onBeforeDestroy: OnHook | null = null;
+  private valueSignal: any = null;
+  private isFormElementType: boolean = 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
+   */
+  private isFormElement(elementType: string): boolean {
+    const formElements = ["input", "textarea", "select"];
+    return formElements.includes(elementType.toLowerCase());
+  }
+
+  onInit(props: DOMContainerProps) {
+    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 EVENTS) {
+      if (props.attrs?.[event]) {
+        const eventHandler = (e: Event) => {
+          // Special handling for form submit events
+          if (event === "submit" && this.element.tagName.toLowerCase() === "form") {
+            e.preventDefault(); // Stop form submission propagation
+            
+            // Collect all form data
+            const formData = new FormData(this.element as HTMLFormElement);
+            const formObject: Record<string, any> = {};
+            
+            // Convert FormData to plain object
+            formData.forEach((value, key) => {
+              if (formObject[key]) {
+                // Handle multiple values for same key (like checkboxes)
+                if (Array.isArray(formObject[key])) {
+                  formObject[key].push(value);
+                } else {
+                  formObject[key] = [formObject[key], value];
+                }
+              } else {
+                formObject[key] = value;
+              }
+            });
+            
+            // Call the event handler with event and form data
+            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: Element<CanvasDOMElement>) {
+    const props = context.propObservables;
+    const attrs = props.attrs as any;
+    // Handle form elements with signal value
+    if (
+      this.isFormElementType &&
+      attrs?.value &&
+      isSignal(attrs.value)
+    ) {
+      this.valueSignal = attrs.value;
+      // Set initial value from signal
+      (
+        this.element as
+          | HTMLInputElement
+          | HTMLTextAreaElement
+          | HTMLSelectElement
+      ).value = this.valueSignal();
+
+      // Listen for input events and update the signal
+      const inputHandler = (e: Event) => {
+        const target = e.target as
+          | HTMLInputElement
+          | HTMLTextAreaElement
+          | HTMLSelectElement;
+        this.valueSignal.set(target.value);
+      };
+
+      this.eventListeners.set("input", inputHandler);
+      this.element.addEventListener("input", inputHandler, false);
+    }
+  }
+
+  onUpdate(props: DOMContainerProps) {
+    if (!this.element) return;
+    for (const [key, value] of Object.entries(props.attrs || {})) {
+      if (key === "class") {
+        const classList = value.items || value.value || value;
+
+        // Clear existing classes first
+        this.element.className = "";
+
+        if (typeof classList === "string") {
+          // String: space-separated class names
+          this.element.className = classList;
+        } else if (Array.isArray(classList)) {
+          // Array: array of class names
+          this.element.classList.add(...classList);
+        } else if (typeof classList === "object" && classList !== null) {
+          // Object: { className: boolean }
+          for (const [className, shouldAdd] of Object.entries(classList)) {
+            if (shouldAdd) {
+              this.element.classList.add(className);
+            }
+          }
+        }
+      } else if (key === "style") {
+        const styleValue = value.items || value.value || value;
+
+        if (typeof styleValue === "string") {
+          // String: CSS style string
+          this.element.setAttribute("style", styleValue);
+        } else if (typeof styleValue === "object" && styleValue !== null) {
+          // Object: { property: value }
+          for (const [styleProp, styleVal] of Object.entries(styleValue)) {
+            if (styleVal !== null && styleVal !== undefined) {
+              (this.element.style as any)[styleProp] = styleVal;
+            }
+          }
+        }
+      } else if (key === "value" && this.isFormElementType) {
+        // Handle value attribute for form elements
+        if (isSignal(value)) {
+          // If it's a signal, the value is already handled in onInit
+          // Update the DOM element value if the signal value changed
+          const currentValue = (
+            this.element as
+              | HTMLInputElement
+              | HTMLTextAreaElement
+              | HTMLSelectElement
+          ).value;
+          const signalValue = value();
+          if (currentValue !== signalValue) {
+            (
+              this.element as
+                | HTMLInputElement
+                | HTMLTextAreaElement
+                | HTMLSelectElement
+            ).value = signalValue;
+          }
+        } else {
+          // If it's not a signal, set the value directly
+          (
+            this.element as
+              | HTMLInputElement
+              | HTMLTextAreaElement
+              | HTMLSelectElement
+          ).value = value;
+        }
+      } else if (!EVENTS.includes(key)) {
+        this.element.setAttribute(key, value);
+      }
+    }
+    if (props.textContent) {
+      this.element.textContent = props.textContent;
+    }
+  }
+
+  async onDestroy(
+    parent: Element<CanvasDOMElement>,
+    afterDestroy: () => void
+  ): Promise<void> {
+    // Remove all event listeners from the DOM element
+
+    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();
+      }
+    }
+  }
+}
+
+export interface CanvasDOMElement extends DisplayObjectProps {}
+
+registerComponent("DOMElement", CanvasDOMElement);
+
+export const DOMElement: ComponentFunction<DOMContainerProps> = (props) => {
+  return createComponent("DOMElement", props);
+};

package/src/components/DisplayObject.ts

@@ -96,7 +96,7 @@ export const EVENTS = [
   "wheelcapture",
 ];
 
-type OnHook = (() => void) | (() => Promise<void> | void);
+export type OnHook = (() => void) | (() => Promise<void> | void);
 
 export function DisplayObject(extendClass) {
   return class DisplayObject extends extendClass {

package/src/components/index.ts

@@ -11,4 +11,5 @@ export { TilingSprite } from './TilingSprite'
 export { Viewport } from './Viewport'
 export { NineSliceSprite } from './NineSliceSprite'
 export { type ComponentInstance } from './DisplayObject'
-export { DOMContainer } from './DOMContainer'
+export { DOMContainer } from './DOMContainer'
+export { DOMElement } from './DOMElement'

package/src/engine/bootstrap.ts

@@ -1,6 +1,7 @@
 import '@pixi/layout';
-import { Application } from "pixi.js";
+import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
+import { useProps } from '../hooks/useProps';
 
 /**
  * Bootstraps a canvas element and renders it to the DOM.
@@ -10,12 +11,13 @@ import { ComponentFunction, h } from "./signal";
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
  */
-export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => {
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: ApplicationOptions) => {
   
   const app = new Application();
   await app.init({
     resizeTo: rootElement,
     autoStart: false,
+    ...(options ?? {})
   });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != 'Canvas') {
@@ -23,6 +25,12 @@ export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: C
   }
   (canvasElement as any).render(rootElement, app);
 
+  const { backgroundColor } = useProps(canvasElement.props, {
+    backgroundColor: 'black'
+  });
+
+  app.renderer.background.color = backgroundColor()
+
   return {
     canvasElement,
     app

package/src/engine/reactive.ts

@@ -7,6 +7,7 @@ import {
   from,
   map,
   of,
+  share,
   switchMap,
 } from "rxjs";
 import { ComponentInstance } from "../components/DisplayObject";
@@ -83,14 +84,26 @@ function destroyElement(element: Element | Element[]) {
   if (!element) {
     return;
   }
+  if (element.props?.children) {
+    for (let child of element.props.children) {
+      destroyElement(child)
+    }
+  }
   for (let name in element.directives) {
     element.directives[name].onDestroy?.(element);
   }
-  element.componentInstance.onDestroy(element.parent as any, () => {
-    element.propSubscriptions.forEach((sub) => sub.unsubscribe());
-    element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
-    element.effectUnmounts.forEach((fn) => fn?.());
-  });
+  if (element.componentInstance && element.componentInstance.onDestroy) {
+    element.componentInstance.onDestroy(element.parent as any, () => {
+      element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+      element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+      element.effectUnmounts?.forEach((fn) => fn?.());
+    });
+  } else {
+    // If componentInstance is undefined or doesn't have onDestroy, still clean up subscriptions
+    element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+    element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+    element.effectUnmounts?.forEach((fn) => fn?.());
+  }
 }
 
 /**
@@ -489,7 +502,7 @@ export function cond(
   createElementFn: () => Element | Promise<Element>
 ): FlowObservable {
   let element: Element | null = null;
-  
+
   if (isSignal(condition)) {
     const signalCondition = condition as WritableObjectSignal<boolean>;
     return new Observable<{elements: Element[], type?: "init" | "remove"}>(subscriber => {
@@ -522,7 +535,7 @@ export function cond(
           });
         }
       });
-    });
+    }).pipe(share())
   } else {
     // Handle boolean case
     if (condition) {

package/src/engine/utils.ts

@@ -1,4 +1,5 @@
 import { ObservablePoint } from "pixi.js"
+import { Observable } from "rxjs"
 
 /**
  * Checks if code is running in a browser environment
@@ -101,6 +102,10 @@ export function isObject(val: unknown): boolean {
     return typeof val == 'object' && val != null && !Array.isArray(val) && val.constructor === Object
 }
 
+export function isObservable(val: unknown): boolean {
+    return val instanceof Observable
+}
+
 /**
  * Sets a value in an object using a dot notation path
  * @param {Record<string, any>} obj - Target object