canvasengine 2.0.0-beta.35 → 2.0.0-beta.37

package/dist/index.js

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

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/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/Flash.ts

@@ -0,0 +1,409 @@
+import { Container } from 'pixi.js';
+import { Directive, registerDirective } from '../engine/directive';
+import { Element } from '../engine/reactive';
+import { effect, isSignal } from '@signe/reactive';
+import { on, isTrigger, Trigger } from '../engine/trigger';
+import { useProps } from '../hooks/useProps';
+import { SignalOrPrimitive } from '../components/types';
+import { animatedSignal, AnimatedSignal } from '../engine/animation';
+import { Subscription } from 'rxjs';
+
+export type FlashType = 'alpha' | 'tint' | 'both';
+
+export type FlashProps = {
+    /**
+     * Trigger that activates the flash animation
+     * When the trigger is activated, the flash animation will start
+     */
+    trigger?: Trigger<any>;
+    /**
+     * Type of flash effect: 'alpha' (opacity), 'tint' (color), or 'both'
+     * @default 'alpha'
+     */
+    type?: SignalOrPrimitive<FlashType>;
+    /**
+     * Duration of the flash animation in milliseconds
+     * @default 300
+     */
+    duration?: SignalOrPrimitive<number>;
+    /**
+     * Number of flash cycles (flash on/off)
+     * @default 1
+     */
+    cycles?: SignalOrPrimitive<number>;
+    /**
+     * Alpha value when flashing (0 to 1)
+     * Only used when type is 'alpha' or 'both'
+     * @default 0.3
+     */
+    alpha?: SignalOrPrimitive<number>;
+    /**
+     * Tint color when flashing (hex color value)
+     * Only used when type is 'tint' or 'both'
+     * @default 0xffffff (white)
+     */
+    tint?: SignalOrPrimitive<number>;
+    /**
+     * Original alpha value to restore after flash
+     * If not provided, uses the current alpha value
+     */
+    originalAlpha?: number;
+    /**
+     * Original tint value to restore after flash
+     * If not provided, uses the current tint value
+     */
+    originalTint?: number;
+    /**
+     * Callback function called when flash starts
+     */
+    onStart?: () => void;
+    /**
+     * Callback function called when flash completes
+     */
+    onComplete?: () => void;
+}
+
+/**
+ * Flash directive that animates a display object's alpha and/or tint when a trigger is activated.
+ * Creates a flash effect by rapidly changing opacity or color.
+ * 
+ * @example
+ * ```typescript
+ * // Basic usage with trigger
+ * const flashTrigger = trigger();
+ * 
+ * onMount(element) {
+ *   // Element will flash when trigger is activated
+ *   element.props.flash = { trigger: flashTrigger };
+ * }
+ * 
+ * // Trigger the flash
+ * flashTrigger.start();
+ * ```
+ */
+export class Flash extends Directive {
+    private elementRef: Element<Container> | null = null;
+    private progressSignal: AnimatedSignal<number> | null = null;
+    private flashSubscription: any = null;
+    private alphaEffect: Subscription | null = null;
+    private tintEffect: Subscription | null = null;
+    private originalAlpha: number = 1;
+    private originalTint: number = 0xffffff;
+    private currentFlashConfig: {
+        type: FlashType;
+        duration: number;
+        cycles: number;
+        flashAlpha: number;
+        flashTint: number;
+    } | null = null;
+
+    /**
+     * Initializes the flash directive
+     * @param element - The element to attach the flash effect to
+     */
+    onInit(element: Element<Container>) {
+        this.elementRef = element;
+    }
+
+    /**
+     * Mounts the flash directive and sets up trigger listener
+     * @param element - The element being mounted
+     */
+    onMount(element: Element<Container>) {
+        const instance = element.componentInstance;
+        if (!instance) return;
+
+        const flashProps = this.flashProps;
+        
+        // Check if trigger is provided
+        if (!flashProps.trigger || !isTrigger(flashProps.trigger)) {
+            return;
+        }
+
+        // Store original values once at mount time
+        // Only set if not already stored (to preserve values from first mount)
+        if (this.originalAlpha === 1 && !flashProps.originalAlpha) {
+            this.originalAlpha = instance.alpha ?? 1;
+        } else if (flashProps.originalAlpha !== undefined) {
+            this.originalAlpha = flashProps.originalAlpha;
+        }
+        
+        const currentTint = (instance as any).tint;
+        if (this.originalTint === 0xffffff && !flashProps.originalTint) {
+            this.originalTint = (isSignal(currentTint) ? currentTint() : currentTint) ?? 0xffffff;
+        } else if (flashProps.originalTint !== undefined) {
+            this.originalTint = flashProps.originalTint;
+        }
+
+        // Listen to trigger activation
+        this.flashSubscription = on(flashProps.trigger, async (data) => {
+            await this.performFlash(data);
+        });
+    }
+
+    /**
+     * Gets the flash props with default values
+     * @returns FlashProps with defaults applied
+     */
+    get flashProps(): FlashProps {
+        const flash = this.elementRef?.props.flash;
+        return useProps(flash?.value ?? flash, {
+            type: 'alpha',
+            duration: 300,
+            cycles: 1,
+            alpha: 0.3,
+            tint: 0xffffff,
+        });
+    }
+
+    /**
+     * Performs the flash animation using animatedSignal
+     * @param data - Optional data passed from the trigger that can override default options
+     */
+    private async performFlash(data?: any): Promise<void> {
+        if (!this.elementRef?.componentInstance) return;
+
+        const instance = this.elementRef.componentInstance;
+        const flashProps = this.flashProps;
+        
+        // Use data from trigger to override defaults if provided
+        const type = data?.type ?? (typeof flashProps.type === 'function' ? flashProps.type() : flashProps.type);
+        const duration = data?.duration ?? (typeof flashProps.duration === 'function' ? flashProps.duration() : flashProps.duration);
+        const cycles = data?.cycles ?? (typeof flashProps.cycles === 'function' ? flashProps.cycles() : flashProps.cycles);
+        const flashAlpha = data?.alpha ?? (typeof flashProps.alpha === 'function' ? flashProps.alpha() : flashProps.alpha);
+        const flashTint = data?.tint ?? (typeof flashProps.tint === 'function' ? flashProps.tint() : flashProps.tint);
+
+        // Stop any existing animation first
+        if (this.progressSignal) {
+            // Stop the animation immediately
+            this.progressSignal.set(0, { duration: 0 });
+        }
+
+        // Clean up effects BEFORE restoring values
+        // This prevents effects from continuing to update values after we restore
+        if (this.alphaEffect) {
+            this.alphaEffect.unsubscribe();
+            this.alphaEffect = null;
+        }
+        if (this.tintEffect) {
+            this.tintEffect.unsubscribe();
+            this.tintEffect = null;
+        }
+
+        // Always restore to original values immediately after stopping effects
+        // This ensures that if a new flash starts before the previous one completes,
+        // we restore to the true original values, not the intermediate animation values
+        instance.alpha = this.originalAlpha;
+        const currentTint = (instance as any).tint;
+        if (currentTint !== undefined) {
+            // Ensure originalTint is a primitive value, not a signal
+            const tintValue = typeof this.originalTint === 'number' ? this.originalTint : 0xffffff;
+            // Handle both signal and primitive tint
+            if (isSignal(currentTint)) {
+                currentTint.set(tintValue);
+            } else {
+                (instance as any).tint = tintValue;
+            }
+        }
+
+        // Call onStart callback
+        flashProps.onStart?.();
+
+        // Store current flash configuration for use in effect
+        this.currentFlashConfig = {
+            type,
+            duration,
+            cycles,
+            flashAlpha,
+            flashTint,
+        };
+
+        // Create or recreate progress signal for flash animation
+        // Note: We already stopped the previous animation above, so we can reuse the signal
+        if (!this.progressSignal) {
+            this.progressSignal = animatedSignal(0, {
+                duration: duration,
+                ease: (t) => t, // Linear ease
+            });
+        }
+        // Reset to 0 immediately without animation to start fresh
+        this.progressSignal.set(0, { duration: 0 });
+        // Wait a bit to ensure the reset is complete before starting new animation
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        // Create effect to update alpha based on progress
+        if (type === 'alpha' || type === 'both') {
+            this.alphaEffect = effect(() => {
+                if (!instance || !this.progressSignal || !this.currentFlashConfig) return;
+
+                const progress = this.progressSignal();
+                const config = this.currentFlashConfig;
+                
+                // Calculate flash value based on cycles
+                // Each cycle goes from 0 to 1, so we use modulo to repeat
+                const cycleProgress = (progress * config.cycles) % 1;
+                
+                // Create flash effect: fade to flashAlpha then back to original
+                // For each cycle, we flash twice (on/off)
+                const flashPhase = cycleProgress < 0.5 
+                    ? cycleProgress * 2  // Fade to flashAlpha (0 to 1)
+                    : 1 - ((cycleProgress - 0.5) * 2); // Fade back to original (1 to 0)
+                
+                // Interpolate between original and flash alpha
+                const currentAlpha = this.originalAlpha + (config.flashAlpha - this.originalAlpha) * flashPhase;
+                instance.alpha = currentAlpha;
+            }).subscription;
+        }
+
+        // Create effect to update tint based on progress
+        if (type === 'tint' || type === 'both') {
+            this.tintEffect = effect(() => {
+                if (!instance || !this.progressSignal || !this.currentFlashConfig) return;
+                
+                // Get current tint value - handle both signal and primitive
+                const currentTint = (instance as any).tint;
+                if (currentTint === undefined) return;
+                
+                // Check if tint is a signal
+                const tintIsSignal = isSignal(currentTint);
+                
+                const progress = this.progressSignal();
+                const config = this.currentFlashConfig;
+                
+                // Calculate flash value based on cycles
+                const cycleProgress = (progress * config.cycles) % 1;
+                
+                // Create flash effect: change to flashTint then back to original
+                const flashPhase = cycleProgress < 0.5 
+                    ? cycleProgress * 2  // Change to flashTint (0 to 1)
+                    : 1 - ((cycleProgress - 0.5) * 2); // Change back to original (1 to 0)
+                
+                // Interpolate between original and flash tint
+                // Simple linear interpolation for RGB values
+                const r1 = (this.originalTint >> 16) & 0xff;
+                const g1 = (this.originalTint >> 8) & 0xff;
+                const b1 = this.originalTint & 0xff;
+                
+                const r2 = (config.flashTint >> 16) & 0xff;
+                const g2 = (config.flashTint >> 8) & 0xff;
+                const b2 = config.flashTint & 0xff;
+                
+                const r = Math.round(r1 + (r2 - r1) * flashPhase);
+                const g = Math.round(g1 + (g2 - g1) * flashPhase);
+                const b = Math.round(b1 + (b2 - b1) * flashPhase);
+                
+                const newTintValue = (r << 16) | (g << 8) | b;
+                
+                // Handle both signal and primitive tint
+                if (tintIsSignal) {
+                    currentTint.set(newTintValue);
+                } else {
+                    (instance as any).tint = newTintValue;
+                }
+            }).subscription;
+        }
+
+        // Start animation and wait for completion
+        await this.progressSignal.set(1, {
+            duration: duration,
+        });
+
+        // Animation completed - clean up and call callbacks
+        // Restore original values
+        if (instance) {
+            instance.alpha = this.originalAlpha;
+            const currentTint = (instance as any).tint;
+            if (currentTint !== undefined) {
+                // Ensure originalTint is a primitive value, not a signal
+                const tintValue = typeof this.originalTint === 'number' ? this.originalTint : 0xffffff;
+                // Handle both signal and primitive tint
+                if (isSignal(currentTint)) {
+                    currentTint.set(tintValue);
+                } else {
+                    (instance as any).tint = tintValue;
+                }
+            }
+        }
+        
+        // Clean up effects
+        if (this.alphaEffect) {
+            this.alphaEffect.unsubscribe();
+            this.alphaEffect = null;
+        }
+        if (this.tintEffect) {
+            this.tintEffect.unsubscribe();
+            this.tintEffect = null;
+        }
+        
+        // Clear flash config
+        this.currentFlashConfig = null;
+        
+        // Call onComplete callback
+        flashProps.onComplete?.();
+    }
+
+    /**
+     * Updates the flash directive when props change
+     * @param props - Updated props
+     */
+    onUpdate(props: any) {
+        // Re-mount if props change significantly
+        if (props.type && props.type === 'reset') {
+            this.onDestroy();
+            if (this.elementRef) {
+                this.onMount(this.elementRef);
+            }
+        }
+    }
+
+    /**
+     * Cleans up the flash directive
+     */
+    onDestroy() {
+        // Stop any running animation by resetting progress
+        if (this.progressSignal) {
+            this.progressSignal.set(0, { duration: 0 });
+            this.progressSignal = null;
+        }
+
+        // Clean up effects
+        if (this.alphaEffect) {
+            this.alphaEffect.unsubscribe();
+            this.alphaEffect = null;
+        }
+        if (this.tintEffect) {
+            this.tintEffect.unsubscribe();
+            this.tintEffect = null;
+        }
+
+        // Clear flash config
+        this.currentFlashConfig = null;
+
+        // Restore original values
+        if (this.elementRef?.componentInstance) {
+            const instance = this.elementRef.componentInstance;
+            instance.alpha = this.originalAlpha;
+            const currentTint = (instance as any).tint;
+            if (currentTint !== undefined) {
+                // Ensure originalTint is a primitive value, not a signal
+                const tintValue = typeof this.originalTint === 'number' ? this.originalTint : 0xffffff;
+                // Handle both signal and primitive tint
+                if (isSignal(currentTint)) {
+                    currentTint.set(tintValue);
+                } else {
+                    (instance as any).tint = tintValue;
+                }
+            }
+        }
+
+        // Clean up subscription
+        if (this.flashSubscription) {
+            this.flashSubscription = null;
+        }
+
+        this.elementRef = null;
+    }
+}
+
+registerDirective('flash', Flash);
+