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

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));
@@ -957,158 +959,11 @@ var Scheduler = class extends Directive {
 };
 registerDirective("tick", Scheduler);
 
-// src/directives/ViewportFollow.ts
-var ViewportFollow = class extends Directive {
-  onInit(element) {
-  }
-  onMount(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);
-  }
-  onUpdate(props) {
-  }
-  onDestroy() {
-  }
-};
-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 } from "@signe/reactive";
-import { Rectangle } 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() {
-  }
-};
-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 as signal2 } from "@signe/reactive";
 
 // src/engine/reactive.ts
-import { isSignal as isSignal2 } from "@signe/reactive";
+import { isComputed, isSignal, signal } from "@signe/reactive";
 import {
   Observable,
   Subject,
@@ -1137,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.directives[name].onDestroy?.(element);
   }
   element.componentInstance.onDestroy?.(element.parent);
-  element.effectUnmounts.forEach((fn) => fn?.());
 }
 function createComponent(tag, props) {
   if (!components[tag]) {
@@ -1174,7 +1029,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 +1039,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 +1090,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 {
@@ -1306,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 = (signal7) => Array.isArray(signal7());
+    const isArraySignal = (signal9) => Array.isArray(signal9());
     return new Observable((subscriber) => {
       const subscription = isArraySignal(itemsSubject) ? itemsSubject.observable.subscribe((change) => {
         if (isFirstSubscription) {
@@ -1439,7 +1299,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,26 +1355,25 @@ 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 = {};
   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] = signal(defaults[key]);
+      obj[key] = isPrimitive(defaults[key]) ? signal2(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 +1402,7 @@ var useDefineProps = (props) => {
           validatedValue = value;
         }
       }
-      validatedProps[key] = isSignal3(validatedValue) ? validatedValue : signal(validatedValue);
+      validatedProps[key] = isSignal2(validatedValue) ? validatedValue : signal2(validatedValue);
     }
     return {
       ...useProps(rawProps),
@@ -1553,7 +1412,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 +1430,420 @@ 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() {
+    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;
+    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
+   * @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 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 signal2 } 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 = [
@@ -1662,8 +1933,8 @@ function DisplayObject(extendClass) {
         0
       );
       this.isCustomAnchor = false;
-      this.displayWidth = signal2(0);
-      this.displayHeight = signal2(0);
+      this.displayWidth = signal4(0);
+      this.displayHeight = signal4(0);
       this.overrideProps = [];
     }
     get yoga() {
@@ -1959,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 = signal3(800);
-  if (!props.height) height = signal3(600);
+  if (!props.width) width = signal5(800);
+  if (!props.height) height = signal5(600);
   const renderer = await autoDetectRenderer({
     ...props,
     width: width?.(),
     height: height?.()
   });
-  const canvasSize = signal3({
+  const canvasSize = signal5({
     width: renderer.width,
     height: renderer.height
   });
@@ -1982,7 +2253,7 @@ var Canvas2 = async (props = {}) => {
     height: height?.()
   };
   if (!props.tick) {
-    options.context.tick = options.tick = signal3({
+    options.context.tick = options.tick = signal5({
       timestamp: 0,
       deltaTime: 0,
       frame: 0,
@@ -2079,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) {
@@ -2268,10 +2543,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 signal6 } from "@signe/reactive";
 import { animate as animatePopmotion } from "popmotion";
-function isAnimatedSignal(signal7) {
-  return signal7.animatedState !== void 0;
+function isAnimatedSignal(signal9) {
+  return signal9.animatedState !== void 0;
 }
 function animatedSignal(initialValue, options = {}) {
   const state = {
@@ -2280,8 +2555,8 @@ function animatedSignal(initialValue, options = {}) {
     end: initialValue
   };
   let animation;
-  const publicSignal = signal4(initialValue);
-  const privateSignal = signal4(state);
+  const publicSignal = signal6(initialValue);
+  const privateSignal = signal6(state);
   effect6(() => {
     const currentState = privateSignal();
     publicSignal.set(currentState.current);
@@ -2663,7 +2938,7 @@ var Sprite2 = (props) => {
 };
 
 // src/components/Video.ts
-import { effect as effect8, signal as signal5 } from "@signe/reactive";
+import { effect as effect8, signal as signal7 } from "@signe/reactive";
 function Video(props) {
   const eventsMap = {
     audioprocess: null,
@@ -2688,7 +2963,7 @@ function Video(props) {
     volumechange: null,
     waiting: null
   };
-  const video = signal5(null);
+  const video = signal7(null);
   const defineProps = useDefineProps(props);
   const { play, loop: loop2, muted } = defineProps({
     play: {
@@ -2758,12 +3033,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 signal8 } from "@signe/reactive";
 function isTrigger(arg) {
   return arg?.start && arg?.listen;
 }
 function trigger(globalConfig) {
-  const _signal = signal6({
+  const _signal = signal8({
     config: globalConfig,
     value: 0,
     resolve: (value) => void 0
@@ -2981,10 +3256,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,6 +3295,9 @@ 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.value ?? props.clamp);
     }