canvasengine 2.0.0-beta.45 → 2.0.0-beta.47

package/dist/utils/tabindex.d.ts

@@ -0,0 +1,16 @@
+import { WritableSignal } from '@signe/reactive';
+export type TabindexBoundaryMode = "wrap" | "clamp" | "none";
+export type TabindexBounds = {
+    count: () => number;
+    min?: number;
+} | {
+    min: number;
+    max: number;
+};
+type TabindexNavigator = {
+    next: (delta: number) => void;
+    set: (value: number) => void;
+};
+export declare function createTabindexNavigator(tabindex: WritableSignal<number>, bounds: TabindexBounds, mode?: TabindexBoundaryMode): TabindexNavigator;
+export {};
+//# sourceMappingURL=tabindex.d.ts.map

package/dist/utils/tabindex.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabindex.d.ts","sourceRoot":"","sources":["../../src/utils/tabindex.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAE7D,MAAM,MAAM,cAAc,GACtB;IAAE,KAAK,EAAE,MAAM,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACrC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjC,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,GAAG,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B,CAAC;AAuCF,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,cAAc,CAAC,MAAM,CAAC,EAChC,MAAM,EAAE,cAAc,EACtB,IAAI,GAAE,oBAA6B,GAClC,iBAAiB,CAenB"}

package/package.json

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

package/src/components/DOMContainer.ts

@@ -1,13 +1,16 @@
 import { DOMContainer as PixiDOMContainer } from "pixi.js";
+import { effect } from "@signe/reactive";
 import {
   createComponent,
   Element,
+  isElement,
   registerComponent,
 } from "../engine/reactive";
 import { ComponentInstance, DisplayObject } from "./DisplayObject";
 import { ComponentFunction, h } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { CanvasDOMElement, DOMElement } from "./DOMElement";
+import { isPercent } from "../utils/functions";
 
 
 /**
@@ -107,6 +110,159 @@ const EVENTS = [
 
 export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
   disableLayout = true;
+  private canvasSizeEffect: any = null;
+  private static readonly DOM_ROUTING_MAP: Record<string, string> = {
+    Sprite: "DOMSprite",
+  };
+  private static readonly DOM_ALLOWED_TAGS = new Set([
+    "DOMContainer",
+    "DOMElement",
+    "DOMSprite",
+  ]);
+  private static readonly DOM_UNSUPPORTED_TAGS = new Set([
+    "Canvas",
+    "Container",
+    "Graphics",
+    "Rect",
+    "Circle",
+    "Ellipse",
+    "Triangle",
+    "Svg",
+    "Mesh",
+    "Scene",
+    "ParticlesEmitter",
+    "Sprite",
+    "Video",
+    "Text",
+    "TilingSprite",
+    "Viewport",
+    "NineSliceSprite",
+    "Button",
+    "Joystick",
+    "FocusContainer",
+  ]);
+
+  private hasDomContainerAncestor(): boolean {
+    const element = this.getElement();
+    let parent = element?.parent;
+    while (parent) {
+      if (parent.tag === "DOMContainer") return true;
+      parent = parent.parent;
+    }
+    return false;
+  }
+
+  private getPercentRatio(value: string): number | null {
+    const parsed = parseFloat(value);
+    if (Number.isNaN(parsed)) return null;
+    return parsed / 100;
+  }
+
+  private getCanvasSize() {
+    const canvasSize = this.fullProps?.context?.canvasSize;
+    return typeof canvasSize === "function" ? canvasSize() : canvasSize;
+  }
+
+  private shouldUseCanvasPercent(): boolean {
+    const widthProp = this.fullProps?.width;
+    const heightProp = this.fullProps?.height;
+    if (!isPercent(widthProp) && !isPercent(heightProp)) return false;
+    return !this.hasDomContainerAncestor();
+  }
+
+  private syncCanvasSizeEffect() {
+    const shouldTrack = this.shouldUseCanvasPercent();
+    if (shouldTrack && !this.canvasSizeEffect) {
+      const canvasSize = this.fullProps?.context?.canvasSize;
+      if (typeof canvasSize === "function") {
+        this.canvasSizeEffect = effect(() => {
+          canvasSize();
+          this.applyElementSize();
+        });
+      }
+    } else if (!shouldTrack && this.canvasSizeEffect) {
+      this.canvasSizeEffect.subscription?.unsubscribe();
+      this.canvasSizeEffect = null;
+    }
+  }
+
+  private applyElementSize() {
+    if (!this.element) return;
+    const widthProp = this.fullProps?.width;
+    const heightProp = this.fullProps?.height;
+    const useCanvasSize = this.shouldUseCanvasPercent();
+    const canvasSize = useCanvasSize ? this.getCanvasSize() : null;
+
+    if (widthProp !== undefined) {
+      if (isPercent(widthProp)) {
+        if (useCanvasSize) {
+          const ratio = this.getPercentRatio(widthProp);
+          if (ratio !== null) {
+            const baseWidth = (canvasSize?.width !== undefined)
+              ? canvasSize.width
+              : this.getWidth();
+            this.element.style.width = `${baseWidth * ratio}px`;
+          }
+        } else {
+          this.element.style.width = widthProp;
+        }
+      } else if (typeof widthProp === "number") {
+        this.element.style.width = `${widthProp}px`;
+      } else if (typeof widthProp === "string") {
+        this.element.style.width = widthProp;
+      }
+    }
+
+    if (heightProp !== undefined) {
+      if (isPercent(heightProp)) {
+        if (useCanvasSize) {
+          const ratio = this.getPercentRatio(heightProp);
+          if (ratio !== null) {
+            const baseHeight = (canvasSize?.height !== undefined)
+              ? canvasSize.height
+              : this.getHeight();
+            this.element.style.height = `${baseHeight * ratio}px`;
+          }
+        } else {
+          this.element.style.height = heightProp;
+        }
+      } else if (typeof heightProp === "number") {
+        this.element.style.height = `${heightProp}px`;
+      } else if (typeof heightProp === "string") {
+        this.element.style.height = heightProp;
+      }
+    }
+  }
+
+  private routeDomChildren(children: any): any {
+    if (!children) return children;
+    if (Array.isArray(children)) {
+      return children.map((child) => this.routeDomChildren(child));
+    }
+    if (isElement(children)) {
+      if (CanvasDOMContainer.DOM_ALLOWED_TAGS.has(children.tag)) {
+        return children;
+      }
+      const routedTag = CanvasDOMContainer.DOM_ROUTING_MAP[children.tag];
+      if (routedTag) {
+        children.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+        children.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+        children.effectUnmounts?.forEach((fn) => fn?.());
+        const routedProps = children.propObservables ?? children.props;
+        return createComponent(routedTag, routedProps);
+      }
+      if (CanvasDOMContainer.DOM_UNSUPPORTED_TAGS.has(children.tag)) {
+        throw new Error(
+          `Component ${children.tag} is not implemented for DOMContainer context yet. Only Sprite is supported.`
+        );
+      }
+      if (children.props?.children) {
+        children.props.children = this.routeDomChildren(children.props.children);
+      }
+      return children;
+    }
+    return children;
+  }
 
   onInit(props: any) {
     // Handle internal _scopeClass prop for scoped CSS
@@ -134,9 +290,38 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
       divProps.attrs = props.attrs;
     }
 
-    const div = h(DOMElement, divProps, props.children) as unknown as Element<CanvasDOMElement>;
+    const routedChildren = this.routeDomChildren(props.children);
+    props.children = routedChildren;
+    const div = h(DOMElement, divProps, routedChildren) as unknown as Element<CanvasDOMElement>;
     this.element = div.componentInstance.element;
   }
+
+  async onMount(element: Element<any>, index?: number) {
+    await super.onMount(element, index);
+    this.syncCanvasSizeEffect();
+    this.applyElementSize();
+  }
+
+  onUpdate(props: any) {
+    super.onUpdate(props);
+    this.syncCanvasSizeEffect();
+    this.applyElementSize();
+  }
+
+  onLayoutComputed() {
+    this.applyElementSize();
+  }
+
+  async onDestroy(parent: Element<any>, afterDestroy?: () => void) {
+    const _afterDestroy = () => {
+      if (this.canvasSizeEffect) {
+        this.canvasSizeEffect.subscription?.unsubscribe();
+        this.canvasSizeEffect = null;
+      }
+      if (afterDestroy) afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroy);
+  }
 }
 
 export interface CanvasDOMContainer extends DisplayObjectProps { }

package/src/components/DOMElement.ts

@@ -10,8 +10,8 @@ import { DisplayObjectProps } from "./types/DisplayObject";
 import { isObservable } from "../engine/utils";
 import { isSignal } from "@signe/reactive";
 
-interface DOMContainerProps extends DisplayObjectProps {
-  element:
+export interface DOMElementProps extends DisplayObjectProps {
+  element?:
   | string
   | {
     value: HTMLElement;
@@ -32,6 +32,14 @@ interface DOMContainerProps extends DisplayObjectProps {
   onBeforeDestroy?: OnHook;
 }
 
+export interface DOMContainerProps extends DOMElementProps {
+  element:
+  | string
+  | {
+    value: HTMLElement;
+  };
+}
+
 /**
  * DOMContainer class for managing DOM elements within the canvas engine
  *
@@ -204,6 +212,8 @@ export class CanvasDOMElement {
   private onBeforeDestroy: OnHook | null = null;
   private valueSignal: any = null;
   private isFormElementType: boolean = false;
+  private classSubscriptions: Array<{ unsubscribe: () => void }> = [];
+  private childTextSubscriptions: Array<{ unsubscribe: () => void }> = [];
 
   /**
    * Checks if the element is a form element that supports the value attribute
@@ -215,12 +225,145 @@ export class CanvasDOMElement {
     return formElements.includes(elementType.toLowerCase());
   }
 
-  onInit(props: DOMContainerProps) {
+  private collectClassTokens(value: any, tokens: string[]) {
+    if (!value) return;
+    if (isSignal(value)) {
+      this.collectClassTokens(value(), tokens);
+      return;
+    }
+    if (typeof value === "string") {
+      value.split(/\s+/).filter(Boolean).forEach((token) => tokens.push(token));
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => this.collectClassTokens(item, tokens));
+      return;
+    }
+    if (typeof value === "object") {
+      for (const [className, shouldAdd] of Object.entries(value)) {
+        const resolved = isSignal(shouldAdd as any) ? (shouldAdd as any)() : shouldAdd;
+        if (resolved) {
+          tokens.push(className);
+        }
+      }
+    }
+  }
+
+  private collectClassSignals(value: any, signals: Set<any>) {
+    if (!value) return;
+    if (isSignal(value)) {
+      signals.add(value);
+      return;
+    }
+    if (Array.isArray(value)) {
+      value.forEach((item) => this.collectClassSignals(item, signals));
+      return;
+    }
+    if (typeof value === "object") {
+      Object.values(value).forEach((item) =>
+        this.collectClassSignals(item, signals)
+      );
+    }
+  }
+
+  private applyClassList(classList: any) {
+    // Clear existing classes first
+    this.element.className = "";
+
+    if (typeof classList === "string") {
+      // String: space-separated class names
+      this.element.className = classList;
+      return;
+    }
+
+    const tokens: string[] = [];
+    this.collectClassTokens(classList, tokens);
+    if (tokens.length > 0) {
+      this.element.classList.add(...tokens);
+    }
+  }
+
+  private syncClassSubscriptions(classList: any) {
+    for (const sub of this.classSubscriptions) {
+      sub.unsubscribe();
+    }
+    this.classSubscriptions = [];
+
+    const signals = new Set<any>();
+    this.collectClassSignals(classList, signals);
+    if (signals.size === 0) return;
+
+    signals.forEach((signal) => {
+      if (!signal?.observable?.subscribe) return;
+      const sub = signal.observable.subscribe(() => {
+        this.applyClassList(classList);
+      });
+      this.classSubscriptions.push(sub);
+    });
+  }
+
+  private appendChildElement(child: any) {
+    if (child === null || child === undefined || child === false) return;
+
+    if (typeof child === "string" || typeof child === "number") {
+      this.element.appendChild(document.createTextNode(String(child)));
+      return;
+    }
+
+    if (isSignal(child)) {
+      const textNode = document.createTextNode(
+        child() == null ? "" : String(child())
+      );
+      this.element.appendChild(textNode);
+      if (child.observable?.subscribe) {
+        const sub = child.observable.subscribe((value: any) => {
+          textNode.textContent = value == null ? "" : String(value);
+        });
+        this.childTextSubscriptions.push(sub);
+      }
+      return;
+    }
+
+    if (isObservable(child)) {
+      child.subscribe((value: any) => {
+        if (value && typeof value === "object" && "elements" in value) {
+          const elements = value.elements || [];
+          elements.forEach((element: any) => this.appendChildElement(element));
+        } else if (Array.isArray(value)) {
+          value.forEach((element) => this.appendChildElement(element));
+        } else {
+          this.appendChildElement(value);
+        }
+      });
+      return;
+    }
+
+    if (Array.isArray(child)) {
+      child.forEach((item) => this.appendChildElement(item));
+      return;
+    }
+
+    const childElement = child?.componentInstance?.element;
+    if (childElement) {
+      this.element.appendChild(childElement);
+      return;
+    }
+
+    const nestedChildren = child?.props?.children;
+    if (nestedChildren) {
+      this.appendChildElement(nestedChildren);
+    }
+  }
+
+  onInit(props: DOMElementProps) {
     if (typeof props.element === "string") {
       this.element = document.createElement(props.element);
       this.isFormElementType = this.isFormElement(props.element);
     } else {
-      this.element = props.element.value;
+      this.element = props.element?.value;
+      if (!this.element) {
+        throw new Error("DOMElement requires a valid element.");
+      }
       this.isFormElementType = this.isFormElement(this.element.tagName);
     }
     if (props.onBeforeDestroy || props["on-before-destroy"]) {
@@ -264,17 +407,7 @@ export class CanvasDOMElement {
       }
     }
     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.appendChildElement(props.children);
     }
     this.onUpdate(props);
   }
@@ -311,7 +444,7 @@ export class CanvasDOMElement {
     }
   }
 
-  onUpdate(props: DOMContainerProps) {
+  onUpdate(props: DOMElementProps) {
     if (!this.element) return;
     for (const [key, value] of Object.entries(props.attrs || {})) {
       if (key === "tabindex") {
@@ -323,25 +456,10 @@ export class CanvasDOMElement {
           this.element.removeAttribute('tabindex');
         }
       } else 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);
-            }
-          }
-        }
+        const rawClassList = value.items || value.value || value;
+        const classList = isSignal(rawClassList) ? rawClassList() : rawClassList;
+        this.applyClassList(classList);
+        this.syncClassSubscriptions(classList);
       } else if (key === "style") {
         const styleValue = value.items || value.value || value;
 
@@ -389,8 +507,9 @@ export class CanvasDOMElement {
         this.element.setAttribute(key, value);
       }
     }
-    if (props.textContent) {
-      this.element.textContent = props.textContent;
+    if ("textContent" in props) {
+      const textContent = props.textContent;
+      this.element.textContent = textContent == null ? "" : String(textContent);
     }
   }
 
@@ -410,6 +529,14 @@ export class CanvasDOMElement {
       }
 
       this.eventListeners.clear();
+      for (const sub of this.classSubscriptions) {
+        sub.unsubscribe();
+      }
+      this.classSubscriptions = [];
+      for (const sub of this.childTextSubscriptions) {
+        sub.unsubscribe();
+      }
+      this.childTextSubscriptions = [];
 
       this.element.remove();