From 81ff4416dc829a18bc30bee8f90308bdfd1bd700 Mon Sep 17 00:00:00 2001 From: Muhammad Faisal Bin Arba'in Date: Sat, 18 Jun 2022 17:59:24 +0800 Subject: [PATCH 1/4] rotate class id when branch more than 8 --- src/diagrams/git/gitGraphRenderer.js | 29 +++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index 1d94f7c5e7..5dc05c902d 100644 --- a/src/diagrams/git/gitGraphRenderer.js +++ b/src/diagrams/git/gitGraphRenderer.js @@ -15,6 +15,8 @@ const commitType = { CHERRY_PICK: 4, }; +const THEME_SIZE = 8; + let branchPos = {}; let commitPos = {}; let lanes = []; @@ -120,7 +122,7 @@ const drawCommits = (svg, commits, modifyGraph) => { 'commit ' + commit.id + ' commit-highlight' + - branchPos[commit.branch].index + + (branchPos[commit.branch].index % THEME_SIZE) + ' ' + typeClass + '-outer' @@ -136,7 +138,7 @@ const drawCommits = (svg, commits, modifyGraph) => { 'commit ' + commit.id + ' commit' + - branchPos[commit.branch].index + + (branchPos[commit.branch].index % THEME_SIZE) + ' ' + typeClass + '-inner' @@ -183,7 +185,10 @@ const drawCommits = (svg, commits, modifyGraph) => { circle.attr('cx', x); circle.attr('cy', y); circle.attr('r', commit.type === commitType.MERGE ? 9 : 10); - circle.attr('class', 'commit ' + commit.id + ' commit' + branchPos[commit.branch].index); + circle.attr( + 'class', + 'commit ' + commit.id + ' commit' + (branchPos[commit.branch].index % THEME_SIZE) + ); if (commit.type === commitType.MERGE) { const circle2 = gBullets.append('circle'); circle2.attr('cx', x); @@ -191,7 +196,12 @@ const drawCommits = (svg, commits, modifyGraph) => { circle2.attr('r', 6); circle2.attr( 'class', - 'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index + 'commit ' + + typeClass + + ' ' + + commit.id + + ' commit' + + (branchPos[commit.branch].index % THEME_SIZE) ); } if (commit.type === commitType.REVERSE) { @@ -200,7 +210,12 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`) .attr( 'class', - 'commit ' + typeClass + ' ' + commit.id + ' commit' + branchPos[commit.branch].index + 'commit ' + + typeClass + + ' ' + + commit.id + + ' commit' + + (branchPos[commit.branch].index % THEME_SIZE) ); } } @@ -430,7 +445,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { const arrow = svg .append('path') .attr('d', lineDef) - .attr('class', 'arrow arrow' + colorClassNum); + .attr('class', 'arrow arrow' + (colorClassNum % THEME_SIZE)); }; const drawArrows = (svg, commits) => { @@ -460,7 +475,7 @@ const drawBranches = (svg, branches) => { const gitGraphConfig = getConfig().gitGraph; const g = svg.append('g'); branches.forEach((branch, index) => { - let adjustIndexForTheme = index >= 8 ? index - 8 : index; + let adjustIndexForTheme = index % THEME_SIZE; const pos = branchPos[branch.name].pos; const line = g.append('line'); From 91e369a840cf3bdfad906765f482da9144a4c303 Mon Sep 17 00:00:00 2001 From: Muhammad Faisal Bin Arba'in Date: Mon, 20 Jun 2022 00:02:47 +0800 Subject: [PATCH 2/4] rename const name --- src/diagrams/git/gitGraphRenderer.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index 5dc05c902d..bc6d1a8a36 100644 --- a/src/diagrams/git/gitGraphRenderer.js +++ b/src/diagrams/git/gitGraphRenderer.js @@ -15,7 +15,7 @@ const commitType = { CHERRY_PICK: 4, }; -const THEME_SIZE = 8; +const THEME_COLOR_LIMIT = 8; let branchPos = {}; let commitPos = {}; @@ -122,7 +122,7 @@ const drawCommits = (svg, commits, modifyGraph) => { 'commit ' + commit.id + ' commit-highlight' + - (branchPos[commit.branch].index % THEME_SIZE) + + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + ' ' + typeClass + '-outer' @@ -138,7 +138,7 @@ const drawCommits = (svg, commits, modifyGraph) => { 'commit ' + commit.id + ' commit' + - (branchPos[commit.branch].index % THEME_SIZE) + + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + ' ' + typeClass + '-inner' @@ -187,7 +187,7 @@ const drawCommits = (svg, commits, modifyGraph) => { circle.attr('r', commit.type === commitType.MERGE ? 9 : 10); circle.attr( 'class', - 'commit ' + commit.id + ' commit' + (branchPos[commit.branch].index % THEME_SIZE) + 'commit ' + commit.id + ' commit' + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) ); if (commit.type === commitType.MERGE) { const circle2 = gBullets.append('circle'); @@ -201,7 +201,7 @@ const drawCommits = (svg, commits, modifyGraph) => { ' ' + commit.id + ' commit' + - (branchPos[commit.branch].index % THEME_SIZE) + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) ); } if (commit.type === commitType.REVERSE) { @@ -215,7 +215,7 @@ const drawCommits = (svg, commits, modifyGraph) => { ' ' + commit.id + ' commit' + - (branchPos[commit.branch].index % THEME_SIZE) + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) ); } } @@ -445,7 +445,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { const arrow = svg .append('path') .attr('d', lineDef) - .attr('class', 'arrow arrow' + (colorClassNum % THEME_SIZE)); + .attr('class', 'arrow arrow' + (colorClassNum % THEME_COLOR_LIMIT)); }; const drawArrows = (svg, commits) => { @@ -475,7 +475,7 @@ const drawBranches = (svg, branches) => { const gitGraphConfig = getConfig().gitGraph; const g = svg.append('g'); branches.forEach((branch, index) => { - let adjustIndexForTheme = index % THEME_SIZE; + let adjustIndexForTheme = index % THEME_COLOR_LIMIT; const pos = branchPos[branch.name].pos; const line = g.append('line'); From 846531363eebace28d9dc7f51a3974eefd996d2e Mon Sep 17 00:00:00 2001 From: Muhammad Faisal Bin Arba'in Date: Fri, 24 Jun 2022 01:15:39 +0800 Subject: [PATCH 3/4] PR comments --- src/diagrams/git/gitGraphRenderer.js | 52 ++++++++++------------------ 1 file changed, 19 insertions(+), 33 deletions(-) diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js index bc6d1a8a36..0a7c457cf7 100644 --- a/src/diagrams/git/gitGraphRenderer.js +++ b/src/diagrams/git/gitGraphRenderer.js @@ -119,13 +119,9 @@ const drawCommits = (svg, commits, modifyGraph) => { circle.attr('width', 20); circle.attr( 'class', - 'commit ' + - commit.id + - ' commit-highlight' + - (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + - ' ' + - typeClass + - '-outer' + `commit ${commit.id} commit-highlight${ + branchPos[commit.branch].index % THEME_COLOR_LIMIT + } ${typeClass}-outer` ); gBullets .append('rect') @@ -135,13 +131,9 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('width', 12) .attr( 'class', - 'commit ' + - commit.id + - ' commit' + - (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + - ' ' + - typeClass + - '-inner' + `commit ${commit.id} commit${ + branchPos[commit.branch].index % THEME_COLOR_LIMIT + } ${typeClass}-inner` ); } else if (commit.type === commitType.CHERRY_PICK) { gBullets @@ -149,21 +141,21 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('cx', x) .attr('cy', y) .attr('r', 10) - .attr('class', 'commit ' + commit.id + ' ' + typeClass); + .attr('class', `commit ${commit.id} ${typeClass}`); gBullets .append('circle') .attr('cx', x - 3) .attr('cy', y + 2) .attr('r', 2.75) .attr('fill', '#fff') - .attr('class', 'commit ' + commit.id + ' ' + typeClass); + .attr('class', `commit ${commit.id} ${typeClass}`); gBullets .append('circle') .attr('cx', x + 3) .attr('cy', y + 2) .attr('r', 2.75) .attr('fill', '#fff') - .attr('class', 'commit ' + commit.id + ' ' + typeClass); + .attr('class', `commit ${commit.id} ${typeClass}`); gBullets .append('line') .attr('x1', x + 3) @@ -171,7 +163,7 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('x2', x) .attr('y2', y - 5) .attr('stroke', '#fff') - .attr('class', 'commit ' + commit.id + ' ' + typeClass); + .attr('class', `commit ${commit.id} ${typeClass}`); gBullets .append('line') .attr('x1', x - 3) @@ -179,7 +171,7 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('x2', x) .attr('y2', y - 5) .attr('stroke', '#fff') - .attr('class', 'commit ' + commit.id + ' ' + typeClass); + .attr('class', `commit ${commit.id} ${typeClass}`); } else { const circle = gBullets.append('circle'); circle.attr('cx', x); @@ -187,7 +179,7 @@ const drawCommits = (svg, commits, modifyGraph) => { circle.attr('r', commit.type === commitType.MERGE ? 9 : 10); circle.attr( 'class', - 'commit ' + commit.id + ' commit' + (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + `commit ${commit.id} commit${branchPos[commit.branch].index % THEME_COLOR_LIMIT}` ); if (commit.type === commitType.MERGE) { const circle2 = gBullets.append('circle'); @@ -196,12 +188,9 @@ const drawCommits = (svg, commits, modifyGraph) => { circle2.attr('r', 6); circle2.attr( 'class', - 'commit ' + - typeClass + - ' ' + - commit.id + - ' commit' + - (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + `commit ${typeClass} ${commit.id} commit${ + branchPos[commit.branch].index % THEME_COLOR_LIMIT + }` ); } if (commit.type === commitType.REVERSE) { @@ -210,12 +199,9 @@ const drawCommits = (svg, commits, modifyGraph) => { .attr('d', `M ${x - 5},${y - 5}L${x + 5},${y + 5}M${x - 5},${y + 5}L${x + 5},${y - 5}`) .attr( 'class', - 'commit ' + - typeClass + - ' ' + - commit.id + - ' commit' + - (branchPos[commit.branch].index % THEME_COLOR_LIMIT) + `commit ${typeClass} ${commit.id} commit${ + branchPos[commit.branch].index % THEME_COLOR_LIMIT + }` ); } } @@ -475,7 +461,7 @@ const drawBranches = (svg, branches) => { const gitGraphConfig = getConfig().gitGraph; const g = svg.append('g'); branches.forEach((branch, index) => { - let adjustIndexForTheme = index % THEME_COLOR_LIMIT; + const adjustIndexForTheme = index % THEME_COLOR_LIMIT; const pos = branchPos[branch.name].pos; const line = g.append('line'); From 9ee43c0b7a9b52108cf75ae291941e7f0ca7f78d Mon Sep 17 00:00:00 2001 From: Muhammad Faisal Bin Arba'in Date: Fri, 24 Jun 2022 07:35:00 +0800 Subject: [PATCH 4/4] snapshot test for more 8 branches with commits --- .../integration/rendering/gitGraph.spec.js | 46 +++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 4dda2c16ed..283a52c67c 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -207,4 +207,50 @@ describe('Git Graph diagram', () => { {} ); }); + + it('12: should render commits for more than 8 branches', () => { + imgSnapshotTest( + ` + gitGraph + checkout main + commit + checkout main + branch branch1 + commit + checkout main + merge branch1 + branch branch2 + commit + checkout main + merge branch2 + branch branch3 + commit + checkout main + merge branch3 + branch branch4 + commit + checkout main + merge branch4 + branch branch5 + commit + checkout main + merge branch5 + branch branch6 + commit + checkout main + merge branch6 + branch branch7 + commit + checkout main + merge branch7 + branch branch8 + commit + checkout main + merge branch8 + branch branch9 + commit + `, + {} + ); + }); });