canvasengine 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/index.d.ts

@@ -813,15 +813,53 @@ declare function NineSliceSprite(props: NineSliceSpriteProps): Element<Component
 
 interface Listen<T = any> {
     config: T | undefined;
-    seed: number;
+    seed: {
+        config: T | undefined;
+        value: number;
+        resolve: (value: any) => void;
+    };
 }
 interface Trigger<T = any> {
-    start: () => void;
+    start: () => Promise<void>;
     listen: () => Listen<T> | undefined;
 }
+/**
+ * Checks if the given argument is a Trigger object
+ * @param arg - The value to check
+ * @returns True if the argument is a Trigger object
+ */
 declare function isTrigger(arg: any): arg is Trigger<any>;
-declare function trigger<T = any>(config?: T): Trigger<T>;
-declare function on(triggerSignal: any, callback: (config: any) => void): void;
+/**
+ * Creates a new trigger that can be used to pass data between components
+ * @param globalConfig - Optional configuration data to be passed when the trigger is activated
+ * @returns A Trigger object with start and listen methods
+ * @example
+ * ```ts
+ * const myTrigger = trigger()
+ *
+ * on(myTrigger, (data) => {
+ *   console.log('Triggered with data:', data)
+ * })
+ *
+ * myTrigger.start({ message: 'Hello' })
+ * ```
+ */
+declare function trigger<T = any>(globalConfig?: T): Trigger<T>;
+/**
+ * Subscribes to a trigger and executes a callback when the trigger is activated
+ * @param triggerSignal - The trigger to subscribe to
+ * @param callback - Function to execute when the trigger is activated
+ * @throws Error if triggerSignal is not a valid trigger
+ * @example
+ * ```ts
+ * const click = trigger()
+ *
+ * on(click, () => {
+ *   console.log('Click triggered')
+ * })
+ * ```
+ */
+declare function on(triggerSignal: any, callback: (config: any) => void | Promise<void>): void;
 
 /**
  * Bootstraps a canvas element and renders it to the DOM.
@@ -891,6 +929,14 @@ declare const Easing: {
     bounceOut: (p: number) => number;
 };
 
+/**
+ * Creates a radial gradient texture that can be used in PixiJS.
+ * @example
+ * const gradient = new RadialGradient(size, size, 0, size, size, 0);
+ * gradient.addColorStop(0, "rgba(255, 255, 0, 1)");
+ * gradient.addColorStop(0.5, "rgba(255, 255, 0, 0.3)");
+ * gradient.addColorStop(0.8, "rgba(255, 255, 0, 0)");
+ */
 declare class RadialGradient {
     private x0;
     private y0;
@@ -905,8 +951,29 @@ declare class RadialGradient {
     private texture;
     transform: Matrix;
     size: number;
+    /**
+     * 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: number, y0: number, x1: number, y1: number, x2: number, y2: number, focalPoint?: number);
+    /**
+     * 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: number, color: string): void;
+    /**
+     * 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 }?: {
         translate?: {
             x: number;
@@ -918,4 +985,101 @@ declare class RadialGradient {
     };
 }
 
-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, Viewport, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
+/**
+ * Checks if code is running in a browser environment
+ * @returns {boolean} True if running in browser, false otherwise
+ */
+declare function isBrowser(): boolean;
+/**
+ * Returns current high-resolution timestamp
+ * @returns {number} Current time in milliseconds
+ */
+declare function preciseNow(): number;
+/**
+ * Converts frames per second to milliseconds
+ * @param {number} fps - Frames per second
+ * @returns {number} Milliseconds per frame
+ */
+declare function fps2ms(fps: number): number;
+/**
+ * Checks if a value is a Promise
+ * @param {any} value - Value to check
+ * @returns {boolean} True if value is a Promise, false otherwise
+ */
+declare function isPromise(value: any): boolean;
+declare function arrayEquals(a: any[], b: any[]): boolean;
+/**
+ * Checks if a value is a function
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is a function, false otherwise
+ */
+declare function isFunction(val: unknown): boolean;
+/**
+ * Checks if a value is a plain object
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ */
+declare function isObject(val: unknown): boolean;
+/**
+ * Sets a value in an object using a dot notation path
+ * @param {Record<string, any>} obj - Target object
+ * @param {string | string[]} path - Path to set value at (e.g., 'a.b.c' or ['a', 'b', 'c'])
+ * @param {any} value - Value to set
+ * @param {boolean} onlyPlainObject - If true, only creates plain objects in path
+ * @returns {Record<string, any>} Modified object
+ */
+declare function set(obj: Record<string, any>, path: string | string[], value: any, onlyPlainObject?: boolean): Record<string, any>;
+/**
+ * Gets a value from an object using a dot notation path
+ * @param {Record<string, any>} obj - Source object
+ * @param {string} path - Path to get value from (e.g., 'a.b.c')
+ * @returns {any} Value at path or undefined if not found
+ */
+declare function get(obj: Record<string, any>, path: string): any;
+/**
+ * Logs a message to console
+ * @param {any} text - Message to log
+ */
+declare function log(text: any): void;
+/**
+ * Logs an error message to console
+ * @param {any} text - Error message to log
+ */
+declare function error(text: any): void;
+/**
+ * Sets the position of an ObservablePoint using various input formats
+ * @param {ObservablePoint} observablePoint - The point to modify
+ * @param {Object | number | [number, number]} point - New position value
+ */
+declare function setObservablePoint(observablePoint: ObservablePoint, point: {
+    x: number;
+    y: number;
+} | number | [number, number]): void;
+/**
+ * Calculates the Euclidean distance between two points
+ * @param {number} x1 - X coordinate of first point
+ * @param {number} y1 - Y coordinate of first point
+ * @param {number} x2 - X coordinate of second point
+ * @param {number} y2 - Y coordinate of second point
+ * @returns {number} Distance between the points
+ */
+declare function calculateDistance(x1: number, y1: number, x2: number, y2: number): number;
+
+declare const utils_arrayEquals: typeof arrayEquals;
+declare const utils_calculateDistance: typeof calculateDistance;
+declare const utils_error: typeof error;
+declare const utils_fps2ms: typeof fps2ms;
+declare const utils_get: typeof get;
+declare const utils_isBrowser: typeof isBrowser;
+declare const utils_isFunction: typeof isFunction;
+declare const utils_isObject: typeof isObject;
+declare const utils_isPromise: typeof isPromise;
+declare const utils_log: typeof log;
+declare const utils_preciseNow: typeof preciseNow;
+declare const utils_set: typeof set;
+declare const utils_setObservablePoint: typeof setObservablePoint;
+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 };

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);
 }
@@ -1189,6 +1224,22 @@ function createComponent(tag, props) {
   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 {
+          let lastElement = null;
+          element2.propObservables.attach.observable.subscribe(({ value, type }) => {
+            if (type != "init") {
+              destroyElement(lastElement);
+            }
+            lastElement = value;
+            onMount(element2, value);
+            propagateContext(value);
+          });
+        }
+      }
       if (!element2.props.children) {
         return;
       }
@@ -2178,7 +2229,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 +2256,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.`
           );
         }
@@ -2487,15 +2538,28 @@ import { effect as effect8, signal as signal5 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
-function trigger(config) {
-  const _signal = signal5(0);
+function trigger(globalConfig) {
+  const _signal = signal5({
+    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()
       };
     }
@@ -2507,7 +2571,12 @@ function on(triggerSignal, callback) {
   }
   effect8(() => {
     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);
+      }
+    }
   });
 }
 
@@ -2838,6 +2907,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 +2945,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 +3015,7 @@ export {
   Text,
   TilingSprite,
   Triangle,
+  utils_exports as Utils,
   Viewport,
   animatedSignal,
   bootstrapCanvas,