canvasengine 2.0.0-beta.19 → 2.0.0-beta.20

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as _signe_reactive from '@signe/reactive';
 import { WritableSignal, Signal } from '@signe/reactive';
 export * from '@signe/reactive';
-import { Subscription, Subject, Observable } from 'rxjs';
+import { BehaviorSubject, Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
 import * as PIXI from 'pixi.js';
-import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Application, Matrix } from 'pixi.js';
+import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Geometry, Shader, Texture, TextStyle, Application, Matrix } from 'pixi.js';
 import * as howler from 'howler';
 export { howler as Howl };
 export { Howler } from 'howler';
@@ -221,10 +221,13 @@ declare function DisplayObject(extendClass: any): {
         layout: any;
         onBeforeDestroy: OnHook | null;
         onAfterMount: OnHook | null;
+        subjectInit: BehaviorSubject<any>;
+        disableLayout: boolean;
         readonly deltaRatio: any;
-        onInit(props: any): void;
+        readonly parentIsFlex: any;
+        onInit(props: Props): void;
         onMount({ parent, props }: Element</*elided*/ any>, index?: number): Promise<void>;
-        onUpdate(props: any): void;
+        onUpdate(props: Props): void;
         onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
         setFlexDirection(direction: FlexDirection): void;
         setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
@@ -427,7 +430,7 @@ interface ContainerProps extends DisplayObjectProps {
 declare const Container: ComponentFunction<ContainerProps>;
 
 interface GraphicsProps extends DisplayObjectProps {
-    draw?: (graphics: Graphics$1) => void;
+    draw?: (graphics: Graphics$1, width: number, height: number) => void;
 }
 interface RectProps extends DisplayObjectProps {
     color: SignalOrPrimitive<string>;
@@ -444,15 +447,95 @@ interface TriangleProps extends DisplayObjectProps {
     color: SignalOrPrimitive<string>;
 }
 interface SvgProps extends DisplayObjectProps {
-    svg: string;
+    /** SVG content as string (legacy prop) */
+    svg?: string;
+    /** URL source of the SVG file to load */
+    src?: string;
+    /** Direct SVG content as string */
+    content?: string;
 }
 declare function Graphics(props: GraphicsProps): Element<ComponentInstance>;
 declare function Rect(props: RectProps): Element<ComponentInstance>;
 declare function Circle(props: CircleProps): Element<ComponentInstance>;
 declare function Ellipse(props: EllipseProps): Element<ComponentInstance>;
 declare function Triangle(props: TriangleProps): Element<ComponentInstance>;
+/**
+ * Creates an SVG component that can render SVG graphics from URL, content, or legacy svg prop.
+ *
+ * This component provides three ways to display SVG graphics:
+ * - **src**: Load SVG from a URL using Assets.load with parseAsGraphicsContext option
+ * - **content**: Render SVG directly from string content using Graphics.svg() method
+ * - **svg**: Legacy prop for SVG content (for backward compatibility)
+ *
+ * @param props - Component properties including src, content, or svg
+ * @returns A reactive SVG component
+ * @example
+ * ```typescript
+ * // Load from URL
+ * const svgFromUrl = Svg({ src: "/assets/logo.svg" });
+ *
+ * // Direct content
+ * const svgFromContent = Svg({
+ *   content: `<svg viewBox="0 0 100 100">
+ *     <circle cx="50" cy="50" r="40" fill="blue"/>
+ *   </svg>`
+ * });
+ *
+ * // Legacy usage
+ * const svgLegacy = Svg({ svg: "<svg>...</svg>" });
+ * ```
+ */
 declare function Svg(props: SvgProps): Element<ComponentInstance>;
 
+/**
+ * Interface defining the properties for a Mesh component.
+ * Extends DisplayObjectProps to inherit common display object properties.
+ */
+interface MeshProps extends DisplayObjectProps {
+    /** The geometry defining the mesh structure (vertices, indices, UVs, etc.) */
+    geometry?: Geometry;
+    /** The shader to render the mesh with */
+    shader?: Shader;
+    /** The texture to apply to the mesh */
+    texture?: Texture | string;
+    /** The image URL to load as texture */
+    image?: string;
+    /** The tint color to apply to the mesh */
+    tint?: SignalOrPrimitive<number>;
+    /** Whether to round pixels for sharper rendering */
+    roundPixels?: SignalOrPrimitive<boolean>;
+}
+/**
+ * Creates a Mesh component with the specified properties.
+ * This is the main function used to create mesh instances in your application.
+ *
+ * @param props - The properties for the mesh component
+ * @returns A mesh component element
+ * @example
+ * ```typescript
+ * import { Mesh } from 'canvasengine';
+ *
+ * // Create a basic textured mesh
+ * const myMesh = Mesh({
+ *   geometry: triangleGeometry,
+ *   texture: "assets/texture.png",
+ *   x: 100,
+ *   y: 100,
+ *   tint: 0xff0000
+ * });
+ *
+ * // Create a mesh with custom shader
+ * const shaderMesh = Mesh({
+ *   geometry: planeGeometry,
+ *   shader: customShader,
+ *   draw: (mesh) => {
+ *     mesh.rotation += 0.01;
+ *   }
+ * });
+ * ```
+ */
+declare const Mesh: ComponentFunction<MeshProps>;
+
 declare function Scene(props: any): Element<ComponentInstance> | Promise<Element<ComponentInstance>>;
 
 declare function ParticlesEmitter(props: any): Element<ComponentInstance>;
@@ -899,6 +982,25 @@ interface NineSliceSpriteProps extends DisplayObjectProps {
 }
 declare function NineSliceSprite(props: NineSliceSpriteProps): Element<ComponentInstance>;
 
+interface DOMContainerProps extends DisplayObjectProps {
+    element: string | {
+        value: HTMLElement;
+    };
+    textContent?: string;
+    attrs?: Record<string, any> & {
+        class?: string | string[] | Record<string, boolean> | {
+            items?: string[];
+        } | {
+            value?: string | string[] | Record<string, boolean>;
+        };
+        style?: string | Record<string, string | number> | {
+            value?: string | Record<string, string | number>;
+        };
+    };
+    sortableChildren?: boolean;
+}
+declare const DOMContainer: ComponentFunction<DOMContainerProps>;
+
 interface Listen<T = any> {
     config: T | undefined;
     seed: {
@@ -1106,9 +1208,16 @@ declare function arrayEquals(a: any[], b: any[]): boolean;
  */
 declare function isFunction(val: unknown): boolean;
 /**
- * Checks if a value is a plain object
+ * Checks if a value is a plain object (not an instance of a class)
  * @param {unknown} val - Value to check
- * @returns {boolean} True if value is an object (not null and not array), false otherwise
+ * @returns {boolean} True if value is a plain object (not null, not array, not instance), false otherwise
+ * @example
+ * ```ts
+ * isObject({}) // true
+ * isObject(new Date()) // false
+ * isObject([]) // false
+ * isObject(null) // false
+ * ```
  */
 declare function isObject(val: unknown): boolean;
 /**
@@ -1173,4 +1282,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 AnimateOptions, type AnimatedSignal, type AnimatedState, 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, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
+export { type AnimateOptions, type AnimatedSignal, type AnimatedState, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DOMContainer, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, Mesh, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Svg, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, tick, trigger, useDefineProps, useProps };