canvasengine 2.0.0-beta.42 → 2.0.0-beta.43

package/src/components/Viewport.ts

@@ -3,6 +3,7 @@ import { Subscription } from 'rxjs';
 import { createComponent, registerComponent, Element, Props } from '../engine/reactive';
 import { DisplayObject, ComponentInstance } from './DisplayObject';
 import { effect, Signal } from '@signe/reactive';
+import { Graphics, Container } from 'pixi.js';
 
 const EVENTS = [
     'bounce-x-end',
@@ -43,27 +44,43 @@ export interface ViewportProps extends Props {
     [key: string]: any;
 }
 
-export class CanvasViewport extends DisplayObject(PixiViewport) {
+export class CanvasViewport extends DisplayObject(Container) {
     private tickSubscription: Subscription
     overrideProps = ['wheel']
+    #mask: Graphics
+    public viewport: PixiViewport
 
     constructor() {
+        super()
         const defaultOptions = {
             noTicker: true,
             events: {
                 domElement: {
-                    addEventListener: () => {}
+                    addEventListener: () => { }
                 }
             },
         }
         // @ts-ignore
-        super(defaultOptions) 
+        this.viewport = new PixiViewport(defaultOptions)
+        super.addChild(this.viewport)
+
+        this.#mask = new Graphics()
+        super.addChild(this.#mask)
+        this.mask = this.#mask
+    }
+
+    addChild<U extends any[]>(...children: U): U[0] {
+        return this.viewport.addChild(...children)
+    }
+
+    addChildAt<U extends any>(child: U, index: number): U {
+        return this.viewport.addChildAt(child, index)
     }
 
     onInit(props) {
         super.onInit(props)
         for (let event of EVENTS) {
-            if (props[event]) this.on(event, props[event])
+            if (props[event]) this.viewport.on(event, props[event])
         }
     }
 
@@ -74,14 +91,19 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
      * @param {number} [index] - The index of the component among its siblings.
      */
     async onMount(element: Element<CanvasViewport>, index?: number): Promise<void> {
+        element.props.context.viewport = this.viewport
         await super.onMount(element, index);
         const { props } = element;
         const { tick, app, canvasSize } = props.context;
-        let isDragging = false
-        
+
         effect(() => {
-            this.screenWidth = canvasSize().width
-            this.screenHeight = canvasSize().height
+            if (props.screenWidth === undefined) {
+                this.viewport.screenWidth = canvasSize().width
+            }
+            if (props.screenHeight === undefined) {
+                this.viewport.screenHeight = canvasSize().height
+            }
+            this.updateMask()
         })
 
         effect(() => {
@@ -89,20 +111,19 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
             if (!_app) return
 
             const renderer = _app.renderer
-            
+
             renderer.events.domElement.addEventListener(
                 'wheel',
-                this.input.wheelFunction
+                this.viewport.input.wheelFunction
             );
 
-            this.options.events = renderer.events
+            this.viewport.options.events = renderer.events
         })
- 
+
         this.tickSubscription = tick.observable.subscribe(({ value }) => {
-            this.update(value.timestamp)
+            this.viewport.update(value.deltaTime)
         })
 
-        element.props.context.viewport = this
         this.updateViewportSettings(props)
     }
 
@@ -113,46 +134,55 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
 
     private updateViewportSettings(props) {
         if (props.screenWidth !== undefined) {
-            this.screenWidth = props.screenWidth
+            this.viewport.screenWidth = props.screenWidth
         }
         if (props.screenHeight !== undefined) {
-            this.screenHeight = props.screenHeight
+            this.viewport.screenHeight = props.screenHeight
         }
+        this.updateMask()
         if (props.worldWidth !== undefined) {
-            this.worldWidth = props.worldWidth
+            this.viewport.worldWidth = props.worldWidth
         }
         if (props.worldHeight !== undefined) {
-            this.worldHeight = props.worldHeight
+            this.viewport.worldHeight = props.worldHeight
         }
         if (props.drag) {
-            this.drag(props.drag)
+            this.viewport.drag(props.drag)
         }
         if (props.clamp) {
-            this.clamp(props.clamp.value ?? props.clamp)
+            this.viewport.clamp(props.clamp.value ?? props.clamp)
         }
         if (props.wheel) {
             if (props.wheel === true) {
-                this.wheel()
+                this.viewport.wheel()
             } else {
-                this.wheel(props.wheel)
+                this.viewport.wheel(props.wheel)
             }
         }
         if (props.decelerate) {
             if (props.decelerate === true) {
-                this.decelerate()
+                this.viewport.decelerate()
             } else {
-                this.decelerate(props.decelerate)
+                this.viewport.decelerate(props.decelerate)
             }
         }
         if (props.pinch) {
             if (props.pinch === true) {
-                this.pinch()
+                this.viewport.pinch()
             } else {
-                this.pinch(props.pinch)
+                this.viewport.pinch(props.pinch)
             }
         }
     }
 
+    private updateMask() {
+        if (!this.#mask) return
+        this.#mask.clear()
+        this.#mask.beginFill(0xffffff)
+        this.#mask.drawRect(0, 0, this.viewport.screenWidth, this.viewport.screenHeight)
+        this.#mask.endFill()
+    }
+
     /**
      * Called when the component is about to be destroyed.
      * Unsubscribes from the tick observable.
@@ -166,6 +196,15 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         }
         await super.onDestroy(parent, _afterDestroy);
     }
+
+    // Proxy methods for viewport plugins
+    follow(...args: any[]) {
+        return (this.viewport.follow as any)(...args)
+    }
+
+    get plugins() {
+        return this.viewport.plugins
+    }
 }
 
 registerComponent('Viewport', CanvasViewport)

package/src/components/index.ts

@@ -14,4 +14,5 @@ export { type ComponentInstance } from './DisplayObject'
 export { DOMContainer } from './DOMContainer'
 export { DOMElement } from './DOMElement'
 export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'
-export { Joystick, type JoystickSettings, type JoystickChangeEvent } from './Joystick'
+export { Joystick, type JoystickSettings, type JoystickChangeEvent } from './Joystick'
+export { FocusContainer, type FocusContainerProps } from './FocusContainer'

package/src/components/types/DisplayObject.ts

@@ -15,6 +15,8 @@ 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;
     ref?: string;
@@ -48,9 +50,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>;
@@ -58,7 +60,7 @@ 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>;
@@ -100,4 +102,5 @@ export interface DisplayObjectProps {
     touchmove?: PIXI.FederatedEventHandler;
     touchstart?: PIXI.FederatedEventHandler;
     wheel?: PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent>;
+    tabindex?: SignalOrPrimitive<number>;
 }

package/src/directives/Controls.ts

@@ -84,7 +84,7 @@ export class ControlsDirective extends Directive {
     /**
      * Mount hook (no specific action needed)
      */
-    onMount(element: Element) {}
+    onMount(element: Element) { }
 
     /**
      * Update controls configuration

package/src/directives/ControlsBase.ts

@@ -118,7 +118,7 @@ export abstract class ControlsBase {
     protected applyInput(keyName: string) {
         const boundKey = this.boundKeys[keyName];
         if (!boundKey) return;
-        
+
         const { repeat, keyDown } = boundKey.options;
         // Default implementation - subclasses may override for state tracking
         if (keyDown) {

package/src/directives/FocusNavigation.ts

@@ -0,0 +1,252 @@
+import { Directive, registerDirective } from "../engine/directive";
+import { Element } from "../engine/reactive";
+import { focusManager } from "../engine/FocusManager";
+import { ControlsDirective } from "./Controls";
+import { Controls } from "./ControlsBase";
+import { isSignal, Signal } from "@signe/reactive";
+import { CanvasFocusContainer } from "../components/FocusContainer";
+
+/**
+ * FocusNavigation directive for automatic focus navigation via Controls
+ * 
+ * This directive integrates with the Controls system to automatically navigate
+ * between focusable elements using keyboard arrows or gamepad input.
+ * 
+ * The directive is automatically applied when a FocusContainer has a `controls` prop.
+ * It wraps the existing Controls configuration to add focus navigation behavior.
+ * 
+ * @example
+ * ```typescript
+ * // Automatic navigation with Controls
+ * <FocusContainer tabindex={0} controls={controlsConfig}>
+ *   <Button tabindex={0} text="Button 1" />
+ *   <Button tabindex={1} text="Button 2" />
+ * </FocusContainer>
+ * ```
+ */
+export class FocusNavigationDirective extends Directive {
+  private element: Element<CanvasFocusContainer> | null = null;
+  private controlsDirective: ControlsDirective | null = null;
+  private containerId: string = '';
+  private controlsSubscription: any = null;
+  private originalControls: Controls | null = null;
+
+  /**
+   * Initialize the focus navigation directive
+   * 
+   * @param element - FocusContainer element
+   */
+  onInit(element: Element<CanvasFocusContainer>) {
+    this.element = element;
+
+    // Get container ID from component instance
+    const instance = element.componentInstance as CanvasFocusContainer;
+    if (instance && typeof instance.getContainerId === 'function') {
+      this.containerId = instance.getContainerId();
+    }
+
+    // Get controls from props
+    const controlsProp = element.props.controls;
+    if (!controlsProp) return;
+
+    // Get controls value (handle signals)
+    const controlsValue = isSignal(controlsProp) ? controlsProp() : controlsProp;
+    if (!controlsValue) return;
+
+    this.originalControls = controlsValue;
+
+    // Note: Controls directive will be created/initialized in onMount
+    // We'll set up navigation controls there
+  }
+
+  /**
+   * Set up navigation controls
+   * 
+   * @param controls - Controls configuration
+   */
+  private setupNavigationControls(controls: Controls) {
+    if (!this.controlsDirective) {
+      console.warn('FocusNavigation: Controls directive not found, cannot set up navigation');
+      return;
+    }
+    controls = (controls.value ?? controls) as Controls;
+    // Create navigation controls by wrapping existing ones
+    const navigationControls: Controls = {
+      ...controls,
+      // Override or add navigation controls
+      up: {
+        ...controls.up,
+        repeat: controls.up?.repeat ?? true,
+        bind: controls.up?.bind ?? ['up', 'top_left', 'top_right'],
+        keyDown: (boundKey?: any) => {
+          // Navigate up/previous first
+          this.navigate('previous');
+          // Call original handler if exists
+          controls.up?.keyDown?.(boundKey);
+        }
+      },
+      down: {
+        ...controls.down,
+        repeat: controls.down?.repeat ?? true,
+        bind: controls.down?.bind ?? ['down', 'bottom_left', 'bottom_right'],
+        keyDown: (boundKey?: any) => {
+          // Navigate down/next first
+          this.navigate('next');
+          // Call original handler if exists
+          controls.down?.keyDown?.(boundKey);
+        }
+      },
+      left: {
+        ...controls.left,
+        repeat: controls.left?.repeat ?? true,
+        bind: controls.left?.bind ?? 'left',
+        keyDown: (boundKey?: any) => {
+          // Navigate previous (for horizontal lists)
+          this.navigate('previous');
+          // Call original handler if exists
+          controls.left?.keyDown?.(boundKey);
+        }
+      },
+      right: {
+        ...controls.right,
+        repeat: controls.right?.repeat ?? true,
+        bind: controls.right?.bind ?? 'right',
+        keyDown: (boundKey?: any) => {
+          // Navigate next (for horizontal lists)
+          this.navigate('next');
+          // Call original handler if exists
+          controls.right?.keyDown?.(boundKey);
+        }
+      },
+      action: {
+        ...controls.action,
+        bind: controls.action?.bind ?? ['space', 'enter'],
+        keyDown: (boundKey?: any) => {
+          // Trigger action on focused element (e.g., click)
+          this.triggerAction();
+          // Call original handler if exists
+          controls.action?.keyDown?.(boundKey);
+        }
+      }
+    };
+
+    // Update controls directive with navigation controls
+    this.controlsDirective.onUpdate({ controls: navigationControls }, this.element!);
+  }
+
+  /**
+   * Navigate to next or previous focusable element
+   * 
+   * @param direction - Navigation direction
+   */
+  private navigate(direction: 'next' | 'previous') {
+    if (!this.containerId) return;
+    focusManager.navigate(this.containerId, direction);
+  }
+
+  /**
+   * Trigger action on currently focused element
+   */
+  private triggerAction() {
+    if (!this.containerId) return;
+
+    const focusedElementSignal = focusManager.getFocusedElementSignal(this.containerId);
+    if (!focusedElementSignal) return;
+
+    const focusedElement = focusedElementSignal();
+    if (!focusedElement) return;
+
+    // Try to trigger click/pointertap event on focused element
+    const instance = focusedElement.componentInstance;
+    if (instance && typeof instance.emit === 'function') {
+      // Emit pointertap event (equivalent to click)
+      instance.emit('pointertap', { target: instance });
+    }
+  }
+
+  /**
+   * Mount hook
+   * 
+   * @param element - FocusContainer element
+   */
+  onMount(element: Element<CanvasFocusContainer>) {
+    // Get container ID again (should be available now)
+    const instance = element.componentInstance as CanvasFocusContainer;
+    if (instance && typeof instance.getContainerId === 'function') {
+      this.containerId = instance.getContainerId();
+    }
+
+    // Get or create Controls directive
+    this.controlsDirective = element.directives?.controls as ControlsDirective;
+
+    // If Controls directive doesn't exist, create it
+    if (!this.controlsDirective) {
+      const { applyDirective } = require("../engine/reactive");
+      const controlsDirective = applyDirective(element, 'controls');
+      if (controlsDirective) {
+        if (!element.directives) {
+          element.directives = {};
+        }
+        element.directives.controls = controlsDirective;
+        this.controlsDirective = controlsDirective as ControlsDirective;
+      }
+    }
+
+    // Get controls from props
+    const controlsProp = element.props.controls;
+    if (controlsProp) {
+      const controlsValue = isSignal(controlsProp) ? controlsProp() : controlsProp;
+      if (controlsValue) {
+        this.originalControls = controlsValue;
+        this.setupNavigationControls(controlsValue);
+      }
+    }
+
+    // Handle controls prop updates if it's a signal
+    if (isSignal(controlsProp)) {
+      this.controlsSubscription = (controlsProp as Signal<Controls>).observable.subscribe((controls) => {
+        if (controls) {
+          this.originalControls = controls;
+          this.setupNavigationControls(controls);
+        }
+      });
+    }
+  }
+
+  /**
+   * Update hook
+   * 
+   * @param props - Updated properties
+   * @param element - FocusContainer element
+   */
+  onUpdate(props: any, element: Element<CanvasFocusContainer>) {
+    // Update controls if changed
+    if (props.controls !== undefined) {
+      const controlsValue = isSignal(props.controls) ? props.controls() : props.controls;
+      if (controlsValue) {
+        this.originalControls = controlsValue;
+        this.setupNavigationControls(controlsValue);
+      }
+    }
+  }
+
+  /**
+   * Destroy hook
+   * 
+   * @param element - FocusContainer element
+   */
+  onDestroy(element: Element<CanvasFocusContainer>) {
+    // Cleanup subscription
+    if (this.controlsSubscription) {
+      this.controlsSubscription.unsubscribe();
+      this.controlsSubscription = null;
+    }
+
+    this.element = null;
+    this.controlsDirective = null;
+    this.originalControls = null;
+  }
+}
+
+registerDirective('focusNavigation', FocusNavigationDirective);
+

package/src/directives/KeyboardControls.ts

@@ -357,11 +357,11 @@ export class KeyboardControls extends ControlsBase {
         left: boolean,
         right: boolean
     } = {
-        up: false,
-        down: false,
-        left: false,
-        right: false
-    };
+            up: false,
+            down: false,
+            left: false,
+            right: false
+        };
 
     /**
      * Setup keyboard event listeners
@@ -391,7 +391,7 @@ export class KeyboardControls extends ControlsBase {
             const directionControl = this.boundKeys[direction];
             if (directionControl) {
                 const { keyDown } = directionControl.options;
-                if (keyDown ) {
+                if (keyDown) {
                     this.applyInput(direction);
                 }
             }
@@ -410,11 +410,15 @@ export class KeyboardControls extends ControlsBase {
      */
     protected applyInput(keyName: string) {
         const keyState = this.keyState[keyName];
-        if (!keyState) return;
+        if (!keyState) {
+            return;
+        }
         const { isDown, count } = keyState;
         if (isDown) {
             const boundKey = this.boundKeys[keyName];
-            if (!boundKey) return;
+            if (!boundKey) {
+                return;
+            }
             const { repeat, keyDown } = boundKey.options;
             if ((repeat || count == 0)) {
                 let parameters = boundKey.parameters;

package/src/directives/ViewportFollow.ts

@@ -18,12 +18,15 @@ export class ViewportFollow extends Directive {
 
     }
     onMount(element: Element) {
-       this.onUpdate(element.props.viewportFollow, element)
+        this.onUpdate(element.props.viewportFollow, element)
     }
     onUpdate(viewportFollow: any, element: Element) {
-        const { viewport } = element.props.context
+        const viewport = element.props.context?.viewport
         if (!viewport) {
-            throw error('ViewportFollow directive requires a Viewport component to be mounted in the same context')
+            if (viewportFollow) {
+                throw error('ViewportFollow directive requires a Viewport component to be mounted in the same context')
+            }
+            return
         }
         if (viewportFollow) {
             if (viewportFollow === true) {
@@ -46,8 +49,8 @@ export class ViewportFollow extends Directive {
     }
     onDestroy(element: Element) {
         const { viewportFollow } = element.props
-        const { viewport } = element.props.context
-        if (viewportFollow) viewport.plugins.remove('follow')
+        const viewport = element.props.context?.viewport
+        if (viewportFollow && viewport) viewport.plugins.remove('follow')
     }
 }