Fix color and arrow for merge commit

cypress/integration/rendering/gitGraph.spec.js

@@ -943,4 +943,74 @@ gitGraph TB:
       { gitGraph: { parallelCommits: true } }
     );
   });
+  it('46: should render GitGraph with merge back and merge forward', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit
+
+      branch branch-A
+      branch branch-B
+      commit
+
+      checkout branch-A
+      merge branch-B
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('47: should render GitGraph with merge back and merge forward | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit
+
+      branch branch-A
+      branch branch-B
+      commit
+
+      checkout branch-A
+      merge branch-B
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('48: should render GitGraph with merge on a new branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph LR:
+      commit
+
+      branch branch-B order: 2
+      commit
+
+      branch branch-A
+      merge main
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
+  it('49: should render GitGraph with merge on a new branch | Vertical Branch', () => {
+    imgSnapshotTest(
+      `gitGraph TB:
+      commit
+
+      branch branch-B order: 2
+      commit
+
+      branch branch-A
+      merge main
+
+      checkout branch-B
+      merge branch-A
+      `,
+      { gitGraph: { parallelCommits: true } }
+    );
+  });
 });

packages/mermaid/src/diagrams/git/gitGraphRenderer.js

@@ -456,6 +456,10 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
   let radius = 0;
   let offset = 0;
   let colorClassNum = branchPos[commitB.branch].index;
+  if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+    colorClassNum = branchPos[commitA.branch].index;
+  }
+
   let lineDef;
   if (arrowNeedsRerouting) {
     arc = 'A 10 10, 0, 0, 0,';
@@ -470,7 +474,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       if (p1.x < p2.x) {
         // Source commit is on branch position left of destination commit
         // so render arrow rightward with colour of destination branch
-        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${lineX - radius} ${p1.y} ${arc2} ${lineX} ${
           p1.y + offset
         } L ${lineX} ${p2.y - radius} ${arc} ${lineX + offset} ${p2.y} L ${p2.x} ${p2.y}`;
@@ -486,7 +489,6 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       if (p1.y < p2.y) {
         // Source commit is on branch positioned above destination commit
         // so render arrow downward with colour of destination branch
-        colorClassNum = branchPos[commitB.branch].index;
         lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${lineY - radius} ${arc} ${
           p1.x + offset
         } ${lineY} L ${p2.x - radius} ${lineY} ${arc2} ${p2.x} ${lineY + offset} L ${p2.x} ${p2.y}`;
@@ -500,66 +502,69 @@ const drawArrow = (svg, commitA, commitB, allCommits) => {
       }
     }
   } else {
-    if (dir === 'TB') {
-      if (p1.x < p2.x) {
     arc = 'A 20 20, 0, 0, 0,';
     arc2 = 'A 20 20, 0, 0, 1,';
     radius = 20;
     offset = 20;
 
-        // Figure out the color of the arrow,arrows going down take the color from the destination branch
+    if (dir === 'TB') {
-        colorClassNum = branchPos[commitB.branch].index;
+      if (p1.x < p2.x) {
-
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
+            p2.y
+          } L ${p2.x} ${p2.y}`;
+        } else {
           lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
             p1.y + offset
           } L ${p2.x} ${p2.y}`;
         }
+      }
       if (p1.x > p2.x) {
         arc = 'A 20 20, 0, 0, 0,';
         arc2 = 'A 20 20, 0, 0, 1,';
         radius = 20;
         offset = 20;
 
-        // Arrows going up take the color from the source branch
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
-        colorClassNum = branchPos[commitA.branch].index;
           lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc2} ${p1.x - offset} ${
             p2.y
           } L ${p2.x} ${p2.y}`;
+        } else {
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x + radius} ${p1.y} ${arc} ${p2.x} ${
+            p1.y + offset
+          } L ${p2.x} ${p2.y}`;
+        }
       }
 
       if (p1.x === p2.x) {
-        colorClassNum = branchPos[commitA.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${
-          p2.y + radius
-        } L ${p2.x} ${p2.y}`;
       }
     } else {
       if (p1.y < p2.y) {
-        arc = 'A 20 20, 0, 0, 0,';
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
-        radius = 20;
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${
-        offset = 20;
+            p1.y + offset
-        // Arrows going up take the color from the target branch
+          } L ${p2.x} ${p2.y}`;
-        colorClassNum = branchPos[commitB.branch].index;
+        } else {
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${
-          p2.x
+            p2.y
-        } ${p2.y}`;
+          } L ${p2.x} ${p2.y}`;
+        }
       }
       if (p1.y > p2.y) {
-        arc = 'A 20 20, 0, 0, 0,';
+        if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) {
-        radius = 20;
+          lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${
-        offset = 20;
+            p1.y - offset
-        // Arrows going up take the color from the source branch
+          } L ${p2.x} ${p2.y}`;
-        colorClassNum = branchPos[commitA.branch].index;
+        } else {
-        lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${
+          lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y + radius} ${arc2} ${p1.x + offset} ${
-          p2.x
+            p2.y
-        } ${p2.y}`;
+          } L ${p2.x} ${p2.y}`;
+        }
       }
 
       if (p1.y === p2.y) {
-        colorClassNum = branchPos[commitA.branch].index;
+        lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`;
-        lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${
-          p2.x
-        } ${p2.y}`;
       }
     }
   }