canvasengine 2.0.0-beta.45 → 2.0.0-beta.47

package/src/components/DisplayObject.ts

@@ -9,7 +9,7 @@ import type {
   TransformOrigin,
 } from "./types/DisplayObject";
 import { signal } from "@signe/reactive";
-import { BlurFilter, ObservablePoint } from "pixi.js";
+import { BlurFilter, ObservablePoint, type Point, type Rectangle } from "pixi.js";
 import * as FILTERS from "pixi-filters";
 import { isPercent } from "../utils/functions";
 import { BehaviorSubject, filter, Subject } from "rxjs";
@@ -20,9 +20,11 @@ export interface ComponentInstance extends PixiMixins.ContainerOptions {
   onInit?(props: Props): void;
   onUpdate?(props: Props): void;
   onDestroy?(parent: Element, afterDestroy: () => void): void;
-  onMount?(context: Element, index?: number): void;
+  onMount?(context: Element<any>, index?: number): void;
   setWidth(width: number): void;
   setHeight(height: number): void;
+  getLocalBounds?(): Rectangle;
+  getGlobalPosition?(): Point;
 }
 
 export const EVENTS = [
@@ -121,16 +123,18 @@ export function DisplayObject(extendClass) {
     // Store computed layout box dimensions
     #computedLayoutBox: { width?: number; height?: number } | null = null;
     // Store reference to element for freeze checking
-    #element: Element<DisplayObject> | null = null;
+    #element: Element<any> | null = null;
 
     /**
      * Get the element reference for freeze checking
      * @returns The element reference or null
      */
-    protected getElement(): Element<DisplayObject> | null {
+    getElement(): Element<any> | null {
       return this.#element;
     }
 
+    onLayoutComputed(_event: any) {}
+
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
     }
@@ -141,6 +145,10 @@ export function DisplayObject(extendClass) {
     }
 
     onInit(props: Props) {
+      // Ensure layout setter from @pixi/layout is used when available.
+      if (Object.prototype.hasOwnProperty.call(this, "layout")) {
+        delete (this as any).layout;
+      }
       this._id = props.id;
       for (let event of EVENTS) {
         if (props[event] && !this.overrideProps.includes(event)) {
@@ -190,12 +198,29 @@ export function DisplayObject(extendClass) {
       this.subjectInit.next(this);
     }
 
-    async onMount(element: Element<DisplayObject>, index?: number) {
+    async onMount(element: Element<any>, index?: number) {
       if (this.destroyed) return
       this.#element = element;
       this.#canvasContext = element.props.context;
       if (element.parent) {
-        const instance = element.parent.componentInstance as DisplayObject;
+        let parentElement = element.parent;
+        let instance = parentElement.componentInstance as DisplayObject;
+        if (typeof (instance as any)?.addChild !== "function") {
+          let search = parentElement.parent;
+          while (search && typeof (search.componentInstance as any)?.addChild !== "function") {
+            search = search.parent;
+          }
+          if (search && typeof (search.componentInstance as any)?.addChild === "function") {
+            parentElement = search;
+            instance = parentElement.componentInstance as DisplayObject;
+          } else {
+            console.warn("DisplayObject mount skipped: parent has no addChild", {
+              child: element.tag,
+              parent: element.parent?.tag,
+            });
+            return;
+          }
+        }
         if (instance.isFlex && !this.layout && !this.disableLayout) {
           try {
             this.layout = {};
@@ -203,7 +228,7 @@ export function DisplayObject(extendClass) {
             console.warn('Failed to set layout:', error);
           }
         }
-        if (index === undefined) {
+        if (index === undefined || parentElement !== element.parent || typeof (instance as any)?.addChildAt !== "function") {
           instance.addChild(this);
         } else {
           instance.addChildAt(this, index);
@@ -219,6 +244,7 @@ export function DisplayObject(extendClass) {
               height: event.computedLayout.height,
             };
           }
+          this.onLayoutComputed(event);
         };
         this.on('layout', layoutHandler);
         this.#registeredEvents.set('layout', layoutHandler);

package/src/components/FocusContainer.ts

@@ -1,12 +1,9 @@
-import { Container as PixiContainer } from "pixi.js";
 import { createComponent, registerComponent, type Element } from "../engine/reactive";
 import { applyDirective } from "../engine/directive";
-import { ComponentInstance, DisplayObject } from "./DisplayObject";
-import { ComponentFunction, h } from "../engine/signal";
+import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
-import { Container } from "./Container";
 import { focusManager, ScrollOptions } from "../engine/FocusManager";
-import { signal, Signal, isSignal } from "@signe/reactive";
+import { signal, Signal, WritableSignal, WritableObjectSignal, isSignal } from "@signe/reactive";
 import { CanvasViewport } from "./Viewport";
 import { Controls } from "../directives/ControlsBase";
 // Import FocusNavigation directive to ensure it's registered
@@ -27,7 +24,9 @@ export interface FocusContainerProps extends DisplayObjectProps {
   onFocusChange?: (index: number, element: Element | null) => void;
   autoScroll?: boolean | ScrollOptions;
   viewport?: CanvasViewport;
-  throttle?: number;
+  context?: {
+    viewport?: CanvasViewport;
+  };
 }
 
 /**
@@ -67,10 +66,10 @@ export interface FocusContainerProps extends DisplayObjectProps {
  * </Viewport>
  * ```
  */
-export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
+export class CanvasFocusContainer {
   private containerId: string = '';
-  private currentIndexSignal: Signal<number | null> | null = null;
-  private focusedElementSignal: Signal<Element | null> | null = null;
+  private currentIndexSignal: WritableSignal<number | null> | null = null;
+  private focusedElementSignal: WritableSignal<Element | null> | WritableObjectSignal<Element | null> | null = null;
   private registeredFocusables: Set<number> = new Set();
 
   /**
@@ -79,14 +78,12 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
    * @param props - Component properties
    */
   onInit(props: FocusContainerProps) {
-    super.onInit(props);
-
     // Generate unique container ID
     this.containerId = `focus-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 
     // Create signals for current index and focused element
     const currentIndex = signal<number | null>(null);
-    const focusedElement = signal<Element | null>(null);
+    const focusedElement = signal<Element | null>(null) as WritableSignal<Element | null> | WritableObjectSignal<Element | null>;
 
     this.currentIndexSignal = currentIndex;
     this.focusedElementSignal = focusedElement;
@@ -101,8 +98,7 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
       focusedElement,
       onFocusChange: props.onFocusChange,
       autoScroll: props.autoScroll,
-      viewport,
-      throttle: props.throttle ?? 150
+      viewport
     });
   }
 
@@ -112,8 +108,6 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
    * @param element - The element being mounted
    */
   async onMount(element: Element<CanvasFocusContainer>): Promise<void> {
-    await super.onMount(element, undefined);
-
     // Update container with element reference for freeze checking
     focusManager.updateContainer(this.containerId, { element });
 
@@ -154,7 +148,7 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
     //   element.effectSubscriptions.push(subscription);
     // }
 
-    focusManager.setTabindex(this.containerId, element.propObservables.tabindex);
+    focusManager.setTabindex(this.containerId, element.propObservables?.tabindex as any);
 
     // Register all focusable children initially
     // Use setTimeout to ensure children are mounted
@@ -169,15 +163,12 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
    * @param props - Updated properties
    */
   onUpdate(props: FocusContainerProps) {
-    super.onUpdate(props);
-
     // Update viewport if changed
     const viewport = props.viewport || (props.context?.viewport as CanvasViewport | undefined);
     focusManager.updateContainer(this.containerId, {
       viewport,
       autoScroll: props.autoScroll,
-      onFocusChange: props.onFocusChange,
-      throttle: props.throttle ?? 150
+      onFocusChange: props.onFocusChange
     });
   }
 
@@ -196,8 +187,9 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
 
     // Unregister container
     focusManager.unregisterContainer(this.containerId);
-
-    await super.onDestroy(parent, afterDestroy);
+    if (afterDestroy) {
+      afterDestroy();
+    }
   }
 
   /**
@@ -248,6 +240,9 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
 
     const processChild = (child: Element) => {
       if (!child || !child.componentInstance) return;
+      if ((child.tag === "Navigation" || child.tag === "FocusContainer") && child !== (element as any)) {
+        return;
+      }
 
       // Check for tabindex in props
       let tabindex: number | undefined = undefined;
@@ -272,7 +267,7 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
         }
       }
 
-      // Recursively process children
+      // Recursively process children unless we hit another FocusContainer
       if (child.props && child.props.children) {
         if (Array.isArray(child.props.children)) {
           processChildren(child.props.children);
@@ -358,7 +353,7 @@ export class CanvasFocusContainer extends DisplayObject(PixiContainer) {
 
 export interface CanvasFocusContainer extends DisplayObjectProps { }
 
-registerComponent("FocusContainer", CanvasFocusContainer);
+registerComponent("Navigation", CanvasFocusContainer);
 
 /**
  * FocusContainer component function
@@ -367,6 +362,7 @@ registerComponent("FocusContainer", CanvasFocusContainer);
  * @returns FocusContainer element
  */
 export const FocusContainer: ComponentFunction<FocusContainerProps> = (props) => {
-  return createComponent("FocusContainer", props);
+  return createComponent("Navigation", props);
 };
 
+export const Navigation = FocusContainer;

package/src/components/Sprite.ts

@@ -299,7 +299,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     }
   }
 
-  async onMount(params: Element<CanvasSprite>) {
+  async onMount(params: Element<any>) {
     // Set #element manually for freeze checking before calling super.onMount
     // We need to set it early so update() can check freeze state
     (this as any)['#element'] = params;
@@ -323,6 +323,13 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.spritesheet = resolvedDefinition.value ?? resolvedDefinition;
       await this.createAnimations();
     }
+    if (sheet?.params) {
+      this.sheetParams = sheet.params;
+    }
+    if (sheet?.playing && this.has(sheet.playing)) {
+      this.sheetCurrentAnimation = sheet.playing;
+      this.play(this.sheetCurrentAnimation, [this.sheetParams]);
+    }
     if (sheet.params) {
       for (let key in propObservables?.sheet["params"]) {
         const value = propObservables?.sheet["params"][key] as Signal;
@@ -330,11 +337,13 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
           this.subscriptionSheet.push(
             value.observable.subscribe((value) => {
               if (this.animations.size == 0) return;
-              this.play(this.sheetCurrentAnimation, [{ [key]: value }]);
+              if (!this.has(this.sheetCurrentAnimation)) return;
+              this.play(this.sheetCurrentAnimation, [{ ...this.sheetParams, [key]: value }]);
             })
           );
         } else {
-          this.play(this.sheetCurrentAnimation, [{ [key]: value }]);
+          if (!this.has(this.sheetCurrentAnimation)) continue;
+          this.play(this.sheetCurrentAnimation, [{ ...this.sheetParams, [key]: value }]);
         }
       }
     }

package/src/components/Text.ts

@@ -48,7 +48,7 @@ class CanvasText extends DisplayObject(PixiText) {
    * @param {Element<CanvasText>} element - The element being mounted with parent and props.
    * @param {number} [index] - The index of the component among its siblings.
    */
-  async onMount(element: Element<CanvasText>, index?: number): Promise<void> {
+  async onMount(element: Element<any>, index?: number): Promise<void> {
     const { props } = element;
     await super.onMount(element, index);
     const tick: Signal = props.context.tick;

package/src/components/Viewport.ts

@@ -3,7 +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';
+import { Graphics, Container, ContainerChild, IRenderLayer } from 'pixi.js';
 
 const EVENTS = [
     'bounce-x-end',
@@ -73,8 +73,8 @@ export class CanvasViewport extends DisplayObject(Container) {
         return this.viewport.addChild(...children)
     }
 
-    addChildAt<U extends any>(child: U, index: number): U {
-        return this.viewport.addChildAt(child, index)
+    addChildAt<T extends ContainerChild | IRenderLayer>(child: T, index: number): T {
+        return this.viewport.addChildAt(child, index) as T
     }
 
     onInit(props) {
@@ -90,7 +90,7 @@ export class CanvasViewport extends DisplayObject(Container) {
      * @param {Element<CanvasViewport>} element - The element being mounted. Its `props` property (of type ViewportProps) contains component properties and context.
      * @param {number} [index] - The index of the component among its siblings.
      */
-    async onMount(element: Element<CanvasViewport>, index?: number): Promise<void> {
+    async onMount(element: Element<any>, index?: number): Promise<void> {
         element.props.context.viewport = this.viewport
         await super.onMount(element, index);
         const { props } = element;
@@ -211,4 +211,4 @@ registerComponent('Viewport', CanvasViewport)
 
 export function Viewport(props: ViewportProps) {
     return createComponent('Viewport', props);
-}
+}

package/src/components/index.ts

@@ -13,6 +13,7 @@ export { NineSliceSprite } from './NineSliceSprite'
 export { type ComponentInstance } from './DisplayObject'
 export { DOMContainer } from './DOMContainer'
 export { DOMElement } from './DOMElement'
+export { DOMSprite } from './DOMSprite'
 export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'
 export { Joystick, type JoystickSettings } from './Joystick'
-export { FocusContainer, type FocusContainerProps } from './FocusContainer'
+export { FocusContainer, Navigation, type FocusContainerProps } from './FocusContainer'

package/src/directives/Controls.ts

@@ -36,7 +36,7 @@ export class ControlsDirective extends Directive {
      * Initialize the controls directive
      * Sets up keyboard, gamepad, and joystick controls if available
      */
-    onInit(element: Element) {
+    onInit(element: Element<any>) {
         this.element = element;
         const value = element.props.controls?.value ?? element.props.controls;
         if (!value) return;
@@ -71,7 +71,7 @@ export class ControlsDirective extends Directive {
         // 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.subscribe((isFrozen) => {
+            this.freezeSubscription = ((freezeProp as Signal<boolean>).observable as any).subscribe((isFrozen) => {
                 if (isFrozen) {
                     this.stopInputs();
                 } else {
@@ -84,13 +84,13 @@ export class ControlsDirective extends Directive {
     /**
      * Mount hook (no specific action needed)
      */
-    onMount(element: Element) { }
+    onMount(element: Element<any>) { }
 
     /**
      * Update controls configuration
      * Updates both keyboard and gamepad controls
      */
-    onUpdate(props: any, element: Element) {
+    onUpdate(props: any, element: Element<any>) {
         const value = props.controls?.value ?? props.controls;
         if (value) {
             if (this.keyboardControls) {
@@ -115,7 +115,7 @@ export class ControlsDirective extends Directive {
     /**
      * Cleanup and destroy all control systems
      */
-    onDestroy(element: Element) {
+    onDestroy(element: Element<any>) {
         if (this.freezeSubscription) {
             this.freezeSubscription.unsubscribe();
             this.freezeSubscription = null;

package/src/directives/ControlsBase.ts

@@ -5,6 +5,7 @@ export interface ControlOptions {
     bind: string | string[];
     keyUp?: Function;
     keyDown?: Function;
+    throttle?: number;
     delay?: number | {
         duration: number;
         otherControls?: (string)[];

package/src/directives/FocusNavigation.ts

@@ -1,19 +1,18 @@
 import { Directive, registerDirective, applyDirective } from "../engine/directive";
 import { type 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
+ * FocusNavigation directive for wiring Controls with FocusContainer
  * 
- * This directive integrates with the Controls system to automatically navigate
- * between focusable elements using keyboard arrows or gamepad input.
+ * This directive integrates with the Controls system and lets external
+ * control handlers update the FocusContainer tabindex signal.
  * 
  * The directive is automatically applied when a FocusContainer has a `controls` prop.
- * It wraps the existing Controls configuration to add focus navigation behavior.
+ * It keeps the Controls directive in sync with the provided controls config.
  * 
  * @example
  * ```typescript
@@ -27,9 +26,7 @@ import { CanvasFocusContainer } from "../components/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
@@ -38,130 +35,6 @@ export class FocusNavigationDirective extends Directive {
    */
   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 });
-    }
   }
 
   /**
@@ -170,12 +43,6 @@ export class FocusNavigationDirective extends Directive {
    * @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;
 
@@ -196,17 +63,15 @@ export class FocusNavigationDirective extends Directive {
     if (controlsProp) {
       const controlsValue = isSignal(controlsProp) ? controlsProp() : controlsProp;
       if (controlsValue) {
-        this.originalControls = controlsValue;
-        this.setupNavigationControls(controlsValue);
+        this.controlsDirective?.onUpdate({ controls: controlsValue }, element);
       }
     }
 
     // Handle controls prop updates if it's a signal
     if (isSignal(controlsProp)) {
-      this.controlsSubscription = (controlsProp as Signal<Controls>).observable.subscribe((controls) => {
+      this.controlsSubscription = ((controlsProp as Signal<Controls>).observable as any).subscribe((controls) => {
         if (controls) {
-          this.originalControls = controls;
-          this.setupNavigationControls(controls);
+          this.controlsDirective?.onUpdate({ controls }, element);
         }
       });
     }
@@ -223,8 +88,7 @@ export class FocusNavigationDirective extends Directive {
     if (props.controls !== undefined) {
       const controlsValue = isSignal(props.controls) ? props.controls() : props.controls;
       if (controlsValue) {
-        this.originalControls = controlsValue;
-        this.setupNavigationControls(controlsValue);
+        this.controlsDirective?.onUpdate({ controls: controlsValue }, element);
       }
     }
   }
@@ -243,9 +107,7 @@ export class FocusNavigationDirective extends Directive {
 
     this.element = null;
     this.controlsDirective = null;
-    this.originalControls = null;
   }
 }
 
 registerDirective('focusNavigation', FocusNavigationDirective);
-

package/src/directives/KeyboardControls.ts

@@ -351,6 +351,7 @@ export class KeyboardControls extends ControlsBase {
         } | null
     } = {}
     private lastKeyPressed: number | null = null
+    private lastActionTimes: Record<string, number> = {}
     private directionState: {
         up: boolean,
         down: boolean,
@@ -419,8 +420,16 @@ export class KeyboardControls extends ControlsBase {
             if (!boundKey) {
                 return;
             }
-            const { repeat, keyDown } = boundKey.options;
+            const { repeat, keyDown, throttle } = boundKey.options;
             if ((repeat || count == 0)) {
+                if (typeof throttle === "number") {
+                    const now = Date.now();
+                    const lastTime = this.lastActionTimes[boundKey.actionName] ?? 0;
+                    if (now - lastTime < throttle) {
+                        return;
+                    }
+                    this.lastActionTimes[boundKey.actionName] = now;
+                }
                 let parameters = boundKey.parameters;
                 if (typeof parameters === "function") {
                     parameters = parameters();
@@ -565,4 +574,4 @@ export class KeyboardControls extends ControlsBase {
         this.keyState = {}
     }
 
-}
+}

package/src/directives/Scheduler.ts

@@ -30,9 +30,17 @@ export class Scheduler extends Directive {
     onUpdate(props: any) { }
 
     nextTick(timestamp: number) {
-        this.lastTimestamp = this.lastTimestamp || this.timestamp // first
-        this.deltaTime = Utils.preciseNow() - this.timestamp
-        this.timestamp = timestamp
+        const now = (typeof timestamp === "number" && timestamp > 0)
+            ? timestamp
+            : Utils.preciseNow()
+        if (this.lastTimestamp === 0) {
+            this.lastTimestamp = now
+            this.deltaTime = 0
+        } else {
+            this.deltaTime = now - this.lastTimestamp
+            this.lastTimestamp = now
+        }
+        this.timestamp = now
         this.tick.set({
             timestamp: this.timestamp,
             deltaTime: this.deltaTime,
@@ -98,4 +106,4 @@ export class Scheduler extends Directive {
     }
 }
 
-registerDirective('tick', Scheduler)
+registerDirective('tick', Scheduler)