From 1851e81794ed001a6b6166f051fa9fde8607dcf7 Mon Sep 17 00:00:00 2001 From: ashishj Date: Tue, 7 Jun 2022 18:45:07 +0200 Subject: [PATCH 1/2] #3080 Adding rotated commit label functionality --- docs/gitgraph.md | 49 ++++++++++++++++++++++++++++ src/defaultConfig.js | 1 + src/diagrams/git/gitGraphRenderer.js | 30 +++++++++++++---- 3 files changed, 74 insertions(+), 6 deletions(-) diff --git a/docs/gitgraph.md b/docs/gitgraph.md index 0e223ba03d..9f43cc873b 100644 --- a/docs/gitgraph.md +++ b/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. diff --git a/src/defaultConfig.js b/src/defaultConfig.js index 89baf769fd..d5c69dfdbe 100644 --- a/src/defaultConfig.js +++ b/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 */ diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index b849932dc2..7a7c8f25f0 100644 --- a/src/diagrams/git/gitGraphRenderer.js +++ b/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); }; From 90d187c48a5633767c7e98638e9ce016232a0378 Mon Sep 17 00:00:00 2001 From: ashishj Date: Tue, 7 Jun 2022 18:52:38 +0200 Subject: [PATCH 2/2] #3080 Added rendering test cases --- .../integration/rendering/gitGraph.spec.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index b109c4e7ea..7242c05dd1 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/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" + `, + {} + ); + }); });