Add alignment and distribution buttons to the context pad

[barmac]

Closes #1680
Closes #1691

---

Requires bpmn-io/diagram-js#656

[nikku]

What UI do we aim for? Most tooks do not show all helpers right away, but instead open an "align/distribution popup", cf.:

I'd suggest us to do the same.

[barmac]

Indeed, I also have a feeling that we should use the popup menu. This will be especially visible when we add the distribution.

[barmac]

So this is how it would look like directly in the context pad:

I think it makes sense to use a popup menu instead, as it's too cluttered right now.

[barmac]

I switched to popup menu-based implementation:

I am not satisfied with how it looks like. I'd rather aim for something closer to Miro's solution:

Note this does not include distribution buttons.

[barmac]

With distribution buttons:

This is a sketch and not the current implementation state.

[smbea]

I like the placement. But I think the icons feel a bit crowded, partially because being all outlines makes it harder to instantly figure out what the icon is.

In the example Nico gave, the icons appear cleaner. Also another example:

This is just my perception. I know we are not designers and have little design resources at the moment 😅 I can try with the icons and help if needed.

[barmac]

With more space

6px 8px:

8px 10px:

[barmac]

At the moment, I am mostly re-using the icons from Camunda Modeler (the one in the context pad is mine). I am open to re-designing the icons as a next step after we agree on the layout.

[barmac]

Cross-posting a screenshot of how it's done in Miro:

[smbea]

@barmac makes sense. Looks nice for the first iteration, specially with more space. Nice work

[barmac]

Just added a second sketch with even more space to #1682 (comment)

[philippfromme]

We designed these icons a long time ago. I think they're ready for an overhaul.

[nikku]

What we definitely want to do (mid-term) is to refresh our popup menu styles. You could follow up with it.

Reference for new pop-up menu styles should be the create/append anything popup:

[barmac]

What we definitely want to do (mid-term) is to refresh our popup menu styles. You could follow up with it.

It seems we do not only need to refresh styles, but also add features to the Popup Menu code. I identified grouping so far but there may be more. Or we can reimplement the menu for align&distribution, as we did in the connectors extension 😉 .

At the moment, Popup Menu can be shortly described as "give me list of header entries to display next to each other, and a list of regular entries to display one below another". This is in fact too little to implement #1682 (comment), so I will need to spend some more time on it.

[christian-konrad]

@barmac The latest design works for now in my opinion.
As there may be a growing set of actions for this menu(s), we can do an overhaul on all context menus or even the context pad itself in the future. Updating the icons could then also make sense (not only the alignment ones, but maybe all?) but for now, thanks for focusing on the functionality.
We should not keep 2 different context menu designs for an infinite time though.

[nikku]

We should not keep 2 different context menu designs for an infinite time though.

As we incorporate create/append anything into the core we'll get things aligned (again).

[barmac]

I have two ideas how we can improve the popup menu so that it can be used for this PR and possible future improvements:

1. Minimal solution: Add grouping so that the buttons can be divided into align and distribute groups which can be seen on the UI sketch. In addition to that, set the popup menu name in the data attributes so that it can be used to style popup menu horizontally.

2. Powerful solution: Introduce a popup-menu.render event so that an extension can opt-in to render the popup menu on its own. As a fallback, the default rendering method is used. Thus, the extension developer has more flexibility if needed but can also use old APIs.

eventBus.on('popup-menu.render', (menuId, node) => /* do stuff with node and return `true` if handled */)

For the current task of align/distribute menu, the minimal solution seems to be good enough. This is what I will implement but we can keep 2 in mind for the future.

[nikku]

Minimal solution: Add grouping so that the buttons can be divided into align and distribute groups which can be seen on the UI sketch. In addition to that, set the popup menu name in the data attributes so that it can be used to style popup menu horizontally.

+1 for doing that. If data-attributes are attached to the groups styling can be done naturally to achieve what you showcased.

[barmac]

New challenge: Distribution and align actions can sometimes be cancelled internally when the action does not make sense (e.g. distribution of a task with boundary event). Notice how the popup menu does not close on the capture below for alignment. It closes for distribution actions, but only because I force it:

Screen.Recording.2022-06-27.at.15.37.09.mov

The non-action buttons are similar to what Miro has, where the buttons are also displayed as disabled:

So I can see the following solutions:

1. Force close with no action (cf. distribution buttons on the capture)
2. Disable (close to alignment buttons on the capture)
3. Perform an initial check and don't display the buttons at all if action would be cancelled internally.

I'd rather not display disabled controls as a user cannot make any use of them. I am sure we should close the popup menu once a button is clicked. I think that in the end a solution based on rules (3) is the most intuitive. I doubt a user could be surprised there is no option to distribute elements if too few are selected. Still, in the initial iteration, we could have (1), and implement rules as a next step.

[barmac]

I implemented option (1). Test this with:

npx @bpmn-io/sr bpmn-io/bpmn-js#1680-add-alignment-and-distribution-buttons-to-context-pad -l bpmn-io/diagram-js#group-popup-menu-items

[barmac]

This is now ready for review.

[barmac]

Just added some changes so that it looks OK on IE11. It won't be 1:1 as in the modern browsers but we seem to not care anymore since we use css variables 🤡

[marstamm]

I played around with it a bit and noticed something strange. On the simple process, if I align everything center, then top, the flows get reconnected:

Obviously this is not what this tool was intended for, but would be interesting to know what causes a reconnect in the first place. Is dropOnFlow triggered during alignment?

[philippfromme]

Is dropOnFlow triggered during alignment?

That is what's happening, yes. elements.move will trigger this behavior automatically if the new parent has a child connection that intersects: https://github.com/bpmn-io/bpmn-js/blob/develop/lib/features/modeling/behavior/DropOnFlowBehavior.js#L139

[barmac]

I guess we could prevent this, but isn't it an edge case?

[marstamm]

I would say it is an edge case that we don't have to fix right now

[barmac]

I would say it is an edge case that we don't have to fix right now

I've created an issue for this: #1693

[philippfromme]

Not sure why the distribution icons don't show up when selecting 3 participants. Is that expected? Couldn't find anything in the code.

[barmac]

I will check this. Thanks for pointing this out.

[philippfromme]

Otherwise, this is looking really good and very solid. Looking forward to getting that thing out of the door. 💪🏻

[barmac]

OK it doesn't make sense. For some unknown to me reason, the legacy code disallowed distribution of participants.

[barmac]

I will add a test case for this.

[barmac]

OK done @philippfromme

[barmac]

This broke other tests 🙈

[barmac]

OK Fixed.

[philippfromme]

Great job! 🚀