From: Saivan <savian@me.com>
Date: Mon, 17 Sep 2018 04:50:56 +0000 (+1000)
Subject: Refactored the getOrigin helper to help fix the relative affine animations
X-Git-Tag: 3.0.0~60^2~15
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=a8373f5ee8902089d5ab3a915eb5a31b568d3728;p=svg.js.git

Refactored the getOrigin helper to help fix the relative affine animations

This commit refactors the getOrigin helper, in order to send the origin to the correct
space. The origin should be expressed in the space of the last animation.

Changes
=======
- Refactored the getOrigin helper
- Added a simple example to the dirty file to test multiple transformations
---

diff --git a/dirty.html b/dirty.html
index f7542e6..68a9aa8 100644
--- a/dirty.html
+++ b/dirty.html
@@ -305,40 +305,31 @@ let wait = 1000
 let rAnim = r.clone().attr('fill', '#f00').animate(wait).attr('fill', '#0f0')
 let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15))
 
-// // Move once
-// setTimeout(() => {
-//   let trans = {tx: 500, ty: 300}
-//   r.transform(trans, true)
-//   // rAnim.animate(wait, 0, 'start').transform(trans, true)
-//   rDecl.transform(trans, true)
-// }, wait)
-
-// Move again
-setTimeout(() => {
-  let transform = {
-    origin: 'top-left',
-    translate: [530, 250],
-    rotate: 300,
-    scale: 2,
-    shear: 1,
+let runTransformation = (transform) => {
+  return () => {
+    let relative = false
+    let affine = false
+    r.transform(transform, relative)
+    rAnim.animate(wait).transform(transform, relative, affine)
+    rDecl.transform(transform, relative, affine)
   }
-  let relative = true
-  let affine = false
-  r.transform(transform, relative)
-  rAnim.animate(wait).transform(transform, relative, affine)
-  rDecl.transform(transform, relative, affine)
-}, 0.1 * wait )
-
-
-// declaritive relative (affine/nonaffine)
-// declaritive absolute non affine
-// normal non affine relative
-
-//    D N
-// R
-// A
-
+}
 
+setTimeout(runTransformation({
+  origin: 'top-left',
+  translate: [530, 250],
+  rotate: 300,
+  scale: 2,
+  shear: 1,
+}), 0.1 * wait )
+
+// setTimeout(runTransformation({
+//   origin: 'top-left',
+//   translate: [530, 250],
+//   rotate: 800,
+//   scale: 2,
+//   shear: 1,
+// }), wait )
 
 
 
diff --git a/src/helpers.js b/src/helpers.js
index 44bce72..7860048 100644
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -249,7 +249,7 @@ function formatTransforms (o) {
 }
 
 
-function getOrigin (o, element, relative) {
+function getOrigin (o, element, inSpace) {
   // Allow origin or around as the names
   let origin = o.around == null ? o.origin : o.around
   let ox, oy
@@ -279,9 +279,8 @@ function getOrigin (o, element, relative) {
   }
 
   // Transform the origin into the current reference frame
-  if ( relative ) {
-    let matrix = new SVG.Matrix(element)
-    let originRelative = new SVG.Point( ox, oy ).transform(matrix)
+  if ( inSpace ) {
+    let originRelative = new SVG.Point( ox, oy ).transform(inSpace)
     ox = originRelative.x
     oy = originRelative.y
   }
diff --git a/src/runner.js b/src/runner.js
index 881efd4..298db36 100644
--- a/src/runner.js
+++ b/src/runner.js
@@ -653,9 +653,19 @@ SVG.extend(SVG.Runner, {
 
       // make sure element and origin is defined
       element = element || this.element()
-      origin = origin || getOrigin(transforms, element, relative)
 
-this.element().parent().ellipse(50, 50).center(...origin)
+      // TODO: Give me all matricies concatenated, up until this matrix,
+      // for example, if I have M = E D C B A
+      // If I'm about to run D, I want transform space to be
+      //    C * B * A
+      // Where C B and A are the current morpher targets
+      // The solution I've added here won't work if we interrupt an animation
+      // mid-animation (try turning on the second animation in dirty)
+
+      let transformSpace = relative
+        ? new SVG.Matrix(element)
+        : undefined
+      origin = origin || getOrigin(transforms, element, transformSpace)
 
       // add the runner to the element so it can merge transformations
       element.addRunner(this)