canvasengine 2.0.0-beta.13 → 2.0.0-beta.15

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
     "@barvynkoa/particle-emitter": "^0.0.1",
-    "@signe/reactive": "^1.1.0",
+    "@signe/reactive": "^2.3.3",
     "howler": "^2.2.4",
     "pixi-filters": "^6.0.5",
     "pixi-viewport": "^6.0.3",

package/src/components/Graphic.ts

@@ -1,35 +1,31 @@
-import { effect, Signal } from "@signe/reactive";
+import { Effect, effect, Signal } from "@signe/reactive";
 import { Graphics as PixiGraphics } from "pixi.js";
 import { createComponent, registerComponent } from "../engine/reactive";
 import { DisplayObject } from "./DisplayObject";
 import { DisplayObjectProps } from "./types/DisplayObject";
 import { useProps } from "../hooks/useProps";
+import { SignalOrPrimitive } from "./types";
 
 interface GraphicsProps extends DisplayObjectProps {
   draw?: (graphics: PixiGraphics) => void;
 }
 
 interface RectProps extends DisplayObjectProps {
-  width: number;
-  height: number;
-  color: string;
+  color: SignalOrPrimitive<string>;
 }
 
 interface CircleProps extends DisplayObjectProps {
-  radius: number;
-  color: string;
+  radius: SignalOrPrimitive<number>;
+  color: SignalOrPrimitive<string>;
 }
 
 interface EllipseProps extends DisplayObjectProps {
-  width: number;
-  height: number;
-  color: string;
+  color: SignalOrPrimitive<string>;
 }
 
 interface TriangleProps extends DisplayObjectProps {
-  base: number;
-  height: number;
-  color: string;
+  base: SignalOrPrimitive<number>;
+  color: SignalOrPrimitive<string>;
 }
 
 interface SvgProps extends DisplayObjectProps {
@@ -37,15 +33,21 @@ interface SvgProps extends DisplayObjectProps {
 }
 
 class CanvasGraphics extends DisplayObject(PixiGraphics) {
+  clearEffect: Effect;
   onInit(props) {
     super.onInit(props);
     if (props.draw) {
-      effect(() => {
+      this.clearEffect = effect(() => {
         this.clear();
         props.draw?.(this);
       });
     }
   }
+
+  onDestroy() {
+    this.clearEffect.subscription.unsubscribe();
+    super.onDestroy();
+  }
 }
 
 interface CanvasGraphics extends PixiGraphics {}

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/components/types/DisplayObject.ts

@@ -1,5 +1,7 @@
 import * as PIXI from "pixi.js";
 import { SignalOrPrimitive } from ".";
+import { DragProps } from "../../directives/Drag";
+import { ViewportFollowProps } from "../../directives/ViewportFollow";
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 export type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
@@ -37,6 +39,11 @@ export interface DisplayObjectProps {
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
 
+    // Directives
+    drag?: DragProps;
+    viewportFollow?: ViewportFollowProps;
+
+    // Events
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;

package/src/directives/Drag.ts

@@ -1,4 +1,4 @@
-import { effect, isSignal, signal } from '@signe/reactive';
+import { effect, isComputed, isSignal, signal } from '@signe/reactive';
 import { Container, Rectangle, Point, FederatedPointerEvent } from 'pixi.js';
 import { Directive, registerDirective } from '../engine/directive';
 import { Element } from '../engine/reactive';
@@ -6,6 +6,20 @@ import { snap } from 'popmotion';
 import { addContext } from '../hooks/addContext';
 import { Subscription } from 'rxjs';
 import { useProps } from '../hooks/useProps';
+import { SignalOrPrimitive } from '../components/types';
+
+export type DragProps = {
+    move?: (event: FederatedPointerEvent) => void;
+    start?: () => void;
+    end?: () => void;
+    snap?: SignalOrPrimitive<number>;
+    direction?: SignalOrPrimitive<'x' | 'y' | 'all'>;
+    keyToPress?: SignalOrPrimitive<string[]>;
+    viewport?: {
+        edgeThreshold?: SignalOrPrimitive<number>;
+        maxSpeed?: SignalOrPrimitive<number>;
+    };
+}
 
 export class Drop extends Directive {
     private elementRef: Element<Container> | null = null;
@@ -33,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[] = [];
 
@@ -45,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>) {
@@ -76,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) {
@@ -91,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,
@@ -147,12 +174,19 @@ export class Drag extends Directive {
         this.lastPointerPosition.copyFrom(event.global);
 
         const { x: xProp, y: yProp } = propObservables as any;
-        if (xProp !== undefined && isSignal(xProp)) {
-            // xProp.set(instance.position.x)
-        }
-        if (yProp !== undefined && isSignal(yProp)) {
-            // yProp.set(instance.position.y)
+
+        const updatePosition = (prop: any, value: number) => {
+            if (isComputed(prop)) {
+                prop.dependencies.forEach(dependency => {
+                    dependency.set(value)
+                })
+            } else if (isSignal(prop)) {
+                prop.set(value)
+            }
         }
+
+        if (xProp !== undefined) updatePosition(xProp, instance.position.x)
+        if (yProp !== undefined) updatePosition(yProp, instance.position.y)
     }
 
     /**
@@ -223,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) {
@@ -234,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);
     }
@@ -273,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/directives/ViewportFollow.ts

@@ -1,23 +1,45 @@
 import { ComponentInstance } from '../components/DisplayObject';
+import { SignalOrPrimitive } from '../components/types';
 import { Directive, registerDirective } from '../engine/directive';
 import { Element } from '../engine/reactive';
 import { error } from '../engine/utils';
+import { useProps } from '../hooks/useProps';
+
+export type ViewportFollowProps = {
+    viewportFollow?: boolean | {
+        speed?: SignalOrPrimitive<number>;
+        acceleration?: SignalOrPrimitive<number>;
+        radius?: SignalOrPrimitive<number>;
+    };
+}
 
 export class ViewportFollow extends Directive {
     onInit(element: Element<ComponentInstance>) {
 
     }
     onMount(element: Element) {
-       this.onUpdate(element.props, element)
+       this.onUpdate(element.props.viewportFollow, element)
     }
-    onUpdate(props: any, element: Element) {
-        const { viewportFollow } = element.props
+    onUpdate(viewportFollow: any, element: Element) {
         const { viewport } = element.props.context
         if (!viewport) {
             throw error('ViewportFollow directive requires a Viewport component to be mounted in the same context')
         }
         if (viewportFollow) {
-            viewport.follow(element.componentInstance)
+            if (viewportFollow === true) {
+                viewport.follow(element.componentInstance)
+            } else {
+                const options = useProps(viewportFollow, {
+                    speed: undefined,
+                    acceleration: undefined,
+                    radius: undefined
+                })
+                viewport.follow(element.componentInstance, {
+                    speed: options.speed(),
+                    acceleration: options.acceleration(),
+                    radius: options.radius()
+                })
+            }
         } else {
             viewport.plugins.remove('follow')
         }

package/src/engine/reactive.ts

@@ -1,4 +1,4 @@
-import { Signal, WritableArraySignal, WritableObjectSignal, isSignal } from "@signe/reactive";
+import { ArrayChange, ObjectChange, Signal, WritableArraySignal, WritableObjectSignal, isComputed, isSignal, signal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -17,25 +17,6 @@ export interface Props {
   [key: string]: any;
 }
 
-export type ArrayChange<T> = {
-  type: "add" | "remove" | "update" | "init" | "reset";
-  index?: number;
-  items: T[];
-};
-
-export type ObjectChange<T> = {
-  type: "add" | "remove" | "update" | "init" | "reset";
-  key?: string;
-  value?: T;
-  items: T[];
-};
-
-type ElementObservable<T> = Observable<
-  (ArrayChange<T> | ObjectChange<T>) & {
-    value: Element | Element[];
-  }
->;
-
 type NestedSignalObjects = {
   [Key in string]: NestedSignalObjects | Signal<any>;
 };
@@ -104,11 +85,11 @@ function destroyElement(element: Element | Element[]) {
   }
   element.propSubscriptions.forEach((sub) => sub.unsubscribe());
   element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
+  element.effectUnmounts.forEach((fn) => fn?.());
   for (let name in element.directives) {
     element.directives[name].onDestroy?.(element);
   }
   element.componentInstance.onDestroy?.(element.parent as any);
-  element.effectUnmounts.forEach((fn) => fn?.());
 }
 
 /**
@@ -309,9 +290,17 @@ export function createComponent(tag: string, props?: Props): Element {
  * @returns {Observable} An observable that emits the list of created child elements.
  */
 export function loop<T>(
-  itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>,
+  itemsSubject: any,
   createElementFn: (item: T, index: number | string) => Element | null
 ): FlowObservable {
+
+  if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
+    itemsSubject = signal(itemsSubject());
+  }
+  else if (!isSignal(itemsSubject)) {
+    itemsSubject = signal(itemsSubject);
+  }
+
   return defer(() => {
     let elements: Element[] = [];
     let elementMap = new Map<string | number, Element>();
@@ -376,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'