How does eventData work?

[frnora]

Introduction

Hi,

Could you please explain how eventData works, particularly how the data object is shared/passed between different events?

E.g. I can dragLinkStart from a Connect tool on mousedown, (or mouseleave, etc., whatever). This adds the linkView data to the mousedown event (under the correct cid, of course). Then on pointerup event I can get this object and the linkView will be there.

Two different events, yet they share the data. How is this achieved?

Yet, if I extend the Connect tool and add e.g. a random event:

this.events = {
    ....
    mouseenter: "mouseenter",
};

// let's assume this executes while the the mouse button is held down;
// no access to `linkView` in the method either
mouseenter( e ) {
    this.relatedView.eventData(e, { randomData: true });
}

... this data will be only added to the mouseenter event and I won't have access to it in e.g. the pointerup.

Thank you.

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Only consecutive pointerdown, pointermove and pointerup events can share information through the evt.data object. See docs.

It's a feature we preserved when migrating from jQuery.

When the user starts dragging an element (pointerdown), we attach pointermove and pointerup listeners and make them share the data object.

function onPointerDown() {
  const data = {};
  paper.$el.on('pointermove', '.joint-element', data, onPointerMove);
  paper.$el.on('pointerup', '.joint-element', data, onPointerUp);
}