WIP feat(selection-visuals): add marker to related elements

[pinussilvestrus]

• adds the selection outline to related elements when
  • highlight label(s) when selecting/hovering sequence flow
  • highlight sequence flow when selecting/hovering label
• adjust SelectionVisualsSpec, because old version did not test expected behavior, since the .djs-outline class is set all the time, regardless the shape is selected before or not

Related to camunda/camunda-modeler#369

[nikku]

From the user perspective, which alternatives did you consider for implementing this feature?

The following shows a quick recording of the look and feel in bpmn-js:

Two things immediately get apparent:

• It is not possible for a user to distinguish the actual selected element from the connected element. This is a major UX flaw and needs to be addressed.
• Highlighting the label that belongs to an element only works for connections. Why is that? Any element may reference external labels (cf. start event in the screencapture shown above).

From the implementation perspective I'd ask you not to patch the stuff into the SelectionVisuals but to provide this as a new feature (call it highlight-related or something). This way users may decide to use it (or not) and the code base remains maintainable.

I already addressed:

• fix commit message style (using feature name selection as context)
• correct import to relative path (6a5e6d0); importing from an absolute lib path within the lib directory works in tests only but fails in the final bundle

[pinussilvestrus]

@nikku Thanks for the feedback! Let's discuss the points you've mentioned

It is not possible for a user to distinguish the actually selected element from the connecting element. This is a major UX flaw and needs to be addressed

I've just made the opacity of the related element's outline a little less to make clear, which element is actually selected or hovered. What do you think? Sure, we can discuss coloring the related element boxes with another color or giving them another shape, but this would break the current experience a little bit.

Highlighting the label that belongs to an element only works for connections. Why is that? Any element may reference external labels (cf. start event in the screen capture shown above).

Done!

I'd ask you not to patch the stuff into the SelectionVisuals but to provide this as a new feature (call it highlight-related or something).

I've just created a new feature inside the SelectionModule right now, since creating a completely new module highlight-related we would have to adjust the module-loading in the BpmnViewer for activating. For such a small feature I would not do that since it belongs to selection in some way.

Outdated.

[nikku]

Solution sketch we'd like to try:

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Niklas Kiefer seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}