canvasengine 2.0.0-beta.4 → 2.0.0-beta.6

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
 import { Node } from 'yoga-layout';
 import * as PIXI from 'pixi.js';
-import { ObservablePoint, Graphics as Graphics$1, TextStyle, Texture, Matrix } from 'pixi.js';
+import { ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
 export { Howler } from 'howler';
 import * as popmotion from 'popmotion';
 
@@ -54,6 +54,7 @@ type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'sp
 type Size = number | `${number}%`;
 type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>;
 interface DisplayObjectProps {
+    attach?: any;
     ref?: string;
     x?: SignalOrPrimitive<number>;
     y?: SignalOrPrimitive<number>;
@@ -251,7 +252,14 @@ declare function createComponent(tag: string, props?: Props): Element;
  * @returns {Observable} An observable that emits the list of created child elements.
  */
 declare function loop<T = any>(itemsSubject: WritableArraySignal<T>, createElementFn: (item: any, index: number) => Element | Promise<Element>): FlowObservable;
-declare function cond(condition: Signal, createElementFn: () => Element | Promise<Element>): FlowObservable;
+/**
+ * Conditionally creates and destroys elements based on a condition signal.
+ *
+ * @param {Signal<boolean> | boolean} condition - A signal or boolean that determines whether to create an element.
+ * @param {Function} createElementFn - A function that returns an element or a promise that resolves to an element.
+ * @returns {Observable} An observable that emits the created or destroyed element.
+ */
+declare function cond(condition: Signal<boolean> | boolean, createElementFn: () => Element | Promise<Element>): FlowObservable;
 
 declare abstract class Directive {
     abstract onDestroy(): any;
@@ -749,10 +757,26 @@ interface SpritePropsWithSheet extends Omit<SpriteProps, "image" | "rectangle">
         params?: any;
         onFinish?: () => void;
     };
+    loader?: {
+        onProgress?: (progress: number) => void;
+        onComplete?: (texture: Texture) => void;
+    };
 }
 type SpritePropTypes = SpritePropsWithImage | SpritePropsWithSheet;
 declare const Sprite: ComponentFunction<SpritePropTypes>;
 
+interface VideoProps {
+    src: string;
+    paused?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    loader?: {
+        onComplete?: (texture: Texture) => void;
+        onProgress?: (progress: number) => void;
+    };
+}
+declare function Video(props: VideoProps): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
+
 interface TextProps extends DisplayObjectProps {
     text?: string;
     style?: Partial<TextStyle>;
@@ -1082,4 +1106,4 @@ declare namespace utils {
   export { utils_arrayEquals as arrayEquals, utils_calculateDistance as calculateDistance, utils_error as error, utils_fps2ms as fps2ms, utils_get as get, utils_isBrowser as isBrowser, utils_isFunction as isFunction, utils_isObject as isObject, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
 }
 
-export { type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Viewport, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
+export { type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };

package/dist/index.js

@@ -1115,8 +1115,7 @@ import {
   defer,
   from,
   map,
-  of,
-  switchMap
+  of
 } from "rxjs";
 var components = {};
 var isElement = (value) => {
@@ -1209,8 +1208,20 @@ function createComponent(tag, props) {
     recursiveProps(props);
   }
   instance.onInit?.(element.props);
-  instance.onUpdate?.(element.props);
-  const onMount = (parent, element2, index) => {
+  const elementsListen = new Subject();
+  if (props?.isRoot) {
+    element.allElements = elementsListen;
+    element.props.context.rootElement = element;
+    element.componentInstance.onMount?.(element);
+    propagateContext(element);
+  }
+  if (props) {
+    for (let key in props) {
+      const directive = applyDirective(element, key);
+      if (directive) element.directives[key] = directive;
+    }
+  }
+  function onMount(parent, element2, index) {
     element2.props.context = parent.props.context;
     element2.parent = parent;
     element2.componentInstance.onMount?.(element2, index);
@@ -1220,78 +1231,76 @@ function createComponent(tag, props) {
     element2.effectMounts.forEach((fn) => {
       element2.effectUnmounts.push(fn(element2));
     });
-  };
-  const elementsListen = new Subject();
-  if (props?.isRoot) {
-    const propagateContext = async (element2) => {
-      if (element2.props.attach) {
-        const isReactiveAttach = isSignal2(element2.propObservables?.attach);
-        if (!isReactiveAttach) {
-          element2.props.children.push(element2.props.attach);
-        } else {
+  }
+  ;
+  async function propagateContext(element2) {
+    if (element2.props.attach) {
+      const isReactiveAttach = isSignal2(element2.propObservables?.attach);
+      if (!isReactiveAttach) {
+        element2.props.children.push(element2.props.attach);
+      } else {
+        await new Promise((resolve) => {
           let lastElement = null;
-          element2.propObservables.attach.observable.subscribe(({ value, type }) => {
-            if (type != "init") {
+          element2.propSubscriptions.push(element2.propObservables.attach.observable.subscribe(async (args) => {
+            const value = args?.value ?? args;
+            if (!value) {
+              throw new Error(`attach in ${element2.tag} is undefined or null, add a component`);
+            }
+            if (lastElement) {
               destroyElement(lastElement);
             }
             lastElement = value;
-            onMount(element2, value);
-            propagateContext(value);
-          });
-        }
-      }
-      if (!element2.props.children) {
-        return;
+            await createElement(element2, value);
+            resolve(void 0);
+          }));
+        });
       }
-      for (let child of element2.props.children) {
-        if (!child) continue;
-        if (isPromise(child)) {
-          child = await child;
-        }
-        if (child instanceof Observable) {
-          child.subscribe(
-            ({
-              elements: comp,
-              prev
-            }) => {
-              const components2 = comp.filter((c) => c !== null);
-              if (prev) {
-                components2.forEach((c) => {
-                  const index = element2.props.children.indexOf(prev.props.key);
-                  onMount(element2, c, index + 1);
-                  propagateContext(c);
-                });
-                return;
-              }
-              components2.forEach((component) => {
-                if (!Array.isArray(component)) {
-                  onMount(element2, component);
-                  propagateContext(component);
-                } else {
-                  component.forEach((comp2) => {
-                    onMount(element2, comp2);
-                    propagateContext(comp2);
-                  });
-                }
+    }
+    if (!element2.props.children) {
+      return;
+    }
+    for (let child of element2.props.children) {
+      if (!child) continue;
+      await createElement(element2, child);
+    }
+  }
+  ;
+  async function createElement(parent, child) {
+    if (isPromise(child)) {
+      child = await child;
+    }
+    if (child instanceof Observable) {
+      child.subscribe(
+        ({
+          elements: comp,
+          prev
+        }) => {
+          const components2 = comp.filter((c) => c !== null);
+          if (prev) {
+            components2.forEach((c) => {
+              const index = parent.props.children.indexOf(prev.props.key);
+              onMount(parent, c, index + 1);
+              propagateContext(c);
+            });
+            return;
+          }
+          components2.forEach((component) => {
+            if (!Array.isArray(component)) {
+              onMount(parent, component);
+              propagateContext(component);
+            } else {
+              component.forEach((comp2) => {
+                onMount(parent, comp2);
+                propagateContext(comp2);
               });
-              elementsListen.next(void 0);
             }
-          );
-        } else {
-          onMount(element2, child);
-          await propagateContext(child);
+          });
+          elementsListen.next(void 0);
         }
-      }
-    };
-    element.allElements = elementsListen;
-    element.props.context.rootElement = element;
-    element.componentInstance.onMount?.(element);
-    propagateContext(element);
-  }
-  if (props) {
-    for (let key in props) {
-      const directive = applyDirective(element, key);
-      if (directive) element.directives[key] = directive;
+      );
+    } else {
+      onMount(parent, child);
+      await propagateContext(child);
     }
   }
   return element;
@@ -1363,34 +1372,59 @@ function loop(itemsSubject, createElementFn) {
 }
 function cond(condition, createElementFn) {
   let element = null;
-  return condition.observable.pipe(
-    switchMap((bool) => {
-      if (bool) {
-        let _el = createElementFn();
-        if (isPromise(_el)) {
-          return from(_el).pipe(
-            map((el) => {
-              element = _el;
-              return {
+  if (isSignal2(condition)) {
+    const signalCondition = condition;
+    return new Observable((subscriber) => {
+      return signalCondition.observable.subscribe((bool) => {
+        if (bool) {
+          let _el = createElementFn();
+          if (isPromise(_el)) {
+            from(_el).subscribe((el) => {
+              element = el;
+              subscriber.next({
                 type: "init",
                 elements: [el]
-              };
-            })
-          );
+              });
+            });
+          } else {
+            element = _el;
+            subscriber.next({
+              type: "init",
+              elements: [element]
+            });
+          }
+        } else if (element) {
+          destroyElement(element);
+          subscriber.next({
+            elements: []
+          });
+        } else {
+          subscriber.next({
+            elements: []
+          });
         }
-        element = _el;
-        return of({
-          type: "init",
-          elements: [element]
-        });
-      } else if (element) {
-        destroyElement(element);
+      });
+    });
+  } else {
+    if (condition) {
+      let _el = createElementFn();
+      if (isPromise(_el)) {
+        return from(_el).pipe(
+          map((el) => ({
+            type: "init",
+            elements: [el]
+          }))
+        );
       }
       return of({
-        elements: []
+        type: "init",
+        elements: [_el]
       });
-    })
-  );
+    }
+    return of({
+      elements: []
+    });
+  }
 }
 
 // src/hooks/useProps.ts
@@ -2168,8 +2202,8 @@ import {
 // src/engine/animation.ts
 import { effect as effect6, signal as signal4 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal6) {
-  return signal6.animatedState !== void 0;
+function isAnimatedSignal(signal7) {
+  return signal7.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2374,6 +2408,21 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
   }
   async onUpdate(props) {
     super.onUpdate(props);
+    const setTexture = async (image) => {
+      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) {
+            setTimeout(() => {
+              onComplete(texture);
+            });
+          }
+        }
+      });
+      return texture;
+    };
     const sheet = props.sheet;
     if (sheet?.params) this.sheetParams = sheet?.params;
     if (sheet?.playing && this.isMounted) {
@@ -2383,13 +2432,13 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     if (props.hitbox) this.hitbox = props.hitbox;
     if (props.scaleMode) this.baseTexture.scaleMode = props.scaleMode;
     else if (props.image && this.fullProps.rectangle === void 0) {
-      this.texture = await Assets.load(this.fullProps.image);
+      this.texture = await setTexture(this.fullProps.image);
     } else if (props.texture) {
       this.texture = props.texture;
     }
     if (props.rectangle !== void 0) {
       const { x, y, width, height } = props.rectangle?.value ?? props.rectangle;
-      const texture = await Assets.load(this.fullProps.image);
+      const texture = await setTexture(this.fullProps.image);
       this.texture = new Texture2({
         source: texture.source,
         frame: new Rectangle2(x, y, width, height)
@@ -2530,16 +2579,108 @@ var Sprite2 = (props) => {
   return createComponent("Sprite", props);
 };
 
+// src/components/Video.ts
+import { effect as effect8, signal as signal5 } from "@signe/reactive";
+function Video(props) {
+  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 = signal5(null);
+  const defineProps = useDefineProps(props);
+  const { play, loop: loop2, muted } = defineProps({
+    play: {
+      type: Boolean,
+      default: true
+    },
+    loop: {
+      type: Boolean,
+      default: false
+    },
+    muted: {
+      type: Boolean,
+      default: false
+    }
+  });
+  effect8(() => {
+    const _video = video();
+    const state = play();
+    if (_video && state !== void 0) {
+      if (state) {
+        _video.play();
+      } else {
+        _video.pause();
+      }
+    }
+    if (_video && loop2()) {
+      _video.loop = loop2();
+    }
+    if (_video && muted()) {
+      _video.muted = muted();
+    }
+  });
+  mount(() => {
+    return () => {
+      for (let event in eventsMap) {
+        if (eventsMap[event]) {
+          video().removeEventListener(event, eventsMap[event]);
+        }
+      }
+    };
+  });
+  return h(Sprite2, {
+    ...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);
+          }
+        }
+      }
+    }
+  });
+}
+
 // src/components/Text.ts
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect8, signal as signal5 } from "@signe/reactive";
+import { effect as effect9, signal as signal6 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal5({
+  const _signal = signal6({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0
@@ -2569,7 +2710,7 @@ function on(triggerSignal, callback) {
   if (!isTrigger(triggerSignal)) {
     throw new Error("In 'on(arg)' must have a trigger signal type");
   }
-  effect8(() => {
+  effect9(() => {
     const result = triggerSignal.listen();
     if (result?.seed.value) {
       const ret = callback(result?.seed.config);
@@ -2716,7 +2857,7 @@ function TilingSprite(props) {
 
 // src/components/Viewport.ts
 import { Viewport as PixiViewport } from "pixi-viewport";
-import { effect as effect9 } from "@signe/reactive";
+import { effect as effect10 } from "@signe/reactive";
 var EVENTS3 = [
   "bounce-x-end",
   "bounce-x-start",
@@ -2767,7 +2908,7 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
     super.onMount(element);
     const { tick: tick2, renderer, canvasSize } = element.props.context;
     let isDragging = false;
-    effect9(() => {
+    effect10(() => {
       this.screenWidth = canvasSize().width;
       this.screenHeight = canvasSize().height;
     });
@@ -3016,6 +3157,7 @@ export {
   TilingSprite,
   Triangle,
   utils_exports as Utils,
+  Video,
   Viewport,
   animatedSignal,
   bootstrapCanvas,