Add resizing support to the image diff tree

static/js/graphing.js

@@ -100,7 +100,7 @@ ImageHistoryTree.prototype.updateDimensions_ = function() {
 
     tree.size([w, h]);
     vis.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
-  
+
     return dimensions;
 };
 
@@ -748,16 +748,16 @@ function ImageFileChangeTree(image, changes) {
  */
 ImageFileChangeTree.prototype.calculateDimensions_ = function(container) {
     var cw = document.getElementById(container).clientWidth;
-    var barWidth = cw * 0.8;
-
     var barHeight = 20;
     var ch = (this.changes_.length * barHeight) + 40;
 
-    var margin = { top: 40, right: 20, bottom: 20, left: 40 };
+    var margin = { top: 40, right: 00, bottom: 20, left: 20 };
     var m = [margin.top, margin.right, margin.bottom, margin.left];
     var w = cw - m[1] - m[3];
     var h = ch - m[0] - m[2];
 
+    var barWidth = cw * 0.8 - m[1] - m[3];
+
     return {
         'w': w,
         'h': h,
@@ -770,6 +770,45 @@ ImageFileChangeTree.prototype.calculateDimensions_ = function(container) {
 };
 
 
+/**
+ * Updates the dimensions of the tree.
+ */
+ImageFileChangeTree.prototype.updateDimensions_ = function() {
+    var container = this.container_;
+    var dimensions = this.calculateDimensions_(container);
+
+    var w = dimensions.w;
+    var h = dimensions.h;
+    var m = dimensions.m;
+
+    // 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([h, 100]);
+    vis.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
+
+    this.barWidth_ = dimensions.bw;
+    this.barHeight_ = dimensions.bh;
+  
+    return dimensions;
+};
+
+
+/**
+ * Redraws the image change tree to fit the new size.
+ */
+ImageFileChangeTree.prototype.notifyResized = function() {
+  this.updateDimensions_();
+  this.update_(this.root_);
+};
+
+
 /**
  * Draws the tree.
  */
@@ -950,6 +989,7 @@ ImageFileChangeTree.prototype.update_ = function(source) {
 
   // Enter any new nodes at the parent's previous position.
   nodeEnter.append("svg:rect")
+      .attr("class", "main-rect")
       .attr("y", -barHeight / 2)
       .attr("height", barHeight)
       .attr("width", barWidth)
@@ -962,8 +1002,7 @@ ImageFileChangeTree.prototype.update_ = function(source) {
       .text(function(d) { return d.name; });
 
   var body = nodeEnter.append('svg:foreignObject')
-      .attr("x", function(d) { return d.kind ? barWidth - 18 : 0; })
-      .attr("y", -10)
+      .attr("class", "fo")
       .attr("width", 18)
       .attr("height", barHeight)
       .append('xhtml:body');
@@ -987,6 +1026,15 @@ ImageFileChangeTree.prototype.update_ = function(source) {
 
   // TODO: remove if full animation.
   node.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });
+
+  node.select('.main-rect')
+      .attr("y", -barHeight / 2)
+      .attr("height", barHeight)
+      .attr("width", barWidth)
+
+  node.select('.fo')
+      .attr("x", function(d) { return d.kind ? barWidth - 18 : 0; })
+      .attr("y", -10)
   
   node.select('.node-icon')
       .html(function(d) {

static/partials/image-view.html

@@ -87,7 +87,7 @@
 
     <!-- Tree view -->
     <div class="tab-pane" id="tree">
-      <div id="changes-tree-container" class="changes-container"></div>
+      <div id="changes-tree-container" class="changes-container" onresize="tree && tree.notifyResized()"></div>
     </div>
   </div>