canvasengine 2.0.0-beta.2 → 2.0.0-beta.4

package/src/engine/trigger.ts

@@ -2,39 +2,95 @@ import { effect, signal } from "@signe/reactive";
 
 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
+ */
 export function isTrigger(arg: any): arg is Trigger<any> {
   return arg?.start && arg?.listen;
 }
 
-export function trigger<T = any>(config?: T): Trigger<T> {
-  const _signal = signal(0);
+/**
+ * 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' })
+ * ```
+ */
+export function trigger<T = any>(globalConfig?: T): Trigger<T> {
+  const _signal = signal({
+    config: globalConfig,
+    value: 0,
+    resolve: (value: any) => void 0,
+  });
   return {
-    start: () => {
-      _signal.set(Math.random());
+    start: (config?: T) => {
+      return new Promise((resolve: (value: any) => void) => {
+        _signal.set({
+          config: {
+            ...globalConfig,
+            ...config,
+          },
+          resolve,
+          value: Math.random(),
+        });
+      });
     },
     listen: (): Listen<T> | undefined => {
       return {
-        config,
+        config: globalConfig,
         seed: _signal(),
       };
     },
   };
 }
 
-export function on(triggerSignal: any, callback: (config: any) => void) {
+/**
+ * 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')
+ * })
+ * ```
+ */
+export function on(triggerSignal: any, callback: (config: any) => void | Promise<void>) {
   if (!isTrigger(triggerSignal)) {
     throw new Error("In 'on(arg)' must have a trigger signal type");
   }
   effect(() => {
     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);
+      }
+    }
   });
 }

package/src/engine/utils.ts

@@ -1,17 +1,35 @@
 import { ObservablePoint } from "pixi.js"
 
+/**
+ * Checks if code is running in a browser environment
+ * @returns {boolean} True if running in browser, false otherwise
+ */
 export function isBrowser(): boolean {
     return typeof window !== 'undefined'
 }
 
+/**
+ * Returns current high-resolution timestamp
+ * @returns {number} Current time in milliseconds
+ */
 export function preciseNow(): number {
     return typeof performance !== 'undefined' ? performance.now() : Date.now()
 }
 
+/**
+ * Converts frames per second to milliseconds
+ * @param {number} fps - Frames per second
+ * @returns {number} Milliseconds per frame
+ */
 export function fps2ms(fps: number): number {
     return 1000 / fps
 }
 
+/**
+ * Checks if a value is a Promise
+ * @param {any} value - Value to check
+ * @returns {boolean} True if value is a Promise, false otherwise
+ */
 export function isPromise(value: any): boolean {
     return value && value instanceof Promise
 }
@@ -58,15 +76,38 @@ function deepEquals(a: any, b: any): boolean {
     return false;
 }
 
+/**
+ * Checks if a value is a function
+ * @param {unknown} val - Value to check
+ * @returns {boolean} True if value is a function, false otherwise
+ */
 export function isFunction(val: unknown): boolean {
     return {}.toString.call(val) === '[object Function]'
 }
 
+/**
+ * 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
+ */
 export function isObject(val: unknown): boolean {
     return typeof val == 'object' && val != null && !Array.isArray(val)
 }
 
-export function set(obj, path, value, onlyPlainObject = false) {
+/**
+ * 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
+ */
+export function set(
+    obj: Record<string, any>, 
+    path: string | string[], 
+    value: any, 
+    onlyPlainObject = false
+): Record<string, any> {
     if (Object(obj) !== obj) return obj;
 
     if (typeof path === 'string') {
@@ -79,8 +120,8 @@ export function set(obj, path, value, onlyPlainObject = false) {
     let current = obj;
     for (let i = 0; i < len - 1; i++) {
         let segment = path[i];
-        let nextSegment = path[i + 1];
-        let isNextNumeric = !isNaN(nextSegment) && isFinite(nextSegment);
+        let nextSegment: number | string = path[i + 1];
+        let isNextNumeric = !isNaN(Number(nextSegment)) && isFinite(Number(nextSegment));
 
         if (!current[segment] || typeof current[segment] !== 'object') {
             current[segment] = (isNextNumeric && !onlyPlainObject) ? [] : {};
@@ -94,7 +135,13 @@ export function set(obj, path, value, onlyPlainObject = false) {
     return obj;
 }
 
-export function get(obj, path) {
+/**
+ * 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
+ */
+export function get(obj: Record<string, any>, path: string): any {
     const keys = path.split('.');
     let current = obj;
 
@@ -108,15 +155,31 @@ export function get(obj, path) {
     return current;
 }
 
-export function log(text) {
+/**
+ * Logs a message to console
+ * @param {any} text - Message to log
+ */
+export function log(text: any): void {
     console.log(text)
 }
 
-export function error(text) {
+/**
+ * Logs an error message to console
+ * @param {any} text - Error message to log
+ */
+export function error(text: any): void {
     console.error(text)
 }
 
-export function setObservablePoint(observablePoint: ObservablePoint, point: { x: number, y: number } | number | [number, number]): 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
+ */
+export function setObservablePoint(
+    observablePoint: ObservablePoint, 
+    point: { x: number, y: number } | number | [number, number]
+): void {
     if (typeof point === 'number') {
         observablePoint.set(point);
     }
@@ -128,7 +191,20 @@ export function setObservablePoint(observablePoint: ObservablePoint, point: { x:
     }
 }
 
-export function calculateDistance(x1, y1, x2, y2) {
+/**
+ * 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
+ */
+export function calculateDistance(
+    x1: number, 
+    y1: number, 
+    x2: number, 
+    y2: number
+): number {
     const dx = x1 - x2;
     const dy = y1 - y2;
     return Math.sqrt(dx * dx + dy * dy);

package/src/index.ts

@@ -10,4 +10,6 @@ export * from './engine/animation'
 export { useProps, useDefineProps } from './hooks/useProps'
 export * from './utils/Ease'
 export * from './utils/RadialGradient'
-export { isObservable } from 'rxjs'
+export * from './components/DisplayObject'
+export { isObservable } from 'rxjs'
+export * as Utils from './engine/utils'

package/src/utils/RadialGradient.ts

@@ -1,5 +1,13 @@
 import { Texture, ImageSource, DOMAdapter, Matrix } from "pixi.js";
 
+/**
+ * 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)");
+ */
 export class RadialGradient {
   private canvas: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D | null;
@@ -9,6 +17,16 @@ export class RadialGradient {
 
   public size = 600;
 
+  /**
+   * 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(
     private x0: number,
     private y0: number,
@@ -38,12 +56,23 @@ export class RadialGradient {
     }
   }
 
+  /**
+   * 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) {
     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 }: { translate?: { x: number; y: number } } = {}) {
     const { x0, y0, x1, y1, x2, y2, focalPoint } = this;
     const defaultSize = this.size;

package/src/components/DrawMap/index.ts

@@ -1,65 +0,0 @@
-import { effect, signal } from "@signe/reactive";
-import { loop } from "../../engine/reactive";
-import { h } from "../../engine/signal";
-import { useProps } from "../../hooks/useProps";
-import { Container } from "../Container";
-import { Sprite } from "../Sprite";
-
-interface TileData {
-  id: number;
-  rect: [number, number, number, number];
-  drawIn: [number, number];
-  layerIndex: number;
-}
-
-export function ImageMap(props) {
-  const { imageSource, tileData } = useProps(props);
-  const tiles = signal<TileData[]>([]);
-
-  effect(async () => {
-    const data = await fetch(tileData()).then((response) => response.json());
-    const objects = data;
-    if (props.objects) {
-      objects.push(...props.objects(data));
-    }
-    tiles.set(objects);
-  });
-
-  const createLayeredTiles = () => {
-    const layers = [createTileLayer(0), createTileLayer(1, true), createTileLayer(2)];
-
-    return h(Container, props, ...layers);
-  };
-
-  const createTileLayer = (layerIndex: number, sortableChildren = false) => {
-    return h(
-      Container,
-      {
-        sortableChildren,
-      },
-      loop(tiles, (object) => {
-
-        if (object.tag && layerIndex == 1) {
-            return object
-        }
-
-        object.layerIndex ||= 1;
-        if (object.layerIndex !== layerIndex) return null;
-
-        const [x, y, width, height] = object.rect;
-        const [drawX, drawY] = object.drawIn;
-
-        return h(Sprite, {
-          image: imageSource(),
-          x: drawX,
-          y: drawY,
-          rectangle: { x, y, width, height },
-          zIndex: drawY + height - 70,
-        // zIndex: 0
-        });
-      })
-    );
-  };
-
-  return createLayeredTiles();
-}

package/src/components/Tilemap/Tile.ts

@@ -1,79 +0,0 @@
-import { CompositeTilemap } from "@pixi/tilemap";
-import { Tile as TiledTileClass } from '@rpgjs/tiled';
-import { AnimatedSprite, Texture, groupD8 } from "pixi.js";
-import { TileSet } from "./TileSet";
-
-export class Tile extends AnimatedSprite {
-    static getTextures(tile: TiledTileClass, tileSet: TileSet) {
-        const textures: Texture[] = [];
-
-        if (tile.animations && tile.animations.length) {
-            tile.animations.forEach(frame => {
-                textures.push(tileSet.textures[frame.tileid])
-            });
-        } else {
-            textures.push(tileSet.textures[tile.gid - tileSet.firstgid])
-        }
-
-        return textures;
-    }
-
-    animations: { tileid: number, duration: number }[] = []
-    _x: number = 0
-    _y: number = 0
-    pointsBufIndex: number
-    properties: any = {}
-
-    constructor(
-        private tile: TiledTileClass,
-        private tileSet: TileSet
-    ) {
-        super(Tile.getTextures(tile, tileSet));
-        this.animations = tile.animations || []
-        this.properties = tile.properties
-        this.textures = Tile.getTextures(tile, tileSet)
-        this.texture = this.textures[0] as Texture
-        this.flip()
-    }
-
-    get gid() {
-        return this.tile.gid
-    }
-
-    setAnimation(frame: CompositeTilemap) {
-        const size = this.animations.length
-        if (size > 1) {
-            const offset = (this.animations[1].tileid - this.animations[0].tileid) * this.width
-            frame.tileAnimX(offset, size)
-        }
-    }
-
-    flip() {
-        let symmetry
-        let i = 0
-        const add = (symmetrySecond) => {
-            i++
-            if (symmetry) symmetry = groupD8.add(symmetry, symmetrySecond)
-            else symmetry = symmetrySecond
-        }
-
-        if (this.tile.horizontalFlip) {
-            add(groupD8.MIRROR_HORIZONTAL)
-        }
-
-        if (this.tile.verticalFlip) {
-            add(groupD8.MIRROR_VERTICAL)
-        }
-
-        if (this.tile.diagonalFlip) {
-            if (i % 2 == 0) {
-                add(groupD8.MAIN_DIAGONAL)
-            }
-            else {
-                add(groupD8.REVERSE_DIAGONAL)
-            }
-        }
-
-        //if (symmetry) this.texture.rotate = symmetry
-    }
-}

package/src/components/Tilemap/TileGroup.ts

@@ -1,207 +0,0 @@
-interface TileOptions {
-    tilesetIndex?: number
-    tileId: number
-    x: number
-    y: number
-}
-
-interface TilesGroupOptions {
-    ignore?: boolean
-    probability?: number
-    baseHeight?: number
-    baseWidth?: number
-    rectMargin?: number
-    baseOffsetX?: number
-    baseOffsetY?: number
-}
-
-export class TileInfo {
-    tilesetIndex?: number
-    tileId: number
-    flags: Map<string, any> = new Map()
-    id: number = Math.random()
-
-    constructor(obj: TileOptions) {
-        this.tilesetIndex = obj.tilesetIndex ?? 0
-        this.tileId = obj.tileId
-    }
-
-    addFlag(key: string, value: any) {
-        this.flags.set(key, value)
-    }
-}
-
-export class TilesGroup {
-    tiles: (TileInfo | null)[][] = []
-    width: number
-    height: number
-    ignore: boolean = false
-    probability: number = 1
-    baseHeight: number = 1
-    baseWidth?: number
-    baseOffsetX: number = 0
-    baseOffsetY: number = 0
-    rectMargin: number = 0
-
-    constructor(tiles: TileOptions[], public tilesetIndex: number = 0, options: TilesGroupOptions = {}) {
-        const pointsX = tiles.map(tile => tile.x)
-        const pointsY = tiles.map(tile => tile.y)
-        const offsetX = Math.min(...pointsX)
-        const offsetY = Math.min(...pointsY)
-        this.width = Math.max(...pointsX) - offsetX + 1
-        this.height = Math.max(...pointsY) - offsetY + 1
-        this.ignore = !!options.ignore
-        this.probability = options.probability ?? 1
-        this.baseHeight = options.baseHeight ?? 1
-        this.baseWidth = options.baseWidth
-        this.rectMargin = options.rectMargin ?? 0
-        this.baseOffsetX = options.baseOffsetX ?? 0
-        this.baseOffsetY = options.baseOffsetY ?? 0
-        this.fillTiles()
-        for (let tile of tiles) {
-            this.addTile(tile.x - offsetX, tile.y - offsetY, tile)
-        }
-    }
-
-    getRect(x: number, y: number): { minX: number, minY: number, maxX: number, maxY: number } {
-        const margin = this.rectMargin
-        return {
-            minX: x - margin + this.baseOffsetX,
-            minY: y - this.tilesBaseHeight - margin - this.baseOffsetY,
-            maxX: x + this.tilesBaseWidth + margin,
-            maxY: y + margin
-        }
-    }
-
-    get tilesBase() {
-        return this.tiles[this.tiles.length - 1]
-    }
-
-    get tilesBaseWidth(): number {
-        return this.baseWidth ?? this.tilesBase.length
-    }
-
-    get tilesBaseHeight(): number {
-        return this.baseHeight
-    }
-
-    forEach(cb: (tileInfo: TileInfo | null, x: number, y: number) => void) {
-        for (let i = 0; i < this.tiles.length; i++) {
-            for (let j = 0; j < this.tiles[i].length; j++) {
-                cb(this.tiles[i][j], j, i)
-            }
-        }
-    }
-
-    find(cb: (tileInfo: TileInfo | null, x: number, y: number) => boolean): TileInfo | null {
-        let found: TileInfo | null = null
-        this.forEach((tileInfo, x, y) => {
-            const bool = cb(tileInfo, x, y)
-            if (bool) found = tileInfo
-        })
-        return found
-    }
-
-    getOffsetY(): number {
-        const tilesBase = this.tilesBase
-        let offset = 0
-        this.forEach((tile, x, y) => {
-            if (tile?.tileId == (tilesBase?.[0]?.tileId)) {
-                offset = y
-            }
-        })
-        return offset
-    }
-
-    fillTiles() {
-        for (let i = 0; i < this.height; i++) {
-            this.tiles[i] = []
-            for (let j = 0; j < this.width; j++) {
-                this.tiles[i][j] = null
-            }
-        }
-    }
-
-    shiftToTopLeft(): void {
-        const matrix = this.tiles
-
-        // Find the first non-undefined element and its position
-        const foundFirst = () => {
-            let firstElementRow = -1;
-            let firstElementColumn = -1;
-
-            for (let col = 0; col < matrix.length; col++) {
-                if (!matrix[col]) matrix[col] = []
-                for (let row = 0; row < matrix[col].length; row++) {
-                    if (matrix[col][row] !== undefined) {
-                        firstElementRow = row;
-                        firstElementColumn = col;
-                        return {
-                            firstElementRow,
-                            firstElementColumn
-                        };
-                    }
-                }
-            }
-
-            return {
-                firstElementRow,
-                firstElementColumn
-            }
-        }
-
-        const { firstElementRow, firstElementColumn } = foundFirst()
-
-        // If no non-undefined element is found, return the original matrix
-        if (firstElementRow === -1) {
-            return;
-        }
-
-        // Shift the matrix elements
-        const newMatrix: (TileInfo | null)[][] = [];
-        for (let col = firstElementColumn; col < matrix.length; col++) {
-            const newRow: (TileInfo | null)[] = [];
-            for (let row = firstElementRow; row < matrix[col].length; row++) {
-                newRow.push(matrix[col][row]);
-            }
-            newMatrix.push(newRow);
-        }
-
-        this.tiles = newMatrix;
-
-        this.width = this.tiles[0].length
-        this.height = this.tiles.length
-    }
-
-    addTile(x: number, y: number, tileOptions: TileOptions) {
-        if (!this.tiles[y]) this.tiles[y] = []
-        this.tiles[y][x] = new TileInfo(tileOptions)
-    }
-
-    addTileFlag(x: number, y: number, key: string, value: any) {
-        this.getTile(x, y)?.addFlag(key, value)
-    }
-
-    getTile(x: number, y: number): TileInfo | null {
-        return this.tiles[y]?.[x]
-    }
-
-    getTilesByFlag(key: string, value: any): { tileInfo: TileInfo, x: number, y: number }[] {
-        const array: any = []
-        this.forEach((tileInfo, x, y) => {
-            const flag = tileInfo?.flags.get(key)
-            if (flag && flag == value) {
-                array.push({
-                    tileInfo,
-                    x,
-                    y
-                })
-            }
-        })
-        return array
-    }
-
-    isTileBase(tileInfo: TileInfo): boolean {
-        return !!this.tilesBase.find(tile => tile?.id == tileInfo.id)
-    }
-}