canvasengine 2.0.0-beta.4 → 2.0.0-beta.40

package/src/components/Graphic.ts

@@ -1,54 +1,167 @@
-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
+        }
         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 and value has changed
+      if (isWidthPercentage && isSignal(width) && width() !== layoutBox.width) {
+        width.set(layoutBox.width);
+      }
+      
+      // Update height if it's a percentage and value has changed
+      if (isHeightPercentage && isSignal(height) && height() !== layoutBox.height) {
+        height.set(layoutBox.height);
+      }
+    });
   }
-}
 
-interface CanvasGraphics extends PixiGraphics {}
+  /**
+   * 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 and value is different
+    if (props.width !== undefined && this._width && this._width() !== props.width) {
+      this._width.set(props.width);
+    }
+    
+    // Update height signal if height prop changed and value is different
+    if (props.height !== undefined && this._height && this._height() !== props.height) {
+      this._height.set(props.height);
+    }
+  }
+
+  /**
+   * 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 +170,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);
@@ -114,7 +228,13 @@ export function Ellipse(props: EllipseProps) {
     border: null
   })
   return Graphics({
-    draw: (g) => drawShape(g, 'ellipse', { width, height, color, border }),
+    draw: (g, gWidth, gHeight) => {
+      g.ellipse(0, 0, gWidth / 2, gHeight / 2);
+      if (border()) {
+        g.stroke(border());
+      }
+      g.fill(color());
+    },
     ...props
   })
 }
@@ -125,11 +245,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 +259,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/Joystick.ts

@@ -0,0 +1,361 @@
+/*
+ * Joystick
+ *
+ * Inspired by https://github.com/endel/pixi-virtual-joystick
+ */
+
+import * as PIXI from "pixi.js";
+import { Container, Graphics, Sprite, h, signal, isSignal } from "../";
+
+export interface JoystickChangeEvent {
+  angle: number;
+  direction: Direction;
+  power: number;
+}
+
+export enum Direction {
+  LEFT = "left",
+  TOP = "top",
+  BOTTOM = "bottom",
+  RIGHT = "right",
+  TOP_LEFT = "top_left",
+  TOP_RIGHT = "top_right",
+  BOTTOM_LEFT = "bottom_left",
+  BOTTOM_RIGHT = "bottom_right",
+}
+
+export interface JoystickSettings {
+  outer?: string;
+  inner?: string;
+  outerScale?: { x: number; y: number };
+  innerScale?: { x: number; y: number };
+  innerColor?: string;
+  outerColor?: string;
+  onChange?: (data: JoystickChangeEvent) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+  /** Controls instance to automatically apply joystick events to (e.g., JoystickControls or ControlsDirective) */
+  controls?: any;
+}
+
+export function Joystick(opts: JoystickSettings = {}) {
+  const settings = Object.assign(
+    {
+      outerScale: { x: 1, y: 1 },
+      innerScale: { x: 1, y: 1 },
+      innerColor: "black",
+      outerColor: "black",
+    },
+    opts
+  );
+
+  // Unwrap controls if it's a signal
+  const getControls = () => {
+    if (isSignal(settings.controls)) {
+      return settings.controls();
+    }
+    return settings.controls;
+  };
+
+  let outerRadius = 70;
+  let innerRadius = 10;
+  const innerAlphaStandby = 0.5;
+
+  let dragging = false;
+  let startPosition: PIXI.PointData | null = null;
+  let power = 0;
+
+  const innerPositionX = signal(0);
+  const innerPositionY = signal(0);
+  const innerAlpha = signal(innerAlphaStandby);
+
+  function getPower(centerPoint: PIXI.Point) {
+    const a = centerPoint.x - 0;
+    const b = centerPoint.y - 0;
+    return Math.min(1, Math.sqrt(a * a + b * b) / outerRadius);
+  }
+
+  function getDirection(center: PIXI.Point) {
+    let rad = Math.atan2(center.y, center.x); // [-PI, PI]
+    if ((rad >= -Math.PI / 8 && rad < 0) || (rad >= 0 && rad < Math.PI / 8)) {
+      return Direction.RIGHT;
+    } else if (rad >= Math.PI / 8 && rad < (3 * Math.PI) / 8) {
+      return Direction.BOTTOM_RIGHT;
+    } else if (rad >= (3 * Math.PI) / 8 && rad < (5 * Math.PI) / 8) {
+      return Direction.BOTTOM;
+    } else if (rad >= (5 * Math.PI) / 8 && rad < (7 * Math.PI) / 8) {
+      return Direction.BOTTOM_LEFT;
+    } else if (
+      (rad >= (7 * Math.PI) / 8 && rad < Math.PI) ||
+      (rad >= -Math.PI && rad < (-7 * Math.PI) / 8)
+    ) {
+      return Direction.LEFT;
+    } else if (rad >= (-7 * Math.PI) / 8 && rad < (-5 * Math.PI) / 8) {
+      return Direction.TOP_LEFT;
+    } else if (rad >= (-5 * Math.PI) / 8 && rad < (-3 * Math.PI) / 8) {
+      return Direction.TOP;
+    } else {
+      return Direction.TOP_RIGHT;
+    }
+  }
+
+  function handleDragStart(event: any) {
+    startPosition = event.getLocalPosition(this);
+    dragging = true;
+    innerAlpha.set(1);
+    settings.onStart?.();
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickStart) {
+        controls.handleJoystickStart();
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickStart) {
+        controls.joystick.handleJoystickStart();
+      }
+    }
+  }
+
+  function handleDragEnd() {
+    if (!dragging) return;
+    innerPositionX.set(0);
+    innerPositionY.set(0);
+    dragging = false;
+    innerAlpha.set(innerAlphaStandby);
+    settings.onEnd?.();
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickEnd) {
+        controls.handleJoystickEnd();
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickEnd) {
+        controls.joystick.handleJoystickEnd();
+      }
+    }
+  }
+
+  function handleDragMove(event: any) {
+    if (dragging == false) {
+      return;
+    }
+
+    let newPosition = event.getLocalPosition(this);
+
+    let sideX = newPosition.x - (startPosition?.x ?? 0);
+    let sideY = newPosition.y - (startPosition?.y ?? 0);
+
+    let centerPoint = new PIXI.Point(0, 0);
+    let angle = 0;
+
+    if (sideX == 0 && sideY == 0) {
+      return;
+    }
+
+    let calRadius = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      calRadius = outerRadius;
+    } else {
+      calRadius = outerRadius - innerRadius;
+    }
+
+    /**
+     * x:   -1 <-> 1
+     * y:   -1 <-> 1
+     *          Y
+     *          ^
+     *          |
+     *     180  |  90
+     *    ------------> X
+     *     270  |  360
+     *          |
+     *          |
+     */
+
+    let direction = Direction.LEFT;
+
+    if (sideX == 0) {
+      if (sideY > 0) {
+        centerPoint.set(0, sideY > outerRadius ? outerRadius : sideY);
+        angle = 270;
+        direction = Direction.BOTTOM;
+      } else {
+        centerPoint.set(
+          0,
+          -(Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY))
+        );
+        angle = 90;
+        direction = Direction.TOP;
+      }
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      const changeEvent = { angle, direction, power };
+      settings.onChange?.(changeEvent);
+      
+      // Notify controls if provided
+      const controls = getControls();
+      if (controls) {
+        // Check if it's JoystickControls instance
+        if (controls.handleJoystickChange) {
+          controls.handleJoystickChange(changeEvent);
+        }
+        // Check if it's ControlsDirective with joystick getter
+        else if (controls.joystick && controls.joystick.handleJoystickChange) {
+          controls.joystick.handleJoystickChange(changeEvent);
+        }
+      }
+      return;
+    }
+
+    if (sideY == 0) {
+      if (sideX > 0) {
+        centerPoint.set(
+          Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX),
+          0
+        );
+        angle = 0;
+        direction = Direction.RIGHT;
+      } else {
+        centerPoint.set(
+          -(Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX)),
+          0
+        );
+        angle = 180;
+        direction = Direction.LEFT;
+      }
+
+      innerPositionX.set(centerPoint.x);
+      innerPositionY.set(centerPoint.y);
+      power = getPower(centerPoint);
+      const changeEvent = { angle, direction, power };
+      settings.onChange?.(changeEvent);
+      
+      // Notify controls if provided
+      const controls = getControls();
+      if (controls) {
+        // Check if it's JoystickControls instance
+        if (controls.handleJoystickChange) {
+          controls.handleJoystickChange(changeEvent);
+        }
+        // Check if it's ControlsDirective with joystick getter
+        else if (controls.joystick && controls.joystick.handleJoystickChange) {
+          controls.joystick.handleJoystickChange(changeEvent);
+        }
+      }
+      return;
+    }
+
+    let tanVal = Math.abs(sideY / sideX);
+    let radian = Math.atan(tanVal);
+    angle = (radian * 180) / Math.PI;
+
+    let centerX = 0;
+    let centerY = 0;
+
+    if (sideX * sideX + sideY * sideY >= outerRadius * outerRadius) {
+      centerX = outerRadius * Math.cos(radian);
+      centerY = outerRadius * Math.sin(radian);
+    } else {
+      centerX = Math.abs(sideX) > outerRadius ? outerRadius : Math.abs(sideX);
+      centerY = Math.abs(sideY) > outerRadius ? outerRadius : Math.abs(sideY);
+    }
+
+    if (sideY < 0) {
+      centerY = -Math.abs(centerY);
+    }
+    if (sideX < 0) {
+      centerX = -Math.abs(centerX);
+    }
+
+    if (sideX > 0 && sideY < 0) {
+      // < 90
+    } else if (sideX < 0 && sideY < 0) {
+      // 90 ~ 180
+      angle = 180 - angle;
+    } else if (sideX < 0 && sideY > 0) {
+      // 180 ~ 270
+      angle = angle + 180;
+    } else if (sideX > 0 && sideY > 0) {
+      // 270 ~ 369
+      angle = 360 - angle;
+    }
+    centerPoint.set(centerX, centerY);
+    power = getPower(centerPoint);
+
+    direction = getDirection(centerPoint);
+    innerPositionX.set(centerPoint.x);
+    innerPositionY.set(centerPoint.y);
+    const changeEvent = { angle, direction, power };
+    settings.onChange?.(changeEvent);
+    
+    // Notify controls if provided
+    const controls = getControls();
+    if (controls) {
+      // Check if it's JoystickControls instance
+      if (controls.handleJoystickChange) {
+        controls.handleJoystickChange(changeEvent);
+      }
+      // Check if it's ControlsDirective with joystick getter
+      else if (controls.joystick && controls.joystick.handleJoystickChange) {
+        controls.joystick.handleJoystickChange(changeEvent);
+      }
+    }
+  }
+
+  let innerElement;
+  let outerElement;
+
+  if (!settings.outer) {
+    outerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, outerRadius).fill(settings.outerColor);
+      },
+      alpha: 0.5,
+    });
+  } else {
+    outerElement = h(Sprite, {
+      image: settings.outer,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings.outerScale,
+    });
+  }
+
+  const innerOptions: any = {
+    scale: settings.innerScale,
+    x: innerPositionX,
+    y: innerPositionY,
+    alpha: innerAlpha,
+  };
+
+  if (!settings.inner) {
+    innerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(0, 0, innerRadius * 2.5).fill(settings.innerColor);
+      },
+      ...innerOptions,
+    });
+  } else {
+    innerElement = settings.inner
+  }
+
+  return h(
+    Container,
+    {
+      ...opts,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove,
+    },
+    outerElement,
+    innerElement,
+  );
+}