# HG changeset patch
# User Anton Shestakov <av6@dwimlabs.net>
# Date 1512892582 -28800
# Node ID 27ab3150cd50fe78f6346bb70df58338ea0ba84b
# Parent  76dcdc4e707bd5e8f9cb46ca8709ef4f8efcba81
hgweb: calculate <canvas> width and height client-side

hgweb determines and passes to templates some variables related to graph
appearance, like bg_height, canvaswidth and canvasheight. bg_height was and
still is used for graph.scale() call in graph.tmpl, and the two latter
variables were used in <canvas> element as width and height properties, and
they were set before JS code got to run. Setting these properties server-side
doesn't make a lot of sense, because a graph that has been scaled should
calculate things like width and height on its own when being rendered.

Let's move (re)sizing <canvas> to JavaScript (to Graph.render function) and
stop parsing HTML with regular expressions just to know new width and height.
That extra loop that only counts cols is required because <canvas> can't
be resized after or in the process of rendering (or it gets cleared).
Incidentally, SVG doesn't have this problem and I'm hoping to switch graph to
using it in future.

There also was truecanvasheight, but according to hg grep --all it was never
used, see d490edc71146.

diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/hgweb/webcommands.py
--- a/mercurial/hgweb/webcommands.py	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/hgweb/webcommands.py	Sun Dec 10 15:56:22 2017 +0800
@@ -1231,13 +1231,6 @@
         tree = list(item for item in graphmod.colored(dag, web.repo)
                     if item[1] == graphmod.CHANGESET)
 
-    def getcolumns(tree):
-        cols = 0
-        for (id, type, ctx, vtx, edges) in tree:
-            cols = max(cols, max([edge[0] for edge in edges] or [0]),
-                             max([edge[1] for edge in edges] or [0]))
-        return cols
-
     def graphdata(usetuples):
         data = []
 
@@ -1266,17 +1259,14 @@
 
         return data
 
-    cols = getcolumns(tree)
     rows = len(tree)
-    canvasheight = (rows + 1) * bg_height - 27
 
     return tmpl('graph', rev=rev, symrev=symrev, revcount=revcount,
                 uprev=uprev,
                 lessvars=lessvars, morevars=morevars, downrev=downrev,
-                cols=cols, rows=rows, changesets=count,
-                canvaswidth=(cols + 1) * bg_height,
-                truecanvasheight=rows * bg_height,
-                canvasheight=canvasheight, bg_height=bg_height,
+                rows=rows,
+                bg_height=bg_height,
+                changesets=count,
                 jsdata=lambda **x: graphdata(True),
                 nodes=lambda **x: graphdata(False),
                 node=ctx.hex(), changenav=changenav)
diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/templates/gitweb/graph.tmpl
--- a/mercurial/templates/gitweb/graph.tmpl	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/templates/gitweb/graph.tmpl	Sun Dec 10 15:56:22 2017 +0800
@@ -38,7 +38,7 @@
 
 <div id="wrapper">
 <ul id="nodebgs"></ul>
-<canvas id="graph" width="{canvaswidth}" height="{canvasheight}"></canvas>
+<canvas id="graph"></canvas>
 <ul id="graphnodes">{nodes%graphentry}</ul>
 </div>
 
diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/templates/monoblue/graph.tmpl
--- a/mercurial/templates/monoblue/graph.tmpl	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/templates/monoblue/graph.tmpl	Sun Dec 10 15:56:22 2017 +0800
@@ -30,7 +30,7 @@
     <div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
     <div id="wrapper">
         <ul id="nodebgs"></ul>
-        <canvas id="graph" width="{canvaswidth}" height="{canvasheight}"></canvas>
+        <canvas id="graph"></canvas>
         <ul id="graphnodes">{nodes%graphentry}</ul>
     </div>
 
diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/templates/paper/graph.tmpl
--- a/mercurial/templates/paper/graph.tmpl	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/templates/paper/graph.tmpl	Sun Dec 10 15:56:22 2017 +0800
@@ -51,7 +51,7 @@
 
 <div id="wrapper">
 <ul id="nodebgs" class="stripes2"></ul>
-<canvas id="graph" width="{canvaswidth}" height="{canvasheight}"></canvas>
+<canvas id="graph"></canvas>
 <ul id="graphnodes">{nodes%graphentry}</ul>
 </div>
 
diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/templates/spartan/graph.tmpl
--- a/mercurial/templates/spartan/graph.tmpl	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/templates/spartan/graph.tmpl	Sun Dec 10 15:56:22 2017 +0800
@@ -32,7 +32,7 @@
 
 <div id="wrapper">
 <ul id="nodebgs"></ul>
-<canvas id="graph" width="{canvaswidth}" height="{canvasheight}"></canvas>
+<canvas id="graph"></canvas>
 <ul id="graphnodes">{nodes%graphentry}</ul>
 </div>
 
diff -r 76dcdc4e707b -r 27ab3150cd50 mercurial/templates/static/mercurial.js
--- a/mercurial/templates/static/mercurial.js	Fri Dec 08 21:50:11 2017 +0800
+++ b/mercurial/templates/static/mercurial.js	Sun Dec 10 15:56:22 2017 +0800
@@ -111,19 +111,30 @@
 
 		var backgrounds = '';
 		var nodedata = '';
-		var line, start, end, color, x, y, x0, y0, x1, y1, column, radius;
+		var i, j, cur, line, start, end, color, x, y, x0, y0, x1, y1, column, radius;
 
-		for (var i = 0; i < data.length; i++) {
+		var cols = 0;
+		for (i = 0; i < data.length; i++) {
+			cur = data[i];
+			for (j = 0; j < cur.edges.length; j++) {
+				line = cur.edges[j];
+				cols = Math.max(cols, line[0], line[1]);
+			}
+		}
+		this.canvas.width = (cols + 1) * this.bg_height;
+		this.canvas.height = (data.length + 1) * this.bg_height - 27;
+
+		for (i = 0; i < data.length; i++) {
 
 			var parity = i % 2;
 			this.cell[1] += this.bg_height;
 			this.bg[1] += this.bg_height;
 
-			var cur = data[i];
+			cur = data[i];
 			var fold = false;
 
 			var prevWidth = this.ctx.lineWidth;
-			for (var j = 0; j < cur.edges.length; j++) {
+			for (j = 0; j < cur.edges.length; j++) {
 
 				line = cur.edges[j];
 				start = line[0];
@@ -413,14 +424,6 @@
 
                     if (mode === 'graph') {
                         var graph = window.graph;
-                        var sizes = htmlText.match(/^\s*<canvas id="graph" width="(\d+)" height="(\d+)"><\/canvas>$/m);
-                        var addWidth = sizes[1];
-                        var addHeight = sizes[2];
-                        addWidth = parseInt(addWidth);
-                        addHeight = parseInt(addHeight);
-                        graph.canvas.width = addWidth;
-                        graph.canvas.height = addHeight;
-
                         var dataStr = htmlText.match(/^\s*var data = (.*);$/m)[1];
                         var data = JSON.parse(dataStr);
                         if (data.length < nextPageVar) {
diff -r 76dcdc4e707b -r 27ab3150cd50 tests/test-hgweb-commands.t
--- a/tests/test-hgweb-commands.t	Fri Dec 08 21:50:11 2017 +0800
+++ b/tests/test-hgweb-commands.t	Sun Dec 10 15:56:22 2017 +0800
@@ -1781,7 +1781,7 @@
   
   <div id="wrapper">
   <ul id="nodebgs"></ul>
-  <canvas id="graph" width="39" height="168"></canvas>
+  <canvas id="graph"></canvas>
   <ul id="graphnodes"><li data-node="cad8025a2e87">
    <span class="desc">
     <a class="list" href="/rev/cad8025a2e87?style=gitweb"><b>branch commit with null character: </b></a>
diff -r 76dcdc4e707b -r 27ab3150cd50 tests/test-hgweb-empty.t
--- a/tests/test-hgweb-empty.t	Fri Dec 08 21:50:11 2017 +0800
+++ b/tests/test-hgweb-empty.t	Sun Dec 10 15:56:22 2017 +0800
@@ -295,7 +295,7 @@
   
   <div id="wrapper">
   <ul id="nodebgs" class="stripes2"></ul>
-  <canvas id="graph" width="39" height="12"></canvas>
+  <canvas id="graph"></canvas>
   <ul id="graphnodes"></ul>
   </div>