Handle multiple merges in gitgraph.js (#11996) (#12000)

Backport #11996

There is a bug in web_src/js/vendor/gitgraph.js whereby it fails to
handle multiple merges in a single commit correctly. This PR adds
changes to make this work.

Fix #11981

Signed-off-by: Andrew Thornton <art27@cantab.net>

2 files changed, 39 insertions, 40 deletions

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 5f4d9f1d62..493ac7a696 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -2,39 +2,37 @@
 <div class="repository commits">
 	{{template "repo/header" .}}
 	<div class="ui container">
-	  <div id="git-graph-container" class="ui segment">
-		  <h1>{{.i18n.Tr "repo.commit_graph"}}</h1>
-	    <div id="rel-container">
-	      <canvas id="graph-canvas">
-		<ul id="graph-raw-list">
-    		  {{ range .Graph }}
-		  <li><span class="node-relation">{{ .GraphAcii -}}</span></li>
-  		  {{ end }}
-		</ul>
-	      </canvas>
-	    </div>
-	    <div id="rev-container">
-	      <ul id="rev-list">
-		{{ range .Graph }}
-		<li>
-		  {{ if .OnlyRelation }}
-		  <span />
-		  {{ else }}
-		  <code id="{{.ShortRev}}">
-		    <a href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.Rev}}">{{ .ShortRev}}</a>
-		  </code>
-		  <strong> {{.Branch}}</strong>
-		  <span>{{RenderCommitMessage .Subject $.RepoLink $.Repository.ComposeMetas}}</span> by
-		  <span class="author">
-		    {{.Author}}
-		  </span>
-		  <span class="time">{{.Date}}</span>
-		  {{ end }}
-		</li>
-		{{ end }}
-	      </ul>
-	    </div>
-	  </div>
+		<div id="git-graph-container" class="ui segment">
+			<h1>{{.i18n.Tr "repo.commit_graph"}}</h1>
+			<div id="rel-container">
+				<canvas id="graph-canvas">
+					<ul id="graph-raw-list">
+						{{ range .Graph }}
+							<li><span class="node-relation">{{ .GraphAcii -}}</span></li>
+						{{ end }}
+					</ul>
+				</canvas>
+			</div>
+			<div id="rev-container">
+				<ul id="rev-list">
+					{{ range .Graph }}
+						<li>
+							{{ if .OnlyRelation }}
+								<span />
+							{{ else }}
+								<code id="{{.ShortRev}}">
+									<a href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.Rev}}">{{ .ShortRev}}</a>
+								</code>
+								<strong> {{.Branch}}</strong>
+								<span>{{RenderCommitMessage .Subject $.RepoLink $.Repository.ComposeMetas}}</span> by
+								<span class="author">{{.Author}}</span>
+								<span class="time">{{.Date}}</span>
+							{{ end }}
+						</li>
+					{{ end }}
+				</ul>
+			</div>
+		</div>
 	</div>
 </div>
 {{template "base/paginate" .}}
diff --git a/web_src/js/vendor/gitgraph.js b/web_src/js/vendor/gitgraph.js
index 12d7a2eddf..0a780c1eb5 100644
--- a/web_src/js/vendor/gitgraph.js
+++ b/web_src/js/vendor/gitgraph.js
@@ -65,7 +65,7 @@ export default function gitGraph(canvas, rawGraphList, config) {
 
     for (i = 0; i < l; i++) {
       midStr = rawGraphList[i].replace(/\s+/g, ' ').replace(/^\s+|\s+$/g, '');
-
+      midStr = midStr.replace(/(--)|(-\.)/g,'-')
       maxWidth = Math.max(midStr.replace(/(_|\s)/g, '').length, maxWidth);
 
       row = midStr.split('');
@@ -343,11 +343,6 @@ export default function gitGraph(canvas, rawGraphList, config) {
         return (val !== ' ' && val !== '_');
       }).length;
 
-      // do some clean up
-      if (flows.length > condenseCurrentLength) {
-        flows.splice(condenseCurrentLength, flows.length - condenseCurrentLength);
-      }
-
       colomnIndex = 0;
 
       // a little inline analysis and draw process
@@ -362,7 +357,7 @@ export default function gitGraph(canvas, rawGraphList, config) {
           continue;
         }
 
-        // inline interset
+        // inline intersect
         if ((colomn === '_' || colomn === '/')
           && currentRow[colomnIndex - 1] === '|'
           && currentRow[colomnIndex - 2] === '_') {
@@ -380,6 +375,7 @@ export default function gitGraph(canvas, rawGraphList, config) {
         color = flows[colomnIndex].color;
 
         switch (colomn) {
+          case '-':
           case '_':
             drawLineRight(x, y, color);
 
@@ -416,6 +412,11 @@ export default function gitGraph(canvas, rawGraphList, config) {
 
       y -= config.unitSize;
     }
+
+    // do some clean up
+    if (flows.length > condenseCurrentLength) {
+      flows.splice(condenseCurrentLength, flows.length - condenseCurrentLength);
+    }
   };
 
   init();