fix origin for relative transformations

diff --git a/dirty.html b/dirty.html
index 7942f2d25d0f04e99c6c91a204f7ca636f499900..3b9168a34c9e71ca18e6927a0432405db1db49af 100644 (file)
--- a/dirty.html
+++ b/dirty.html
@@ -178,9 +178,26 @@ function getColor(t) {
 //   anim.transform({px: p.x - 100, py: p.y - 100})
 //   //anim.center(p.x, p.y)
 // })
-
+/*
 let canvas = SVG('#canvas')
 
+let rectangle = canvas.rect(100, 200).move(100, 0)
+
+let bbox = rectangle.bbox()
+
+var timer = 0
+rectangle.timeline().source(() => {
+  timer += 2
+  document.querySelector('#absolute span').textContent = timer
+  return timer
+})
+rectangle.animate().transform({
+  rotate: 90,
+  origin: [bbox.cx, bbox.cy]
+})*/
+
+
+let canvas = SVG('#canvas')
 // Make the green rectange
 canvas.rect(200, 400).move(200, 400)
   .attr('opacity', 0.3)
@@ -191,8 +208,17 @@ let a = canvas.rect(200, 400).move(200, 400)
   .attr('opacity', 0.3)
   .addClass('pink')
   .transform({ px: 100, py: 500, origin: 'top-left' })
-  .animate()
-  .transform({ rotate: 500, origin: 'center' })
+
+
+  var timer = 0
+  a.timeline().source(() => {
+    timer += 1
+    document.querySelector('#absolute span').textContent = timer
+    return timer
+  })
+
+a.animate()
+  .transform({ translate: [200, 200], rotate: 500, origin: 'center' }, true)
 
 // Put an ellipse where we expect the object to be
 canvas.ellipse(30, 30).center(100, 500)
@@ -229,7 +255,7 @@ canvas.ellipse(30, 30).center(100, 500)
 // r.step(1200) // should be 0.1s
 // r.step(-300) // should be 0.9s
 
-
+/*
 var timer = 0
 SVG('svg').viewbox(-150, -150, 1000, 1000)
 let rec1 = SVG('<rect>').addTo('svg')
@@ -254,7 +280,7 @@ var runner = rec1
     .transform({
       scale:2
     })
-
+*/
     // .animate(400, 0, 'absolute')
     // .transform({
     //   rotate: 360,

diff --git a/src/helpers.js b/src/helpers.js
index 3981c947f3146aeb1b508d9ac3d76241e701f5a6..9159b4f1623c2f74341e13cfa8c62128ac774200 100644 (file)
--- a/src/helpers.js
+++ b/src/helpers.js
@@ -260,7 +260,7 @@ function formatTransforms (o) {
   }
 }
 
-function getOrigin (transforms, element) {
+function getOrigin (o, element) {
   // Allow origin or around as the names
   origin = o.around == null ? o.origin : o.around
 
@@ -268,7 +268,7 @@ function getOrigin (transforms, element) {
   if ( typeof origin === 'string' || origin == null ) {
     // Get the bounding box of the element with no transformations applied
     const string = (origin || 'center').toLowerCase().trim()
-    const { height, width, x, y } = this.bbox()
+    const { height, width, x, y } = element.bbox()
 
     // Set the bounds eg : "bottom-left", "Top right", "middle" etc...
     const ox = o.ox || string.includes('left') ? x

diff --git a/src/runner.js b/src/runner.js
index b137dba6dfd5d4246003da1bebaf3888e4ba1060..c4fb41837639ada8bd457502b0bc72a5dd247569 100644 (file)
--- a/src/runner.js
+++ b/src/runner.js
@@ -592,7 +592,7 @@ 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)) {
+    if (this._isDeclarative && this._tryRetarget('transform', transforms)) {
       return this
     }
 
@@ -640,14 +640,12 @@ SVG.extend(SVG.Runner, {
         transforms.origin = origin
         let sanitisedTransforms = formatTransforms(transforms)
 
-        morpher.from({origin})
+        morpher.from(formatTransforms({origin}))
 
-        var from = morpher.from()
-        var indexOfOffset = from.indexOf('offset')
+        var to = morpher.to()
+        var indexOfOffset = to.indexOf('ox')
         if(indexOfOffset > -1) {
-          let to = morpher.to()
-          to[indexOfOffset+1] = origin
-          to[indexOfOffset] = 'origin'
+          to.splice(indexOfOffset, 4, 'ox', origin[0], 'oy', origin[1])
         }
 
         this.element().addRunner(this)
@@ -656,7 +654,7 @@ SVG.extend(SVG.Runner, {
         return morpher.done()
       }, true)
 
-      this._rememberMorpher('transform', morpher)
+      this._isDeclarative && this._rememberMorpher('transform', morpher)
       return this
     }
 
@@ -702,7 +700,7 @@ SVG.extend(SVG.Runner, {
 
     }, true)
 
-    this._rememberMorpher('transform', morpher)
+    this._isDeclarative && this._rememberMorpher('transform', morpher)
 
     return this
   },