From: Ulrich-Matthias Schäfer Date: Fri, 29 Jun 2018 08:31:11 +0000 (+0200) Subject: fix rotation issue and make relative declaritive work X-Git-Tag: 3.0.0~60^2~25 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=ea8767c90953f494d82acf9049fed11cbecfc51d;p=svg.js.git fix rotation issue and make relative declaritive work --- diff --git a/dirty.html b/dirty.html index 5e6e6e1..95227cf 100644 --- a/dirty.html +++ b/dirty.html @@ -218,11 +218,13 @@ a.timeline().source(() => { }) -let obj = { rotate: 100, shear:2, origin: [600, 600], translate: [100, 100] } +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) // endPosition -a.animate(new SVG.Spring(50, 30)).transform(obj) // animation +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 diff --git a/dist/svg.js b/dist/svg.js index bf890c5..0754226 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens * @license MIT * -* BUILT: Thu Jun 28 2018 23:06:53 GMT+0200 (GMT+02:00) +* BUILT: Fri Jun 29 2018 10:28:02 GMT+0200 (GMT+02:00) */; (function(root, factory) { @@ -1762,6 +1762,7 @@ SVG.Matrix = SVG.invent({ var lam = (a * c + b * d) / determinant var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a)) + // Use the translations let tx = e - cx + cx * ct * sx + cy * (lam * ct * sx - st * sy) let ty = f - cy + cx * st * sx + cy * (lam * st * sx + ct * sy) diff --git a/src/controller.js b/src/controller.js index 359dc9f..c2a9355 100644 --- a/src/controller.js +++ b/src/controller.js @@ -120,6 +120,7 @@ SVG.Spring = SVG.invent ({ extend: { step: function (current, target, dt, c) { + if (typeof current == 'string') return current c.done = dt == Infinity if(dt == Infinity) return target if(dt == 0) return current @@ -165,6 +166,7 @@ SVG.PID = SVG.invent ({ extend: { step: function (current, target, dt, c) { + if (typeof current == 'string') return current c.done = dt == Infinity if(dt == Infinity) return target diff --git a/src/morph.js b/src/morph.js index 022c51e..ff902ae 100644 --- a/src/morph.js +++ b/src/morph.js @@ -197,16 +197,11 @@ SVG.Morphable.ObjectBag = SVG.invent({ return } - var keys = [] + var entries = Object.entries(objOrArr || {}).sort((a, b) => { + return a[0] - b[0] + }) - for(var i in objOrArr) { - keys.push(i) - } - - for(var i = 0, len = keys.length; i < len; ++i) { - this.values.push(keys[i]) - this.values.push(objOrArr[keys[i]]) - } + this.values = entries.reduce((last, curr) => last.concat(curr), []) }, extend: { diff --git a/src/runner.js b/src/runner.js index 4c9dda2..92f41a9 100644 --- a/src/runner.js +++ b/src/runner.js @@ -487,11 +487,12 @@ function mergeTransforms () { runners.forEach((runner, i) => { if (lastRunner && runner.done && lastRunner.done) { - delete runners[lastRunner.id] - runners[i] = { + console.log(lastRunner, runner) + delete runners[runner.id+1] + runners[lastRunner.id+1] = { transforms: runner.transforms.lmultiply(lastRunner.transforms), done: true, - id: i, + id: lastRunner.id, } } @@ -505,9 +506,12 @@ SVG.extend(SVG.Element, { this._transformationRunners.forEach((runner, i, arr) => { if (runner.id < currentRunner.id) { - runner._queue = runner._queue.filter((item) => { - return !item.isTransform - }) + if (!runner.done) { + runner._queue = runner._queue.filter((item) => { + return !item.isTransform + }) + } + delete arr[i] } @@ -515,7 +519,7 @@ SVG.extend(SVG.Element, { }, addRunner: function (runner) { - this._transformationRunners[runner.id] = runner + this._transformationRunners[runner.id+1] = runner SVG.Animator.transform_frame( mergeTransforms.bind(this), this._frameId @@ -524,7 +528,11 @@ SVG.extend(SVG.Element, { _prepareRunner: function () { if (this._frameId == null) { - this._transformationRunners = [] + this._transformationRunners = [{ + transforms: new SVG.Matrix(this), + done: true, + id: -1 + }] this._frameId = SVG.Element.frameId++ } }, @@ -624,33 +632,27 @@ SVG.extend(SVG.Runner, { // - true, true with ObjectBag var morpher var origin + var current if(relative && !isMatrix) { - - morpher = new SVG.Morphable.ObjectBag(formatTransforms({})) - .to(formatTransforms(transforms)) + 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 + morpher.to(formatTransforms(transforms)) } - // Apply the origin to the transforms - transforms.origin = origin - let sanitisedTransforms = formatTransforms(transforms) + let from = current || {origin} - morpher.from(formatTransforms({origin})) - - var to = morpher.to() - var indexOfOffset = to.indexOf('ox') - if(indexOfOffset > -1) { - to.splice(indexOfOffset, 4, 'ox', origin[0], 'oy', origin[1]) - } + morpher.from(formatTransforms(from)) this.element().addRunner(this) }, function (pos) { - this.addTransform(new SVG.Matrix(morpher.at(pos).valueOf()), true) + current = morpher.at(pos).valueOf() + let matrix = new SVG.Matrix(current) + this.addTransform(matrix) return morpher.done() }, true) @@ -686,7 +688,7 @@ SVG.extend(SVG.Runner, { morpher.to(transforms) } - if (!relative && !this._isDeclarative) { + if (!relative) { // Deactivate all transforms that have run so far if we are absolute element._clearTransformRunnersBefore(this) } @@ -697,16 +699,20 @@ SVG.extend(SVG.Runner, { // make sure to add an origin if we morph affine if (affine) { startMatrix.origin = origin - } - // FIXME: correct the rotation so that it takes the shortest path - // GIVE ME (rCurrent) (rTarget) - to store the current/target angle - const possibilities = [rTarget - 360, rTarget, rTarget + 360] - const distances = possibilities.map( a => Math.abs(a - rCurrent) ) - const shortest = Math.min(...distances) - const index = distances.indexOf(shortest) - const target = possibilities[index] + // FIXME: correct the rotation so that it takes the shortest path + // GIVE ME (rCurrent) (rTarget) - to store the current/target angle + const rTarget = transforms.rotate || 0 + const rCurrent = startMatrix.decompose(origin[0], origin[1]).rotate + const possibilities = [rTarget - 360, rTarget, rTarget + 360] + const distances = possibilities.map( a => Math.abs(a - rCurrent) ) + const shortest = Math.min(...distances) + const index = distances.indexOf(shortest) + const target = possibilities[index] + + morpher._to.splice(3, 1, target) + } morpher.from(startMatrix) }, function (pos) {