canvasengine 2.0.0-beta.2 → 2.0.0-beta.21

package/src/directives/Drag.ts

@@ -1,84 +1,389 @@
-import { effect, isSignal } from '@signe/reactive';
-import { Container, Rectangle } from 'pixi.js';
+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';
 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 {
-    onInit(element: Element<Container>) {}
+    private elementRef: Element<Container> | null = null;
+
+    onInit(element: Element<Container>) {
+        this.elementRef = element;
+    }
 
     onMount(element: Element<Container>) {
-        addContext(element, 'drop', element)
+        addContext(element, 'drop', element);
     }
 
     onUpdate() {}
 
-    onDestroy() {}
+    onDestroy() {
+        this.elementRef = null;
+    }
 }
 
 export class Drag extends Directive {
-    onInit(element: Element<Container>) {}
+    private elementRef: Element<Container> | null = null;
+    private stageRef: Container | null = null;
+    private offsetInParent = new Point();
+    private isDragging = false;
+    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[] = [];
+
+    onInit(element: Element<Container>) {
+        this.elementRef = element;
+        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>) {
-        const { rootElement, canvasSize } = element.props.context
-        const { propObservables } = element
-        const { drag } = element.props
-        const instance = element.componentInstance
-        const stage =  rootElement.componentInstance
-        instance.eventMode = 'static'
-        stage.eventMode = 'static'
-
-        const snapTo = snap(drag?.snap ?? 0);
-
-        effect(() => {
-            stage.hitArea = new Rectangle(0, 0, canvasSize().width, canvasSize().height)
-        })
-
-        let x = 0
-        let y = 0
-
-        const onDragMove = (event) => {
-            drag.move?.(event)
-            x += event.movementX
-            y += event.movementY
-            if (drag?.snap) {
-                instance.position.x = snapTo(x)
-                instance.position.y = snapTo(y)
-            } else {
-                instance.position.x = x
-                instance.position.y = y
+        const { rootElement, canvasSize, viewport, tick } = element.props.context;
+        const instance = element.componentInstance;
+        const dragProps = this.dragProps;
+        const haveNotProps = Object.keys(dragProps).length === 0;
+
+        if (haveNotProps) {
+            this.onDestroy();
+            return;
+        }
+        
+        if (!instance) return;
+        this.stageRef = rootElement.componentInstance;
+        if (!this.stageRef) return;
+        this.viewport = viewport;
+
+        instance.eventMode = 'static';
+        this.stageRef.eventMode = 'static';
+
+        const _effect = effect(() => {
+            if (this.stageRef) {
+                this.stageRef.hitArea = new Rectangle(0, 0, canvasSize().width, canvasSize().height);
             }
-            const { x: xProp, y: yProp } = propObservables as any
-            if (xProp !== undefined && isSignal(xProp)) {
-                xProp.set(instance.position.x)
+        });
+
+        instance.on('pointerdown', this.onDragStartHandler);
+        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) {
+                    this.updateViewportPosition(this.lastPointerPosition);
+                }
+            }),
+            _effect.subscription
+        ]
+    }
+
+    get dragProps() {
+        const drag = this.elementRef?.props.drag
+        const options = useProps(drag?.value ?? drag, {
+            snap: 0,
+            viewport: {},
+            direction: 'all',
+            keyToPress: []
+        });
+        options.viewport = useProps(options.viewport, {
+            edgeThreshold: 300,
+            maxSpeed: 40
+        });
+        return options;
+    }
+
+    get axis() {
+        const direction = this.dragProps.direction();
+        const axis = {
+            x: true,
+            y: true,
+        }
+        if (direction === 'x') {
+            axis.y = false;
+        }
+        if (direction === 'y') {
+            axis.x = false;
+        }
+        return axis;
+    }
+
+    /**
+     * Updates element position when dragging and starts continuous viewport movement
+     * @param event The pointer event that triggered the drag move
+     */
+    private onDragMove(event: FederatedPointerEvent) {
+        if (!this.isDragging || !this.elementRef?.componentInstance || !this.elementRef.componentInstance.parent) return;
+
+        const instance = this.elementRef.componentInstance;
+        const parent = instance.parent;
+        const dragProps = this.dragProps;
+        const propObservables = this.elementRef.propObservables;
+        const snapTo = snap(dragProps?.snap() ?? 0);
+
+        dragProps?.move?.(event);
+
+        const currentParentLocalPointer = parent.toLocal(event.global);
+
+        const newX = currentParentLocalPointer.x - this.offsetInParent.x;
+        const newY = currentParentLocalPointer.y - this.offsetInParent.y;
+
+        if (dragProps?.snap()) {
+            instance.position.x = snapTo(newX);
+            instance.position.y = snapTo(newY);
+        } else {
+           if (this.axis.x) instance.position.x = newX;
+           if (this.axis.y) instance.position.y = newY;
+        }
+
+        // Store the last pointer position for continuous viewport movement
+        this.lastPointerPosition.copyFrom(event.global);
+
+        const { x: xProp, y: yProp } = propObservables as any;
+
+        const updatePosition = (prop: any, value: number) => {
+            if (isComputed(prop)) {
+                prop.dependencies.forEach(dependency => {
+                    dependency.set(value)
+                })
+            } else if (isSignal(prop)) {
+                prop.set(value)
             }
-            if (yProp !== undefined && isSignal(yProp)) {
-                yProp.set(instance.position.y)
+        }
+
+        if (xProp !== undefined) updatePosition(xProp, instance.position.x)
+        if (yProp !== undefined) updatePosition(yProp, instance.position.y)
+    }
+
+    /**
+     * Moves the viewport if the dragged element is near screen edges
+     * @param globalPosition The global pointer position
+     */
+    private updateViewportPosition(globalPosition: Point) {
+        if (!this.viewport || !this.elementRef) return;
+
+        const dragProps = this.dragProps;
+        const edgeThreshold = dragProps?.viewport?.edgeThreshold(); // Distance from edge to trigger viewport movement
+        const maxSpeed = dragProps?.viewport?.maxSpeed(); // Maximum speed when element is at the very edge
+        
+        // Calculate screen boundaries
+        const screenLeft = 0;
+        const screenRight = this.viewport.screenWidth;
+        const screenTop = 0;
+        const screenBottom = this.viewport.screenHeight;
+        const instance = this.elementRef.componentInstance;
+        
+        // Calculate distances from element to screen edges
+        const distanceFromLeft = globalPosition.x - screenLeft;
+        const distanceFromRight = screenRight - globalPosition.x;
+        const distanceFromTop = globalPosition.y - screenTop;
+        const distanceFromBottom = screenBottom - globalPosition.y;
+        
+        let moveX = 0;
+        let moveY = 0;
+        
+        // Calculate horizontal movement with dynamic velocity
+        if (distanceFromLeft < edgeThreshold) {
+            // Velocity increases as distance decreases
+            // When distance = 0, velocity = maxSpeed
+            // When distance = threshold, velocity = 0
+            const velocity = maxSpeed * (1 - (distanceFromLeft / edgeThreshold));
+            moveX = -velocity;
+        } else if (distanceFromRight < edgeThreshold) {
+            const velocity = maxSpeed * (1 - (distanceFromRight / edgeThreshold));
+            moveX = velocity;
+        }
+        
+        // Calculate vertical movement with dynamic velocity
+        if (distanceFromTop < edgeThreshold) {
+            const velocity = maxSpeed * (1 - (distanceFromTop / edgeThreshold));
+            moveY = -velocity;
+        } else if (distanceFromBottom < edgeThreshold) {
+            const velocity = maxSpeed * (1 - (distanceFromBottom / edgeThreshold));
+            moveY = velocity;
+        }
+        
+        // Apply movement with velocity-based displacement
+        if (moveX !== 0 || moveY !== 0) {
+            const lastViewValue = this.viewport.center;
+            this.viewport.moveCenter(
+                this.viewport.center.x + moveX,
+                this.viewport.center.y + moveY
+            );
+            if (this.axis.x && lastViewValue.x !== this.viewport.center.x) {
+                instance.position.x += moveX;
+            }
+            if (this.axis.y && lastViewValue.y !== this.viewport.center.y) {
+                instance.position.y += moveY;
             }
         }
+    }
+
+    /**
+     * Handles drag end event and stops viewport movement
+     */
+    private onDragEnd() {
+        this.pointerIsDown = false;
+
+        if (!this.isDragging) return;
 
-        const onDragEnd = () => {
-            drag.end?.()
-            stage.off('pointermove', onDragMove)
-            console.log(rootElement.allElements)
-        }   
+        const dragProps = this.dragProps;
+        this.isDragging = false;
+        
+        dragProps?.end?.();
+        
+        if (this.stageRef) {
+            this.stageRef.off('pointermove', this.onDragMoveHandler);
+        }
+    }
+
+    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();
+        }
+    }
 
-        instance.on('pointerdown', () => {
-            drag.start?.()
-            stage.on('pointermove', onDragMove)
+    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 parentLocalPointer = parent.toLocal(event.global);
 
-        stage.on('pointerup', onDragEnd)
-        stage.on('pointerupoutside', onDragEnd)
+        this.offsetInParent.x = parentLocalPointer.x - instance.position.x;
+        this.offsetInParent.y = parentLocalPointer.y - instance.position.y;
+        
+        // Store initial pointer position
+        this.lastPointerPosition.copyFrom(event.global);
+        
+        if (this.areRequiredKeysPressed()) {
+            this.startDrag();
+        }
     }
 
-    onUpdate() {}
+    private startDrag() {
+        if (this.isDragging || !this.stageRef) return;
 
-    onDestroy() {
+        this.isDragging = true;
+        const dragProps = this.dragProps;
+        dragProps?.start?.();
+        this.stageRef.on('pointermove', this.onDragMoveHandler);
+    }
 
+    onUpdate(props) {
+       if (props.type && props.type === 'reset') {
+        this.onDestroy();
+        this.onMount(this.elementRef);
+       }
+    }
+
+    onDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        const instance = this.elementRef?.componentInstance;
+        if (instance) {
+            instance.off('pointerdown', this.onDragStartHandler);
+        }
+        if (this.stageRef) {
+            this.stageRef.off('pointermove', this.onDragMoveHandler);
+            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;
     }
 }
 
-// registerDirective('drag', Drag)
-// registerDirective('drop', Drop)
+registerDirective('drag', Drag);
+registerDirective('drop', Drop);

package/src/directives/KeyboardControls.ts

@@ -366,8 +366,10 @@ export class KeyboardControls extends Directive {
     };
 
     onInit(element: Element) {
+        const value = element.props.controls.value ?? element.props.controls
+        if (!value) return
         this.setupListeners();
-        this.setInputs(element.props.controls.value)
+        this.setInputs(value)
         // The processing is outside the rendering loop because if the FPS are lower (or higher) then the sending to the server would be slower or faster. Here it is constant
         this.interval = setInterval(() => {
             this.preStep()

package/src/directives/Sound.ts

@@ -8,8 +8,18 @@ import { calculateDistance, error } from '../engine/utils';
 
 const EVENTS = ['load', 'loaderror', 'playerror', 'play', 'end', 'pause', 'stop', 'mute', 'volume', 'rate', 'seek', 'fade', 'unlock']
 
+/**
+ * Sound directive for playing audio with support for spatial audio and multiple sound sources
+ * 
+ * This directive manages audio playback using Howler.js library. It supports:
+ * - Single or multiple sound sources
+ * - Spatial audio with distance-based volume calculation
+ * - All standard audio controls (play, pause, volume, etc.)
+ * - Event handling for audio lifecycle
+ * 
+ */
 export class Sound extends Directive {
-    private sound: Howl
+    private sounds: Howl[] = []
     private eventsFn: ((...args: any[]) => void)[] = []
     private maxVolume: number = 1
     private maxDistance: number = 100
@@ -20,21 +30,42 @@ 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
-        this.sound = new Howl({
-            src,
-            autoplay,
-            loop,
-            volume
-        })
-        for (let event of EVENTS) {
-            if (!props.sound[event]) continue
-            const fn = props.sound[event]
-            this.eventsFn.push(fn)
-            this.sound.on(event, fn);
+        const propsSound = props.sound.value ?? props.sound
+
+        // Check if src is null or undefined
+        if (!propsSound.src) {
+            return
         }
 
-        if (spatial) {
+        const { src, autoplay, loop, volume, spatial } = propsSound
+        
+        // Handle multiple sources
+        const sources = Array.isArray(src) ? src : [src]
+
+        // Create Howl instances for each source
+        for (const source of sources) {
+            if (!source) continue // Skip null/undefined sources
+            
+            const sound = new Howl({
+                src: source,
+                autoplay,
+                loop,
+                volume
+            })
+ 
+            // Add event listeners for each sound
+            for (let event of EVENTS) {
+                if (!propsSound[event]) continue
+                const fn = propsSound[event]
+                this.eventsFn.push(fn)
+                sound.on(event, fn);
+            }
+            
+            this.sounds.push(sound)
+        }
+
+        // Setup spatial audio if enabled
+        if (spatial && this.sounds.length > 0) {
             const { soundListenerPosition } = props.context
             if (!soundListenerPosition) {
                 throw new error('SoundListenerPosition directive is required for spatial sound in component parent')
@@ -45,39 +76,71 @@ export class Sound extends Directive {
                 const { x, y } = element.componentInstance
                 const distance = calculateDistance(x, y, listenerX(), listenerY());
                 const volume = Math.max(this.maxVolume - (distance / this.maxDistance), 0)
-                this.sound.volume(volume)
+                
+                // Apply volume to all sounds
+                this.sounds.forEach(sound => sound.volume(volume))
             }).subscription
         }
+
+        this.onUpdate(propsSound)
     }
 
     onUpdate(props: any) {
-        const { volume, loop, mute, seek, playing, rate, spatial } = props
-        if (volume != undefined) this.sound.volume(volume)
-        if (loop != undefined) this.sound.loop(loop)
-        if (mute != undefined) this.sound.mute(mute)
-        if (seek != undefined) this.sound.seek(seek)
-        if (playing != undefined) {
-            if (playing) this.sound.play()
-            else this.sound.pause()
-        }
+        const soundProps = props.value ?? props
+        const { volume, loop, mute, seek, playing, rate, spatial } = soundProps
+        // Apply updates to all sounds
+        this.sounds.forEach(sound => {
+            if (volume !== undefined) sound.volume(volume)
+            if (loop !== undefined) sound.loop(loop)
+            if (mute !== undefined) sound.mute(mute)
+            if (seek !== undefined) sound.seek(seek)
+            if (playing !== undefined) {
+                if (playing) sound.play()
+                else sound.pause()
+            }
+            if (rate !== undefined) sound.rate(rate)
+        })
+        
+        // Update spatial audio settings
         if (spatial) {
             this.maxVolume = spatial.maxVolume ?? this.maxVolume
             this.maxDistance = spatial.maxDistance ?? this.maxDistance
         }
-        if (rate != undefined) this.sound.rate(rate)
     }
 
     onDestroy() {
-        this.sound.stop()
-        this.tickSubscription?.unsubscribe()
-        for (let event of EVENTS) {
-            if (this.eventsFn[event]) {
-                this.sound.off(event, this.eventsFn[event]);
+        // Stop and clean up all sounds
+        this.sounds.forEach(sound => {
+            sound.stop()
+            
+            // Remove event listeners
+            for (let event of EVENTS) {
+                const eventFn = this.eventsFn.find(fn => fn === this.eventsFn[event])
+                if (eventFn) {
+                    sound.off(event, eventFn);
+                }
             }
-        }
+        })
+        
+        this.sounds = []
+        this.eventsFn = []
+        this.tickSubscription?.unsubscribe()
     }
 }
 
+/**
+ * SoundListenerPosition directive for spatial audio
+ * 
+ * This directive provides the listener position for spatial audio calculations.
+ * It should be placed on a parent component that contains spatial sound sources.
+ * 
+ * @example
+ * ```tsx
+ * <Player soundListenerPosition={{ x: playerX, y: playerY }}>
+ *   <Enemy sound={{ src: 'growl.mp3', spatial: { maxDistance: 100 } }} />
+ * </Player>
+ * ```
+ */
 class SoundListenerPosition extends Directive {
     onMount(element: Element<any>) {
         element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition

package/src/directives/ViewportFollow.ts

@@ -1,25 +1,53 @@
 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) {
-        const { viewportFollow } = element.props
+       this.onUpdate(element.props.viewportFollow, element)
+    }
+    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')
         }
-        viewport.follow(element.componentInstance)
-    }
-    onUpdate(props: any) {
-
+        if (viewportFollow) {
+            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 if (viewportFollow === null) {
+            viewport.plugins.remove('follow')
+        }
     }
-    onDestroy() {
-
+    onDestroy(element: Element) {
+        const { viewportFollow } = element.props
+        const { viewport } = element.props.context
+        if (viewportFollow) viewport.plugins.remove('follow')
     }
 }