Device Event that is fired after elements are selected and box selection has ended about react-cytoscapejs HOT 2 CLOSED

The events are somewhat analogous to mousedown-mouseup-click: boxstart-boxend-box.

You can track all of the elements that are in a box gesture by keeping a list similar to your example:

const GROUP_THRESHOLD = 100; // time delta that separates one box gesture from another

let boxed = cy.collection();

const sendData = eles => {
  let elsData = eles.map(el => el.data());

  // send the array of data json objs somewhere; just log for now...
  console.log(elsData);
};

const checkGroup = _.debounce(() => {
  sendData(boxed);

  boxed = cy.collection();
}, GROUP_THRESHOLD); // events must be at least this duration apart to make a separate group

const addToBoxed = el => {
  boxed.merge(el);

  checkGroup();
};

cy.on('box', e => { // or 'boxselect'
  const el = e.target;

  addToBoxed(el);
});

I've considered having native support in the core lib for getting a group of enclosed elements at once from a box gesture. The only solution I've seen that could work well for that is to allow for e.target to have more than one element. This would also work for other gestures, and this would generally reduce the number of event objects created for group events. However, this approach is inconsistent with how listeners work in most systems --- e.g. the DOM. It would also be a breaking API change.

So, the pattern posted above works for now.

from react-cytoscapejs.

Thank you Max! This works perfectly, I'll keep an eye out for changes on the API in case native support is added.

from react-cytoscapejs.