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

package/src/engine/animation.ts

@@ -1,10 +1,24 @@
-import { effect, signal, type WritableSignal } from "@signe/reactive";
+import { effect, signal, type WritableSignal, type Signal } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
+import { Tick } from "../directives/Scheduler";
+import { Subscription } from "rxjs";
 
-interface AnimateOptions<T> {
+/**
+ * Gets the global tick signal from the engine context.
+ * This is automatically set by the Canvas component when it initializes.
+ * 
+ * @returns The global tick signal if available, undefined otherwise
+ */
+function getGlobalTickSignal(): Signal<Tick> | undefined {
+  return (globalThis as any).__CANVAS_ENGINE_TICK__;
+}
+
+export interface AnimateOptions<T> {
   duration?: number;
   ease?: (t: number) => number;
   onUpdate?: (value: T) => void;
+  onComplete?: () => void;
+  tick?: Signal<Tick>;
 }
 
 export interface AnimatedState<T> {
@@ -15,15 +29,65 @@ export interface AnimatedState<T> {
 
 export interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
   (): T;
-  set: (newValue: T) => void;
+  set: (newValue: T, options?: AnimateOptions<T>) => Promise<void>;
   animatedState: WritableSignal<AnimatedState<T>>;
   update: (updater: (value: T) => T) => void;
+  pause: () => void;
+  resume: () => void;
 }
 
 export function isAnimatedSignal(signal: WritableSignal<any>): boolean {
   return (signal as unknown as AnimatedSignal<any>).animatedState !== undefined;
 }
 
+/**
+ * Creates a popmotion driver that uses the engine's tick system.
+ * The driver subscribes to the tick signal and calls the update function with deltaTime on each tick.
+ * 
+ * @param tickSignal - The tick signal from the engine context
+ * @returns A driver function for popmotion
+ * @example
+ * ```ts
+ * const driver = createTickDriver(context.tick);
+ * animate({
+ *   to: 100,
+ *   driver: driver
+ * });
+ * ```
+ */
+function createTickDriver(tickSignal: Signal<Tick>) {
+  return (update: (delta: number) => void) => {
+    let subscription: Subscription | undefined;
+    let lastTimestamp: number | null = null;
+    
+    const start = () => {
+      if (subscription) return;
+
+      subscription = (tickSignal.observable as any).subscribe((result: any) => {
+        const tick = result?.value ?? result;
+        if (!tick) return;
+
+        if (lastTimestamp === null) {
+          lastTimestamp = tick.timestamp;
+          return;
+        }
+
+        const delta = tick.deltaTime;
+        lastTimestamp = tick.timestamp;
+        update(delta);
+      });
+    };
+
+    const stop = () => {
+      subscription?.unsubscribe();
+      subscription = undefined;
+      lastTimestamp = null;
+    };
+
+    return { start, stop };
+  };
+}
+
 /**
  * Creates an animated signal with the given initial value and animation options.
  * It's a writable signal that can be animated using popmotion. Properties of the animated signal are:
@@ -31,16 +95,26 @@ export function isAnimatedSignal(signal: WritableSignal<any>): boolean {
  * - start: the start value of the animation.
  * - end: the end value of the animation.
  * 
+ * If a tick signal is provided in options, the animation will use the engine's tick system.
+ * Otherwise, it will automatically use the global tick signal from the Canvas context if available.
+ * If no tick signal is available, it will use requestAnimationFrame by default.
+ * 
  * @param initialValue The initial value of the signal.
- * @param options The animation options.
+ * @param options The animation options. Can include a `tick` signal to use a specific tick system.
  * @returns The animated signal.
  * @example
+ * ```ts
+ * // Automatically uses the Canvas tick system if available, otherwise requestAnimationFrame
  * const animatedValue = animatedSignal(0, { duration: 1000 });
  * animatedValue.set(10);
- * animatedValue.update((value) => value + 1);
- * console.log(animatedValue()); // 11
  * 
- * animatedValue.animatedState() // { current: 10, start: 10, end: 11 }
+ * // Explicitly using a specific tick signal
+ * mount((element) => {
+ *   const tickSignal = element.props.context.tick;
+ *   const animatedValue = animatedSignal(0, { duration: 1000, tick: tickSignal });
+ *   animatedValue.set(10);
+ * });
+ * ```
  */
 export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> = {}): AnimatedSignal<T> {
   const state: AnimatedState<T> = {
@@ -48,7 +122,9 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
     start: initialValue,
     end: initialValue,
   };
-  let animation
+  const DEFAULT_DURATION = 20;
+  let animation: { stop: () => void } | null = null;
+  let isPaused = false;
 
   const publicSignal = signal(initialValue);
   const privateSignal = signal(state);
@@ -60,7 +136,8 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
 
   function animatedSignal(): AnimatedState<T>;
   function animatedSignal(newValue: T): void;
-  function animatedSignal(newValue?: T): AnimatedState<T> | void {
+  function animatedSignal(newValue: T, animationConfig: AnimateOptions<T>): void;
+  function animatedSignal(newValue?: T, animationConfig: AnimateOptions<T> = {}): AnimatedState<T> | void {
     if (newValue === undefined) {
       return privateSignal();
     }
@@ -74,23 +151,43 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
 
     privateSignal.set(newState);
 
+    // Stop any running animation
     if (animation) {
       animation.stop();
+      animation = null;
     }
 
+    isPaused = false;
+    const mergedConfig = { ...options, ...animationConfig };
+    const duration = mergedConfig.duration ?? DEFAULT_DURATION;
+    const ease = mergedConfig.ease ?? ((t: number) => t);
+    const tickSignal = mergedConfig.tick || getGlobalTickSignal();
+
+    const startValue = prevState.current;
+    const endValue = newValue;
+
+    const onCompleteCb = animationConfig.onComplete ?? options.onComplete;
+    
+
     animation = animatePopmotion({
-       // TODO
-       duration: 20,
-      ...options,
-      from: prevState.current,
-      to: newValue,
-      onUpdate: (value) => {
-        privateSignal.update(s => ({ ...s, current: value as T }));
-        if (options.onUpdate) {
-          options.onUpdate(value as T);
-        }
+      from: startValue as any,
+      to: endValue as any,
+      duration,
+      ease,
+      
+      onUpdate: (value: any) => {
+        if (isPaused) return;
+        const nextValue = value as T;
+        privateSignal.update(s => ({ ...s, current: nextValue }));
+        mergedConfig.onUpdate?.(nextValue);
+        animationConfig.onUpdate?.(nextValue);
       },
+      onComplete: () => {
+        privateSignal.update(s => ({ ...s, current: endValue }));
+        onCompleteCb?.();
+      }
     });
+     
   }
 
   const fn = function() {
@@ -105,9 +202,66 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
   fn.update = (updater: (value: T) => any) => {
     animatedSignal(updater(privateSignal().current));
   }
-  fn.set = (newValue: T) => {
-    animatedSignal(newValue);
+  fn.set = async (newValue: T, animationConfig: AnimateOptions<T> = {}) => {
+    return new Promise<void>((resolve) => {
+      const userOnComplete = animationConfig.onComplete;
+      animatedSignal(newValue, {
+        ...animationConfig,
+        onComplete: () => {
+          if (userOnComplete) {
+            userOnComplete();
+          } else if (options.onComplete) {
+            options.onComplete();
+          }
+          resolve();
+        }
+      });
+    });
+  }
+  fn.pause = () => {
+    if (isPaused) return;
+    isPaused = true;
+    if (animation) {
+      animation.stop();
+      animation = null;
+    }
+  }
+  fn.resume = () => {
+    if (!isPaused) return;
+    isPaused = false;
+    const currentState = privateSignal();
+    if (currentState.current !== currentState.end) {
+      animatedSignal(currentState.end, options);
+    }
   }
 
   return fn as any
+}
+
+/**
+ * Executes a sequence of animations. If an array is provided as an element in the sequence,
+ * those animations will be executed in parallel.
+ * 
+ * @param sequence Array of animation functions or arrays of animation functions for parallel execution
+ * @returns Promise that resolves when all animations are complete
+ * @example
+ * ```ts
+ * await animatedSequence([
+ *   () => value1.set(10),
+ *   [
+ *     () => value2.set(20),
+ *     () => value3.set(30)
+ *   ],
+ *   () => value1.set(0)
+ * ])
+ * ```
+ */
+export async function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]) {
+  for (const item of sequence) {
+    if (Array.isArray(item)) {
+      await Promise.all(item.map(fn => fn()));
+    } else {
+      await item();
+    }
+  }
 }

package/src/engine/bootstrap.ts

@@ -1,19 +1,109 @@
+import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
+import { useProps } from '../hooks/useProps';
+import { registerAllComponents, registerComponent } from './reactive';
+
+// Import all components to ensure they are registered
+// This is done here (not in reactive.ts) to avoid circular dependencies
+// Components register themselves when their modules are imported
+import '../components/Canvas';
+import '../components/Container';
+import '../components/Sprite';
+import '../components/Text';
+import '../components/Graphic';
+import '../components/Mesh';
+import '../components/Viewport';
+import '../components/TilingSprite';
+import '../components/NineSliceSprite';
+import '../components/DOMContainer';
+import '../components/DOMElement';
+import '../components/ParticleEmitter';
+
+/**
+ * Extended options for bootstrapCanvas that includes component registration configuration.
+ * 
+ * @property components - Optional mapping of component names to their classes (can include mocks for testing)
+ * @property autoRegister - If true (default), registers all default components before applying custom components. If false, only registers the specified components.
+ */
+export interface BootstrapOptions extends ApplicationOptions {
+  components?: {
+    [name: string]: any; // ComponentClass
+  };
+  autoRegister?: boolean; // true by default if components is not provided
+  enableLayout?: boolean; // true by default
+}
 
 /**
  * Bootstraps a canvas element and renders it to the DOM.
  * 
  * @param rootElement - The HTML element where the canvas will be rendered. Can be null.
  * @param canvas - A Promise that resolves to an Element representing the canvas component.
+ * @param options - Optional bootstrap options including ApplicationOptions and component registration configuration.
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
+ * 
+ * @example
+ * ```typescript
+ * // Default: all components registered automatically
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   width: 800,
+ *   height: 600
+ * });
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // With mocks for testing
+ * import { mockComponents } from '@canvasengine/testing';
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   components: mockComponents,
+ *   autoRegister: false
+ * });
+ * ```
  */
-export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>) => {
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
+  // Extract component registration options
+  const { components, autoRegister, enableLayout, ...appOptions } = options ?? {};
+  if (enableLayout !== false) {
+    await import('@pixi/layout');
+  }
+  
+  // Handle component registration
+  if (components) {
+    if (autoRegister !== false) {
+      // Register all default components first, then override with custom ones
+      registerAllComponents();
+    }
+    // Register the specified components (overriding defaults if autoRegister is true)
+    Object.entries(components).forEach(([name, componentClass]) => {
+      registerComponent(name, componentClass);
+    });
+  } else {
+    // Default behavior: register all components
+    registerAllComponents();
+  }
+  
+  const app = new Application();
+  await app.init({
+    resizeTo: rootElement,
+    autoStart: false,
+    antialias: true,
+    ...appOptions
+  });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != 'Canvas') {
     throw new Error('Canvas is required');
   }
-  (canvasElement as any).render(rootElement);
+  (canvasElement as any).render(rootElement, app);
+
+  const { backgroundColor } = useProps(canvasElement.props, {
+    backgroundColor: 'black'
+  });
+
+  app.renderer.background.color = backgroundColor()
 
-  return canvasElement;
+  return {
+    canvasElement,
+    app
+  };
 };

package/src/engine/directive.ts

@@ -3,21 +3,21 @@ import { Element } from "./reactive"
 export const directives: { [key: string]: any } = {}
 
 export abstract class Directive {
-    abstract onDestroy();
+    abstract onDestroy(element: Element<any>);
     abstract onInit(element:  Element<any>);
     abstract onMount(element: Element<any>);
-    abstract onUpdate(props: any);
+    abstract onUpdate(props: any, element: Element<any>);
 }
 
 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
-}
+}