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

package/package.json

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

package/src/components/DOMContainer.ts

@@ -0,0 +1,229 @@
+import { DOMContainer as PixiDOMContainer } from "pixi.js";
+import {
+  createComponent,
+  Element,
+  registerComponent,
+} from "../engine/reactive";
+import { ComponentInstance, DisplayObject } from "./DisplayObject";
+import { ComponentFunction } from "../engine/signal";
+import { DisplayObjectProps } from "./types/DisplayObject";
+
+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;
+}
+
+/**
+ * DOMContainer class for managing DOM elements within the canvas engine
+ *
+ * This class extends the DisplayObject functionality to handle DOM elements using
+ * PixiJS's native DOMContainer. It provides a bridge between the canvas rendering
+ * system and traditional DOM manipulation with proper transform hierarchy and visibility.
+ *
+ * The DOMContainer is especially useful for rendering standard DOM elements that handle
+ * user input, such as `<input>` or `<textarea>`. This is often simpler and more flexible
+ * than trying to implement text input directly in PixiJS.
+ *
+ * @example
+ * ```typescript
+ * // Basic usage with input element
+ * const element = document.createElement('input');
+ * element.type = 'text';
+ * element.placeholder = 'Enter text...';
+ *
+ * const domContainer = new DOMContainer({
+ *   element,
+ *   x: 100,
+ *   y: 50,
+ *   anchor: { x: 0.5, y: 0.5 }
+ * });
+ *
+ * // Using different class and style formats
+ * const containerWithClasses = new DOMContainer({
+ *   element: 'div',
+ *   attrs: {
+ *     // String format: space-separated classes
+ *     class: 'container primary-theme',
+ *
+ *     // Array format: array of class names
+ *     // class: ['container', 'primary-theme'],
+ *
+ *     // Object format: conditional classes
+ *     // class: {
+ *     //   'container': true,
+ *     //   'primary-theme': true,
+ *     //   'disabled': false
+ *     // }
+ *
+ *     // String format: CSS style string
+ *     style: 'background-color: red; padding: 10px;',
+ *
+ *     // Object format: style properties
+ *     // style: {
+ *     //   backgroundColor: 'red',
+ *     //   padding: '10px',
+ *     //   fontSize: 16
+ *     // }
+ *   }
+ * });
+ * ```
+ */
+const EVENTS = [
+  "click",
+  "mouseover",
+  "mouseout",
+  "mouseenter",
+  "mouseleave",
+  "mousemove",
+  "mouseup",
+  "mousedown",
+  "touchstart",
+  "touchend",
+  "touchmove",
+  "touchcancel",
+  "wheel",
+  "scroll",
+  "resize",
+  "focus",
+  "blur",
+  "change",
+  "input",
+  "submit",
+  "reset",
+  "keydown",
+  "keyup",
+  "keypress",
+  "contextmenu",
+  "drag",
+  "dragend",
+  "dragenter",
+  "dragleave",
+  "dragover",
+  "drop",
+  "dragstart",
+  "select",
+  "selectstart",
+  "selectend",
+  "selectall",
+  "selectnone",
+];
+
+export class CanvasDOMContainer extends DisplayObject(PixiDOMContainer) {
+  disableLayout = true;
+  private eventListeners: Map<string, (e: Event) => void> = new Map();
+
+  onInit(props: DOMContainerProps) {
+    super.onInit(props);
+    if (props.element === undefined) {
+      throw new Error("DOMContainer: element is required");
+    }
+    if (typeof props.element === "string") {
+      this.element = document.createElement(props.element);
+    } else {
+      this.element = props.element.value;
+    }
+    for (const event of EVENTS) {
+      if (props.attrs?.[event]) {
+        const eventHandler = (e: Event) => {
+          props.attrs[event]?.(e);
+        };
+        this.eventListeners.set(event, eventHandler);
+        this.element.addEventListener(event, eventHandler, false);
+      }
+    }
+  }
+
+  onUpdate(props: DOMContainerProps) {
+    super.onUpdate(props);
+
+    for (const [key, value] of Object.entries(props.attrs || {})) {
+      if (key === "class") {
+        const classList = value.items || value.value || value;
+
+        // Clear existing classes first
+        this.element.className = "";
+
+        if (typeof classList === "string") {
+          // String: space-separated class names
+          this.element.className = classList;
+        } else if (Array.isArray(classList)) {
+          // Array: array of class names
+          this.element.classList.add(...classList);
+        } else if (typeof classList === "object" && classList !== null) {
+          // Object: { className: boolean }
+          for (const [className, shouldAdd] of Object.entries(classList)) {
+            if (shouldAdd) {
+              this.element.classList.add(className);
+            }
+          }
+        }
+      } else if (key === "style") {
+        const styleValue = value.items || value.value || value;
+
+        if (typeof styleValue === "string") {
+          // String: CSS style string
+          this.element.setAttribute("style", styleValue);
+        } else if (typeof styleValue === "object" && styleValue !== null) {
+          // Object: { property: value }
+          for (const [styleProp, styleVal] of Object.entries(styleValue)) {
+            if (styleVal !== null && styleVal !== undefined) {
+              (this.element.style as any)[styleProp] = styleVal;
+            }
+          }
+        }
+      } else if (!EVENTS.includes(key)) {
+        this.element.setAttribute(key, value);
+      }
+    }
+    if (props.textContent) {
+      this.element.textContent = props.textContent;
+    }
+
+    if (props.sortableChildren !== undefined) {
+      this.sortableChildren = props.sortableChildren;
+    }
+  }
+
+  async onDestroy(
+    parent: Element<ComponentInstance>,
+    afterDestroy: () => void
+  ): Promise<void> {
+    // Remove all event listeners from the DOM element
+    if (this.element) {
+      for (const [event, handler] of this.eventListeners) {
+        this.element.removeEventListener(event, handler, false);
+      }
+      this.eventListeners.clear();
+    }
+
+    const _afterDestroyCallback = async () => {
+      afterDestroy();
+    };
+    await super.onDestroy(parent, _afterDestroyCallback);
+  }
+}
+
+export interface CanvasDOMContainer extends DisplayObjectProps {}
+
+registerComponent("DOMContainer", CanvasDOMContainer);
+
+export const DOMContainer: ComponentFunction<DOMContainerProps> = (props) => {
+  return createComponent("DOMContainer", props);
+};

package/src/components/DisplayObject.ts

@@ -9,9 +9,10 @@ import type {
   TransformOrigin,
 } from "./types/DisplayObject";
 import { signal } from "@signe/reactive";
-import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
+import * as FILTERS from "pixi-filters";
 import { isPercent } from "../utils/functions";
+import { BehaviorSubject, filter, Subject } from "rxjs";
 
 export interface ComponentInstance extends PixiMixins.ContainerOptions {
   id?: string;
@@ -113,12 +114,19 @@ export function DisplayObject(extendClass) {
     layout = null;
     onBeforeDestroy: OnHook | null = null;
     onAfterMount: OnHook | null = null;
+    subjectInit = new BehaviorSubject(null);
+    disableLayout: boolean = false;
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
     }
 
-    onInit(props) {
+    get parentIsFlex() {
+      if (this.disableLayout) return false;
+      return this.parent?.isFlex;
+    }
+
+    onInit(props: Props) {
       this._id = props.id;
       for (let event of EVENTS) {
         if (props[event] && !this.overrideProps.includes(event)) {
@@ -146,14 +154,20 @@ export function DisplayObject(extendClass) {
         this.layout = {};
         this.isFlex = true;
       }
+
+      this.subjectInit.next(this);
     }
 
     async onMount({ parent, props }: Element<DisplayObject>, index?: number) {
       this.#canvasContext = props.context;
       if (parent) {
         const instance = parent.componentInstance as DisplayObject;
-        if (instance.isFlex && !this.layout) {
-          this.layout = {};
+        if (instance.isFlex && !this.layout && !this.disableLayout) {
+          try {
+            this.layout = {};
+          } catch (error) {
+            console.warn('Failed to set layout:', error);
+          }
         }
         if (index === undefined) {
           instance.addChild(this);
@@ -168,7 +182,7 @@ export function DisplayObject(extendClass) {
       }
     }
 
-    onUpdate(props) {
+    onUpdate(props: Props) {
       this.fullProps = {
         ...this.fullProps,
         ...props,
@@ -229,23 +243,24 @@ export function DisplayObject(extendClass) {
       if (props.filters) this.filters = props.filters;
       if (props.maskOf) {
         if (isElement(props.maskOf)) {
-          props.maskOf.componentInstance.mask = this;
+          props.maskOf.componentInstance.mask = this as any;
         }
       }
       if (props.blendMode) this.blendMode = props.blendMode;
       if (props.filterArea) this.filterArea = props.filterArea;
       const currentFilters = this.filters || [];
 
-      if (props.shadow) {
-        let dropShadowFilter = currentFilters.find(
-          (filter) => filter instanceof DropShadowFilter
-        );
-        if (!dropShadowFilter) {
-          dropShadowFilter = new DropShadowFilter();
-          currentFilters.push(dropShadowFilter);
-        }
-        Object.assign(dropShadowFilter, props.shadow);
-      }
+      // TODO: Fix DropShadowFilter import issue
+      // if (props.shadow) {
+      //   let dropShadowFilter = currentFilters.find(
+      //     (filter) => filter instanceof FILTERS.DropShadowFilter
+      //   );
+      //   if (!dropShadowFilter) {
+      //     dropShadowFilter = new FILTERS.DropShadowFilter();
+      //     currentFilters.push(dropShadowFilter);
+      //   }
+      //   Object.assign(dropShadowFilter, props.shadow);
+      // }
 
       if (props.blur) {
         let blurFilter = currentFilters.find(
@@ -272,7 +287,7 @@ export function DisplayObject(extendClass) {
         await this.onBeforeDestroy();
       }
       super.destroy();
-      if (this.onAfterDestroy) this.onAfterDestroy()
+      if (afterDestroy) afterDestroy();
     }
 
     setFlexDirection(direction: FlexDirection) {
@@ -328,7 +343,7 @@ export function DisplayObject(extendClass) {
 
     setX(x: number) {
       x = x + this.getWidth() * this._anchorPoints.x;
-      if (!this.parent.isFlex) {
+      if (!this.parentIsFlex) {
         this.x = x;
       } else {
         this.x = x;
@@ -338,7 +353,7 @@ export function DisplayObject(extendClass) {
 
     setY(y: number) {
       y = y + this.getHeight() * this._anchorPoints.y;
-      if (!this.parent.isFlex) {
+      if (!this.parentIsFlex) {
         this.y = y;
       } else {
         this.y = y;
@@ -416,7 +431,7 @@ export function DisplayObject(extendClass) {
 
     setWidth(width: number) {
       this.displayWidth.set(width);
-      if (!this.parent?.isFlex) {
+      if (!this.parentIsFlex) {
         this.width = width;
       } else {
         this.layout = { width };
@@ -425,7 +440,7 @@ export function DisplayObject(extendClass) {
 
     setHeight(height: number) {
       this.displayHeight.set(height);
-      if (!this.parent?.isFlex) {
+      if (!this.parentIsFlex) {
         this.height = height;
       } else {
         this.layout = { height };

package/src/components/Graphic.ts

@@ -1,13 +1,14 @@
-import { Effect, effect, Signal } from "@signe/reactive";
-import { Graphics as PixiGraphics } from "pixi.js";
+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 {
@@ -29,19 +30,135 @@ interface TriangleProps extends DisplayObjectProps {
 }
 
 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) {
   clearEffect: Effect;
-  onInit(props) {
-    super.onInit(props);
+  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) {
       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);
+      }
+    }
   }
 
   /**
@@ -70,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);
@@ -95,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>;
 }) {
@@ -127,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
   })
 }
@@ -138,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);
@@ -152,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
   })
 }