# HG changeset patch # User Anton Shestakov <a...@dwimlabs.net> # Date 1512892582 -28800 # Sun Dec 10 15:56:22 2017 +0800 # Node ID 2319d0216460c6f3b91f174a5027190aa80e07b7 # Parent e35959da063b5944369277f3b2c69c3af06e2710 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 --git a/mercurial/hgweb/webcommands.py b/mercurial/hgweb/webcommands.py --- a/mercurial/hgweb/webcommands.py +++ b/mercurial/hgweb/webcommands.py @@ -1231,13 +1231,6 @@ def graph(web, req, tmpl): 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 @@ def graph(web, req, tmpl): 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 --git a/mercurial/templates/gitweb/graph.tmpl b/mercurial/templates/gitweb/graph.tmpl --- a/mercurial/templates/gitweb/graph.tmpl +++ b/mercurial/templates/gitweb/graph.tmpl @@ -38,7 +38,7 @@ graph | <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 --git a/mercurial/templates/monoblue/graph.tmpl b/mercurial/templates/monoblue/graph.tmpl --- a/mercurial/templates/monoblue/graph.tmpl +++ b/mercurial/templates/monoblue/graph.tmpl @@ -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 --git a/mercurial/templates/paper/graph.tmpl b/mercurial/templates/paper/graph.tmpl --- a/mercurial/templates/paper/graph.tmpl +++ b/mercurial/templates/paper/graph.tmpl @@ -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 --git a/mercurial/templates/spartan/graph.tmpl b/mercurial/templates/spartan/graph.tmpl --- a/mercurial/templates/spartan/graph.tmpl +++ b/mercurial/templates/spartan/graph.tmpl @@ -32,7 +32,7 @@ navigate: <small class="navigate">{chang <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 --git a/mercurial/templates/static/mercurial.js b/mercurial/templates/static/mercurial.js --- a/mercurial/templates/static/mercurial.js +++ b/mercurial/templates/static/mercurial.js @@ -111,19 +111,30 @@ Graph.prototype = { 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 @@ function ajaxScrollInit(urlFormat, 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 --git a/tests/test-hgweb-commands.t b/tests/test-hgweb-commands.t --- a/tests/test-hgweb-commands.t +++ b/tests/test-hgweb-commands.t @@ -1781,7 +1781,7 @@ Overviews <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 --git a/tests/test-hgweb-empty.t b/tests/test-hgweb-empty.t --- a/tests/test-hgweb-empty.t +++ b/tests/test-hgweb-empty.t @@ -295,7 +295,7 @@ Some tests for hgweb in an empty reposit <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> _______________________________________________ Mercurial-devel mailing list Mercurial-devel@mercurial-scm.org https://www.mercurial-scm.org/mailman/listinfo/mercurial-devel