vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Have the image tree update itself in response to resizing

Browse source
This commit is contained in:
Joseph Schorr 2013-10-17 15:20:27 -04:00
parent 7c289beba5
commit ce458f93ef
1 changed files with 75 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
static/js/graphing.js
View file

@ -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_);
};