canvasengine 2.0.0-beta.6 → 2.0.0-beta.61

package/src/components/types/DisplayObject.ts

@@ -1,11 +1,22 @@
 import * as PIXI from "pixi.js";
 import { SignalOrPrimitive } from ".";
+import { DragProps } from "../../directives/Drag";
+import { ViewportFollowProps } from "../../directives/ViewportFollow";
+import { ShakeProps } from "../../directives/Shake";
+import { FlashProps } from "../../directives/Flash";
+import { FogVisibilityProps } from "../../directives/FogVisibility";
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 export type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 export type Size = number | `${number}%`
 export type EdgeSize = SignalOrPrimitive<Size | [Size, Size] | [Size, Size, Size, Size]>
+export type ObjectFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export type ObjectPosition = string;
+export type TransformOrigin = string;
+export type PositionType = 'relative' | 'absolute' | 'static';
+
+export type ObservablePointSignal = [number, number] | SignalOrPrimitive<[number, number]> | { x: number, y: number } | SignalOrPrimitive<{ x: number, y: number }>;
 
 export interface DisplayObjectProps {
     attach?: any;
@@ -14,6 +25,24 @@ export interface DisplayObjectProps {
     y?: SignalOrPrimitive<number>;
     width?: SignalOrPrimitive<Size>;
     height?: SignalOrPrimitive<Size>;
+    minWidth?: SignalOrPrimitive<Size>;
+    minHeight?: SignalOrPrimitive<Size>;
+    maxWidth?: SignalOrPrimitive<Size>;
+    maxHeight?: SignalOrPrimitive<Size>;
+    aspectRatio?: SignalOrPrimitive<number>;
+    flexGrow?: SignalOrPrimitive<number>;
+    flexShrink?: SignalOrPrimitive<number>;
+    flexBasis?: SignalOrPrimitive<Size>;
+    rowGap?: SignalOrPrimitive<number>;
+    columnGap?: SignalOrPrimitive<number>;
+    positionType?: PositionType;
+    top?: SignalOrPrimitive<Size>;
+    right?: SignalOrPrimitive<Size>;
+    bottom?: SignalOrPrimitive<Size>;
+    left?: SignalOrPrimitive<Size>;
+    objectFit?: ObjectFit;
+    objectPosition?: ObjectPosition;
+    transformOrigin?: TransformOrigin;
     children?: any[];
     flexDirection?: FlexDirection;
     justifyContent?: JustifyContent;
@@ -22,9 +51,9 @@ export interface DisplayObjectProps {
     padding?: EdgeSize;
     border?: EdgeSize;
     absolute?: SignalOrPrimitive<boolean>;
-    scale?: SignalOrPrimitive<{ x: number, y: number } | number>;
-    anchor?: SignalOrPrimitive<{ x: number, y: number }>;
-    skew?: SignalOrPrimitive<{ x: number, y: number }>;
+    scale?: ObservablePointSignal | number;
+    anchor?: ObservablePointSignal;
+    skew?: ObservablePointSignal;
     tint?: SignalOrPrimitive<number>;
     rotation?: SignalOrPrimitive<number>;
     angle?: SignalOrPrimitive<number>;
@@ -32,11 +61,29 @@ export interface DisplayObjectProps {
     roundPixels?: SignalOrPrimitive<boolean>;
     cursor?: SignalOrPrimitive<string>;
     visible?: SignalOrPrimitive<boolean>;
-    pivot?: SignalOrPrimitive<{ x: number, y: number }>;
+    pivot?: ObservablePointSignal;
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
+    /**
+     * Optional metadata used by presets (for example `SpriteShadows`)
+     * to mark this display object as a shadow caster.
+     */
+    shadowCaster?: any;
+    /**
+     * Optional metadata used by presets (for example `Footprints`)
+     * to mark this display object as a footprint caster.
+     */
+    footprintCaster?: any;
+
+    // Directives
+    drag?: DragProps;
+    viewportFollow?: ViewportFollowProps;
+    shake?: ShakeProps;
+    flash?: FlashProps;
+    fogVisibility?: FogVisibilityProps;
 
+    // Events
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;
@@ -67,4 +114,5 @@ export interface DisplayObjectProps {
     touchmove?: PIXI.FederatedEventHandler;
     touchstart?: PIXI.FederatedEventHandler;
     wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
-}
+    tabindex?: SignalOrPrimitive<number>;
+}

package/src/components/types/Spritesheet.ts

@@ -208,124 +208,6 @@ export interface TexturesOptions extends TextureOptions, TransformOptions {
 }
 
 export interface SpritesheetOptions extends TransformOptions, TextureOptions {
-    /** 
-    * Object containing all animations. 
-    * The key to the object is the name of the animation. The value is a two-dimensional array
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *         animations: [
-    *              [ { time: 0, frameX: 0, frameY: 0 } ]
-    *         ]
-    *      }
-    * }
-    * ```
-    * 
-    * The first array represents an animation group. You can put several of them together to create an animation cluster. For example, several explosions with the same spritesheet
-    * The second array represents the animation itself which will animate over time. The object indicates, over a period of time (in frame), which part of the spritesheet will be taken (`frameX`, `frameY`)
-    * 
-    * Here are the properties:
-    * 
-    * * `time`: Time in frame
-    * * `frameX`: Retrieve a frame from the spritesheet on the X-axis
-    * * `frameY`: Retrieve a frame from the spritesheet on the Y-axis
-    * * `opacity`
-    * * `pivot`
-    * * `anchor`
-    * * `rotation`
-    * * `angle`
-    * * `scale`
-    * * `skew`
-    * * `x`
-    * * `y`
-    * * `visible`
-    * * `sound`: The sound that will be played during the frame
-    * 
-    * ---
-    * **Extract Animation of Spritesheet**
-    * 
-    * Sometimes the animation is part of the image
-    * 
-    * ```ts
-    * textures: {
-    *      myanim: {
-    *          rectWidth: 64,
-    *          rectHeight: 64,
-    *          framesWidth: 10,
-    *          framesHeight: 2,
-    *          offset: {x: 0, y: 230},
-    *          sound: 'my-sound-id', // You can put a sound just for the animation
-    *          animations: [
-    *               [ { time: 0, frameX: 0, frameY: 0 } ]
-    *          ]
-    *      }
-    * }
-    * ```
-    * 
-    * Above, we can specify which part we want to recover
-    * 
-    * 1. We go to the position {0, 230} of the image (`offset`)
-    * 2. We recover cells of 64px (`rectWidth` and `rectHeight`)
-    * 3. And we get 20 cells (10 on the width, 2 on the height) (`frameX` and `frameY`)
-    * 
-    * --- 
-    * 
-    * **Advanced**
-    * 
-    * You can create an animation that will be linked to a data. For example, different animation according to a direction of the character.
-    * 
-    * Full example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: direction => [[ {time: 0, frameX: 3, frameY: direction == Direction.Up ? 0 : 1 } ]]
-    *          }
-    *      })
-    * })
-    * export class Chest  { }
-    * ```
-    * 
-    * > It is important to know that `Animation.Stand` animation is called if it exists. it only works in the case of an event that doesn't move. The direction is then sent
-    * 
-    * As you can see, the property contains a function that returns the array for the animation. Here, it is the direction but the parameters depend on the call of the animation. Example: 
-    * 
-    * ```ts
-    * import { Spritesheet, Animation, Direction, RpgSprite, ISpriteCharacter } from '@rpgjs/client'
-    * 
-    * @Spritesheet({
-    *      id: 'chest',
-    *      image: require('./assets/chest.png'),
-    *      width: 124,
-    *      height: 61,
-    *      framesHeight: 2,
-    *      framesWidth: 4,
-    *      textures: {
-    *          [Animation.Stand]: {
-    *              animations: str => [[ {time: 0, frameX: 3, frameY: str == 'hello' ? 0 : 1 } ]]
-    *          }
-    *      }
-    * })
-    * export class Chest implements ISpriteCharacter { 
-    *      onCharacterStand(sprite: RpgSprite) {
-    *         sprite.animation.play(Animation.Stand, ['hello'])
-    *      }
-    * }
-    * ```
-    * 
-    * @prop { { [animName: string]: { animations: Array<Array<FrameOptions>> | Function, ...other } } } [textures]
-    * @memberof Spritesheet
-    * */
     textures?: {
         [animationName: string]: Partial<TexturesOptions> & Pick<TexturesOptions, 'animations'>
     }

package/src/directives/Controls.ts

@@ -0,0 +1,254 @@
+import { Directive, registerDirective } from "../engine/directive";
+import { Element, isElementFrozen } from "../engine/reactive";
+import { ControlsBase, Controls } from "./ControlsBase";
+import { KeyboardControls } from "./KeyboardControls";
+import { GamepadControls, GamepadConfig } from "./GamepadControls";
+import { JoystickControls, JoystickConfig } from "./JoystickControls";
+import { Signal, isSignal } from "@signe/reactive";
+import { Subscription } from "rxjs";
+
+/**
+ * Controls directive that coordinates keyboard, gamepad, and joystick input systems
+ * 
+ * This directive automatically activates keyboard, gamepad, and joystick controls when available.
+ * The gamepad is automatically enabled if joypad.js is detected in the environment.
+ * 
+ * All systems share the same control configuration and can work simultaneously.
+ * 
+ * @example
+ * ```html
+ * <Sprite 
+ *   image="path/to/image.png" 
+ *   controls={controlsConfig}
+ *   x={x}
+ *   y={y}
+ * />
+ * ```
+ */
+export class ControlsDirective extends Directive {
+    private keyboardControls: KeyboardControls | null = null;
+    private gamepadControls: GamepadControls | null = null;
+    private joystickControls: JoystickControls | null = null;
+    private freezeSubscription: Subscription | null = null;
+    private element: Element | null = null;
+
+    /**
+     * Initialize the controls directive
+     * Sets up keyboard, gamepad, and joystick controls if available
+     */
+    onInit(element: Element<any>) {
+        this.element = element;
+        const value = element.props.controls?.value ?? element.props.controls;
+        if (!value) return;
+
+        // Initialize keyboard controls (always available)
+        this.keyboardControls = new KeyboardControls();
+        this.keyboardControls.setInputs(value as Controls);
+        this.keyboardControls.start();
+
+        // Initialize gamepad controls if gamepad config is present
+        // GamepadControls will handle joypad.js availability internally
+        const gamepadConfig = (value as Controls & { gamepad?: GamepadConfig }).gamepad;
+        if (gamepadConfig !== undefined && gamepadConfig.enabled !== false) {
+            this.gamepadControls = new GamepadControls();
+            this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+            this.gamepadControls.start();
+        }
+
+        // Initialize joystick controls if joystick config is present
+        const joystickConfig = (value as Controls & { joystick?: JoystickConfig }).joystick;
+        if (joystickConfig !== undefined && joystickConfig.enabled !== false) {
+            this.joystickControls = new JoystickControls();
+            this.joystickControls.setInputs(value as Controls & { joystick?: JoystickConfig });
+            this.joystickControls.start();
+        }
+
+        // Check initial freeze state
+        if (isElementFrozen(element)) {
+            this.stopInputs();
+        }
+
+        // Subscribe to freeze prop if it's a signal
+        const freezeProp = element.propObservables?.freeze ?? element.props?.freeze;
+        if (isSignal(freezeProp)) {
+            this.freezeSubscription = ((freezeProp as Signal<boolean>).observable as any).subscribe((isFrozen) => {
+                if (isFrozen) {
+                    this.stopInputs();
+                } else {
+                    this.listenInputs();
+                }
+            });
+        }
+    }
+
+    /**
+     * Mount hook (no specific action needed)
+     */
+    onMount(element: Element<any>) { }
+
+    /**
+     * Update controls configuration
+     * Updates both keyboard and gamepad controls
+     */
+    onUpdate(props: any, element: Element<any>) {
+        const value = props.controls?.value ?? props.controls;
+        if (value) {
+            if (this.keyboardControls) {
+                this.keyboardControls.setInputs(value as Controls);
+            }
+
+            if (this.gamepadControls) {
+                this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+            }
+        }
+
+        // Handle freeze prop update
+        if (props.freeze !== undefined && this.element) {
+            if (isElementFrozen(this.element)) {
+                this.stopInputs();
+            } else {
+                this.listenInputs();
+            }
+        }
+    }
+
+    /**
+     * Cleanup and destroy all control systems
+     */
+    onDestroy(element: Element<any>) {
+        if (this.freezeSubscription) {
+            this.freezeSubscription.unsubscribe();
+            this.freezeSubscription = null;
+        }
+
+        if (this.keyboardControls) {
+            this.keyboardControls.destroy();
+            this.keyboardControls = null;
+        }
+
+        if (this.gamepadControls) {
+            this.gamepadControls.destroy();
+            this.gamepadControls = null;
+        }
+
+        if (this.joystickControls) {
+            this.joystickControls.destroy();
+            this.joystickControls = null;
+        }
+
+        this.element = null;
+    }
+
+    /**
+     * Get a control by input name
+     * Delegates to keyboard controls (primary system)
+     * 
+     * @param inputName - Name of the input/key
+     * @returns BoundKey if found, undefined otherwise
+     */
+    getControl(inputName: string) {
+        return this.keyboardControls?.getControl(inputName);
+    }
+
+    /**
+     * Get all bound controls
+     * Delegates to keyboard controls (primary system)
+     * 
+     * @returns Object mapping input names to BoundKey objects
+     */
+    getControls() {
+        return this.keyboardControls?.getControls() || {};
+    }
+
+    /**
+     * Apply a control action programmatically
+     * Applies to both keyboard and gamepad if available
+     * 
+     * @param controlName - Name of the control
+     * @param isDown - Whether the control is pressed (true) or released (false)
+     * @param payload - Optional payload to pass to keyDown/keyUp callbacks (e.g., { power: 0.8 })
+     * @returns Promise that resolves when the action is complete
+     */
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
+        if (this.keyboardControls) {
+            await this.keyboardControls.applyControl(controlName, isDown);
+        }
+        if (this.gamepadControls) {
+            await this.gamepadControls.applyControl(controlName, isDown, payload);
+        }
+        if (this.joystickControls) {
+            await this.joystickControls.applyControl(controlName, isDown, payload);
+        }
+    }
+
+    /**
+     * Stop listening to inputs
+     * Stops keyboard, gamepad, and joystick input processing
+     */
+    stopInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.stopInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.stopInputs();
+        }
+        if (this.joystickControls) {
+            this.joystickControls.stopInputs();
+        }
+    }
+
+    /**
+     * Resume listening to inputs
+     * Resumes keyboard, gamepad, and joystick input processing
+     */
+    listenInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.listenInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.listenInputs();
+        }
+        if (this.joystickControls) {
+            this.joystickControls.listenInputs();
+        }
+    }
+
+    /**
+     * Get the current controls configuration
+     * Returns keyboard controls options (both systems share the same config)
+     * 
+     * @returns The controls options object
+     */
+    get options(): Controls {
+        return this.keyboardControls?.options || {};
+    }
+
+    /**
+     * Get the keyboard controls instance
+     * 
+     * @returns KeyboardControls instance or null
+     */
+    get keyboard(): KeyboardControls | null {
+        return this.keyboardControls;
+    }
+
+    /**
+     * Get the gamepad controls instance
+     * 
+     * @returns GamepadControls instance or null
+     */
+    get gamepad(): GamepadControls | null {
+        return this.gamepadControls;
+    }
+
+    /**
+     * Get the joystick controls instance
+     * 
+     * @returns JoystickControls instance or null
+     */
+    get joystick(): JoystickControls | null {
+        return this.joystickControls;
+    }
+}
+
+registerDirective('controls', ControlsDirective);