From c40d7ffdfb95cb4db067463bb9259644aacbb876 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Thu, 1 Nov 2018 16:59:51 +0100 Subject: [PATCH] fix a few mistakes. Make sugar work. Roll back to childNodes because children is 10x slower --- bench/runner.html | 15 +- bench/tests/10000-rects.js | 191 ++++++++++----------- dist/svg.js | 337 +++++++++++++++++++++++++++++-------- dist/svg.min.js | 2 +- src/Element.js | 2 +- src/Parent.js | 14 +- src/elemnts-svg.js | 61 +++++-- src/methods.js | 12 +- src/sugar.js | 13 +- src/svg.js | 8 + 10 files changed, 441 insertions(+), 214 deletions(-) diff --git a/bench/runner.html b/bench/runner.html index b39c1df..5b6040c 100644 --- a/bench/runner.html +++ b/bench/runner.html @@ -38,23 +38,16 @@
- - - - - - - - - + + --> diff --git a/bench/tests/10000-rects.js b/bench/tests/10000-rects.js index 98b7ac9..d6ef518 100644 --- a/bench/tests/10000-rects.js +++ b/bench/tests/10000-rects.js @@ -17,102 +17,95 @@ SVG.bench.describe('Generate 10000 rects', function(bench) { }) }) - -SVG.bench.describe('Generate 10000 rects with fill', function(bench) { - bench.test('using SVG.js v2.5.3', function() { - for (var i = 0; i < 10000; i++) - bench.draw.rect(100,100).fill('#f06') - }) - bench.test('using vanilla js', function() { - for (var i = 0; i < 10000; i++) { - var rect = document.createElementNS(SVG.ns, 'rect') - rect.setAttributeNS(null, 'height', 100) - rect.setAttributeNS(null, 'width', 100) - rect.setAttributeNS(null, 'fill', '#f06') - bench.raw.appendChild(rect) - } - }) - bench.test('using Snap.svg v0.5.1', function() { - for (var i = 0; i < 10000; i++) - bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') - }) -}) - - -SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) { - bench.test('using SVG.js v2.5.3', function() { - for (var i = 0; i < 10000; i++) - bench.draw.rect(100,100).move(50,50).fill('#f06') - }) - bench.test('using vanilla js', function() { - for (var i = 0; i < 10000; i++) { - var rect = document.createElementNS(SVG.ns, 'rect') - rect.setAttributeNS(null, 'height', 100) - rect.setAttributeNS(null, 'width', 100) - rect.setAttributeNS(null, 'fill', '#f06') - rect.setAttributeNS(null, 'x', 50) - rect.setAttributeNS(null, 'y', 50) - bench.raw.appendChild(rect) - } - }) - bench.test('using Snap.svg v0.5.1', function() { - for (var i = 0; i < 10000; i++) - bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') - }) -}) - - -SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) { - bench.test('using SVG.js v2.5.3', function() { - for (var i = 0; i < 10000; i++) { - var g = bench.draw.gradient('linear', function(add) { - add.stop(0, '#000') - add.stop(0.25, '#f00') - add.stop(1, '#fff') - }) - - bench.draw.rect(100,100).fill(g) - } - }) - bench.test('using vanilla js', function() { - for (var i = 0; i < 10000; i++) { - var g = document.createElementNS(SVG.ns, 'linearGradient') - var stop = document.createElementNS(SVG.ns, 'stop') - stop.setAttributeNS(null, 'offset', '0%') - stop.setAttributeNS(null, 'color', '#000') - g.appendChild(stop) - stop = document.createElementNS(SVG.ns, 'stop') - stop.setAttributeNS(null, 'offset', '25%') - stop.setAttributeNS(null, 'color', '#f00') - g.appendChild(stop) - stop = document.createElementNS(SVG.ns, 'stop') - stop.setAttributeNS(null, 'offset', '100%') - stop.setAttributeNS(null, 'color', '#fff') - g.appendChild(stop) - bench.raw.appendChild(g) - - var rect = document.createElementNS(SVG.ns, 'rect') - rect.setAttributeNS(null, 'height', 100) - rect.setAttributeNS(null, 'width', 100) - rect.setAttributeNS(null, 'fill', '#f06') - bench.raw.appendChild(rect) - } - }) - bench.test('using Snap.svg v0.5.1', function() { - for (var i = 0; i < 10000; i++) { - var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff") - - bench.snap.rect(50, 50, 100, 100).attr({ - fill: g - }) - } - }) -}) - - - - - - - - +// +// SVG.bench.describe('Generate 10000 rects with fill', function(bench) { +// bench.test('using SVG.js v2.5.3', function() { +// for (var i = 0; i < 10000; i++) +// bench.draw.rect(100,100).fill('#f06') +// }) +// bench.test('using vanilla js', function() { +// for (var i = 0; i < 10000; i++) { +// var rect = document.createElementNS(SVG.ns, 'rect') +// rect.setAttributeNS(null, 'height', 100) +// rect.setAttributeNS(null, 'width', 100) +// rect.setAttributeNS(null, 'fill', '#f06') +// bench.raw.appendChild(rect) +// } +// }) +// bench.test('using Snap.svg v0.5.1', function() { +// for (var i = 0; i < 10000; i++) +// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') +// }) +// }) +// +// +// SVG.bench.describe('Generate 10000 rects with position and fill', function(bench) { +// bench.test('using SVG.js v2.5.3', function() { +// for (var i = 0; i < 10000; i++) +// bench.draw.rect(100,100).move(50,50).fill('#f06') +// }) +// bench.test('using vanilla js', function() { +// for (var i = 0; i < 10000; i++) { +// var rect = document.createElementNS(SVG.ns, 'rect') +// rect.setAttributeNS(null, 'height', 100) +// rect.setAttributeNS(null, 'width', 100) +// rect.setAttributeNS(null, 'fill', '#f06') +// rect.setAttributeNS(null, 'x', 50) +// rect.setAttributeNS(null, 'y', 50) +// bench.raw.appendChild(rect) +// } +// }) +// bench.test('using Snap.svg v0.5.1', function() { +// for (var i = 0; i < 10000; i++) +// bench.snap.rect(50, 50, 100, 100).attr('fill', '#f06') +// }) +// }) +// +// +// SVG.bench.describe('Generate 10000 rects with gradient fill', function(bench) { +// bench.test('using SVG.js v2.5.3', function() { +// for (var i = 0; i < 10000; i++) { +// var g = bench.draw.gradient('linear', function(add) { +// add.stop(0, '#000') +// add.stop(0.25, '#f00') +// add.stop(1, '#fff') +// }) +// +// bench.draw.rect(100,100).fill(g) +// } +// }) +// bench.test('using vanilla js', function() { +// for (var i = 0; i < 10000; i++) { +// var g = document.createElementNS(SVG.ns, 'linearGradient') +// var stop = document.createElementNS(SVG.ns, 'stop') +// stop.setAttributeNS(null, 'offset', '0%') +// stop.setAttributeNS(null, 'color', '#000') +// g.appendChild(stop) +// stop = document.createElementNS(SVG.ns, 'stop') +// stop.setAttributeNS(null, 'offset', '25%') +// stop.setAttributeNS(null, 'color', '#f00') +// g.appendChild(stop) +// stop = document.createElementNS(SVG.ns, 'stop') +// stop.setAttributeNS(null, 'offset', '100%') +// stop.setAttributeNS(null, 'color', '#fff') +// g.appendChild(stop) +// bench.raw.appendChild(g) +// +// var rect = document.createElementNS(SVG.ns, 'rect') +// rect.setAttributeNS(null, 'height', 100) +// rect.setAttributeNS(null, 'width', 100) +// rect.setAttributeNS(null, 'fill', '#f06') +// bench.raw.appendChild(rect) +// } +// }) +// bench.test('using Snap.svg v0.5.1', function() { +// for (var i = 0; i < 10000; i++) { +// var g = bench.snap.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff") +// +// bench.snap.rect(50, 50, 100, 100).attr({ +// fill: g +// }) +// } +// }) +// }) +// diff --git a/dist/svg.js b/dist/svg.js index 7c9bc18..44978bd 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -715,31 +715,61 @@ var SVG = (function () { var methods = {}; var constructors = {}; function registerMethods(name, m) { + if (Array.isArray(name)) { + var _iteratorNormalCompletion = true; + var _didIteratorError = false; + var _iteratorError = undefined; + + try { + for (var _iterator = name[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { + var _name = _step.value; + registerMethods(_name, m); + } + } catch (err) { + _didIteratorError = true; + _iteratorError = err; + } finally { + try { + if (!_iteratorNormalCompletion && _iterator.return != null) { + _iterator.return(); + } + } finally { + if (_didIteratorError) { + throw _iteratorError; + } + } + } + + return; + } + if (_typeof(name) == 'object') { var _arr = Object.entries(name); for (var _i = 0; _i < _arr.length; _i++) { var _arr$_i = _slicedToArray(_arr[_i], 2), - _name = _arr$_i[0], + _name2 = _arr$_i[0], _m = _arr$_i[1]; - registerMethods(_name, _m); + registerMethods(_name2, _m); } + + return; } methods[name] = Object.assign(methods[name] || {}, m); } function getMethodsFor(name) { - return methods[name]; + return methods[name] || {}; } // FIXME: save memory? function registerConstructor(name, setup) { constructors[name] = setup; } function getConstructor(name) { - return { + return constructors[name] ? { setup: constructors[name], name: name - }; + } : {}; } var Doc$1 = @@ -1053,7 +1083,7 @@ var SVG = (function () { } }); - var SVGNumber = + var SVGNumber$1 = /*#__PURE__*/ function () { // Initialize @@ -1178,16 +1208,16 @@ var SVG = (function () { } // Set width of element function width(width) { - return width == null ? this.rx() * 2 : this.rx(new SVGNumber(width).divide(2)); + return width == null ? this.rx() * 2 : this.rx(new SVGNumber$1(width).divide(2)); } // Set height of element function height(height) { - return height == null ? this.ry() * 2 : this.ry(new SVGNumber(height).divide(2)); + return height == null ? this.ry() * 2 : this.ry(new SVGNumber$1(height).divide(2)); } // Custom size function function size(width, height) { var p = proportionalSize$1(this, width, height); - return this.rx(new SVGNumber(p.width).divide(2)).ry(new SVGNumber(p.height).divide(2)); + return this.rx(new SVGNumber$1(p.width).divide(2)).ry(new SVGNumber$1(p.height).divide(2)); } var circled = /*#__PURE__*/Object.freeze({ @@ -1247,7 +1277,7 @@ var SVG = (function () { Element: { // Create circle element circle: function circle(size$$1) { - return this.put(new Circle()).radius(new SVGNumber(size$$1).divide(2)).move(0, 0); + return this.put(new Circle()).radius(new SVGNumber$1(size$$1).divide(2)).move(0, 0); } } }); @@ -1354,7 +1384,7 @@ var SVG = (function () { function size$1(width, height) { var p = proportionalSize$1(this, width, height); - return this.width(new SVGNumber(p.width)).height(new SVGNumber(p.height)); + return this.width(new SVGNumber$1(p.width)).height(new SVGNumber$1(p.height)); } // Clone element function clone(parent) { @@ -1380,6 +1410,10 @@ var SVG = (function () { return element; } // Add element to given container and return self + function addTo(parent) { + return makeInstance(parent).put(this); + } // Add element to given container and return container + function putIn(parent) { return makeInstance(parent).add(this); } // Get / set id @@ -1508,6 +1542,7 @@ var SVG = (function () { clone: clone, remove: remove, replace: replace, + addTo: addTo, putIn: putIn, id: id$1, inside: inside, @@ -1675,7 +1710,7 @@ var SVG = (function () { _createClass(Stop, [{ key: "update", value: function update(o) { - if (typeof o === 'number' || o instanceof SVGNumber) { + if (typeof o === 'number' || o instanceof SVGNumber$1) { o = { offset: arguments[0], color: arguments[1], @@ -1686,7 +1721,7 @@ var SVG = (function () { if (o.opacity != null) this.attr('stop-opacity', o.opacity); if (o.color != null) this.attr('stop-color', o.color); - if (o.offset != null) this.attr('offset', new SVGNumber(o.offset)); + if (o.offset != null) this.attr('offset', new SVGNumber$1(o.offset)); return this; } }]); @@ -1698,20 +1733,20 @@ var SVG = (function () { // FIXME: add to runner function from(x, y) { return (this._element || this).type === 'radialGradient' ? this.attr({ - fx: new SVGNumber(x), - fy: new SVGNumber(y) + fx: new SVGNumber$1(x), + fy: new SVGNumber$1(y) }) : this.attr({ - x1: new SVGNumber(x), - y1: new SVGNumber(y) + x1: new SVGNumber$1(x), + y1: new SVGNumber$1(y) }); } function to(x, y) { return (this._element || this).type === 'radialGradient' ? this.attr({ - cx: new SVGNumber(x), - cy: new SVGNumber(y) + cx: new SVGNumber$1(x), + cy: new SVGNumber$1(y) }) : this.attr({ - x2: new SVGNumber(x), - y2: new SVGNumber(y) + x2: new SVGNumber$1(x), + y2: new SVGNumber$1(y) }); } @@ -2010,7 +2045,7 @@ var SVG = (function () { if (typeof val === 'number') { - val = new SVGNumber(val); + val = new SVGNumber$1(val); } else if (Color.isColor(val)) { // ensure full hex color val = new Color(val); @@ -2774,7 +2809,7 @@ var SVG = (function () { return parser.nodes; } - var Point = + var Point$1 = /*#__PURE__*/ function () { // Initialize @@ -2837,7 +2872,7 @@ var SVG = (function () { Element: { // Get point point: function point(x, y) { - return new Point(x, y).transform(this.screenCTM().inverse()); + return new Point$1(x, y).transform(this.screenCTM().inverse()); } } }); @@ -3115,8 +3150,8 @@ var SVG = (function () { var result = []; - var p = new Point(); - var p0 = new Point(); + var p = new Point$1(); + var p0 = new Point$1(); var index = 0; var len = array.length; @@ -3433,7 +3468,7 @@ var SVG = (function () { _classCallCheck(this, Text); _this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, nodeOrNew$1('text', node), Text)); - _this.dom.leading = new SVGNumber(1.3); // store leading value for rebuilding + _this.dom.leading = new SVGNumber$1(1.3); // store leading value for rebuilding _this._rebuild = true; // enable automatic updating of dy values @@ -3538,7 +3573,7 @@ var SVG = (function () { } // act as setter - this.dom.leading = new SVGNumber(value); + this.dom.leading = new SVGNumber$1(value); return this.rebuild(); } // Rebuild appearance type @@ -3554,7 +3589,7 @@ var SVG = (function () { if (this._rebuild) { var self = this; var blankLineOffset = 0; - var dy = this.dom.leading * new SVGNumber(this.attr('font-size')); + var dy = this.dom.leading * new SVGNumber$1(this.attr('font-size')); this.each(function () { if (this.dom.newLined) { this.attr('x', self.attr('x')); @@ -3584,7 +3619,7 @@ var SVG = (function () { key: "setData", value: function setData(o) { this.dom = o; - this.dom.leading = new SVGNumber(o.leading || 1.3); + this.dom.leading = new SVGNumber$1(o.leading || 1.3); return this; } }]); @@ -3789,7 +3824,7 @@ var SVG = (function () { }); register(Use); - var Matrix = + var Matrix$1 = /*#__PURE__*/ function () { function Matrix() { @@ -3833,7 +3868,7 @@ var SVG = (function () { var t = Matrix.formatTransforms(o); var current = this; - var _transform = new Point(t.ox, t.oy).transform(current), + var _transform = new Point$1(t.ox, t.oy).transform(current), ox = _transform.x, oy = _transform.y; // Construct the resulting matrix @@ -3841,7 +3876,7 @@ var SVG = (function () { var transformer = new Matrix().translateO(t.rx, t.ry).lmultiplyO(current).translateO(-ox, -oy).scaleO(t.scaleX, t.scaleY).skewO(t.skewX, t.skewY).shearO(t.shear).rotateO(t.theta).translateO(ox, oy); // If we want the origin at a particular place, we force it there if (isFinite(t.px) || isFinite(t.py)) { - var origin = new Point(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px) + var origin = new Point$1(ox, oy).transform(transformer); // TODO: Replace t.px with isFinite(t.px) var dx = t.px ? t.px - origin.x : 0; var dy = t.py ? t.py - origin.y : 0; @@ -4229,16 +4264,16 @@ var SVG = (function () { var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY : isFinite(o.scale) ? o.scale * flipY : isFinite(o.scaleY) ? o.scaleY * flipY : flipY; var shear = o.shear || 0; var theta = o.rotate || o.theta || 0; - var origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY); + var origin = new Point$1(o.origin || o.around || o.ox || o.originX, o.oy || o.originY); var ox = origin.x; var oy = origin.y; - var position = new Point(o.position || o.px || o.positionX, o.py || o.positionY); + var position = new Point$1(o.position || o.px || o.positionX, o.py || o.positionY); var px = position.x; var py = position.y; - var translate = new Point(o.translate || o.tx || o.translateX, o.ty || o.translateY); + var translate = new Point$1(o.translate || o.tx || o.translateX, o.ty || o.translateY); var tx = translate.x; var ty = translate.y; - var relative = new Point(o.relative || o.rx || o.relativeX, o.ry || o.relativeY); + var relative = new Point$1(o.relative || o.rx || o.relativeX, o.ry || o.relativeY); var rx = relative.x; var ry = relative.y; // Populate all of the values @@ -4287,7 +4322,7 @@ var SVG = (function () { Element: { // Get current matrix ctm: function ctm() { - return new Matrix(this.node.getCTM()); + return new Matrix$1(this.node.getCTM()); }, // Get current screen matrix screenCTM: function screenCTM() { @@ -4299,10 +4334,10 @@ var SVG = (function () { var rect = this.rect(1, 1); var m = rect.node.getScreenCTM(); rect.remove(); - return new Matrix(m); + return new Matrix$1(m); } - return new Matrix(this.node.getScreenCTM()); + return new Matrix$1(this.node.getScreenCTM()); } } }); @@ -4345,7 +4380,7 @@ var SVG = (function () { var xMax = -Infinity; var yMin = Infinity; var yMax = -Infinity; - var pts = [new Point(this.x, this.y), new Point(this.x2, this.y), new Point(this.x, this.y2), new Point(this.x2, this.y2)]; + var pts = [new Point$1(this.x, this.y), new Point$1(this.x2, this.y), new Point$1(this.x, this.y2), new Point$1(this.x2, this.y2)]; pts.forEach(function (p) { p = p.transform(m); xMin = Math.min(xMin, p.x); @@ -4709,14 +4744,14 @@ var SVG = (function () { var type = _typeof(value); if (type === 'number') { - this.type(SVGNumber); + this.type(SVGNumber$1); } else if (type === 'string') { if (Color.isColor(value)) { this.type(Color); } else if (regex.delimiter.test(value)) { this.type(regex.pathLetters.test(value) ? PathArray : SVGArray); } else if (regex.numberAndUnit.test(value)) { - this.type(SVGNumber); + this.type(SVGNumber$1); } else { this.type(Morphable.NonMorphable); } @@ -4893,7 +4928,7 @@ var SVG = (function () { return _class3; }(); - var morphableTypes = [SVGNumber, Color, Box$1, Matrix, SVGArray, PointArray$1, PathArray, Morphable.NonMorphable, Morphable.TransformBag, Morphable.ObjectBag]; + var morphableTypes = [SVGNumber$1, Color, Box$1, Matrix$1, SVGArray, PointArray$1, PathArray, Morphable.NonMorphable, Morphable.TransformBag, Morphable.ObjectBag]; extend$1(morphableTypes, { to: function to(val, args) { return new Morphable().type(this.constructor).from(this.valueOf()).to(val, args); @@ -5205,7 +5240,7 @@ var SVG = (function () { // '<': function (pos) { return -Math.cos(pos * Math.PI / 2) + 1 } // } - var Runner = + var Runner$1 = /*#__PURE__*/ function () { function Runner(options) { @@ -5233,7 +5268,7 @@ var SVG = (function () { this._time = 0; this._last = 0; // Save transforms applied to this runner - this.transforms = new Matrix(); + this.transforms = new Matrix$1(); this.transformId = 1; // Looping variables this._haveReversed = false; @@ -5474,7 +5509,7 @@ var SVG = (function () { this._initialise(running); // clear the transforms on this runner so they dont get added again and again - this.transforms = new Matrix(); + this.transforms = new Matrix$1(); var converged = this._run(declarative ? dt : position); // this.fire('step', this) @@ -5608,7 +5643,7 @@ var SVG = (function () { }, { key: "clearTransform", value: function clearTransform() { - this.transforms = new Matrix(); + this.transforms = new Matrix$1(); return this; } }], [{ @@ -5644,10 +5679,10 @@ var SVG = (function () { return Runner; }(); - Runner.id = 0; + Runner$1.id = 0; var FakeRunner = function FakeRunner() { - var transforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Matrix(); + var transforms = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Matrix$1(); var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1; var done = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; @@ -5658,7 +5693,7 @@ var SVG = (function () { this.done = done; }; - extend$1([Runner, FakeRunner], { + extend$1([Runner$1, FakeRunner], { mergeWith: function mergeWith(runner) { return new FakeRunner(runner.transforms.lmultiply(this.transforms), runner.id); } @@ -5675,7 +5710,7 @@ var SVG = (function () { function mergeTransforms() { // Find the matrix to apply to the element and apply it var runners = this._transformationRunners.runners; - var netTransform = runners.map(getRunnerTransform).reduce(lmultiply, new Matrix()); + var netTransform = runners.map(getRunnerTransform).reduce(lmultiply, new Matrix$1()); this.transform(netTransform); this._transformationRunners.merge(); @@ -5769,9 +5804,9 @@ var SVG = (function () { registerMethods({ Element: { animate: function animate(duration, delay, when) { - var o = Runner.sanitise(duration, delay, when); + var o = Runner$1.sanitise(duration, delay, when); var timeline$$1 = this.timeline(); - return new Runner(o.duration).loop(o).element(this).timeline(timeline$$1).schedule(delay, when); + return new Runner$1(o.duration).loop(o).element(this).timeline(timeline$$1).schedule(delay, when); }, delay: function delay(by, when) { return this.animate(0, by, when); @@ -5789,7 +5824,7 @@ var SVG = (function () { // taken into account .filter(function (runner) { return runner.id <= current.id; - }).map(getRunnerTransform).reduce(lmultiply, new Matrix()); + }).map(getRunnerTransform).reduce(lmultiply, new Matrix$1()); }, addRunner: function addRunner(runner) { this._transformationRunners.add(runner); @@ -5798,13 +5833,13 @@ var SVG = (function () { }, _prepareRunner: function _prepareRunner() { if (this._frameId == null) { - this._transformationRunners = new RunnerArray().add(new FakeRunner(new Matrix(this))); + this._transformationRunners = new RunnerArray().add(new FakeRunner(new Matrix$1(this))); this._frameId = frameId++; } } } }); - extend$1(Runner, { + extend$1(Runner$1, { attr: function attr(a, v) { return this.styleAttr('attr', a, v); }, @@ -5830,7 +5865,7 @@ var SVG = (function () { return this; }, zoom: function zoom(level, point) { - var morpher = new Morphable(this._stepper).to(new SVGNumber(level)); + var morpher = new Morphable(this._stepper).to(new SVGNumber$1(level)); this.queue(function () { morpher = morpher.from(this.zoom()); }, function (pos) { @@ -5867,7 +5902,7 @@ var SVG = (function () { var isMatrix = isMatrixLike(transforms); affine = transforms.affine != null ? transforms.affine : affine != null ? affine : !isMatrix; // Create a morepher and set its type - var morpher = new Morphable().type(affine ? Morphable.TransformBag : Matrix).stepper(this._stepper); + var morpher = new Morphable().type(affine ? Morphable.TransformBag : Matrix$1).stepper(this._stepper); var origin; var element; var current; @@ -5878,7 +5913,7 @@ var SVG = (function () { // make sure element and origin is defined element = element || this.element(); origin = origin || getOrigin(transforms, element); - startTransform = new Matrix(relative ? undefined : element); // add the runner to the element so it can merge transformations + startTransform = new Matrix$1(relative ? undefined : element); // add the runner to the element so it can merge transformations element.addRunner(this); // Deactivate all transforms that have run so far if we are absolute @@ -5892,11 +5927,11 @@ var SVG = (function () { // on this runner. We are absolute. We dont need these! if (!relative) this.clearTransform(); - var _transform = new Point(origin).transform(element._currentTransform(this)), + var _transform = new Point$1(origin).transform(element._currentTransform(this)), x = _transform.x, y = _transform.y; - var target = new Matrix(_objectSpread({}, transforms, { + var target = new Matrix$1(_objectSpread({}, transforms, { origin: [x, y] })); var start = this._isDeclarative && current ? current : startTransform; @@ -5933,7 +5968,7 @@ var SVG = (function () { morpher.to(target); var affineParameters = morpher.at(pos); currentAngle = affineParameters.rotate; - current = new Matrix(affineParameters); + current = new Matrix$1(affineParameters); this.addTransform(current); return morpher.done(); } @@ -5969,7 +6004,7 @@ var SVG = (function () { return this._queueNumberDelta('dy', y); }, _queueNumberDelta: function _queueNumberDelta(method, to) { - to = new SVGNumber(to); // Try to change the target if we have this method already registerd + to = new SVGNumber$1(to); // Try to change the target if we have this method already registerd if (this._tryRetargetDelta(method, to)) return this; // Make a morpher and queue the animation @@ -6004,7 +6039,7 @@ var SVG = (function () { return this; }, _queueNumber: function _queueNumber(method, value) { - return this._queueObject(method, new SVGNumber(value)); + return this._queueObject(method, new SVGNumber$1(value)); }, // Animatable center x-axis cx: function cx(x) { @@ -6163,17 +6198,17 @@ var SVG = (function () { TextPath: TextPath, Tspan: Tspan, Use: Use, - SVGNumber: SVGNumber, + SVGNumber: SVGNumber$1, SVGArray: SVGArray, PathArray: PathArray, PointArray: PointArray$1, - Matrix: Matrix, - Point: Point, + Matrix: Matrix$1, + Point: Point$1, Box: Box$1, Color: Color, Morphable: Morphable, Queue: Queue, - Runner: Runner, + Runner: Runner$1, Timeline: Timeline, Controller: Controller, Ease: Ease, @@ -6334,7 +6369,7 @@ var SVG = (function () { } return matrix[transform[0]].apply(matrix, transform[1]); - }, new Matrix()); + }, new Matrix$1()); return matrix; } // add an element to another parent without changing the visual representation on the screen @@ -6353,7 +6388,7 @@ var SVG = (function () { function transform(o, relative) { // Act as a getter if no object was passed if (o == null || typeof o === 'string') { - var decomposed = new Matrix(this).decompose(); + var decomposed = new Matrix$1(this).decompose(); return decomposed[o] || decomposed; } @@ -6366,7 +6401,7 @@ var SVG = (function () { var cleanRelative = relative === true ? this : relative || false; - var result = new Matrix(cleanRelative).transform(o); + var result = new Matrix$1(cleanRelative).transform(o); return this.attr('transform', result); } registerMethods('Element', { @@ -6420,6 +6455,157 @@ var SVG = (function () { }); registerConstructor('Memory', setup$1); + var sugar = { + stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'], + fill: ['color', 'opacity', 'rule'], + prefix: function prefix(t, a) { + return a === 'color' ? t : t + '-' + a; + } // Add sugar for fill and stroke + + }; + ['fill', 'stroke'].forEach(function (m) { + var extension = {}; + var i; + + extension[m] = function (o) { + if (typeof o === 'undefined') { + return this; + } + + if (typeof o === 'string' || Color.isRgb(o) || o && typeof o.fill === 'function') { + this.attr(m, o); + } else { + // set all attributes from sugar.fill and sugar.stroke list + for (i = sugar[m].length - 1; i >= 0; i--) { + if (o[sugar[m][i]] != null) { + this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]]); + } + } + } + + return this; + }; + + registerMethods(['Element', 'Runner'], extension); + }); + registerMethods(['Element', 'Runner'], { + // Let the user set the matrix directly + matrix: function matrix(mat, b, c, d, e, f) { + // Act as a getter + if (mat == null) { + return new Matrix(this); + } // Act as a setter, the user can pass a matrix or a set of numbers + + + return this.attr('transform', new Matrix(mat, b, c, d, e, f)); + }, + // Map rotation to transform + rotate: function rotate(angle, cx, cy) { + return this.transform({ + rotate: angle, + ox: cx, + oy: cy + }, true); + }, + // Map skew to transform + skew: function skew(x, y, cx, cy) { + return arguments.length === 1 || arguments.length === 3 ? this.transform({ + skew: x, + ox: y, + oy: cx + }, true) : this.transform({ + skew: [x, y], + ox: cx, + oy: cy + }, true); + }, + shear: function shear(lam, cx, cy) { + return this.transform({ + shear: lam, + ox: cx, + oy: cy + }, true); + }, + // Map scale to transform + scale: function scale(x, y, cx, cy) { + return arguments.length === 1 || arguments.length === 3 ? this.transform({ + scale: x, + ox: y, + oy: cx + }, true) : this.transform({ + scale: [x, y], + ox: cx, + oy: cy + }, true); + }, + // Map translate to transform + translate: function translate(x, y) { + return this.transform({ + translate: [x, y] + }, true); + }, + // Map relative translations to transform + relative: function relative(x, y) { + return this.transform({ + relative: [x, y] + }, true); + }, + // Map flip to transform + flip: function flip(direction, around) { + var directionString = typeof direction === 'string' ? direction : isFinite(direction) ? 'both' : 'both'; + var origin = direction === 'both' && isFinite(around) ? [around, around] : direction === 'x' ? [around, 0] : direction === 'y' ? [0, around] : isFinite(direction) ? [direction, direction] : [0, 0]; + this.transform({ + flip: directionString, + origin: origin + }, true); + }, + // Opacity + opacity: function opacity(value) { + return this.attr('opacity', value); + }, + // Relative move over x axis + dx: function dx(x) { + return this.x(new SVGNumber(x).plus(this instanceof Runner ? 0 : this.x()), true); + }, + // Relative move over y axis + dy: function dy(y) { + return this.y(new SVGNumber(y).plus(this instanceof Runner ? 0 : this.y()), true); + }, + // Relative move over x and y axes + dmove: function dmove(x, y) { + return this.dx(x).dy(y); + } + }); + registerMethods('radius', { + // Add x and y radius + radius: function radius(x, y) { + var type = (this._target || this).type; + return type === 'radialGradient' || type === 'radialGradient' ? this.attr('r', new SVGNumber(x)) : this.rx(x).ry(y == null ? x : y); + } + }); + registerMethods('Path', { + // Get path length + length: function length() { + return this.node.getTotalLength(); + }, + // Get point at length + pointAt: function pointAt(length) { + return new Point(this.node.getPointAtLength(length)); + } + }); + registerMethods(['Container', 'Runner'], { + // Set font + font: function font(a, v) { + if (_typeof(a) === 'object') { + for (v in a) { + this.font(v, a[v]); + } + } + + return a === 'leading' ? this.leading(v) : a === 'anchor' ? this.attr('text-anchor', v) : a === 'size' || a === 'family' || a === 'weight' || a === 'stretch' || a === 'variant' || a === 'style' ? this.attr('font-' + a, v) : this.attr(a, v); + } + }); + function setup$2() { var node = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; this.events = node.events || {}; @@ -6462,8 +6648,10 @@ var SVG = (function () { function add(element, i) { element = makeInstance(element); - if (element.node !== this.node.children[i]) { - this.node.insertBefore(element.node, this.node.children[i] || null); + if (i == null) { + this.node.appendChild(element.node); + } else if (element.node !== this.node.childNodes[i]) { + this.node.insertBefore(element.node, this.node.childNodes[i]); } return this; @@ -6606,6 +6794,7 @@ var SVG = (function () { extend$2(Path, getMethodsFor('Path')); extend$2(Defs, getMethodsFor('Defs')); extend$2([Text$1, Tspan], getMethodsFor('Tspan')); + extend$2([Rect, Ellipse, Circle, Gradient], getMethodsFor('radius')); var containerMethods = getMethodsFor('Container'); // FIXME: We need a container array for (var i$1 in containers) { diff --git a/dist/svg.min.js b/dist/svg.min.js index 9d05a1f..4571bd5 100644 --- a/dist/svg.min.js +++ b/dist/svg.min.js @@ -1 +1 @@ -var SVG=function(){"use strict";function l(t){return(l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){for(var n=0;n=e.time?e.run():dt.timeouts.push(e),e!==n););for(var i=null,r=dt.frames.last();i!==r&&(i=dt.frames.shift());)i.run();dt.transforms.forEach(function(t){t()}),dt.nextDraw=dt.timeouts.first()||dt.frames.first()?window.requestAnimationFrame(dt._draw):null}},vt=function(t){function i(t,e){var n;return c(this,i),n=f(this,o(i).call(this,Y(null,t),i)),extend(r(r(n)),e),n}return u(i,d),a(i,[{key:"words",value:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(document.createTextNode(t)),this}}]),i}();W(vt),ut("Bare",{element:function(t,e){var n=createCustom(t,e);return this.put(new n)}});var yt=function(){function n(){c(this,n),this.init.apply(this,arguments)}return a(n,[{key:"init",value:function(t,e){e=Array.isArray(t)?t[1]:e,t=Array.isArray(t)?t[0]:t,this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(h))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof n&&(this.value=t.valueOf(),this.unit=t.unit)}},{key:"toString",value:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit}},{key:"toJSON",value:function(){return this.toString()}},{key:"toArray",value:function(){return[this.value,this.unit]}},{key:"valueOf",value:function(){return this.value}},{key:"plus",value:function(t){return new n(this+(t=new n(t)),this.unit||t.unit)}},{key:"minus",value:function(t){return new n(this-(t=new n(t)),this.unit||t.unit)}},{key:"times",value:function(t){return new n(this*(t=new n(t)),this.unit||t.unit)}},{key:"divide",value:function(t){return new n(this/(t=new n(t)),this.unit||t.unit)}}]),n}();function pt(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())}function mt(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())}function gt(t){return null==t?this.attr("cx"):this.attr("cx",t)}function wt(t){return null==t?this.attr("cy"):this.attr("cy",t)}function kt(t){return null==t?2*this.rx():this.rx(new yt(t).divide(2))}function xt(t){return null==t?2*this.ry():this.ry(new yt(t).divide(2))}function bt(t,e){var n=P(this,t,e);return this.rx(new yt(n.width).divide(2)).ry(new yt(n.height).divide(2))}var _t=Object.freeze({rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)},x:pt,y:mt,cx:gt,cy:wt,width:kt,height:xt,size:bt}),Ot=function(t){function e(t){return c(this,e),f(this,o(e).call(this,Y("circle",t),e))}return u(e,d),a(e,[{key:"radius",value:function(t){return this.attr("r",t)}},{key:"rx",value:function(t){return this.attr("r",t)}},{key:"ry",value:function(t){return this.rx(t)}}]),e}();function At(t){return t%360*Math.PI/180}function Mt(t,e){return utils.map((e||document).querySelectorAll(t),function(t){return $(t)})}H(Ot,{x:pt,y:mt,cx:gt,cy:wt,width:kt,height:xt,size:bt}),ut({Element:{circle:function(t){return this.put(new Ot).radius(new yt(t).divide(2)).move(0,0)}}}),W(Ot),ut("Container",{find:function(t){return Mt(t,this.node)}});var Tt=Z(U);function Ct(){return this.parent()&&this.parent().removeElement(this),this}ut("Element",{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var n=P(this,t,e);return this.width(new yt(n.width)).height(new yt(n.height))},clone:function(t){this.writeDataToDom();var e=tt(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:Ct,replace:function(t){return this.after(t).remove(),t},putIn:function(t){return Q(t).add(this)},id:function(t){return void 0!==t||this.node.id||(this.node.id=K(this.type)),this.attr("id",t)},inside:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t",It=0,Lt={"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},Rt=function(){function t(){c(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t,e,n){var i,r;(this.r=0,this.g=0,this.b=0,t)&&("string"==typeof t?g.test(t)?(i=y.exec(t.replace(p,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):m.test(t)&&(i=v.exec(4===(r=t).length?["#",r.substring(1,2),r.substring(1,2),r.substring(2,3),r.substring(2,3),r.substring(3,4),r.substring(3,4)].join(""):r),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):Array.isArray(t)?(this.r=t[0],this.g=t[1],this.b=t[2]):"object"===l(t)?(this.r=t.r,this.g=t.g,this.b=t.b):3===arguments.length&&(this.r=t,this.g=e,this.b=n))}},{key:"toString",value:function(){return this.toHex()}},{key:"toArray",value:function(){return[this.r,this.g,this.b]}},{key:"toHex",value:function(){return"#"+N(Math.round(this.r))+N(Math.round(this.g))+N(Math.round(this.b))}},{key:"toRgb",value:function(){return"rgb("+[this.r,this.g,this.b].join()+")"}},{key:"brightness",value:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11}}],[{key:"test",value:function(t){return t+="",m.test(t)||g.test(t)}},{key:"isRgb",value:function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b}},{key:"isColor",value:function(t){return this.isRgb(t)||this.test(t)}}]),t}(),Bt=function(){try{return Array}catch(t){return Array}}(),Xt=function(t){function n(){var t,e;return c(this,n),(t=e=f(this,o(n).call(this))).init.apply(t,arguments),e}return u(n,Bt),a(n,[{key:"init",value:function(t,e){this.length=0,this.push.apply(this,O(this.parse(t||e)))}},{key:"toArray",value:function(){return Array.prototype.slice(this)}},{key:"toString",value:function(){this.join(" ")}},{key:"valueOf",value:function(){return this.toArray()}},{key:"parse",value:function(t){return t=t.valueOf(),Array.isArray(t)?t:t.trim().split(b).map(parseFloat)}},{key:"clone",value:function(){return new this.constructor(this)}},{key:"toSet",value:function(){return new Set(this)}}]),n}();function Yt(t,e,n){if(null==t){t={},e=this.node.attributes;var i=!0,r=!1,s=void 0;try{for(var u,a=e[Symbol.iterator]();!(i=(u=a.next()).done);i=!0){var o=u.value;t[o.nodeName]=isNumer.test(o.nodeValue)?parseFloat(o.nodeValue):o.nodeValue}}catch(t){r=!0,s=t}finally{try{i||null==a.return||a.return()}finally{if(r)throw s}}return t}if(Array.isArray(t));else if("object"===l(t))for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return null==(e=this.node.getAttribute(t))?Lt[t]:k.test(e)?parseFloat(e):e;for("fill"!==t&&"stroke"!==t||x.test(e)&&(e=this.doc().defs().image(e));"function"==typeof e.attrHook;)e=e.attrHook(this,t);"number"==typeof e?e=new yt(e):Rt.isColor(e)?e=new Rt(e):Array.isArray(e)&&(e=new Xt(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild()}return this}ut("Element",{attr:Yt});var Ft=function(t){function e(t){return c(this,e),f(this,o(e).call(this,Y(t+"Gradient","string"==typeof t?null:t),e))}return u(e,d),a(e,[{key:"stop",value:function(t,e,n){return this.put(new Nt).update(t,e,n)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="gradientTransform"),Yt.call(this,t,e,n)}},{key:"targets",value:function(){return find('svg [fill*="'+this.id()+'"]')}}]),e}();H(Ft,Pt),ut({Container:{gradient:function(t,e){return this.defs().gradient(t,e)}},Defs:{gradient:function(t,e){return this.put(new Ft(t)).update(e)}}}),W(Ft);var Ht=function(t){function e(t){return c(this,e),f(this,o(e).call(this,Y("pattern",t)))}return u(e,d),a(e,[{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="patternTransform"),Yt.call(this,t,e,n)}},{key:"targets",value:function(){return find('svg [fill*="'+this.id()+'"]')}}]),e}();ut({Container:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}},Defs:{pattern:function(t,e,n){return this.put(new Ht).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}}),W(Ht);var Gt=0;function Vt(t){return t instanceof Base&&t.is("EventTarget")?t.getEventTarget():t}function Ut(t,e,i,n,r){var s=i.bind(n||t),u=Vt(t);e=Array.isArray(e)?e:e.split(b),u.instance=u.instance||{events:{}};var a=u.instance.events;i._svgjsListenerId||(i._svgjsListenerId=++Gt),e.forEach(function(t){var e=t.split(".")[0],n=t.split(".")[1]||"*";a[e]=a[e]||{},a[e][n]=a[e][n]||{},a[e][n][i._svgjsListenerId]=s,u.addEventListener(e,s,r||!1)})}function Qt(t,e,s,u){var a=Vt(t);if(a.instance&&("function"!=typeof s||(s=s._svgjsListenerId))){var o=a.instance.events;(e=Array.isArray(e)?e:(e||"").split(b)).forEach(function(t){var e,n,i=t&&t.split(".")[0],r=t&&t.split(".")[1];if(s)o[i]&&o[i][r||"*"]&&(a.removeEventListener(i,o[i][r||"*"][s],u||!1),delete o[i][r||"*"][s]);else if(i&&r){if(o[i]&&o[i][r]){for(n in o[i][r])Qt(a,[i,r].join("."),n);delete o[i][r]}}else if(r)for(t in o)for(e in o[t])r===e&&Qt(a,[t,r].join("."));else if(i){if(o[i]){for(e in o[i])Qt(a,[i,e].join("."));delete o[i]}}else{for(t in o)Qt(a,t);a.instance.events={}}})}}var $t=function(t){function e(t){return c(this,e),f(this,o(e).call(this,Y("image",t),e))}return u(e,d),a(e,[{key:"load",value:function(n,i){if(!n)return this;var r=new window.Image;return Ut(r,"load",function(t){var e=this.parent(Ht);0===this.width()&&0===this.height()&&this.size(r.width,r.height),e instanceof Ht&&0===e.width()&&0===e.height()&&e.size(this.width(),this.height()),"function"==typeof i&&i.call(this,{width:r.width,height:r.height,ratio:r.width/r.height,url:n})},this),Ut(r,"load error",function(){Qt(r)}),this.attr("href",r.src=n,X)}},{key:"attrHook",value:function(t){var e=this;return t.doc().defs().pattern(0,0,function(t){t.add(e)})}}]),e}();ut({Container:{image:function(t,e){return this.put(new $t).size(0,0).load(t,e)}}}),W($t);var Wt=function(t){function r(t){var e=1":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)},bezier:function(t,e,n,i){return function(t){}}},Ae=function(){function t(){c(this,t)}return a(t,[{key:"done",value:function(){return!1}}]),t}(),Me=function(t){function n(t){var e;return c(this,n),(e=f(this,o(n).call(this))).ease=Oe[t||qt]||t,e}return u(n,Ae),a(n,[{key:"step",value:function(t,e,n){return"number"!=typeof t?n<1?t:e:t+(e-t)*this.ease(n)}}]),n}(),Te=function(t){function n(t){var e;return c(this,n),(e=f(this,o(n).call(this))).stepper=t,e}return u(n,Ae),a(n,[{key:"step",value:function(t,e,n,i){return this.stepper(t,e,n,i)}},{key:"done",value:function(t){return t.done}}]),n}();function Ce(){var t=(this._duration||500)/1e3,e=this._overshoot||0,n=Math.PI,i=Math.log(e/100+1e-10),r=-i/Math.sqrt(n*n+i*i),s=3.9/(r*t);this.d=2*r*s,this.k=s*s}var je=function(t){function i(t,e){var n;return c(this,i),(n=f(this,o(i).call(this))).duration(t||500).overshoot(e||0),n}return u(i,Te),a(i,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;100i);this._lastTime=this._time;var s=this._isDeclarative;if(this.done=!s&&!r&&this._time>=i,n||s){this._initialise(n),this.transforms=new ke;var u=this._run(s?t:e)}return this.done=this.done||u&&s,this}},{key:"finish",value:function(){return this.step(1/0)}},{key:"reverse",value:function(t){return this._reverse=null==t?!this._reverse:t,this}},{key:"ease",value:function(t){return this._stepper=new Me(t),this}},{key:"active",value:function(t){return null==t?this.enabled:(this.enabled=t,this)}},{key:"_rememberMorpher",value:function(t,e){this._history[t]={morpher:e,caller:this._queue[this._queue.length-1]}}},{key:"_tryRetarget",value:function(t,e){if(this._history[t]){if(!this._history[t].caller.initialised){var n=this._queue.indexOf(this._history[t].caller);return this._queue.splice(n,1),!1}this._history[t].caller.isTransform?this._history[t].caller.isTransform(e):this._history[t].morpher.to(e),this._history[t].caller.finished=!1;var i=this.timeline();return i&&i._continue(),!0}return!1}},{key:"_initialise",value:function(t){if(t||this._isDeclarative)for(var e=0,n=this._queue.length;e=e.time?e.run():dt.timeouts.push(e),e!==n););for(var i=null,r=dt.frames.last();i!==r&&(i=dt.frames.shift());)i.run();dt.transforms.forEach(function(t){t()}),dt.nextDraw=dt.timeouts.first()||dt.frames.first()?window.requestAnimationFrame(dt._draw):null}},vt=function(t){function i(t,e){var n;return c(this,i),n=f(this,o(i).call(this,X(null,t),i)),extend(r(r(n)),e),n}return u(i,s),a(i,[{key:"words",value:function(t){for(;this.node.hasChildNodes();)this.node.removeChild(this.node.lastChild);return this.node.appendChild(document.createTextNode(t)),this}}]),i}();W(vt),ut("Bare",{element:function(t,e){var n=createCustom(t,e);return this.put(new n)}});var yt=function(){function n(){c(this,n),this.init.apply(this,arguments)}return a(n,[{key:"init",value:function(t,e){e=Array.isArray(t)?t[1]:e,t=Array.isArray(t)?t[0]:t,this.value=0,this.unit=e||"","number"==typeof t?this.value=isNaN(t)?0:isFinite(t)?t:t<0?-34e37:34e37:"string"==typeof t?(e=t.match(h))&&(this.value=parseFloat(e[1]),"%"===e[5]?this.value/=100:"s"===e[5]&&(this.value*=1e3),this.unit=e[5]):t instanceof n&&(this.value=t.valueOf(),this.unit=t.unit)}},{key:"toString",value:function(){return("%"===this.unit?~~(1e8*this.value)/1e6:"s"===this.unit?this.value/1e3:this.value)+this.unit}},{key:"toJSON",value:function(){return this.toString()}},{key:"toArray",value:function(){return[this.value,this.unit]}},{key:"valueOf",value:function(){return this.value}},{key:"plus",value:function(t){return new n(this+(t=new n(t)),this.unit||t.unit)}},{key:"minus",value:function(t){return new n(this-(t=new n(t)),this.unit||t.unit)}},{key:"times",value:function(t){return new n(this*(t=new n(t)),this.unit||t.unit)}},{key:"divide",value:function(t){return new n(this/(t=new n(t)),this.unit||t.unit)}}]),n}();function pt(t){return null==t?this.cx()-this.rx():this.cx(t+this.rx())}function mt(t){return null==t?this.cy()-this.ry():this.cy(t+this.ry())}function gt(t){return null==t?this.attr("cx"):this.attr("cx",t)}function wt(t){return null==t?this.attr("cy"):this.attr("cy",t)}function xt(t){return null==t?2*this.rx():this.rx(new yt(t).divide(2))}function kt(t){return null==t?2*this.ry():this.ry(new yt(t).divide(2))}function bt(t,e){var n=P(this,t,e);return this.rx(new yt(n.width).divide(2)).ry(new yt(n.height).divide(2))}var _t=Object.freeze({rx:function(t){return this.attr("rx",t)},ry:function(t){return this.attr("ry",t)},x:pt,y:mt,cx:gt,cy:wt,width:xt,height:kt,size:bt}),Ot=function(t){function e(t){return c(this,e),f(this,o(e).call(this,X("circle",t),e))}return u(e,s),a(e,[{key:"radius",value:function(t){return this.attr("r",t)}},{key:"rx",value:function(t){return this.attr("r",t)}},{key:"ry",value:function(t){return this.rx(t)}}]),e}();function At(t){return t%360*Math.PI/180}function Mt(t,e){return utils.map((e||document).querySelectorAll(t),function(t){return $(t)})}G(Ot,{x:pt,y:mt,cx:gt,cy:wt,width:xt,height:kt,size:bt}),ut({Element:{circle:function(t){return this.put(new Ot).radius(new yt(t).divide(2)).move(0,0)}}}),W(Ot),ut("Container",{find:function(t){return Mt(t,this.node)}});var Tt=Z(U);function Ct(){return this.parent()&&this.parent().removeElement(this),this}ut("Element",{x:function(t){return this.attr("x",t)},y:function(t){return this.attr("y",t)},cx:function(t){return null==t?this.x()+this.width()/2:this.x(t-this.width()/2)},cy:function(t){return null==t?this.y()+this.height()/2:this.y(t-this.height()/2)},move:function(t,e){return this.x(t).y(e)},center:function(t,e){return this.cx(t).cy(e)},width:function(t){return this.attr("width",t)},height:function(t){return this.attr("height",t)},size:function(t,e){var n=P(this,t,e);return this.width(new yt(n.width)).height(new yt(n.height))},clone:function(t){this.writeDataToDom();var e=tt(this.node.cloneNode(!0));return t?t.add(e):this.after(e),e},remove:Ct,replace:function(t){return this.after(t).remove(),t},addTo:function(t){return Q(t).put(this)},putIn:function(t){return Q(t).add(this)},id:function(t){return void 0!==t||this.node.id||(this.node.id=K(this.type)),this.attr("id",t)},inside:function(t,e){var n=this.bbox();return t>n.x&&e>n.y&&t",Rt=0,Lt={"fill-opacity":1,"stroke-opacity":1,"stroke-width":0,"stroke-linejoin":"miter","stroke-linecap":"butt",fill:"#000000",stroke:"#000000",opacity:1,x:0,y:0,cx:0,cy:0,width:0,height:0,r:0,rx:0,ry:0,offset:0,"stop-opacity":1,"stop-color":"#000000","font-size":16,"font-family":"Helvetica, Arial, sans-serif","text-anchor":"start"},Ft=function(){function t(){c(this,t),this.init.apply(this,arguments)}return a(t,[{key:"init",value:function(t,e,n){var i,r;(this.r=0,this.g=0,this.b=0,t)&&("string"==typeof t?g.test(t)?(i=y.exec(t.replace(p,"")),this.r=parseInt(i[1]),this.g=parseInt(i[2]),this.b=parseInt(i[3])):m.test(t)&&(i=v.exec(4===(r=t).length?["#",r.substring(1,2),r.substring(1,2),r.substring(2,3),r.substring(2,3),r.substring(3,4),r.substring(3,4)].join(""):r),this.r=parseInt(i[1],16),this.g=parseInt(i[2],16),this.b=parseInt(i[3],16)):Array.isArray(t)?(this.r=t[0],this.g=t[1],this.b=t[2]):"object"===l(t)?(this.r=t.r,this.g=t.g,this.b=t.b):3===arguments.length&&(this.r=t,this.g=e,this.b=n))}},{key:"toString",value:function(){return this.toHex()}},{key:"toArray",value:function(){return[this.r,this.g,this.b]}},{key:"toHex",value:function(){return"#"+N(Math.round(this.r))+N(Math.round(this.g))+N(Math.round(this.b))}},{key:"toRgb",value:function(){return"rgb("+[this.r,this.g,this.b].join()+")"}},{key:"brightness",value:function(){return this.r/255*.3+this.g/255*.59+this.b/255*.11}}],[{key:"test",value:function(t){return t+="",m.test(t)||g.test(t)}},{key:"isRgb",value:function(t){return t&&"number"==typeof t.r&&"number"==typeof t.g&&"number"==typeof t.b}},{key:"isColor",value:function(t){return this.isRgb(t)||this.test(t)}}]),t}(),It=function(){try{return Array}catch(t){return Array}}(),Bt=function(t){function n(){var t,e;return c(this,n),(t=e=f(this,o(n).call(this))).init.apply(t,arguments),e}return u(n,It),a(n,[{key:"init",value:function(t,e){this.length=0,this.push.apply(this,O(this.parse(t||e)))}},{key:"toArray",value:function(){return Array.prototype.slice(this)}},{key:"toString",value:function(){this.join(" ")}},{key:"valueOf",value:function(){return this.toArray()}},{key:"parse",value:function(t){return t=t.valueOf(),Array.isArray(t)?t:t.trim().split(b).map(parseFloat)}},{key:"clone",value:function(){return new this.constructor(this)}},{key:"toSet",value:function(){return new Set(this)}}]),n}();function Xt(t,e,n){if(null==t){t={},e=this.node.attributes;var i=!0,r=!1,s=void 0;try{for(var u,a=e[Symbol.iterator]();!(i=(u=a.next()).done);i=!0){var o=u.value;t[o.nodeName]=isNumer.test(o.nodeValue)?parseFloat(o.nodeValue):o.nodeValue}}catch(t){r=!0,s=t}finally{try{i||null==a.return||a.return()}finally{if(r)throw s}}return t}if(Array.isArray(t));else if("object"===l(t))for(e in t)this.attr(e,t[e]);else if(null===e)this.node.removeAttribute(t);else{if(null==e)return null==(e=this.node.getAttribute(t))?Lt[t]:x.test(e)?parseFloat(e):e;for("fill"!==t&&"stroke"!==t||k.test(e)&&(e=this.doc().defs().image(e));"function"==typeof e.attrHook;)e=e.attrHook(this,t);"number"==typeof e?e=new yt(e):Ft.isColor(e)?e=new Ft(e):Array.isArray(e)&&(e=new Bt(e)),"leading"===t?this.leading&&this.leading(e):"string"==typeof n?this.node.setAttributeNS(n,t,e.toString()):this.node.setAttribute(t,e.toString()),!this.rebuild||"font-size"!==t&&"x"!==t||this.rebuild()}return this}ut("Element",{attr:Xt});var Yt=function(t){function e(t){return c(this,e),f(this,o(e).call(this,X(t+"Gradient","string"==typeof t?null:t),e))}return u(e,s),a(e,[{key:"stop",value:function(t,e,n){return this.put(new Nt).update(t,e,n)}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="gradientTransform"),Xt.call(this,t,e,n)}},{key:"targets",value:function(){return find('svg [fill*="'+this.id()+'"]')}}]),e}();G(Yt,Pt),ut({Container:{gradient:function(t,e){return this.defs().gradient(t,e)}},Defs:{gradient:function(t,e){return this.put(new Yt(t)).update(e)}}}),W(Yt);var Gt=function(t){function e(t){return c(this,e),f(this,o(e).call(this,X("pattern",t)))}return u(e,s),a(e,[{key:"url",value:function(){return"url(#"+this.id()+")"}},{key:"update",value:function(t){return this.clear(),"function"==typeof t&&t.call(this,this),this}},{key:"toString",value:function(){return this.url()}},{key:"attr",value:function(t,e,n){return"transform"===t&&(t="patternTransform"),Xt.call(this,t,e,n)}},{key:"targets",value:function(){return find('svg [fill*="'+this.id()+'"]')}}]),e}();ut({Container:{pattern:function(t,e,n){return this.defs().pattern(t,e,n)}},Defs:{pattern:function(t,e,n){return this.put(new Gt).update(n).attr({x:0,y:0,width:t,height:e,patternUnits:"userSpaceOnUse"})}}}),W(Gt);var Ht=0;function Vt(t){return t instanceof Base&&t.is("EventTarget")?t.getEventTarget():t}function Ut(t,e,i,n,r){var s=i.bind(n||t),u=Vt(t);e=Array.isArray(e)?e:e.split(b),u.instance=u.instance||{events:{}};var a=u.instance.events;i._svgjsListenerId||(i._svgjsListenerId=++Ht),e.forEach(function(t){var e=t.split(".")[0],n=t.split(".")[1]||"*";a[e]=a[e]||{},a[e][n]=a[e][n]||{},a[e][n][i._svgjsListenerId]=s,u.addEventListener(e,s,r||!1)})}function Qt(t,e,s,u){var a=Vt(t);if(a.instance&&("function"!=typeof s||(s=s._svgjsListenerId))){var o=a.instance.events;(e=Array.isArray(e)?e:(e||"").split(b)).forEach(function(t){var e,n,i=t&&t.split(".")[0],r=t&&t.split(".")[1];if(s)o[i]&&o[i][r||"*"]&&(a.removeEventListener(i,o[i][r||"*"][s],u||!1),delete o[i][r||"*"][s]);else if(i&&r){if(o[i]&&o[i][r]){for(n in o[i][r])Qt(a,[i,r].join("."),n);delete o[i][r]}}else if(r)for(t in o)for(e in o[t])r===e&&Qt(a,[t,r].join("."));else if(i){if(o[i]){for(e in o[i])Qt(a,[i,e].join("."));delete o[i]}}else{for(t in o)Qt(a,t);a.instance.events={}}})}}var $t=function(t){function e(t){return c(this,e),f(this,o(e).call(this,X("image",t),e))}return u(e,s),a(e,[{key:"load",value:function(n,i){if(!n)return this;var r=new window.Image;return Ut(r,"load",function(t){var e=this.parent(Gt);0===this.width()&&0===this.height()&&this.size(r.width,r.height),e instanceof Gt&&0===e.width()&&0===e.height()&&e.size(this.width(),this.height()),"function"==typeof i&&i.call(this,{width:r.width,height:r.height,ratio:r.width/r.height,url:n})},this),Ut(r,"load error",function(){Qt(r)}),this.attr("href",r.src=n,B)}},{key:"attrHook",value:function(t){var e=this;return t.doc().defs().pattern(0,0,function(t){t.add(e)})}}]),e}();ut({Container:{image:function(t,e){return this.put(new $t).size(0,0).load(t,e)}}}),W($t);var Wt=function(t){function r(t){var e=1":function(t){return-Math.cos(t*Math.PI)/2+.5},">":function(t){return Math.sin(t*Math.PI/2)},"<":function(t){return 1-Math.cos(t*Math.PI/2)},bezier:function(t,e,n,i){return function(t){}}},Ae=function(){function t(){c(this,t)}return a(t,[{key:"done",value:function(){return!1}}]),t}(),Me=function(t){function n(t){var e;return c(this,n),(e=f(this,o(n).call(this))).ease=Oe[t||qt]||t,e}return u(n,Ae),a(n,[{key:"step",value:function(t,e,n){return"number"!=typeof t?n<1?t:e:t+(e-t)*this.ease(n)}}]),n}(),Te=function(t){function n(t){var e;return c(this,n),(e=f(this,o(n).call(this))).stepper=t,e}return u(n,Ae),a(n,[{key:"step",value:function(t,e,n,i){return this.stepper(t,e,n,i)}},{key:"done",value:function(t){return t.done}}]),n}();function Ce(){var t=(this._duration||500)/1e3,e=this._overshoot||0,n=Math.PI,i=Math.log(e/100+1e-10),r=-i/Math.sqrt(n*n+i*i),s=3.9/(r*t);this.d=2*r*s,this.k=s*s}var je=function(t){function i(t,e){var n;return c(this,i),(n=f(this,o(i).call(this))).duration(t||500).overshoot(e||0),n}return u(i,Te),a(i,[{key:"step",value:function(t,e,n,i){if("string"==typeof t)return t;if(i.done=n===1/0,n===1/0)return e;if(0===n)return t;100i);this._lastTime=this._time;var s=this._isDeclarative;if(this.done=!s&&!r&&this._time>=i,n||s){this._initialise(n),this.transforms=new xe;var u=this._run(s?t:e)}return this.done=this.done||u&&s,this}},{key:"finish",value:function(){return this.step(1/0)}},{key:"reverse",value:function(t){return this._reverse=null==t?!this._reverse:t,this}},{key:"ease",value:function(t){return this._stepper=new Me(t),this}},{key:"active",value:function(t){return null==t?this.enabled:(this.enabled=t,this)}},{key:"_rememberMorpher",value:function(t,e){this._history[t]={morpher:e,caller:this._queue[this._queue.length-1]}}},{key:"_tryRetarget",value:function(t,e){if(this._history[t]){if(!this._history[t].caller.initialised){var n=this._queue.indexOf(this._history[t].caller);return this._queue.splice(n,1),!1}this._history[t].caller.isTransform?this._history[t].caller.isTransform(e):this._history[t].morpher.to(e),this._history[t].caller.finished=!1;var i=this.timeline();return i&&i._continue(),!0}return!1}},{key:"_initialise",value:function(t){if(t||this._isDeclarative)for(var e=0,n=this._queue.length;e