Dragging around diagrams via the middle mouse button causes the cursor to get stuck on autoscrolling

bpmn-io / diagram-js

A toolbox for displaying and modifying diagrams on the web.

MIT License

1.7k stars 419 forks source link

Dragging around diagrams via the middle mouse button causes the cursor to get stuck on autoscrolling #677

Open Skaiir opened 2 years ago

Skaiir commented 2 years ago

Describe the Bug

Dragging the diagram view around with middle mouse click leads the cursor to be stuck as an autoscrolling cursor, visual example:

Camunda_Modeler_im50S76Zgs

Steps to Reproduce

Create a new diagram, either via form-js or dmn-js
Drag the diagram around with middle-click, then release middle-click
The cursor is now stuck on the autoscroll icon
Use the application normally and the auto-scroll cursor stays around until
Middle-click twice to reset back to a normal cursor

Expected Behavior

The auto-scroll cursor should never really show up, as it's not a form of navigation we use in diagram-js (@nikku correct if I am wrong). Instead we'd expect the hand cursor only, and to revert back to a normal cursor when middle-mouse is released.

Environment

Browser: Chromium (Electron) OS: Windows 10 64bit Could repeat in Camunda Modeler 5.1 & 5.4rc1

Skaiir commented 2 years ago

Something to note about this issue:

It can only be reproduced on Windows, or at the very least my Windows, interested to get @philippfromme to have a look as well to see if he can replicate.
The way I've discovered this is a bit strange, I noticed it for the first time today but was able to replicate back to Camunda Modeler 5.1. Also, I just naturally click the middle mouse button. This makes me think that the issue popped up not from a change in our code, but from an update to windows. Not 100% on this but worth keeping in mind if we can replicate it.

griimick commented 2 years ago

I have been exploring related areas for some time. I saw the same issue as I normally use middle-mouse drag for movement in canvas.

Reproducible in Windows 11 22H1 64bit as well on both Camunda Modeler v5.1 and v5.4 with the steps mentioned above. I think the auto-scroll mode gets triggered by the default event handler if there is an underlying overflowing scrollable element on the middle mouse click.

Sharing my observations,

v5.1.0 - reproducible in all editor types in 5.1
v5.4.0 - reproducible in cloud-bpmn v8 editor only
macOS does not really have the middle mouse auto-scroll functionality, so couldn't get the auto-scroll pointer to show up.

Tried the following,

Setting overflow: hidden to https://github.com/camunda/camunda-modeler/blob/develop/client/src/app/tabs/cloud-bpmn/BpmnEditor.less#L4 fixes it for v5.4.0, but it didn't help for v5.1.

Browser: Chromium (Electron) OS: Windows 10 64bit Camunda Modeler 5.1 & 5.4.0