canvasengine 2.0.0-beta.38 → 2.0.0-beta.39

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-BgNWflRE.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-BgNWflRE.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.38",
+  "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()
   ]);
 }