canvasengine 2.0.0-beta.25 → 2.0.0-beta.27

package/dist/index.js

@@ -1,62 +1,64 @@
-import { h as a } from "./index-5TTorHyA.js";
-import { A as r, C as n, m as o, l as c, D as l, v as p, a3 as m, a2 as S, a0 as g, n as u, G as b, c as d, M as C, N as j, O as T, P as E, a1 as O, R as f, o as v, p as w, S as h, q as D, r as P, T as k, b as x, V as y, t as A, $ as H, _ as M, Y as V, d as G, H as N, z as R, I as q, e as U, Q as z, Z as B, f as I, g as J, w as K, j as L, i as Q, x as W, k as X, U as Y, B as Z, K as _, J as $, X as F, y as aa, s as sa, L as ea, W as ia, a as ta, u as ra } from "./index-5TTorHyA.js";
+import { h as a } from "./index-JzoygiZz.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-JzoygiZz.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
-  n as Canvas,
-  o as Circle,
-  c as Container,
-  l as DOMContainer,
-  p as DOMElement,
-  m as DisplayObject,
-  S as EVENTS,
-  g as Easing,
-  u as Ellipse,
-  b as Graphics,
-  d as Howl,
+  n as Button,
+  o as ButtonState,
+  c as Canvas,
+  l 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,
   e as Howler,
-  C as Mesh,
-  j as NineSliceSprite,
-  T as ObjectSubject,
-  E as ParticlesEmitter,
-  O as RadialGradient,
-  f as Rect,
-  v as Scene,
-  w as Sprite,
-  h as Svg,
-  D as Text,
-  P as TilingSprite,
-  k as Triangle,
-  x as Utils,
-  y as Video,
-  A as Viewport,
-  H as animatedSequence,
-  M as animatedSignal,
-  V as bootstrapCanvas,
-  G as computed,
-  N as cond,
-  R as createComponent,
-  q as currentSubscriptionsTracker,
-  U as effect,
-  z as h,
-  B as isAnimatedSignal,
-  I as isArraySubject,
-  J as isComputed,
-  K as isElement,
-  L as isObjectSubject,
-  Q as isObservable,
-  W as isPrimitive,
-  X as isSignal,
-  Y as isTrigger,
-  Z as loop,
-  _ as mount,
-  $ as mountTracker,
-  F as on,
-  aa as registerComponent,
-  sa as signal,
-  ea as tick,
-  ia as trigger,
-  ta as useDefineProps,
-  ra as useProps
+  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
 };
 //# sourceMappingURL=index.js.map

package/package.json

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

package/src/components/Button.ts

@@ -0,0 +1,269 @@
+import { effect, signal, computed } 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 { Text } from "./Text";
+
+/**
+ * Button states for visual feedback
+ */
+export enum ButtonState {
+  Normal = "normal",
+  Hover = "hover",
+  Pressed = "pressed",
+  Disabled = "disabled"
+}
+
+/**
+ * Button style configuration for different visual approaches
+ */
+export interface ButtonStyle {
+  /** Background color for each state */
+  backgroundColor?: {
+    [ButtonState.Normal]?: string;
+    [ButtonState.Hover]?: string;
+    [ButtonState.Pressed]?: string;
+    [ButtonState.Disabled]?: string;
+  };
+  /** Border configuration */
+  border?: {
+    color?: string;
+    width?: number;
+    radius?: number;
+  };
+  /** Text styling */
+  text?: {
+    color?: string;
+    fontSize?: number;
+    fontFamily?: string;
+  };
+  /** Sprite textures for each state (alternative to backgroundColor) */
+  textures?: {
+    [ButtonState.Normal]?: string;
+    [ButtonState.Hover]?: string;
+    [ButtonState.Pressed]?: string;
+    [ButtonState.Disabled]?: string;
+  };
+}
+
+/**
+ * Properties for the Button component
+ */
+export interface ButtonProps {
+  /** Button text content */
+  text?: string;
+  /** Button disabled state */
+  disabled?: boolean;
+  /** Click event handler */
+  click?: (event: FederatedPointerEvent) => void;
+  /** Hover enter event handler */
+  hoverEnter?: (event: FederatedPointerEvent) => void;
+  /** Hover leave event handler */
+  hoverLeave?: (event: FederatedPointerEvent) => void;
+  /** Press down event handler */
+  pressDown?: (event: FederatedPointerEvent) => void;
+  /** Press up event handler */
+  pressUp?: (event: FederatedPointerEvent) => void;
+  /** Visual style configuration */
+  style?: ButtonStyle;
+  /** Button width */
+  width?: number;
+  /** Button height */
+  height?: number;
+  /** Button position X */
+  x?: number;
+  /** Button position Y */
+  y?: number;
+  /** Button alpha/opacity */
+  alpha?: number;
+  /** Button visibility */
+  visible?: boolean;
+  /** Button cursor */
+  cursor?: string;
+}
+
+/**
+ * Creates a Button component with interactive states and customizable styling.
+ * 
+ * This component provides a fully interactive button with visual feedback
+ * for different states (normal, hover, pressed, disabled). It supports both
+ * sprite-based and graphics-based rendering approaches.
+ * 
+ * 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
+ * @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!"),
+ *   width: 150,
+ *   height: 50
+ * });
+ * 
+ * // Styled button with custom colors
+ * const styledButton = Button({
+ *   text: "Styled Button",
+ *   style: {
+ *     backgroundColor: {
+ *       normal: "#28a745",
+ *       hover: "#218838",
+ *       pressed: "#1e7e34",
+ *       disabled: "#6c757d"
+ *     },
+ *     border: {
+ *       radius: 8,
+ *       width: 2,
+ *       color: "#ffffff"
+ *     },
+ *     text: {
+ *       fontSize: 18,
+ *       color: "#ffffff"
+ *     }
+ *   }
+ * });
+ * 
+ * // Sprite-based button
+ * const spriteButton = Button({
+ *   text: "Play Game",
+ *   style: {
+ *     textures: {
+ *       normal: "/assets/button-normal.png",
+ *       hover: "/assets/button-hover.png",
+ *       pressed: "/assets/button-pressed.png"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export function Button(props: ButtonProps) {
+  // Internal state signals
+  const currentState = signal(ButtonState.Normal);
+  const isPressed = signal(false);
+  const isHovered = signal(false);
+
+  // Define reactive props with defaults
+  const defineProps = useDefineProps(props);
+  const { text, disabled, width, height, style } = defineProps({
+    text: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: Number,
+      default: 120
+    },
+    height: {
+      type: Number,
+      default: 40
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+
+  // Update button state based on disabled and interaction states
+  effect(() => {
+    const isDisabled = disabled();
+    const pressed = isPressed();
+    const hovered = isHovered();
+
+    if (isDisabled) {
+      currentState.set(ButtonState.Disabled);
+    } else if (pressed) {
+      currentState.set(ButtonState.Pressed);
+    } else if (hovered) {
+      currentState.set(ButtonState.Hover);
+    } else {
+      currentState.set(ButtonState.Normal);
+    }
+  });
+
+  // Event handlers
+  const eventHandlers = {
+    pointerenter: (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        isHovered.set(true);
+        props.hoverEnter?.(event);
+      }
+    },
+    pointerleave: (event: FederatedPointerEvent) => {
+      isHovered.set(false);
+      isPressed.set(false);
+      props.hoverLeave?.(event);
+    },
+    pointerdown: (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        isPressed.set(true);
+        props.pressDown?.(event);
+      }
+    },
+    pointerup: (event: FederatedPointerEvent) => {
+      if (!disabled() && isPressed()) {
+        isPressed.set(false);
+        props.pressUp?.(event);
+      }
+    },
+    pointertap: (event: FederatedPointerEvent) => {
+      if (!disabled()) {
+        props.click?.(event);
+      }
+    }
+  };
+
+  // Return Container with h() children
+  return h(Container, {
+    x: props.x,
+    y: props.y,
+    width: props.width,
+    height: props.height,
+    alpha: props.alpha,
+    visible: props.visible,
+    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"
+        };
+      })()
+    })
+  ]);
+}

package/src/components/DisplayObject.ts

@@ -116,6 +116,8 @@ export function DisplayObject(extendClass) {
     onAfterMount: OnHook | null = null;
     subjectInit = new BehaviorSubject(null);
     disableLayout: boolean = false;
+    // Store registered event listeners for cleanup
+    #registeredEvents: Map<string, Function> = new Map();
 
     get deltaRatio() {
       return this.#canvasContext?.scheduler?.tick.value.deltaRatio;
@@ -131,7 +133,16 @@ export function DisplayObject(extendClass) {
       for (let event of EVENTS) {
         if (props[event] && !this.overrideProps.includes(event)) {
           this.eventMode = "static";
-          this.on(event, props[event]);
+          const eventHandler = props[event];
+          
+          // Store the event handler for cleanup
+          if (event === 'click') {
+            this.on('pointertap', eventHandler);
+            this.#registeredEvents.set('pointertap', eventHandler);
+          } else {
+            this.on(event, eventHandler);
+            this.#registeredEvents.set(event, eventHandler);
+          }
         }
       }
       if (props.onBeforeDestroy || props['on-before-destroy']) {
@@ -159,6 +170,7 @@ export function DisplayObject(extendClass) {
     }
 
     async onMount({ parent, props }: Element<DisplayObject>, index?: number) {
+      if (this.destroyed) return
       this.#canvasContext = props.context;
       if (parent) {
         const instance = parent.componentInstance as DisplayObject;
@@ -188,6 +200,7 @@ export function DisplayObject(extendClass) {
         ...props,
       };
 
+      if (this.destroyed) return
       if (!this.#canvasContext || !this.parent) return;
 
       if (props.x !== undefined) this.setX(props.x);
@@ -283,11 +296,17 @@ export function DisplayObject(extendClass) {
     }
 
     async onDestroy(parent: Element, afterDestroy?: () => void) {
+      // Remove all registered event listeners
+      for (const [eventName, eventHandler] of this.#registeredEvents) {
+        this.off(eventName, eventHandler);
+      }
+      this.#registeredEvents.clear();
+
       if (this.onBeforeDestroy) {
         await this.onBeforeDestroy();
       }
-      super.destroy();
       if (afterDestroy) afterDestroy();
+      super.destroy();
     }
 
     setFlexDirection(direction: FlexDirection) {

package/src/components/Graphic.ts

@@ -105,9 +105,6 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
         if (typeof w == 'string' || typeof h == 'string') {
           return
         }
-        if (w == 0 || h == 0) {
-          return
-        }
         this.clear();
         props.draw?.(this, w, h);
         this.subjectInit.next(this)
@@ -173,7 +170,7 @@ class CanvasGraphics extends DisplayObject(PixiGraphics) {
    */
   async onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void> {
     const _afterDestroyCallback = async () => {
-      this.clearEffect.subscription.unsubscribe();
+      this.clearEffect?.subscription.unsubscribe();
       afterDestroy();
     }
     await super.onDestroy(parent, _afterDestroyCallback);

package/src/components/Sprite.ts

@@ -187,6 +187,7 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
       this.onFinish = sheet.onFinish;
     }
     this.subscriptionTick = tick.observable.subscribe((value) => {
+      if (this.destroyed) return
       this.update(value);
     });
     if (props.sheet?.definition) {
@@ -236,11 +237,11 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
 
       if (this.spritesheet) this.play(this.sheetCurrentAnimation, [this.sheetParams]);
     });
-
     super.onMount(params);
   }
 
   async onUpdate(props) {
+    if (this.destroyed) return
     super.onUpdate(props);
 
     const setTexture = async (image: string) => {
@@ -307,12 +308,17 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
   }
 
   async onDestroy(parent: Element, afterDestroy: () => void): Promise<void> {
-    await super.onDestroy(parent);
-    this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
-    this.subscriptionTick.unsubscribe();
-    if (this.currentAnimationContainer && this.parent instanceof Container) {
-      this.parent.removeChild(this.currentAnimationContainer);
-    }
+    const _afterDestroy = async () => {
+      this.subscriptionSheet.forEach((sub) => sub.unsubscribe());
+      this.subscriptionTick.unsubscribe();
+      if (this.currentAnimationContainer && this.parent instanceof Container) {
+        this.parent.removeChild(this.currentAnimationContainer);
+      }
+      if (afterDestroy) {
+        afterDestroy();
+      }
+    };
+    await super.onDestroy(parent, _afterDestroy);
   }
 
   has(name: string): boolean {

package/src/components/index.ts

@@ -12,4 +12,5 @@ export { Viewport } from './Viewport'
 export { NineSliceSprite } from './NineSliceSprite'
 export { type ComponentInstance } from './DisplayObject'
 export { DOMContainer } from './DOMContainer'
-export { DOMElement } from './DOMElement'
+export { DOMElement } from './DOMElement'
+export { Button, ButtonState, type ButtonProps, type ButtonStyle } from './Button'

package/src/engine/bootstrap.ts

@@ -17,6 +17,7 @@ export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: C
   await app.init({
     resizeTo: rootElement,
     autoStart: false,
+    antialias: true,
     ...(options ?? {})
   });
   const canvasElement = await h(canvas);