Dragging multiple selected elements

[Ndmanh123]

Hi i'm using JointJS and Rappid 3.5. i'm trying to implement selecting multiple elements in a similar way as in Kitchensink https://resources.jointjs.com/demos/kitchensink
I didn't have any issue with implementing selecting multiple elements but when i drag one of the selected element .Is there some configuration I have to use to make it drag the whole selection ? look like dragging all selected element should be the default behavior ,am i right? can't any one tell me how to make it work

[kumilingus]

Here's an answer from Google Groups.

I just fix the problem by delete 1 css in css file i get from the source code demo dynamic-stencil

 .selection-box {
   opacity: 0.3;
   /* pointer-events: none; */ is was this line 
}

and set allowTranslate to true, I hope that could help you

By default, we capture the pointer event on the selection box element and translate all selected elements while the user is dragging. That's why the pointer-events: auto on .selection-box is important (without this property the target of the pointer event would be the element view itself and the default drag and drop mechanism would be triggered). Please make sure that is not overridden in your application.

The allowTranslate is true by default.

[Ndmanh123]

you could see manhnd is short cut for Ninh Duc Manh so I'm the one answer that on google groups
but still thank for let me know more about that

[mwanagosos]

@kumilingus @Ndmanh123 Hi :)
While removing pointer-events: none; solved this problem for me, it introduced another issue.

https://resources.jointjs.com/demos/qad
I have shapes that look very similar to the question blocks in the above demo. When I select a shape, the selection block is preventing me from using the left half of the ports to create a link. Using pointer-events: none; was solving this problem for me, but caused the issue with dragging multiple blocks.

Is there a way to solve both issues?

[mwanagosos]

Doing

paper.on(
  'element:pointerdown',
  (elementView: dia.ElementView, event: dia.Event) => {
    selection.onSelectionBoxPointerDown(event);
  },
);

together with pointer-events: none;
would give me the expected behavior, but the onSelectionBoxPointerDown function is protected and shouldn't be called like that.

[mwanagosos]

@kumilingus Is there some better solution than doing this?

[mwanagosos]

This is the most elegant solution I came up with so far.

CustomSelection.tsx

import { ui, dia } from '@clientio/rappid';
import styles from './CustomSelection.module.scss';

class CustomSelection extends ui.Selection {
  constructor(options: ui.Selection.Options) {
    super(options);
    this.el.classList.add(styles.customSelection);
    options.paper.on(
      'element:pointerdown',
      this.initiateSelectionForEventTarget.bind(this),
    );
  }
  protected initiateSelectionForEventTarget(
    elementView: dia.ElementView,
    event: dia.Event,
  ) {
    // allows us to drag multiple selected blocks while still
    // using pointer-events: none;
    return this.onSelectionBoxPointerDown(event);
  }
}

export default CustomSelection;

CustomSelection.module.scss

.customSelection {
  :global .selection-box.selection-box {
     pointer-events: none; // allows clicking on the port while cell is selected
  }
}

[kumilingus]

Hi @mwanagosos, that is a very neat workaround. This has been a technical debt for some time.

It might be good to disable the default element actions (elementMove, embedding, ...) before you start dragging the entire selection.

paper.setInteractivity(view => {
    return (selection.collection.length === 1 || !selection.collection.has(view.model))
        ? true
        : { elementMove: false }
});

In the future, it would be useful to add an API to prevent default actions from the pointer handler e.g.

paper.on('element:pointerdown', (elementView: dia.ElementView, evt: dia.Event) => {
  paper.preventDefaultAction(evt, 'elementMove');
  selection.initiateSelectionForEventTarget(evt);
});

---

A different approach with a custom selection can be seen here: https://jsfiddle.net/kumilingus/1hx9obuq/

[mwanagosos]

@kumilingus Thank you for your input. Is there a particular issue that would be solved by setting elementMove to false? I haven't experienced any, but I might have overlooked something.

[kumilingus]

Not preventing the default action can cause problems if certain paper options are enabled (embeddingMode, restrictTranslate). The ui.Snaplines would also work incorrectly

[mwanagosos]

@kumilingus Unfortunately, I started experiencing a bug when selecting a single shape and moving the mouse quickly at the same time to draging. It often caused the selection box to not appear exactly over the shape and was sometimes off by quite a bit.
I've managed to fix that with an additional if condition.

protected initiateSelectionForEventTarget(
  cellView: dia.CellView,
  event: dia.Event,
) {
  if (this.collection.length === 0) {
    // this is not needed if only one element is selected
    // and can cause the single selection box to lag and display incorrectly
    return;
  }
  this.setPaperInteractivity();
  // allows us to drag multiple selected blocks while still
  // using pointer-events: none;
  return this.onSelectionBoxPointerDown(event);
}

Thanks to doing

if (this.collection.length <= 1) {
  // this is not needed if only one element is selected
  // and can cause the single selection box to lag and display incorrectly
  return;
}

this bug no longer happens for me.

[kumilingus]

I'm glad it works now.