canvasengine 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/index.js

@@ -1,6 +1,11 @@
+var __defProp = Object.defineProperty;
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
@@ -24,6 +29,22 @@ function applyDirective(element, directiveName) {
 }
 
 // src/engine/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  arrayEquals: () => arrayEquals,
+  calculateDistance: () => calculateDistance,
+  error: () => error,
+  fps2ms: () => fps2ms,
+  get: () => get,
+  isBrowser: () => isBrowser,
+  isFunction: () => isFunction,
+  isObject: () => isObject,
+  isPromise: () => isPromise,
+  log: () => log,
+  preciseNow: () => preciseNow,
+  set: () => set,
+  setObservablePoint: () => setObservablePoint
+});
 function isBrowser() {
   return typeof window !== "undefined";
 }
@@ -92,7 +113,7 @@ function set(obj, path, value, onlyPlainObject = false) {
   for (let i = 0; i < len - 1; i++) {
     let segment = path[i];
     let nextSegment = path[i + 1];
-    let isNextNumeric = !isNaN(nextSegment) && isFinite(nextSegment);
+    let isNextNumeric = !isNaN(Number(nextSegment)) && isFinite(Number(nextSegment));
     if (!current[segment] || typeof current[segment] !== "object") {
       current[segment] = isNextNumeric && !onlyPlainObject ? [] : {};
     }
@@ -101,6 +122,20 @@ function set(obj, path, value, onlyPlainObject = false) {
   current[path[len - 1]] = value;
   return obj;
 }
+function get(obj, path) {
+  const keys = path.split(".");
+  let current = obj;
+  for (let key of keys) {
+    if (current[key] === void 0) {
+      return void 0;
+    }
+    current = current[key];
+  }
+  return current;
+}
+function log(text) {
+  console.log(text);
+}
 function error(text) {
   console.error(text);
 }
@@ -1174,8 +1209,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);
@@ -1185,62 +1232,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.children) {
-        return;
+  }
+  ;
+  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.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;
+            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;
@@ -2117,8 +2178,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 = {
@@ -2178,7 +2239,7 @@ function animatedSignal(initialValue, options = {}) {
 }
 
 // src/components/Sprite.ts
-var log = console.log;
+var log2 = console.log;
 var CanvasSprite = class extends DisplayObject(PixiSprite) {
   constructor() {
     super(...arguments);
@@ -2205,12 +2266,12 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
         const rectX = j * spriteWidth + offsetX;
         const rectY = i * spriteHeight + offsetY;
         if (rectY > height) {
-          throw log(
+          throw log2(
             `Warning, there is a problem with the height of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the height of the image.`
           );
         }
         if (rectX > width) {
-          throw log(
+          throw log2(
             `Warning, there is a problem with the width of the "${this.id}" spritesheet. When cutting into frames, the frame exceeds the width of the image.`
           );
         }
@@ -2323,6 +2384,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) {
@@ -2332,13 +2408,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)
@@ -2479,23 +2555,128 @@ 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.source,
+    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(config) {
-  const _signal = signal5(0);
+function trigger(globalConfig) {
+  const _signal = signal6({
+    config: globalConfig,
+    value: 0,
+    resolve: (value) => void 0
+  });
   return {
-    start: () => {
-      _signal.set(Math.random());
+    start: (config) => {
+      return new Promise((resolve) => {
+        _signal.set({
+          config: {
+            ...globalConfig,
+            ...config
+          },
+          resolve,
+          value: Math.random()
+        });
+      });
     },
     listen: () => {
       return {
-        config,
+        config: globalConfig,
         seed: _signal()
       };
     }
@@ -2505,9 +2686,14 @@ 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) callback(result.config);
+    if (result?.seed.value) {
+      const ret = callback(result?.seed.config);
+      if (ret && typeof ret.then === "function") {
+        ret.then(result?.seed.resolve);
+      }
+    }
   });
 }
 
@@ -2647,7 +2833,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",
@@ -2698,7 +2884,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;
     });
@@ -2838,6 +3024,16 @@ var Easing = {
 // src/utils/RadialGradient.ts
 import { Texture as Texture5, ImageSource, DOMAdapter, Matrix } from "pixi.js";
 var RadialGradient = class {
+  /**
+   * Creates a new RadialGradient instance
+   * @param x0 - The x-coordinate of the starting circle
+   * @param y0 - The y-coordinate of the starting circle
+   * @param x1 - The x-coordinate of the ending circle
+   * @param y1 - The y-coordinate of the ending circle
+   * @param x2 - The x-coordinate for gradient transformation
+   * @param y2 - The y-coordinate for gradient transformation
+   * @param focalPoint - The focal point of the gradient (0-1), defaults to 0
+   */
   constructor(x0, y0, x1, y1, x2, y2, focalPoint = 0) {
     this.x0 = x0;
     this.y0 = y0;
@@ -2866,11 +3062,22 @@ var RadialGradient = class {
       );
     }
   }
+  /**
+   * Adds a color stop to the gradient
+   * @param offset - The position of the color stop (0-1)
+   * @param color - The color value (any valid CSS color string)
+   */
   addColorStop(offset, color) {
     if (this.gradient) {
       this.gradient.addColorStop(offset, color);
     }
   }
+  /**
+   * Renders the gradient and returns the texture with its transformation matrix
+   * @param options - Render options
+   * @param options.translate - Optional translation coordinates
+   * @returns Object containing the texture and transformation matrix
+   */
   render({ translate } = {}) {
     const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
     const defaultSize = this.size;
@@ -2925,6 +3132,8 @@ export {
   Text,
   TilingSprite,
   Triangle,
+  utils_exports as Utils,
+  Video,
   Viewport,
   animatedSignal,
   bootstrapCanvas,