canvasengine 2.0.0-beta.2 → 2.0.0-beta.20

package/src/components/Graphic.ts

@@ -1,54 +1,184 @@
-import { effect, Signal } from "@signe/reactive";
-import { Graphics as PixiGraphics } from "pixi.js";
-import { createComponent, registerComponent } from "../engine/reactive";
-import { DisplayObject } from "./DisplayObject";
+import { Effect, effect, isSignal, signal, Signal, WritableSignal } from "@signe/reactive";
+import { Assets, Graphics as PixiGraphics } 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 { isPercent } from "../utils/functions";
 
 interface GraphicsProps extends DisplayObjectProps {
-  draw?: (graphics: PixiGraphics) => void;
+  draw?: (graphics: PixiGraphics, width: number, height: number) => void;
 }
 
 interface RectProps extends DisplayObjectProps {
-  width: number;
-  height: number;
-  color: string;
+  color: SignalOrPrimitive<string>;
 }
 
 interface CircleProps extends DisplayObjectProps {
-  radius: number;
-  color: string;
+  radius: SignalOrPrimitive<number>;
+  color: SignalOrPrimitive<string>;
 }
 
 interface EllipseProps extends DisplayObjectProps {
-  width: number;
-  height: number;
-  color: string;
+  color: SignalOrPrimitive<string>;
 }
 
 interface TriangleProps extends DisplayObjectProps {
-  base: number;
-  height: number;
-  color: string;
+  base: SignalOrPrimitive<number>;
+  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;
 }
 
 class CanvasGraphics extends DisplayObject(PixiGraphics) {
-  onInit(props: GraphicsProps) {
-    super.onInit(props);
+  clearEffect: Effect;
+  width: WritableSignal<number>;
+  height: WritableSignal<number>;
+  
+  /**
+   * Initializes the graphics component with reactive width and height handling.
+   * 
+   * This method handles different types of width and height props:
+   * - **Numbers**: Direct pixel values
+   * - **Strings with %**: Percentage values that trigger flex layout and use layout box dimensions
+   * - **Signals**: Reactive values that update automatically
+   * 
+   * When percentage values are detected, the component:
+   * 1. Sets `display: 'flex'` to enable layout calculations
+   * 2. Listens to layout events to get computed dimensions
+   * 3. Updates internal width/height signals with layout box values
+   * 
+   * The draw function receives the reactive width and height signals as parameters.
+   * 
+   * @param props - Component properties including width, height, and draw function
+   * @example
+   * ```typescript
+   * // With pixel values
+   * Graphics({ width: 100, height: 50, draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * 
+   * // With percentage values (uses layout box)
+   * Graphics({ width: "50%", height: "100%", draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * 
+   * // With signals
+   * const width = signal(100);
+   * Graphics({ width, height: 50, draw: (g, w, h) => g.rect(0, 0, w(), h()) });
+   * ```
+   */
+  async onInit(props) {
+    await super.onInit(props);
+  }
+
+  /**
+   * Called when the component is mounted to the scene graph.
+   * Creates the reactive effect for drawing using the original signals from propObservables.
+   * @param {Element<DisplayObject>} element - The element being mounted with props and propObservables.
+   * @param {number} [index] - The index of the component among its siblings.
+   */
+  async onMount(element: Element<any>, index?: number): Promise<void> {
+    await super.onMount(element, index);
+    const { props, propObservables } = element;
+    
+    // Use original signals from propObservables if available, otherwise create new ones
+    const width = (isSignal(propObservables?.width) ? propObservables.width : signal(props.width || 0)) as WritableSignal<number>;
+    const height = (isSignal(propObservables?.height) ? propObservables.height : signal(props.height || 0)) as WritableSignal<number>;
+    
+    // Store as class properties for access in other methods
+    this.width = width;
+    this.height = height;
+    
+    // Check if width or height are percentages to set display flex
+    const isWidthPercentage = isPercent(width());
+    const isHeightPercentage = isPercent(height());
+    
     if (props.draw) {
-      effect(() => {
+      this.clearEffect = effect(() => {
+        const w = width();
+        const h = height();
+        if (typeof w == 'string' || typeof h == 'string') {
+          return
+        }
+        if (w == 0 || h == 0) {
+          return
+        }
         this.clear();
-        props.draw?.(this);
+        props.draw?.(this, w, h);
+        this.subjectInit.next(this)
       });
     }
+
+    this.on('layout', (event) => {
+      const layoutBox = event.computedLayout;
+      // Update width if it's a percentage
+      if (isWidthPercentage && isSignal(width)) {
+        width.set(layoutBox.width);
+      }
+      
+      // Update height if it's a percentage
+      if (isHeightPercentage && isSignal(height)) {
+        height.set(layoutBox.height);
+      }
+    });
+  }
+
+  /**
+   * Called when component props are updated.
+   * Updates the internal width and height signals when props change.
+   * @param props - Updated properties
+   */
+  onUpdate(props: any) {
+    super.onUpdate(props);
+    
+    // Update width signal if width prop changed
+    if (props.width !== undefined && this.width) {
+      if (isSignal(props.width)) {
+        // If the new prop is a signal, we need to replace our local signal
+        // This shouldn't happen in normal usage, but handle it just in case
+        this.width = props.width;
+      } else {
+        // Update our local signal with the new value
+        this.width.set(props.width);
+      }
+    }
+    
+    // Update height signal if height prop changed
+    if (props.height !== undefined && this.height) {
+      if (isSignal(props.height)) {
+        // If the new prop is a signal, we need to replace our local signal
+        // This shouldn't happen in normal usage, but handle it just in case
+        this.height = props.height;
+      } else {
+        // Update our local signal with the new value
+        this.height.set(props.height);
+      }
+    }
   }
-}
 
-interface CanvasGraphics extends PixiGraphics {}
+  /**
+   * Called when the component is about to be destroyed.
+   * This method should be overridden by subclasses to perform any cleanup.
+   * It ensures that the clearEffect subscription is unsubscribed before calling the original afterDestroy callback.
+   * @param parent The parent element.
+   * @param afterDestroy A callback function to be executed after the component's own destruction logic.
+   * @example
+   * // This method is typically called by the engine internally.
+   * // await component.onDestroy(parentElement, () => console.log('Component destroyed'));
+   */
+  async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void> {
+    const _afterDestroyCallback = async () => {
+      this.clearEffect.subscription.unsubscribe();
+      afterDestroy();
+    }
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+}
 
 registerComponent("Graphics", CanvasGraphics);
 
@@ -57,16 +187,17 @@ export function Graphics(props: GraphicsProps) {
 }
 
 export function Rect(props: RectProps) {
-  const { width, height, color, borderRadius, border } = useProps(props, {
+  const { color, borderRadius, border } = useProps(props, {
     borderRadius: null,
     border: null
   })
+
   return Graphics({
-    draw: (g) => {
+    draw: (g, width, height) => {
       if (borderRadius()) {
-        g.roundRect(0, 0, width(), height(), borderRadius());
+        g.roundRect(0, 0, width, height, borderRadius());
       } else {
-        g.rect(0, 0, width(), height());
+        g.rect(0, 0, width, height);
       }
       if (border) {
         g.stroke(border);
@@ -82,8 +213,8 @@ function drawShape(g: PixiGraphics, shape: 'circle' | 'ellipse', props: {
   color: Signal<string>;
   border: Signal<number>;
 } | {
-  width: Signal<number>;
-  height: Signal<number>;
+  width: WritableSignal<number>;
+  height: WritableSignal<number>;
   color: Signal<string>;
   border: Signal<number>;
 }) {
@@ -114,7 +245,7 @@ export function Ellipse(props: EllipseProps) {
     border: null
   })
   return Graphics({
-    draw: (g) => drawShape(g, 'ellipse', { width, height, color, border }),
+    draw: (g, gWidth, gHeight) => drawShape(g, 'ellipse', { width: signal(gWidth), height: signal(gHeight), color, border }),
     ...props
   })
 }
@@ -125,11 +256,11 @@ export function Triangle(props: TriangleProps) {
     color: '#000'
   })
   return Graphics({
-    draw: (g) => {
-      g.moveTo(0, height());
-      g.lineTo(width() / 2, 0);
-      g.lineTo(width(), height());
-      g.lineTo(0, height());
+    draw: (g, gWidth, gHeight) => {
+      g.moveTo(0, gHeight);
+      g.lineTo(gWidth / 2, 0);
+      g.lineTo(gWidth, gHeight);
+      g.lineTo(0, gHeight);
       g.fill(color());
       if (border) {
         g.stroke(border);
@@ -139,9 +270,55 @@ export function Triangle(props: TriangleProps) {
   })
 }
 
+/**
+ * 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>" });
+ * ```
+ */
 export function Svg(props: SvgProps) {
   return Graphics({
-    draw: (g) => g.svg(props.svg),
+    draw: async (g) => {
+      if (props.src) {
+        // Load SVG from source URL with graphics context parsing
+        const svgData = await Assets.load({
+          src: props.src,
+          data: {
+            parseAsGraphicsContext: true,
+          },
+        });
+        
+        // Apply the loaded graphics context
+        const graphics = new PixiGraphics(svgData);
+        g.context = graphics.context;
+      } else if (props.content) {
+        // Render SVG directly from content string
+        g.svg(props.content);
+      } else if (props.svg) {
+        // Legacy prop support
+        g.svg(props.svg);
+      }
+    },
     ...props
   })
 }

package/src/components/Mesh.ts

@@ -0,0 +1,222 @@
+import { Effect, effect } 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";
+
+/**
+ * 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>;
+}
+
+/**
+ * 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;
+ *   }
+ * });
+ * ```
+ */
+class CanvasMesh extends DisplayObject(PixiMesh) {
+  /**
+   * 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() {
+    // Call parent constructor with minimal options to prevent destructuring error
+    // @ts-ignore - PixiMesh constructor expects options object but TypeScript doesn't recognize it
+    super({
+      geometry: new Geometry()
+    });
+  }
+
+  /**
+   * 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) {
+    super.onInit(props);
+
+    // Set initial geometry if provided
+    if (props.geometry) {
+      try {
+        this.geometry = props.geometry;
+      } catch (error) {
+        console.warn('Failed to set geometry:', error);
+      }
+    }
+    
+    // Set initial shader if provided
+    if (props.shader) {
+      this.shader = props.shader;
+    }
+  }
+
+  /**
+   * 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"
+   * });
+   * ```
+   */
+  async onUpdate(props: MeshProps) {
+    super.onUpdate(props);
+
+    // Handle geometry updates
+    if (props.geometry) {
+      try {
+        this.geometry = props.geometry;
+      } catch (error) {
+        console.warn('Failed to update geometry:', error);
+      }
+    }
+
+    // Handle shader/material updates
+    if (props.shader) {
+      this.shader = props.shader;
+    }
+
+    // Handle texture updates
+    if (props.texture) {
+      if (typeof props.texture === 'string') {
+        this.texture = await Assets.load(props.texture);
+      } else {
+        this.texture = props.texture;
+      }
+    } else if (props.image) {
+      this.texture = await Assets.load(props.image);
+    }
+
+    // Handle tint updates
+    if (props.tint !== undefined) {
+      this.tint = props.tint;
+    }
+
+    // Handle blend mode updates
+    if (props.blendMode !== undefined) {
+      this.blendMode = props.blendMode;
+    }
+
+    // Handle round pixels updates
+    if (props.roundPixels !== undefined) {
+      this.roundPixels = props.roundPixels;
+    }
+  }
+
+  /**
+   * 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'));
+   * ```
+   */
+  async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void> {
+    const _afterDestroyCallback = async () => {
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+}
+
+// Register the component with the engine
+registerComponent("Mesh", CanvasMesh);
+
+/**
+ * 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 const Mesh: ComponentFunction<MeshProps> = (props) => {
+  return createComponent("Mesh", props);
+};
+
+// Export the component class for advanced usage
+export { CanvasMesh };
+
+// Export the props interface for TypeScript users
+export type { MeshProps };

package/src/components/NineSliceSprite.ts

@@ -2,6 +2,7 @@ import { Assets, NineSliceSprite as PixiNineSliceSprite, Texture } from "pixi.js
 import { createComponent, registerComponent } from "../engine/reactive";
 import { DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
+import { Layout } from "@pixi/layout";
 
 interface NineSliceSpriteProps extends DisplayObjectProps {
     image?: string;
@@ -37,7 +38,9 @@ class CanvasNineSliceSprite extends DisplayObject(PixiNineSliceSprite) {
   }
 }
 
-interface CanvasNineSliceSprite extends PixiNineSliceSprite {}
+interface CanvasNineSliceSprite extends PixiNineSliceSprite {
+  layout: Layout | null;
+}
 
 registerComponent("NineSliceSprite", CanvasNineSliceSprite);
 

package/src/components/ParticleEmitter.ts

@@ -1,14 +1,15 @@
 import * as particles from "@barvynkoa/particle-emitter";
-import { createComponent, registerComponent } from "../engine/reactive";
+import { createComponent, Element, registerComponent } from "../engine/reactive";
 import { CanvasContainer } from "./Container";
 import { Signal } from "@signe/reactive";
+import { ComponentInstance } from "./DisplayObject";
 
 class CanvasParticlesEmitter extends CanvasContainer {
   private emitter: particles.Emitter | null;
   private elapsed: number = Date.now();
 
-  onMount(params) {
-    super.onMount(params);
+  async onMount(params) {
+    await super.onMount(params);
     const { props } = params;
     const tick: Signal = props.context.tick;
     this.emitter = new particles.Emitter(this as any, props.config);
@@ -24,11 +25,14 @@ class CanvasParticlesEmitter extends CanvasContainer {
 
   onUpdate(props) {}
 
-  onDestroy(): void {
-    super.onDestroy();
-    this.emitter?.destroy();
-    this.emitter = null;
-    this.subscriptionTick.unsubscribe();
+  async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void) {
+    const _afterDestroy = async () => {
+      this.emitter?.destroy();
+      this.emitter = null;
+      this.subscriptionTick.unsubscribe();
+      afterDestroy();
+    }
+    await super.onDestroy(parent, _afterDestroy);
   }
 }