canvasengine 2.0.0-beta.31 → 2.0.0-beta.33

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-DNDNQN-q.js";
-import { A as r, B as n, w as o, C as c, m as l, l as p, D as S, v as m, a5 as u, a4 as g, a2 as b, n as d, G as C, c as j, M as T, N as E, O, P as f, a3 as v, R as w, o as h, p as D, S as P, q as k, r as x, T as y, b as A, V as H, t as M, a1 as V, a0 as B, _ as G, d as N, J as R, H as q, K as U, e as z, W as I, $ as J, f as K, g as L, x as Q, j as W, i as X, y as Y, k as Z, X as _, I as $, Q as F, L as aa, Z as sa, z as ea, s as ta, U as ia, Y as ra, a as na, u as oa } from "./index-DNDNQN-q.js";
+import { h as a } from "./index-BLbc2zG5.js";
+import { A as r, B as n, w as o, C as c, m as l, l as p, D as S, v as m, a5 as u, a4 as g, a2 as b, n as d, G as C, c as j, M as T, N as E, O, P as f, a3 as v, R as w, o as h, p as D, S as P, q as k, r as x, T as y, b as A, V as H, t as M, a1 as V, a0 as B, _ as G, d as N, J as R, H as q, K as U, e as z, W as I, $ as J, f as K, g as L, x as Q, j as W, i as X, y as Y, k as Z, X as _, I as $, Q as F, L as aa, Z as sa, z as ea, s as ta, U as ia, Y as ra, a as na, u as oa } from "./index-BLbc2zG5.js";
 const e = a.Howler;
 export {
   r as ArraySubject,

package/package.json

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

package/src/components/Sprite.ts

@@ -182,6 +182,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const { props, propObservables } = params;
     const tick: Signal = props.context.tick;
     const sheet = props.sheet ?? {};
+    const definition = props.sheet?.definition ?? {};
     this.app = props.context.app();
     if (sheet?.onFinish) {
       this.onFinish = sheet.onFinish;
@@ -190,8 +191,8 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       if (this.destroyed) return
       this.update(value);
     });
-    if (props.sheet?.definition) {
-      this.spritesheet = props.sheet.definition;
+    if (definition) {
+      this.spritesheet = definition.value ?? definition;
       await this.createAnimations();
     }
     if (sheet.params) {
@@ -267,7 +268,14 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       return texture
     }
 
-    const sheet = props.sheet;
+    const sheet = props.sheet
+    const definition = props.sheet?.definition ?? {};
+
+    if (definition?.type === 'reset') {
+      this.spritesheet = definition.value ?? definition;
+      await this.resetAnimations();
+    }
+
     if (sheet?.params) this.sheetParams = sheet?.params;
 
     if (sheet?.playing && this.isMounted) {
@@ -287,9 +295,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       if (isElement(props.texture)) {
         const textureInstance = props.texture.componentInstance;
         textureInstance.subjectInit
-        .subscribe((value) => {
-          console.log('a', value?.width)
-        })
+        .subscribe()
         this.texture = this.renderer?.generateTexture(props.texture.componentInstance);
       } else {
         this.texture = props.texture;
@@ -337,7 +343,6 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
   stop() {
     this.currentAnimation = null;
-    this.destroy();
   }
 
   play(name: string, params: any[] = []) {
@@ -353,7 +358,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       );
     }
 
-    const cloneParams = (params);
+    const cloneParams = structuredClone(params);
 
     this.removeChildren();
     animation.sprites = [];
@@ -393,6 +398,44 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     });
   }
 
+  /**
+   * Resets the sprite by destroying and recreating all animations
+   * This method clears the current animation state, destroys existing textures,
+   * and recreates all animations from the spritesheet
+   * 
+   * @example
+   * ```typescript
+   * // Reset all animations to their initial state
+   * sprite.resetAnimations();
+   * 
+   * // Reset and then play a specific animation
+   * await sprite.resetAnimations();
+   * sprite.play('walk');
+   * ```
+   */
+  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();
+
+    // Recreate animations from spritesheet
+    if (this.spritesheet) {
+      await this.createAnimations();
+      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+    }
+  }
+
   update({ deltaRatio }) {
     if (
       !this.isPlaying() ||

package/src/components/Text.ts

@@ -4,6 +4,7 @@ import { DisplayObject, ComponentInstance } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { Signal } from "@signe/reactive";
 import { on, isTrigger } from "../engine/trigger";
+import { Howl } from "howler";
 
 enum TextEffect {
   Typewriter = "typewriter",
@@ -20,6 +21,11 @@ export interface TextProps extends DisplayObjectProps {
     start?: () => void;
     onComplete?: () => void;
     skip?: () => void;
+    sound?: {
+      src: string;
+      volume?: number;
+      rate?: number;
+    };
   };
   context?: any; // Ensure context is available, ideally typed from a base prop or injected
 }
@@ -32,6 +38,9 @@ class CanvasText extends DisplayObject(PixiText) {
   private _wordWrapWidth: number = 0;
   private typewriterOptions: any = {};
   private skipSignal?: () => void;
+  private typewriterSound?: Howl;
+  private lastSoundTime: number = 0;
+  private soundDuration: number = 0; // Duration of the sound in milliseconds
 
   /**
    * Called when the component is mounted to the scene graph.
@@ -56,7 +65,13 @@ class CanvasText extends DisplayObject(PixiText) {
             this.skipTypewriter();
           });
         }
+        // Initialize typewriter sound if configured
+        if (this.typewriterOptions.sound) {
+          this.initializeTypewriterSound();
+        }
       }
+      // Update layout after initializing typewriter
+      this.updateLayout();
     }
     this.subscriptionTick = tick.observable.subscribe(() => {
       if (props.typewriter) {
@@ -70,6 +85,10 @@ class CanvasText extends DisplayObject(PixiText) {
     if (props.typewriter) {
       if (props.typewriter) {
         this.typewriterOptions = props.typewriter;
+        // Reinitialize sound if sound configuration changed
+        if (props.typewriter.sound) {
+          this.initializeTypewriterSound();
+        }
       }
     }
     if (props.text !== undefined) {
@@ -79,6 +98,8 @@ class CanvasText extends DisplayObject(PixiText) {
       this.text = "";
       this.currentIndex = 0;
       this.fullText = props.text;
+      // Update layout after resetting typewriter
+      this.updateLayout();
     }
     if (props.style) {
       for (const key in props.style) {
@@ -97,6 +118,59 @@ class CanvasText extends DisplayObject(PixiText) {
     if (props.fontFamily) {
       this.style.fontFamily = props.fontFamily;
     }
+    
+    // Use the centralized layout update method
+    this.updateLayout();
+  }
+
+  get onCompleteCallback() {
+    return this.typewriterOptions.onComplete;
+  }
+
+  /**
+   * Initializes the typewriter sound effect using Howler.
+   * Creates a Howl instance with the configured sound settings.
+   * Calculates the sound duration to prevent overlapping sounds.
+   */
+  private initializeTypewriterSound() {
+    if (!this.typewriterOptions.sound?.src) return;
+    
+    this.typewriterSound = new Howl({
+      src: [this.typewriterOptions.sound.src],
+      volume: this.typewriterOptions.sound.volume ?? 0.5,
+      rate: this.typewriterOptions.sound.rate ?? 1.0,
+      preload: true,
+      onload: () => {
+        // Calculate sound duration in milliseconds
+        if (this.typewriterSound) {
+          const duration = this.typewriterSound.duration();
+          const rate = this.typewriterOptions.sound?.rate ?? 1.0;
+          this.soundDuration = (duration / rate) * 1000;
+        }
+      }
+    });
+  }
+
+  /**
+   * Plays the typewriter sound with duration-based cooldown to prevent overlapping sounds.
+   * @param {number} currentTime - The current timestamp to check against sound duration.
+   */
+  private playTypewriterSound(currentTime: number) {
+    if (!this.typewriterSound || !this.typewriterOptions.sound) return;
+    
+    // Check if enough time has passed since the last sound play
+    // Use the actual sound duration to prevent overlap
+    if (this.soundDuration > 0 && currentTime - this.lastSoundTime < this.soundDuration) return;
+    
+    this.typewriterSound.play();
+    this.lastSoundTime = currentTime;
+  }
+
+  /**
+   * Updates the layout properties of the text component.
+   * This method ensures consistent width, height and word wrap behavior.
+   */
+  private updateLayout() {
     if (this._wordWrapWidth) {
       this.setWidth(this._wordWrapWidth);
     } else {
@@ -105,10 +179,6 @@ class CanvasText extends DisplayObject(PixiText) {
     this.setHeight(this.height);
   }
 
-  get onCompleteCallback() {
-    return this.typewriterOptions.onComplete;
-  }
-
   private typewriterEffect() {
     if (this.currentIndex < this.fullText.length) {
       const nextIndex = Math.min(
@@ -118,6 +188,14 @@ class CanvasText extends DisplayObject(PixiText) {
       this.text = this.fullText.slice(0, nextIndex);
       this.currentIndex = nextIndex;
 
+      // Play typewriter sound if configured
+      if (this.typewriterOptions.sound) {
+        this.playTypewriterSound(Date.now());
+      }
+
+      // Update layout after text change to maintain proper word wrap and dimensions
+      this.updateLayout();
+
       // Check if typewriter effect is complete
       if (
         this.currentIndex === this.fullText.length &&
@@ -135,11 +213,14 @@ class CanvasText extends DisplayObject(PixiText) {
     }
     this.text = this.fullText;
     this.currentIndex = this.fullText.length;
+    
+    // Update layout after setting full text to maintain proper word wrap and dimensions
+    this.updateLayout();
   }
 
   /**
    * Called when the component is about to be destroyed.
-   * Unsubscribes from the tick observable.
+   * Unsubscribes from the tick observable and cleans up sound resources.
    * @param {Element<any>} parent - The parent element.
    * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
    */
@@ -148,6 +229,12 @@ class CanvasText extends DisplayObject(PixiText) {
       if (this.subscriptionTick) {
         this.subscriptionTick.unsubscribe();
       }
+      // Clean up typewriter sound
+      if (this.typewriterSound) {
+        this.typewriterSound.stop();
+        this.typewriterSound.unload();
+        this.typewriterSound = undefined;
+      }
       if (afterDestroy) {
         afterDestroy();
       }