From f42cec282a2d1ba865894ee0276bf110878b022c Mon Sep 17 00:00:00 2001 From: Guy Pursey Date: Fri, 6 Oct 2023 20:16:09 +0100 Subject: [PATCH 01/28] GitGraph: Add check for direction of merge arrow to determine colour. --- packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 2b88cfe7ef..fa490e75e8 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -410,7 +410,7 @@ const drawArrow = (svg, commit1, commit2, allCommits) => { radius = 10; offset = 10; // Figure out the color of the arrow,arrows going down take the color from the destination branch - colorClassNum = branchPos[commit2.branch].index; + colorClassNum = branchPos[(p1.y > p2.y ? commit1 : commit2).branch].index; const lineY = p1.y < p2.y ? findLane(p1.y, p2.y) : findLane(p2.y, p1.y); const lineX = p1.x < p2.x ? findLane(p1.x, p2.x) : findLane(p2.x, p1.x); From d9daf19055c3e464b383989a8a4770d257cb24e7 Mon Sep 17 00:00:00 2001 From: Guy Pursey Date: Sat, 7 Oct 2023 18:15:29 +0100 Subject: [PATCH 02/28] GitGraph: Correct commit variable in overlap check. Originally, the function was checking if any commits were on the same branch as `commit2`, the destination commit. However, in order to avoid a conflict, we should only need to check whether any commits are on the same branch as `commit 1`. Updated and moved commenting as well. --- packages/mermaid/src/diagrams/git/gitGraphRenderer.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index fa490e75e8..8ce05c22b0 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -347,11 +347,13 @@ const drawCommits = (svg, commits, modifyGraph) => { * @returns {boolean} If there are commits between commit1's x-position and commit2's x-position */ const hasOverlappingCommits = (commit1, commit2, allCommits) => { - // Find commits on the same branch as commit2 const keys = Object.keys(allCommits); const overlappingComits = keys.filter((key) => { return ( - allCommits[key].branch === commit2.branch && + // Find commits on the same branch as commit1, + // after commit1 but before commit2 + // to avoid collision + allCommits[key].branch === commit1.branch && allCommits[key].seq > commit1.seq && allCommits[key].seq < commit2.seq ); From 839645f161c50866af5c35ecc48619e2143dd70f Mon Sep 17 00:00:00 2001 From: Guy Pursey Date: Sat, 7 Oct 2023 18:43:16 +0100 Subject: [PATCH 03/28] GitGraph: Add more example diagrams to test with. --- demos/git.html | 80 ++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 71 insertions(+), 9 deletions(-) diff --git a/demos/git.html b/demos/git.html index f24217711e..37fa8a461f 100644 --- a/demos/git.html +++ b/demos/git.html @@ -17,26 +17,88 @@

Git diagram demo

     ---
-    title: Simple Git diagram
+    title: Simple "branch and merge"
     ---
     gitGraph:
-    options
-    {
-    "nodeSpacing": 50,
-    "nodeRadius": 5
-    }
-    end
-    branch master
     commit
     branch newbranch
     checkout newbranch
     commit
+    checkout main
+    merge newbranch
+
+ + 
+    ---
+    title: Continuous development
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Two-way merges
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    checkout main
+    merge develop
+    commit
+    checkout develop
+    merge main
     commit
-    checkout master
+    checkout main
+    merge develop
+
+ 
+    ---
+    title: Cherry-pick
+    ---
+    gitGraph:
     commit
+    branch newbranch
+    checkout newbranch
+    commit id: "Pick me"
+    checkout main
+    commit
+    checkout newbranch
     commit
+    checkout main
+    cherry-pick id: "Pick me"
     merge newbranch
+ 
+    ---
+    title: Three branches
+    ---
+    gitGraph:
+    commit
+    branch develop
+    checkout develop
+    commit
+    branch feature
+    checkout feature
+    commit
+    checkout main
+    merge feature id:"Direct to main"
+    checkout develop
+    merge feature
+    commit
+    checkout main
+    merge develop
+