canvasengine 2.0.0-beta.39 → 2.0.0-beta.40

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-BQ99FClW.js";
-import { A as r, Y as o, Z as n, q as l, v as c, r as p, C as S, d as u, W as m, X as g, ak as d, f as b, D as C, aj as h, ah as j, w as T, j as k, G as w, t as D, c as f, I as v, _ as y, J as E, K as O, M as P, U as V, O as x, P as A, ai as B, R as G, z as H, S as M, g as J, e as N, B as R, y as q, L as F, N as I, T as K, x as U, b as z, H as L, Q, V as W, ag as X, af as Y, ad as Z, k as _, a4 as $, a2 as aa, a5 as sa, l as ea, a9 as ta, ae as ia, m as ra, n as oa, $ as na, o as la, i as ca, a0 as pa, p as Sa, aa as ua, a3 as ma, a7 as ga, a6 as da, ac as ba, a1 as Ca, s as ha, a8 as ja, ab as Ta, a as ka, u as wa } from "./index-BQ99FClW.js";
+import { h as a } from "./index-gb763Hyx.js";
+import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-gb763Hyx.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
@@ -9,23 +9,23 @@ export {
   c as Circle,
   p as Container,
   S as ControlsBase,
-  u as ControlsDirective,
-  m as DOMContainer,
-  g as DOMElement,
-  d as DisplayObject,
+  m as ControlsDirective,
+  u as DOMContainer,
+  d as DOMElement,
+  g as DisplayObject,
   b as Drag,
   C as Drop,
-  h as EVENTS,
-  j as Easing,
-  T as Ellipse,
-  k as Flash,
+  k as EVENTS,
+  h as Easing,
+  j as Ellipse,
+  T as Flash,
   w as GamepadControls,
   D as Graphics,
-  f as Howl,
+  E as Howl,
   e as Howler,
-  v as Input,
-  y as Joystick,
-  E as JoystickControls,
+  f as Input,
+  v as Joystick,
+  y as JoystickControls,
   O as KeyboardControls,
   P as Mesh,
   V as NineSliceSprite,
@@ -35,15 +35,15 @@ export {
   G as Rect,
   H as Scene,
   M as Scheduler,
-  J as Shake,
-  N as Sound,
-  R as Sprite,
-  q as Svg,
-  F as Text,
-  I as TilingSprite,
-  K as Transition,
-  U as Triangle,
-  z as Utils,
+  F as Shake,
+  J as Sound,
+  N as Sprite,
+  R as Svg,
+  q as Text,
+  z as TilingSprite,
+  I as Transition,
+  K as Triangle,
+  U as Utils,
   L as Video,
   Q as Viewport,
   W as ViewportFollow,
@@ -60,20 +60,23 @@ export {
   ra as isArraySubject,
   oa as isComputed,
   na as isElement,
-  la as isObjectSubject,
-  ca as isObservable,
-  pa as isPrimitive,
-  Sa as isSignal,
+  la as isElementFrozen,
+  ca as isObjectSubject,
+  pa as isObservable,
+  Sa as isPrimitive,
+  ma as isSignal,
   ua as isTrigger,
-  ma as loop,
-  ga as mount,
-  da as mountTracker,
-  ba as on,
-  Ca as registerComponent,
-  ha as signal,
-  ja as tick,
-  Ta as trigger,
-  ka as useDefineProps,
-  wa as useProps
+  da as linkedSignal,
+  ga as loop,
+  ba as mount,
+  Ca as mountTracker,
+  ka as on,
+  ha as registerComponent,
+  ja as signal,
+  Ta as tick,
+  wa as trigger,
+  Da as untracked,
+  Ea as useDefineProps,
+  fa as useProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.39",
+  "version": "2.0.0-beta.40",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
     "@pixi/layout": "^3.0.2",
-    "@signe/reactive": "^2.3.3",
+    "@signe/reactive": "^2.6.0",
     "howler": "^2.2.4",
     "joypad.js": "^2.3.5",
     "pixi-filters": "^6.0.5",

package/src/components/Canvas.ts

@@ -69,8 +69,13 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
       frame: 0,
       deltaRatio: 1,
     });
+  } else {
+    options.context!.tick = props.tick;
   }
 
+  // Register the tick signal globally so animatedSignal can use it by default
+  (globalThis as any).__CANVAS_ENGINE_TICK__ = options.context!.tick;
+
   const canvasElement = createComponent("Canvas", options) as CanvasElement;
 
   canvasElement.render = (rootElement: HTMLElement, app?: Application) => {

package/src/components/Container.ts

@@ -59,5 +59,7 @@ export interface CanvasContainer extends DisplayObjectProps {}
 registerComponent("Container", CanvasContainer);
 
 export const Container: ComponentFunction<ContainerProps> = (props) => {
+  // Ensure component is registered (useful in tests if module cache differs)
+  registerComponent("Container", CanvasContainer);
   return createComponent("Container", props);
 };

package/src/components/DisplayObject.ts

@@ -1,4 +1,4 @@
-import { Element, isElement, Props } from "../engine/reactive";
+import { Element, isElement, Props, isElementFrozen } from "../engine/reactive";
 import { setObservablePoint } from "../engine/utils";
 import type {
   AlignContent,
@@ -120,6 +120,16 @@ export function DisplayObject(extendClass) {
     #registeredEvents: Map<string, Function> = new Map();
     // Store computed layout box dimensions
     #computedLayoutBox: { width?: number; height?: number } | null = null;
+    // Store reference to element for freeze checking
+    #element: Element<DisplayObject> | null = null;
+
+    /**
+     * Get the element reference for freeze checking
+     * @returns The element reference or null
+     */
+    protected getElement(): Element<DisplayObject> | null {
+      return this.#element;
+    }
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
@@ -135,15 +145,24 @@ export function DisplayObject(extendClass) {
       for (let event of EVENTS) {
         if (props[event] && !this.overrideProps.includes(event)) {
           this.eventMode = "static";
-          const eventHandler = props[event];
+          const originalEventHandler = props[event];
+          
+          // Wrap event handler to check freeze state
+          const wrappedHandler = (...args: any[]) => {
+            // Check if element is frozen before executing handler
+            if (this.#element && isElementFrozen(this.#element)) {
+              return;
+            }
+            return originalEventHandler(...args);
+          };
           
-          // Store the event handler for cleanup
+          // Store the wrapped event handler for cleanup
           if (event === 'click') {
-            this.on('pointertap', eventHandler);
-            this.#registeredEvents.set('pointertap', eventHandler);
+            this.on('pointertap', wrappedHandler);
+            this.#registeredEvents.set('pointertap', wrappedHandler);
           } else {
-            this.on(event, eventHandler);
-            this.#registeredEvents.set(event, eventHandler);
+            this.on(event, wrappedHandler);
+            this.#registeredEvents.set(event, wrappedHandler);
           }
         }
       }
@@ -171,11 +190,12 @@ export function DisplayObject(extendClass) {
       this.subjectInit.next(this);
     }
 
-    async onMount({ parent, props }: Element<DisplayObject>, index?: number) {
+    async onMount(element: Element<DisplayObject>, index?: number) {
       if (this.destroyed) return
-      this.#canvasContext = props.context;
-      if (parent) {
-        const instance = parent.componentInstance as DisplayObject;
+      this.#element = element;
+      this.#canvasContext = element.props.context;
+      if (element.parent) {
+        const instance = element.parent.componentInstance as DisplayObject;
         if (instance.isFlex && !this.layout && !this.disableLayout) {
           try {
             this.layout = {};
@@ -189,7 +209,7 @@ export function DisplayObject(extendClass) {
           instance.addChildAt(this, index);
         }
         this.isMounted = true;
-        this.onUpdate(props);
+        this.onUpdate(element.props);
         
         // Listen to layout events to store computed layout dimensions
         const layoutHandler = (event: any) => {
@@ -316,6 +336,7 @@ export function DisplayObject(extendClass) {
         this.off(eventName, eventHandler);
       }
       this.#registeredEvents.clear();
+      this.#element = null;
 
       if (this.onBeforeDestroy) {
         await this.onBeforeDestroy();

package/src/components/Sprite.ts

@@ -14,6 +14,7 @@ import {
   createComponent,
   isElement,
   registerComponent,
+  isElementFrozen,
 } from "../engine/reactive";
 import { arrayEquals, isFunction } from "../engine/utils";
 import { DisplayObject } from "./DisplayObject";
@@ -299,6 +300,10 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   }
 
   async onMount(params: Element<CanvasSprite>) {
+    // Set #element manually for freeze checking before calling super.onMount
+    // We need to set it early so update() can check freeze state
+    (this as any)['#element'] = params;
+    
     const { props, propObservables } = params;
     const tick: Signal = props.context.tick;
     const sheet = props.sheet ?? {};
@@ -421,7 +426,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
     if (sheet?.params) this.sheetParams = sheet?.params;
 
-    if (sheet?.playing && this.isMounted) {
+    if (sheet?.playing && this.isMounted && this.spritesheet && this.animations.size > 0) {
       this.sheetCurrentAnimation = sheet?.playing;
       this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     }
@@ -587,6 +592,12 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   }
 
   update({ deltaRatio }) {
+    // Block animation update if element is frozen
+    const element = this.getElement();
+    if (element && isElementFrozen(element)) {
+      return;
+    }
+    
     if (
       !this.isPlaying() ||
       !this.currentAnimation ||
@@ -752,5 +763,7 @@ export type SpritePropTypes = SpritePropsWithImage | SpritePropsWithSheet;
 
 // Update the Sprite function to use the props interface
 export const Sprite: ComponentFunction<SpritePropTypes> = (props) => {
+  // Ensure component is registered in test environments where module cache may differ
+  registerComponent("Sprite", CanvasSprite);
   return createComponent("Sprite", props);
 };

package/src/directives/Controls.ts

@@ -1,9 +1,11 @@
 import { Directive, registerDirective } from "../engine/directive";
-import { Element } from "../engine/reactive";
+import { Element, isElementFrozen } from "../engine/reactive";
 import { ControlsBase, Controls } from "./ControlsBase";
 import { KeyboardControls } from "./KeyboardControls";
 import { GamepadControls, GamepadConfig } from "./GamepadControls";
 import { JoystickControls, JoystickConfig } from "./JoystickControls";
+import { Signal, isSignal } from "@signe/reactive";
+import { Subscription } from "rxjs";
 
 /**
  * Controls directive that coordinates keyboard, gamepad, and joystick input systems
@@ -27,12 +29,15 @@ export class ControlsDirective extends Directive {
     private keyboardControls: KeyboardControls | null = null;
     private gamepadControls: GamepadControls | null = null;
     private joystickControls: JoystickControls | null = null;
+    private freezeSubscription: Subscription | null = null;
+    private element: Element | null = null;
 
     /**
      * Initialize the controls directive
      * Sets up keyboard, gamepad, and joystick controls if available
      */
     onInit(element: Element) {
+        this.element = element;
         const value = element.props.controls?.value ?? element.props.controls;
         if (!value) return;
 
@@ -57,6 +62,23 @@ export class ControlsDirective extends Directive {
             this.joystickControls.setInputs(value as Controls & { joystick?: JoystickConfig });
             this.joystickControls.start();
         }
+
+        // Check initial freeze state
+        if (isElementFrozen(element)) {
+            this.stopInputs();
+        }
+
+        // Subscribe to freeze prop if it's a signal
+        const freezeProp = element.propObservables?.freeze ?? element.props?.freeze;
+        if (isSignal(freezeProp)) {
+            this.freezeSubscription = (freezeProp as Signal<boolean>).observable.subscribe((isFrozen) => {
+                if (isFrozen) {
+                    this.stopInputs();
+                } else {
+                    this.listenInputs();
+                }
+            });
+        }
     }
 
     /**
@@ -68,16 +90,25 @@ export class ControlsDirective extends Directive {
      * Update controls configuration
      * Updates both keyboard and gamepad controls
      */
-    onUpdate(props: any) {
+    onUpdate(props: any, element: Element) {
         const value = props.controls?.value ?? props.controls;
-        if (!value) return;
+        if (value) {
+            if (this.keyboardControls) {
+                this.keyboardControls.setInputs(value as Controls);
+            }
 
-        if (this.keyboardControls) {
-            this.keyboardControls.setInputs(value as Controls);
+            if (this.gamepadControls) {
+                this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+            }
         }
 
-        if (this.gamepadControls) {
-            this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+        // Handle freeze prop update
+        if (props.freeze !== undefined && this.element) {
+            if (isElementFrozen(this.element)) {
+                this.stopInputs();
+            } else {
+                this.listenInputs();
+            }
         }
     }
 
@@ -85,6 +116,11 @@ export class ControlsDirective extends Directive {
      * Cleanup and destroy all control systems
      */
     onDestroy(element: Element) {
+        if (this.freezeSubscription) {
+            this.freezeSubscription.unsubscribe();
+            this.freezeSubscription = null;
+        }
+
         if (this.keyboardControls) {
             this.keyboardControls.destroy();
             this.keyboardControls = null;
@@ -99,6 +135,8 @@ export class ControlsDirective extends Directive {
             this.joystickControls.destroy();
             this.joystickControls = null;
         }
+
+        this.element = null;
     }
 
     /**

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