canvasengine 2.0.0-beta.14 → 2.0.0-beta.15

package/dist/index.d.ts

@@ -6,6 +6,8 @@ export { isObservable } from 'rxjs';
 import { Node } from 'yoga-layout';
 import * as PIXI from 'pixi.js';
 import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
+import * as howler from 'howler';
+export { howler as Howl };
 export { Howler } from 'howler';
 import * as popmotion from 'popmotion';
 
@@ -74,6 +76,7 @@ type DragProps = {
     end?: () => void;
     snap?: SignalOrPrimitive<number>;
     direction?: SignalOrPrimitive<'x' | 'y' | 'all'>;
+    keyToPress?: SignalOrPrimitive<string[]>;
     viewport?: {
         edgeThreshold?: SignalOrPrimitive<number>;
         maxSpeed?: SignalOrPrimitive<number>;

package/dist/index.js

@@ -1222,6 +1222,29 @@ function loop(itemsSubject, createElementFn) {
             el.destroy();
             elementMap.delete(change.index);
           });
+        } else if (change.type === "update" && change.index !== void 0 && change.items.length === 1) {
+          const index = change.index;
+          const newItem = change.items[0];
+          if (index >= elements.length || elements[index] === void 0 || !elementMap.has(index)) {
+            const newElement = createElementFn(newItem, index);
+            if (newElement) {
+              elements.splice(index, 0, newElement);
+              elementMap.set(index, newElement);
+            } else {
+              console.warn(`Element creation returned null for index ${index} during add-like update.`);
+            }
+          } else {
+            const oldElement = elements[index];
+            oldElement.destroy();
+            const newElement = createElementFn(newItem, index);
+            if (newElement) {
+              elements[index] = newElement;
+              elementMap.set(index, newElement);
+            } else {
+              elements.splice(index, 1);
+              elementMap.delete(index);
+            }
+          }
         }
         subscriber.next({
           elements: [...elements]
@@ -1485,7 +1508,8 @@ var Sound = class extends Directive {
   onMount(element) {
     const { props } = element;
     const tick2 = props.context.tick;
-    const { src, autoplay, loop: loop2, volume, spatial } = props.sound;
+    const propsSound = props.sound.value ?? props.sound;
+    const { src, autoplay, loop: loop2, volume, spatial } = propsSound;
     this.sound = new Howl({
       src,
       autoplay,
@@ -1493,8 +1517,8 @@ var Sound = class 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);
     }
@@ -1514,7 +1538,7 @@ var Sound = class extends Directive {
     }
   }
   onUpdate(props) {
-    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props;
+    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props.value ?? props;
     if (volume != void 0) this.sound.volume(volume);
     if (loop2 != void 0) this.sound.loop(loop2);
     if (mute != void 0) this.sound.mute(mute);
@@ -1594,12 +1618,18 @@ var Drag = class extends Directive {
     this.viewport = null;
     this.animationFrameId = null;
     this.lastPointerPosition = new Point();
+    this.pressedKeys = /* @__PURE__ */ new Set();
+    this.pointerIsDown = false;
     this.onDragMoveHandler = () => {
     };
     this.onDragEndHandler = () => {
     };
     this.onDragStartHandler = () => {
     };
+    this.onKeyDownHandler = () => {
+    };
+    this.onKeyUpHandler = () => {
+    };
     this.subscriptions = [];
   }
   onInit(element) {
@@ -1607,6 +1637,8 @@ var Drag = class 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) {
     const { rootElement, canvasSize, viewport, tick: tick2 } = element.props.context;
@@ -1631,6 +1663,9 @@ var Drag = class extends Directive {
     instance.on("pointerdown", this.onDragStartHandler);
     this.stageRef.on("pointerup", this.onDragEndHandler);
     this.stageRef.on("pointerupoutside", this.onDragEndHandler);
+    const keysToPress = dragProps.keyToPress ? dragProps.keyToPress : [];
+    window.addEventListener("keydown", this.onKeyDownHandler);
+    window.addEventListener("keyup", this.onKeyUpHandler);
     this.subscriptions = [
       tick2.observable.subscribe(() => {
         if (this.isDragging && this.viewport) {
@@ -1645,7 +1680,8 @@ var Drag = class extends Directive {
     const options = useProps(drag?.value ?? drag, {
       snap: 0,
       viewport: {},
-      direction: "all"
+      direction: "all",
+      keyToPress: []
     });
     options.viewport = useProps(options.viewport, {
       edgeThreshold: 300,
@@ -1755,7 +1791,8 @@ var Drag = class extends Directive {
    * Handles drag end event and stops viewport movement
    */
   onDragEnd() {
-    if (!this.isDragging || !this.elementRef) return;
+    this.pointerIsDown = false;
+    if (!this.isDragging) return;
     const dragProps = this.dragProps;
     this.isDragging = false;
     dragProps?.end?.();
@@ -1763,16 +1800,61 @@ var Drag = class extends Directive {
       this.stageRef.off("pointermove", this.onDragMoveHandler);
     }
   }
+  onKeyDown(event) {
+    this.pressedKeys.add(event.code);
+    this.pressedKeys.add(event.key.toLowerCase());
+    if (this.pointerIsDown && !this.isDragging && this.areRequiredKeysPressed()) {
+      this.startDrag();
+    }
+  }
+  onKeyUp(event) {
+    this.pressedKeys.delete(event.code);
+    this.pressedKeys.delete(event.key.toLowerCase());
+    if (this.isDragging && !this.areRequiredKeysPressed()) {
+      this.onDragEnd();
+    }
+  }
+  areRequiredKeysPressed() {
+    const keyToPress = this.dragProps.keyToPress ? this.dragProps.keyToPress : [];
+    if (!keyToPress || keyToPress.length === 0) {
+      return true;
+    }
+    return keyToPress.some((key) => {
+      if (this.pressedKeys.has(key)) {
+        return true;
+      }
+      if (key.toLowerCase() === "space") {
+        return this.pressedKeys.has("Space") || this.pressedKeys.has(" ");
+      }
+      if (key.toLowerCase() === "shift") {
+        return this.pressedKeys.has("ShiftLeft") || this.pressedKeys.has("ShiftRight");
+      }
+      if (key.toLowerCase() === "control" || key.toLowerCase() === "ctrl") {
+        return this.pressedKeys.has("ControlLeft") || this.pressedKeys.has("ControlRight");
+      }
+      if (key.toLowerCase() === "alt") {
+        return this.pressedKeys.has("AltLeft") || this.pressedKeys.has("AltRight");
+      }
+      return false;
+    });
+  }
   onPointerDown(event) {
     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;
     this.lastPointerPosition.copyFrom(event.global);
+    if (this.areRequiredKeysPressed()) {
+      this.startDrag();
+    }
+  }
+  startDrag() {
+    if (this.isDragging || !this.stageRef) return;
+    this.isDragging = true;
+    const dragProps = this.dragProps;
     dragProps?.start?.();
     this.stageRef.on("pointermove", this.onDragMoveHandler);
   }
@@ -1793,8 +1875,12 @@ var Drag = class extends Directive {
       this.stageRef.off("pointerup", this.onDragEndHandler);
       this.stageRef.off("pointerupoutside", this.onDragEndHandler);
     }
+    window.removeEventListener("keydown", this.onKeyDownHandler);
+    window.removeEventListener("keyup", this.onKeyUpHandler);
     this.stageRef = null;
     this.viewport = null;
+    this.pressedKeys.clear();
+    this.pointerIsDown = false;
   }
 };
 registerDirective("drag", Drag);
@@ -2533,6 +2619,7 @@ function ParticlesEmitter(props) {
 }
 
 // src/components/Sprite.ts
+import { Howl as Howl2 } from "howler";
 import { computed, effect as effect7, isSignal as isSignal4 } from "@signe/reactive";
 import {
   Assets,
@@ -2854,6 +2941,12 @@ var CanvasSprite = class extends DisplayObject(PixiSprite) {
     }
     const sound = this.currentAnimation.data.sound;
     if (sound) {
+      new Howl2({
+        src: sound,
+        autoplay: true,
+        loop: false,
+        volume: 1
+      });
     }
     this.update({
       deltaRatio: 1
@@ -3495,6 +3588,7 @@ var RadialGradient = class {
 
 // src/index.ts
 import { isObservable } from "rxjs";
+import * as Howl3 from "howler";
 export {
   Canvas2 as Canvas,
   Circle,
@@ -3504,6 +3598,7 @@ export {
   Easing,
   Ellipse,
   Graphics,
+  Howl3 as Howl,
   Howler,
   NineSliceSprite,
   ParticlesEmitter,