canvasengine 2.0.0-beta.5 → 2.0.0-beta.50

package/src/components/Text.ts

@@ -1,15 +1,16 @@
 import { Text as PixiText, TextStyle } from "pixi.js";
-import { createComponent, registerComponent } from "../engine/reactive";
-import { DisplayObject } from "./DisplayObject";
+import { createComponent, registerComponent, Element, Props } from "../engine/reactive";
+import { DisplayObject, ComponentInstance } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { Signal } from "@signe/reactive";
-import { on } from "../engine/trigger";
+import { on, isTrigger } from "../engine/trigger";
+import { Howl } from "howler";
 
 enum TextEffect {
   Typewriter = "typewriter",
 }
 
-interface TextProps extends DisplayObjectProps {
+export interface TextProps extends DisplayObjectProps {
   text?: string;
   style?: Partial<TextStyle>;
   color?: string;
@@ -20,7 +21,13 @@ 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
 }
 
 class CanvasText extends DisplayObject(PixiText) {
@@ -31,10 +38,19 @@ 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
 
-  onMount(args) {
-    super.onMount(args);
-    const { props } = args;
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Initializes the typewriter effect if configured.
+   * @param {Element<CanvasText>} element - The element being mounted with parent and props.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element: Element<any>, index?: number): Promise<void> {
+    const { props } = element;
+    await super.onMount(element, index);
     const tick: Signal = props.context.tick;
 
     if (props.text && props.typewriter) {
@@ -44,12 +60,18 @@ class CanvasText extends DisplayObject(PixiText) {
       // Set typewriter options
       if (props.typewriter) {
         this.typewriterOptions = props.typewriter;
-        if (this.typewriterOptions.skip) {
+        if (this.typewriterOptions.skip && isTrigger(this.typewriterOptions.skip)) {
           on(this.typewriterOptions.skip, () => {
             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) {
@@ -63,15 +85,21 @@ 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) {
-      this.text = props.text;
+    if (props.text !== undefined) {
+      this.text = ''+props.text;
     }
     if (props.text !== undefined && props.text !== this.fullText && this.fullProps.typewriter) {
       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) {
@@ -90,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 {
@@ -98,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(
@@ -111,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 &&
@@ -128,15 +213,37 @@ 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();
   }
 
-  onDestroy(): void {
-    super.onDestroy();
-    this.subscriptionTick.unsubscribe();
+  /**
+   * Called when the component is about to be destroyed.
+   * 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.
+   */
+  async onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void> {
+    const _afterDestroy = async () => {
+      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();
+      }
+    }
+    await super.onDestroy(parent, _afterDestroy);
   }
 }
 
-interface CanvasText extends PixiText {}
+// interface CanvasText extends PixiText {} // Removed as it's redundant and causes type conflicts
 
 registerComponent("Text", CanvasText);
 

package/src/components/Video.ts

@@ -5,7 +5,7 @@ import { Sprite } from "./Sprite";
 import { effect, Signal, signal } from "@signe/reactive";
 
 interface VideoProps {
-    source: string;
+    src: string;
     paused?: boolean;
     loop?: boolean;
     muted?: boolean;
@@ -87,7 +87,7 @@ export function Video(props: VideoProps) {
 
     return h(Sprite, {
         ...props,
-        image: props.source,
+        image: props.src,
         loader: {
             onComplete: (texture) => {
                 const source = texture.source.resource

package/src/components/Viewport.ts

@@ -1,8 +1,9 @@
 import { Viewport as PixiViewport } from 'pixi-viewport';
 import { Subscription } from 'rxjs';
-import { createComponent, registerComponent } from '../engine/reactive';
-import { DisplayObject } from './DisplayObject';
-import { effect } from '@signe/reactive';
+import { createComponent, registerComponent, Element, Props } from '../engine/reactive';
+import { DisplayObject, ComponentInstance } from './DisplayObject';
+import { effect, Signal } from '@signe/reactive';
+import { Graphics, Container, ContainerChild, IRenderLayer } from 'pixi.js';
 
 const EVENTS = [
     'bounce-x-end',
@@ -28,55 +29,102 @@ const EVENTS = [
     'zoomed-end'
 ]
 
-export class CanvasViewport extends DisplayObject(PixiViewport) {
+export interface ViewportProps extends Props {
+    screenWidth?: number;
+    screenHeight?: number;
+    worldWidth?: number;
+    worldHeight?: number;
+    clamp?: boolean | {
+        left?: number;
+        right?: number;
+        top?: number;
+        bottom?: number;
+    };
+    context?: any;
+    [key: string]: any;
+}
+
+export class CanvasViewport extends DisplayObject(Container) {
     private tickSubscription: Subscription
     overrideProps = ['wheel']
+    #mask: Graphics
+    public viewport: PixiViewport
 
     constructor() {
+        super()
         const defaultOptions = {
             noTicker: true,
             events: {
                 domElement: {
-                    addEventListener: () => {}
+                    addEventListener: () => { }
                 }
             },
         }
         // @ts-ignore
-        super(defaultOptions) 
+        this.viewport = new PixiViewport(defaultOptions)
+        super.addChild(this.viewport)
+
+        this.#mask = new Graphics()
+        super.addChild(this.#mask)
+        this.mask = this.#mask
+    }
+
+    addChild<U extends any[]>(...children: U): U[0] {
+        return this.viewport.addChild(...children)
+    }
+
+    addChildAt<T extends ContainerChild | IRenderLayer>(child: T, index: number): T {
+        return this.viewport.addChildAt(child, index) as T
     }
 
     onInit(props) {
         super.onInit(props)
         for (let event of EVENTS) {
-            const camelCaseEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            if (props[camelCaseEvent]) {
-                this.on(event, props[camelCaseEvent])
-            }
+            if (props[event]) this.viewport.on(event, props[event])
         }
     }
 
-    onMount(element) {
-        super.onMount(element)
-        const { tick, renderer, canvasSize } = element.props.context
-        let isDragging = false
-        
+    /**
+     * Called when the component is mounted to the scene graph.
+     * Initializes viewport settings and subscriptions.
+     * @param {Element<CanvasViewport>} element - The element being mounted. Its `props` property (of type ViewportProps) contains component properties and context.
+     * @param {number} [index] - The index of the component among its siblings.
+     */
+    async onMount(element: Element<any>, index?: number): Promise<void> {
+        element.props.context.viewport = this.viewport
+        await super.onMount(element, index);
+        const { props } = element;
+        const { tick, app, canvasSize } = props.context;
+
+        effect(() => {
+            if (props.screenWidth === undefined) {
+                this.viewport.screenWidth = canvasSize().width
+            }
+            if (props.screenHeight === undefined) {
+                this.viewport.screenHeight = canvasSize().height
+            }
+            this.updateMask()
+        })
+
         effect(() => {
-            this.screenWidth = canvasSize().width
-            this.screenHeight = canvasSize().height
+            const _app = app()
+            if (!_app) return
+
+            const renderer = _app.renderer
+
+            renderer.events.domElement.addEventListener(
+                'wheel',
+                this.viewport.input.wheelFunction
+            );
+
+            this.viewport.options.events = renderer.events
         })
 
-        renderer.events.domElement.addEventListener(
-            'wheel',
-            this.input.wheelFunction
-        );
-        this.options.events = renderer.events
- 
         this.tickSubscription = tick.observable.subscribe(({ value }) => {
-            this.update(value.timestamp)
+            this.viewport.update(value.deltaTime)
         })
 
-        element.props.context.viewport = this
-        this.updateViewportSettings(element.props)
+        this.updateViewportSettings(props)
     }
 
     onUpdate(props) {
@@ -86,74 +134,81 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
 
     private updateViewportSettings(props) {
         if (props.screenWidth !== undefined) {
-            this.screenWidth = props.screenWidth
+            this.viewport.screenWidth = props.screenWidth
         }
         if (props.screenHeight !== undefined) {
-            this.screenHeight = props.screenHeight
+            this.viewport.screenHeight = props.screenHeight
         }
+        this.updateMask()
         if (props.worldWidth !== undefined) {
-            this.worldWidth = props.worldWidth
+            this.viewport.worldWidth = props.worldWidth
         }
         if (props.worldHeight !== undefined) {
-            this.worldHeight = props.worldHeight
+            this.viewport.worldHeight = props.worldHeight
+        }
+        if (props.drag) {
+            this.viewport.drag(props.drag)
         }
-        // if (props.drag) {
-        //     if (props.drag === true) {
-                
-        //     } else {
-        //         this.drag(props.drag)
-        //     }
-        // }
         if (props.clamp) {
-            this.clamp(props.clamp)
+            this.viewport.clamp(props.clamp.value ?? props.clamp)
         }
         if (props.wheel) {
             if (props.wheel === true) {
-                this.wheel()
+                this.viewport.wheel()
             } else {
-                this.wheel(props.wheel)
+                this.viewport.wheel(props.wheel)
             }
         }
         if (props.decelerate) {
             if (props.decelerate === true) {
-                this.decelerate()
+                this.viewport.decelerate()
             } else {
-                this.decelerate(props.decelerate)
+                this.viewport.decelerate(props.decelerate)
             }
         }
         if (props.pinch) {
             if (props.pinch === true) {
-                this.pinch()
+                this.viewport.pinch()
             } else {
-                this.pinch(props.pinch)
+                this.viewport.pinch(props.pinch)
             }
         }
     }
 
-    onDestroy(): void {
-        super.onDestroy()
-        this.tickSubscription.unsubscribe()
+    private updateMask() {
+        if (!this.#mask) return
+        this.#mask.clear()
+        this.#mask.beginFill(0xffffff)
+        this.#mask.drawRect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
+        this.#mask.endFill()
     }
-}
 
-export interface CanvasViewport extends PixiViewport { }
+    /**
+     * Called when the component is about to be destroyed.
+     * Unsubscribes from the tick observable.
+     * @param {Element<any>} parent - The parent element.
+     * @param {() => void} [afterDestroy] - An optional callback function to be executed after the component's own destruction logic.
+     */
+    async onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void> {
+        const _afterDestroy = async () => {
+            this.tickSubscription.unsubscribe()
+            afterDestroy()
+        }
+        await super.onDestroy(parent, _afterDestroy);
+    }
 
-registerComponent('Viewport', CanvasViewport)
+    // Proxy methods for viewport plugins
+    follow(...args: any[]) {
+        return (this.viewport.follow as any)(...args)
+    }
 
-export interface ViewportProps {
-    screenWidth?: number;
-    screenHeight?: number;
-    worldWidth?: number;
-    worldHeight?: number;
-    clamp?: boolean | {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-    [key: string]: any;
+    get plugins() {
+        return this.viewport.plugins
+    }
 }
 
+registerComponent('Viewport', CanvasViewport)
+
 export function Viewport(props: ViewportProps) {
     return createComponent('Viewport', props);
-}
+}

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export { Canvas } from './Canvas'
 export { Container } from './Container'
-export { Graphics, Rect, Circle, Ellipse, Triangle, Svg as svg } from './Graphic'
+export { Graphics, Rect, Circle, Ellipse, Triangle, Svg } from './Graphic'
+export { Mesh } from './Mesh'
 export { Scene } from './Scene'
 export { ParticlesEmitter } from './ParticleEmitter'
 export { Sprite } from './Sprite'
@@ -9,4 +10,10 @@ export { Text } from './Text'
 export { TilingSprite } from './TilingSprite'
 export { Viewport } from './Viewport'
 export { NineSliceSprite } from './NineSliceSprite'
-export { type ComponentInstance } from './DisplayObject'
+export { type ComponentInstance } from './DisplayObject'
+export { DOMContainer } from './DOMContainer'
+export { DOMElement } from './DOMElement'
+export { DOMSprite } from './DOMSprite'
+export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'
+export { Joystick, type JoystickSettings } from './Joystick'
+export { FocusContainer, Navigation, type FocusContainerProps } from './FocusContainer'

package/src/components/types/DisplayObject.ts

@@ -1,18 +1,47 @@
 import * as PIXI from "pixi.js";
 import { SignalOrPrimitive } from ".";
+import { DragProps } from "../../directives/Drag";
+import { ViewportFollowProps } from "../../directives/ViewportFollow";
+import { ShakeProps } from "../../directives/Shake";
+import { FlashProps } from "../../directives/Flash";
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 export type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 export type Size = number | `${number}%`
 export type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>
+export type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export type ObjectPosition = string;
+export type TransformOrigin = string;
+export type PositionType = 'relative' | 'absolute' | 'static';
+
+export type ObservablePointSignal = [number, number] | SignalOrPrimitive<[number, number]> | { x: number, y: number } | SignalOrPrimitive<{ x: number, y: number }>;
 
 export interface DisplayObjectProps {
+    attach?: any;
     ref?: string;
     x?: SignalOrPrimitive<number>;
     y?: SignalOrPrimitive<number>;
     width?: SignalOrPrimitive<Size>;
     height?: SignalOrPrimitive<Size>;
+    minWidth?: SignalOrPrimitive<Size>;
+    minHeight?: SignalOrPrimitive<Size>;
+    maxWidth?: SignalOrPrimitive<Size>;
+    maxHeight?: SignalOrPrimitive<Size>;
+    aspectRatio?: SignalOrPrimitive<number>;
+    flexGrow?: SignalOrPrimitive<number>;
+    flexShrink?: SignalOrPrimitive<number>;
+    flexBasis?: SignalOrPrimitive<Size>;
+    rowGap?: SignalOrPrimitive<number>;
+    columnGap?: SignalOrPrimitive<number>;
+    positionType?: PositionType;
+    top?: SignalOrPrimitive<Size>;
+    right?: SignalOrPrimitive<Size>;
+    bottom?: SignalOrPrimitive<Size>;
+    left?: SignalOrPrimitive<Size>;
+    objectFit?: ObjectFit;
+    objectPosition?: ObjectPosition;
+    transformOrigin?: TransformOrigin;
     children?: any[];
     flexDirection?: FlexDirection;
     justifyContent?: JustifyContent;
@@ -21,9 +50,9 @@ export interface DisplayObjectProps {
     padding?: EdgeSize;
     border?: EdgeSize;
     absolute?: SignalOrPrimitive<boolean>;
-    scale?: SignalOrPrimitive<{ x: number, y: number } | number>;
-    anchor?: SignalOrPrimitive<{ x: number, y: number }>;
-    skew?: SignalOrPrimitive<{ x: number, y: number }>;
+    scale?: ObservablePointSignal | number;
+    anchor?: ObservablePointSignal;
+    skew?: ObservablePointSignal;
     tint?: SignalOrPrimitive<number>;
     rotation?: SignalOrPrimitive<number>;
     angle?: SignalOrPrimitive<number>;
@@ -31,11 +60,18 @@ export interface DisplayObjectProps {
     roundPixels?: SignalOrPrimitive<boolean>;
     cursor?: SignalOrPrimitive<string>;
     visible?: SignalOrPrimitive<boolean>;
-    pivot?: SignalOrPrimitive<{ x: number, y: number }>;
+    pivot?: ObservablePointSignal;
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
 
+    // Directives
+    drag?: DragProps;
+    viewportFollow?: ViewportFollowProps;
+    shake?: ShakeProps;
+    flash?: FlashProps;
+
+    // Events
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;
@@ -66,4 +102,5 @@ export interface DisplayObjectProps {
     touchmove?: PIXI.FederatedEventHandler;
     touchstart?: PIXI.FederatedEventHandler;
     wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
+    tabindex?: SignalOrPrimitive<number>;
 }