Add move cursor

[nikku]

This builds on top of #640 and adds a move cursor as known from other well known drawing tools.

The cursor visually indicates to me whether I'm hovering over an active drag region:

---

Can be tried out via

npx @bpmn-io/sr bpmn-io/bpmn-js#develop -l bpmn-io/diagram-js#move-cursor

[barmac]

To consider: Movement is not the only action available in such situation. I can also click to select the shape which is not the action indicated by the cursor. Also, over a task, the double-click allows to change the label name which is totally different from what the cursor shows.

I think it's interesting that the proposed solution is in line with what Excalidraw offers but different than Miro's experience (where it's as is in bpmn-js now).

[barmac]

I believe this solution makes sense if we stick to the decision to remove the hover outline.

[nikku]

I think it's interesting that the proposed solution is in line with what Excalidraw offers but different than Miro's experience (where it's as is in bpmn-js now).

Agreed. It is also similar to GSlides + a bunch of other drawing tools that I investigated; hence I proposed it.

[nikku]

@barmac Could you share a screencapture how it looks like for you (during hovering and dragging)? We have to make sure our overall cursor-interaction works and my OS is very minimal in this case (just a few cursors to choose).

[barmac]

Sure, I will do that shortly.

[barmac]

Screen.Recording.2022-05-20.at.11.43.21.mov

[barmac]

It looks the same in Safari, so the cursor is probably browser-independent.

[nikku]

It looks the same in Safari, so the cursor is probably browser-independent.

Yes, it is OS-dependent.

[nikku]

Looks worse on Mac than it does on Linux I gotta say.

[nikku]

Alternative is to use cursor: grab rather than cursor: move. It may be less "in your face", but also different from how Gslides and Excalidraw (as examples) do it.

[christian-konrad]

It clashes a little with the sequence flow elbows when you come near the connection drag handle:

Bildschirmaufnahme.2022-05-20.um.12.00.08.mov

It is then not clear if you create a new elbow or pick the connection drag handle.

I would also suggest not use cursor: grab; this post here comes up with a great explanation: https://ux.stackexchange.com/a/75840

@barmac s point is valid, but until today no one came up with a solution for a cursor that indicates the double click function (secondary action)... and we can not simply show a cursor: text as it is not the primary action.

[nikku]

Let's allow @andreasgeier to chime in and then we can pragmatically decide whether we want this (or not).