From: Ulrich-Matthias Schäfer Date: Wed, 7 Nov 2018 21:42:38 +0000 (+0100) Subject: clone() does not insert the clone into the dom anymore, added beziere() and steps... X-Git-Tag: 3.0.0~50 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=dec70426b32ccf3979046e1637174b66bfdd1a8d;p=svg.js.git clone() does not insert the clone into the dom anymore, added beziere() and steps() to generate easing functions --- diff --git a/CHANGELOG.md b/CHANGELOG.md index 12a14c4..6013e0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: - added `precision()` method to round numeric element attributes -> __TODO!__ - added a linter during the npm build process - added `npm build:dev` to let you develop without getting too annoyed +- added `beziere()` and `steps()` to generate easing functions ### Removed - removed `SVG.Array.split()` function @@ -70,6 +71,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http: - The whole lib is now splitted into es6 modules (#875) - `Element.svg()` now can can replace the current node, can export the children of a node and can take an export modifier to change/replace the exported nodes - `ungroup()` now breaks off one container and not more +- `clone()` does not add the clone to the dom anymore ### Fixed - fixed a bug in clipping and masking where empty nodes persists after removal -> __TODO!__ diff --git a/dist/svg.js b/dist/svg.js index 5e1d68d..7a9a297 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens * @license MIT * -* BUILT: Wed Nov 07 2018 16:59:53 GMT+0100 (GMT+01:00) +* BUILT: Wed Nov 07 2018 22:39:24 GMT+0100 (GMT+01:00) */; var SVG = (function () { 'use strict'; @@ -1380,8 +1380,7 @@ var SVG = (function () { } else if (val == null) { // act as a getter if the first and only argument is not an object val = this.node.getAttribute(attr); - return val == null ? attrs[attr] // FIXME: do we need to return defaults? - : isNumber.test(val) ? parseFloat(val) : val; + return val == null ? attrs[attr] : isNumber.test(val) ? parseFloat(val) : val; } else { // convert image fill and stroke to patterns if (attr === 'fill' || attr === 'stroke') { @@ -1487,15 +1486,11 @@ var SVG = (function () { }, { key: "clone", - value: function clone(parent) { + value: function clone() { // write dom data to the dom so the clone can pickup the data this.writeDataToDom(); // clone element and assign new id - var clone = assignNewId(this.node.cloneNode(true)); // insert the clone in the given parent or after myself - - if (parent) parent.add(clone); // FIXME: after might not be available here - else this.after(clone); - return clone; + return assignNewId(this.node.cloneNode(true)); } // Iterates over all children and invokes a given block }, { @@ -2677,8 +2672,67 @@ var SVG = (function () { '<': function _(pos) { return -Math.cos(pos * Math.PI / 2) + 1; }, - bezier: function bezier(t0, x0, t1, x1) { - return function (t) {// TODO: FINISH + bezier: function bezier(x1, y1, x2, y2) { + // see https://www.w3.org/TR/css-easing-1/#cubic-bezier-algo + return function (t) { + if (t < 0) { + if (x1 > 0) { + return y1 / x1 * t; + } else if (x2 > 0) { + return y2 / x2 * t; + } else { + return 0; + } + } else if (t > 1) { + if (x2 < 1) { + return (1 - y2) / (1 - x2) * t + (y2 - x2) / (1 - x2); + } else if (x1 < 1) { + return (1 - y1) / (1 - x1) * t + (y1 - x1) / (1 - x1); + } else { + return 1; + } + } else { + return 3 * t * Math.pow(1 - t, 2) * y1 + 3 * Math.pow(t, 2) * (1 - t) * y2 + Math.pow(t, 3); + } + }; + }, + // https://www.w3.org/TR/css-easing-1/#step-timing-function-algo + steps: function steps(_steps) { + var stepPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'end'; + // deal with "jump-" prefix + stepPosition = stepPosition.split('-').reverse()[0]; + var jumps = _steps; + + if (stepPosition === 'none') { + --jumps; + } else if (stepPosition === 'both') { + ++jumps; + } // The beforeFlag is essentially useless + + + return function (t) { + var beforeFlag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + // Step is called currentStep in referenced url + var step = Math.floor(t * _steps); + var jumping = t * step % 1 === 0; + + if (stepPosition === 'start' || stepPosition === 'both') { + ++step; + } + + if (beforeFlag && jumping) { + --step; + } + + if (t >= 0 && step < 0) { + step = 0; + } + + if (t <= 1 && step > jumps) { + step = jumps; + } + + return step / jumps; }; } }; @@ -3137,7 +3191,7 @@ var SVG = (function () { } } catch (e) { try { - var clone = this.clone(parser().svg).show(); + var clone = this.clone().addTo(parser().svg).show(); box = cb(clone.node); clone.remove(); } catch (e) { @@ -3937,7 +3991,6 @@ var SVG = (function () { value: function _step() { // If the timeline is paused, just do nothing if (this._paused) return; // Get the time delta from the last time and update the time - // TODO: Deal with window.blur window.focus to pause animations var time = this._timeSource(); diff --git a/spec/spec/element.js b/spec/spec/element.js index c209f34..07fe624 100644 --- a/spec/spec/element.js +++ b/spec/spec/element.js @@ -677,15 +677,6 @@ describe('Element', function() { expect(clone.get(0).id()).not.toBe(group.get(0).id()) expect(clone.get(1).id()).not.toBe(group.get(1).id()) }) - it('inserts the clone after the cloned element', function() { - clone = rect.clone() - expect(rect.next()).toBe(clone) - }) - it('inserts the clone in the specified parent', function() { - var g = draw.group() - clone = rect.clone(g) - expect(g.get(0)).toBe(clone) - }) it('deep copies over dom data', function() { group.dom = {'foo':'bar'} rect.dom = {'foo':'baz'} diff --git a/src/animation/Controller.js b/src/animation/Controller.js index 1716545..537a075 100644 --- a/src/animation/Controller.js +++ b/src/animation/Controller.js @@ -21,9 +21,65 @@ export let easing = { '<>': function (pos) { return -Math.cos(pos * Math.PI) / 2 + 0.5 }, '>': function (pos) { return Math.sin(pos * Math.PI / 2) }, '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 }, - bezier: function (t0, x0, t1, x1) { + bezier: function (x1, y1, x2, y2) { + // see https://www.w3.org/TR/css-easing-1/#cubic-bezier-algo return function (t) { - // TODO: FINISH + if (t < 0) { + if (x1 > 0) { + return y1 / x1 * t + } else if (x2 > 0) { + return y2 / x2 * t + } else { + return 0 + } + } else if (t > 1) { + if (x2 < 1) { + return (1 - y2) / (1 - x2) * t + (y2 - x2) / (1 - x2) + } else if (x1 < 1) { + return (1 - y1) / (1 - x1) * t + (y1 - x1) / (1 - x1) + } else { + return 1 + } + } else { + return 3 * t * (1 - t) ** 2 * y1 + 3 * t ** 2 * (1 - t) * y2 + t ** 3 + } + } + }, + // https://www.w3.org/TR/css-easing-1/#step-timing-function-algo + steps: function (steps, stepPosition = 'end') { + // deal with "jump-" prefix + stepPosition = stepPosition.split('-').reverse()[0] + + let jumps = steps + if (stepPosition === 'none') { + --jumps + } else if (stepPosition === 'both') { + ++jumps + } + + // The beforeFlag is essentially useless + return (t, beforeFlag = false) => { + // Step is called currentStep in referenced url + let step = Math.floor(t * steps) + const jumping = (t * step) % 1 === 0 + + if (stepPosition === 'start' || stepPosition === 'both') { + ++step + } + + if (beforeFlag && jumping) { + --step + } + + if (t >= 0 && step < 0) { + step = 0 + } + + if (t <= 1 && step > jumps) { + step = jumps + } + + return step / jumps } } } diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js index 619e50a..3a731cb 100644 --- a/src/animation/Timeline.js +++ b/src/animation/Timeline.js @@ -183,7 +183,6 @@ export default class Timeline { if (this._paused) return // Get the time delta from the last time and update the time - // TODO: Deal with window.blur window.focus to pause animations var time = this._timeSource() var dtSource = time - this._lastSourceTime var dtTime = this._speed * dtSource + (this._time - this._lastStepTime) diff --git a/src/elements/Dom.js b/src/elements/Dom.js index 16aefd8..e31c15c 100644 --- a/src/elements/Dom.js +++ b/src/elements/Dom.js @@ -56,19 +56,12 @@ export default class Dom extends EventTarget { } // Clone element - clone (parent) { + clone () { // write dom data to the dom so the clone can pickup the data this.writeDataToDom() // clone element and assign new id - let clone = assignNewId(this.node.cloneNode(true)) - - // insert the clone in the given parent or after myself - if (parent) parent.add(clone) - // FIXME: after might not be available here - else this.after(clone) - - return clone + return assignNewId(this.node.cloneNode(true)) } // Iterates over all children and invokes a given block diff --git a/src/modules/core/attr.js b/src/modules/core/attr.js index ed34dc9..7c9e2c1 100644 --- a/src/modules/core/attr.js +++ b/src/modules/core/attr.js @@ -30,7 +30,7 @@ export default function attr (attr, val, ns) { } else if (val == null) { // act as a getter if the first and only argument is not an object val = this.node.getAttribute(attr) - return val == null ? defaults[attr] // FIXME: do we need to return defaults? + return val == null ? defaults[attr] : isNumber.test(val) ? parseFloat(val) : val } else { diff --git a/src/types/Box.js b/src/types/Box.js index b51415f..21672b1 100644 --- a/src/types/Box.js +++ b/src/types/Box.js @@ -112,7 +112,7 @@ function getBox (cb) { } } catch (e) { try { - let clone = this.clone(parser().svg).show() + let clone = this.clone().addTo(parser().svg).show() box = cb(clone.node) clone.remove() } catch (e) {