Have the image tree update itself in response to resizing

static/js/graphing.js

@@ -47,6 +47,64 @@ function ImageHistoryTree(namespace, name, images, formatComment, formatTime) {
 }
 
 
+/**
+ * Calculates the dimensions of the tree.
+ */
+ImageHistoryTree.prototype.calculateDimensions_ = function(container) {
+    var cw = Math.max(document.getElementById(container).clientWidth, this.maxWidth_ * DEPTH_WIDTH);
+    var ch = this.maxHeight_ * (DEPTH_HEIGHT + 10);
+
+    var margin = { top: 40, right: 20, bottom: 20, left: 40 };
+    var m = [margin.top, margin.right, margin.bottom, margin.left];
+    var w = cw - m[1] - m[3];
+    var h = ch - m[0] - m[2];
+
+    return {
+        'w': w,
+        'h': h,
+        'm': m,
+        'cw': cw,
+        'ch': ch
+    };
+};
+
+
+/**
+ * Updates the dimensions of the tree.
+ */
+ImageHistoryTree.prototype.updateDimensions_ = function() {
+    var container = this.container_;
+    var dimensions = this.calculateDimensions_(container);
+
+    var m = dimensions.m;
+    var w = dimensions.w;
+    var h = dimensions.h;
+    var cw = dimensions.cw;
+    var ch = dimensions.ch;
+
+    // Set the height of the container so that it never goes offscreen.
+    $('#' + container).removeOverscroll();
+    var viewportHeight = $(window).height();
+    var boundingBox = document.getElementById(container).getBoundingClientRect();
+    document.getElementById(container).style.maxHeight = (viewportHeight - boundingBox.top - 30) + 'px';
+    $('#' + container).overscroll();
+
+    // Update the tree.
+    var rootSvg = this.rootSvg_;
+    var tree = this.tree_;
+    var vis = this.vis_;
+
+    rootSvg
+        .attr("width", w + m[1] + m[3])
+        .attr("height", h + m[0] + m[2]);
+
+    tree.size([w, h]);
+    vis.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+  
+    return dimensions;
+};
+
+
 /**
  * Draws the tree.
  */
@@ -56,34 +114,20 @@ ImageHistoryTree.prototype.draw = function(container) {
     this.maxWidth_ = result['maxWidth'];
     this.maxHeight_ = result['maxHeight'];
 
-    // Determine the size of the SVG container.
+    // Save the container.
-    var width = Math.max(document.getElementById(container).clientWidth, this.maxWidth_ * DEPTH_WIDTH);
+    this.container_ = container;
-    var height = this.maxHeight_ * (DEPTH_HEIGHT + 10);
+ 
-
-    // Set the height of the container so that it never goes offscreen.
-    var viewportHeight = $(window).height();
-    var boundingBox = document.getElementById(container).getBoundingClientRect();
-    document.getElementById(container).style.maxHeight = (viewportHeight - boundingBox.top) + 'px';
-
-    var margin = { top: 40, right: 20, bottom: 20, left: 40 };
-    var m = [margin.top, margin.right, margin.bottom, margin.left];
-    var w = width - m[1] - m[3];
-    var h = height - m[0] - m[2];
-
     // Create the tree and all its components.
     var tree = d3.layout.tree()
-        .separation(function() { return 2; })
+        .separation(function() { return 2; });
-        .size([w, h]);
 
     var diagonal = d3.svg.diagonal()
         .projection(function(d) { return [d.x, d.y]; });
 
-    var vis = d3.select("#" + container).append("svg:svg")
+    var rootSvg =  d3.select("#" + container).append("svg:svg")
-        .attr("width", w + m[1] + m[3])
+        .attr("class", "image-tree");
-        .attr("height", h + m[0] + m[2])
+
-        .attr("class", "image-tree")
+    var vis = rootSvg.append("svg:g");
-        .append("svg:g")
-          .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
 
     var formatComment = this.formatComment_;
     var formatTime = this.formatTime_;
@@ -102,7 +146,7 @@ ImageHistoryTree.prototype.draw = function(container) {
             }
 
             if (!d.image) {
-		return '(This repository is empty)';
+                return '(This repository is empty)';
             }
 
             if (d.image.comment) {
@@ -116,20 +160,19 @@ ImageHistoryTree.prototype.draw = function(container) {
     vis.call(tip);
 
     // Save all the state created.
-    this.fullWidth_ = width;
-
-    this.width_ = w;
-    this.height_ = h;
-
     this.diagonal_ = diagonal;
     this.vis_ = vis;
+    this.rootSvg_ = rootSvg;
     this.tip_ = tip;
-
     this.tree_ = tree;
 
+    // Update the dimensions of the tree.
+    var dimensions = this.updateDimensions_();
+
     // Populate the tree.
-    this.root_.x0 = this.fullWidth_ / 2;
+    this.root_.x0 = dimensions.cw / 2;
     this.root_.y0 = 0;
+
     this.setTag_(this.currentTag_);
 
     $('#' + container).overscroll();
@@ -140,7 +183,8 @@ ImageHistoryTree.prototype.draw = function(container) {
  * Redraws the image history to fit the new size.
  */
 ImageHistoryTree.prototype.notifyResized = function() {
-  console.log('Image history container resized.');
+  this.updateDimensions_();
+  this.update_(this.root_);
 };