diff --git a/static/js/graphing.js b/static/js/graphing.js index b5c1110fa..b068ed792 100644 --- a/static/js/graphing.js +++ b/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. - var width = Math.max(document.getElementById(container).clientWidth, this.maxWidth_ * DEPTH_WIDTH); - 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]; - + // Save the container. + this.container_ = container; + // Create the tree and all its components. var tree = d3.layout.tree() - .separation(function() { return 2; }) - .size([w, h]); + .separation(function() { return 2; }); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.x, d.y]; }); - var vis = d3.select("#" + container).append("svg:svg") - .attr("width", w + m[1] + m[3]) - .attr("height", h + m[0] + m[2]) - .attr("class", "image-tree") - .append("svg:g") - .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); + var rootSvg = d3.select("#" + container).append("svg:svg") + .attr("class", "image-tree"); + + var vis = rootSvg.append("svg:g"); 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_); };