canvasengine 2.0.0-beta.40 → 2.0.0-beta.41

package/dist/index.js

@@ -1,5 +1,5 @@
-import { h as a } from "./index-gb763Hyx.js";
-import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-gb763Hyx.js";
+import { h as a } from "./index-BnuKipxl.js";
+import { A as r, _ as o, $ as n, t as l, x as c, v as p, C as S, d as m, Y as u, Z as d, an as g, f as b, D as C, am as k, ak as h, y as j, j as T, G as w, w as D, c as E, I as f, a0 as v, J as y, K as O, M as P, X as V, O as x, P as A, al as B, R as G, H, S as M, g as F, e as J, L as N, B as R, Q as q, U as z, T as I, z as K, b as U, N as L, W as Q, V as W, aj as X, ai as Y, ag as Z, k as _, a7 as $, a5 as aa, a8 as sa, l as ea, ac as ta, ah as ia, m as ra, n as oa, a1 as na, a4 as la, o as ca, i as pa, a2 as Sa, p as ma, ad as ua, q as da, a6 as ga, aa as ba, a9 as Ca, af as ka, a3 as ha, s as ja, ab as Ta, ae as wa, r as Da, a as Ea, u as fa } from "./index-BnuKipxl.js";
 const e = a.Howler;
 export {
   r as ArraySubject,

package/package.json

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

package/src/components/Joystick.ts

@@ -100,7 +100,8 @@ export function Joystick(opts: JoystickSettings = {}) {
   }
 
   function handleDragStart(event: any) {
-    startPosition = event.getLocalPosition(this);
+    const target = event.currentTarget || event.target;
+    startPosition = event.getLocalPosition(target);
     dragging = true;
     innerAlpha.set(1);
     settings.onStart?.();
@@ -146,7 +147,8 @@ export function Joystick(opts: JoystickSettings = {}) {
       return;
     }
 
-    let newPosition = event.getLocalPosition(this);
+    const target = event.currentTarget || event.target;
+    let newPosition = event.getLocalPosition(target);
 
     let sideX = newPosition.x - (startPosition?.x ?? 0);
     let sideY = newPosition.y - (startPosition?.y ?? 0);

package/src/directives/Flash.ts

@@ -173,14 +173,8 @@ export class Flash extends Directive {
         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
+        // Clean up effects BEFORE stopping animation
+        // This prevents effects from continuing to update values
         if (this.alphaEffect) {
             this.alphaEffect.unsubscribe();
             this.alphaEffect = null;
@@ -190,33 +184,44 @@ export class Flash extends Directive {
             this.tintEffect = null;
         }
 
+        // DO NOT update original values here if a flash is in progress
+        // Only restore to the already-stored original values to avoid overwriting
+        // with intermediate animation values when multiple flashes trigger quickly
+
         // 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) {
+        const currentInstanceTint = (instance as any).tint;
+        if (currentInstanceTint !== 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);
+            if (isSignal(currentInstanceTint)) {
+                currentInstanceTint.set(tintValue);
             } else {
                 (instance as any).tint = tintValue;
             }
         }
 
-        // Call onStart callback
+        // Call onStart callback early, before async operations
         flashProps.onStart?.();
 
+        // Stop any existing animation after cleanup and callback
+        if (this.progressSignal) {
+            // Stop the animation immediately and wait for completion
+            await this.progressSignal.set(0, { duration: 0 });
+        }
+
         // Store current flash configuration for use in effect
-        this.currentFlashConfig = {
+        const flashConfig = {
             type,
             duration,
             cycles,
             flashAlpha,
             flashTint,
         };
+        this.currentFlashConfig = flashConfig;
 
         // Create or recreate progress signal for flash animation
         // Note: We already stopped the previous animation above, so we can reuse the signal
@@ -226,10 +231,11 @@ export class Flash extends Directive {
                 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));
+        // Signal is already reset to 0 above if it existed, no need to reset again
+
+        // Store references to the effects we're creating to verify they're still active later
+        const expectedAlphaEffect = type === 'alpha' || type === 'both';
+        const expectedTintEffect = type === 'tint' || type === 'both';
 
         // Create effect to update alpha based on progress
         if (type === 'alpha' || type === 'both') {
@@ -309,8 +315,12 @@ export class Flash extends Directive {
         });
 
         // Animation completed - clean up and call callbacks
-        // Restore original values
-        if (instance) {
+        // Only restore and clean up if this flash is still the active one
+        // If currentFlashConfig has changed, it means a new flash has started
+        const isStillActive = this.currentFlashConfig === flashConfig;
+
+        if (isStillActive && instance) {
+            // Restore original values
             instance.alpha = this.originalAlpha;
             const currentTint = (instance as any).tint;
             if (currentTint !== undefined) {
@@ -323,21 +333,21 @@ export class Flash extends Directive {
                     (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;
         }
         
-        // 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?.();
     }

package/src/directives/Shake.ts

@@ -102,6 +102,12 @@ export class Shake extends Directive {
         // Store original position
         this.originalPosition.set(instance.position.x, instance.position.y);
 
+        // Clean up previous subscription if it exists
+        if (this.shakeSubscription) {
+            this.shakeSubscription.unsubscribe();
+            this.shakeSubscription = null;
+        }
+
         // Listen to trigger activation
         this.shakeSubscription = on(shakeProps.trigger, async (data) => {
             await this.performShake(data);
@@ -144,8 +150,16 @@ export class Shake extends Directive {
             this.positionEffect = null;
         }
 
+        // Only update originalPosition if it hasn't been properly initialized (still at 0,0 and no parent was present when saved)
+        // OR if the current position is different from the stored original (element was moved)
+        const isOriginalUninitialized = this.originalPosition.x === 0 && this.originalPosition.y === 0 && instance.parent;
+        const hasPositionChanged = instance.position.x !== this.originalPosition.x || instance.position.y !== this.originalPosition.y;
+        
+        if (isOriginalUninitialized || hasPositionChanged) {
+            this.originalPosition.set(instance.position.x, instance.position.y);
+        }
+        
         // Reset position to original before starting new shake
-        this.originalPosition.set(instance.position.x, instance.position.y);
         instance.position.x = this.originalPosition.x;
         instance.position.y = this.originalPosition.y;
 
@@ -163,10 +177,8 @@ export class Shake extends Directive {
         // Create or recreate progress signal for shake animation
         // We recreate it to ensure a fresh animation state
         if (this.progressSignal) {
-            // Reset to 0 immediately without animation
-            this.progressSignal.set(0, { duration: 0 });
-            // Wait a bit to ensure the reset is complete
-            await new Promise(resolve => setTimeout(resolve, 0));
+            // Reset to 0 immediately without animation and wait for completion
+            await this.progressSignal.set(0, { duration: 0 });
         } else {
             this.progressSignal = animatedSignal(0, {
                 duration: duration,
@@ -271,6 +283,7 @@ export class Shake extends Directive {
 
         // Clean up subscription
         if (this.shakeSubscription) {
+            this.shakeSubscription.unsubscribe();
             this.shakeSubscription = null;
         }
 

package/src/engine/trigger.ts

@@ -47,13 +47,14 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
   return {
     start: (config?: T) => {
       return new Promise((resolve: (value: any) => void) => {
+        const newValue = Math.random();
         _signal.set({
           config: {
             ...globalConfig,
             ...config,
           },
           resolve,
-          value: Math.random(),
+          value: newValue,
         });
       });
     },
@@ -70,14 +71,18 @@ export function trigger<T = any>(globalConfig?: T): Trigger<T> {
  * Subscribes to a trigger and executes a callback when the trigger is activated
  * @param triggerSignal - The trigger to subscribe to
  * @param callback - Function to execute when the trigger is activated
+ * @returns Subscription that can be unsubscribed to stop listening
  * @throws Error if triggerSignal is not a valid trigger
  * @example
  * ```ts
  * const click = trigger()
  * 
- * on(click, () => {
+ * const subscription = on(click, () => {
  *   console.log('Click triggered')
  * })
+ * 
+ * // Later, to stop listening:
+ * subscription.unsubscribe()
  * ```
  */
 export function on(triggerSignal: any, callback: (config: any) => void | Promise<void>) {
@@ -86,9 +91,10 @@ export function on(triggerSignal: any, callback: (config: any) => void | Promise
   }
   let lastValue: number | undefined;
 
-  effect(() => {
+  const effectResult = effect(() => {
     const result = triggerSignal.listen();
     const seed = result?.seed;
+
     if (!seed) return;
 
     // Only run callback when the trigger value actually changes
@@ -96,7 +102,9 @@ export function on(triggerSignal: any, callback: (config: any) => void | Promise
       lastValue = seed.value;
       return;
     }
-    if (seed.value === lastValue) return;
+    if (seed.value === lastValue) {
+      return;
+    }
     lastValue = seed.value;
 
     try {
@@ -110,4 +118,6 @@ export function on(triggerSignal: any, callback: (config: any) => void | Promise
       seed.resolve(undefined);
     }
   });
+
+  return effectResult.subscription;
 }