canvasengine 2.0.0-beta.5 → 2.0.0-beta.50

package/src/engine/signal.ts

@@ -1,8 +1,13 @@
 import {
-    Subscription
+  Observable,
+  Subscription
 } from "rxjs";
+import { isSignal } from "@signe/reactive";
 import type { Element } from "./reactive";
+import { isElementFrozen, waitForDependencies } from "./reactive";
+import { isPromise } from "./utils";
 import { Tick } from "../directives/Scheduler";
+import { Container } from "../components";
 
 type MountFunction = (fn: (element: Element) => void) => void;
 
@@ -19,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);
  *   }
  * });
  * ```
@@ -42,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);
  * });
  * ```
  */
@@ -53,7 +58,11 @@ export function tick(fn: (tickValue: Tick, element: Element) => void) {
     let subscription: Subscription | undefined
     if (context.tick) {
       subscription = context.tick.observable.subscribe(({ value }) => {
-          fn(value, el)
+        // Block tick if element is frozen
+        if (isElementFrozen(el)) {
+          return;
+        }
+        fn(value, el)
       })
     }
     return () => {
@@ -71,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>>(
-  componentFunction: C,
+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>();
@@ -110,7 +119,25 @@ export function h<C extends ComponentFunction<any>>(
     children = children[0]
   }
 
-  let component = componentFunction({ ...props, children }) as Element;
+  let component: Element
+
+  if (Array.isArray(componentFunction)) {
+    if (componentFunction.length === 1) {
+      component = componentFunction[0]
+    }
+    else {
+      component = _h(Container, {}, componentFunction) as Element
+    }
+  }
+  else if ('tag' in componentFunction) {
+    component = componentFunction
+  }
+  else if (componentFunction instanceof Observable) {
+    component = componentFunction as any
+  }
+  else {
+    component = componentFunction({ ...props, children }) as Element;
+  }
 
   if (!component) {
     component = {} as any
@@ -122,6 +149,12 @@ export function h<C extends ComponentFunction<any>>(
     ...((component as any).effectMounts ?? [])
   ];
 
+  // Copy dependencies prop to the returned element so it can be used for delayed mounting
+  if (props?.dependencies) {
+    component.props = component.props || {};
+    component.props.dependencies = props.dependencies;
+  }
+
   // call mount hook for root component
   if (component instanceof Promise) {
     component.then((component) => {
@@ -136,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/engine/trigger.ts

@@ -1,6 +1,6 @@
 import { effect, signal } from "@signe/reactive";
 
-interface Listen<T = any> {
+export interface Listen<T = any> {
   config: T | undefined;
   seed: {
     config: T | undefined;
@@ -9,7 +9,7 @@ interface Listen<T = any> {
   };
 }
 
-interface Trigger<T = any> {
+export interface Trigger<T = any> {
   start: () => Promise<void>;
   listen: () => Listen<T> | undefined;
 }
@@ -47,13 +47,14 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
   return {
     start: (config?: T) => {
       return new Promise((resolve: (value: any) => void) => {
+        const newValue = Math.random();
         _signal.set({
           config: {
             ...globalConfig,
             ...config,
           },
           resolve,
-          value: Math.random(),
+          value: newValue,
         });
       });
     },
@@ -70,27 +71,53 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
  * Subscribes to a trigger and executes a callback when the trigger is activated
  * @param triggerSignal - The trigger to subscribe to
  * @param callback - Function to execute when the trigger is activated
+ * @returns Subscription that can be unsubscribed to stop listening
  * @throws Error if triggerSignal is not a valid trigger
  * @example
  * ```ts
  * const click = trigger()
  * 
- * on(click, () => {
+ * const subscription = on(click, () => {
  *   console.log('Click triggered')
  * })
+ * 
+ * // Later, to stop listening:
+ * subscription.unsubscribe()
  * ```
  */
 export function on(triggerSignal: any, callback: (config: any) => void | Promise<void>) {
   if (!isTrigger(triggerSignal)) {
     throw new Error("In 'on(arg)' must have a trigger signal type");
   }
-  effect(() => {
+  let lastValue: number | undefined;
+
+  const effectResult = effect(() => {
     const result = triggerSignal.listen();
-    if (result?.seed.value) {
+    const seed = result?.seed;
+
+    if (!seed) return;
+
+    // Only run callback when the trigger value actually changes
+    if (lastValue === undefined) {
+      lastValue = seed.value;
+      return;
+    }
+    if (seed.value === lastValue) {
+      return;
+    }
+    lastValue = seed.value;
+
+    try {
       const ret = callback(result?.seed.config);
       if (ret && typeof ret.then === 'function') {
-        ret.then(result?.seed.resolve);
+        ret.then((value: any) => seed.resolve(value)).catch(() => seed.resolve(undefined));
+      } else {
+        seed.resolve(ret);
       }
+    } catch (err) {
+      seed.resolve(undefined);
     }
   });
+
+  return effectResult.subscription;
 }

package/src/engine/utils.ts

@@ -1,4 +1,6 @@
+import { isSignal } from "@signe/reactive"
 import { ObservablePoint } from "pixi.js"
+import { Observable } from "rxjs"
 
 /**
  * Checks if code is running in a browser environment
@@ -86,12 +88,23 @@ export function isFunction(val: unknown): boolean {
 }
 
 /**
- * Checks if a value is a plain object
+ * Checks if a value is a plain object (not an instance of a class)
  * @param {unknown} val - Value to check
- * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ * @returns {boolean} True if value is a plain object (not null, not array, not instance), false otherwise
+ * @example
+ * ```ts
+ * isObject({}) // true
+ * isObject(new Date()) // false
+ * isObject([]) // false
+ * isObject(null) // false
+ * ```
  */
 export function isObject(val: unknown): boolean {
-    return typeof val == 'object' && val != null && !Array.isArray(val)
+    return typeof val == 'object' && val != null && !Array.isArray(val) && val.constructor === Object
+}
+
+export function isObservable(val: unknown): boolean {
+    return val instanceof Observable
 }
 
 /**
@@ -186,6 +199,9 @@ export function setObservablePoint(
     else if (Array.isArray(point)) {
         observablePoint.set(point[0], point[1]);
     }
+    else if (isObject(point) && 'value' in point) {
+        observablePoint.set((point as any).value.x, (point as any).value.y);
+    }
     else {
         observablePoint.set(point.x, point.y);
     }

package/src/hooks/useFocus.ts

@@ -0,0 +1,91 @@
+import { Signal } from "@signe/reactive";
+import { Element } from "../engine/reactive";
+import { focusManager } from "../engine/FocusManager";
+import { effect } from "@signe/reactive";
+
+/**
+ * Get the current focus index signal for a container
+ * 
+ * Returns a reactive signal that updates when the focus index changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focus index, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusIndex = useFocusIndex('myContainer');
+ * effect(() => {
+ *   console.log('Current focus index:', focusIndex?.());
+ * });
+ * ```
+ */
+export function useFocusIndex(containerId: string): Signal<number | null> | null {
+  return focusManager.getCurrentIndexSignal(containerId);
+}
+
+/**
+ * Get the current focused element signal for a container
+ * 
+ * Returns a reactive signal that updates when the focused element changes.
+ * 
+ * @param containerId - Container identifier
+ * @returns Signal for current focused element, or null if container not found
+ * 
+ * @example
+ * ```typescript
+ * const focusedElement = useFocusedElement('myContainer');
+ * effect(() => {
+ *   const element = focusedElement?.();
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusedElement(containerId: string): Signal<Element | null> | null {
+  return focusManager.getFocusedElementSignal(containerId);
+}
+
+/**
+ * Hook to react to focus changes
+ * 
+ * Sets up a reactive effect that calls the callback whenever the focus changes.
+ * 
+ * @param containerId - Container identifier
+ * @param callback - Function to call when focus changes
+ * @returns Cleanup function to unsubscribe
+ * 
+ * @example
+ * ```typescript
+ * useFocusChange('myContainer', (index, element) => {
+ *   console.log('Focus changed to index', index);
+ *   if (element) {
+ *     console.log('Focused element:', element);
+ *   }
+ * });
+ * ```
+ */
+export function useFocusChange(
+  containerId: string,
+  callback: (index: number | null, element: Element | null) => void
+): () => void {
+  const indexSignal = focusManager.getCurrentIndexSignal(containerId);
+  const elementSignal = focusManager.getFocusedElementSignal(containerId);
+
+  if (!indexSignal || !elementSignal) {
+    console.warn(`FocusContainer with id "${containerId}" not found`);
+    return () => {};
+  }
+
+  // Set up reactive effect
+  const effectResult = effect(() => {
+    const index = indexSignal();
+    const element = elementSignal();
+    callback(index, element);
+  });
+
+  // Return cleanup function
+  return () => {
+    effectResult.subscription?.unsubscribe();
+  };
+}

package/src/hooks/useProps.ts

@@ -25,7 +25,7 @@ export const useProps = (props, defaults = {}): any => {
     }
     for (let key in defaults) {
         if (!(key in obj)) {
-            obj[key] = signal(defaults[key])
+            obj[key] = isPrimitive(defaults[key]) ? signal(defaults[key]) : defaults[key]
         }
     }
     return obj

package/src/index.ts

@@ -1,15 +1,21 @@
-import './directives'
+
+export * from './directives'
 export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
 export * from './engine/reactive'
+export { registerAllComponents } from './engine/reactive'
 export * from './engine/signal'
 export * from './engine/trigger'
 export * from './engine/bootstrap'
 export * from './engine/animation'
+export { FocusManager, focusManager, type ScrollOptions } from './engine/FocusManager'
 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 Utils from './engine/utils'
+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;
+  }
+}