canvasengine 2.0.0-beta.37 → 2.0.0-beta.39

package/src/directives/Controls.ts

@@ -3,14 +3,15 @@ import { Element } from "../engine/reactive";
 import { ControlsBase, Controls } from "./ControlsBase";
 import { KeyboardControls } from "./KeyboardControls";
 import { GamepadControls, GamepadConfig } from "./GamepadControls";
+import { JoystickControls, JoystickConfig } from "./JoystickControls";
 
 /**
- * Controls directive that coordinates keyboard and gamepad input systems
+ * Controls directive that coordinates keyboard, gamepad, and joystick input systems
  * 
- * This directive automatically activates both keyboard and gamepad controls when available.
+ * This directive automatically activates keyboard, gamepad, and joystick controls when available.
  * The gamepad is automatically enabled if joypad.js is detected in the environment.
  * 
- * Both systems share the same control configuration and can work simultaneously.
+ * All systems share the same control configuration and can work simultaneously.
  * 
  * @example
  * ```html
@@ -25,10 +26,11 @@ import { GamepadControls, GamepadConfig } from "./GamepadControls";
 export class ControlsDirective extends Directive {
     private keyboardControls: KeyboardControls | null = null;
     private gamepadControls: GamepadControls | null = null;
+    private joystickControls: JoystickControls | null = null;
 
     /**
      * Initialize the controls directive
-     * Sets up keyboard and gamepad controls if available
+     * Sets up keyboard, gamepad, and joystick controls if available
      */
     onInit(element: Element) {
         const value = element.props.controls?.value ?? element.props.controls;
@@ -47,6 +49,14 @@ export class ControlsDirective extends Directive {
             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();
+        }
     }
 
     /**
@@ -84,6 +94,11 @@ export class ControlsDirective extends Directive {
             this.gamepadControls.destroy();
             this.gamepadControls = null;
         }
+
+        if (this.joystickControls) {
+            this.joystickControls.destroy();
+            this.joystickControls = null;
+        }
     }
 
     /**
@@ -113,20 +128,24 @@ export class ControlsDirective extends Directive {
      * 
      * @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): Promise<void> {
+    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);
+            await this.gamepadControls.applyControl(controlName, isDown, payload);
+        }
+        if (this.joystickControls) {
+            await this.joystickControls.applyControl(controlName, isDown, payload);
         }
     }
 
     /**
      * Stop listening to inputs
-     * Stops both keyboard and gamepad input processing
+     * Stops keyboard, gamepad, and joystick input processing
      */
     stopInputs() {
         if (this.keyboardControls) {
@@ -135,11 +154,14 @@ export class ControlsDirective extends Directive {
         if (this.gamepadControls) {
             this.gamepadControls.stopInputs();
         }
+        if (this.joystickControls) {
+            this.joystickControls.stopInputs();
+        }
     }
 
     /**
      * Resume listening to inputs
-     * Resumes both keyboard and gamepad input processing
+     * Resumes keyboard, gamepad, and joystick input processing
      */
     listenInputs() {
         if (this.keyboardControls) {
@@ -148,6 +170,9 @@ export class ControlsDirective extends Directive {
         if (this.gamepadControls) {
             this.gamepadControls.listenInputs();
         }
+        if (this.joystickControls) {
+            this.joystickControls.listenInputs();
+        }
     }
 
     /**
@@ -177,6 +202,15 @@ export class ControlsDirective extends Directive {
     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);

package/src/directives/GamepadControls.ts

@@ -112,6 +112,7 @@ export class GamepadControls extends ControlsBase {
     private joypad: any = null;
     private connectCallbacks: Array<() => void> = [];
     private disconnectCallbacks: Array<() => void> = [];
+    private currentPower: number = 0;
 
     /**
      * Setup gamepad event listeners
@@ -129,13 +130,6 @@ export class GamepadControls extends ControlsBase {
             clearInterval(this.gamepadMoveInterval);
             this.gamepadMoveInterval = null;
         }
-        
-        if (this.joypad) {
-            this.joypad.off('connect');
-            this.joypad.off('disconnect');
-            this.joypad.off('button_press');
-            this.joypad.off('axis_move');
-        }
     }
 
     /**
@@ -198,6 +192,7 @@ export class GamepadControls extends ControlsBase {
         this.gamepadMoving = false;
         this.gamepadDirections = {};
         this.gamepadAxisDate = 0;
+        this.currentPower = 0;
 
         // Update gamepadConnected signal if provided
         if (this.gamepadConfig.gamepadConnected) {
@@ -250,6 +245,21 @@ export class GamepadControls extends ControlsBase {
         else if (direction === 'left') direction = axisMapping['left'] || 'left';
         else if (direction === 'right') direction = axisMapping['right'] || 'right';
 
+        // Calculate power/intensity from axis values
+        // Get the first connected gamepad instance
+        if (this.joypad && this.joypad.instances) {
+            const gamepadInstances = Object.values(this.joypad.instances) as any[];
+            if (gamepadInstances.length > 0) {
+                const gamepad = gamepadInstances[0];
+                // Get axes values (axes 0-1 for left stick, 2-3 for right stick)
+                // We'll use the left stick by default (axes 0 and 1)
+                const axisX = gamepad.axes?.[0] || 0;
+                const axisY = gamepad.axes?.[1] || 0;
+                // Calculate power as magnitude of the vector
+                this.currentPower = Math.min(1, Math.sqrt(axisX * axisX + axisY * axisY));
+            }
+        }
+
         // Update active directions
         this.gamepadDirections = {
             [direction]: true
@@ -265,7 +275,7 @@ export class GamepadControls extends ControlsBase {
             }
         }
 
-        // Trigger movement
+        // Trigger movement with power
         this.processGamepadMovement();
     }
 
@@ -277,9 +287,20 @@ export class GamepadControls extends ControlsBase {
         if (!this.gamepadMoving) return;
         if (this.stop) return;
 
+        // Update current power from gamepad axes if available
+        if (this.joypad && this.joypad.instances) {
+            const gamepadInstances = Object.values(this.joypad.instances) as any[];
+            if (gamepadInstances.length > 0) {
+                const gamepad = gamepadInstances[0];
+                const axisX = gamepad.axes?.[0] || 0;
+                const axisY = gamepad.axes?.[1] || 0;
+                this.currentPower = Math.min(1, Math.sqrt(axisX * axisX + axisY * axisY));
+            }
+        }
+
         for (const direction in this.gamepadDirections) {
             if (this.gamepadDirections[direction]) {
-                this.applyControl(direction, true).catch(() => {
+                this.applyControl(direction, true, { power: this.currentPower }).catch(() => {
                     // Ignore errors
                 });
             }
@@ -370,9 +391,10 @@ export class GamepadControls extends ControlsBase {
      * 
      * @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): Promise<void> {
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
         const control = this._controlsOptions[controlName];
         if (!control) return;
 
@@ -385,40 +407,40 @@ export class GamepadControls extends ControlsBase {
                 if (isDown === undefined) {
                     // Press and release (simulate button press)
                     if (boundKey.options.keyDown) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyDown(boundKey);
+                        boundKey.options.keyDown(boundKey, parameters);
                     }
                     // Release after a short delay (similar to keyboard)
                     return new Promise((resolve) => {
                         setTimeout(() => {
                             if (boundKey.options.keyUp) {
-                                let parameters = boundKey.parameters;
+                                let parameters = payload ?? boundKey.parameters;
                                 if (typeof parameters === "function") {
                                     parameters = parameters();
                                 }
-                                boundKey.options.keyUp(boundKey);
+                                boundKey.options.keyUp(boundKey, parameters);
                             }
                             resolve();
                         }, 200);
                     });
                 } else if (isDown) {
                     if (boundKey.options.keyDown) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyDown(boundKey);
+                        boundKey.options.keyDown(boundKey, parameters);
                     }
                 } else {
                     if (boundKey.options.keyUp) {
-                        let parameters = boundKey.parameters;
+                        let parameters = payload ?? boundKey.parameters;
                         if (typeof parameters === "function") {
                             parameters = parameters();
                         }
-                        boundKey.options.keyUp(boundKey);
+                        boundKey.options.keyUp(boundKey, parameters);
                     }
                 }
                 break;

package/src/directives/JoystickControls.ts

@@ -0,0 +1,396 @@
+import { ControlsBase, Controls } from "./ControlsBase";
+
+/**
+ * Joystick directions reported by the Joystick component
+ */
+export type JoystickDirection =
+    | 'left'
+    | 'right'
+    | 'top'
+    | 'bottom'
+    | 'top_left'
+    | 'top_right'
+    | 'bottom_left'
+    | 'bottom_right';
+
+/**
+ * Joystick change event payload
+ */
+export interface JoystickChangeEvent {
+    angle: number;
+    direction: JoystickDirection;
+    power: number;
+}
+
+/**
+ * Joystick configuration interface
+ * 
+ * @example
+ * ```ts
+ * const joystickConfig: JoystickConfig = {
+ *   enabled: true,
+ *   directionMapping: {
+ *     'top': 'up',
+ *     'bottom': 'down',
+ *     'left': 'left',
+ *     'right': 'right',
+ *     'top_left': ['up', 'left'],
+ *     'top_right': ['up', 'right'],
+ *     'bottom_left': ['down', 'left'],
+ *     'bottom_right': ['down', 'right']
+ *   },
+ *   moveInterval: 50,
+ *   threshold: 0.1
+ * };
+ * ```
+ */
+export interface JoystickConfig {
+    /** Whether joystick is enabled (default: true) */
+    enabled?: boolean;
+    /** Mapping of joystick direction names to control names (can be single string or array for diagonals) */
+    directionMapping?: {
+        [joystickDirection: string]: string | string[]; // e.g., 'top' -> 'up', 'top_left' -> ['up', 'left']
+    };
+    /** Interval in milliseconds for repeating movement actions (default: 50) */
+    moveInterval?: number;
+    /** Threshold for power value to trigger movement (default: 0.1) */
+    threshold?: number;
+}
+
+/**
+ * Default direction mapping
+ */
+const DEFAULT_DIRECTION_MAPPING: { [direction: string]: string | string[] } = {
+    'top': 'up',
+    'bottom': 'down',
+    'left': 'left',
+    'right': 'right',
+    'top_left': ['up', 'left'],
+    'top_right': ['up', 'right'],
+    'bottom_left': ['down', 'left'],
+    'bottom_right': ['down', 'right']
+};
+
+/**
+ * Joystick input controls implementation
+ * 
+ * Handles joystick input events from the Joystick component and maps them to control actions.
+ * Supports directional movement with configurable mappings, including diagonal directions.
+ * 
+ * The joystick controls work by receiving change events from a Joystick component instance.
+ * 
+ * @example
+ * ```ts
+ * const joystickControls = new JoystickControls();
+ * joystickControls.setInputs({
+ *   up: {
+ *     repeat: true,
+ *     bind: 'up',
+ *     keyDown() {
+ *       console.log('Up pressed');
+ *     }
+ *   }
+ * });
+ * joystickControls.updateJoystickConfig({
+ *   enabled: true,
+ *   directionMapping: {
+ *     'top': 'up'
+ *   }
+ * });
+ * joystickControls.start();
+ * 
+ * // Later, when joystick changes:
+ * joystickControls.handleJoystickChange({ angle: 90, direction: Direction.TOP, power: 0.8 });
+ * ```
+ */
+export class JoystickControls extends ControlsBase {
+    private joystickEnabled: boolean = true;
+    private joystickConfig: JoystickConfig = {
+        enabled: true,
+        directionMapping: DEFAULT_DIRECTION_MAPPING,
+        moveInterval: 50,
+        threshold: 0.1
+    };
+    private joystickMoving: boolean = false;
+    private joystickDirections: { [direction: string]: boolean } = {};
+    private joystickLastUpdate: number = 0;
+    private joystickMoveInterval: any = null;
+    private currentPower: number = 0;
+
+    /**
+     * Setup joystick event listeners
+     * Note: Joystick events are handled via handleJoystickChange() method
+     */
+    protected setupListeners(): void {
+        // Joystick events are handled externally via handleJoystickChange()
+        // This method is kept for consistency with ControlsBase interface
+    }
+
+    /**
+     * Cleanup joystick intervals
+     */
+    protected cleanup(): void {
+        if (this.joystickMoveInterval) {
+            clearInterval(this.joystickMoveInterval);
+            this.joystickMoveInterval = null;
+        }
+    }
+
+    /**
+     * Process joystick inputs each step
+     * Continuous actions are handled by the interval; no inactivity timeout here.
+     */
+    protected preStep(): void {
+        if (this.stop) return;
+        // No-op: continuous movement is driven by processJoystickMovement interval
+    }
+
+    /**
+     * Handle joystick change event
+     * Called by the Joystick component when its position changes
+     * 
+     * @param event - Joystick change event containing angle, direction, and power
+     */
+    handleJoystickChange(event: JoystickChangeEvent): void {
+        if (!this.joystickEnabled || !this.joystickConfig.enabled) return;
+        if (this.stop) return;
+
+        this.joystickLastUpdate = Date.now();
+        this.currentPower = event.power;
+
+        // Check threshold
+        if (event.power < (this.joystickConfig.threshold || 0.1)) {
+            // Power too low, stop all movements
+            this.stopAllMovements();
+            return;
+        }
+
+        const directionMapping = this.joystickConfig.directionMapping || DEFAULT_DIRECTION_MAPPING;
+        const directionKey = event.direction;
+        const mappedControls = directionMapping[directionKey];
+
+        if (!mappedControls) {
+            // No mapping for this direction, stop all movements
+            this.stopAllMovements();
+            return;
+        }
+
+        // Convert to array if single string
+        const controlNames = Array.isArray(mappedControls) ? mappedControls : [mappedControls];
+
+        // Determine which directions to activate and deactivate
+        const previousDirections = this.joystickDirections;
+        const newDirections: { [dir: string]: boolean } = {};
+        controlNames.forEach(controlName => {
+            newDirections[controlName] = true;
+        });
+
+        // Deactivate directions that are no longer active
+        const allDirections = new Set([
+            ...Object.keys(this.joystickDirections),
+            ...Object.keys(newDirections)
+        ]);
+
+        for (const dir of allDirections) {
+            const wasActive = this.joystickDirections[dir];
+            const shouldBeActive = newDirections[dir] || false;
+
+            if (wasActive && !shouldBeActive) {
+                // Deactivate this direction
+                this.applyControl(dir, false).catch(() => {
+                    // Ignore errors
+                });
+            }
+        }
+
+        // Update active directions
+        this.joystickDirections = { ...newDirections };
+        this.joystickMoving = true;
+
+        // Activate new directions
+        const directionsToActivate = controlNames.filter((name) => !previousDirections[name]);
+        for (const controlName of directionsToActivate) {
+            this.applyControl(controlName, true, { power: event.power }).catch(() => {
+                // Ignore errors
+            });
+        }
+
+        // Start movement interval if not already running
+        if (!this.joystickMoveInterval) {
+            this.joystickMoveInterval = setInterval(() => {
+                this.processJoystickMovement();
+            }, this.joystickConfig.moveInterval || 50);
+        }
+    }
+
+    /**
+     * Handle joystick start event
+     * Called when user starts interacting with the joystick
+     */
+    handleJoystickStart(): void {
+        if (!this.joystickEnabled || !this.joystickConfig.enabled) return;
+        if (this.stop) return;
+        // Start event doesn't need special handling, change event will handle activation
+    }
+
+    /**
+     * Handle joystick end event
+     * Called when user stops interacting with the joystick
+     */
+    handleJoystickEnd(): void {
+        if (!this.joystickEnabled || !this.joystickConfig.enabled) return;
+        this.stopAllMovements();
+    }
+
+    /**
+     * Stop all active joystick movements
+     */
+    private stopAllMovements(): void {
+        if (this.joystickMoveInterval) {
+            clearInterval(this.joystickMoveInterval);
+            this.joystickMoveInterval = null;
+        }
+
+        const allDirections = Object.keys(this.joystickDirections);
+        for (const dir of allDirections) {
+            this.applyControl(dir, false).catch(() => {
+                // Ignore errors
+            });
+        }
+
+        this.joystickDirections = {};
+        this.joystickMoving = false;
+        this.currentPower = 0;
+    }
+
+    /**
+     * Process continuous joystick movement
+     * Called at intervals to repeat movement actions while joystick is active
+     */
+    private processJoystickMovement(): void {
+        if (!this.joystickMoving) return;
+        if (this.stop) return;
+
+        for (const direction in this.joystickDirections) {
+            if (this.joystickDirections[direction]) {
+                this.applyControl(direction, true, { power: this.currentPower }).catch(() => {
+                    // Ignore errors
+                });
+            }
+        }
+    }
+
+    /**
+     * Update joystick configuration
+     * Merges provided config with defaults
+     * 
+     * @param config - Partial joystick configuration
+     */
+    updateJoystickConfig(config: Partial<JoystickConfig>): void {
+        this.joystickConfig = {
+            enabled: config.enabled !== undefined ? config.enabled : true,
+            directionMapping: config.directionMapping || DEFAULT_DIRECTION_MAPPING,
+            moveInterval: config.moveInterval || 50,
+            threshold: config.threshold || 0.1
+        };
+    }
+
+    /**
+     * Extract joystick config from controls configuration and update
+     * 
+     * @param inputs - Controls configuration that may contain a 'joystick' property
+     */
+    extractJoystickConfig(inputs: Controls & { joystick?: JoystickConfig }): void {
+        if (inputs.joystick) {
+            this.updateJoystickConfig(inputs.joystick);
+        }
+    }
+
+    /**
+     * Get the current joystick configuration
+     * 
+     * @returns The joystick configuration object
+     */
+    getJoystickConfig(): JoystickConfig {
+        return this.joystickConfig;
+    }
+
+    /**
+     * Apply a control action programmatically
+     * Uses the bound controls to trigger actions
+     * 
+     * @param controlName - Name of the control
+     * @param isDown - Whether the control is pressed (true) or released (false)
+     * @returns Promise that resolves when the action is complete
+     */
+    async applyControl(controlName: string | number, isDown?: boolean, payload?: any): Promise<void> {
+        const control = this._controlsOptions[controlName];
+        if (!control) return;
+
+        // Find the bound key for this control
+        const boundKeys = Object.keys(this.boundKeys);
+        for (const keyName of boundKeys) {
+            const boundKey = this.boundKeys[keyName];
+            if (boundKey.actionName === String(controlName)) {
+                // Execute the control callback
+                if (isDown === undefined) {
+                    // Press and release (simulate button press)
+                    if (boundKey.options.keyDown) {
+                        let parameters = payload ?? boundKey.parameters;
+                        if (typeof parameters === "function") {
+                            parameters = parameters();
+                        }
+                        boundKey.options.keyDown(boundKey, parameters);
+                    }
+                    // Release after a short delay (similar to keyboard)
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            if (boundKey.options.keyUp) {
+                                let parameters = payload ?? boundKey.parameters;
+                                if (typeof parameters === "function") {
+                                    parameters = parameters();
+                                }
+                                boundKey.options.keyUp(boundKey, parameters);
+                            }
+                            resolve();
+                        }, 200);
+                    });
+                } else if (isDown) {
+                    if (boundKey.options.keyDown) {
+                        let parameters = payload ?? boundKey.parameters;
+                        if (typeof parameters === "function") {
+                            parameters = parameters();
+                        }
+                        boundKey.options.keyDown(boundKey, parameters);
+                    }
+                } else {
+                    if (boundKey.options.keyUp) {
+                        let parameters = payload ?? boundKey.parameters;
+                        if (typeof parameters === "function") {
+                            parameters = parameters();
+                        }
+                        boundKey.options.keyUp(boundKey, parameters);
+                    }
+                }
+                break;
+            }
+        }
+    }
+
+    /**
+     * Override setInputs to extract joystick config
+     */
+    setInputs(inputs: Controls & { joystick?: JoystickConfig }): void {
+        super.setInputs(inputs);
+        this.extractJoystickConfig(inputs);
+    }
+
+    /**
+     * Check if joystick is currently active
+     * 
+     * @returns true if joystick is moving, false otherwise
+     */
+    isActive(): boolean {
+        return this.joystickMoving;
+    }
+}

package/src/directives/index.ts

@@ -1,6 +1,7 @@
 export * from './ControlsBase'
 export * from './KeyboardControls'
 export * from './GamepadControls'
+export * from './JoystickControls'
 export * from './Controls'
 export * from './Scheduler'
 export * from './ViewportFollow'