canvasengine 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/utils/RadialGradient.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Container.ts

@@ -1,4 +1,4 @@
-import { Container as PixiContainer } from "pixi.js";
+import { Container as PixiContainer, type ContainerChild } from "pixi.js";
 import { createComponent, registerComponent } from "../engine/reactive";
 import { DisplayObject } from "./DisplayObject";
 import { ComponentFunction } from "../engine/signal";
@@ -6,8 +6,16 @@ import { DisplayObjectProps } from "./types/DisplayObject";
 import { setObservablePoint } from "../engine/utils";
 import { isPercent } from "../utils/functions";
 
-interface ContainerProps extends DisplayObjectProps {
+export interface ContainerProps extends DisplayObjectProps {
   sortableChildren?: boolean;
+  /**
+   * Native PixiJS display objects to add to this container when it mounts.
+   *
+   * This is an escape hatch for rendering PixiJS objects directly inside the
+   * CanvasEngine scene graph. CanvasEngine does not manage these children's
+   * props or lifecycle; destroy or update them manually when needed.
+   */
+  pixiChildren?: ContainerChild[];
 }
 
 export class CanvasContainer extends DisplayObject(PixiContainer) {

package/src/components/DOMContainer.ts

@@ -343,6 +343,14 @@ export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
   }
 
   async onMount(element: Element<any>, index?: number) {
+    const parentTag = element.parent?.tag;
+    if (parentTag === "DOMContainer" || parentTag === "DOMElement") {
+      this.onUpdate(element.props);
+      this.syncCanvasSizeEffect();
+      this.applyElementSize();
+      return;
+    }
+
     await super.onMount(element, index);
     this.syncCanvasSizeEffect();
     this.applyElementSize();

package/src/components/DOMSprite.ts

@@ -515,7 +515,11 @@ export class CanvasDOMSprite extends CanvasDOMElement {
       if (resolvedSheet?.definition !== undefined) {
         const resolvedDefinition = this.resolveSheetDefinition(resolvedSheet.definition);
         if (resolvedDefinition instanceof Promise) {
-          void this.setSheetDefinition(resolvedDefinition);
+          void resolvedDefinition.then((definition) => {
+            if (definition) {
+              void this.setSheetDefinition(definition);
+            }
+          });
         } else if (resolvedDefinition && resolvedDefinition !== this.sheetDefinition) {
           void this.setSheetDefinition(resolvedDefinition);
         }
@@ -570,7 +574,7 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     }
   }
 
-  private resolveValue<T>(value: T | Signal<T> | { value?: T } | undefined): T | undefined {
+  private resolveValue<T = any>(value: any): T | undefined {
     if (value === undefined) return undefined;
     const resolved = isSignal(value as any) ? (value as any)() : value;
     if (resolved && typeof resolved === "object" && "value" in (resolved as any)) {
@@ -687,9 +691,9 @@ export class CanvasDOMSprite extends CanvasDOMElement {
     ].some((value) => value !== undefined);
 
     if (hasTransformProps) {
-      let x = this.resolveValue(props.x) ?? 0;
-      let y = this.resolveValue(props.y) ?? 0;
-      const roundPixels = this.resolveValue(props.roundPixels);
+      let x = this.resolveValue<number>(props.x) ?? 0;
+      let y = this.resolveValue<number>(props.y) ?? 0;
+      const roundPixels = this.resolveValue<boolean>(props.roundPixels);
       if (roundPixels) {
         x = Math.round(x);
         y = Math.round(y);
@@ -698,8 +702,8 @@ export class CanvasDOMSprite extends CanvasDOMElement {
       const scale = this.resolvePoint(props.scale) ?? { x: 1, y: 1 };
       const skew = this.resolvePoint(props.skew);
 
-      const angle = this.resolveValue(props.angle);
-      const rotation = this.resolveValue(props.rotation);
+      const angle = this.resolveValue<number>(props.angle);
+      const rotation = this.resolveValue<number>(props.rotation);
       const rotationDeg = angle !== undefined
         ? angle
         : rotation !== undefined

package/src/components/DisplayObject.ts

@@ -100,7 +100,7 @@ export const EVENTS = [
 
 export type OnHook = (() => void) | (() => Promise<void> | void);
 
-export function DisplayObject(extendClass) {
+export function DisplayObject(extendClass): any {
   return class DisplayObject extends extendClass {
     #canvasContext: {
       [key: string]: any;

package/src/components/Graphic.ts

@@ -88,6 +88,9 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
    */
   async onMount(element: Element<any>, index?: number): Promise<void> {
     await super.onMount(element, index);
+    if (this.destroyed || !this.parent) {
+      return;
+    }
     const { props, propObservables } = element;
     
     // Use original signals from propObservables if available, otherwise create new ones
@@ -111,6 +114,9 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
         if (typeof w == 'string' || typeof h == 'string') {
           return
         }
+        if (this.destroyed || !this.parent) {
+          return
+        }
         this.clear();
         props.draw?.(this, w, h, a);
         this.subjectInit.next(this)

package/src/components/Mesh.ts

@@ -1,9 +1,8 @@
-import { Effect, effect } from "@signe/reactive";
+import { isSignal } from "@signe/reactive";
 import { Mesh as PixiMesh, Geometry, Shader, Texture, Assets, BLEND_MODES } from "pixi.js";
 import { createComponent, Element, registerComponent } from "../engine/reactive";
 import { ComponentInstance, DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
-import { useProps } from "../hooks/useProps";
 import { SignalOrPrimitive } from "./types";
 import { ComponentFunction } from "../engine/signal";
 
@@ -13,19 +12,31 @@ import { ComponentFunction } from "../engine/signal";
  */
 interface MeshProps extends DisplayObjectProps {
   /** The geometry defining the mesh structure (vertices, indices, UVs, etc.) */
-  geometry?: Geometry;
+  geometry?: SignalOrPrimitive<Geometry>;
   /** The shader to render the mesh with */
-  shader?: Shader;
+  shader?: SignalOrPrimitive<Shader>;
   /** The texture to apply to the mesh */
-  texture?: Texture | string;
+  texture?: SignalOrPrimitive<Texture | string>;
   /** The image URL to load as texture */
-  image?: string;
+  image?: SignalOrPrimitive<string>;
   /** The tint color to apply to the mesh */
   tint?: SignalOrPrimitive<number>;
   /** Whether to round pixels for sharper rendering */
   roundPixels?: SignalOrPrimitive<boolean>;
 }
 
+const resolveProp = <T>(value: SignalOrPrimitive<T> | undefined): T | undefined => {
+  return isSignal(value as any) ? (value as any)() : value as T | undefined;
+};
+
+const isValidGeometry = (value: Geometry | undefined): value is Geometry => {
+  if (!value) return false;
+  if (value instanceof Geometry) return true;
+
+  const geometry = value as any;
+  return typeof geometry.on === 'function' && typeof geometry.off === 'function';
+};
+
 /**
  * Canvas Mesh component class that extends DisplayObject with PixiMesh functionality.
  * This component allows rendering of custom 3D meshes with shaders and textures.
@@ -87,17 +98,19 @@ class CanvasMesh extends DisplayObject(PixiMesh) {
     super.onInit(props);
 
     // Set initial geometry if provided
-    if (props.geometry) {
+    const geometry = resolveProp(props.geometry);
+    if (isValidGeometry(geometry)) {
       try {
-        this.geometry = props.geometry;
+        this.geometry = geometry;
       } catch (error) {
         console.warn('Failed to set geometry:', error);
       }
     }
     
     // Set initial shader if provided
-    if (props.shader) {
-      this.shader = props.shader;
+    const shader = resolveProp(props.shader);
+    if (shader) {
+      this.shader = shader;
     }
   }
 
@@ -119,28 +132,32 @@ class CanvasMesh extends DisplayObject(PixiMesh) {
     super.onUpdate(props);
 
     // Handle geometry updates
-    if (props.geometry) {
+    const geometry = resolveProp(props.geometry);
+    if (isValidGeometry(geometry)) {
       try {
-        this.geometry = props.geometry;
+        this.geometry = geometry;
       } catch (error) {
         console.warn('Failed to update geometry:', error);
       }
     }
 
     // Handle shader/material updates
-    if (props.shader) {
-      this.shader = props.shader;
+    const shader = resolveProp(props.shader);
+    if (shader) {
+      this.shader = shader;
     }
 
     // Handle texture updates
-    if (props.texture) {
-      if (typeof props.texture === 'string') {
-        this.texture = await Assets.load(props.texture);
+    const texture = resolveProp(props.texture);
+    const image = resolveProp(props.image);
+    if (texture) {
+      if (typeof texture === 'string') {
+        this.texture = await Assets.load(texture);
       } else {
-        this.texture = props.texture;
+        this.texture = texture;
       }
-    } else if (props.image) {
-      this.texture = await Assets.load(props.image);
+    } else if (image) {
+      this.texture = await Assets.load(image);
     }
 
     // Handle tint updates
@@ -219,4 +236,4 @@ export const Mesh: ComponentFunction<MeshProps> = (props) => {
 export { CanvasMesh };
 
 // Export the props interface for TypeScript users
-export type { MeshProps };
+export type { MeshProps };

package/src/components/Viewport.ts

@@ -181,10 +181,10 @@ export class CanvasViewport extends DisplayObject(Container) {
 
     private updateMask() {
         if (!this.#mask) return
-        this.#mask.clear()
-        this.#mask.beginFill(0xffffff)
-        this.#mask.drawRect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
-        this.#mask.endFill()
+        this.#mask
+            .clear()
+            .rect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
+            .fill(0xffffff)
     }
 
     /**

package/src/components/index.ts

@@ -1,5 +1,5 @@
 export { Canvas } from './Canvas'
-export { Container } from './Container'
+export { Container, type ContainerProps } from './Container'
 export { Graphics, Rect, Circle, Ellipse, Triangle, Svg } from './Graphic'
 export { Mesh } from './Mesh'
 export { Scene } from './Scene'