canvasengine 2.0.0-beta.40 → 2.0.0-beta.42

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-DNwqVzaq.js";
+import { A as r, $ as o, a0 as n, v as l, y as c, w as p, C as S, d as m, Z as u, _ as g, ao as d, f as C, D as b, an as k, al as h, z as j, j as T, G as w, x as D, c as E, I as f, a1 as v, J as y, K as O, M as A, Y as P, O as V, P as x, am as B, R as G, L as H, S as M, g as F, e as J, N, H as R, U as q, W as z, T as I, B as K, b as U, Q as L, X as Q, V as W, ak as X, aj as Y, ah as Z, k as _, a8 as $, a6 as aa, a9 as sa, l as ea, ad as ta, ai as ia, m as ra, n as oa, a2 as na, a5 as la, o as ca, i as pa, a3 as Sa, p as ma, ae as ua, q as ga, a7 as da, ab as Ca, aa as ba, ag as ka, r as ha, a4 as ja, s as Ta, ac as wa, af as Da, t as Ea, a as fa, u as va } from "./index-DNwqVzaq.js";
 const e = a.Howler;
 export {
   r as ArraySubject,
@@ -11,10 +11,10 @@ export {
   S as ControlsBase,
   m as ControlsDirective,
   u as DOMContainer,
-  d as DOMElement,
-  g as DisplayObject,
-  b as Drag,
-  C as Drop,
+  g as DOMElement,
+  d as DisplayObject,
+  C as Drag,
+  b as Drop,
   k as EVENTS,
   h as Easing,
   j as Ellipse,
@@ -27,10 +27,10 @@ export {
   v as Joystick,
   y as JoystickControls,
   O as KeyboardControls,
-  P as Mesh,
-  V as NineSliceSprite,
-  x as ObjectSubject,
-  A as ParticlesEmitter,
+  A as Mesh,
+  P as NineSliceSprite,
+  V as ObjectSubject,
+  x as ParticlesEmitter,
   B as RadialGradient,
   G as Rect,
   H as Scene,
@@ -66,17 +66,18 @@ export {
   Sa as isPrimitive,
   ma as isSignal,
   ua as isTrigger,
-  da as linkedSignal,
-  ga as loop,
-  ba as mount,
-  Ca as mountTracker,
+  ga as linkedSignal,
+  da as loop,
+  Ca as mount,
+  ba as mountTracker,
   ka as on,
-  ha as registerComponent,
-  ja as signal,
-  Ta as tick,
-  wa as trigger,
-  Da as untracked,
-  Ea as useDefineProps,
-  fa as useProps
+  ha as registerAllComponents,
+  ja as registerComponent,
+  Ta as signal,
+  wa as tick,
+  Da as trigger,
+  Ea as untracked,
+  fa as useDefineProps,
+  va as useProps
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.40",
+  "version": "2.0.0-beta.42",
   "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/bootstrap.ts

@@ -2,23 +2,90 @@ import '@pixi/layout';
 import { Application, ApplicationOptions } from "pixi.js";
 import { ComponentFunction, h } from "./signal";
 import { useProps } from '../hooks/useProps';
+import { registerAllComponents, registerComponent } from './reactive';
+
+// Import all components to ensure they are registered
+// This is done here (not in reactive.ts) to avoid circular dependencies
+// Components register themselves when their modules are imported
+import '../components/Canvas';
+import '../components/Container';
+import '../components/Sprite';
+import '../components/Text';
+import '../components/Graphic';
+import '../components/Mesh';
+import '../components/Viewport';
+import '../components/TilingSprite';
+import '../components/NineSliceSprite';
+import '../components/DOMContainer';
+import '../components/DOMElement';
+import '../components/ParticleEmitter';
+
+/**
+ * Extended options for bootstrapCanvas that includes component registration configuration.
+ * 
+ * @property components - Optional mapping of component names to their classes (can include mocks for testing)
+ * @property autoRegister - If true (default), registers all default components before applying custom components. If false, only registers the specified components.
+ */
+export interface BootstrapOptions extends ApplicationOptions {
+  components?: {
+    [name: string]: any; // ComponentClass
+  };
+  autoRegister?: boolean; // true by default if components is not provided
+}
 
 /**
  * Bootstraps a canvas element and renders it to the DOM.
  * 
  * @param rootElement - The HTML element where the canvas will be rendered. Can be null.
  * @param canvas - A Promise that resolves to an Element representing the canvas component.
+ * @param options - Optional bootstrap options including ApplicationOptions and component registration configuration.
  * @returns A Promise that resolves to the rendered canvas element.
  * @throws {Error} If the provided element is not a Canvas component.
+ * 
+ * @example
+ * ```typescript
+ * // Default: all components registered automatically
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   width: 800,
+ *   height: 600
+ * });
+ * ```
+ * 
+ * @example
+ * ```typescript
+ * // With mocks for testing
+ * import { mockComponents } from '@canvasengine/testing';
+ * await bootstrapCanvas(rootElement, MyComponent, {
+ *   components: mockComponents,
+ *   autoRegister: false
+ * });
+ * ```
  */
-export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: ApplicationOptions) => {
+export const bootstrapCanvas = async (rootElement: HTMLElement | null, canvas: ComponentFunction<any>, options?: BootstrapOptions) => {
+  // Extract component registration options
+  const { components, autoRegister, ...appOptions } = options ?? {};
+  
+  // Handle component registration
+  if (components) {
+    if (autoRegister !== false) {
+      // Register all default components first, then override with custom ones
+      registerAllComponents();
+    }
+    // Register the specified components (overriding defaults if autoRegister is true)
+    Object.entries(components).forEach(([name, componentClass]) => {
+      registerComponent(name, componentClass);
+    });
+  } else {
+    // Default behavior: register all components
+    registerAllComponents();
+  }
   
   const app = new Application();
   await app.init({
     resizeTo: rootElement,
     autoStart: false,
     antialias: true,
-    ...(options ?? {})
+    ...appOptions
   });
   const canvasElement = await h(canvas);
   if (canvasElement.tag != 'Canvas') {

package/src/engine/reactive.ts

@@ -84,6 +84,41 @@ export function registerComponent(name, component) {
   components[name] = component;
 }
 
+// Track if components have been registered to avoid duplicate imports
+let componentsRegistered = false;
+
+/**
+ * Registers all default CanvasEngine components.
+ * 
+ * This function imports and registers all core components that are available by default.
+ * It's called automatically by bootstrapCanvas() if no custom component configuration is provided.
+ * 
+ * Components register themselves when their modules are imported, so this function ensures
+ * all component modules are loaded. Since components call registerComponent() at module load time,
+ * importing them will automatically register them synchronously.
+ * 
+ * @example
+ * ```typescript
+ * // Register all default components manually
+ * registerAllComponents();
+ * 
+ * // Now you can use any component
+ * const sprite = createComponent('Sprite', { image: 'hero.png' });
+ * ```
+ */
+export function registerAllComponents() {
+  if (componentsRegistered) {
+    return;
+  }
+  
+  // Components are registered when their modules are imported
+  // Since bootstrap.ts imports all components, they should already be registered
+  // when bootstrapCanvas() is called. This function just marks that registration
+  // has been attempted. If components aren't registered yet, they will be when
+  // bootstrap.ts imports them (which happens before bootstrapCanvas() is called).
+  componentsRegistered = true;
+}
+
 /**
  * Checks if an element is currently frozen.
  * An element is frozen when the `freeze` prop is set to `true` (either as a boolean or Signal<boolean>),

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;
 }

package/src/index.ts

@@ -4,6 +4,7 @@ export * from '@signe/reactive'
 export { Howler } from 'howler'
 export * from './components'
 export * from './engine/reactive'
+export { registerAllComponents } from './engine/reactive'
 export * from './engine/signal'
 export * from './engine/trigger'
 export * from './engine/bootstrap'