Feature request: Drag events

[nightgrey]

Description

Note: This is about v8.

There's very often the necessity of binding drag events for interactivity purposes. This has to be implemented on the user's side every time (see the example of "Interactivity > Dragging" on the website) but could (and IMHO should) be handled by Pixi's event system.

I propose:

• drag
  (pointer is down and moved)
• dragstart
  (pointer is down and moved, once)
• dragend
  (pointer is down, was moved, and then released)

How it is supposed to work (exemplary / pseudo code):

container.on("pointerdown", () => {
  // Dispatch dragstart when the pointer is moved while the pointer is down, once
  container.once("pointermove", (event) => dispatchEvent("dragstart"));

  // Dispatch drag on every move when the pointer is down
  container.on("pointermove", event => {
    dispatchEvent("drag");
  });

  // Dispatch dragend after the mouse was moved while the pointer was down, and now the pointer is up
  // Note: This could be combined with the .once("pointermove") above; but for an (IMHO) clearer mental picture, I separated this into three distinct event bindings.
  container.once("pointermove", () => {
    container.once("pointerup", event => dispatchEvent("dragend"));
  });
})

I tried implementing this by extending the EventSystem/EventBoundary and the Container mixin. I managed to do most of it, but had trouble with the critical part: Event handling in EventBoundary. I had something that fired the drag events I added, but I haven't grokked the event handling in EventBoundary entirely, had double/triple firings. I also wasn't entirely clear on how it should be implemented, so it was just a buggy POC .

If a maintainer (or someone with good knowledge of EventSystem/EventBoundary) is willing to help and look over it I'd be happy to work on this.

Edit: I'll post a fork with my changes later.

---

Is this something of interest for Pixi.js or would you see this as out of scope?

If it is out of scope, I think we could make an example of how to extend the global EventSystem out of this.

What do you think?

[lunarraid]

Drag doesn't work here because most often, a drag event is when the user is actually dragging a DisplayObject (clicking on it and moving it with their cursor). pointermove is the canonically correct event for what you want, with the only issue being you only care about it if it was initiated with a pointerdown first, in which case the above tiny snippet is exactly what you want. It's so small, in my opinion, that there is no need for an entire core feature around it.