Placement of merging gateways and sequence flows going right to left

till-stadtler commented 2 months ago

Describe the Bug

The following example has multiple issues:

position of second splitting gateway which affects the position of the following task and the connecting sequence flow
the "looping" sequence flow first goes up then left, causing sequence flows to overlap and cross each other

Additionally, the placement of merging gateways (or other implicitly merging elements) often causes sequence flows going right to left:

Steps to Reproduce

Layout the examples above.

Expected Behavior

The position of the second splitting gateway could be improved, see issue #49.

Improving the "looping" sequence flow is related to the placement of merging gateways and elements which implicitly merge multiple sequence flows. With the current implementation, it is difficult to know if sequence flows going right to left are proper "loops" or simply caused by badly placed merging gateways/elements.

Thus, my proposal is a combination of:

fix the placement of merging gateways/elements (idea: skip placing merging gateways or elements until all "related" elements have been placed, or until no other element can be placed because they all come after the merging gateway/element (a proper loop), and then place the gateway/element to a position to the right off all related elements,)
afterwards, we can assume that all sequence flows going right to left are part of proper loops. These sequence flows should leave the element to the right and then go downwards

Environment

Host: React App (node 20.13.1) in Chrome browser
OS: Windows 11
Library version: 0.5.0

till-stadtler commented 2 months ago

I solved this issue on my local machine. I will explain more details later. We can also have a meeting to discuss this.

till-stadtler commented 2 months ago

Nearly all issues described here would be solved with the solutions discussed in #48 and #49.

We can now make improvements on the waypoints used for sequence flows going right to left + bottom to top. With the proper placement of merging gateways, such sequence flows indicate a proper "loop". Thus, these sequence flows can now go down and left, rather than up and left. Like this, they will not overlap or cross other sequence flows as often. They might still cause trouble in certain edge cases. Here, the sorting of the outgoing elements behind a splitting element will help (making sure that gateways involved in loops are placed last and in an empty row.

nikku commented 1 month ago

Not addressed on current main, likely related to https://github.com/bpmn-io/bpmn-auto-layout/pull/68#issuecomment-2374445605.

I expect back and forward loops outside of the happy path to always go below other content.

abdul99ahad commented 1 month ago

Not addressed on current main, likely related to #68 (comment).

I expect back and forward loops outside of the happy path to always go below other content.

Noted, will create separate issue for this.

nikku commented 1 month ago

Also interested in getting @till-stadtler's feedback here, our options are:

Alternative flow below happy path

Alternative flow above happy path

Strategy would also apply to backlinks.

till-stadtler commented 1 month ago

Some quick thoughts:

dX < 0, dY = 0: above
else below In my PR, I made some changes to the layout util that are related to this question.

To differentiate between activities, events and gateways is also important, see PR. We don't want to "circle around" the gateway, if we can simply access it from the top or bottom.

nikku commented 1 month ago

@till-stadtler you suggest to "loop back" on top, and "loop forward" below?

Why? I'd consistently model happy path first, and everything else below. We'll otherwise run into https://github.com/bpmn-io/bpmn-auto-layout/issues/50#issuecomment-2374504074 and friends.

What I understand, and what we'd need to account for "sites used", and ensure flows don't cross (or otherwise intersect) when they don't share the same origin or target:

barmac commented 1 month ago

Note that any outgoing connections in the upper direction shift the happy path down. So you cannot look at the very top of the diagram and see the desired process path, but rather needs to look slightly down. I'd rather have the loops always move to the bottom.

nikku commented 1 month ago

This issue is, to our knowledge, sufficiently addressed with the recent release.

Please open follow-ups with steps to reproduce.

bpmn-io / bpmn-auto-layout