make transformations retargatable for declaritive

diff --git a/dirty.html b/dirty.html
index 139b5d97cdbad32272a86662f011c9eb0292e157..0c6ef9a029c144af61f9f9bb5fdc05daa3e84c39 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -161,17 +161,22 @@ function getColor(t) {
 // })
 
 var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
-var anim = mover.animate(new SVG.Spring(500, 10)).move(500, 500)
+var anim = mover.animate(new SVG.Spring(500, 10))
 
 let date = +new Date
 SVG.on(document, 'mousemove', function (e) {
-  if (+new Date - date > 50) {
-    date = +new Date
-  } else {
-    return
-  }
-  var p = mover.point(e.pageX - 1000, e.pageY - 1000)
-  anim.transform({px: p.x, py: p.y})
+  // if (+new Date - date > 50) {
+  //   date = +new Date
+  // } else {
+  //   return
+  // }
+
+  //var p = mover.point(e.pageX, e.pageY)
+  var p = mover.doc().point(e.clientX, e.clientY)
+  //var p = {x: e.pageX, y: e.pageY}
+  //console.log(p)
+  anim.transform({px: p.x-100, py: p.y-100})
+  //anim.center(p.x, p.y)
 })
 
 // var timeline = new SVG.Timeline().pause()
@@ -204,30 +209,36 @@ SVG.on(document, 'mousemove', function (e) {
 // r.step(-300) // should be 0.9s
 
 
-// var timer = 0
-// SVG('svg').viewbox(-300, -300, 600, 600)
-// let rec1 = SVG('<rect>').addTo('svg')
-//   .size(100, 100)
-//   //.transform({translateX: -50, translateY: -50})
-// rec1.timeline().source(() => {
-//   timer += 2
-//   document.querySelector('#absolute span').textContent = timer
-//   return timer
-// })
+var timer = 0
+SVG('svg').viewbox(-150, -150, 1000, 1000)
+let rec1 = SVG('<rect>').addTo('svg')
+  .size(100, 100)
+  //.transform({translateX: -50, translateY: -50})
+rec1.timeline().source(() => {
+  timer += 2
+  document.querySelector('#absolute span').textContent = timer
+  return timer
+})
 
-// var runner = rec1
-//   // .animate(100).attr('fill', '#fff')
-//   //.animate().transform({rotate: -45, origin: [50, 50]})
-//   .animate(200)
-//   .transform({
-//     rotate: 320,
-//     origin: [200, 200],
-//   }, true)
-//
-//   rec1.animate(150, 150, 'absolute')
-//     .transform({
-//       scale:2
-//     })
+var runner = rec1
+  // .animate(100).attr('fill', '#fff')
+  //.animate().transform({rotate: -45, origin: [50, 50]})
+  .animate(200)
+  .transform({
+    rotate: 320,
+    //origin: [200, 200],
+  }, true)
+
+  rec1.animate(150, 150, 'absolute')
+    .transform({
+      scale:2
+    })
+
+    // .animate(400, 0, 'absolute')
+    // .transform({
+    //   rotate: 360,
+    //   //origin: [200, 200],
+    // }, true)
 
   // .animate(500, 0)
   // .transform({scale:2})

diff --git a/src/runner.js b/src/runner.js
index 9bb1aa636d537d98b86e6690fd67b92834da787e..44bc39e581cc4e9e9f9a5cb986c8854f6d7a12cf 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -49,7 +49,6 @@ SVG.Runner = SVG.invent({
 
     // Save transforms applied to this runner
     this.transforms = new SVG.Matrix()
-    this._transformsRunning = true
 
     // Looping variables
     this._haveReversed = false
@@ -157,10 +156,11 @@ SVG.Runner = SVG.invent({
     These methods allow us to attach basic functions to the runner directly
     */
 
-    queue: function (initFn, runFn) {
+    queue: function (initFn, runFn, isTransform) {
       this._queue.push({
         initialiser: initFn || SVG.void,
         runner: runFn || SVG.void,
+        isTransform: !!isTransform,
         initialised: false,
         finished: false,
       })
@@ -364,6 +364,7 @@ SVG.Runner = SVG.invent({
 
     // Save a morpher to the morpher list so that we can retarget it later
     _rememberMorpher: function (method, morpher) {
+      if (method == 'transform' && !this._isDeclarative) return
       this._history[method] = {
         morpher: morpher,
         caller: this._queue[this._queue.length - 1],
@@ -373,6 +374,7 @@ SVG.Runner = SVG.invent({
     // Try to set the target for a morpher if the morpher exists, otherwise
     // do nothing and return false
     _tryRetarget: function (method, target) {
+      if (method == 'transform' && !this._isDeclarative) return false
       if(this._history[method]) {
         this._history[method].morpher.to(target)
         this._history[method].caller.finished = false
@@ -482,10 +484,9 @@ function mergeTransforms () {
 
   // Merge any two transformations in a row that are done
   let lastRunner = null
-  let lastIndex = null
   runners.forEach((runner, i) => {
 
-    if (i != 0 && runner.done && lastRunner.done) {
+    if (lastRunner && runner.done && lastRunner.done) {
       delete runners[lastRunner.id]
       runners[i] = {
         transforms: runner.transforms.lmultiply(lastRunner.transforms),
@@ -496,54 +497,24 @@ function mergeTransforms () {
 
     lastRunner = runner
   })
-
-  // // Try to merge any adjacent transforms into a single transform
-  // for (let i = runners.length; --i;) {
-  //
-  //   let runner = runners[i]
-  //   let lastRunner = runners[i-1]
-  //   if (!runner.done || !lastRunner.done) continue
-  //
-  //   runners.splice(i-1, 2, {
-  //     transforms: runner.transforms.lmultiply(lastRunner.transforms),
-  //     done: true,
-  //   })
-  // }
 }
 
 SVG.extend(SVG.Element, {
-  //
-  // clearTransforms: function (currentRunner) {
-  //
-  //   let runners = this._transformationRunners
-  //   for (let i = 0, len = runners.length; i < len; ++i) {
-  //     let runner = runners[i]
-  //
-  //     // if we hit the current runner
-  //     if (runner == currentRunner) {
-  //
-  //       // update the runners on the element to only use its current matrix and
-  //       // and all runners which come after the current runner + the current
-  //       this._transformationRunners = runners.slice(i)
-  //       break
-  //     }
-  //
-  //     runners[i]._transformsRunning = false
-  //   }
-  // },
-
   _clearTransformRunnersBefore: function (currentRunner) {
-    this._transformationRunners = this._transformationRunners.filter((runner) => {
-      return runner.id >= currentRunner.id
+
+    this._transformationRunners.forEach((runner, i, arr) => {
+      if (runner.id < currentRunner.id) {
+
+        runner._queue = runner._queue.filter((item) => {
+          return !item.isTransform
+        })
+
+        delete arr[i]
+      }
     })
   },
 
   addRunner: function (runner) {
-    // let runners = this._transformationRunners
-    // if (!runners.includes(runner)) {
-    //   runners.push(runner)
-    // }
-
     this._transformationRunners[runner.id] = runner
 
     SVG.Animator.transform_frame(
@@ -557,18 +528,6 @@ SVG.extend(SVG.Element, {
       this._frameId = SVG.Element.frameId++
     }
   },
-
-  _currentTransform: function (r) {
-
-    var index = this._transformationRunners.indexOf(r)
-    if(index < 0) {
-      return this._baseTransform
-    }
-
-    var transforms = this._transformationRunners.slice(0, this._transformationRunners.indexOf(r)+1).map(el => el.transforms)
-
-    return reduceTransform(transforms, this._baseTransform)
-  }
 })
 
 SVG.Element.frameId = 0
@@ -633,6 +592,9 @@ SVG.extend(SVG.Runner, {
   // 4. Now you get the delta matrix as a result: D = F * inv(M)
 
   transform: function (transforms, relative, affine) {
+    if (this._tryRetarget('transform', transforms)) {
+      return this
+    }
 
     // Parse the parameters
     var isMatrix = transforms.a != null
@@ -662,12 +624,15 @@ SVG.extend(SVG.Runner, {
       morpher = new SVG.Morphable.ObjectBag(formatTransforms({}))
         .to(formatTransforms(transforms))
         .stepper(this._stepper)
-      return this.queue(function() {
+
+      this.queue(function() {
         this.element().addRunner(this)
       }, function (pos) {
-        this.addTransform(new SVG.Matrix(morpher.at(pos).valueOf()))
+        this.addTransform(new SVG.Matrix(morpher.at(pos).valueOf()), true)
         return morpher.done()
-      })
+      }, true)
+
+      this._rememberMorpher('transform', morpher)
       return this
     }
 
@@ -685,6 +650,7 @@ SVG.extend(SVG.Runner, {
       : SVG.Morphable.TransformBag
 
     morpher = new SVG.Morphable().type(morphType)
+    morpher.to(transforms)
 
     morpher.stepper(this._stepper)
 
@@ -694,27 +660,25 @@ SVG.extend(SVG.Runner, {
 
       // If we have an absolute transform, it needs to over-ride any other
       // tranformations that are available on the element
-      if (!relative) {
-
+      if (!relative && !this._isDeclarative) {
         // Deactivate all transforms that have run so far if we are absolute
         element._clearTransformRunnersBefore(this)
-        currentBase = new SVG.Matrix(element)
-        morpher.from(currentBase).to(transforms)
       }
 
       // Define the starting point for the morpher
-      let startMatrix = new SVG.Matrix(relative ? null : element)
+      let startMatrix = new SVG.Matrix(relative ? undefined : element)
       morpher.from(startMatrix)
 
     }, function (pos) {
 
-      if (!this._transformsRunning) return
       if (!relative) this.clearTransform()
       var matrix = morpher.at(pos)
       this.addTransform(matrix)
       return morpher.done()
 
-    })
+    }, true)
+
+    this._rememberMorpher('transform', morpher)
 
     return this
   },