add register for insertBefore and insertAfter

svgdotjs · Nov 20, 2018 · efc383d · efc383d
1 parent 2b37d7b
commit efc383d
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 66 deletions.
diff --git a/dirty.html b/dirty.html
@@ -102,41 +102,45 @@
 //   }
 // }
 
-//SVG.defaults.timeline.ease = '-'
-//
-// var r = new SVG.Runner(1000)
-// var t = new SVG.Timeline()
-// r.schedule(t, 200)
-//   .animate(500).loop(5, true, 100)
-//   .animate(600, 200, 'absolute')
-//   .animate(600, 300)
-//   .animate(600, 300, 'now')
-//   .animate(1000, 0, 'absolute').loop(6, true)
-//
-// var canvas = SVG('svg')
-// var schedule = t.schedule()
-//
-// schedule.forEach((s, i) => {
-//   var rect = canvas.rect(s.duration / 10, 25)
-//     .move(100 + s.start/10, 100 + i*30)
-//     .attr('fill', '#777')
-//
-//   s.runner.element(rect)
-//     .attr('fill', getColor(i*0.1))
-//
-//   // if (i===0)
-//   //   s.runner.during(console.log)
-// })
-//
-// var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black').clone()
-// canvas.line(100, 300, 800, 300).attr('stroke', 'black')
-//
+let canvas = SVG('#canvas')
+
+canvas.attr('viewBox', null)
+
+SVG.defaults.timeline.ease = '-'
+
+var r = new SVG.Runner(1000)
+var t = new SVG.Timeline()
+r.schedule(t, 200)
+  .animate(500).loop(5, true, 100)
+  .animate(600, 200, 'absolute')
+  .animate(600, 300)
+  .animate(600, 300, 'now')
+  .animate(1000, 0, 'absolute').loop(6, true)
+
+var schedule = t.schedule()
+
+schedule.forEach((s, i) => {
+  var rect = canvas.rect(s.duration / 10, 25)
+    .move(100 + s.start/10, 100 + i*30)
+    .attr('fill', '#000')
+
+  s.runner.element(rect)
+    .attr('fill', getColor(i*0.1))
+
+  // if (i===0)
+  //   s.runner.during(console.log)
+})
+
+var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black')
+mover.clone().insertAfter(mover)
+canvas.line(100, 300, 800, 300).attr('stroke', 'black')
+
 // t.on('time', function (e) {
 //   mover.x(100 + e.detail/10)
 // })
-//
-//
-// console.log(schedule)
+
+
+console.log(schedule)
 
 // var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
 // bla.animate().size(220, 200).queue(null, console.log)
@@ -202,7 +206,7 @@
 })*/
 
 //
-let canvas = SVG('#canvas')
+
 
 // SVG('#absolute').on('input slide', function (e) {
 //   var val = e.target.value
@@ -248,32 +252,51 @@
 //
 // a.animate(1000, 500).move(100, 100).animate(1000, 500).move(500, 400)
 
-let gradient = canvas.gradient('radial', function(gradient) {
-  gradient.stop(0, '#f00')
-  gradient.stop(1, '#ff0')
-})
 
-let gradientEarth = canvas.gradient('linear', function(gradient) {
-  gradient.stop(0, '#00f')
-  gradient.stop(1, '#0f0')
-})
 
-let sun = canvas.circle(200).center(500, 300).attr({ fill: gradient })
 
-let earth = canvas.circle(100).center(1000, 300).attr({fill: gradientEarth})
+/*  FUZZYMS PLANETS!! */
+// let canvas = SVG('#canvas')
+// let gradient = canvas.gradient('radial', function(gradient) {
+//   gradient.stop(0, '#f00')
+//   gradient.stop(1, '#ff0')
+// })
+//
+// let gradientEarth = canvas.gradient('linear', function(gradient) {
+//   gradient.stop(0, '#00f')
+//   gradient.stop(1, '#0f0')
+// })
+//
+// let sun = canvas.circle(200).center(500, 300).attr({ fill: gradient })
+//
+// let earth = canvas.circle(100).center(1000, 300).attr({fill: gradientEarth})
+//
+// let moon = canvas.circle(50).center(1200, 300).attr({fill: '#ffa'})
+//
+// earth.animate(10000).loop().ease('-')
+//   .transform({rotate: 360, origin: [500, 300]}, true)
+//   .transform({rotate: 720, origin: 'center'}, true)
+//   .on('step', (e) => {
+//   //  console.log(e)
+//   })
+//
+// moon.animate(10000).loop().ease('-')
+//   .transform({rotate: 360, origin: [500, 300]}, true)
+//   .transform({rotate: 1080, origin: [1000, 300]}, true)
+
+
+
+
+
+
+
+
+
+
+
 
-let moon = canvas.circle(50).center(1200, 300).attr({fill: '#ffa'})
 
-earth.animate(10000).loop().ease('-')
-  .transform({rotate: 360, origin: [500, 300]}, true)
-  .transform({rotate: 720, origin: 'center'}, true)
-  .on('step', (e) => {
-  //  console.log(e)
-  })
 
-moon.animate(10000).loop().ease('-')
-  .transform({rotate: 360, origin: [500, 300]}, true)
-  .transform({rotate: 1080, origin: [1000, 300]}, true)
 /**
  * FUZZYS EXAMPLE
  */

diff --git a/dist/svg.js b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Mon Nov 19 2018 21:40:15 GMT+0100 (GMT+01:00)
+* BUILT: Tue Nov 20 2018 16:59:18 GMT+0100 (GMT+01:00)
 */;
 var SVG = (function () {
   'use strict';
@@ -595,6 +595,14 @@ var SVG = (function () {
     this.parent().add(element, i + 1);
     return this;
   }
+  function insertBefore(element) {
+    element = makeInstance(element);
+    element.before(this);
+  }
+  function insertAfter(element) {
+    element = makeInstance(element);
+    element.after(this);
+  }
   registerMethods('Dom', {
     siblings: siblings,
     position: position,
@@ -605,7 +613,9 @@ var SVG = (function () {
     front: front,
     back: back,
     before: before,
-    after: after
+    after: after,
+    insertBefore: insertBefore,
+    insertAfter: insertAfter
   });
 
   // Parse unit value
@@ -5046,7 +5056,7 @@ var SVG = (function () {
         // FIXME: how to sort? maybe by runner id?
         if (runner == null) {
           return this._runners.map(makeSchedule).sort(function (a, b) {
-            return a.start - b.start || a.duration - b.duration;
+            return a.runner.id - b.runner.id; // return (a.start - b.start) || (a.duration - b.duration)
           });
         }
 
@@ -5200,8 +5210,8 @@ var SVG = (function () {
         this._lastSourceTime = time; // Update the time
 
         this._time += dtTime;
-        this._lastStepTime = this._time; // this.fire('time', this._time)
-        // Run all of the runners directly
+        this._lastStepTime = this._time;
+        this.fire('time', this._time); // Run all of the runners directly
 
         var runnersLeft = false;
 

diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js
@@ -38,16 +38,11 @@ export default class Timeline extends EventTarget {
     this._lastStepTime = 0
   }
 
-  /**
-   *
-   */
-
   // schedules a runner on the timeline
   schedule (runner, delay, when) {
-    // FIXME: how to sort? maybe by runner id?
     if (runner == null) {
       return this._runners.map(makeSchedule).sort(function (a, b) {
-        return (a.start - b.start) || (a.duration - b.duration)
+        return a.runner.id - b.runner.id
       })
     }
 
@@ -189,7 +184,7 @@ export default class Timeline extends EventTarget {
     // Update the time
     this._time += dtTime
     this._lastStepTime = this._time
-    // this.fire('time', this._time)
+    this.fire('time', this._time)
 
     // Run all of the runners directly
     var runnersLeft = false
@@ -238,6 +233,7 @@ export default class Timeline extends EventTarget {
     if (runnersLeft) {
       this._nextFrame = Animator.frame(this._step.bind(this))
     } else {
+      this.fire('finished')
       this._nextFrame = null
     }
     return this

diff --git a/src/modules/optional/arrange.js b/src/modules/optional/arrange.js
@@ -107,5 +107,16 @@ export function insertAfter (element) {
 }
 
 registerMethods('Dom', {
-  siblings, position, next, prev, forward, backward, front, back, before, after
+  siblings,
+  position,
+  next,
+  prev,
+  forward,
+  backward,
+  front,
+  back,
+  before,
+  after,
+  insertBefore,
+  insertAfter
 })