Merge pull request #966 from michAtEl/issue-964

bugfix for issue #964

3 files changed, 128 insertions, 1 deletions

diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html
index a1c6249..69c4728 100644
--- a/spec/SpecRunner.html
+++ b/spec/SpecRunner.html
@@ -105,5 +105,6 @@
   <script src="spec/animator.js"></script>
   <script src="spec/runner.js"></script>
   <script src="spec/queue.js"></script>
+  <script src="spec/timeline.js"></script>
 </body>
 </html>
diff --git a/spec/spec/timeline.js b/spec/spec/timeline.js
new file mode 100644
index 0000000..f28a85f
--- /dev/null
+++ b/spec/spec/timeline.js
@@ -0,0 +1,112 @@
+describe('timeline', function() {
+    describe('getEndTimeOfTimeline', function() {
+        it('returns 0 if no runners are scheduled', function() {
+            const timeline = new SVG.Timeline();
+            endTime = timeline.getEndTimeOfTimeline();
+            expect(endTime).toEqual(0);
+        })
+    })
+
+    describe('finish - issue #964', function() {
+        beforeEach(function() {
+            draw.clear()
+            draw.attr('viewBox', null)
+        })
+
+        it('places all elements at the right position - single runner', function() {
+            const timeline = new SVG.Timeline()
+
+            const rect = draw.rect(20,20)
+            rect.timeline(timeline)
+            rect.animate().move(100, 200)
+
+            timeline.finish()
+            expect(rect.x()).toEqual(100);
+            expect(rect.y()).toEqual(200);
+        })
+
+        it('places all elements at the right position - runner that finishes latest is in first position', function() {
+            const timeline = new SVG.Timeline()
+
+            const rect1 = draw.rect(10, 10)
+            rect1.timeline(timeline)
+            
+            const rect2 = draw.rect(10, 10)
+            rect2.timeline(timeline);
+
+            const rect3 = draw.rect(10, 10)
+            rect3.timeline(timeline);
+
+            rect1.animate(2000, 0, 'now').move(100, 200)
+            rect2.animate(1000, 0, 'now').move(100, 200)
+            rect3.animate(1000, 500, 'now').move(100, 200)
+
+            timeline.finish()
+
+            expect(rect1.x()).toEqual(100);
+            expect(rect1.y()).toEqual(200);
+
+            expect(rect2.x()).toEqual(100);
+            expect(rect2.y()).toEqual(200);
+
+            expect(rect3.x()).toEqual(100);
+            expect(rect3.y()).toEqual(200);
+        })
+
+        it('places all elements at the right position - runner that finishes latest is in middle position', function() {
+            const timeline = new SVG.Timeline()
+
+            const rect1 = draw.rect(10, 10)
+            rect1.timeline(timeline)
+            
+            const rect2 = draw.rect(10, 10)
+            rect2.timeline(timeline);
+
+            const rect3 = draw.rect(10, 10)
+            rect3.timeline(timeline);
+
+            rect2.animate(1000, 0, 'now').move(100, 200)
+            rect1.animate(2000, 0, 'now').move(100, 200)
+            rect3.animate(1000, 500, 'now').move(100, 200)
+
+            timeline.finish()
+
+            expect(rect1.x()).toEqual(100);
+            expect(rect1.y()).toEqual(200);
+
+            expect(rect2.x()).toEqual(100);
+            expect(rect2.y()).toEqual(200);
+
+            expect(rect3.x()).toEqual(100);
+            expect(rect3.y()).toEqual(200);
+        })
+
+        it('places all elements at the right position - runner that finishes latest is in last position', function() {
+            const timeline = new SVG.Timeline()
+
+            const rect1 = draw.rect(10, 10)
+            rect1.timeline(timeline)
+            
+            const rect2 = draw.rect(10, 10)
+            rect2.timeline(timeline);
+
+            const rect3 = draw.rect(10, 10)
+            rect3.timeline(timeline);
+
+            rect2.animate(1000, 0, 'now').move(100, 200)
+            rect3.animate(1000, 500, 'now').move(100, 200)
+            rect1.animate(2000, 0, 'now').move(100, 200)
+
+            timeline.finish()
+
+            expect(rect1.x()).toEqual(100);
+            expect(rect1.y()).toEqual(200);
+
+            expect(rect2.x()).toEqual(100);
+            expect(rect2.y()).toEqual(200);
+
+            expect(rect3.x()).toEqual(100);
+            expect(rect3.y()).toEqual(200);
+        })
+    })    
+})
\ No newline at end of file
diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js
index 66ba61f..d09deef 100644
--- a/src/animation/Timeline.js
+++ b/src/animation/Timeline.js
@@ -118,6 +118,20 @@ export default class Timeline extends EventTarget {
     return lastStartTime + lastDuration
   }
 
+  getEndTimeOfTimeline () {
+    let lastEndTime = 0
+    for (var i = 0; i < this._runners.length; i++) {
+      let runnerInfo = this._runners[i]
+      var duration = runnerInfo ? runnerInfo.runner.duration() : 0
+      var startTime = runnerInfo ? runnerInfo.start : 0
+      let endTime = startTime + duration
+      if (endTime > lastEndTime) {
+        lastEndTime = endTime
+      }
+    }
+    return lastEndTime
+  }
+
   // Makes sure, that after pausing the time doesn't jump
   updateTime () {
     if (!this.active()) {
@@ -145,7 +159,7 @@ export default class Timeline extends EventTarget {
 
   finish () {
     // Go to end and pause
-    this.time(this.getEndTime() + 1)
+    this.time(this.getEndTimeOfTimeline() + 1)
     return this.pause()
   }