Merge pull request #3150 from faisalarbain/bug/3149_gitgraph_more_than_8_branches

fix: rotate class id when branch more than 8

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
+      `,
+      {}
+    );
+  });
 });

src/diagrams/git/gitGraphRenderer.js

@@ -15,6 +15,8 @@ const commitType = {
   CHERRY_PICK: 4,
 };
 
+const THEME_COLOR_LIMIT = 8;
+
 let branchPos = {};
 let commitPos = {};
 let lanes = [];
@@ -117,13 +119,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
         circle.attr('width', 20);
         circle.attr(
           'class',
-          'commit ' +
+          `commit ${commit.id} commit-highlight${
-            commit.id +
+            branchPos[commit.branch].index % THEME_COLOR_LIMIT
-            ' commit-highlight' +
+          } ${typeClass}-outer`
-            branchPos[commit.branch].index +
-            ' ' +
-            typeClass +
-            '-outer'
         );
         gBullets
           .append('rect')
@@ -133,13 +131,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
           .attr('width', 12)
           .attr(
             'class',
-            'commit ' +
+            `commit ${commit.id} commit${
-              commit.id +
+              branchPos[commit.branch].index % THEME_COLOR_LIMIT
-              ' commit' +
+            } ${typeClass}-inner`
-              branchPos[commit.branch].index +
-              ' ' +
-              typeClass +
-              '-inner'
           );
       } else if (commit.type === commitType.CHERRY_PICK) {
         gBullets
@@ -147,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)
@@ -169,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)
@@ -177,13 +171,16 @@ 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);
         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_COLOR_LIMIT}`
+        );
         if (commit.type === commitType.MERGE) {
           const circle2 = gBullets.append('circle');
           circle2.attr('cx', x);
@@ -191,7 +188,9 @@ 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_COLOR_LIMIT
+            }`
           );
         }
         if (commit.type === commitType.REVERSE) {
@@ -200,7 +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
+              `commit ${typeClass} ${commit.id} commit${
+                branchPos[commit.branch].index % THEME_COLOR_LIMIT
+              }`
             );
         }
       }
@@ -430,7 +431,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_COLOR_LIMIT));
 };
 
 const drawArrows = (svg, commits) => {
@@ -460,7 +461,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;
+    const adjustIndexForTheme = index % THEME_COLOR_LIMIT;
 
     const pos = branchPos[branch.name].pos;
     const line = g.append('line');