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

package/dist/index.js

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

package/dist/utils/GlobalAssetLoader.d.ts

@@ -0,0 +1,141 @@
+/**
+ * Global Asset Loader
+ *
+ * Tracks the loading progress of all assets (images, spritesheets, etc.) across all sprites in a component tree.
+ * This allows components to know when all assets are loaded, useful for displaying loaders or progress bars.
+ *
+ * @example
+ * ```typescript
+ * const loader = new GlobalAssetLoader();
+ *
+ * loader.onProgress((progress) => {
+ *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+ * });
+ *
+ * loader.onComplete(() => {
+ *   console.log('All assets loaded!');
+ * });
+ *
+ * // Register assets as they start loading
+ * const assetId = loader.registerAsset('path/to/image.png');
+ *
+ * // Update progress
+ * loader.updateProgress(assetId, 0.5);
+ *
+ * // Mark as complete
+ * loader.completeAsset(assetId);
+ * ```
+ */
+export declare class GlobalAssetLoader {
+    private assets;
+    private onProgressCallbacks;
+    private onCompleteCallbacks;
+    private assetCounter;
+    private isComplete;
+    /**
+     * Registers a new asset to track
+     *
+     * @param assetPath - The path or identifier of the asset being loaded
+     * @returns A unique ID for this asset that should be used for progress updates
+     *
+     * @example
+     * ```typescript
+     * const assetId = loader.registerAsset('path/to/image.png');
+     * ```
+     */
+    registerAsset(assetPath: string): string;
+    /**
+     * Updates the progress of a specific asset
+     *
+     * @param assetId - The ID returned by registerAsset
+     * @param progress - Progress value between 0 and 1
+     *
+     * @example
+     * ```typescript
+     * loader.updateProgress(assetId, 0.5); // 50% loaded
+     * ```
+     */
+    updateProgress(assetId: string, progress: number): void;
+    /**
+     * Marks an asset as completely loaded
+     *
+     * @param assetId - The ID returned by registerAsset
+     *
+     * @example
+     * ```typescript
+     * loader.completeAsset(assetId);
+     * ```
+     */
+    completeAsset(assetId: string): void;
+    /**
+     * Removes an asset from tracking (useful for cleanup)
+     *
+     * @param assetId - The ID returned by registerAsset
+     */
+    removeAsset(assetId: string): void;
+    /**
+     * Registers a callback that will be called whenever the global progress changes
+     *
+     * @param callback - Function that receives the global progress (0-1)
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onProgress((progress) => {
+     *   console.log(`Loading: ${(progress * 100).toFixed(0)}%`);
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onProgress(callback: (progress: number) => void): () => void;
+    /**
+     * Registers a callback that will be called when all assets are loaded
+     *
+     * @param callback - Function to call when all assets are complete
+     * @returns A function to unregister the callback
+     *
+     * @example
+     * ```typescript
+     * const unsubscribe = loader.onComplete(() => {
+     *   console.log('All assets loaded!');
+     * });
+     *
+     * // Later, to unsubscribe:
+     * unsubscribe();
+     * ```
+     */
+    onComplete(callback: () => void): () => void;
+    /**
+     * Gets the current global progress (0-1)
+     *
+     * @returns Progress value between 0 and 1
+     */
+    getGlobalProgress(): number;
+    /**
+     * Gets the number of assets currently being tracked
+     *
+     * @returns Number of registered assets
+     */
+    getAssetCount(): number;
+    /**
+     * Gets the number of completed assets
+     *
+     * @returns Number of completed assets
+     */
+    getCompletedCount(): number;
+    /**
+     * Checks if all assets are loaded and triggers onComplete callbacks
+     */
+    private checkCompletion;
+    /**
+     * Updates global progress and notifies all progress callbacks
+     */
+    private updateGlobalProgress;
+    /**
+     * Resets the loader, clearing all assets and callbacks
+     */
+    reset(): void;
+}
+//# sourceMappingURL=GlobalAssetLoader.d.ts.map

package/dist/utils/GlobalAssetLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalAssetLoader.d.ts","sourceRoot":"","sources":["../../src/utils/GlobalAssetLoader.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAoE;IAClF,OAAO,CAAC,mBAAmB,CAA8C;IACzE,OAAO,CAAC,mBAAmB,CAA8B;IACzD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,UAAU,CAAkB;IAEpC;;;;;;;;;;OAUG;IACH,aAAa,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAQxC;;;;;;;;;;OAUG;IACH,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAWvD;;;;;;;;;OASG;IACH,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAapC;;;;OAIG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAKlC;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;IAe5D;;;;;;;;;;;;;;;OAeG;IACH,UAAU,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI;IAa5C;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAa3B;;;;OAIG;IACH,aAAa,IAAI,MAAM;IAIvB;;;;OAIG;IACH,iBAAiB,IAAI,MAAM;IAQ3B;;OAEG;IACH,OAAO,CAAC,eAAe;IAiBvB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAa5B;;OAEG;IACH,KAAK,IAAI,IAAI;CAOd"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.37",
+  "version": "2.0.0-beta.39",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button.ts

@@ -1,10 +1,13 @@
-import { effect, signal, computed } from "@signe/reactive";
+import { effect, signal, computed, isSignal } from "@signe/reactive";
 import { FederatedPointerEvent } from "pixi.js";
 import { h } from "../engine/signal";
 import { useDefineProps } from "../hooks/useProps";
 import { Container } from "./Container";
-import { Rect } from "./Graphic";
+import { Rect, Circle, Ellipse } from "./Graphic";
 import { Text } from "./Text";
+import { ControlsDirective } from "../directives/Controls";
+import { JoystickControls } from "../directives/JoystickControls";
+import { Element } from "../engine/reactive";
 
 /**
  * Button states for visual feedback
@@ -82,6 +85,16 @@ export interface ButtonProps {
   visible?: boolean;
   /** Button cursor */
   cursor?: string;
+  /** Controls instance to automatically apply button events to (e.g., ControlsDirective or JoystickControls) */
+  controls?: ControlsDirective | JoystickControls | any;
+  /** Name of the control to trigger with applyControl when button is clicked */
+  controlName?: string;
+  /** Shape of the button background: 'rect', 'circle', or 'ellipse' */
+  shape?: 'rect' | 'circle' | 'ellipse';
+  /** Custom background component or element (replaces default background if provided) */
+  background?: Element | any;
+  /** Custom children components for button content (takes priority over text if provided) */
+  children?: Element[];
 }
 
 /**
@@ -94,18 +107,52 @@ export interface ButtonProps {
  * The button is built using a Container with background and text elements,
  * providing reactive state management and event handling.
  * 
- * @param props - Button configuration including text, styling, and event handlers
+ * ## Features
+ * 
+ * - **Controls Integration**: Automatically trigger controls via `applyControl` when clicked
+ * - **Multiple Shapes**: Support for rect, circle, and ellipse shapes
+ * - **Custom Content**: Use children components for custom button content
+ * - **Custom Background**: Provide a custom background component
+ * 
+ * @param props - Button configuration including text, styling, controls, shape, and event handlers
  * @returns A reactive Button component
  * @example
  * ```typescript
  * // Simple button with text and click handler
  * const simpleButton = Button({
  *   text: "Click Me",
- *   onClick: () => console.log("Button clicked!"),
+ *   click: () => console.log("Button clicked!"),
  *   width: 150,
  *   height: 50
  * });
  * 
+ * // Button with controls integration
+ * const jumpButton = Button({
+ *   text: "Jump",
+ *   controls: controlsInstance,
+ *   controlName: "jump",
+ *   width: 120,
+ *   height: 40
+ * });
+ * 
+ * // Circular button
+ * const circleButton = Button({
+ *   text: "Action",
+ *   shape: "circle",
+ *   width: 100,
+ *   height: 100
+ * });
+ * 
+ * // Button with custom content (children)
+ * const customButton = Button({
+ *   shape: "circle",
+ *   width: 80,
+ *   height: 80,
+ *   children: [
+ *     h(Sprite, { image: "icon.png", width: 50, height: 50 })
+ *   ]
+ * });
+ * 
  * // Styled button with custom colors
  * const styledButton = Button({
  *   text: "Styled Button",
@@ -149,7 +196,7 @@ export function Button(props: ButtonProps) {
 
   // Define reactive props with defaults
   const defineProps = useDefineProps(props);
-  const { text, disabled, width, height, style } = defineProps({
+  const { text, disabled, width, height, style, shape, controlName } = defineProps({
     text: {
       type: String,
       default: ""
@@ -169,9 +216,26 @@ export function Button(props: ButtonProps) {
     style: {
       type: Object,
       default: () => ({})
+    },
+    shape: {
+      type: String,
+      default: "rect"
+    },
+    controlName: {
+      type: String,
+      default: undefined
     }
   });
 
+  // Helper function to get controls instance (handles signals like Joystick)
+  const getControls = () => {
+    if (!props.controls) return null;
+    if (isSignal(props.controls)) {
+      return props.controls();
+    }
+    return props.controls;
+  };
+
   // Update button state based on disabled and interaction states
   effect(() => {
     const isDisabled = disabled();
@@ -202,25 +266,119 @@ export function Button(props: ButtonProps) {
       isPressed.set(false);
       props.hoverLeave?.(event);
     },
-    pointerdown: (event: FederatedPointerEvent) => {
+    pointerdown: async (event: FederatedPointerEvent) => {
       if (!disabled()) {
         isPressed.set(true);
         props.pressDown?.(event);
+        
+        // Apply control if controls and controlName are provided
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name, true);
+        }
       }
     },
-    pointerup: (event: FederatedPointerEvent) => {
+    pointerup: async (event: FederatedPointerEvent) => {
       if (!disabled() && isPressed()) {
         isPressed.set(false);
         props.pressUp?.(event);
+        
+        // Apply control release if controls and controlName are provided
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name, false);
+        }
       }
     },
-    pointertap: (event: FederatedPointerEvent) => {
+    pointertap: async (event: FederatedPointerEvent) => {
       if (!disabled()) {
         props.click?.(event);
+        
+        // Apply control if controls and controlName are provided (press and release)
+        const controls = getControls();
+        const name = controlName();
+        if (controls && name && controls.applyControl) {
+          await controls.applyControl(name);
+        }
       }
     }
   };
 
+  // Generate background element
+  const getBackgroundElement = () => {
+    // If custom background is provided, use it
+    if (props.background) {
+      return props.background;
+    }
+
+    // Otherwise, use shape-based background
+    const currentShape = shape();
+    const bgColor = computed(() => {
+      const currentStyle = style();
+      const backgroundColor = currentStyle.backgroundColor || {
+        [ButtonState.Normal]: "#007bff",
+        [ButtonState.Hover]: "#0056b3",
+        [ButtonState.Pressed]: "#004085",
+        [ButtonState.Disabled]: "#6c757d"
+      };
+      const state = currentState();
+      return backgroundColor[state] || backgroundColor[ButtonState.Normal];
+    });
+
+    if (currentShape === 'circle') {
+      // For circle, use the smaller dimension as radius
+      const radius = computed(() => Math.min(width(), height()) / 2);
+      return h(Circle, {
+        radius: radius,
+        x: computed(() => width() / 2),
+        y: computed(() => height() / 2),
+        color: bgColor
+      });
+    } else if (currentShape === 'ellipse') {
+      return h(Ellipse, {
+        width: width,
+        height: height,
+        color: bgColor
+      });
+    } else {
+      // Default: rect
+      return h(Rect, {
+        width: width,
+        height: height,
+        color: bgColor
+      });
+    }
+  };
+
+  // Generate content element(s)
+  const getContentElements = () => {
+    // If children are provided, use them (priority over text)
+    if (props.children && props.children.length > 0) {
+      return props.children;
+    }
+
+    // Otherwise, use text
+    return [
+      h(Text, {
+        text: text,
+        x: computed(() => width() / 2),
+        y: computed(() => height() / 2),
+        anchor: { x: 0.5, y: 0.5 },
+        style: computed(() => {
+          const currentStyle = style();
+          const textStyle = currentStyle.text || {};
+          return {
+            fontSize: textStyle.fontSize || 16,
+            fontFamily: textStyle.fontFamily || "Arial",
+            fill: textStyle.color || "#ffffff"
+          };
+        })()
+      })
+    ];
+  };
+
   // Return Container with h() children
   return h(Container, {
     x: props.x,
@@ -232,38 +390,7 @@ export function Button(props: ButtonProps) {
     cursor: props.cursor || "pointer",
     ...eventHandlers
   }, [
-    // Background element (either sprite or graphics)
-    h(Rect, {
-      width: width,
-      height: height,
-      color: computed(() => {
-        const currentStyle = style();
-        const backgroundColor = currentStyle.backgroundColor || {
-          [ButtonState.Normal]: "#007bff",
-          [ButtonState.Hover]: "#0056b3",
-          [ButtonState.Pressed]: "#004085",
-          [ButtonState.Disabled]: "#6c757d"
-        };
-        const state = currentState();
-        return backgroundColor[state] || backgroundColor[ButtonState.Normal];
-      })
-    }),
-    
-    // Text element
-    h(Text, {
-      text: text,
-      x: computed(() => width() / 2),
-      y: computed(() => height() / 2),
-      anchor: { x: 0.5, y: 0.5 },
-      style: computed(() => {
-        const currentStyle = style();
-        const textStyle = currentStyle.text || {};
-        return {
-          fontSize: textStyle.fontSize || 16,
-          fontFamily: textStyle.fontFamily || "Arial",
-          fill: textStyle.color || "#ffffff"
-        };
-      })()
-    })
+    getBackgroundElement(),
+    ...getContentElements()
   ]);
 }

package/src/components/Canvas.ts

@@ -12,6 +12,7 @@ import { ComponentFunction } from "../engine/signal";
 import { SignalOrPrimitive } from "./types";
 import { Size } from "./types/DisplayObject";
 import { Scheduler, Tick } from "../directives/Scheduler";
+import { GlobalAssetLoader } from "../utils/GlobalAssetLoader";
 
 interface CanvasElement extends Element<ComponentInstance> {
   render: (rootElement: HTMLElement, app?: Application) => void;
@@ -49,11 +50,13 @@ export const Canvas: ComponentFunction<CanvasProps> = async (props = {}) => {
   });
 
   props.isRoot = true;
+  const globalLoader = new GlobalAssetLoader();
   const options: CanvasProps = {
     ...props,
     context: {
       canvasSize,
       app: signal(null),
+      globalLoader,
     },
     width: width?.(),
     height: height?.(),