canvasengine 2.0.0-beta.2 → 2.0.0-beta.21

package/src/components/Sprite.ts

@@ -1,5 +1,7 @@
-import { computed, effect, isSignal, Signal, WritableSignal } from "@signe/reactive";
+import { Howl } from 'howler';
+import { computed, effect, isSignal, Signal } from "@signe/reactive";
 import {
+  Application,
   Assets,
   Container,
   Sprite as PixiSprite,
@@ -10,6 +12,7 @@ import { Subscription } from "rxjs";
 import {
   Element,
   createComponent,
+  isElement,
   registerComponent,
 } from "../engine/reactive";
 import { arrayEquals, isFunction } from "../engine/utils";
@@ -24,6 +27,7 @@ import {
 import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { AnimatedSignal, isAnimatedSignal } from "../engine/animation";
+import { Layout } from '@pixi/layout';
 
 const log = console.log;
 
@@ -73,14 +77,25 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   private subscriptionSheet: Subscription[] = [];
   private sheetParams: any = {};
   private sheetCurrentAnimation: string = StandardAnimation.Stand;
+  private app: Application | null = null;
   onFinish: () => void;
 
+  get renderer() {
+    return this.app?.renderer;
+  }
+
   private currentAnimationContainer: Container | null = null;
 
   private async createTextures(
     options: Required<TextureOptionsMerging>
   ): Promise<Texture[][]> {
     const { 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);
     const spriteWidth = options.spriteWidth;
     const spriteHeight = options.spriteHeight;
@@ -167,6 +182,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const { props, propObservables } = params;
     const tick: Signal = props.context.tick;
     const sheet = props.sheet ?? {};
+    this.app = props.context.app();
     if (sheet?.onFinish) {
       this.onFinish = sheet.onFinish;
     }
@@ -218,7 +234,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
         this.sheetCurrentAnimation = StandardAnimation.Stand;
       }
 
-      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+      if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
 
     super.onMount(params);
@@ -227,6 +243,29 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   async onUpdate(props) {
     super.onUpdate(props);
 
+    const setTexture = async (image: string) => {
+      if (!image || typeof image !== 'string' || image.trim() === '') {
+        console.warn('Invalid image path provided to setTexture:', image);
+        return null;
+      }
+      
+      const onProgress = this.fullProps.loader?.onProgress;
+      const texture = await Assets.load(image, (progress) => {
+        if (onProgress) onProgress(progress);
+        if (progress == 1) {
+          const onComplete = this.fullProps.loader?.onComplete;
+          if (onComplete) {
+            // hack to memoize the texture
+            setTimeout(() => {
+              onComplete(texture);
+            });
+          }
+        }
+      });
+
+      return texture
+    }
+
     const sheet = props.sheet;
     if (sheet?.params) this.sheetParams = sheet?.params;
 
@@ -239,23 +278,36 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
     if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
     else if (props.image && this.fullProps.rectangle === undefined) {
-      this.texture = await Assets.load(this.fullProps.image);
+      const texture = await setTexture(this.fullProps.image);
+      if (texture) {
+        this.texture = texture;
+      }
     } else if (props.texture) {
-      this.texture = props.texture;
+      if (isElement(props.texture)) {
+        const textureInstance = props.texture.componentInstance;
+        textureInstance.subjectInit
+        .subscribe((value) => {
+          console.log('a', value?.width)
+        })
+        this.texture = this.renderer?.generateTexture(props.texture.componentInstance);
+      } else {
+        this.texture = props.texture;
+      }
     }
-
     if (props.rectangle !== undefined) {
       const { x, y, width, height } = props.rectangle?.value ?? props.rectangle;
-      const texture = await Assets.load(this.fullProps.image);
-      this.texture = new Texture({
-        source: texture.source,
-        frame: new Rectangle(x, y, width, height),
-      });
+      const texture = await setTexture(this.fullProps.image);
+      if (texture) {
+        this.texture = new Texture({
+          source: texture.source,
+          frame: new Rectangle(x, y, width, height),
+        });
+      }
     }
   }
 
-  onDestroy(): void {
-    super.onDestroy();
+  async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
+    await super.onDestroy(parent);
     this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
     this.subscriptionTick.unsubscribe();
     if (this.currentAnimationContainer && this.parent instanceof Container) {
@@ -321,7 +373,12 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const sound = this.currentAnimation.data.sound;
 
     if (sound) {
-      //RpgSound.get(sound).play()
+      new Howl({
+        src: sound,
+        autoplay: true,
+        loop: false,
+        volume: 1,
+      })
     }
 
     // Updates immediately to avoid flickering
@@ -440,7 +497,9 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   }
 }
 
-export interface CanvasSprite extends PixiSprite {}
+export interface CanvasSprite extends PixiSprite {
+  layout: Layout | null;
+}
 
 registerComponent("Sprite", CanvasSprite);
 
@@ -483,6 +542,10 @@ export interface SpritePropsWithSheet
     params?: any;
     onFinish?: () => void;
   };
+  loader?: {
+    onProgress?: (progress: number) => void;
+    onComplete?: (texture: Texture) => void;
+  };
 }
 
 export type SpritePropTypes = SpritePropsWithImage | SpritePropsWithSheet;

package/src/components/Text.ts

@@ -1,15 +1,15 @@
 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";
 
 enum TextEffect {
   Typewriter = "typewriter",
 }
 
-interface TextProps extends DisplayObjectProps {
+export interface TextProps extends DisplayObjectProps {
   text?: string;
   style?: Partial<TextStyle>;
   color?: string;
@@ -21,6 +21,7 @@ interface TextProps extends DisplayObjectProps {
     onComplete?: () => void;
     skip?: () => void;
   };
+  context?: any; // Ensure context is available, ideally typed from a base prop or injected
 }
 
 class CanvasText extends DisplayObject(PixiText) {
@@ -32,9 +33,15 @@ class CanvasText extends DisplayObject(PixiText) {
   private typewriterOptions: any = {};
   private skipSignal?: () => void;
 
-  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<CanvasText>, index?: number): Promise<void> {
+    const { props } = element;
+    await super.onMount(element, index);
     const tick: Signal = props.context.tick;
 
     if (props.text && props.typewriter) {
@@ -44,7 +51,7 @@ 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();
           });
@@ -65,8 +72,8 @@ class CanvasText extends DisplayObject(PixiText) {
         this.typewriterOptions = props.typewriter;
       }
     }
-    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 = "";
@@ -130,13 +137,26 @@ class CanvasText extends DisplayObject(PixiText) {
     this.currentIndex = this.fullText.length;
   }
 
-  onDestroy(): void {
-    super.onDestroy();
-    this.subscriptionTick.unsubscribe();
+  /**
+   * 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 () => {
+      if (this.subscriptionTick) {
+        this.subscriptionTick.unsubscribe();
+      }
+      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

@@ -0,0 +1,110 @@
+import { Texture } from "pixi.js";
+import { h, mount } from "../engine/signal";
+import { useDefineProps } from "../hooks/useProps";
+import { Sprite } from "./Sprite";
+import { effect, Signal, signal } from "@signe/reactive";
+
+interface VideoProps {
+    src: string;
+    paused?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    loader?: {
+        onComplete?: (texture: Texture) => void;
+        onProgress?: (progress: number) => void;
+    };
+}
+
+export function Video(props: VideoProps) {
+    const eventsMap = {
+        audioprocess: null,
+        canplay: null,
+        canplaythrough: null,
+        complete: null,
+        durationchange: null,
+        emptied: null,
+        ended: null,
+        loadeddata: null,
+        loadedmetadata: null,
+        pause: null,
+        play: null,
+        playing: null,
+        progress: null,
+        ratechange: null,
+        seeked: null,
+        seeking: null,
+        stalled: null,
+        suspend: null,
+        timeupdate: null,
+        volumechange: null,
+        waiting: null
+    }
+
+    const video: Signal<HTMLVideoElement | null> = signal(null)
+    const defineProps = useDefineProps(props)
+    const { play, loop, muted } = defineProps({
+        play: {
+            type: Boolean,
+            default: true
+        },
+        loop: {
+            type: Boolean,
+            default: false
+        },
+        muted: {
+            type: Boolean,
+            default: false
+        }
+    })
+
+    effect(() => {
+        const _video = video()
+        const state = play()
+        if (_video && state !== undefined) {
+            if (state) {
+                _video.play()
+            } else {
+                _video.pause()
+            }
+        }
+        if (_video && loop()) {
+            _video.loop = loop()
+        }
+        if (_video && muted()) {
+            _video.muted = muted()
+        }
+    })
+
+    mount(() => {
+        return () => {
+            for (let event in eventsMap) {
+                if (eventsMap[event]) {
+                    video().removeEventListener(event, eventsMap[event])
+                }
+            }
+        }
+    })
+
+    return h(Sprite, {
+        ...props,
+        image: props.src,
+        loader: {
+            onComplete: (texture) => {
+                const source = texture.source.resource
+                video.set(source)
+                if (props?.loader?.onComplete) {
+                    props.loader.onComplete(texture)
+                }
+                for (let event in eventsMap) {
+                    if (props[event]) {
+                        const cb = (ev) => {
+                            props[event](ev)
+                        }
+                        eventsMap[event] = cb
+                        source.addEventListener(event, cb)
+                    }
+                }
+            }
+        }
+    })
+}

package/src/components/Viewport.ts

@@ -1,8 +1,8 @@
 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';
 
 const EVENTS = [
     'bounce-x-end',
@@ -28,6 +28,21 @@ const EVENTS = [
     'zoomed-end'
 ]
 
+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(PixiViewport) {
     private tickSubscription: Subscription
     overrideProps = ['wheel']
@@ -48,16 +63,20 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
     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.on(event, props[event])
         }
     }
 
-    onMount(element) {
-        super.onMount(element)
-        const { tick, renderer, canvasSize } = element.props.context
+    /**
+     * 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<CanvasViewport>, index?: number): Promise<void> {
+        await super.onMount(element, index);
+        const { props } = element;
+        const { tick, app, canvasSize } = props.context;
         let isDragging = false
         
         effect(() => {
@@ -65,18 +84,26 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
             this.screenHeight = canvasSize().height
         })
 
-        renderer.events.domElement.addEventListener(
-            'wheel',
-            this.input.wheelFunction
-        );
-        this.options.events = renderer.events
+        effect(() => {
+            const _app = app()
+            if (!_app) return
+
+            const renderer = _app.renderer
+            
+            renderer.events.domElement.addEventListener(
+                'wheel',
+                this.input.wheelFunction
+            );
+
+            this.options.events = renderer.events
+        })
  
         this.tickSubscription = tick.observable.subscribe(({ value }) => {
             this.update(value.timestamp)
         })
 
         element.props.context.viewport = this
-        this.updateViewportSettings(element.props)
+        this.updateViewportSettings(props)
     }
 
     onUpdate(props) {
@@ -97,15 +124,11 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         if (props.worldHeight !== undefined) {
             this.worldHeight = props.worldHeight
         }
-        // if (props.drag) {
-        //     if (props.drag === true) {
-                
-        //     } else {
-        //         this.drag(props.drag)
-        //     }
-        // }
+        if (props.drag) {
+            this.drag(props.drag)
+        }
         if (props.clamp) {
-            this.clamp(props.clamp)
+            this.clamp(props.clamp.value ?? props.clamp)
         }
         if (props.wheel) {
             if (props.wheel === true) {
@@ -130,30 +153,23 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         }
     }
 
-    onDestroy(): void {
-        super.onDestroy()
-        this.tickSubscription.unsubscribe()
+    /**
+     * 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);
     }
 }
 
-export interface CanvasViewport extends PixiViewport { }
-
 registerComponent('Viewport', CanvasViewport)
 
-export interface ViewportProps {
-    screenWidth?: number;
-    screenHeight?: number;
-    worldWidth?: number;
-    worldHeight?: number;
-    clamp?: boolean | {
-        left?: number;
-        right?: number;
-        top?: number;
-        bottom?: number;
-    };
-    [key: string]: any;
-}
-
 export function Viewport(props: ViewportProps) {
     return createComponent('Viewport', props);
 }

package/src/components/index.ts

@@ -1,13 +1,15 @@
 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'
+export { Video } from './Video'
 export { Text } from './Text'
-export { TiledMap } from './Tilemap'
 export { TilingSprite } from './TilingSprite'
 export { Viewport } from './Viewport'
-export { ImageMap } from './DrawMap'
 export { NineSliceSprite } from './NineSliceSprite'
-export { ComponentInstance } from './DisplayObject'
+export { type ComponentInstance } from './DisplayObject'
+export { DOMContainer } from './DOMContainer'
+export { DOMElement } from './DOMElement'

package/src/components/types/DisplayObject.ts

@@ -1,18 +1,43 @@
 import * as PIXI from "pixi.js";
 import { SignalOrPrimitive } from ".";
+import { DragProps } from "../../directives/Drag";
+import { ViewportFollowProps } from "../../directives/ViewportFollow";
 
 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 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;
@@ -36,6 +61,11 @@ export interface DisplayObjectProps {
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
 
+    // Directives
+    drag?: DragProps;
+    viewportFollow?: ViewportFollowProps;
+
+    // Events
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;