Browse Source

fixed relative height change on resize of browser as well as horizontal snapping when dragging window size. Improved consistancy with component

v3_develop
Alex de Mulder 10 years ago
parent
commit
907cbd2a1c
2 changed files with 849 additions and 837 deletions
  1. +812
    -806
      dist/vis.js
  2. +37
    -31
      lib/timeline/component/LineGraph.js

+ 812
- 806
dist/vis.js
File diff suppressed because it is too large
View File


+ 37
- 31
lib/timeline/component/LineGraph.js View File

@ -143,7 +143,7 @@ function LineGraph(body, options) {
this.COUNTER = 0; this.COUNTER = 0;
this.body.emitter.on('rangechanged', function() { this.body.emitter.on('rangechanged', function() {
me.lastStart = me.body.range.start; me.lastStart = me.body.range.start;
me.svg.style.left = util.option.asSize(-me.width);
me.svg.style.left = util.option.asSize(-me.props.width);
me.redraw.call(me,true); me.redraw.call(me,true);
}); });
@ -192,7 +192,7 @@ LineGraph.prototype._create = function(){
*/ */
LineGraph.prototype.setOptions = function(options) { LineGraph.prototype.setOptions = function(options) {
if (options) { if (options) {
var fields = ['sampling','defaultGroup','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
var fields = ['sampling','defaultGroup','height','graphHeight','yAxisOrientation','style','barChart','dataAxis','sort','groups'];
if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) { if (options.graphHeight === undefined && options.height !== undefined && this.body.domProps.centerContainer.height !== undefined) {
this.autoSizeSVG = true; this.autoSizeSVG = true;
} }
@ -543,44 +543,61 @@ LineGraph.prototype._updateUngrouped = function() {
LineGraph.prototype.redraw = function(forceGraphUpdate) { LineGraph.prototype.redraw = function(forceGraphUpdate) {
var resized = false; var resized = false;
this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
if (this.lastWidth === undefined && this.width || this.lastWidth != this.width) {
resized = true;
// calculate actual size and position
this.props.width = this.dom.frame.offsetWidth;
this.props.height = this.body.domProps.centerContainer.height;
// update the graph if there is no lastWidth or with, used for the initial draw
if (this.lastWidth === undefined && this.props.width) {
forceGraphUpdate = true;
} }
// check if this component is resized // check if this component is resized
resized = this._isResized() || resized; resized = this._isResized() || resized;
// check whether zoomed (in that case we need to re-stack everything) // check whether zoomed (in that case we need to re-stack everything)
var visibleInterval = this.body.range.end - this.body.range.start; var visibleInterval = this.body.range.end - this.body.range.start;
var zoomed = (visibleInterval != this.lastVisibleInterval) || (this.width != this.lastWidth); // we get this from the range changed event
var zoomed = (visibleInterval != this.lastVisibleInterval);
this.lastVisibleInterval = visibleInterval; this.lastVisibleInterval = visibleInterval;
this.lastWidth = this.width;
// calculate actual size and position
this.width = this.dom.frame.offsetWidth;
// the svg element is three times as big as the width, this allows for fully dragging left and right // the svg element is three times as big as the width, this allows for fully dragging left and right
// without reloading the graph. the controls for this are bound to events in the constructor // without reloading the graph. the controls for this are bound to events in the constructor
if (resized == true) { if (resized == true) {
this.svg.style.width = util.option.asSize(3*this.width);
this.svg.style.left = util.option.asSize(-this.width);
this.svg.style.width = util.option.asSize(3*this.props.width);
this.svg.style.left = util.option.asSize(-this.props.width);
if ((this.options.height + '').indexOf("%") != -1) {
this.autoSizeSVG = true;
}
}
// update the height of the graph on each redraw of the graph.
if (this.autoSizeSVG == true) {
if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
}
this.autoSizeSVG = false;
}
else {
this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px';
} }
// zoomed is here to ensure that animations are shown correctly. // zoomed is here to ensure that animations are shown correctly.
if (zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
resized = resized || this._updateGraph();
if (resized == true || zoomed == true || this.abortedGraphUpdate == true || forceGraphUpdate == true) {
resized = this._updateGraph() || resized;
} }
else { else {
// move the whole svg while dragging // move the whole svg while dragging
if (this.lastStart != 0) { if (this.lastStart != 0) {
var offset = this.body.range.start - this.lastStart; var offset = this.body.range.start - this.lastStart;
var range = this.body.range.end - this.body.range.start; var range = this.body.range.end - this.body.range.start;
if (this.width != 0) {
var rangePerPixelInv = this.width/range;
if (this.props.width != 0) {
var rangePerPixelInv = this.props.width/range;
var xOffset = offset * rangePerPixelInv; var xOffset = offset * rangePerPixelInv;
this.svg.style.left = (-this.width - xOffset) + 'px';
this.svg.style.left = (-this.props.width - xOffset) + 'px';
} }
} }
} }
this.legendLeft.redraw(); this.legendLeft.redraw();
@ -597,22 +614,13 @@ LineGraph.prototype.redraw = function(forceGraphUpdate) {
LineGraph.prototype._updateGraph = function () { LineGraph.prototype._updateGraph = function () {
// reset the svg elements // reset the svg elements
DOMutil.prepareElements(this.svgElements); DOMutil.prepareElements(this.svgElements);
if (this.width != 0 && this.itemsData != null) {
if (this.props.width != 0 && this.itemsData != null) {
var group, i; var group, i;
var preprocessedGroupData = {}; var preprocessedGroupData = {};
var processedGroupData = {}; var processedGroupData = {};
var groupRanges = {}; var groupRanges = {};
var changeCalled = false; var changeCalled = false;
// update the height of the graph on each redraw of the graph.
if (this.autoSizeSVG == true) {
if (this.options.graphHeight != this.body.domProps.centerContainer.height + 'px') {
this.options.graphHeight = this.body.domProps.centerContainer.height + 'px';
this.svg.style.height = this.body.domProps.centerContainer.height + 'px';
}
this.autoSizeSVG = false;
}
// getting group Ids // getting group Ids
var groupIds = []; var groupIds = [];
for (var groupId in this.groups) { for (var groupId in this.groups) {
@ -866,7 +874,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
} }
changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled; changeCalled = this._toggleAxisVisiblity(yAxisLeftUsed , this.yAxisLeft) || changeCalled;
changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled; changeCalled = this._toggleAxisVisiblity(yAxisRightUsed, this.yAxisRight) || changeCalled;
if (yAxisRightUsed == true && yAxisLeftUsed == true) { if (yAxisRightUsed == true && yAxisLeftUsed == true) {
this.yAxisLeft.drawIcons = true; this.yAxisLeft.drawIcons = true;
this.yAxisRight.drawIcons = true; this.yAxisRight.drawIcons = true;
@ -875,7 +882,6 @@ LineGraph.prototype._updateYAxis = function (groupIds, groupRanges) {
this.yAxisLeft.drawIcons = false; this.yAxisLeft.drawIcons = false;
this.yAxisRight.drawIcons = false; this.yAxisRight.drawIcons = false;
} }
this.yAxisRight.master = !yAxisLeftUsed; this.yAxisRight.master = !yAxisLeftUsed;
if (this.yAxisRight.master == false) { if (this.yAxisRight.master == false) {
@ -944,7 +950,7 @@ LineGraph.prototype._convertXcoordinates = function (datapoints) {
var toScreen = this.body.util.toScreen; var toScreen = this.body.util.toScreen;
for (var i = 0; i < datapoints.length; i++) { for (var i = 0; i < datapoints.length; i++) {
xValue = toScreen(datapoints[i].x) + this.width;
xValue = toScreen(datapoints[i].x) + this.props.width;
yValue = datapoints[i].y; yValue = datapoints[i].y;
extractedData.push({x: xValue, y: yValue}); extractedData.push({x: xValue, y: yValue});
} }
@ -974,7 +980,7 @@ LineGraph.prototype._convertYcoordinates = function (datapoints, group) {
} }
for (var i = 0; i < datapoints.length; i++) { for (var i = 0; i < datapoints.length; i++) {
xValue = toScreen(datapoints[i].x) + this.width;
xValue = toScreen(datapoints[i].x) + this.props.width;
yValue = Math.round(axis.convertValue(datapoints[i].y)); yValue = Math.round(axis.convertValue(datapoints[i].y));
extractedData.push({x: xValue, y: yValue}); extractedData.push({x: xValue, y: yValue});
} }

Loading…
Cancel
Save