gitgraph branch labels overlap when setting rotateCommitLabel to false in TB orientation

[rennerom]

Description

When I set the rotateCommitLabel to false in a TB oriented gitGraph, branch names can start to overlap.

Steps to reproduce

1. create a gitGraph in TB orientation
2. set rotateCommitLabels to false
3. add a few commits to main
4. create a new branch with a semi-longer branch name
5. observe branch name overlap

Screenshots

Code Sample

%%{init: {'logLevel': 'debug', 'gitGraph': {'rotateCommitLabel':false }} }%%
    gitGraph TB:
        commit
        commit
        commit
        branch a-little-bit-longer
        commit

Setup

• Mermaid version: 10.5.0
• Browser and Version: Chrome Version 118.0.5993.72 (Official Build) (64-bit)

Suggested Solutions

No response

Additional Context

No response

[itsayopapi]

@rennerom Can you please assign this issue to me if it is still available

[rennerom]

Hey @itsayopapi, I don’t have permissions to assign issues, unless I’m misinterpreting your request. Otherwise let me know how else I can help.

[itsayopapi]

@rennerom I mean is it still possible for me to work on this issue?

[rennerom]

@itsayopapi yes, the issue occurs, I just can't physically assign an issue to another GitHub user.

Looking through the open issues I see that folks commonly requests issues so they can contribute to the project. But as I'm not a member of the mermaid-js org I think you'll have to wait until one of them picks it up and decides what to do with it.

Good luck!

[huynhicode]

Hi all!

We do not assign issues but leave them open for anyone to work on them.

Please raise a PR when ready and reference this issue.

Let us know if you have any questions! Thanks in advance for your contributions!

[Dev-Dipesh]

Faced the same issue today. I was playing with git-graph for a non-git-related use case. In the end what helped me was to use Left-Right and not disable the rotation.

%%{init: {
    'logLevel': 'debug',
    'theme': 'base',
    'gitGraph': {
        'showBranches': true,
        'showCommitLabel':true,
        'mainBranchName': 'Customer',
        'rotateCommitLabel': true
    }
}}%%
gitGraph LR:
   commit id: "App Launch"
   commit id: "Due Update?" type: HIGHLIGHT
   branch "Update"
   commit id: "Forded Update?"
   commit id: "Optional Update Deferred?"
   commit id: "Upgrade Done?"
   merge Customer
   checkout Customer
   commit id: "UPI Only?" type: HIGHLIGHT
   branch "UPI"
   commit id: "Yes UPI Only"
   commit id: "Same Device & Sim?"
   commit id: "Yes same"
   branch "MPIN or Biometric Auth"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 1"
   checkout "UPI"
   commit id: "Not Same"
   branch "Re-enable API"
   commit id: "TBD"
   checkout "UPI"
   commit id: "Not UPI only"
   merge "MPIN or Biometric Auth"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 2"
   merge Customer
   checkout "Customer"
   commit id: "Account Status?" type: HIGHLIGHT
   branch "Mobile Lock"
   commit id: "Locked"
   branch "Error"
   commit id: "Journey Failed"
   checkout "Mobile Lock"
   commit id: "Not Locked"
   merge "Customer"
   checkout "Customer"
   commit id: "Check Device id" type: HIGHLIGHT
   branch "Device ID Check"
   commit id: "Device ID and Mobile Number matched"
   checkout Customer
   merge "Device ID Check"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 3"
   checkout Customer
   merge "MPIN or Biometric Auth" tag: "User Authenticated"
   checkout "Device ID Check"
   commit id: "Not matched"
   branch "Device Re-registration"
   commit id: "Initialise Device Registration"

%%{init: {
    'logLevel': 'debug',
    'theme': 'base',
    'gitGraph': {
        'showBranches': true,
        'showCommitLabel':true,
        'mainBranchName': 'Customer',
        'rotateCommitLabel': true
    }
}}%%
gitGraph LR:
   commit id: "App Launch"
   commit id: "Due Update?" type: HIGHLIGHT
   branch "Update"
   commit id: "Forded Update?"
   commit id: "Optional Update Deferred?"
   commit id: "Upgrade Done?"
   merge Customer
   checkout Customer
   commit id: "UPI Only?" type: HIGHLIGHT
   branch "UPI"
   commit id: "Yes UPI Only"
   commit id: "Same Device & Sim?"
   commit id: "Yes same"
   branch "MPIN or Biometric Auth"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 1"
   checkout "UPI"
   commit id: "Not Same"
   branch "Re-enable API"
   commit id: "TBD"
   checkout "UPI"
   commit id: "Not UPI only"
   merge "MPIN or Biometric Auth"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 2"
   merge Customer
   checkout "Customer"
   commit id: "Account Status?" type: HIGHLIGHT
   branch "Mobile Lock"
   commit id: "Locked"
   branch "Error"
   commit id: "Journey Failed"
   checkout "Mobile Lock"
   commit id: "Not Locked"
   merge "Customer"
   checkout "Customer"
   commit id: "Check Device id" type: HIGHLIGHT
   branch "Device ID Check"
   commit id: "Device ID and Mobile Number matched"
   checkout Customer
   merge "Device ID Check"
   checkout "MPIN or Biometric Auth"
   commit id: "Authenticate 3"
   checkout Customer
   merge "MPIN or Biometric Auth" tag: "User Authenticated"
   checkout "Device ID Check"
   commit id: "Not matched"
   branch "Device Re-registration"
   commit id: "Initialise Device Registration"

Loading