Defining global event type

[geraintluff]

Is there a way to define a global event type which is translated from a DOM event? For example, I'd like to define @move such that I can write:

<div @move="(move) => {posX += move.dx; posY += move.dy}" />

I'd then have a single global definition for the "move" event which listened for mouse-drag, keyboard and scroll-wheel DOM events, and translated them all to common dx/dy values.

The idea is to concisely provide consistent interactivity across my app, instead of having to separately map drag/keyboard/scroll for each control. Is this possible?

[geraintluff]

The API I'm imagining might look something like this:

function registerMove(element, handler) {
    let scrollHandler = event => {...}; // calls handler()
    element.addEventListener('scroll', scrollHandler);

    // other event types
    // ...
    
    // returns an un-register callback
    return () => {
        element.removeEventListener('scroll', scrollHandler);
        // etc.
    };
}

app.addCustomEvent("move", registerMove);

[aniruddhaadak80]

Hello @geraintluff,

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!

[geraintluff]

Hi @aniruddhaadak80 - I don't see how this connects to my question, which wasn't about state or reactivity at all.

Are you using AI tools to help write responses?

[GitNimay]

Not as a global custom @move event on native elements, at least not in the way Vue handles @click, @keydown, etc.

On a native element, this:

<div @move="onMove" />

means Vue will register a DOM event listener for an actual DOM event named move. Vue does not provide a global event translation layer where you can define move once and have it expand into mouse, keyboard, and wheel listeners.

The Vue way to do this is a custom directive:

import type { Directive } from "vue";

type MoveEvent = {
  dx: number;
  dy: number;
  source: "pointer" | "keyboard" | "wheel";
};

type MoveHandler = (event: MoveEvent) => void;

export const vMove: Directive<HTMLElement, MoveHandler> = {
  mounted(el, binding) {
    let lastX = 0;
    let lastY = 0;
    let dragging = false;

    const emit = (event: MoveEvent) => {
      binding.value(event);
    };

    const pointerdown = (event: PointerEvent) => {
      dragging = true;
      lastX = event.clientX;
      lastY = event.clientY;
      el.setPointerCapture?.(event.pointerId);
    };

    const pointermove = (event: PointerEvent) => {
      if (!dragging) {
        return;
      }

      emit({
        dx: event.clientX - lastX,
        dy: event.clientY - lastY,
        source: "pointer",
      });

      lastX = event.clientX;
      lastY = event.clientY;
    };

    const pointerup = () => {
      dragging = false;
    };

    const wheel = (event: WheelEvent) => {
      emit({
        dx: event.deltaX,
        dy: event.deltaY,
        source: "wheel",
      });
    };

    const keydown = (event: KeyboardEvent) => {
      const step = event.shiftKey ? 10 : 1;

      const map: Record<string, [number, number]> = {
        ArrowLeft: [-step, 0],
        ArrowRight: [step, 0],
        ArrowUp: [0, -step],
        ArrowDown: [0, step],
      };

      const delta = map[event.key];

      if (delta) {
        emit({
          dx: delta[0],
          dy: delta[1],
          source: "keyboard",
        });
      }
    };

    el.addEventListener("pointerdown", pointerdown);
    el.addEventListener("pointermove", pointermove);
    el.addEventListener("pointerup", pointerup);
    el.addEventListener("pointercancel", pointerup);
    el.addEventListener("wheel", wheel);
    el.addEventListener("keydown", keydown);

    if (!el.hasAttribute("tabindex")) {
      el.tabIndex = 0;
    }

    (el as any).__moveCleanup = () => {
      el.removeEventListener("pointerdown", pointerdown);
      el.removeEventListener("pointermove", pointermove);
      el.removeEventListener("pointerup", pointerup);
      el.removeEventListener("pointercancel", pointerup);
      el.removeEventListener("wheel", wheel);
      el.removeEventListener("keydown", keydown);
    };
  },

  unmounted(el) {
    (el as any).__moveCleanup?.();
  },
};

Register it globally:

app.directive("move", vMove);

Then use it like this:

<div
  v-move="(move) => { posX += move.dx; posY += move.dy }"
/>

So the syntax would be v-move, not @move.

If you really want @move, the directive could dispatch a real custom DOM event:

el.dispatchEvent(
  new CustomEvent("move", {
    detail: { dx, dy },
  }),
);

and then this would work:

<div @move="(event) => { posX += event.detail.dx; posY += event.detail.dy }" />

But I would prefer v-move, because it is clearer that you are installing behavior on the element rather than listening for a native event that already exists.