canvasengine 2.0.0-beta.30 → 2.0.0-beta.32

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-C-iY-lCt.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-C-iY-lCt.js";
+import { h as a } from "./index-19a35G23.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-19a35G23.js";
 const e = a.Howler;
 export {
   r as ArraySubject,

package/package.json

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

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();
       }

package/src/engine/reactive.ts

@@ -254,44 +254,116 @@ export function createComponent(tag: string, props?: Props): Element {
     }
   };
 
-  async function createElement(parent: Element, child: Element) {
+     /**
+    * Creates and mounts a child element to a parent element.
+    * Handles different types of children: Elements, Promises resolving to Elements, and Observables.
+    * 
+    * @description This function is designed to handle reactive child components that can be:
+    * - Direct Element instances
+    * - Promises that resolve to Elements (for async components)
+    * - Observables that emit Elements, arrays of Elements, or FlowObservable results
+    * - Nested observables within arrays or FlowObservable results (handled recursively)
+    * 
+    * For Observables, it subscribes to the stream and automatically mounts/unmounts elements
+    * as they are emitted. The function handles nested observables recursively, ensuring that
+    * observables within arrays or FlowObservable results are also properly subscribed to.
+    * All subscriptions are stored in the parent's effectSubscriptions for automatic cleanup.
+    * 
+    * @param {Element} parent - The parent element to mount the child to
+    * @param {Element | Observable<any> | Promise<Element>} child - The child to create and mount
+    * 
+    * @example
+    * ```typescript
+    * // Direct element
+    * await createElement(parent, childElement);
+    * 
+    * // Observable of elements (from cond, loop, etc.)
+    * await createElement(parent, cond(signal(visible), () => h(Container)));
+    * 
+    * // Observable that emits arrays containing other observables
+    * await createElement(parent, observableOfObservables);
+    * 
+    * // Promise resolving to element
+    * await createElement(parent, import('./MyComponent').then(mod => h(mod.default)));
+    * ```
+    */
+  async function createElement(parent: Element, child: Element | Observable<any> | Promise<Element>) {
     if (isPromise(child)) {
       child = await child;
     }
     if (child instanceof Observable) {
-      child.subscribe(
-        ({
-          elements: comp,
-          prev,
-        }: {
-          elements: Element[];
-          prev?: Element;
-        }) => {
-          // if prev, insert element after this
-          const components = comp.filter((c) => c !== null);
-          if (prev) {
-            components.forEach((c) => {
-              const index = parent.props.children.indexOf(prev.props.key);
-              onMount(parent, c, index + 1);
-              propagateContext(c);
-            });
-            return;
-          }
-          components.forEach((component) => {
-            if (!Array.isArray(component)) {
-              onMount(parent, component);
-              propagateContext(component);
-            } else {
-              component.forEach((comp) => {
-                onMount(parent, comp);
-                propagateContext(comp);
-              });
-            }
-          });
-          elementsListen.next(undefined)
+      // Subscribe to the observable and handle the emitted values
+      const subscription = child.subscribe(
+        (value: any) => {
+          // Handle different types of observable emissions
+          if (value && typeof value === 'object' && 'elements' in value) {
+            // Handle FlowObservable result (from loop, cond, etc.)
+            const {
+              elements: comp,
+              prev,
+            }: {
+              elements: Element[];
+              prev?: Element;
+            } = value;
+            
+            const components = comp.filter((c) => c !== null);
+                         if (prev) {
+               components.forEach(async (c) => {
+                 const index = parent.props.children.indexOf(prev.props.key);
+                 if (c instanceof Observable) {
+                   // Handle observable component recursively
+                   await createElement(parent, c);
+                 } else if (isElement(c)) {
+                   onMount(parent, c, index + 1);
+                   propagateContext(c);
+                 }
+               });
+               return;
+             }
+                         components.forEach(async (component) => {
+               if (!Array.isArray(component)) {
+                 if (component instanceof Observable) {
+                   // Handle observable component recursively
+                   await createElement(parent, component);
+                 } else if (isElement(component)) {
+                   onMount(parent, component);
+                   propagateContext(component);
+                 }
+               } else {
+                 component.forEach(async (comp) => {
+                   if (comp instanceof Observable) {
+                     // Handle observable component recursively
+                     await createElement(parent, comp);
+                   } else if (isElement(comp)) {
+                     onMount(parent, comp);
+                     propagateContext(comp);
+                   }
+                 });
+               }
+             });
+          } else if (isElement(value)) {
+            // Handle direct Element emission
+            onMount(parent, value);
+            propagateContext(value);
+                     } else if (Array.isArray(value)) {
+             // Handle array of elements (which can also be observables)
+             value.forEach(async (element) => {
+               if (element instanceof Observable) {
+                 // Handle observable element recursively
+                 await createElement(parent, element);
+               } else if (isElement(element)) {
+                 onMount(parent, element);
+                 propagateContext(element);
+               }
+             });
+           }
+          elementsListen.next(undefined);
         }
       );
-    } else {
+      
+      // Store subscription for cleanup
+      parent.effectSubscriptions.push(subscription);
+    } else if (isElement(child)) {
       onMount(parent, child);
       await propagateContext(child);
     }

package/src/engine/signal.ts

@@ -1,4 +1,5 @@
 import {
+  Observable,
     Subscription
 } from "rxjs";
 import type { Element } from "./reactive";
@@ -124,6 +125,9 @@ export function h<C extends ComponentFunction<any>>(
   else if ('tag' in componentFunction) {
     component = componentFunction
   }
+  else if (componentFunction instanceof Observable) {
+    component = componentFunction as any
+  }
   else {
     component = componentFunction({ ...props, children }) as Element;
   }