canvasengine 2.0.1-beta.1 → 2.0.1

package/src/components/Graphic.ts

@@ -1,54 +1,179 @@
-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, ObservablePoint, 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";
+import { setObservablePoint } from "../engine/utils";
 
 interface GraphicsProps extends DisplayObjectProps {
-  draw?: (graphics: PixiGraphics) => void;
+  draw?: (graphics: PixiGraphics, width: number, height: number, anchor?: [number, 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>;
+
+  isCustomAnchor = true;
+  
+  /**
+   * 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);
+    this.setObjectFit('none');
+  }
+
+  /**
+   * 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);
+    if (this.destroyed || !this.parent) {
+      return;
+    }
+    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>;
+    const anchor = (isSignal(propObservables?.anchor) ? propObservables.anchor : signal(props.anchor || [0, 0])) as WritableSignal<[number, 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();
+        const a = anchor();
+        if (typeof w == 'string' || typeof h == 'string') {
+          return
+        }
+        if (this.destroyed || !this.parent) {
+          return
+        }
         this.clear();
-        props.draw?.(this);
+        props.draw?.(this, w, h, a);
+        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);
 
@@ -56,92 +181,154 @@ export function Graphics(props: GraphicsProps) {
   return createComponent("Graphics", props);
 }
 
+const graphicsAnchor = (anchor, width, height) => {
+  const observableAnchor = new ObservablePoint({ _onUpdate: () => {} }, 0, 0);
+  setObservablePoint(observableAnchor, anchor);
+  const ax = observableAnchor.x;
+  const ay = observableAnchor.y;
+
+  return { x: -ax * width, y: -ay * height };
+}
+
+const propValue = (value: any) => isSignal(value) ? value() : value;
+
 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, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
       if (borderRadius()) {
-        g.roundRect(0, 0, width(), height(), borderRadius());
+        g.roundRect(x, y, width, height, borderRadius());
       } else {
-        g.rect(0, 0, width(), height());
+        g.rect(x, y, width, height);
       }
-      if (border) {
-        g.stroke(border);
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
       }
-      g.fill(color());
+      g.fill(propValue(color));
     },
     ...props
   })
 }
 
-function drawShape(g: PixiGraphics, shape: 'circle' | 'ellipse', props: {
-  radius: Signal<number>;
-  color: Signal<string>;
-  border: Signal<number>;
-} | {
-  width: Signal<number>;
-  height: Signal<number>;
-  color: Signal<string>;
-  border: Signal<number>;
-}) {
-  const { color, border } = props;
-  if ('radius' in props) {
-    g.circle(0, 0, props.radius());
-  } else {
-    g.ellipse(0, 0, props.width() / 2, props.height() / 2);
-  }
-  if (border()) {
-    g.stroke(border());
-  }
-  g.fill(color());
-}
-
 export function Circle(props: CircleProps) {  
-  const { radius, color, border } = useProps(props, {
-    border: null
+  const { color, border, radius } = useProps(props, {
+    border: null,
+    radius: null
   })
   return Graphics({
-    draw: (g) => drawShape(g, 'circle', { radius, color, border }),
+    draw: (g, width, height, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
+      if (width == height || height == 0) {
+        g.circle(x, y, propValue(radius) || width);
+      } else {
+        g.ellipse(x, y, width, height);
+      }
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
+      }
+      g.fill(propValue(color));
+    },
     ...props
   })
 }
 
 export function Ellipse(props: EllipseProps) {
-  const { width, height, color, border } = useProps(props, {
+  const { color, border } = useProps(props, {
     border: null
   })
+
   return Graphics({
-    draw: (g) => drawShape(g, 'ellipse', { width, height, color, border }),
+    draw: (g, width, height, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, width, height);
+      g.ellipse(x + width / 2, y + height / 2, width / 2, height / 2);
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
+      }
+      g.fill(propValue(color));
+    },
     ...props
   })
 }
 
 export function Triangle(props: TriangleProps) {
-  const { width, height, color, border } = useProps(props, {
+  const { color, border } = useProps(props, {
     border: null,
     color: '#000'
   })
   return Graphics({
-    draw: (g) => {
-      g.moveTo(0, height());
-      g.lineTo(width() / 2, 0);
-      g.lineTo(width(), height());
-      g.lineTo(0, height());
-      g.fill(color());
-      if (border) {
-        g.stroke(border);
+    draw: (g, gWidth, gHeight, anchor) => {
+      const { x, y } = graphicsAnchor(anchor, gWidth, gHeight);
+      g.moveTo(x, y + gHeight);
+      g.lineTo(x + gWidth / 2, y);
+      g.lineTo(x + gWidth, y + gHeight);
+      g.lineTo(x, y + gHeight);
+      g.fill(propValue(color));
+      const borderValue = propValue(border);
+      if (borderValue) {
+        g.stroke(borderValue);
       }
     },
     ...props
   })
 }
 
+/**
+ * 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,269 @@
+/*
+ * Joystick
+ *
+ * Inspired by https://github.com/endel/pixi-virtual-joystick
+ */
+
+import * as PIXI from "pixi.js";
+import { Container, Graphics, Sprite, h, signal, isSignal, computed } from "../";
+import type { DisplayObjectProps } from "./types/DisplayObject";
+
+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 extends DisplayObjectProps {
+  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 innerVisualRadius = innerRadius * 2.5;
+  const movementRadius = outerRadius - innerVisualRadius;
+  const joystickSize = outerRadius * 2;
+  const centerPosition = { x: outerRadius, y: outerRadius };
+  const innerAlphaStandby = 0.5;
+
+  let dragging = false;
+  let power = 0;
+
+  const innerPositionX = signal(centerPosition.x);
+  const innerPositionY = signal(centerPosition.y);
+  const innerAlpha = signal(innerAlphaStandby);
+
+  function getPowerFromDistance(distance: number) {
+    return Math.min(1, distance / 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) {
+    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(centerPosition.x);
+    innerPositionY.set(centerPosition.y);
+    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;
+    }
+
+    const target = event.currentTarget || event.target;
+    let newPosition = event.getLocalPosition(target);
+
+    const sideX = newPosition.x - centerPosition.x;
+    const sideY = newPosition.y - centerPosition.y;
+    const distance = Math.sqrt(sideX * sideX + sideY * sideY);
+
+    if (distance == 0) {
+      return;
+    }
+
+    /**
+     * x:   -1 <-> 1
+     * y:   -1 <-> 1
+     *          Y
+     *          ^
+     *          |
+     *     180  |  90
+     *    ------------> X
+     *     270  |  360
+     *          |
+     *          |
+     */
+
+    const visualDistance = Math.min(distance, movementRadius);
+    const visualRatio = visualDistance / distance;
+    const visualX = sideX * visualRatio;
+    const visualY = sideY * visualRatio;
+    const directionPoint = new PIXI.Point(sideX, sideY);
+    let angle = -(Math.atan2(sideY, sideX) * 180) / Math.PI;
+    if (angle < 0) {
+      angle += 360;
+    }
+
+    innerPositionX.set(centerPosition.x + visualX);
+    innerPositionY.set(centerPosition.y + visualY);
+    power = getPowerFromDistance(distance);
+
+    const direction = getDirection(directionPoint);
+    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(centerPosition.x, centerPosition.y, outerRadius).fill(settings.outerColor);
+      },
+      positionType: "absolute",
+      alpha: 0.5,
+    });
+  } else {
+    outerElement = h(Sprite, {
+      image: settings.outer,
+      x: centerPosition.x,
+      y: centerPosition.y,
+      anchor: { x: 0.5, y: 0.5 },
+      scale: settings.outerScale,
+      positionType: "absolute",
+    });
+  }
+
+  const innerOptions: any = {
+    scale: settings.innerScale,
+    alpha: innerAlpha,
+    positionType: "absolute",
+  };
+
+  if (!settings.inner) {
+    innerElement = h(Graphics, {
+      draw: (g) => {
+        g.circle(innerVisualRadius, innerVisualRadius, innerVisualRadius).fill(settings.innerColor);
+      },
+      width: innerVisualRadius * 2,
+      height: innerVisualRadius * 2,
+      x: computed(() => innerPositionX() - innerVisualRadius),
+      y: computed(() => innerPositionY() - innerVisualRadius),
+      ...innerOptions,
+    });
+  } else {
+    innerElement = h(Sprite, {
+      image: settings.inner,
+      x: innerPositionX,
+      y: innerPositionY,
+      anchor: { x: 0.5, y: 0.5 },
+      ...innerOptions,
+    });
+  }
+
+  return h(
+    Container,
+    {
+      ...opts,
+      width: opts.width ?? joystickSize,
+      height: opts.height ?? joystickSize,
+      pointerdown: handleDragStart,
+      pointerup: handleDragEnd,
+      pointerupoutside: handleDragEnd,
+      pointermove: handleDragMove,
+    },
+    outerElement,
+    innerElement,
+  );
+}