hgweb: update canvas.width before dynamically redrawing graph (issue2683) stable
authorAnton Shestakov <av6@dwimlabs.net>
Sat, 23 Jan 2016 17:31:31 +0800
branchstable
changeset 27934 1779ff7426c9
parent 27933 a6833e464b07
child 27935 594bdc380aa2
hgweb: update canvas.width before dynamically redrawing graph (issue2683) After 91ac8cb79125 graph canvas width is decided once on the initial rendering. However, after graph page gets scrolled down to load more, it might need more horizontal space to draw, so it needs to resize the canvas dynamically. The exact problem that this patch solves can be seen using: hg init testfork cd testfork echo 0 > foo hg ci -Am0 echo 1 > foo hg ci -m1 hg up 0 echo 2 > foo hg ci -m2 hg gl -T '{rev}\n' @ 2 | | o 1 |/ o 0 hg serve And then by navigating to http://127.0.0.1:8000/graph/tip?revcount=1 "revcount=1" makes sure the initial graph contains only revision 2. And because the initial canvas width takes only that one revision into count, after the (immediate) AJAX update revision 1 will be cut off from the graph. We can safely set canvas width to the new value we get from the AJAX request because every time graph is updated, it is completely redrawn using all the requested nodes (in the case above it will use /graph/2?revcount=61), so the value is guaranteed not to decrease. P.S.: Sorry for parsing HTML with regexes, but I didn't start it.
mercurial/templates/static/mercurial.js
--- a/mercurial/templates/static/mercurial.js	Fri Jan 22 11:00:13 2016 -0800
+++ b/mercurial/templates/static/mercurial.js	Sat Jan 23 17:31:31 2016 +0800
@@ -383,8 +383,12 @@
                 },
                 function onsuccess(htmlText) {
                     if (mode == 'graph') {
-                        var addHeight = htmlText.match(/^\s*<canvas id="graph".*height="(\d+)"><\/canvas>$/m)[1];
+                        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];