diagram-js
diagram-js copied to clipboard
Dragging around diagrams via the middle mouse button causes the cursor to get stuck on autoscrolling
Describe the Bug
Dragging the diagram view around with middle mouse click leads the cursor to be stuck as an autoscrolling cursor, visual example:
Steps to Reproduce
- Create a new diagram, either via
form-js
ordmn-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
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.
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