canvasengine 2.0.0-beta.44 → 2.0.0-beta.46

package/src/directives/Shake.ts

@@ -1,7 +1,7 @@
 import { Container, Point } from 'pixi.js';
 import { Directive, registerDirective } from '../engine/directive';
 import { Element } from '../engine/reactive';
-import { effect } from '@signe/reactive';
+import { effect, isSignal } from '@signe/reactive';
 import { on, isTrigger, Trigger } from '../engine/trigger';
 import { useProps } from '../hooks/useProps';
 import { SignalOrPrimitive } from '../components/types';
@@ -128,6 +128,10 @@ export class Shake extends Directive {
         });
     }
 
+    private resolveSignalValue<T>(value: SignalOrPrimitive<T>): T {
+        return (isSignal(value as any) ? (value as any)() : value) as T;
+    }
+
     /**
      * Performs the shake animation using animatedSignal
      * @param data - Optional data passed from the trigger that can override default options
@@ -139,10 +143,10 @@ export class Shake extends Directive {
         const shakeProps = this.shakeProps;
         
         // Use data from trigger to override defaults if provided
-        const intensity = data?.intensity ?? shakeProps.intensity();
-        const duration = data?.duration ?? shakeProps.duration();
-        const frequency = data?.frequency ?? shakeProps.frequency();
-        const direction = data?.direction ?? shakeProps.direction();
+        const intensity = data?.intensity ?? this.resolveSignalValue(shakeProps.intensity);
+        const duration = data?.duration ?? this.resolveSignalValue(shakeProps.duration);
+        const frequency = data?.frequency ?? this.resolveSignalValue(shakeProps.frequency);
+        const direction = data?.direction ?? this.resolveSignalValue(shakeProps.direction);
 
         // Stop any existing animation and clean up
         if (this.positionEffect) {
@@ -292,4 +296,3 @@ export class Shake extends Directive {
 }
 
 registerDirective('shake', Shake);
-

package/src/engine/FocusManager.ts

@@ -1,4 +1,4 @@
-import { isSignal, signal, Signal } from "@signe/reactive";
+import { isSignal, signal, Signal, WritableSignal, WritableObjectSignal } from "@signe/reactive";
 import { Element, isElementFrozen } from "./reactive";
 import { CanvasViewport } from "../components/Viewport";
 import { SignalOrPrimitive } from "../components/types";
@@ -21,19 +21,20 @@ export interface ScrollOptions {
 /**
  * Data structure for a focus container
  */
+type WritableElementSignal = WritableSignal<Element | null> | WritableObjectSignal<Element | null>;
+
 interface FocusContainerData {
   id: string;
-  element?: Element;
-  focusables: Map<number, Element>;
-  currentIndex: Signal<number | null>;
-  focusedElement: Signal<Element | null>;
+  element?: Element<any>;
+  focusables: Map<number, Element<any>>;
+  currentIndex: WritableSignal<number | null>;
+  focusedElement: WritableElementSignal;
   onFocusChange?: (index: number, element: Element | null) => void;
   autoScroll?: boolean | ScrollOptions;
   viewport?: CanvasViewport;
-  throttle?: number;
-  lastNavigateTime?: number;
-  tabindex?: SignalOrPrimitive<number>;
+  tabindex?: SignalOrPrimitive<number> | null;
   tabindexSubscription?: any;
+  pendingIndex?: number;
 }
 
 /**
@@ -89,7 +90,7 @@ export class FocusManager {
     }
   }
 
-  setTabindex(id: string, tabindex: SignalOrPrimitive<number>): void {
+  setTabindex(id: string, tabindex?: SignalOrPrimitive<number> | null): void {
     const container = this.containers.get(id);
     if (!container) return;
 
@@ -98,10 +99,20 @@ export class FocusManager {
       container.tabindexSubscription.unsubscribe();
     }
 
+    if (tabindex === undefined || tabindex === null) {
+      container.tabindex = undefined;
+      return;
+    }
+
     container.tabindex = tabindex;
 
+    const currentTabindex = isSignal(tabindex) ? (tabindex as Signal<number>)() : tabindex;
+    if (typeof currentTabindex === "number") {
+      this.setIndex(id, currentTabindex);
+    }
+
     if (isSignal(tabindex)) {
-      container.tabindexSubscription = (tabindex as Signal<number>).observable.subscribe((value: any) => {
+      container.tabindexSubscription = ((tabindex as Signal<number>).observable as any).subscribe((value: any) => {
         if (value !== null && value !== container.currentIndex()) {
           this.setIndex(id, value);
         }
@@ -136,8 +147,9 @@ export class FocusManager {
 
     // If this is the index we are supposed to be at, set it now
     const currentTabindex = isSignal(container.tabindex) ? (container.tabindex as Signal<number>)() : container.tabindex;
-    if (currentTabindex === index && container.currentIndex() === null) {
-      this.setIndex(containerId, index);
+    if (container.pendingIndex === index || (currentTabindex === index && container.currentIndex() === null)) {
+      container.pendingIndex = undefined;
+      this.applyFocus(container, containerId, index, element);
     }
   }
 
@@ -170,16 +182,6 @@ export class FocusManager {
       return;
     }
 
-    // Handle throttling
-    if (container.throttle) {
-      const now = Date.now();
-      const lastTime = container.lastNavigateTime || 0;
-      if (now - lastTime < container.throttle) {
-        return;
-      }
-      container.lastNavigateTime = now;
-    }
-
     const currentIndex = container.currentIndex();
     const focusableIndices = Array.from(container.focusables.keys()).sort((a, b) => a - b);
 
@@ -211,7 +213,7 @@ export class FocusManager {
 
     if (newIndex !== null) {
       const tabindex = container.tabindex;
-      if (isSignal(tabindex)) {
+      if (isSignal(tabindex) && typeof (tabindex as any).set === "function") {
         (tabindex as any).set(newIndex);
       } else {
         this.setIndex(containerId, newIndex);
@@ -231,16 +233,24 @@ export class FocusManager {
 
     const element = container.focusables.get(index);
     if (!element) {
-      console.warn(`No focusable element at index ${index} in container "${containerId}"`);
+      container.pendingIndex = index;
       return;
     }
+    this.applyFocus(container, containerId, index, element);
+  }
 
+  private applyFocus(
+    container: FocusContainerData,
+    containerId: string,
+    index: number,
+    element: Element
+  ): void {
     container.currentIndex.set(index);
     container.focusedElement.set(element);
 
     // Sync back to tabindex signal if it exists
     const tabindex = container.tabindex;
-    if (isSignal(tabindex) && (tabindex as any)() !== index) {
+    if (isSignal(tabindex) && (tabindex as any)() !== index && typeof (tabindex as any).set === "function") {
       (tabindex as any).set(index);
     }
 
@@ -308,7 +318,7 @@ export class FocusManager {
    */
   getFocusedElementSignal(containerId: string): Signal<Element | null> | null {
     const container = this.containers.get(containerId);
-    return container ? container.focusedElement : null;
+    return container ? (container.focusedElement as unknown as Signal<Element | null>) : null;
   }
 
   /**
@@ -345,10 +355,16 @@ export class FocusManager {
     }
 
     // Get local bounds
-    const localBounds = instance.getLocalBounds();
+    const localBounds = instance.getLocalBounds?.();
+    if (!localBounds) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
 
     // Get global position
-    const globalPos = instance.getGlobalPosition();
+    const globalPos = instance.getGlobalPosition?.();
+    if (!globalPos) {
+      return { x: 0, y: 0, width: 0, height: 0 };
+    }
 
     return {
       x: globalPos.x,
@@ -492,4 +508,3 @@ export class FocusManager {
 
 // Export singleton instance
 export const focusManager = FocusManager.getInstance();
-

package/src/engine/bootstrap.ts

@@ -1,4 +1,3 @@
-import '@pixi/layout';
 import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
 import { useProps } from '../hooks/useProps';
@@ -31,6 +30,7 @@ export interface BootstrapOptions extends ApplicationOptions {
     [name: string]: any; // ComponentClass
   };
   autoRegister?: boolean; // true by default if components is not provided
+  enableLayout?: boolean; // true by default
 }
 
 /**
@@ -63,7 +63,10 @@ export interface BootstrapOptions extends ApplicationOptions {
  */
 export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
   // Extract component registration options
-  const { components, autoRegister, ...appOptions } = options ?? {};
+  const { components, autoRegister, enableLayout, ...appOptions } = options ?? {};
+  if (enableLayout !== false) {
+    await import('@pixi/layout');
+  }
   
   // Handle component registration
   if (components) {

package/src/engine/directive.ts

@@ -13,11 +13,11 @@ export function registerDirective(name: string, directive: any) {
     directives[name] = directive
 }
 
-export function applyDirective(element: Element, directiveName: string) {
+export function applyDirective(element: Element<any>, directiveName: string) {
     if (!directives[directiveName]) {
         return null
     }
     const directive = new directives[directiveName]()
     directive.onInit?.(element)
     return directive
-}
+}

package/src/engine/reactive.ts

@@ -81,6 +81,72 @@ export const isPrimitive = (value) => {
   );
 };
 
+const DOM_ROUTING_MAP: Record<string, string> = {
+  Sprite: "DOMSprite",
+};
+
+const DOM_ALLOWED_TAGS = new Set(["DOMContainer", "DOMElement", "DOMSprite"]);
+const 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",
+]);
+
+const hasDomAncestor = (element: Element | null): boolean => {
+  let current = element;
+  while (current) {
+    if (current.tag === "DOMContainer" || current.tag === "DOMElement") {
+      return true;
+    }
+    current = current.parent;
+  }
+  return false;
+};
+
+const cleanupElementForRouting = (element: Element) => {
+  element.propSubscriptions?.forEach((sub) => sub.unsubscribe());
+  element.effectSubscriptions?.forEach((sub) => sub.unsubscribe());
+  element.effectUnmounts?.forEach((fn) => fn?.());
+};
+
+const routeDomComponent = (parent: Element, child: Element): Element => {
+  if (!hasDomAncestor(parent)) {
+    return child;
+  }
+  if (DOM_ALLOWED_TAGS.has(child.tag)) {
+    return child;
+  }
+  const routedTag = DOM_ROUTING_MAP[child.tag];
+  if (routedTag) {
+    cleanupElementForRouting(child);
+    const routedProps = child.propObservables ?? child.props;
+    return createComponent(routedTag, routedProps);
+  }
+  if (DOM_UNSUPPORTED_TAGS.has(child.tag)) {
+    throw new Error(
+      `Component ${child.tag} is not implemented for DOMContainer context yet. Only Sprite is supported.`
+    );
+  }
+  return child;
+};
+
 export function registerComponent(name, component) {
   components[name] = component;
 }
@@ -120,6 +186,54 @@ export function registerAllComponents() {
   componentsRegistered = true;
 }
 
+/**
+ * Checks if all dependencies are ready (not undefined).
+ * Handles signals synchronously and promises asynchronously.
+ * For reactive signals, sets up subscriptions to mount when all become ready.
+ * 
+ * @param deps - Array of signals, promises, or direct values
+ * @returns Promise<boolean> - true if all dependencies are ready
+ */
+export async function checkDependencies(
+  deps: any[]
+): Promise<boolean> {
+  const values = await Promise.all(
+    deps.map(async (dep) => {
+      if (isSignal(dep)) {
+        return dep(); // Read current signal value
+      } else if (isPromise(dep)) {
+        return await dep; // Await promise resolution
+      }
+      return dep; // Direct value
+    })
+  );
+  return values.every((v) => v !== undefined);
+}
+
+export function waitForDependencies(deps: any[]): Promise<void> {
+  return new Promise(async (resolve) => {
+    const ready = await checkDependencies(deps);
+    if (ready) {
+      resolve();
+      return;
+    }
+
+    const signalDeps = deps.filter((dep) => isSignal(dep));
+    if (signalDeps.length === 0) {
+      return;
+    }
+
+    const signalObservables = signalDeps.map((sig) => sig.observable);
+    const subscription = combineLatest(signalObservables).subscribe(async () => {
+      const allReady = await checkDependencies(deps);
+      if (allReady) {
+        subscription.unsubscribe();
+        resolve();
+      }
+    });
+  });
+}
+
 /**
  * Checks if an element is currently frozen.
  * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),
@@ -376,22 +490,12 @@ export function createComponent(tag: string, props?: Props): Element {
    * @param deps - Array of signals, promises, or direct values
    * @returns Promise<boolean> - true if all dependencies are ready
    */
-  async function checkDependencies(
-    deps: any[]
-  ): Promise<boolean> {
-    const values = await Promise.all(
-      deps.map(async (dep) => {
-        if (isSignal(dep)) {
-          return dep(); // Read current signal value
-        } else if (isPromise(dep)) {
-          return await dep; // Await promise resolution
-        }
-        return dep; // Direct value
-      })
-    );
-    return values.every((v) => v !== undefined);
-  }
 
+
+  /**
+   * Sets up subscriptions to reactive signal dependencies.
+   * When all signals become defined, mounts the component.
+   */
   /**
    * Sets up subscriptions to reactive signal dependencies.
    * When all signals become defined, mounts the component.
@@ -571,8 +675,9 @@ export function createComponent(tag: string, props?: Props): Element {
                   // Handle observable component recursively
                   await createElement(parent, c);
                 } else if (isElement(c)) {
-                  onMount(parent, c, index + 1);
-                  propagateContext(c);
+                  const routed = routeDomComponent(parent, c);
+                  onMount(parent, routed, index + 1);
+                  propagateContext(routed);
                 }
               });
               return;
@@ -583,8 +688,9 @@ export function createComponent(tag: string, props?: Props): Element {
                   // Handle observable component recursively
                   await createElement(parent, component);
                 } else if (isElement(component)) {
-                  onMount(parent, component);
-                  propagateContext(component);
+                  const routed = routeDomComponent(parent, component);
+                  onMount(parent, routed);
+                  propagateContext(routed);
                 }
               } else {
                 component.forEach(async (comp) => {
@@ -592,16 +698,18 @@ export function createComponent(tag: string, props?: Props): Element {
                     // Handle observable component recursively
                     await createElement(parent, comp);
                   } else if (isElement(comp)) {
-                    onMount(parent, comp);
-                    propagateContext(comp);
+                    const routed = routeDomComponent(parent, comp);
+                    onMount(parent, routed);
+                    propagateContext(routed);
                   }
                 });
               }
             });
           } else if (isElement(value)) {
             // Handle direct Element emission
-            onMount(parent, value);
-            propagateContext(value);
+            const routed = routeDomComponent(parent, value);
+            onMount(parent, routed);
+            propagateContext(routed);
           } else if (Array.isArray(value)) {
             // Handle array of elements (which can also be observables)
             value.forEach(async (element) => {
@@ -609,8 +717,9 @@ export function createComponent(tag: string, props?: Props): Element {
                 // Handle observable element recursively
                 await createElement(parent, element);
               } else if (isElement(element)) {
-                onMount(parent, element);
-                propagateContext(element);
+                const routed = routeDomComponent(parent, element);
+                onMount(parent, routed);
+                propagateContext(routed);
               }
             });
           }
@@ -621,8 +730,9 @@ export function createComponent(tag: string, props?: Props): Element {
       // Store subscription for cleanup
       parent.effectSubscriptions.push(subscription);
     } else if (isElement(child)) {
-      onMount(parent, child);
-      await propagateContext(child);
+      const routed = routeDomComponent(parent, child);
+      onMount(parent, routed);
+      await propagateContext(routed);
     }
   }
 

package/src/engine/signal.ts

@@ -2,8 +2,10 @@ import {
   Observable,
   Subscription
 } from "rxjs";
+import { isSignal } from "@signe/reactive";
 import type { Element } from "./reactive";
-import { isElementFrozen } from "./reactive";
+import { isElementFrozen, waitForDependencies } from "./reactive";
+import { isPromise } from "./utils";
 import { Tick } from "../directives/Scheduler";
 import { Container } from "../components";
 
@@ -22,16 +24,16 @@ export let mountTracker: MountFunction | null = null;
  * @param {(element: Element) => void} fn - The function to be called on mount.
  * @example
  * ```ts
- * mount((el) => {
- *   console.log('mounted', el);
+  * mount((el) => {
+ * console.log('mounted', el);
  * });
  * ```
  * Unmount the component by returning a function:
  * ```ts
- * mount((el) => {
- *   console.log('mounted', el);
+  * mount((el) => {
+ * console.log('mounted', el);
  *   return () => {
- *     console.log('unmounted', el);
+ * console.log('unmounted', el);
  *   }
  * });
  * ```
@@ -45,8 +47,8 @@ export function mount(fn: (element: Element) => void) {
  * @param {(tickValue: Tick, element: Element) => void} fn - The function to be called on each tick.
  * @example
  * ```ts
- * tick((tickValue, el) => {
- *   console.log('tick', tickValue, el);
+  * tick((tickValue, el) => {
+ * console.log('tick', tickValue, el);
  * });
  * ```
  */
@@ -78,29 +80,29 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
  * @returns {ReturnType<C>}
  * @example
  * ```ts
- * const el = h(MyComponent, {
- *   x: 100,
- *   y: 100,
- * });
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * });
  * ```
  * 
  * with children:
  * ```ts
- * const el = h(MyComponent, {
- *   x: 100,
- *   y: 100,
- * }, 
- *   h(MyChildComponent, {
- *     x: 50,
- *     y: 50,
- *   }),
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * }, 
+ * h(MyChildComponent, {
+      *     x: 50,
+      *     y: 50,
+      *   }),
  * );
  * ```
  */
-export function h<C extends ComponentFunction<any>>(
+function _h<C extends ComponentFunction<any>>(
   componentFunction: C | Element,
   props: Parameters<C>[0] = {} as Parameters<C>[0],
-  ...children: any[]
+  children: any[]
 ): ReturnType<C> {
   const allSubscriptions = new Set<Subscription>();
   const allMounts = new Set<MountFunction>();
@@ -124,7 +126,7 @@ export function h<C extends ComponentFunction<any>>(
       component = componentFunction[0]
     }
     else {
-      component = h(Container, {}, ...componentFunction) as Element
+      component = _h(Container, {}, componentFunction) as Element
     }
   }
   else if ('tag' in componentFunction) {
@@ -167,3 +169,58 @@ export function h<C extends ComponentFunction<any>>(
 
   return component as ReturnType<C>;
 }
+
+/**
+ * Add tracking for subscriptions and mounts, then create an element from a component function.
+ * @template C
+ * @param {C} componentFunction - The component function to create an element from.
+ * @param {Parameters<C>[0]} [props={}] - The props to pass to the component function.
+ * @param {...any[]} children - The children elements of the component.
+ * @returns {ReturnType<C>}
+ * @example
+ * ```ts
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * });
+ * ```
+ * 
+ * with children:
+ * ```ts
+  * const el = h(MyComponent, {
+    *   x: 100,
+    *   y: 100,
+    * }, 
+ * h(MyChildComponent, {
+      *     x: 50,
+      *     y: 50,
+      *   }),
+ * );
+ * ```
+ */
+export function h<C extends ComponentFunction<any>>(
+  componentFunction: C | Element,
+  props: Parameters<C>[0] = {} as Parameters<C>[0],
+  ...children: any[]
+): ReturnType<C> {
+  if (props?.dependencies) {
+    const hasPromise = props.dependencies.some(isPromise);
+    if (!hasPromise) {
+      const allReady = props.dependencies.every(dep => {
+        if (isSignal(dep)) return dep() !== undefined;
+        return dep !== undefined;
+      });
+      if (allReady) {
+        return _h(componentFunction, props, children);
+      }
+    }
+
+    return new Observable(subscriber => {
+      waitForDependencies(props.dependencies).then(() => {
+        const el = _h(componentFunction, props, children);
+        subscriber.next(el);
+      });
+    }) as any;
+  }
+  return _h(componentFunction, props, children);
+}

package/src/hooks/useFocus.ts

@@ -78,7 +78,7 @@ export function useFocusChange(
   }
 
   // Set up reactive effect
-  const subscription = effect(() => {
+  const effectResult = effect(() => {
     const index = indexSignal();
     const element = elementSignal();
     callback(index, element);
@@ -86,9 +86,6 @@ export function useFocusChange(
 
   // Return cleanup function
   return () => {
-    if (subscription && typeof subscription.unsubscribe === 'function') {
-      subscription.unsubscribe();
-    }
+    effectResult.subscription?.unsubscribe();
   };
 }
-

package/src/index.ts

@@ -14,7 +14,8 @@ export { useProps, useDefineProps } from './hooks/useProps'
 export { useFocusIndex, useFocusedElement, useFocusChange } from './hooks/useFocus'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'
+export * from './utils/tabindex'
 export * from './components/DisplayObject'
 export { isObservable } from 'rxjs'
 export * as Utils from './engine/utils'
-export * as Howl from 'howler'
+export * as Howl from 'howler'

package/src/types/pixi-cull.d.ts

@@ -0,0 +1,7 @@
+declare module "pixi-cull" {
+  export class Simple {
+    constructor(options?: any);
+    lists: Array<any>;
+    cull(bounds: any): void;
+  }
+}