dia.Paper: `blank:contextmenu` event is fired differently on MacOS and Windows

This issue has been tracked since 2021-12-22.

I noticed that right click dragging paper has different performance in different OS.
such as mac and windows.
https://resources.jointjs.com/demos/bpmn
How can i keep it in the same performance, Thanks in advance.

kumilingus wrote this answer on 2021-12-22

What does it do on Windows?

ddszsad wrote this answer on 2021-12-22

on mac :
mousedown mousemove mouseup. drag over
on windows :
mosuedown mouseup mousemove leftClick. drag over

kumilingus wrote this answer on 2021-12-22

I am sorry, I don't understand. What is exactly leftClick and drag over? How do you observe that the order of events is different (mousedown mouseup mousemove)?

ddszsad wrote this answer on 2021-12-22

it's my fault, my poor english.
But you can open the url in windows and mac. Then draging the demo.
i mean contextMenu has different performance in windows and mac.

kumilingus wrote this answer on 2021-12-22

Right, we've tried both and can't see anything wrong (in Chrome on Win and macOS). Could share a video perhaps?

ddszsad wrote this answer on 2021-12-22

Sorry, i don't konw how to express what i mean

meng-jpg wrote this answer on 2021-12-22

on mac : mousedown mousemove mouseup. drag over on windows : mosuedown mouseup mousemove leftClick. drag over
Is that means when you want to drag a paper on MAC, you need to hold down the mouse, but on Windows, you need click to start dragging, and click again to finish the drag?

inlann wrote this answer on 2021-12-22

I tested the bpmn demo in Chrome on MacOS and Windows and the behavior of drag & drop is different.
On MacOS, I hold down the right mouse button to drag the canvas, and I release the right mouse button to drop it.
On Windows, I could drag the canvas with a single right mouse click, but needed to click the left mouse button again to drop it.

kumilingus wrote this answer on 2021-12-22

Ok, thanks, everyone. We'll look into it.

kumilingus wrote this answer on 2021-12-22

Windows - contextmenu fired on mouseup
Mac - contextmenu fired on mousedown

We have to deal with this on our side and trigger an event ourselves similarly to - mapbox/mapbox-gl-js#3803

kumilingus wrote this answer on 2021-12-22

A workaround for the time being:

joint.dia.Paper.prototype.pointerdown = function(evt) {
    evt = joint.util.normalizeEvent(evt);
    var view = this.findView(evt.target);
    var isContextmenu = false;
    if (this.guard(evt, view)) {
        if (evt.type !== 'mousedown' || evt.button !== 2) return;
        isContextmenu = true;
    }
    var localPoint = this.snapToGrid(evt.clientX, evt.clientY);
    if (view) {
        evt.preventDefault();
        view.pointerdown(evt, localPoint.x, localPoint.y);
    } else {
        if (this.options.preventDefaultBlankAction) evt.preventDefault();
        this.trigger('blank:pointerdown', evt, localPoint.x, localPoint.y);
    }

    if (isContextmenu) {
        setTimeout(() => {  this.delegateDragEvents(view, evt.data); }, 0);
    } else {
        this.delegateDragEvents(view, evt.data);
    }
};

paper.delegateEvents();

paper.on({

    'blank:pointerdown': function(evt, x, y) {
        if (evt.button === 2) {
            evt.preventDefault();
            paperScroller.startPanning(evt, x, y);
        } else {
            closeTools();
            selection.startSelecting(evt, x, y);
        }
    }
});
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-06
Star Count 3717
Watcher Count 155
Fork Count 817
Issue Count 53

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date