canvasengine 2.0.0-beta.54 → 2.0.0-beta.58

package/dist/utils/RadialGradient.d.ts

@@ -50,7 +50,7 @@ export declare class RadialGradient {
             y: number;
         };
     }): {
-        texture: Texture<import('pixi.js').TextureSource<any>>;
+        texture: Texture<import('pixi.js').TextureSource<any>> | null;
         matrix: Matrix;
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.54",
+  "version": "2.0.0-beta.58",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,18 +10,18 @@
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
     "@pixi/layout": "^3.2.0",
-    "@signe/reactive": "^2.6.0",
+    "@signe/reactive": "^2.9.0",
     "howler": "^2.2.4",
     "joypad.js": "^2.3.5",
-    "pixi-filters": "^6.0.5",
+    "pixi-filters": "^6.1.5",
     "pixi-viewport": "^6.0.3",
     "popmotion": "^11.0.5",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.2",
     "yoga-layout": "^3.2.1"
   },
   "devDependencies": {
-    "@types/howler": "^2.2.11",
-    "vite": "^7.3.0",
+    "@types/howler": "^2.2.12",
+    "vite": "^8.0.10",
     "vite-plugin-dts": "^4.5.4"
   },
   "author": "Samuel Ronce",

package/src/engine/reactive.ts

@@ -653,6 +653,54 @@ export function createComponent(tag: string, props?: Props): Element {
       child = await child;
     }
     if (child instanceof Observable) {
+      const mountedFlowElements = new Map<Element, Element>();
+
+      const mountFlowElement = (element: Element, index?: number) => {
+        if (mountedFlowElements.has(element)) {
+          return;
+        }
+
+        const routed = routeDomComponent(parent, element);
+        mountedFlowElements.set(element, routed);
+        onMount(parent, routed, index);
+        propagateContext(routed);
+      };
+
+      const syncFlowElements = (nextElements: Set<Element>) => {
+        mountedFlowElements.forEach((mounted, source) => {
+          if (nextElements.has(source)) {
+            return;
+          }
+          mountedFlowElements.delete(source);
+          if (mounted !== source) {
+            destroyElement(mounted);
+          }
+        });
+      };
+
+      const processFlowComponent = (
+        component: any,
+        nextElements: Set<Element>,
+        index?: number
+      ) => {
+        if (component instanceof Observable) {
+          void createElement(parent, component);
+          return;
+        }
+        if (Array.isArray(component)) {
+          component.forEach((comp) =>
+            processFlowComponent(comp, nextElements, index)
+          );
+          return;
+        }
+        if (!isElement(component)) {
+          return;
+        }
+
+        nextElements.add(component);
+        mountFlowElement(component, index);
+      };
+
       // Subscribe to the observable and handle the emitted values
       const subscription = child.subscribe(
         (value: any) => {
@@ -668,43 +716,19 @@ export function createComponent(tag: string, props?: Props): Element {
             } = value;
 
             const components = comp.filter((c) => c !== null);
+            const nextElements = new Set<Element>();
             if (prev) {
-              components.forEach(async (c) => {
+              components.forEach((c) => {
                 const index = parent.props.children.indexOf(prev.props.key);
-                if (c instanceof Observable) {
-                  // Handle observable component recursively
-                  await createElement(parent, c);
-                } else if (isElement(c)) {
-                  const routed = routeDomComponent(parent, c);
-                  onMount(parent, routed, index + 1);
-                  propagateContext(routed);
-                }
+                processFlowComponent(c, nextElements, index + 1);
               });
+              syncFlowElements(nextElements);
               return;
             }
-            components.forEach(async (component) => {
-              if (!Array.isArray(component)) {
-                if (component instanceof Observable) {
-                  // Handle observable component recursively
-                  await createElement(parent, component);
-                } else if (isElement(component)) {
-                  const routed = routeDomComponent(parent, component);
-                  onMount(parent, routed);
-                  propagateContext(routed);
-                }
-              } else {
-                component.forEach(async (comp) => {
-                  if (comp instanceof Observable) {
-                    // Handle observable component recursively
-                    await createElement(parent, comp);
-                  } else if (isElement(comp)) {
-                    const routed = routeDomComponent(parent, comp);
-                    onMount(parent, routed);
-                    propagateContext(routed);
-                  }
-                });
-              }
+            components.forEach((component, index) => {
+              processFlowComponent(component, nextElements, index);
             });
+            syncFlowElements(nextElements);
           } else if (isElement(value)) {
             // Handle direct Element emission
             const routed = routeDomComponent(parent, value);

package/dist/components/Container.d.ts

@@ -1,86 +0,0 @@
-import { ComponentFunction } from '../engine/signal';
-import { DisplayObjectProps } from './types/DisplayObject';
-interface ContainerProps extends DisplayObjectProps {
-    sortableChildren?: boolean;
-}
-declare const CanvasContainer_base: {
-    new (): {
-        [x: string]: any;
-        "__#private@#canvasContext": {
-            [key: string]: any;
-        } | null;
-        isFlex: boolean;
-        fullProps: import('..').Props;
-        isMounted: boolean;
-        _anchorPoints: import('pixi.js').ObservablePoint;
-        isCustomAnchor: boolean;
-        displayWidth: import('@signe/reactive').WritableSignal<number>;
-        displayHeight: import('@signe/reactive').WritableSignal<number>;
-        overrideProps: string[];
-        layout: any;
-        onBeforeDestroy: import('./DisplayObject').OnHook | null;
-        onAfterMount: import('./DisplayObject').OnHook | null;
-        subjectInit: import('rxjs').BehaviorSubject<any>;
-        disableLayout: boolean;
-        "__#private@#registeredEvents": Map<string, Function>;
-        "__#private@#computedLayoutBox": {
-            width?: number;
-            height?: number;
-        } | null;
-        "__#private@#element": import('..').Element<any> | null;
-        getElement(): import('..').Element<any> | null;
-        onLayoutComputed(_event: any): void;
-        get deltaRatio(): any;
-        get parentIsFlex(): any;
-        onInit(props: import('..').Props): void;
-        onMount(element: import('..').Element<any>, index?: number): Promise<void>;
-        onUpdate(props: import('..').Props): void;
-        onDestroy(parent: import('..').Element, afterDestroy?: () => void): Promise<void>;
-        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
-        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
-        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
-        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
-        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
-        setX(x: number): void;
-        setY(y: number): void;
-        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
-        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
-        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
-        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
-        setPositionType(positionType: "relative" | "absolute"): void;
-        setWidth(width: number): void;
-        setHeight(height: number): void;
-        getWidth(): number;
-        getHeight(): number;
-        setMinWidth(minWidth: number | string): void;
-        setMinHeight(minHeight: number | string): void;
-        setMaxWidth(maxWidth: number | string): void;
-        setMaxHeight(maxHeight: number | string): void;
-        setAspectRatio(aspectRatio: number): void;
-        setFlexGrow(flexGrow: number): void;
-        setFlexShrink(flexShrink: number): void;
-        setFlexBasis(flexBasis: number | string): void;
-        setRowGap(rowGap: number): void;
-        setColumnGap(columnGap: number): void;
-        setTop(top: number | string): void;
-        setLeft(left: number | string): void;
-        setRight(right: number | string): void;
-        setBottom(bottom: number | string): void;
-        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
-        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
-        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
-    };
-    [x: string]: any;
-};
-export declare class CanvasContainer extends CanvasContainer_base {
-    isCustomAnchor: boolean;
-    onUpdate(props: any): void;
-    onMount(args: any): Promise<void>;
-}
-export interface CanvasContainer extends DisplayObjectProps {
-}
-export declare const Container: ComponentFunction<ContainerProps>;
-export {};
-//# sourceMappingURL=Container.d.ts.map

package/dist/components/Container.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../src/components/Container.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI3D,UAAU,cAAe,SAAQ,kBAAkB;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;;;;;;;;;;;;;;;;;;;;;;iBAuDq/B,CAAC;kBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArDxgC,qBAAa,eAAgB,SAAQ,oBAA4B;IAC/D,cAAc,UAAQ;IAEtB,QAAQ,CAAC,KAAK,KAAA;IAaR,OAAO,CAAC,IAAI,KAAA;CA0BnB;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;CAAG;AAI9D,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAIvD,CAAC"}

package/dist/components/DOMContainer.d.ts

@@ -1,98 +0,0 @@
-import { Element } from '../engine/reactive';
-import { ComponentFunction } from '../engine/signal';
-import { DisplayObjectProps } from './types/DisplayObject';
-declare const CanvasDOMContainer_base: {
-    new (): {
-        [x: string]: any;
-        "__#private@#canvasContext": {
-            [key: string]: any;
-        } | null;
-        isFlex: boolean;
-        fullProps: import('..').Props;
-        isMounted: boolean;
-        _anchorPoints: import('pixi.js').ObservablePoint;
-        isCustomAnchor: boolean;
-        displayWidth: import('@signe/reactive').WritableSignal<number>;
-        displayHeight: import('@signe/reactive').WritableSignal<number>;
-        overrideProps: string[];
-        layout: any;
-        onBeforeDestroy: import('./DisplayObject').OnHook | null;
-        onAfterMount: import('./DisplayObject').OnHook | null;
-        subjectInit: import('rxjs').BehaviorSubject<any>;
-        disableLayout: boolean;
-        "__#private@#registeredEvents": Map<string, Function>;
-        "__#private@#computedLayoutBox": {
-            width?: number;
-            height?: number;
-        } | null;
-        "__#private@#element": Element<any> | null;
-        getElement(): Element<any> | null;
-        onLayoutComputed(_event: any): void;
-        get deltaRatio(): any;
-        get parentIsFlex(): any;
-        onInit(props: import('..').Props): void;
-        onMount(element: Element<any>, index?: number): Promise<void>;
-        onUpdate(props: import('..').Props): void;
-        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
-        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
-        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
-        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
-        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
-        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
-        setX(x: number): void;
-        setY(y: number): void;
-        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
-        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
-        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
-        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
-        setPositionType(positionType: "relative" | "absolute"): void;
-        setWidth(width: number): void;
-        setHeight(height: number): void;
-        getWidth(): number;
-        getHeight(): number;
-        setMinWidth(minWidth: number | string): void;
-        setMinHeight(minHeight: number | string): void;
-        setMaxWidth(maxWidth: number | string): void;
-        setMaxHeight(maxHeight: number | string): void;
-        setAspectRatio(aspectRatio: number): void;
-        setFlexGrow(flexGrow: number): void;
-        setFlexShrink(flexShrink: number): void;
-        setFlexBasis(flexBasis: number | string): void;
-        setRowGap(rowGap: number): void;
-        setColumnGap(columnGap: number): void;
-        setTop(top: number | string): void;
-        setLeft(left: number | string): void;
-        setRight(right: number | string): void;
-        setBottom(bottom: number | string): void;
-        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
-        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
-        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
-    };
-    [x: string]: any;
-};
-export declare class CanvasDOMContainer extends CanvasDOMContainer_base {
-    disableLayout: boolean;
-    private canvasSizeEffect;
-    private static readonly DOM_ROUTING_MAP;
-    private static readonly DOM_ALLOWED_TAGS;
-    private static readonly DOM_UNSUPPORTED_TAGS;
-    private hasDomContainerAncestor;
-    private getPercentRatio;
-    private getCanvasSize;
-    private shouldUseCanvasPercent;
-    private syncCanvasSizeEffect;
-    private applyElementSize;
-    private routeDomChildren;
-    onInit(props: any): void;
-    onMount(element: Element<any>, index?: number): Promise<void>;
-    onUpdate(props: any): void;
-    onLayoutComputed(): void;
-    onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void>;
-}
-export interface CanvasDOMContainer extends DisplayObjectProps {
-}
-export declare const DOMContainer: ComponentFunction<any>;
-export {};
-//# sourceMappingURL=DOMContainer.d.ts.map

package/dist/components/DOMContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DOMContainer.d.ts","sourceRoot":"","sources":["../../src/components/DOMContainer.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,OAAO,EAGR,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,iBAAiB,EAAK,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;;;;;;;;;;;;;;;;;;;;;;iBAsHnD,CAAC;kBACA,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnBV,qBAAa,kBAAmB,SAAQ,uBAA+B;IACrE,aAAa,UAAQ;IACrB,OAAO,CAAC,gBAAgB,CAAa;IACrC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAErC;IACF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAIrC;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,oBAAoB,CAqBzC;IAEH,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,oBAAoB;IAgB5B,OAAO,CAAC,gBAAgB;IAgDxB,OAAO,CAAC,gBAAgB;IA8BxB,MAAM,CAAC,KAAK,EAAE,GAAG;IA8EX,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,MAAM;IAMnD,QAAQ,CAAC,KAAK,EAAE,GAAG;IAMnB,gBAAgB;IAIV,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI;CAUhE;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;CAAI;AAIlE,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,GAAG,CAE/C,CAAC"}

package/dist/components/DisplayObject.d.ts

@@ -1,94 +0,0 @@
-import { Element, Props } from '../engine/reactive';
-import { AlignContent, EdgeSize, FlexDirection, ObjectFit, ObjectPosition, TransformOrigin } from './types/DisplayObject';
-import { ObservablePoint, Point, Rectangle } from 'pixi.js';
-import { BehaviorSubject } from 'rxjs';
-export interface ComponentInstance extends PixiMixins.ContainerOptions {
-    id?: string;
-    children?: ComponentInstance[];
-    onInit?(props: Props): void;
-    onUpdate?(props: Props): void;
-    onDestroy?(parent: Element, afterDestroy: () => void): void;
-    onMount?(context: Element<any>, index?: number): void;
-    setWidth(width: number): void;
-    setHeight(height: number): void;
-    getLocalBounds?(): Rectangle;
-    getGlobalPosition?(): Point;
-}
-export declare const EVENTS: string[];
-export type OnHook = (() => void) | (() => Promise<void> | void);
-export declare function DisplayObject(extendClass: any): {
-    new (): {
-        [x: string]: any;
-        "__#private@#canvasContext": {
-            [key: string]: any;
-        } | null;
-        isFlex: boolean;
-        fullProps: Props;
-        isMounted: boolean;
-        _anchorPoints: ObservablePoint;
-        isCustomAnchor: boolean;
-        displayWidth: import('@signe/reactive').WritableSignal<number>;
-        displayHeight: import('@signe/reactive').WritableSignal<number>;
-        overrideProps: string[];
-        layout: any;
-        onBeforeDestroy: OnHook | null;
-        onAfterMount: OnHook | null;
-        subjectInit: BehaviorSubject<any>;
-        disableLayout: boolean;
-        "__#private@#registeredEvents": Map<string, Function>;
-        "__#private@#computedLayoutBox": {
-            width?: number;
-            height?: number;
-        } | null;
-        "__#private@#element": Element<any> | null;
-        /**
-         * Get the element reference for freeze checking
-         * @returns The element reference or null
-         */
-        getElement(): Element<any> | null;
-        onLayoutComputed(_event: any): void;
-        get deltaRatio(): any;
-        get parentIsFlex(): any;
-        onInit(props: Props): void;
-        onMount(element: Element<any>, index?: number): Promise<void>;
-        onUpdate(props: Props): void;
-        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
-        setFlexDirection(direction: FlexDirection): void;
-        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): 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;
-        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;
-        setWidth(width: number): void;
-        setHeight(height: number): void;
-        getWidth(): number;
-        getHeight(): number;
-        setMinWidth(minWidth: number | string): void;
-        setMinHeight(minHeight: number | string): void;
-        setMaxWidth(maxWidth: number | string): void;
-        setMaxHeight(maxHeight: number | string): void;
-        setAspectRatio(aspectRatio: number): void;
-        setFlexGrow(flexGrow: number): void;
-        setFlexShrink(flexShrink: number): void;
-        setFlexBasis(flexBasis: number | string): void;
-        setRowGap(rowGap: number): void;
-        setColumnGap(columnGap: number): void;
-        setTop(top: number | string): void;
-        setLeft(left: number | string): void;
-        setRight(right: number | string): void;
-        setBottom(bottom: number | string): void;
-        setObjectFit(objectFit: ObjectFit): void;
-        setObjectPosition(objectPosition: ObjectPosition): void;
-        setTransformOrigin(transformOrigin: TransformOrigin): void;
-    };
-    [x: string]: any;
-};
-//# sourceMappingURL=DisplayObject.d.ts.map

package/dist/components/DisplayObject.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DisplayObject.d.ts","sourceRoot":"","sources":["../../src/components/DisplayObject.ts"],"names":[],"mappings":"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"}

package/dist/components/Mesh.d.ts

@@ -1,208 +0,0 @@
-import { Geometry, Shader, Texture } from 'pixi.js';
-import { Element } from '../engine/reactive';
-import { ComponentInstance } from './DisplayObject';
-import { DisplayObjectProps } from './types/DisplayObject';
-import { SignalOrPrimitive } from './types';
-import { ComponentFunction } from '../engine/signal';
-/**
- * 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>;
-}
-declare const CanvasMesh_base: {
-    new (): {
-        [x: string]: any;
-        "__#private@#canvasContext": {
-            [key: string]: any;
-        } | null;
-        isFlex: boolean;
-        fullProps: import('..').Props;
-        isMounted: boolean;
-        _anchorPoints: import('pixi.js').ObservablePoint;
-        isCustomAnchor: boolean;
-        displayWidth: import('@signe/reactive').WritableSignal<number>;
-        displayHeight: import('@signe/reactive').WritableSignal<number>;
-        overrideProps: string[];
-        layout: any;
-        onBeforeDestroy: import('./DisplayObject').OnHook | null;
-        onAfterMount: import('./DisplayObject').OnHook | null;
-        subjectInit: import('rxjs').BehaviorSubject<any>;
-        disableLayout: boolean;
-        "__#private@#registeredEvents": Map<string, Function>;
-        "__#private@#computedLayoutBox": {
-            width?: number;
-            height?: number;
-        } | null;
-        "__#private@#element": Element<any> | null;
-        getElement(): Element<any> | null;
-        onLayoutComputed(_event: any): void;
-        get deltaRatio(): any;
-        get parentIsFlex(): any;
-        onInit(props: import('..').Props): void;
-        onMount(element: Element<any>, index?: number): Promise<void>;
-        onUpdate(props: import('..').Props): void;
-        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
-        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
-        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
-        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
-        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
-        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
-        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
-        setX(x: number): void;
-        setY(y: number): void;
-        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
-        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
-        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
-        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
-        setPositionType(positionType: "relative" | "absolute"): void;
-        setWidth(width: number): void;
-        setHeight(height: number): void;
-        getWidth(): number;
-        getHeight(): number;
-        setMinWidth(minWidth: number | string): void;
-        setMinHeight(minHeight: number | string): void;
-        setMaxWidth(maxWidth: number | string): void;
-        setMaxHeight(maxHeight: number | string): void;
-        setAspectRatio(aspectRatio: number): void;
-        setFlexGrow(flexGrow: number): void;
-        setFlexShrink(flexShrink: number): void;
-        setFlexBasis(flexBasis: number | string): void;
-        setRowGap(rowGap: number): void;
-        setColumnGap(columnGap: number): void;
-        setTop(top: number | string): void;
-        setLeft(left: number | string): void;
-        setRight(right: number | string): void;
-        setBottom(bottom: number | string): void;
-        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
-        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
-        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
-    };
-    [x: string]: any;
-};
-/**
- * Canvas Mesh component class that extends DisplayObject with PixiMesh functionality.
- * This component allows rendering of custom 3D meshes with shaders and textures.
- *
- * @example
- * ```typescript
- * // Basic mesh with geometry and texture
- * const mesh = Mesh({
- *   geometry: myGeometry,
- *   texture: "path/to/texture.png",
- *   tint: 0xff0000
- * });
- *
- * // Mesh with custom shader
- * const customMesh = Mesh({
- *   geometry: myGeometry,
- *   shader: myCustomShader,
- *   draw: (mesh) => {
- *     // Custom mesh manipulation
- *     mesh.rotation += 0.01;
- *   }
- * });
- * ```
- */
-declare class CanvasMesh extends CanvasMesh_base {
-    /**
-     * Constructor for the CanvasMesh component.
-     * Initializes the PixiMesh with default geometry and shader to prevent errors.
-     *
-     * @example
-     * ```typescript
-     * // This constructor is called internally by the engine
-     * const mesh = new CanvasMesh();
-     * ```
-     */
-    constructor();
-    /**
-     * Initializes the mesh component with the provided properties.
-     * This method is called before onUpdate to set up initial state.
-     *
-     * @param props - The initial properties
-     * @example
-     * ```typescript
-     * // This method is called internally when the component is created
-     * mesh.onInit({
-     *   geometry: myGeometry,
-     *   texture: "texture.png"
-     * });
-     * ```
-     */
-    onInit(props: MeshProps): void;
-    /**
-     * Updates the mesh component when properties change.
-     * Handles texture loading, shader updates, and other property changes.
-     *
-     * @param props - The updated properties
-     * @example
-     * ```typescript
-     * // This method is called internally when props change
-     * mesh.onUpdate({
-     *   tint: 0x00ff00,
-     *   texture: "new-texture.png"
-     * });
-     * ```
-     */
-    onUpdate(props: MeshProps): Promise<void>;
-    /**
-     * Called when the component is about to be destroyed.
-     * Cleans up the draw effect subscription and calls the parent destroy method.
-     *
-     * @param parent - The parent element
-     * @param afterDestroy - Callback function to execute after destruction
-     * @example
-     * ```typescript
-     * // This method is typically called by the engine internally
-     * await mesh.onDestroy(parentElement, () => console.log('Mesh destroyed'));
-     * ```
-     */
-    onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void>;
-}
-/**
- * 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;
- *   }
- * });
- * ```
- */
-export declare const Mesh: ComponentFunction<MeshProps>;
-export { CanvasMesh };
-export type { MeshProps };
-//# sourceMappingURL=Mesh.d.ts.map

package/dist/components/Mesh.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Mesh.d.ts","sourceRoot":"","sources":["../../src/components/Mesh.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAuB,MAAM,SAAS,CAAC;AAC3F,OAAO,EAAmB,OAAO,EAAqB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;GAGG;AACH,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;iBA+Ec,CAAC;kBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7EjC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,cAAM,UAAW,SAAQ,eAAuB;IAC9C;;;;;;;;;OASG;;IASH;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,KAAK,EAAE,SAAS;IAkBvB;;;;;;;;;;;;;OAaG;IACG,QAAQ,CAAC,KAAK,EAAE,SAAS;IA4C/B;;;;;;;;;;;OAWG;IACG,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;CAM7F;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAE7C,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC;AAGtB,YAAY,EAAE,SAAS,EAAE,CAAC"}