Merge pull request #3113 from mermaid-js/#3080-Commit-label-tilt

#3080 Adding rotated commit label functionality

cypress/integration/rendering/gitGraph.spec.js

@@ -131,4 +131,33 @@ describe('Git Graph diagram', () => {
       {}
     );
   });
+
+  it('9: should render a simple gitgraph with rotated labels', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': true
+  } } }%%
+        gitGraph
+        commit id: "75f7219e83b321cd3fdde7dcf83bc7c1000a6828"
+        commit id: "0db4784daf82736dec4569e0dc92980d328c1f2e"
+        commit id: "7067e9973f9eaa6cd4a4b723c506d1eab598e83e"
+        commit id: "66972321ad6c199013b5b31f03b3a86fa3f9817d"
+      `,
+      {}
+    );
+  });
+  it('10: should render a simple gitgraph with horizontal labels', () => {
+    imgSnapshotTest(
+      `%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'gitGraph': {
+        'rotateCommitLabel': false
+  } } }%%
+        gitGraph
+        commit id: "Alpha"
+        commit id: "Beta"
+        commit id: "Gamma"
+        commit id: "Delta"
+      `,
+      {}
+    );
+  });
 });

docs/gitgraph.md

@@ -240,6 +240,55 @@ Usage example:
         merge release
  ```
 
+## Commit labels Layout: Rotated or Horizontal
+Mermaid supports two types of commit labels layout. The default layout is **rotated**, which means the labels are placed below the commit circle, rotated at 45 degress for better readability. This is particularly useful for commits with long labels.
+
+The other option is **horizontal**, which means the labels are placed below the commit circle centred horizontally, and are not rotated. This is particularly useful for commits with short labels.
+
+You can change the layout of the commit labels by using the `rotateCommitLabel` keyword in the directive. It defaults to `true`, which means the commit labels are rotated.
+
+Usage example: Rotated commit labels
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': true}} }%%
+gitGraph
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+  ```
+
+Usage example: Horizontal commit labels
+
+```mermaid-example
+%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'rotateCommitLabel': false}} }%%
+gitGraph
+  commit id: "feat(api): ..."
+  commit id: "a"
+  commit id: "b"
+  commit id: "fix(client): .extra long label.."
+  branch c2
+  commit id: "feat(modules): ..."
+  commit id: "test(client): ..."
+  checkout main
+  commit id: "fix(api): ..."
+  commit id: "ci: ..."
+  branch b1
+  commit
+  branch b2
+  commit
+  ```
+
 ## Hiding commit labels
 Sometimes you may want to hide the commit labels from the diagram. You can do this by using the `showCommitLabel` keyword. By default its value is `true`. You can set it to `false` using directives.
 

src/defaultConfig.js

@@ -1058,6 +1058,7 @@ const config = {
     mainBranchOrder: 0,
     showCommitLabel: true,
     showBranches: true,
+    rotateCommitLabel: true,
   },
 
   /** The object containing configurations specific for c4 diagrams */

src/diagrams/git/gitGraphRenderer.js

@@ -176,9 +176,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
       const py = 2;
       // Draw the commit label
       if (commit.type !== commitType.MERGE && gitGraphConfig.showCommitLabel) {
-        const labelBkg = gLabels.insert('rect').attr('class', 'commit-label-bkg');
+        const wrapper = gLabels.append('g');
+        const labelBkg = wrapper.insert('rect').attr('class', 'commit-label-bkg');
 
-        const text = gLabels
+        const text = wrapper
           .append('text')
           .attr('x', pos)
           .attr('y', y + 25)
@@ -193,6 +194,15 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('width', bbox.width + 2 * py)
           .attr('height', bbox.height + 2 * py);
         text.attr('x', pos + 10 - bbox.width / 2);
+        if (gitGraphConfig.rotateCommitLabel) {
+          let r_x = -7.5 - ((bbox.width + 10) / 25) * 9.5;
+          let r_y = 10 + (bbox.width / 25) * 8.5;
+          //wrapper.attr('transform', 'translate(' + -bbox.width / 2 + ', ' + bbox.width / 2 + ') ');
+          wrapper.attr(
+            'transform',
+            'translate(' + r_x + ', ' + r_y + ') rotate(' + -45 + ', ' + pos + ', ' + y + ')'
+          );
+        }
       }
       if (commit.tag) {
         const rect = gLabels.insert('polygon');
@@ -436,14 +446,18 @@ const drawBranches = (svg, branches) => {
       .attr('class', 'branchLabelBkg label' + adjustIndexForTheme)
       .attr('rx', 4)
       .attr('ry', 4)
-      .attr('x', -bbox.width - 4)
+      .attr('x', -bbox.width - 4 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0))
       .attr('y', -bbox.height / 2 + 8)
       .attr('width', bbox.width + 18)
       .attr('height', bbox.height + 4);
 
     label.attr(
       'transform',
-      'translate(' + (-bbox.width - 14) + ', ' + (pos - bbox.height / 2 - 1) + ')'
+      'translate(' +
+        (-bbox.width - 14 - (gitGraphConfig.rotateCommitLabel === true ? 30 : 0)) +
+        ', ' +
+        (pos - bbox.height / 2 - 1) +
+        ')'
     );
     bkg.attr('transform', 'translate(' + -19 + ', ' + (pos - bbox.height / 2) + ')');
   });
@@ -479,7 +493,7 @@ export const draw = function (txt, id, ver) {
   let pos = 0;
   branches.forEach((branch, index) => {
     branchPos[branch.name] = { pos, index };
-    pos += 50;
+    pos += 50 + (gitGraphConfig.rotateCommitLabel ? 40 : 0);
   });
 
   const diagram = select(`[id="${id}"]`);
@@ -500,7 +514,11 @@ export const draw = function (txt, id, ver) {
   const height = svgBounds.height + padding * 2;
 
   configureSvgSize(diagram, height, width, conf.useMaxWidth);
-  const vBox = `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`;
+  const vBox = `${
+    svgBounds.x -
+    padding -
+    (gitGraphConfig.showBranches && gitGraphConfig.rotateCommitLabel === true ? 30 : 0)
+  } ${svgBounds.y - padding} ${width} ${height}`;
   diagram.attr('viewBox', vBox);
 };