Discuss cursor states / user select in the editor

[Skaiir]

What should we do?

Let's have a chat and an implementation down the line regarding how we should handle the cursor state across the application.

Parts of this discussion started here (internal link) but there's more to this conversation.

• What do we want the cursor state to look like inside the editor? You can't practically select any text there as drag and drop will cause the element to disappear as you try and select some text
• Descriptions and labels can both be highlighted, but they use different mouse cursors
• There's also the matter brought up in the internal link of using variables to allow for overriding the cursor, but even then this isn't applied consistently

Let's come up with some guidelines for this so we can clean up.

Why should we do it?

Cursors as minor as they might be are part of the visual language of our tooling, and hence establishing some rules around those will improve the readability of our tool.

[Skaiir]

@RomanKostka @christian-konrad @pinussilvestrus For reference, there's now an issue for this (with a few added topics)

[pinussilvestrus]

/cc @bpmn-io/modeling-dev @bpmn-io/modeling-design to get them involved as well

[nikku]

I've shared the following on the original slack converstation:

Core modeling tooling tries to be a little bit less cursory / flashy for interactive elements to be agnostic where they are embedded.

What we currently have implemented as a baseline:

• Elements have a clearly visible hover/focus state
• Links always have a clear "link (jump to)" cursor (browser default)
• Buttons generally don't (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)

• However in places where hover is not properly indicated (element can be grabbed but does not have a flashy hover state) this must be indicated through a cursor change.

  As you discuss cursors be aware that different operating systems may provide a different set of stock cursors (which are also used in the browsers). We can of course define our own custom cursor images. However to date bpmn.io deliberately decided to "be minimal" and play nicely with different environments it embeds into.

Based on that my input to this issue is the following:

Descriptions and labels can both be highlighted, but they use different mouse cursors

Do not use link styling for "in app buttons" / selecting elements. Use basic (default) pointer.

Where both text selection or dragging are possible options use the cursor to indicate the actual action available:

[Skaiir]

Okay so as a first action, I will disable the text-highlighting cursor in the editor, tracked here: https://github.com/bpmn-io/form-js/issues/519. In any case at the moment this text is not highlight-able due to it triggering drag and drop, and I think if it were it would make dragging of the text component a bit annoying.

If someone for some reason really needs access to the text, they will always be able to reach it via the properties panel.