canvasengine 2.0.0-beta.8 → 2.0.0-rc.1

package/src/engine/animation.ts

@@ -1,11 +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";
+
+/**
+ * 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> {
@@ -19,12 +32,62 @@ export interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
   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:
@@ -32,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> = {
@@ -49,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);
@@ -76,24 +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,
-      ...animationConfig,
-      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() {
@@ -110,11 +204,35 @@ export function animatedSignal<T>(initialValue: T, options: AnimateOptions<T> =
   }
   fn.set = async (newValue: T, animationConfig: AnimateOptions<T> = {}) => {
     return new Promise<void>((resolve) => {
+      const userOnComplete = animationConfig.onComplete;
       animatedSignal(newValue, {
         ...animationConfig,
-        onComplete: resolve
+        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

package/src/engine/bootstrap.ts

@@ -1,19 +1,153 @@
+import { Application, ApplicationOptions } from "pixi.js";
+import { Observable, Subscription } from "rxjs";
 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
+}
+
+type BootstrapResult = {
+  canvasElement: any;
+  app: Application;
+  hmrSubscription?: Subscription;
+};
 
 /**
  * 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>) => {
-  const canvasElement = await h(canvas);
-  if (canvasElement.tag != 'Canvas') {
-    throw new Error('Canvas is required');
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions): Promise<BootstrapResult> => {
+  // 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 renderCanvasElement = (canvasElement: any) => {
+    if (canvasElement.tag != 'Canvas') {
+      throw new Error('Canvas is required');
+    }
+    canvasElement.render(rootElement, app);
+
+    const { backgroundColor } = useProps(canvasElement.props, {
+      backgroundColor: 'black'
+    });
+
+    app.renderer.background.color = backgroundColor()
+
+    return {
+      canvasElement,
+      app
+    };
+  };
+
+  const canvasElement = h(canvas) as any;
+
+  if (canvasElement instanceof Observable) {
+    return new Promise<BootstrapResult>((resolve, reject) => {
+      let resolved = false;
+      let hmrSubscription: Subscription;
+
+      hmrSubscription = canvasElement.subscribe({
+        next(value: any) {
+          try {
+            const nextCanvasElement = value?.elements?.[0] ?? value;
+            if (!nextCanvasElement) return;
+
+            const result = renderCanvasElement(nextCanvasElement);
+
+            if (!resolved) {
+              resolved = true;
+              Promise.resolve().then(() => {
+                resolve({
+                  ...result,
+                  hmrSubscription
+                });
+              });
+            }
+          } catch (error) {
+            reject(error);
+          }
+        },
+        error: reject
+      });
+    });
   }
-  (canvasElement as any).render(rootElement);
 
-  return canvasElement;
+  return renderCanvasElement(await canvasElement);
 };

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
-}
+}