canvasengine 2.0.0-beta.11 → 2.0.0-beta.13

package/dist/index.d.ts

@@ -290,10 +290,10 @@ declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObject
 declare function cond(condition: Signal<boolean> | boolean, createElementFn: () => Element | Promise<Element>): FlowObservable;
 
 declare abstract class Directive {
-    abstract onDestroy(): any;
+    abstract onDestroy(element: Element<any>): any;
     abstract onInit(element: Element<any>): any;
     abstract onMount(element: Element<any>): any;
-    abstract onUpdate(props: any): any;
+    abstract onUpdate(props: any, element: Element<any>): any;
 }
 
 interface Tick {

package/dist/index.js

@@ -347,8 +347,10 @@ var KeyboardControls = class extends Directive {
     };
   }
   onInit(element) {
+    const value = element.props.controls.value ?? element.props.controls;
+    if (!value) return;
     this.setupListeners();
-    this.setInputs(element.props.controls.value);
+    this.setInputs(value);
     this.interval = setInterval(() => {
       this.preStep();
     }, fps2ms(this.serverFps ?? 60));
@@ -962,16 +964,24 @@ var ViewportFollow = class extends Directive {
   onInit(element) {
   }
   onMount(element) {
+    this.onUpdate(element.props, element);
+  }
+  onUpdate(props, element) {
     const { viewportFollow } = element.props;
     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) {
+    if (viewportFollow) {
+      viewport.follow(element.componentInstance);
+    } else {
+      viewport.plugins.remove("follow");
+    }
   }
-  onDestroy() {
+  onDestroy(element) {
+    const { viewportFollow } = element.props;
+    const { viewport } = element.props.context;
+    if (viewportFollow) viewport.plugins.remove("follow");
   }
 };
 registerDirective("viewportFollow", ViewportFollow);
@@ -1061,54 +1071,23 @@ registerDirective("sound", Sound);
 registerDirective("soundListenerPosition", SoundListenerPosition);
 
 // src/directives/Drag.ts
-import { effect as effect2, isSignal } from "@signe/reactive";
-import { Rectangle } from "pixi.js";
+import { effect as effect2, isSignal as isSignal3 } from "@signe/reactive";
+import { Rectangle, Point } from "pixi.js";
 import { snap } from "popmotion";
 
-// src/directives/Transition.ts
-import { DisplacementFilter, Sprite, Texture, WRAP_MODES } from "pixi.js";
-import { animate } from "popmotion";
-var Transition = class extends Directive {
-  onInit(element) {
-  }
-  onMount(element) {
-    const { image } = element.props.transition;
-    const displacementSprite = new Sprite(Texture.from(image));
-    displacementSprite.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
-    const displacementFilter = new DisplacementFilter(displacementSprite);
-    const instance = element.componentInstance;
-    instance.filters = [displacementFilter];
-    instance.addChild(displacementSprite);
-    setTimeout(() => {
-      animate({
-        from: 0,
-        to: 1,
-        duration: 500,
-        onUpdate: (progress) => {
-          displacementFilter.scale.x = progress;
-          displacementFilter.scale.y = progress;
-        }
-      });
-    }, 5e3);
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
+// src/hooks/addContext.ts
+var addContext = (element, key, value) => {
+  element.props.context = {
+    ...element.props.context ?? {},
+    [key]: value
+  };
 };
-registerDirective("transition", Transition);
-
-// src/index.ts
-export * from "@signe/reactive";
-import { Howler } from "howler";
 
-// src/components/Canvas.ts
-import { effect as effect4, signal as signal3 } from "@signe/reactive";
-import { Container as Container3, autoDetectRenderer } from "pixi.js";
-import { loadYoga } from "yoga-layout";
+// src/hooks/useProps.ts
+import { isSignal as isSignal2, signal } from "@signe/reactive";
 
 // src/engine/reactive.ts
-import { isSignal as isSignal2 } from "@signe/reactive";
+import { isSignal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -1138,7 +1117,7 @@ function destroyElement(element) {
   element.propSubscriptions.forEach((sub) => sub.unsubscribe());
   element.effectSubscriptions.forEach((sub) => sub.unsubscribe());
   for (let name in element.directives) {
-    element.directives[name].onDestroy?.();
+    element.directives[name].onDestroy?.(element);
   }
   element.componentInstance.onDestroy?.(element.parent);
   element.effectUnmounts.forEach((fn) => fn?.());
@@ -1174,7 +1153,7 @@ function createComponent(tag, props) {
         set(element.props, path2 + "." + key, value);
       };
       Object.entries(props2).forEach(([key, value]) => {
-        if (isSignal2(value)) {
+        if (isSignal(value)) {
           const _value = value;
           if ("dependencies" in _value && _value.dependencies.size == 0) {
             _set(path, key, _value());
@@ -1184,7 +1163,7 @@ function createComponent(tag, props) {
             _value.observable.subscribe((value2) => {
               _set(path, key, value2);
               if (element.directives[key]) {
-                element.directives[key].onUpdate?.(value2);
+                element.directives[key].onUpdate?.(value2, element);
               }
               if (key == "tick") {
                 return;
@@ -1235,7 +1214,7 @@ function createComponent(tag, props) {
   ;
   async function propagateContext(element2) {
     if (element2.props.attach) {
-      const isReactiveAttach = isSignal2(element2.propObservables?.attach);
+      const isReactiveAttach = isSignal(element2.propObservables?.attach);
       if (!isReactiveAttach) {
         element2.props.children.push(element2.props.attach);
       } else {
@@ -1310,7 +1289,7 @@ function loop(itemsSubject, createElementFn) {
     let elements = [];
     let elementMap = /* @__PURE__ */ new Map();
     let isFirstSubscription = true;
-    const isArraySignal = (signal7) => Array.isArray(signal7());
+    const isArraySignal = (signal8) => Array.isArray(signal8());
     return new Observable((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
@@ -1439,7 +1418,7 @@ function loop(itemsSubject, createElementFn) {
 }
 function cond(condition, createElementFn) {
   let element = null;
-  if (isSignal2(condition)) {
+  if (isSignal(condition)) {
     const signalCondition = condition;
     return new Observable((subscriber) => {
       return signalCondition.observable.subscribe((bool) => {
@@ -1495,9 +1474,8 @@ function cond(condition, createElementFn) {
 }
 
 // src/hooks/useProps.ts
-import { isSignal as isSignal3, signal } from "@signe/reactive";
 var useProps = (props, defaults = {}) => {
-  if (isSignal3(props)) {
+  if (isSignal2(props)) {
     return props();
   }
   const obj = {};
@@ -1507,14 +1485,14 @@ var useProps = (props, defaults = {}) => {
   }
   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;
 };
 var useDefineProps = (props) => {
   return (schema) => {
-    const rawProps = isSignal3(props) ? props() : props;
+    const rawProps = isSignal2(props) ? props() : props;
     const validatedProps = {};
     for (const key in schema) {
       const propConfig = schema[key];
@@ -1543,7 +1521,7 @@ var useDefineProps = (props) => {
           validatedValue = value;
         }
       }
-      validatedProps[key] = isSignal3(validatedValue) ? validatedValue : signal(validatedValue);
+      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal(validatedValue);
     }
     return {
       ...useProps(rawProps),
@@ -1553,7 +1531,7 @@ var useDefineProps = (props) => {
 };
 function validateType(key, value, types) {
   if (value === void 0 || value === null) return;
-  const valueToCheck = isSignal3(value) ? value() : value;
+  const valueToCheck = isSignal2(value) ? value() : value;
   const valid = types.some((type) => {
     if (type === Number) return typeof valueToCheck === "number";
     if (type === String) return typeof valueToCheck === "string";
@@ -1571,8 +1549,277 @@ function validateType(key, value, types) {
   }
 }
 
+// src/directives/Drag.ts
+var Drop = class extends Directive {
+  constructor() {
+    super(...arguments);
+    this.elementRef = null;
+  }
+  onInit(element) {
+    this.elementRef = element;
+  }
+  onMount(element) {
+    addContext(element, "drop", element);
+  }
+  onUpdate() {
+  }
+  onDestroy() {
+    this.elementRef = null;
+  }
+};
+var Drag = class extends Directive {
+  constructor() {
+    super(...arguments);
+    this.elementRef = null;
+    this.stageRef = null;
+    this.offsetInParent = new Point();
+    this.isDragging = false;
+    this.viewport = null;
+    this.animationFrameId = null;
+    this.lastPointerPosition = new Point();
+    this.onDragMoveHandler = () => {
+    };
+    this.onDragEndHandler = () => {
+    };
+    this.onDragStartHandler = () => {
+    };
+    this.subscriptions = [];
+  }
+  onInit(element) {
+    this.elementRef = element;
+    this.onDragMoveHandler = this.onDragMove.bind(this);
+    this.onDragEndHandler = this.onDragEnd.bind(this);
+    this.onDragStartHandler = this.onPointerDown.bind(this);
+  }
+  onMount(element) {
+    const { rootElement, canvasSize, viewport, tick: tick2 } = 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 = effect2(() => {
+      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 = [
+      tick2.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
+   */
+  onDragMove(event) {
+    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;
+    }
+    this.lastPointerPosition.copyFrom(event.global);
+    const { x: xProp, y: yProp } = propObservables;
+    if (xProp !== void 0 && isSignal3(xProp)) {
+    }
+    if (yProp !== void 0 && isSignal3(yProp)) {
+    }
+  }
+  /**
+   * Moves the viewport if the dragged element is near screen edges
+   * @param globalPosition The global pointer position
+   */
+  updateViewportPosition(globalPosition) {
+    if (!this.viewport || !this.elementRef) return;
+    const dragProps = this.dragProps;
+    const edgeThreshold = dragProps?.viewport?.edgeThreshold();
+    const maxSpeed = dragProps?.viewport?.maxSpeed();
+    const screenLeft = 0;
+    const screenRight = this.viewport.screenWidth;
+    const screenTop = 0;
+    const screenBottom = this.viewport.screenHeight;
+    const instance = this.elementRef.componentInstance;
+    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;
+    if (distanceFromLeft < edgeThreshold) {
+      const velocity = maxSpeed * (1 - distanceFromLeft / edgeThreshold);
+      moveX = -velocity;
+    } else if (distanceFromRight < edgeThreshold) {
+      const velocity = maxSpeed * (1 - distanceFromRight / edgeThreshold);
+      moveX = velocity;
+    }
+    if (distanceFromTop < edgeThreshold) {
+      const velocity = maxSpeed * (1 - distanceFromTop / edgeThreshold);
+      moveY = -velocity;
+    } else if (distanceFromBottom < edgeThreshold) {
+      const velocity = maxSpeed * (1 - distanceFromBottom / edgeThreshold);
+      moveY = velocity;
+    }
+    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
+   */
+  onDragEnd() {
+    if (!this.isDragging || !this.elementRef) return;
+    const dragProps = this.dragProps;
+    this.isDragging = false;
+    dragProps?.end?.();
+    if (this.stageRef) {
+      this.stageRef.off("pointermove", this.onDragMoveHandler);
+    }
+  }
+  onPointerDown(event) {
+    if (!this.elementRef?.componentInstance || !this.stageRef || !this.elementRef.componentInstance.parent) return;
+    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);
+    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);
+    }
+    this.stageRef = null;
+    this.viewport = null;
+  }
+};
+registerDirective("drag", Drag);
+registerDirective("drop", Drop);
+
+// src/directives/Transition.ts
+import { DisplacementFilter, Sprite, Texture, WRAP_MODES } from "pixi.js";
+import { animate } from "popmotion";
+var Transition = class extends Directive {
+  onInit(element) {
+  }
+  onMount(element) {
+    const { image } = element.props.transition;
+    const displacementSprite = new Sprite(Texture.from(image));
+    displacementSprite.texture.baseTexture.wrapMode = WRAP_MODES.REPEAT;
+    const displacementFilter = new DisplacementFilter(displacementSprite);
+    const instance = element.componentInstance;
+    instance.filters = [displacementFilter];
+    instance.addChild(displacementSprite);
+    setTimeout(() => {
+      animate({
+        from: 0,
+        to: 1,
+        duration: 500,
+        onUpdate: (progress) => {
+          displacementFilter.scale.x = progress;
+          displacementFilter.scale.y = progress;
+        }
+      });
+    }, 5e3);
+  }
+  onUpdate(props) {
+  }
+  onDestroy() {
+  }
+};
+registerDirective("transition", Transition);
+
+// src/index.ts
+export * from "@signe/reactive";
+import { Howler } from "howler";
+
+// src/components/Canvas.ts
+import { effect as effect4, signal as signal4 } from "@signe/reactive";
+import { Container as Container3, autoDetectRenderer } from "pixi.js";
+import { loadYoga } from "yoga-layout";
+
 // src/components/DisplayObject.ts
-import { effect as effect3, signal as signal2 } from "@signe/reactive";
+import { effect as effect3, signal as signal3 } from "@signe/reactive";
 import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
 var EVENTS2 = [
@@ -1662,8 +1909,8 @@ function DisplayObject(extendClass) {
         0
       );
       this.isCustomAnchor = false;
-      this.displayWidth = signal2(0);
-      this.displayHeight = signal2(0);
+      this.displayWidth = signal3(0);
+      this.displayHeight = signal3(0);
       this.overrideProps = [];
     }
     get yoga() {
@@ -1959,14 +2206,14 @@ registerComponent("Canvas", class Canvas extends DisplayObject(Container3) {
 var Canvas2 = async (props = {}) => {
   let { cursorStyles, width, height, class: className } = useProps(props);
   const Yoga = await loadYoga();
-  if (!props.width) width = signal3(800);
-  if (!props.height) height = signal3(600);
+  if (!props.width) width = signal4(800);
+  if (!props.height) height = signal4(600);
   const renderer = await autoDetectRenderer({
     ...props,
     width: width?.(),
     height: height?.()
   });
-  const canvasSize = signal3({
+  const canvasSize = signal4({
     width: renderer.width,
     height: renderer.height
   });
@@ -1982,7 +2229,7 @@ var Canvas2 = async (props = {}) => {
     height: height?.()
   };
   if (!props.tick) {
-    options.context.tick = options.tick = signal3({
+    options.context.tick = options.tick = signal4({
       timestamp: 0,
       deltaTime: 0,
       frame: 0,
@@ -2268,10 +2515,10 @@ import {
 } from "pixi.js";
 
 // src/engine/animation.ts
-import { effect as effect6, signal as signal4 } from "@signe/reactive";
+import { effect as effect6, signal as signal5 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal7) {
-  return signal7.animatedState !== void 0;
+function isAnimatedSignal(signal8) {
+  return signal8.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2280,8 +2527,8 @@ function animatedSignal(initialValue, options = {}) {
     end: initialValue
   };
   let animation;
-  const publicSignal = signal4(initialValue);
-  const privateSignal = signal4(state);
+  const publicSignal = signal5(initialValue);
+  const privateSignal = signal5(state);
   effect6(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
@@ -2663,7 +2910,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect8, signal as signal5 } from "@signe/reactive";
+import { effect as effect8, signal as signal6 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -2688,7 +2935,7 @@ function Video(props) {
     volumechange: null,
     waiting: null
   };
-  const video = signal5(null);
+  const video = signal6(null);
   const defineProps = useDefineProps(props);
   const { play, loop: loop2, muted } = defineProps({
     play: {
@@ -2758,12 +3005,12 @@ function Video(props) {
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect9, signal as signal6 } from "@signe/reactive";
+import { effect as effect9, signal as signal7 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal6({
+  const _signal = signal7({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0
@@ -2981,10 +3228,7 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
   onInit(props) {
     super.onInit(props);
     for (let event of EVENTS3) {
-      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]);
     }
   }
   onMount(element) {
@@ -3023,8 +3267,11 @@ var CanvasViewport = class extends DisplayObject(PixiViewport) {
     if (props.worldHeight !== void 0) {
       this.worldHeight = props.worldHeight;
     }
+    if (props.drag) {
+      this.drag(props.drag);
+    }
     if (props.clamp) {
-      this.clamp(props.clamp);
+      this.clamp(props.clamp.value ?? props.clamp);
     }
     if (props.wheel) {
       if (props.wheel === true) {