canvasengine 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/index.d.ts

@@ -1,15 +1,19 @@
-import { WritableSignal, Signal, WritableArraySignal } from '@signe/reactive';
+import * as _signe_reactive from '@signe/reactive';
+import { WritableSignal, Signal, WritableArraySignal, WritableObjectSignal } from '@signe/reactive';
 export * from '@signe/reactive';
 import { Subscription, Subject, Observable } from 'rxjs';
-export { Howler } from 'howler';
+export { isObservable } from 'rxjs';
+import { Node } from 'yoga-layout';
 import * as PIXI from 'pixi.js';
-import { Graphics as Graphics$1, TextStyle, Texture } from 'pixi.js';
+import { ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
+export { Howler } from 'howler';
 import * as popmotion from 'popmotion';
 
 interface AnimateOptions<T> {
     duration?: number;
     ease?: (t: number) => number;
     onUpdate?: (value: T) => void;
+    onComplete?: () => void;
 }
 interface AnimatedState<T> {
     current: T;
@@ -18,7 +22,7 @@ interface AnimatedState<T> {
 }
 interface AnimatedSignal<T> extends Omit<WritableSignal<T>, 'set'> {
     (): T;
-    set: (newValue: T) => void;
+    set: (newValue: T, options?: AnimateOptions<T>) => Promise<void>;
     animatedState: WritableSignal<AnimatedState<T>>;
     update: (updater: (value: T) => T) => void;
 }
@@ -42,14 +46,35 @@ declare function isAnimatedSignal(signal: WritableSignal<any>): boolean;
  * animatedValue.animatedState() // { current: 10, start: 10, end: 11 }
  */
 declare function animatedSignal<T>(initialValue: T, options?: AnimateOptions<T>): AnimatedSignal<T>;
+/**
+ * Executes a sequence of animations. If an array is provided as an element in the sequence,
+ * those animations will be executed in parallel.
+ *
+ * @param sequence Array of animation functions or arrays of animation functions for parallel execution
+ * @returns Promise that resolves when all animations are complete
+ * @example
+ * ```ts
+ * await animatedSequence([
+ *   () => value1.set(10),
+ *   [
+ *     () => value2.set(20),
+ *     () => value3.set(30)
+ *   ],
+ *   () => value1.set(0)
+ * ])
+ * ```
+ */
+declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Promise<void>)[])[]): Promise<void>;
 
 type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
 
 type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 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>;
@@ -88,6 +113,7 @@ interface DisplayObjectProps {
     }>;
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
+    blur?: SignalOrPrimitive<number>;
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;
@@ -130,6 +156,65 @@ interface ComponentInstance extends PixiMixins.ContainerOptions {
     setWidth(width: number): void;
     setHeight(height: number): void;
 }
+declare const EVENTS: string[];
+declare function DisplayObject(extendClass: any): {
+    new (): {
+        [x: string]: any;
+        "__#1@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: Props;
+        isMounted: boolean;
+        _anchorPoints: ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: _signe_reactive.WritableSignal<number>;
+        displayHeight: _signe_reactive.WritableSignal<number>;
+        overrideProps: string[];
+        node: Node;
+        readonly yoga: any;
+        readonly deltaRatio: any;
+        onInit(props: any): void;
+        onMount({ parent, props }: Element</*elided*/ any>, index?: number): void;
+        effectSize(width: Size, height: Size): void;
+        applyFlexLayout(): void;
+        "__#1@#flexRender"(props: any): void;
+        onUpdate(props: any): void;
+        onDestroy(): void;
+        getComputedLayout(): {
+            left: number;
+            right: number;
+            top: number;
+            bottom: number;
+            width: number;
+            height: number;
+        };
+        applyComputedLayout(): void;
+        calculateLayout(): void;
+        setFlexDirection(direction: FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        "__#1@#setAlign"(methodName: string, align: AlignContent): void;
+        setAlignContent(align: AlignContent): void;
+        setAlignSelf(align: AlignContent): void;
+        setAlignItems(align: AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        "__#1@#setEdgeSize"(methodName: string, size: EdgeSize): void;
+        setPosition(position: EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: EdgeSize): void;
+        setMargin(margin: EdgeSize): void;
+        setGap(gap: EdgeSize): void;
+        setBorder(border: EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        calculateBounds(): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+    };
+    [x: string]: any;
+};
 
 interface Props {
     [key: string]: any;
@@ -139,6 +224,12 @@ type ArrayChange<T> = {
     index?: number;
     items: T[];
 };
+type ObjectChange<T> = {
+    type: "add" | "remove" | "update" | "init" | "reset";
+    key?: string;
+    value?: T;
+    items: T[];
+};
 type NestedSignalObjects = {
     [Key in string]: NestedSignalObjects | Signal<any>;
 };
@@ -161,10 +252,12 @@ interface Element<T = ComponentInstance> {
     destroy: () => void;
     allElements: Subject<void>;
 }
-type FlowObservable = Observable<{
+type FlowResult = {
     elements: Element[];
     prev?: Element;
-}>;
+    fullElements?: Element[];
+};
+type FlowObservable = Observable<FlowResult>;
 declare const isElement: (value: any) => value is Element;
 declare const isPrimitive: (value: any) => boolean;
 declare function registerComponent(name: any, component: any): void;
@@ -180,14 +273,21 @@ declare function registerComponent(name: any, component: any): void;
  */
 declare function createComponent(tag: string, props?: Props): Element;
 /**
- * Observes a BehaviorSubject containing an array of items and dynamically creates child elements for each item.
+ * Observes a BehaviorSubject containing an array or object of items and dynamically creates child elements for each item.
  *
- * @param {BehaviorSubject<Array>} itemsSubject - A BehaviorSubject that emits an array of items.
+ * @param {WritableArraySignal<T> | WritableObjectSignal<T>} itemsSubject - A signal that emits an array or object of items.
  * @param {Function} createElementFn - A function that takes an item and returns an element representation.
  * @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;
+declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>, createElementFn: (item: T, index: number | string) => Element | null): 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;
@@ -685,10 +785,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>;
@@ -704,8 +820,6 @@ interface TextProps extends DisplayObjectProps {
 }
 declare function Text(props: TextProps): Element<ComponentInstance>;
 
-declare function TiledMap(props: any): any;
-
 interface TilingSpriteProps extends DisplayObjectProps {
     image?: string;
     tileScale?: {
@@ -736,8 +850,6 @@ interface ViewportProps {
 }
 declare function Viewport(props: ViewportProps): Element<ComponentInstance>;
 
-declare function ImageMap(props: any): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
-
 interface NineSliceSpriteProps extends DisplayObjectProps {
     image?: string;
     texture?: Texture;
@@ -753,15 +865,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.
@@ -814,18 +964,6 @@ type PropSchema = {
  */
 declare const useDefineProps: (props: any) => (schema?: PropSchema) => any;
 
-interface BarProps {
-    backgroundColor?: string;
-    foregroundColor?: string;
-    value: number;
-    maxValue: number;
-    width: number;
-    height: number;
-}
-declare function Bar(opts: BarProps): Element<ComponentInstance>;
-
-declare function Particle(options: any): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
-
 declare const Easing: {
     linear: popmotion.Easing;
     easeIn: popmotion.Easing;
@@ -843,4 +981,157 @@ declare const Easing: {
     bounceOut: (p: number) => number;
 };
 
-export { type AnimatedSignal, type AnimatedState, type ArrayChange, Bar, Canvas, Circle, type ComponentFunction, Container, Easing, type Element, Ellipse, Graphics, ImageMap, NineSliceSprite, Particle, ParticlesEmitter, type Props, Rect, Scene, Sprite, Text, TiledMap, 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 };
+/**
+ * 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;
+    private x1;
+    private y1;
+    private x2;
+    private y2;
+    private focalPoint;
+    private canvas;
+    private ctx;
+    private gradient;
+    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;
+            y: number;
+        };
+    }): {
+        texture: Texture<PIXI.TextureSource<any>>;
+        matrix: Matrix;
+    };
+}
+
+/**
+ * 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 AnimateOptions, type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, type ObjectChange, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };