gitGraph is wrong/ugly if mainBranchOrder != 0

[drok]

Describe the bug
In a gitGraph, if I set the mainBranchOrder to 1, and other branch to 0, the shape of branch links is wrong/reversed/ugly. The shape of the links allows a quick and intuitive interpretation of a git graph, but when the shape is wrong, the story the graph is expected to tell is unintelligible/unconventional.

The shape of merge links appears correct/good; it looks like only branch links are affected.

The purpose of setting mainBranchOrder to 1 is to show upstream (topic/developer's) branches above the integration/downstream/main branch, and bugfix/non-developer branches underneath the main branch. The main branch should be in the middle of the page, or at least not at the top.

To Reproduce
See the sample code linked below.

Expected behavior

When the mainBranchOrder is 1 and the other branch is 0, I expect the shape of the graph to be flipped along the X axis compared to the default branch ordering, as seen in the screenshots below.

Specifically, branches should leave the origin node at a 90 degree angle, and enter the new branch at a 0 degree angle, with the direction of the elbow changing from vertical to horizontal.

Screenshots

Simple graph with mainBranchOrder = 0 (looks good, non-overlapping links)

Same git graph but with mainBranchOrder = 1 and bb as order = 0 (looks wrong, links overlap)

I expected the graph to be simply mirrored as below (crudely flipped in IrfanView, hence the labels are mirrored too):

Code Sample

Good Graph sample (mainBranchOrder=0)

Bad Graph Sample (mainBranchGraph=1)

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome Version 105.0.5195.127 (Official Build) (64-bit)

[mrjoops]

Actually the problem doesn't only occur when mainBranchOrder: 1 but whenever your create a branch with an order value lower than the current branch (so it may be interesting to change the title of this issue).

For a little bit of context, I was creating a graph to illustrate gitflow and changed the default ordering to make things clearer and, yes, the graph looks wrong. (See it live)
The link develop -> release/1.0.0 should go up-left instead of left-up, and the links release/1.0.0 -> develop and hotfix/1.0.1 -> develop should go left-down instead of down-left.

gitGraph
    commit
    branch develop order: 3
    checkout develop
    commit
    branch feature/JIRA-123 order: 4
    commit
    commit
    checkout develop
    merge feature/JIRA-123
    branch bugfix/JIRA-456 order: 5
    commit
    commit
    checkout develop
    merge bugfix/JIRA-456
    branch release/1.0.0 order: 2
    checkout release/1.0.0
    commit
    commit
    checkout main
    merge release/1.0.0 tag: "v1.0.0"
    checkout develop
    merge release/1.0.0
    checkout main
    branch hotfix/1.0.1 order: 1
    checkout hotfix/1.0.1
    commit
    commit
    checkout main
    merge hotfix/1.0.1 tag: "v1.0.1"
    checkout develop
    merge hotfix/1.0.1

[mrjoops]

With the example above, colors also seem off.
Actual result:

Expected result:

Note that if you don't use ordering, colors are ok (obviously):