canvasengine 2.0.0-beta.13 → 2.0.0-beta.14

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "canvasengine",
-  "version": "2.0.0-beta.13",
+  "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/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,19 @@ 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 {
     private elementRef: Element<Container> | null = null;
@@ -147,12 +160,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)
     }
 
     /**

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>();