diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js index 6da83da4..a658aec6 100644 --- a/lib/timeline/Range.js +++ b/lib/timeline/Range.js @@ -122,29 +122,31 @@ Range.prototype.setRange = function(start, end, animate) { var duration = typeof animate === 'number' ? animate : 500; var initTime = new Date().valueOf(); var anyChanged = false; + function next() { if (!me.props.touch.dragging) { var now = new Date().valueOf(); var time = now - initTime; - var s = util.easeInOutQuad(time, initStart, _start, duration); - var e = util.easeInOutQuad(time, initEnd, _end, duration); + var done = time > duration; + var s = done ? start : util.easeInOutQuad(time, initStart, _start, duration); + var e = done ? end : util.easeInOutQuad(time, initEnd, _end, duration); + changed = me._applyRange(s, e); anyChanged = anyChanged || changed; if (changed) { me.body.emitter.emit('rangechange', {start: new Date(s), end: new Date(e)}); } - if (time <= duration) { - // animate with as high as possible frame rate, leave 20 ms in between - // each to prevent the browser from blocking - me.animateTimer = setTimeout(next, 20); - } - else { - // done + if (done) { if (anyChanged) { me.body.emitter.emit('rangechanged', {start: new Date(me.start), end: new Date(me.end)}); } } + else { + // animate with as high as possible frame rate, leave 20 ms in between + // each to prevent the browser from blocking + me.animateTimer = setTimeout(next, 20); + } } } diff --git a/lib/timeline/component/LineGraph.js b/lib/timeline/component/LineGraph.js index 7a0a9fe1..39602822 100644 --- a/lib/timeline/component/LineGraph.js +++ b/lib/timeline/component/LineGraph.js @@ -121,17 +121,6 @@ function LineGraph(body, options) { this.setOptions(options); this.groupsUsingDefaultStyles = [0]; - this.body.emitter.on("rangechange",function() { - if (me.lastStart != 0) { - var offset = me.body.range.start - me.lastStart; - var range = me.body.range.end - me.body.range.start; - if (me.width != 0) { - var rangePerPixelInv = me.width/range; - var xOffset = offset * rangePerPixelInv; - me.svg.style.left = (-me.width - xOffset) + "px"; - } - } - }); this.body.emitter.on("rangechanged", function() { me.lastStart = me.body.range.start; me.svg.style.left = util.option.asSize(-me.width); @@ -502,6 +491,7 @@ LineGraph.prototype._updateUngrouped = function() { * @return {boolean} Returns true if the component is resized */ LineGraph.prototype.redraw = function() { + console.log('redraw') var resized = false; this.svg.style.height = ('' + this.options.graphHeight).replace('px','') + 'px'; @@ -525,9 +515,23 @@ LineGraph.prototype.redraw = function() { this.svg.style.width = util.option.asSize(3*this.width); this.svg.style.left = util.option.asSize(-this.width); } + if (zoomed == true || this.abortedGraphUpdate == true) { this._updateGraph(); } + else { + // move the whole svg while dragging + if (this.lastStart != 0) { + var offset = this.body.range.start - this.lastStart; + var range = this.body.range.end - this.body.range.start; + if (this.width != 0) { + var rangePerPixelInv = this.width/range; + var xOffset = offset * rangePerPixelInv; + this.svg.style.left = (-this.width - xOffset) + "px"; + } + } + + } this.legendLeft.redraw(); this.legendRight.redraw();