canvasengine 2.0.0-beta.34 → 2.0.0-beta.36

package/dist/index.js

@@ -1,64 +1,77 @@
-import { h as a } from "./index-BLbc2zG5.js";
-import { A as r, B as n, w as o, C as c, m as l, l as p, D as S, v as m, a5 as u, a4 as g, a2 as b, n as d, G as C, c as j, M as T, N as E, O, P as f, a3 as v, R as w, o as h, p as D, S as P, q as k, r as x, T as y, b as A, V as H, t as M, a1 as V, a0 as B, _ as G, d as N, J as R, H as q, K as U, e as z, W as I, $ as J, f as K, g as L, x as Q, j as W, i as X, y as Y, k as Z, X as _, I as $, Q as F, L as aa, Z as sa, z as ea, s as ta, U as ia, Y as ra, a as na, u as oa } from "./index-BLbc2zG5.js";
+import { h as a } from "./index--faZajmD.js";
+import { A as r, X as o, Y as n, q as l, v as c, r as p, C as S, d as u, U as m, W as g, ai as d, f as b, D as C, ah as h, af as T, w as j, j as w, G as D, t as f, c as v, I as E, K as O, M as k, Q as y, O as P, P as V, ag as x, R as A, z as B, S as G, g as H, e as M, B as N, y as R, J as q, L as F, T as I, x as K, b as U, H as z, N as J, V as L, ae as Q, ad as W, ab as X, k as Y, a2 as Z, a0 as _, a3 as $, l as aa, a7 as sa, ac as ea, m as ta, n as ia, Z as ra, o as oa, i as na, _ as la, p as ca, a8 as pa, a1 as Sa, a5 as ua, a4 as ma, aa as ga, $ as da, s as ba, a6 as Ca, a9 as ha, a as Ta, u as ja } from "./index--faZajmD.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
-  n as Button,
-  o as ButtonState,
-  c as Canvas,
-  l as Circle,
+  o as Button,
+  n as ButtonState,
+  l as Canvas,
+  c as Circle,
   p as Container,
-  S as DOMContainer,
-  m as DOMElement,
-  u as DisplayObject,
-  g as EVENTS,
-  b as Easing,
-  d as Ellipse,
-  C as Graphics,
-  j as Howl,
+  S as ControlsBase,
+  u as ControlsDirective,
+  m as DOMContainer,
+  g as DOMElement,
+  d as DisplayObject,
+  b as Drag,
+  C as Drop,
+  h as EVENTS,
+  T as Easing,
+  j as Ellipse,
+  w as Flash,
+  D as GamepadControls,
+  f as Graphics,
+  v as Howl,
   e as Howler,
-  T as Mesh,
-  E as NineSliceSprite,
-  O as ObjectSubject,
-  f as ParticlesEmitter,
-  v as RadialGradient,
-  w as Rect,
-  h as Scene,
-  D as Sprite,
-  P as Svg,
-  k as Text,
-  x as TilingSprite,
-  y as Triangle,
-  A as Utils,
-  H as Video,
-  M as Viewport,
-  V as animatedSequence,
-  B as animatedSignal,
-  G as bootstrapCanvas,
-  N as computed,
-  R as cond,
-  q as createComponent,
-  U as currentSubscriptionsTracker,
-  z as effect,
-  I as h,
-  J as isAnimatedSignal,
-  K as isArraySubject,
-  L as isComputed,
-  Q as isElement,
-  W as isObjectSubject,
-  X as isObservable,
-  Y as isPrimitive,
-  Z as isSignal,
-  _ as isTrigger,
-  $ as loop,
-  F as mount,
-  aa as mountTracker,
-  sa as on,
-  ea as registerComponent,
-  ta as signal,
-  ia as tick,
-  ra as trigger,
-  na as useDefineProps,
-  oa as useProps
+  E as Input,
+  O as KeyboardControls,
+  k as Mesh,
+  y as NineSliceSprite,
+  P as ObjectSubject,
+  V as ParticlesEmitter,
+  x as RadialGradient,
+  A as Rect,
+  B as Scene,
+  G as Scheduler,
+  H as Shake,
+  M as Sound,
+  N as Sprite,
+  R as Svg,
+  q as Text,
+  F as TilingSprite,
+  I as Transition,
+  K as Triangle,
+  U as Utils,
+  z as Video,
+  J as Viewport,
+  L as ViewportFollow,
+  Q as animatedSequence,
+  W as animatedSignal,
+  X as bootstrapCanvas,
+  Y as computed,
+  Z as cond,
+  _ as createComponent,
+  $ as currentSubscriptionsTracker,
+  aa as effect,
+  sa as h,
+  ea as isAnimatedSignal,
+  ta as isArraySubject,
+  ia as isComputed,
+  ra as isElement,
+  oa as isObjectSubject,
+  na as isObservable,
+  la as isPrimitive,
+  ca as isSignal,
+  pa as isTrigger,
+  Sa as loop,
+  ua as mount,
+  ma as mountTracker,
+  ga as on,
+  da as registerComponent,
+  ba as signal,
+  Ca as tick,
+  ha as trigger,
+  Ta as useDefineProps,
+  ja as useProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.34",
+  "version": "2.0.0-beta.36",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -12,6 +12,7 @@
     "@pixi/layout": "^3.0.2",
     "@signe/reactive": "^2.3.3",
     "howler": "^2.2.4",
+    "joypad.js": "^2.3.5",
     "pixi-filters": "^6.0.5",
     "pixi-viewport": "^6.0.3",
     "popmotion": "^11.0.5",

package/src/components/Container.ts

@@ -4,6 +4,7 @@ import { DisplayObject } from "./DisplayObject";
 import { ComponentFunction } from "../engine/signal";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { setObservablePoint } from "../engine/utils";
+import { isPercent } from "../utils/functions";
 
 interface ContainerProps extends DisplayObjectProps {
   sortableChildren?: boolean;
@@ -34,6 +35,22 @@ export class CanvasContainer extends DisplayObject(PixiContainer) {
         componentInstance.addChild(child);
       });
     }
+
+    // Listen to layout events to update displayWidth and displayHeight with computed values
+    const isWidthPercentage = isPercent(props.width);
+    const isHeightPercentage = isPercent(props.height);
+
+    if (isWidthPercentage || isHeightPercentage) {
+      this.on('layout', (event) => {
+        const layoutBox = event.computedLayout;
+        if (isWidthPercentage && layoutBox.width !== undefined) {
+          this.displayWidth.set(layoutBox.width);
+        }
+        if (isHeightPercentage && layoutBox.height !== undefined) {
+          this.displayHeight.set(layoutBox.height);
+        }
+      });
+    }
   }
 }
 

package/src/components/DisplayObject.ts

@@ -118,6 +118,8 @@ export function DisplayObject(extendClass) {
     disableLayout: boolean = false;
     // Store registered event listeners for cleanup
     #registeredEvents: Map<string, Function> = new Map();
+    // Store computed layout box dimensions
+    #computedLayoutBox: { width?: number; height?: number } | null = null;
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
@@ -188,6 +190,19 @@ export function DisplayObject(extendClass) {
         }
         this.isMounted = true;
         this.onUpdate(props);
+        
+        // Listen to layout events to store computed layout dimensions
+        const layoutHandler = (event: any) => {
+          if (event.computedLayout) {
+            this.#computedLayoutBox = {
+              width: event.computedLayout.width,
+              height: event.computedLayout.height,
+            };
+          }
+        };
+        this.on('layout', layoutHandler);
+        this.#registeredEvents.set('layout', layoutHandler);
+        
         if (this.onAfterMount) {
           await this.onAfterMount();
         }
@@ -466,12 +481,36 @@ export function DisplayObject(extendClass) {
       }
     }
 
-    getWidth() {
-      return this.displayWidth();
-    }
-
-    getHeight() {
-      return this.displayHeight();
+    getWidth(): number {
+      // If width is a percentage, use computed layout box
+      if (isPercent(this.fullProps.width)) {
+        if (this.#computedLayoutBox?.width !== undefined) {
+          return this.#computedLayoutBox.width;
+        }
+        // Fallback to native width if layout not yet computed
+        return typeof this.width === 'number' ? this.width : 0;
+      }
+      // For static values, use native PixiJS width or displayWidth signal
+      const staticWidth = typeof this.width === 'number' && this.width > 0 
+        ? this.width 
+        : (typeof this.displayWidth() === 'number' ? this.displayWidth() : 0);
+      return staticWidth;
+    }
+
+    getHeight(): number {
+      // If height is a percentage, use computed layout box
+      if (isPercent(this.fullProps.height)) {
+        if (this.#computedLayoutBox?.height !== undefined) {
+          return this.#computedLayoutBox.height;
+        }
+        // Fallback to native height if layout not yet computed
+        return typeof this.height === 'number' ? this.height : 0;
+      }
+      // For static values, use native PixiJS height or displayHeight signal
+      const staticHeight = typeof this.height === 'number' && this.height > 0 
+        ? this.height 
+        : (typeof this.displayHeight() === 'number' ? this.displayHeight() : 0);
+      return staticHeight;
     }
 
     // Min/Max constraints

package/src/components/Sprite.ts

@@ -86,10 +86,65 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
   private currentAnimationContainer: Container | null = null;
 
+  /**
+   * Auto-detects image dimensions by loading the image and reading its natural size
+   * This is used when width/height are not explicitly provided in the spritesheet definition
+   * 
+   * @param imagePath - Path to the image file
+   * @returns Object containing the detected width and height of the image
+   * 
+   * @example
+   * ```typescript
+   * const { width, height } = await sprite.detectImageDimensions('path/to/image.png');
+   * // width: 256, height: 128
+   * ```
+   */
+  private async detectImageDimensions(imagePath: string): Promise<{ width: number; height: number }> {
+    if (!imagePath || typeof imagePath !== 'string' || imagePath.trim() === '') {
+      throw new Error(`Invalid image path provided to detectImageDimensions: ${imagePath}`);
+    }
+    
+    const texture = await Assets.load(imagePath);
+    return {
+      width: texture.width,
+      height: texture.height,
+    };
+  }
+
+  /**
+   * Creates textures from a spritesheet image by cutting it into frames
+   * Automatically detects image dimensions if width/height are not provided
+   * 
+   * @param options - Texture options containing image path, dimensions, and frame configuration
+   * @returns A 2D array of textures organized by rows and columns
+   * 
+   * @example
+   * ```typescript
+   * // With explicit dimensions
+   * const textures = await sprite.createTextures({
+   *   image: 'path/to/image.png',
+   *   width: 256,
+   *   height: 128,
+   *   framesWidth: 4,
+   *   framesHeight: 2,
+   *   spriteWidth: 64,
+   *   spriteHeight: 64
+   * });
+   * 
+   * // Without dimensions (automatically detected)
+   * const textures = await sprite.createTextures({
+   *   image: 'path/to/image.png',
+   *   framesWidth: 4,
+   *   framesHeight: 2,
+   *   spriteWidth: 64,
+   *   spriteHeight: 64
+   * });
+   * ```
+   */
   private async createTextures(
     options: Required<TextureOptionsMerging>
   ): Promise<Texture[][]> {
-    const { width, height, framesHeight, framesWidth, image, offset } = options;
+    let { width, height, framesHeight, framesWidth, image, offset } = options;
     
     if (!image || typeof image !== 'string' || image.trim() === '') {
       console.warn('Invalid image path provided to createTextures:', image);
@@ -97,6 +152,17 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     }
     
     const texture = await Assets.load(image);
+    
+    // Auto-detect width and height from the image if not provided
+    if (!width || width <= 0) {
+      width = texture.width;
+      options.width = width;
+    }
+    if (!height || height <= 0) {
+      height = texture.height;
+      options.height = height;
+    }
+    
     const spriteWidth = options.spriteWidth;
     const spriteHeight = options.spriteHeight;
     const frames: Texture[][] = [];
@@ -155,12 +221,30 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       } as any;
       const {
         rectWidth,
-        width = 0,
+        width: widthOption = 0,
         framesWidth = 1,
         rectHeight,
-        height = 0,
+        height: heightOption = 0,
         framesHeight = 1,
+        image,
       } = optionsTextures;
+      
+      // Auto-detect width and height from the image if not provided
+      let width = widthOption;
+      let height = heightOption;
+      
+      if (image && ((!width || width <= 0) || (!height || height <= 0))) {
+        const dimensions = await this.detectImageDimensions(image);
+        if (!width || width <= 0) {
+          width = dimensions.width;
+          optionsTextures.width = width;
+        }
+        if (!height || height <= 0) {
+          height = dimensions.height;
+          optionsTextures.height = height;
+        }
+      }
+      
       optionsTextures.spriteWidth = rectWidth ? rectWidth : width / framesWidth;
       optionsTextures.spriteHeight = rectHeight
         ? rectHeight

package/src/components/types/DisplayObject.ts

@@ -2,6 +2,8 @@ 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";
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
@@ -64,6 +66,8 @@ export interface DisplayObjectProps {
     // Directives
     drag?: DragProps;
     viewportFollow?: ViewportFollowProps;
+    shake?: ShakeProps;
+    flash?: FlashProps;
 
     // Events
     click?: PIXI.FederatedEventHandler;

package/src/directives/Controls.ts

@@ -0,0 +1,182 @@
+import { Directive, registerDirective } from "../engine/directive";
+import { Element } from "../engine/reactive";
+import { ControlsBase, Controls } from "./ControlsBase";
+import { KeyboardControls } from "./KeyboardControls";
+import { GamepadControls, GamepadConfig } from "./GamepadControls";
+
+/**
+ * Controls directive that coordinates keyboard and gamepad input systems
+ * 
+ * This directive automatically activates both keyboard and gamepad 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.
+ * 
+ * @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;
+
+    /**
+     * Initialize the controls directive
+     * Sets up keyboard and gamepad controls if available
+     */
+    onInit(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();
+        }
+    }
+
+    /**
+     * Mount hook (no specific action needed)
+     */
+    onMount(element: Element) {}
+
+    /**
+     * Update controls configuration
+     * Updates both keyboard and gamepad controls
+     */
+    onUpdate(props: any) {
+        const value = props.controls?.value ?? props.controls;
+        if (!value) return;
+
+        if (this.keyboardControls) {
+            this.keyboardControls.setInputs(value as Controls);
+        }
+
+        if (this.gamepadControls) {
+            this.gamepadControls.setInputs(value as Controls & { gamepad?: GamepadConfig });
+        }
+    }
+
+    /**
+     * Cleanup and destroy all control systems
+     */
+    onDestroy(element: Element) {
+        if (this.keyboardControls) {
+            this.keyboardControls.destroy();
+            this.keyboardControls = null;
+        }
+
+        if (this.gamepadControls) {
+            this.gamepadControls.destroy();
+            this.gamepadControls = 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)
+     * @returns Promise that resolves when the action is complete
+     */
+    async applyControl(controlName: string | number, isDown?: boolean): Promise<void> {
+        if (this.keyboardControls) {
+            await this.keyboardControls.applyControl(controlName, isDown);
+        }
+        if (this.gamepadControls) {
+            await this.gamepadControls.applyControl(controlName, isDown);
+        }
+    }
+
+    /**
+     * Stop listening to inputs
+     * Stops both keyboard and gamepad input processing
+     */
+    stopInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.stopInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.stopInputs();
+        }
+    }
+
+    /**
+     * Resume listening to inputs
+     * Resumes both keyboard and gamepad input processing
+     */
+    listenInputs() {
+        if (this.keyboardControls) {
+            this.keyboardControls.listenInputs();
+        }
+        if (this.gamepadControls) {
+            this.gamepadControls.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;
+    }
+}
+
+registerDirective('controls', ControlsDirective);