Mercurial > hg

changeset 35407:27ab3150cd50

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Anton Shestakov <av6@dwimlabs.net>
date Sun, 10 Dec 2017 15:56:22 +0800
parents 76dcdc4e707b
children a48af4993aa0
files mercurial/hgweb/webcommands.py mercurial/templates/gitweb/graph.tmpl mercurial/templates/monoblue/graph.tmpl mercurial/templates/paper/graph.tmpl mercurial/templates/spartan/graph.tmpl mercurial/templates/static/mercurial.js tests/test-hgweb-commands.t tests/test-hgweb-empty.t
diffstat 8 files changed, 24 insertions(+), 31 deletions(-) [+]
line wrap: on
line diff
--- 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)
--- 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>
 
--- 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>
 
--- 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>
 
--- 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>
 
--- 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) {
--- 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>
--- 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>