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

[ITfanheng]

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]

What does it do on Windows?

[ddszsad]

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

[kumilingus]

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]

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]

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

[ddszsad]

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

[meng-jpg]

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]

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]

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

[kumilingus]

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]

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);
        }
    }
});

[github-actions]

This issue is stale because it has been open 60 days with no activity. Please remove stale label or comment or this will be closed in 14 days.