Worked towards setting the origin on each frame with linear algebra

This commit attempts to modify the origin on each frame, but it seems that we have some kind of bug that we need to fix first
author: Saivan <savian@me.com> 2018-07-04 00:44:46 +1000
committer: Saivan <savian@me.com> 2018-07-04 00:44:46 +1000
commit: 4688ab0d651547cb018c8f00590ddb18de40c6a1 (patch)
tree: 97b0287e3cccd76b4f881e616646b793bd1008a8
parent: 5a1be483befaa644fd996b7be74ef59655160f95 (diff)
download: svg.js-4688ab0d651547cb018c8f00590ddb18de40c6a1.tar.gz
svg.js-4688ab0d651547cb018c8f00590ddb18de40c6a1.zip
3 files changed, 120 insertions, 56 deletions
diff --git a/dirty.html b/dirty.html
index 1d4601c..1670e9c 100644
--- a/dirty.html
+++ b/dirty.html
@@ -20,7 +20,7 @@
 </head>
 <body style="background-color: #c7c7ff">
 
-<div id="absolute"><label>Absolute: <input type="range" min="0" max="90" step="0.01"></slider></label><span></span></div>
+<div id="absolute"><label>Absolute: <input type="range" min="0" max="1" step="0.01"></slider></label><span></span></div>
 <div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div>
 
 <!-- Making the svg -->
@@ -208,15 +208,41 @@ let canvas = SVG('#canvas')
 
 SVG('#absolute').on('input slide', function (e) {
   var val = e.target.value
+
   canvas.clear()
-  canvas.ellipse(20, 20)
-  let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5)
-  re.clone()
-    .transform({rotate: 45, skew: 30}, true)
-
-  re.clone()
-    .transform({rotate: 45, skew: 30}, true)
-    .transform({rotate: val}, true)
+  // canvas.ellipse(20, 20)
+  // let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5)
+  // re.clone()
+  //   .transform({rotate: 45, skew: 30}, true)
+  //
+  // re.clone()
+  //   .transform({
+  //     rotate: 45, skew: 30, /*translate: [150, 140], */
+  //   }, true)
+  //   .transform({rotate: val, origin: 'bottom-right'}, true)
+  //
+  // re.clone()
+  //   .transform({rotate: 45, skew: 30}, true)
+  //   .transform({rotate: val, origin: 'bottom-right'}, true)
+  //   .transform({skew}, true)
+  let a = canvas.rect(200, 400).move(500, 400)
+    .attr('opacity', 0.3)
+    .addClass('pink')
+    .transform({ px: 100, py: 500, origin: 'top-left' })
+
+
+  var timer = 0
+  a.timeline().source(() => {
+    timer += 1
+    document.querySelector('#absolute span').textContent = timer
+    return timer
+  })
+
+  let obj = { rotate: val * 180, origin: 'center', translate: [300 * val, 0] }
+  let obj2 = { rotate: -val * 180, origin: 'center' }
+
+  a.clone() // startPosition
+  a.clone().transform(obj, true).transform(obj2, true) // endPosition
 })
 
 
@@ -230,28 +256,36 @@ SVG('#absolute').on('input slide', function (e) {
 //   .addClass('green')
 
 // Make the pink rectangle
-// let a = canvas.rect(200, 400).move(500, 400)
-//   .attr('opacity', 0.3)
-//   .addClass('pink')
-//   .transform({ px: 100, py: 500, origin: 'top-left' })
-//
-//
-// var timer = 0
-// a.timeline().source(() => {
-//   timer += 1
-//   document.querySelector('#absolute span').textContent = timer
-//   return timer
-// })
-//
-//
-// let obj = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] }
-// let obj2 = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] }
-//
-// a.clone() // startPosition
-// a.clone().transform(obj, true).transform(obj2, true) // endPosition
-// //a.animate(new SVG.Spring(50, 30)).transform(obj) // animation
-// a.animate(300).transform(obj, true).transform(obj2, true) // animation
-//
+let a = canvas.rect(200, 400).move(500, 400)
+  .attr('opacity', 0.3)
+  .addClass('pink')
+  .transform({ tx: 100, ty: 500, origin: 'top-left' })
+
+canvas.ellipse(20, 20).center(700, 1100)
+
+
+var timer = 0
+a.timeline().source(() => {
+  timer += 1
+  document.querySelector('#absolute span').textContent = timer
+  return timer
+})
+
+
+let el = canvas.ellipse(20, 20)
+window.moveit = function (x, y) {
+  el.move(x, y)
+}
+
+
+let obj = { rotate: 180, origin: 'center', translate: [300, 0] }
+let obj2 = { rotate: -180, origin: 'center' }
+
+a.clone() // startPosition
+a.clone().transform(obj, true).transform(obj2, true) // endPosition
+//a.animate(new SVG.Spring(50, 30)).transform(obj) // animation
+a.animate(300).transform(obj, true).transform(obj2, true) // animation
+
 //
 // // Put an ellipse where we expect the object to be
 // canvas.ellipse(30, 30).center(100, 500)
diff --git a/src/helpers.js b/src/helpers.js
index 755beba..108fbfc 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -260,23 +260,6 @@ function formatTransforms (o) {
   }
 }
 
-/* TODO: KILL
-
-
-  1. Transform the origin by figuring out the delta
-
-    - At the start, we had:
-
-      let Sinv = new SVG.Matrix(element).inverse()
-      let origin = getOrigin(element)
-
-    - At a particular frame we have:
-
-      let C = Matrix(element)
-      let newOrigin = origin.transform(S.inv).transform(C)
-
-*/
-
 
 function getOrigin (o, element) {
   // Allow origin or around as the names
@@ -298,6 +281,7 @@ function getOrigin (o, element) {
       : y + height / 2
 
     // Find the new center in the transformed coordinates
+    console.log(element.attr('transform'))
     const matrix = new SVG.Matrix(element)
     const {x: tx , y: ty} = new SVG.Point(bx, by).transform(matrix)
 
diff --git a/src/runner.js b/src/runner.js
index 92f41a9..20cc03e 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -482,12 +482,12 @@ function mergeTransforms () {
     .reduce((last, curr) => last.lmultiply(curr))
   this.transform(netTransform)
 
+  this._currentMatrix = runners[0]
+
   // Merge any two transformations in a row that are done
   let lastRunner = null
   runners.forEach((runner, i) => {
-
     if (lastRunner && runner.done && lastRunner.done) {
-      console.log(lastRunner, runner)
       delete runners[runner.id+1]
       runners[lastRunner.id+1] = {
         transforms: runner.transforms.lmultiply(lastRunner.transforms),
@@ -498,6 +498,10 @@ function mergeTransforms () {
 
     lastRunner = runner
   })
+
+  if (!lastRunner) {
+    this._frameId = null
+  }
 }
 
 SVG.extend(SVG.Element, {
@@ -512,12 +516,18 @@ SVG.extend(SVG.Element, {
           })
         }
 
-
         delete arr[i]
       }
     })
   },
 
+  _currentTransform (current) {
+    return this._transformationRunners
+      .filter((runner) => runner.id <= current.id)
+      .map(runner => runner.transforms)
+      .reduce((last, curr) => last.lmultiply(curr))
+  },
+
   addRunner: function (runner) {
     this._transformationRunners[runner.id+1] = runner
 
@@ -632,24 +642,60 @@ SVG.extend(SVG.Runner, {
     // - true, true with ObjectBag
     var morpher
     var origin
+    var startTransform
     var current
+    var element
     if(relative && !isMatrix) {
       morpher = new SVG.Morphable().type(SVG.Morphable.ObjectBag)
         .stepper(this._stepper)
 
       this.queue(function() {
         if (origin == null) {
-          origin = getOrigin (transforms, this.element())
-          transforms.origin = origin
+          element = this.element()
+          let transformedOrigin = getOrigin (transforms, element)
+          origin = new SVG.Point(transformedOrigin)
+            .transform(new SVG.Matrix(element).inverse())
+
+          transforms.origin = [origin.x, origin.y]
           morpher.to(formatTransforms(transforms))
         }
 
         let from = current || {origin}
-
         morpher.from(formatTransforms(from))
-
         this.element().addRunner(this)
+
       }, function (pos) {
+
+        let currentMatrix = element._currentTransform(this)
+        //origin = getOrigin (transforms, element)
+        let {x, y} = origin.transform(currentMatrix)
+
+moveit(x, y)
+
+// console.log(currentMatrix.decompose(origin[0], origin[1]));
+
+
+        /*
+
+
+          1. Transform the origin by figuring out the delta
+
+            - At the start, we had:
+
+              let Sinv = new SVG.Matrix(element).inverse()
+              let origin = getOrigin(element)
+
+            - At a particular frame we have:
+
+              let C = Matrix(element)
+              let newOrigin = origin.transform(S.inv).transform(C)
+
+        */
+
+        let index = morpher._from.indexOf('ox')
+        morpher._from.splice(index, 4, 'ox', x, 'oy', y)
+        morpher._to.splice(index, 4, 'ox', x, 'oy', y)
+
         current = morpher.at(pos).valueOf()
         let matrix = new SVG.Matrix(current)
         this.addTransform(matrix)
@@ -678,7 +724,7 @@ SVG.extend(SVG.Runner, {
     morpher.to(transforms)
 
     this.queue(function() {
-      let element = this.element()
+      element = this.element()
       element.addRunner(this)
 
       if (!origin && affine) {
author	Saivan <savian@me.com>	2018-07-04 00:44:46 +1000
committer	Saivan <savian@me.com>	2018-07-04 00:44:46 +1000
commit	4688ab0d651547cb018c8f00590ddb18de40c6a1 (patch)
tree	97b0287e3cccd76b4f881e616646b793bd1008a8
parent	5a1be483befaa644fd996b7be74ef59655160f95 (diff)
download	svg.js-4688ab0d651547cb018c8f00590ddb18de40c6a1.tar.gz svg.js-4688ab0d651547cb018c8f00590ddb18de40c6a1.zip