diagram-js icon indicating copy to clipboard operation
diagram-js copied to clipboard

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

Open Skaiir opened this issue 2 years ago • 2 comments

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

  1. Create a new diagram, either via form-js or dmn-js
  2. Drag the diagram around with middle-click, then release middle-click
  3. The cursor is now stuck on the autoscroll icon
  4. Use the application normally and the auto-scroll cursor stays around until
  5. 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 avatar Oct 04 '22 14:10 Skaiir

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.

Skaiir avatar Oct 04 '22 14:10 Skaiir

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,

  1. v5.1.0 - reproducible in all editor types in 5.1
  2. v5.4.0 - reproducible in cloud-bpmn v8 editor only
  3. 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

griimick avatar Oct 07 '22 12:10 griimick