canvasengine 2.0.0-beta.14 → 2.0.0-beta.16

package/package.json

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

package/src/components/Sprite.ts

@@ -1,4 +1,5 @@
-import { computed, effect, isSignal, Signal, WritableSignal } from "@signe/reactive";
+import { Howl } from 'howler';
+import { computed, effect, isSignal, Signal } from "@signe/reactive";
 import {
   Assets,
   Container,
@@ -338,7 +339,12 @@ export class CanvasSprite extends DisplayObject(PixiSprite) {
     const sound = this.currentAnimation.data.sound;
 
     if (sound) {
-      //RpgSound.get(sound).play()
+      new Howl({
+        src: sound,
+        autoplay: true,
+        loop: false,
+        volume: 1,
+      })
     }
 
     // Updates immediately to avoid flickering

package/src/directives/Drag.ts

@@ -14,6 +14,7 @@ export type DragProps = {
     end?: () => void;
     snap?: SignalOrPrimitive<number>;
     direction?: SignalOrPrimitive<'x' | 'y' | 'all'>;
+    keyToPress?: SignalOrPrimitive<string[]>;
     viewport?: {
         edgeThreshold?: SignalOrPrimitive<number>;
         maxSpeed?: SignalOrPrimitive<number>;
@@ -46,10 +47,14 @@ export class Drag extends Directive {
     private viewport: any | null = null;
     private animationFrameId: number | null = null;
     private lastPointerPosition: Point = new Point();
+    private pressedKeys: Set<string> = new Set();
+    private pointerIsDown = false;
 
     private onDragMoveHandler: (event: FederatedPointerEvent) => void = () => {};
     private onDragEndHandler: () => void = () => {};
     private onDragStartHandler: (event: FederatedPointerEvent) => void = () => {};
+    private onKeyDownHandler: (event: KeyboardEvent) => void = () => {};
+    private onKeyUpHandler: (event: KeyboardEvent) => void = () => {};
 
     private subscriptions: Subscription[] = [];
 
@@ -58,6 +63,8 @@ export class Drag extends Directive {
         this.onDragMoveHandler = this.onDragMove.bind(this);
         this.onDragEndHandler = this.onDragEnd.bind(this);
         this.onDragStartHandler = this.onPointerDown.bind(this);
+        this.onKeyDownHandler = this.onKeyDown.bind(this);
+        this.onKeyUpHandler = this.onKeyUp.bind(this);
     }
 
     onMount(element: Element<Container>) {
@@ -89,6 +96,12 @@ export class Drag extends Directive {
         this.stageRef.on('pointerup', this.onDragEndHandler);
         this.stageRef.on('pointerupoutside', this.onDragEndHandler);
 
+        const keysToPress = dragProps.keyToPress ? dragProps.keyToPress : [];
+        
+        // Always add keyboard event listeners to track pressed keys
+        window.addEventListener('keydown', this.onKeyDownHandler);
+        window.addEventListener('keyup', this.onKeyUpHandler);
+
         this.subscriptions = [
             tick.observable.subscribe(() => {
                 if (this.isDragging && this.viewport) {
@@ -104,7 +117,8 @@ export class Drag extends Directive {
         const options = useProps(drag?.value ?? drag, {
             snap: 0,
             viewport: {},
-            direction: 'all'
+            direction: 'all',
+            keyToPress: []
         });
         options.viewport = useProps(options.viewport, {
             edgeThreshold: 300,
@@ -243,10 +257,13 @@ export class Drag extends Directive {
      * Handles drag end event and stops viewport movement
      */
     private onDragEnd() {
-        if (!this.isDragging || !this.elementRef) return;
+        this.pointerIsDown = false;
+
+        if (!this.isDragging) return;
 
         const dragProps = this.dragProps;
         this.isDragging = false;
+        
         dragProps?.end?.();
         
         if (this.stageRef) {
@@ -254,23 +271,86 @@ export class Drag extends Directive {
         }
     }
 
+    onKeyDown(event: KeyboardEvent) {
+        this.pressedKeys.add(event.code);
+        this.pressedKeys.add(event.key.toLowerCase());
+
+        if (this.pointerIsDown && !this.isDragging && this.areRequiredKeysPressed()) {
+            this.startDrag();
+        }
+    }
+
+    onKeyUp(event: KeyboardEvent) {
+        this.pressedKeys.delete(event.code);
+        this.pressedKeys.delete(event.key.toLowerCase());
+        if (this.isDragging && !this.areRequiredKeysPressed()) {
+            this.onDragEnd();
+        }
+    }
+
+    private areRequiredKeysPressed(): boolean {
+        const keyToPress = this.dragProps.keyToPress ? this.dragProps.keyToPress : [];
+        if (!keyToPress || keyToPress.length === 0) {
+            return true; // No keys required, always return true
+        }
+        
+        return keyToPress.some(key => {
+            // Check if the key is pressed directly
+            if (this.pressedKeys.has(key)) {
+                return true;
+            }
+            
+            // Check common alternative formats
+            // Space key can be "Space", " ", or "space"
+            if (key.toLowerCase() === 'space') {
+                return this.pressedKeys.has('Space') || this.pressedKeys.has(' ');
+            }
+            
+            // Shift key can be "ShiftLeft", "ShiftRight", or "shift"
+            if (key.toLowerCase() === 'shift') {
+                return this.pressedKeys.has('ShiftLeft') || this.pressedKeys.has('ShiftRight');
+            }
+            
+            // Control key can be "ControlLeft", "ControlRight", or "control"
+            if (key.toLowerCase() === 'control' || key.toLowerCase() === 'ctrl') {
+                return this.pressedKeys.has('ControlLeft') || this.pressedKeys.has('ControlRight');
+            }
+            
+            // Alt key can be "AltLeft", "AltRight", or "alt"
+            if (key.toLowerCase() === 'alt') {
+                return this.pressedKeys.has('AltLeft') || this.pressedKeys.has('AltRight');
+            }
+            
+            return false;
+        });
+    }
+
     private onPointerDown(event: FederatedPointerEvent) {
         if (!this.elementRef?.componentInstance || !this.stageRef || !this.elementRef.componentInstance.parent) return;
+        
+        this.pointerIsDown = true;
 
         const instance = this.elementRef.componentInstance;
         const parent = instance.parent;
-        const dragProps = this.dragProps;
 
         const parentLocalPointer = parent.toLocal(event.global);
 
         this.offsetInParent.x = parentLocalPointer.x - instance.position.x;
         this.offsetInParent.y = parentLocalPointer.y - instance.position.y;
-
-        this.isDragging = true;
         
         // Store initial pointer position
         this.lastPointerPosition.copyFrom(event.global);
         
+        if (this.areRequiredKeysPressed()) {
+            this.startDrag();
+        }
+    }
+
+    private startDrag() {
+        if (this.isDragging || !this.stageRef) return;
+
+        this.isDragging = true;
+        const dragProps = this.dragProps;
         dragProps?.start?.();
         this.stageRef.on('pointermove', this.onDragMoveHandler);
     }
@@ -293,8 +373,15 @@ export class Drag extends Directive {
             this.stageRef.off('pointerup', this.onDragEndHandler);
             this.stageRef.off('pointerupoutside', this.onDragEndHandler);
         }
+        
+        // Remove keyboard event listeners
+        window.removeEventListener('keydown', this.onKeyDownHandler);
+        window.removeEventListener('keyup', this.onKeyUpHandler);
+        
         this.stageRef = null;
         this.viewport = null;
+        this.pressedKeys.clear();
+        this.pointerIsDown = false;
     }
 }
 

package/src/directives/Sound.ts

@@ -20,7 +20,8 @@ export class Sound extends Directive {
     onMount(element: Element<Container>) {
         const { props } = element
         const tick = props.context.tick
-        const { src, autoplay, loop, volume, spatial } = props.sound
+        const propsSound = props.sound.value ?? props.sound
+        const { src, autoplay, loop, volume, spatial } = propsSound
         this.sound = new Howl({
             src,
             autoplay,
@@ -28,8 +29,8 @@ export class Sound extends Directive {
             volume
         })
         for (let event of EVENTS) {
-            if (!props.sound[event]) continue
-            const fn = props.sound[event]
+            if (!propsSound[event]) continue
+            const fn = propsSound[event]
             this.eventsFn.push(fn)
             this.sound.on(event, fn);
         }
@@ -51,7 +52,7 @@ export class Sound extends Directive {
     }
 
     onUpdate(props: any) {
-        const { volume, loop, mute, seek, playing, rate, spatial } = props
+        const { volume, loop, mute, seek, playing, rate, spatial } = props.value ?? props
         if (volume != undefined) this.sound.volume(volume)
         if (loop != undefined) this.sound.loop(loop)
         if (mute != undefined) this.sound.mute(mute)

package/src/engine/reactive.ts

@@ -365,6 +365,36 @@ export function loop<T>(
                 el.destroy();
                 elementMap.delete(change.index!);
               });
+            } else if (change.type === 'update' && change.index !== undefined && change.items.length === 1) {
+              const index = change.index;
+              const newItem = change.items[0];
+
+              // Check if the previous item at this index was effectively undefined or non-existent
+              if (index >= elements.length || elements[index] === undefined || !elementMap.has(index)) {
+                // Treat as add operation
+                const newElement = createElementFn(newItem as T, index);
+                if (newElement) {
+                  elements.splice(index, 0, newElement); // Insert at the correct index
+                  elementMap.set(index, newElement);
+                  // Adjust indices in elementMap for subsequent elements might be needed if map relied on exact indices
+                  // This simple implementation assumes keys are stable or createElementFn handles context correctly
+                } else {
+                     console.warn(`Element creation returned null for index ${index} during add-like update.`);
+                }
+              } else {
+                // Treat as a standard update operation
+                const oldElement = elements[index];
+                oldElement.destroy();
+                const newElement = createElementFn(newItem as T, index);
+                if (newElement) {
+                  elements[index] = newElement;
+                  elementMap.set(index, newElement);
+                } else {
+                  // Handle case where new element creation returns null
+                  elements.splice(index, 1);
+                  elementMap.delete(index);
+                }
+              }
             }
 
             subscriber.next({

package/src/index.ts

@@ -12,4 +12,5 @@ export * from './utils/Ease'
 export * from './utils/RadialGradient'
 export * from './components/DisplayObject'
 export { isObservable } from 'rxjs'
-export * as Utils from './engine/utils'
+export * as Utils from './engine/utils'
+export * as Howl from 'howler'