canvasengine 2.0.0-beta.37 → 2.0.0-beta.38

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-BqwprEPH.js";
-import { A as r, X as o, Y as n, q as l, v as c, r as p, C as S, d as u, U as m, W as g, ai as d, f as b, D as C, ah as h, af as T, w as j, j as w, G as D, t as f, c as v, I as E, K as O, M as k, Q as y, O as P, P as V, ag as x, R as A, z as B, S as G, g as H, e as M, B as N, y as R, J as q, L as F, T as I, x as K, b as U, H as z, N as J, V as L, ae as Q, ad as W, ab as X, k as Y, a2 as Z, a0 as _, a3 as $, l as aa, a7 as sa, ac as ea, m as ta, n as ia, Z as ra, o as oa, i as na, _ as la, p as ca, a8 as pa, a1 as Sa, a5 as ua, a4 as ma, aa as ga, $ as da, s as ba, a6 as Ca, a9 as ha, a as Ta, u as ja } from "./index-BqwprEPH.js";
+import { h as a } from "./index-BgNWflRE.js";
+import { A as r, X as o, Y as n, q as l, v as c, r as p, C as S, d as u, U as m, W as g, ai as d, f as b, D as C, ah as h, af as T, w as j, j as w, G as D, t as f, c as v, I as E, K as O, M as k, Q as y, O as P, P as V, ag as x, R as A, z as B, S as G, g as H, e as M, B as N, y as R, J as q, L as F, T as I, x as K, b as U, H as z, N as J, V as L, ae as Q, ad as W, ab as X, k as Y, a2 as Z, a0 as _, a3 as $, l as aa, a7 as sa, ac as ea, m as ta, n as ia, Z as ra, o as oa, i as na, _ as la, p as ca, a8 as pa, a1 as Sa, a5 as ua, a4 as ma, aa as ga, $ as da, s as ba, a6 as Ca, a9 as ha, a as Ta, u as ja } from "./index-BgNWflRE.js";
 const e = a.Howler;
 export {
   r as ArraySubject,

package/dist/utils/GlobalAssetLoader.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Global Asset Loader
+ *
+ * Tracks the loading progress of all assets (images, spritesheets, etc.) across all sprites in a component tree.
+ * This allows components to know when all assets are loaded, useful for displaying loaders or progress bars.
+ *
+ * @example
+ * ```typescript
+ * const loader = new GlobalAssetLoader();
+ *
+ * loader.onProgress((progress) => {
+ *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+ * });
+ *
+ * loader.onComplete(() => {
+ *   console.log('All assets loaded!');
+ * });
+ *
+ * // Register assets as they start loading
+ * const assetId = loader.registerAsset('path/to/image.png');
+ *
+ * // Update progress
+ * loader.updateProgress(assetId, 0.5);
+ *
+ * // Mark as complete
+ * loader.completeAsset(assetId);
+ * ```
+ */
+export declare class GlobalAssetLoader {
+    private assets;
+    private onProgressCallbacks;
+    private onCompleteCallbacks;
+    private assetCounter;
+    private isComplete;
+    /**
+     * Registers a new asset to track
+     *
+     * @param assetPath - The path or identifier of the asset being loaded
+     * @returns A unique ID for this asset that should be used for progress updates
+     *
+     * @example
+     * ```typescript
+     * const assetId = loader.registerAsset('path/to/image.png');
+     * ```
+     */
+    registerAsset(assetPath: string): string;
+    /**
+     * Updates the progress of a specific asset
+     *
+     * @param assetId - The ID returned by registerAsset
+     * @param progress - Progress value between 0 and 1
+     *
+     * @example
+     * ```typescript
+     * loader.updateProgress(assetId, 0.5); // 50% loaded
+     * ```
+     */
+    updateProgress(assetId: string, progress: number): void;
+    /**
+     * Marks an asset as completely loaded
+     *
+     * @param assetId - The ID returned by registerAsset
+     *
+     * @example
+     * ```typescript
+     * loader.completeAsset(assetId);
+     * ```
+     */
+    completeAsset(assetId: string): void;
+    /**
+     * Removes an asset from tracking (useful for cleanup)
+     *
+     * @param assetId - The ID returned by registerAsset
+     */
+    removeAsset(assetId: string): void;
+    /**
+     * Registers a callback that will be called whenever the global progress changes
+     *
+     * @param callback - Function that receives the global progress (0-1)
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onProgress((progress) => {
+     *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onProgress(callback: (progress: number) => void): () => void;
+    /**
+     * Registers a callback that will be called when all assets are loaded
+     *
+     * @param callback - Function to call when all assets are complete
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onComplete(() => {
+     *   console.log('All assets loaded!');
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onComplete(callback: () => void): () => void;
+    /**
+     * Gets the current global progress (0-1)
+     *
+     * @returns Progress value between 0 and 1
+     */
+    getGlobalProgress(): number;
+    /**
+     * Gets the number of assets currently being tracked
+     *
+     * @returns Number of registered assets
+     */
+    getAssetCount(): number;
+    /**
+     * Gets the number of completed assets
+     *
+     * @returns Number of completed assets
+     */
+    getCompletedCount(): number;
+    /**
+     * Checks if all assets are loaded and triggers onComplete callbacks
+     */
+    private checkCompletion;
+    /**
+     * Updates global progress and notifies all progress callbacks
+     */
+    private updateGlobalProgress;
+    /**
+     * Resets the loader, clearing all assets and callbacks
+     */
+    reset(): void;
+}
+//# sourceMappingURL=GlobalAssetLoader.d.ts.map

package/dist/utils/GlobalAssetLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalAssetLoader.d.ts","sourceRoot":"","sources":["../../src/utils/GlobalAssetLoader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAoE;IAClF,OAAO,CAAC,mBAAmB,CAA8C;IACzE,OAAO,CAAC,mBAAmB,CAA8B;IACzD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,UAAU,CAAkB;IAEpC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAQxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAWvD;;;;;;;;;OASG;IACH,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAapC;;;;OAIG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;IAe5D;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAa5C;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAa3B;;;;OAIG;IACH,aAAa,IAAI,MAAM;IAIvB;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAQ3B;;OAEG;IACH,OAAO,CAAC,eAAe;IAiBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,KAAK,IAAI,IAAI;CAOd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.37",
+  "version": "2.0.0-beta.38",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Canvas.ts

@@ -12,6 +12,7 @@ import { ComponentFunction } from "../engine/signal";
 import { SignalOrPrimitive } from "./types";
 import { Size } from "./types/DisplayObject";
 import { Scheduler, Tick } from "../directives/Scheduler";
+import { GlobalAssetLoader } from "../utils/GlobalAssetLoader";
 
 interface CanvasElement extends Element<ComponentInstance> {
   render: (rootElement: HTMLElement, app?: Application) => void;
@@ -49,11 +50,13 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
   });
 
   props.isRoot = true;
+  const globalLoader = new GlobalAssetLoader();
   const options: CanvasProps = {
     ...props,
     context: {
       canvasSize,
       app: signal(null),
+      globalLoader,
     },
     width: width?.(),
     height: height?.(),

package/src/components/Sprite.ts

@@ -28,6 +28,7 @@ import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { AnimatedSignal, isAnimatedSignal } from "../engine/animation";
 import { Layout } from '@pixi/layout';
+import { GlobalAssetLoader } from "../utils/GlobalAssetLoader";
 
 const log = console.log;
 
@@ -79,6 +80,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   private sheetCurrentAnimation: string = StandardAnimation.Stand;
   private app: Application | null = null;
   onFinish: () => void;
+  private globalLoader: GlobalAssetLoader | null = null;
+  private trackedAssetIds: Set<string> = new Set();
 
   get renderer() {
     return this.app?.renderer;
@@ -103,8 +106,25 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     if (!imagePath || typeof imagePath !== 'string' || imagePath.trim() === '') {
       throw new Error(`Invalid image path provided to detectImageDimensions: ${imagePath}`);
     }
-    
-    const texture = await Assets.load(imagePath);
+
+    // Register asset in global loader if available
+    let assetId: string | null = null;
+    if (this.globalLoader) {
+      assetId = this.globalLoader.registerAsset(imagePath);
+      this.trackedAssetIds.add(assetId);
+    }
+
+    const texture = await Assets.load(imagePath, (progress) => {
+      if (this.globalLoader && assetId) {
+        this.globalLoader.updateProgress(assetId, progress);
+      }
+    });
+
+    // Mark as complete
+    if (this.globalLoader && assetId) {
+      this.globalLoader.completeAsset(assetId);
+    }
+
     return {
       width: texture.width,
       height: texture.height,
@@ -145,14 +165,30 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     options: Required<TextureOptionsMerging>
   ): Promise<Texture[][]> {
     let { width, height, framesHeight, framesWidth, image, offset } = options;
-    
+
     if (!image || typeof image !== 'string' || image.trim() === '') {
       console.warn('Invalid image path provided to createTextures:', image);
       return [];
     }
-    
-    const texture = await Assets.load(image);
-    
+
+    // Register asset in global loader if available
+    let assetId: string | null = null;
+    if (this.globalLoader) {
+      assetId = this.globalLoader.registerAsset(image);
+      this.trackedAssetIds.add(assetId);
+    }
+
+    const texture = await Assets.load(image, (progress) => {
+      if (this.globalLoader && assetId) {
+        this.globalLoader.updateProgress(assetId, progress);
+      }
+    });
+
+    // Mark as complete
+    if (this.globalLoader && assetId) {
+      this.globalLoader.completeAsset(assetId);
+    }
+
     // Auto-detect width and height from the image if not provided
     if (!width || width <= 0) {
       width = texture.width;
@@ -162,7 +198,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       height = texture.height;
       options.height = height;
     }
-    
+
     const spriteWidth = options.spriteWidth;
     const spriteHeight = options.spriteHeight;
     const frames: Texture[][] = [];
@@ -228,11 +264,11 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         framesHeight = 1,
         image,
       } = optionsTextures;
-      
+
       // Auto-detect width and height from the image if not provided
       let width = widthOption;
       let height = heightOption;
-      
+
       if (image && ((!width || width <= 0) || (!height || height <= 0))) {
         const dimensions = await this.detectImageDimensions(image);
         if (!width || width <= 0) {
@@ -244,7 +280,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
           optionsTextures.height = height;
         }
       }
-      
+
       optionsTextures.spriteWidth = rectWidth ? rectWidth : width / framesWidth;
       optionsTextures.spriteHeight = rectHeight
         ? rectHeight
@@ -268,6 +304,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const sheet = props.sheet ?? {};
     const definition = props.sheet?.definition ?? {};
     this.app = props.context.app();
+    // Get global loader from context if available
+    this.globalLoader = props.context?.globalLoader || null;
     if (sheet?.onFinish) {
       this.onFinish = sheet.onFinish;
     }
@@ -320,7 +358,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         this.sheetCurrentAnimation = StandardAnimation.Stand;
       }
 
-      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+      if (this.spritesheet && this.has(this.sheetCurrentAnimation)) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
     super.onMount(params);
   }
@@ -329,16 +367,37 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     if (this.destroyed) return
     super.onUpdate(props);
 
+    // Initialize globalLoader from context if not already set
+    if (!this.globalLoader && props.context?.globalLoader) {
+      this.globalLoader = props.context.globalLoader;
+    }
+
     const setTexture = async (image: string) => {
       if (!image || typeof image !== 'string' || image.trim() === '') {
         console.warn('Invalid image path provided to setTexture:', image);
         return null;
       }
-      
+
+      // Register asset in global loader if available
+      let assetId: string | null = null;
+      if (this.globalLoader) {
+        assetId = this.globalLoader.registerAsset(image);
+        this.trackedAssetIds.add(assetId);
+      }
+
       const onProgress = this.fullProps.loader?.onProgress;
       const texture = await Assets.load(image, (progress) => {
+        // Update global loader progress
+        if (this.globalLoader && assetId) {
+          this.globalLoader.updateProgress(assetId, progress);
+        }
+        // Call local loader callback if provided
         if (onProgress) onProgress(progress);
         if (progress == 1) {
+          // Mark as complete in global loader
+          if (this.globalLoader && assetId) {
+            this.globalLoader.completeAsset(assetId);
+          }
           const onComplete = this.fullProps.loader?.onComplete;
           if (onComplete) {
             // hack to memoize the texture
@@ -379,7 +438,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       if (isElement(props.texture)) {
         const textureInstance = props.texture.componentInstance;
         textureInstance.subjectInit
-        .subscribe()
+          .subscribe()
         this.texture = this.renderer?.generateTexture(props.texture.componentInstance);
       } else {
         this.texture = props.texture;
@@ -399,6 +458,13 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
   async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
     const _afterDestroy = async () => {
+      // Clean up tracked assets from global loader
+      if (this.globalLoader) {
+        this.trackedAssetIds.forEach((assetId) => {
+          this.globalLoader!.removeAsset(assetId);
+        });
+        this.trackedAssetIds.clear();
+      }
       this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
       this.subscriptionTick.unsubscribe();
       if (this.currentAnimationContainer && this.parent instanceof Container) {
@@ -500,16 +566,16 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   async resetAnimations(): Promise<void> {
     // Stop current animation
     this.stop();
-    
+
     // Clear all animations and textures
     this.animations.clear();
-    
+
     // Reset animation state
     this.currentAnimation = null;
     this.currentAnimationContainer = null;
     this.time = 0;
     this.frameIndex = 0;
-    
+
     // Clear children
     this.removeChildren();
 

package/src/components/types/Spritesheet.ts

@@ -208,124 +208,6 @@ export interface TexturesOptions extends TextureOptions, TransformOptions {
 }
 
 export interface SpritesheetOptions extends TransformOptions, TextureOptions {
-    /** 
-    * Object containing all animations. 
-    * The key to the object is the name of the animation. The value is a two-dimensional array
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *         animations: [
-    *              [ { time: 0, frameX: 0, frameY: 0 } ]
-    *         ]
-    *      }
-    * }
-    * ```
-    * 
-    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
-    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
-    * 
-    * Here are the properties:
-    * 
-    * * `time`: Time in frame
-    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
-    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
-    * * `opacity`
-    * * `pivot`
-    * * `anchor`
-    * * `rotation`
-    * * `angle`
-    * * `scale`
-    * * `skew`
-    * * `x`
-    * * `y`
-    * * `visible`
-    * * `sound`: The sound that will be played during the frame
-    * 
-    * ---
-    * **Extract Animation of Spritesheet**
-    * 
-    * Sometimes the animation is part of the image
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *          rectWidth: 64,
-    *          rectHeight: 64,
-    *          framesWidth: 10,
-    *          framesHeight: 2,
-    *          offset: {x: 0, y: 230},
-    *          sound: 'my-sound-id', // You can put a sound just for the animation
-    *          animations: [
-    *               [ { time: 0, frameX: 0, frameY: 0 } ]
-    *          ]
-    *      }
-    * }
-    * ```
-    * 
-    * Above, we can specify which part we want to recover
-    * 
-    * 1. We go to the position {0, 230} of the image (`offset`)
-    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
-    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
-    * 
-    * --- 
-    * 
-    * **Advanced**
-    * 
-    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
-    * 
-    * Full example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
-    *          }
-    *      })
-    * })
-    * export class Chest  { }
-    * ```
-    * 
-    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
-    * 
-    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
-    *          }
-    *      }
-    * })
-    * export class Chest implements ISpriteCharacter { 
-    *      onCharacterStand(sprite: RpgSprite) {
-    *         sprite.animation.play(Animation.Stand, ['hello'])
-    *      }
-    * }
-    * ```
-    * 
-    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
-    * @memberof Spritesheet
-    * */
     textures?: {
         [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>
     }

package/src/directives/GamepadControls.ts

@@ -129,13 +129,6 @@ export class GamepadControls extends ControlsBase {
             clearInterval(this.gamepadMoveInterval);
             this.gamepadMoveInterval = null;
         }
-        
-        if (this.joypad) {
-            this.joypad.off('connect');
-            this.joypad.off('disconnect');
-            this.joypad.off('button_press');
-            this.joypad.off('axis_move');
-        }
     }
 
     /**