canvasengine 2.0.0-beta.12 → 2.0.0-beta.14

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.12",
+  "version": "2.0.0-beta.14",
   "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/Viewport.ts

@@ -48,10 +48,7 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
     onInit(props) {
         super.onInit(props)
         for (let event of EVENTS) {
-            const camelCaseEvent = event.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-            if (props[camelCaseEvent]) {
-                this.on(event, props[camelCaseEvent])
-            }
+            if (props[event]) this.on(event, props[event])
         }
     }
 
@@ -69,6 +66,7 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
             'wheel',
             this.input.wheelFunction
         );
+
         this.options.events = renderer.events
  
         this.tickSubscription = tick.observable.subscribe(({ value }) => {
@@ -97,13 +95,9 @@ export class CanvasViewport extends DisplayObject(PixiViewport) {
         if (props.worldHeight !== undefined) {
             this.worldHeight = props.worldHeight
         }
-        // if (props.drag) {
-        //     if (props.drag === true) {
-                
-        //     } else {
-        //         this.drag(props.drag)
-        //     }
-        // }
+        if (props.drag) {
+            this.drag(props.drag)
+        }
         if (props.clamp) {
             this.clamp(props.clamp.value ?? props.clamp)
         }

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,84 +1,302 @@
-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'>;
+    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 onDragMoveHandler: (event: FederatedPointerEvent) => void = () => {};
+    private onDragEndHandler: () => void = () => {};
+    private onDragStartHandler: (event: FederatedPointerEvent) => 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);
+    }
 
     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);
+            }
+        });
+
+        instance.on('pointerdown', this.onDragStartHandler);
+        this.stageRef.on('pointerup', this.onDragEndHandler);
+        this.stageRef.on('pointerupoutside', this.onDragEndHandler);
+
+        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'
+        });
+        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)
             }
-            const { x: xProp, y: yProp } = propObservables as any
-            if (xProp !== undefined && isSignal(xProp)) {
-                xProp.set(instance.position.x)
+        }
+
+        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 (yProp !== undefined && isSignal(yProp)) {
-                yProp.set(instance.position.y)
+            if (this.axis.y && lastViewValue.y !== this.viewport.center.y) {
+                instance.position.y += moveY;
             }
         }
+    }
 
-        const onDragEnd = () => {
-            drag.end?.()
-            stage.off('pointermove', onDragMove)
-            console.log(rootElement.allElements)
-        }   
+    /**
+     * Handles drag end event and stops viewport movement
+     */
+    private onDragEnd() {
+        if (!this.isDragging || !this.elementRef) return;
 
-        instance.on('pointerdown', () => {
-            drag.start?.()
-            stage.on('pointermove', onDragMove)
-        });
+        const dragProps = this.dragProps;
+        this.isDragging = false;
+        dragProps?.end?.();
+        
+        if (this.stageRef) {
+            this.stageRef.off('pointermove', this.onDragMoveHandler);
+        }
+    }
+
+    private onPointerDown(event: FederatedPointerEvent) {
+        if (!this.elementRef?.componentInstance || !this.stageRef || !this.elementRef.componentInstance.parent) return;
+
+        const instance = this.elementRef.componentInstance;
+        const parent = instance.parent;
+        const dragProps = this.dragProps;
 
-        stage.on('pointerup', onDragEnd)
-        stage.on('pointerupoutside', onDragEnd)
+        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);
+        
+        dragProps?.start?.();
+        this.stageRef.on('pointermove', this.onDragMoveHandler);
     }
 
-    onUpdate() {}
+    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);
+        }
+        this.stageRef = null;
+        this.viewport = null;
     }
 }
 
-// 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/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')
         }
-        if (viewportFollow) 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 {
+            viewport.plugins.remove('follow')
+        }
     }
-    onDestroy() {
-
+    onDestroy(element: Element) {
+        const { viewportFollow } = element.props
+        const { viewport } = element.props.context
+        if (viewportFollow) viewport.plugins.remove('follow')
     }
 }
 

package/src/engine/directive.ts

@@ -3,10 +3,10 @@ import { Element } from "./reactive"
 export const directives: { [key: string]: any } = {}
 
 export abstract class Directive {
-    abstract onDestroy();
+    abstract onDestroy(element: Element<any>);
     abstract onInit(element:  Element<any>);
     abstract onMount(element: Element<any>);
-    abstract onUpdate(props: any);
+    abstract onUpdate(props: any, element: Element<any>);
 }
 
 export function registerDirective(name: string, directive: any) {

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.directives[name].onDestroy?.(element);
   }
   element.componentInstance.onDestroy?.(element.parent as any);
-  element.effectUnmounts.forEach((fn) => fn?.());
 }
 
 /**
@@ -165,7 +146,7 @@ export function createComponent(tag: string, props?: Props): Element {
             _value.observable.subscribe((value) => {
               _set(path, key, value);
               if (element.directives[key]) {
-                element.directives[key].onUpdate?.(value);
+                element.directives[key].onUpdate?.(value, element);
               }
               if (key == "tick") {
                 return
@@ -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>();

package/src/hooks/useProps.ts

@@ -25,7 +25,7 @@ export const useProps = (props, defaults = {}): any => {
     }
     for (let key in defaults) {
         if (!(key in obj)) {
-            obj[key] = signal(defaults[key])
+            obj[key] = isPrimitive(defaults[key]) ? signal(defaults[key]) : defaults[key]
         }
     }
     return obj