diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index 19ddde31d4..60800e809b 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/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 } } + ); + }); }); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 84b8f41a16..fbcaa547a4 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/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,19 +502,22 @@ const drawArrow = (svg, commitA, commitB, allCommits) => { } } } else { + arc = 'A 20 20, 0, 0, 0,'; + arc2 = 'A 20 20, 0, 0, 1,'; + radius = 20; + offset = 20; + 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 - colorClassNum = branchPos[commitB.branch].index; - - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${ - p1.y + offset - } L ${p2.x} ${p2.y}`; + 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,'; @@ -520,46 +525,46 @@ const drawArrow = (svg, commitA, commitB, allCommits) => { radius = 20; offset = 20; - // Arrows going up take the color from the source branch - 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}`; + if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) { + 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 ${p1.x + radius} ${p1.y} ${arc} ${p1.x + offset} ${ - p2.y + radius - } L ${p2.x} ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`; } } else { if (p1.y < p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; - // Arrows going up take the color from the target branch - colorClassNum = branchPos[commitB.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; + if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) { + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc2} ${p2.x} ${ + p1.y + offset + } L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${ + p2.y + } L ${p2.x} ${p2.y}`; + } } if (p1.y > p2.y) { - arc = 'A 20 20, 0, 0, 0,'; - radius = 20; - offset = 20; - // Arrows going up take the color from the source branch - colorClassNum = branchPos[commitA.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${p1.y - offset} L ${ - p2.x - } ${p2.y}`; + if (commitB.type === commitType.MERGE && commitA.id !== commitB.parents[0]) { + lineDef = `M ${p1.x} ${p1.y} L ${p2.x - radius} ${p1.y} ${arc} ${p2.x} ${ + p1.y - offset + } L ${p2.x} ${p2.y}`; + } else { + lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y + radius} ${arc2} ${p1.x + offset} ${ + p2.y + } L ${p2.x} ${p2.y}`; + } } if (p1.y === p2.y) { - colorClassNum = branchPos[commitA.branch].index; - lineDef = `M ${p1.x} ${p1.y} L ${p1.x} ${p2.y - radius} ${arc} ${p1.x + offset} ${p2.y} L ${ - p2.x - } ${p2.y}`; + lineDef = `M ${p1.x} ${p1.y} L ${p2.x} ${p2.y}`; } } }