[Feat]: ui.Selection: support `scrollWhileDragging` feature when the element selection is in progress.

This issue has been tracked since 2022-11-09.

What happened?

  • While element selection in canvas not getting horizontal scroll and select other elements
  • Expected selection behaviour need in our application as below reference
screen-capture.webm

Version

3.6.1

What browsers are you seeing the problem on?

Chrome

What operating system are you seeing the problem on?

Windows

kumilingus wrote this answer on 2022-11-11

It is a nice feature.

Right now, the ui.Selection is not aware of the existence of theui.PaperScroller. I think we can allow the paper option to be set to a ui.PaperScroller instance (the same way we did with the ui.Stencil). Then we can enable the scrollWhileDragging feature for the ui,.Selection automatically.

new ui.Selection({
   paper: paperScroller
});

In the meantime, please use this workaround (using the ui.PaperScroller undocumented API).

paper.on('blank:pointerdown', (evt) => {
    selection.startSelecting(evt);
    const listener = new joint.mvc.Listener();
    listener.listenTo(paper, {
        'blank:pointermove': (evt, x, y) => {
            scroller.scrollWhileDragging(evt, x, y);
        },
        'blank:pointerup': (evt) => {
            scroller.stopScrollWhileDragging(evt);
            listener.stopListening();
        }
    });
});
gsnalinkode wrote this answer on 2022-11-11
kumilingus wrote this answer on 2022-11-11
paper.on('blank:pointerdown', (evt) =>  selection.startSelecting(evt));
paper.on('blank:pointermove', (evt, x, y) => scroller.scrollWhileDragging(evt, x, y));
paper.on('blank:pointerup', (evt) =>  scroller.stopScrollWhileDragging(evt));
gsnalinkode wrote this answer on 2022-12-03

@kumilingus

  • By using solution below able to do multi selection of nearest object while scrolling.
 paper.on('blank:pointerdown', (evt) =>  selection.startSelecting(evt));
 paper.on('blank:pointermove', (evt, x, y) => scroller.scrollWhileDragging(evt, x, y));
 paper.on('blank:pointerup', (evt) =>  scroller.stopScrollWhileDragging(evt));
  • But failing to select for long distance object with in the canvas while scrolling using above solution.
kumilingus wrote this answer on 2022-12-03

This might be related to a bug that has been fixed in v3.6 (see changelog).

ui.Selection - fix lasso coordinates while scrolling
Keep the lasso frame under the pointer regardless of how the user scrolls the paper container.

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date