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

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as _signe_reactive from '@signe/reactive';
-import { WritableSignal, Signal, WritableArraySignal, WritableObjectSignal } from '@signe/reactive';
+import { WritableSignal, Signal } from '@signe/reactive';
 export * from '@signe/reactive';
 import { Subscription, Subject, Observable } from 'rxjs';
 export { isObservable } from 'rxjs';
 import { Node } from 'yoga-layout';
 import * as PIXI from 'pixi.js';
-import { ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
+import { FederatedPointerEvent, ObservablePoint, Graphics as Graphics$1, Texture, TextStyle, Matrix } from 'pixi.js';
 export { Howler } from 'howler';
 import * as popmotion from 'popmotion';
 
@@ -68,6 +68,26 @@ declare function animatedSequence(sequence: ((() => Promise<void>) | (() => Prom
 
 type SignalOrPrimitive<T> = T | Signal<T> | AnimatedSignal<T>;
 
+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>;
+    };
+};
+
+type ViewportFollowProps = {
+    viewportFollow?: boolean | {
+        speed?: SignalOrPrimitive<number>;
+        acceleration?: SignalOrPrimitive<number>;
+        radius?: SignalOrPrimitive<number>;
+    };
+};
+
 type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
 type AlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
@@ -114,6 +134,8 @@ interface DisplayObjectProps {
     filters?: any[];
     blendMode?: SignalOrPrimitive<PIXI.BLEND_MODES>;
     blur?: SignalOrPrimitive<number>;
+    drag?: DragProps;
+    viewportFollow?: ViewportFollowProps;
     click?: PIXI.FederatedEventHandler;
     mousedown?: PIXI.FederatedEventHandler;
     mouseenter?: PIXI.FederatedEventHandler;
@@ -219,17 +241,6 @@ declare function DisplayObject(extendClass: any): {
 interface Props {
     [key: string]: any;
 }
-type ArrayChange<T> = {
-    type: "add" | "remove" | "update" | "init" | "reset";
-    index?: number;
-    items: T[];
-};
-type ObjectChange<T> = {
-    type: "add" | "remove" | "update" | "init" | "reset";
-    key?: string;
-    value?: T;
-    items: T[];
-};
 type NestedSignalObjects = {
     [Key in string]: NestedSignalObjects | Signal<any>;
 };
@@ -279,7 +290,7 @@ declare function createComponent(tag: string, props?: Props): Element;
  * @param {Function} createElementFn - A function that takes an item and returns an element representation.
  * @returns {Observable} An observable that emits the list of created child elements.
  */
-declare function loop<T>(itemsSubject: WritableArraySignal<T[]> | WritableObjectSignal<T>, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
+declare function loop<T>(itemsSubject: any, createElementFn: (item: T, index: number | string) => Element | null): FlowObservable;
 /**
  * Conditionally creates and destroys elements based on a condition signal.
  *
@@ -391,23 +402,18 @@ interface GraphicsProps extends DisplayObjectProps {
     draw?: (graphics: Graphics$1) => 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 {
     svg: string;
@@ -1134,4 +1140,4 @@ declare namespace utils {
   export { utils_arrayEquals as arrayEquals, utils_calculateDistance as calculateDistance, utils_error as error, utils_fps2ms as fps2ms, utils_get as get, utils_isBrowser as isBrowser, utils_isFunction as isFunction, utils_isObject as isObject, utils_isPromise as isPromise, utils_log as log, utils_preciseNow as preciseNow, utils_set as set, utils_setObservablePoint as setObservablePoint };
 }
 
-export { type AnimateOptions, type AnimatedSignal, type AnimatedState, type ArrayChange, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, type ObjectChange, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };
+export { type AnimateOptions, type AnimatedSignal, type AnimatedState, Canvas, Circle, type ComponentFunction, type ComponentInstance, Container, DisplayObject, EVENTS, Easing, type Element, Ellipse, Graphics, NineSliceSprite, ParticlesEmitter, type Props, RadialGradient, Rect, Scene, Sprite, Text, TilingSprite, Triangle, utils as Utils, Video, Viewport, animatedSequence, animatedSignal, bootstrapCanvas, cond, createComponent, currentSubscriptionsTracker, h, isAnimatedSignal, isElement, isPrimitive, isTrigger, loop, mount, mountTracker, on, registerComponent, Svg as svg, tick, trigger, useDefineProps, useProps };

package/dist/index.js

@@ -959,135 +959,11 @@ var Scheduler = class extends Directive {
 };
 registerDirective("tick", Scheduler);
 
-// src/directives/ViewportFollow.ts
-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");
-    }
-    if (viewportFollow) {
-      viewport.follow(element.componentInstance);
-    } else {
-      viewport.plugins.remove("follow");
-    }
-  }
-  onDestroy(element) {
-    const { viewportFollow } = element.props;
-    const { viewport } = element.props.context;
-    if (viewportFollow) viewport.plugins.remove("follow");
-  }
-};
-registerDirective("viewportFollow", ViewportFollow);
-
-// src/directives/Sound.ts
-import { effect } from "@signe/reactive";
-import { Howl } from "howler";
-var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop", "mute", "volume", "rate", "seek", "fade", "unlock"];
-var Sound = class extends Directive {
-  constructor() {
-    super(...arguments);
-    this.eventsFn = [];
-    this.maxVolume = 1;
-    this.maxDistance = 100;
-  }
-  onInit(element) {
-  }
-  onMount(element) {
-    const { props } = element;
-    const tick2 = props.context.tick;
-    const { src, autoplay, loop: loop2, volume, spatial } = props.sound;
-    this.sound = new Howl({
-      src,
-      autoplay,
-      loop: loop2,
-      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);
-    }
-    if (spatial) {
-      const { soundListenerPosition } = props.context;
-      if (!soundListenerPosition) {
-        throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
-      }
-      const { x: listenerX, y: listenerY } = soundListenerPosition;
-      this.tickSubscription = effect(() => {
-        tick2();
-        const { x, y } = element.componentInstance;
-        const distance = calculateDistance(x, y, listenerX(), listenerY());
-        const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
-        this.sound.volume(volume2);
-      }).subscription;
-    }
-  }
-  onUpdate(props) {
-    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props;
-    if (volume != void 0) this.sound.volume(volume);
-    if (loop2 != void 0) this.sound.loop(loop2);
-    if (mute != void 0) this.sound.mute(mute);
-    if (seek != void 0) this.sound.seek(seek);
-    if (playing != void 0) {
-      if (playing) this.sound.play();
-      else this.sound.pause();
-    }
-    if (spatial) {
-      this.maxVolume = spatial.maxVolume ?? this.maxVolume;
-      this.maxDistance = spatial.maxDistance ?? this.maxDistance;
-    }
-    if (rate != void 0) 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]);
-      }
-    }
-  }
-};
-var SoundListenerPosition = class extends Directive {
-  onMount(element) {
-    element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition;
-  }
-  onInit(element) {
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
-};
-registerDirective("sound", Sound);
-registerDirective("soundListenerPosition", SoundListenerPosition);
-
-// src/directives/Drag.ts
-import { effect as effect2, isSignal as isSignal3 } from "@signe/reactive";
-import { Rectangle, Point } from "pixi.js";
-import { snap } from "popmotion";
-
-// src/hooks/addContext.ts
-var addContext = (element, key, value) => {
-  element.props.context = {
-    ...element.props.context ?? {},
-    [key]: value
-  };
-};
-
 // src/hooks/useProps.ts
-import { isSignal as isSignal2, signal } from "@signe/reactive";
+import { isSignal as isSignal2, signal as signal2 } from "@signe/reactive";
 
 // src/engine/reactive.ts
-import { isSignal } from "@signe/reactive";
+import { isComputed, isSignal, signal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -1116,11 +992,11 @@ function destroyElement(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);
-  element.effectUnmounts.forEach((fn) => fn?.());
 }
 function createComponent(tag, props) {
   if (!components[tag]) {
@@ -1285,11 +1161,16 @@ function createComponent(tag, props) {
   return element;
 }
 function loop(itemsSubject, createElementFn) {
+  if (isComputed(itemsSubject) && itemsSubject.dependencies.size == 0) {
+    itemsSubject = signal(itemsSubject());
+  } else if (!isSignal(itemsSubject)) {
+    itemsSubject = signal(itemsSubject);
+  }
   return defer(() => {
     let elements = [];
     let elementMap = /* @__PURE__ */ new Map();
     let isFirstSubscription = true;
-    const isArraySignal = (signal8) => Array.isArray(signal8());
+    const isArraySignal = (signal9) => Array.isArray(signal9());
     return new Observable((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
@@ -1481,11 +1362,11 @@ var useProps = (props, defaults = {}) => {
   const obj = {};
   for (let key in props) {
     const value = props[key];
-    obj[key] = isPrimitive(value) ? signal(value) : value;
+    obj[key] = isPrimitive(value) ? signal2(value) : value;
   }
   for (let key in defaults) {
     if (!(key in obj)) {
-      obj[key] = isPrimitive(defaults[key]) ? signal(defaults[key]) : defaults[key];
+      obj[key] = isPrimitive(defaults[key]) ? signal2(defaults[key]) : defaults[key];
     }
   }
   return obj;
@@ -1521,7 +1402,7 @@ var useDefineProps = (props) => {
           validatedValue = value;
         }
       }
-      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal(validatedValue);
+      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal2(validatedValue);
     }
     return {
       ...useProps(rawProps),
@@ -1549,6 +1430,142 @@ function validateType(key, value, types) {
   }
 }
 
+// src/directives/ViewportFollow.ts
+var ViewportFollow = class extends Directive {
+  onInit(element) {
+  }
+  onMount(element) {
+    this.onUpdate(element.props.viewportFollow, element);
+  }
+  onUpdate(viewportFollow, 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) {
+      if (viewportFollow === true) {
+        viewport.follow(element.componentInstance);
+      } else {
+        const options = useProps(viewportFollow, {
+          speed: void 0,
+          acceleration: void 0,
+          radius: void 0
+        });
+        viewport.follow(element.componentInstance, {
+          speed: options.speed(),
+          acceleration: options.acceleration(),
+          radius: options.radius()
+        });
+      }
+    } else {
+      viewport.plugins.remove("follow");
+    }
+  }
+  onDestroy(element) {
+    const { viewportFollow } = element.props;
+    const { viewport } = element.props.context;
+    if (viewportFollow) viewport.plugins.remove("follow");
+  }
+};
+registerDirective("viewportFollow", ViewportFollow);
+
+// src/directives/Sound.ts
+import { effect } from "@signe/reactive";
+import { Howl } from "howler";
+var EVENTS = ["load", "loaderror", "playerror", "play", "end", "pause", "stop", "mute", "volume", "rate", "seek", "fade", "unlock"];
+var Sound = class extends Directive {
+  constructor() {
+    super(...arguments);
+    this.eventsFn = [];
+    this.maxVolume = 1;
+    this.maxDistance = 100;
+  }
+  onInit(element) {
+  }
+  onMount(element) {
+    const { props } = element;
+    const tick2 = props.context.tick;
+    const { src, autoplay, loop: loop2, volume, spatial } = props.sound;
+    this.sound = new Howl({
+      src,
+      autoplay,
+      loop: loop2,
+      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);
+    }
+    if (spatial) {
+      const { soundListenerPosition } = props.context;
+      if (!soundListenerPosition) {
+        throw new error("SoundListenerPosition directive is required for spatial sound in component parent");
+      }
+      const { x: listenerX, y: listenerY } = soundListenerPosition;
+      this.tickSubscription = effect(() => {
+        tick2();
+        const { x, y } = element.componentInstance;
+        const distance = calculateDistance(x, y, listenerX(), listenerY());
+        const volume2 = Math.max(this.maxVolume - distance / this.maxDistance, 0);
+        this.sound.volume(volume2);
+      }).subscription;
+    }
+  }
+  onUpdate(props) {
+    const { volume, loop: loop2, mute, seek, playing, rate, spatial } = props;
+    if (volume != void 0) this.sound.volume(volume);
+    if (loop2 != void 0) this.sound.loop(loop2);
+    if (mute != void 0) this.sound.mute(mute);
+    if (seek != void 0) this.sound.seek(seek);
+    if (playing != void 0) {
+      if (playing) this.sound.play();
+      else this.sound.pause();
+    }
+    if (spatial) {
+      this.maxVolume = spatial.maxVolume ?? this.maxVolume;
+      this.maxDistance = spatial.maxDistance ?? this.maxDistance;
+    }
+    if (rate != void 0) 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]);
+      }
+    }
+  }
+};
+var SoundListenerPosition = class extends Directive {
+  onMount(element) {
+    element.props.context.soundListenerPosition = element.propObservables?.soundListenerPosition;
+  }
+  onInit(element) {
+  }
+  onUpdate(props) {
+  }
+  onDestroy() {
+  }
+};
+registerDirective("sound", Sound);
+registerDirective("soundListenerPosition", SoundListenerPosition);
+
+// src/directives/Drag.ts
+import { effect as effect2, isComputed as isComputed2, isSignal as isSignal3 } from "@signe/reactive";
+import { Rectangle, Point } from "pixi.js";
+import { snap } from "popmotion";
+
+// src/hooks/addContext.ts
+var addContext = (element, key, value) => {
+  element.props.context = {
+    ...element.props.context ?? {},
+    [key]: value
+  };
+};
+
 // src/directives/Drag.ts
 var Drop = class extends Directive {
   constructor() {
@@ -1674,10 +1691,17 @@ var Drag = class extends Directive {
     }
     this.lastPointerPosition.copyFrom(event.global);
     const { x: xProp, y: yProp } = propObservables;
-    if (xProp !== void 0 && isSignal3(xProp)) {
-    }
-    if (yProp !== void 0 && isSignal3(yProp)) {
-    }
+    const updatePosition = (prop, value) => {
+      if (isComputed2(prop)) {
+        prop.dependencies.forEach((dependency) => {
+          dependency.set(value);
+        });
+      } else if (isSignal3(prop)) {
+        prop.set(value);
+      }
+    };
+    if (xProp !== void 0) updatePosition(xProp, instance.position.x);
+    if (yProp !== void 0) updatePosition(yProp, instance.position.y);
   }
   /**
    * Moves the viewport if the dragged element is near screen edges
@@ -1814,12 +1838,12 @@ export * from "@signe/reactive";
 import { Howler } from "howler";
 
 // src/components/Canvas.ts
-import { effect as effect4, signal as signal4 } from "@signe/reactive";
+import { effect as effect4, signal as signal5 } 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 signal3 } from "@signe/reactive";
+import { effect as effect3, signal as signal4 } from "@signe/reactive";
 import { DropShadowFilter } from "pixi-filters";
 import { BlurFilter, ObservablePoint } from "pixi.js";
 var EVENTS2 = [
@@ -1909,8 +1933,8 @@ function DisplayObject(extendClass) {
         0
       );
       this.isCustomAnchor = false;
-      this.displayWidth = signal3(0);
-      this.displayHeight = signal3(0);
+      this.displayWidth = signal4(0);
+      this.displayHeight = signal4(0);
       this.overrideProps = [];
     }
     get yoga() {
@@ -2206,14 +2230,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 = signal4(800);
-  if (!props.height) height = signal4(600);
+  if (!props.width) width = signal5(800);
+  if (!props.height) height = signal5(600);
   const renderer = await autoDetectRenderer({
     ...props,
     width: width?.(),
     height: height?.()
   });
-  const canvasSize = signal4({
+  const canvasSize = signal5({
     width: renderer.width,
     height: renderer.height
   });
@@ -2229,7 +2253,7 @@ var Canvas2 = async (props = {}) => {
     height: height?.()
   };
   if (!props.tick) {
-    options.context.tick = options.tick = signal4({
+    options.context.tick = options.tick = signal5({
       timestamp: 0,
       deltaTime: 0,
       frame: 0,
@@ -2326,12 +2350,16 @@ var CanvasGraphics = class extends DisplayObject(PixiGraphics) {
   onInit(props) {
     super.onInit(props);
     if (props.draw) {
-      effect5(() => {
+      this.clearEffect = effect5(() => {
         this.clear();
         props.draw?.(this);
       });
     }
   }
+  onDestroy() {
+    this.clearEffect.subscription.unsubscribe();
+    super.onDestroy();
+  }
 };
 registerComponent("Graphics", CanvasGraphics);
 function Graphics(props) {
@@ -2515,10 +2543,10 @@ import {
 } from "pixi.js";
 
 // src/engine/animation.ts
-import { effect as effect6, signal as signal5 } from "@signe/reactive";
+import { effect as effect6, signal as signal6 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal8) {
-  return signal8.animatedState !== void 0;
+function isAnimatedSignal(signal9) {
+  return signal9.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2527,8 +2555,8 @@ function animatedSignal(initialValue, options = {}) {
     end: initialValue
   };
   let animation;
-  const publicSignal = signal5(initialValue);
-  const privateSignal = signal5(state);
+  const publicSignal = signal6(initialValue);
+  const privateSignal = signal6(state);
   effect6(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
@@ -2910,7 +2938,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect8, signal as signal6 } from "@signe/reactive";
+import { effect as effect8, signal as signal7 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -2935,7 +2963,7 @@ function Video(props) {
     volumechange: null,
     waiting: null
   };
-  const video = signal6(null);
+  const video = signal7(null);
   const defineProps = useDefineProps(props);
   const { play, loop: loop2, muted } = defineProps({
     play: {
@@ -3005,12 +3033,12 @@ function Video(props) {
 import { Text as PixiText } from "pixi.js";
 
 // src/engine/trigger.ts
-import { effect as effect9, signal as signal7 } from "@signe/reactive";
+import { effect as effect9, signal as signal8 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal7({
+  const _signal = signal8({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0