changeset 27934:1779ff7426c9 stable

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.

--- 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];