diff options
author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-11-05 21:53:40 +0100 |
---|---|---|
committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2018-11-05 21:53:40 +0100 |
commit | 9f2696e8a2cf7e4eebc1cc7e31027fe2070094fa (patch) | |
tree | e3c3fc10be69a8e461c27680736f89ffb84e4165 /dist/svg.js | |
parent | 306b167b46bf500f710855e503b335e22ab99497 (diff) | |
download | svg.js-9f2696e8a2cf7e4eebc1cc7e31027fe2070094fa.tar.gz svg.js-9f2696e8a2cf7e4eebc1cc7e31027fe2070094fa.zip |
removed unused comments and files
Diffstat (limited to 'dist/svg.js')
-rw-r--r-- | dist/svg.js | 4175 |
1 files changed, 1851 insertions, 2324 deletions
diff --git a/dist/svg.js b/dist/svg.js index 3b71aea..946db81 100644 --- a/dist/svg.js +++ b/dist/svg.js @@ -6,7 +6,7 @@ * @copyright Wout Fierens <wout@mick-wout.com> * @license MIT * -* BUILT: Mon Nov 05 2018 18:59:11 GMT+0100 (GMT+01:00) +* BUILT: Mon Nov 05 2018 21:52:42 GMT+0100 (GMT+01:00) */; var SVG = (function () { 'use strict'; @@ -216,8 +216,157 @@ var SVG = (function () { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } - var Base = function Base() { - _classCallCheck(this, Base); + var Queue = + /*#__PURE__*/ + function () { + function Queue() { + _classCallCheck(this, Queue); + + this._first = null; + this._last = null; + } + + _createClass(Queue, [{ + key: "push", + value: function push(value) { + // An item stores an id and the provided value + var item = value.next ? value : { + value: value, + next: null, + prev: null // Deal with the queue being empty or populated + + }; + + if (this._last) { + item.prev = this._last; + this._last.next = item; + this._last = item; + } else { + this._last = item; + this._first = item; + } // Update the length and return the current item + + + return item; + } + }, { + key: "shift", + value: function shift() { + // Check if we have a value + var remove = this._first; + if (!remove) return null; // If we do, remove it and relink things + + this._first = remove.next; + if (this._first) this._first.prev = null; + this._last = this._first ? this._last : null; + return remove.value; + } // Shows us the first item in the list + + }, { + key: "first", + value: function first() { + return this._first && this._first.value; + } // Shows us the last item in the list + + }, { + key: "last", + value: function last() { + return this._last && this._last.value; + } // Removes the item that was returned from the push + + }, { + key: "remove", + value: function remove(item) { + // Relink the previous item + if (item.prev) item.prev.next = item.next; + if (item.next) item.next.prev = item.prev; + if (item === this._last) this._last = item.prev; + if (item === this._first) this._first = item.next; // Invalidate item + + item.prev = null; + item.next = null; + } + }]); + + return Queue; + }(); + + var Animator = { + nextDraw: null, + frames: new Queue(), + timeouts: new Queue(), + timer: window.performance || window.Date, + transforms: [], + frame: function frame(fn) { + // Store the node + var node = Animator.frames.push({ + run: fn + }); // Request an animation frame if we don't have one + + if (Animator.nextDraw === null) { + Animator.nextDraw = window.requestAnimationFrame(Animator._draw); + } // Return the node so we can remove it easily + + + return node; + }, + transform_frame: function transform_frame(fn, id) { + Animator.transforms[id] = fn; + }, + timeout: function timeout(fn, delay) { + delay = delay || 0; // Work out when the event should fire + + var time = Animator.timer.now() + delay; // Add the timeout to the end of the queue + + var node = Animator.timeouts.push({ + run: fn, + time: time + }); // Request another animation frame if we need one + + if (Animator.nextDraw === null) { + Animator.nextDraw = window.requestAnimationFrame(Animator._draw); + } + + return node; + }, + cancelFrame: function cancelFrame(node) { + Animator.frames.remove(node); + }, + clearTimeout: function clearTimeout(node) { + Animator.timeouts.remove(node); + }, + _draw: function _draw(now) { + // Run all the timeouts we can run, if they are not ready yet, add them + // to the end of the queue immediately! (bad timeouts!!! [sarcasm]) + var nextTimeout = null; + var lastTimeout = Animator.timeouts.last(); + + while (nextTimeout = Animator.timeouts.shift()) { + // Run the timeout if its time, or push it to the end + if (now >= nextTimeout.time) { + nextTimeout.run(); + } else { + Animator.timeouts.push(nextTimeout); + } // If we hit the last item, we should stop shifting out more items + + + if (nextTimeout === lastTimeout) break; + } // Run all of the animation frames + + + var nextFrame = null; + var lastFrame = Animator.frames.last(); + + while (nextFrame !== lastFrame && (nextFrame = Animator.frames.shift())) { + nextFrame.run(); + } + + Animator.transforms.forEach(function (el) { + el(); + }); // If we have remaining timeouts or frames, draw until we don't anymore + + Animator.nextDraw = Animator.timeouts.first() || Animator.frames.first() ? window.requestAnimationFrame(Animator._draw) : null; + } }; // Parse unit value @@ -282,6 +431,47 @@ var SVG = (function () { dots: dots }); + /* eslint no-new-func: "off" */ + var subClassArray = function () { + try { + // try es6 subclassing + return Function('name', 'baseClass', '_constructor', ['baseClass = baseClass || Array', 'return {', '[name]: class extends baseClass {', 'constructor (...args) {', 'super(...args)', '_constructor && _constructor.apply(this, args)', '}', '}', '}[name]'].join('\n')); + } catch (e) { + // Use es5 approach + return function (name) { + var baseClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Array; + + var _constructor = arguments.length > 2 ? arguments[2] : undefined; + + var Arr = function Arr() { + baseClass.apply(this, arguments); + _constructor && _constructor.apply(this, arguments); + }; + + Arr.prototype = Object.create(baseClass.prototype); + Arr.prototype.constructor = Arr; + return Arr; + }; + } + }(); + + // Default namespaces + var ns = 'http://www.w3.org/2000/svg'; + var xmlns = 'http://www.w3.org/2000/xmlns/'; + var xlink = 'http://www.w3.org/1999/xlink'; + var svgjs = 'http://svgjs.com/svgjs'; + + var ns$1 = /*#__PURE__*/Object.freeze({ + ns: ns, + xmlns: xmlns, + xlink: xlink, + svgjs: svgjs + }); + + var Base = function Base() { + _classCallCheck(this, Base); + }; + function isNulledBox(box) { return !box.w && !box.h && !box.x && !box.y; } @@ -447,76 +637,6 @@ var SVG = (function () { return [ox, oy]; } - // Default namespaces - var ns = 'http://www.w3.org/2000/svg'; - var xmlns = 'http://www.w3.org/2000/xmlns/'; - var xlink = 'http://www.w3.org/1999/xlink'; - var svgjs = 'http://svgjs.com/svgjs'; - - var ns$1 = /*#__PURE__*/Object.freeze({ - ns: ns, - xmlns: xmlns, - xlink: xlink, - svgjs: svgjs - }); - - function nodeOrNew(name, node) { - return node || makeNode(name); - } // Method for element creation - - function makeNode(name) { - // create element - return document.createElementNS(ns, name); - } // Method for extending objects - - function extend(modules, methods) { - var key, i; - modules = Array.isArray(modules) ? modules : [modules]; - - for (i = modules.length - 1; i >= 0; i--) { - for (key in methods) { - modules[i].prototype[key] = methods[key]; - } - } - } // FIXME: enhanced constructors here - - function addFactory(modules, methods) { - extend(modules, methods); - } // Invent new element - - function invent(config) { - // Create element initializer - var initializer = typeof config.create === 'function' ? config.create : function (node) { - config.inherit.call(this, node || makeNode(config.create)); - }; // Inherit prototype - - if (config.inherit) { - /* eslint new-cap: "off" */ - initializer.prototype = new config.inherit(); - initializer.prototype.constructor = initializer; - } // Extend with methods - - - if (config.extend) { - extend(initializer, config.extend); - } // Attach construct method to parent - - - if (config.construct) { - extend(config.parent || getClass('Container'), config.construct); - } - - return initializer; - } - - var tools = /*#__PURE__*/Object.freeze({ - nodeOrNew: nodeOrNew, - makeNode: makeNode, - extend: extend, - addFactory: addFactory, - invent: invent - }); - var elements = {}; var root = Symbol('root'); function makeInstance(element) { @@ -607,6 +727,196 @@ var SVG = (function () { assignNewId: assignNewId }); + function nodeOrNew(name, node) { + return node || makeNode(name); + } // Method for element creation + + function makeNode(name) { + // create element + return document.createElementNS(ns, name); + } // Method for extending objects + + function extend(modules, methods) { + var key, i; + modules = Array.isArray(modules) ? modules : [modules]; + + for (i = modules.length - 1; i >= 0; i--) { + for (key in methods) { + modules[i].prototype[key] = methods[key]; + } + } + } // FIXME: enhanced constructors here + + function addFactory(modules, methods) { + extend(modules, methods); + } // Invent new element + + function invent(config) { + // Create element initializer + var initializer = typeof config.create === 'function' ? config.create : function (node) { + config.inherit.call(this, node || makeNode(config.create)); + }; // Inherit prototype + + if (config.inherit) { + /* eslint new-cap: "off" */ + initializer.prototype = new config.inherit(); + initializer.prototype.constructor = initializer; + } // Extend with methods + + + if (config.extend) { + extend(initializer, config.extend); + } // Attach construct method to parent + + + if (config.construct) { + extend(config.parent || getClass('Container'), config.construct); + } + + return initializer; + } + + var tools = /*#__PURE__*/Object.freeze({ + nodeOrNew: nodeOrNew, + makeNode: makeNode, + extend: extend, + addFactory: addFactory, + invent: invent + }); + + var SVGArray = subClassArray('SVGArray', Array, function () { + this.init.apply(this, arguments); + }); + extend(SVGArray, { + init: function init() { + this.length = 0; + this.push.apply(this, _toConsumableArray(this.parse.apply(this, arguments))); + }, + toArray: function toArray() { + return Array.prototype.concat.apply([], this); + }, + toString: function toString() { + return this.join(' '); + }, + // Flattens the array if needed + valueOf: function valueOf() { + var ret = []; + ret.push.apply(ret, _toConsumableArray(this)); + return ret; + }, + // Parse whitespace separated string + parse: function parse() { + var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; + // If already is an array, no need to parse it + if (array instanceof Array) return array; + return array.trim().split(delimiter).map(parseFloat); + }, + clone: function clone() { + return new this.constructor(this); + }, + toSet: function toSet() { + return new Set(this); + } + }); + + var SVGNumber = + /*#__PURE__*/ + function () { + // Initialize + function SVGNumber() { + _classCallCheck(this, SVGNumber); + + this.init.apply(this, arguments); + } + + _createClass(SVGNumber, [{ + key: "init", + value: function init(value, unit) { + unit = Array.isArray(value) ? value[1] : unit; + value = Array.isArray(value) ? value[0] : value; // initialize defaults + + this.value = 0; + this.unit = unit || ''; // parse value + + if (typeof value === 'number') { + // ensure a valid numeric value + this.value = isNaN(value) ? 0 : !isFinite(value) ? value < 0 ? -3.4e+38 : +3.4e+38 : value; + } else if (typeof value === 'string') { + unit = value.match(numberAndUnit); + + if (unit) { + // make value numeric + this.value = parseFloat(unit[1]); // normalize + + if (unit[5] === '%') { + this.value /= 100; + } else if (unit[5] === 's') { + this.value *= 1000; + } // store unit + + + this.unit = unit[5]; + } + } else { + if (value instanceof SVGNumber) { + this.value = value.valueOf(); + this.unit = value.unit; + } + } + } + }, { + key: "toString", + value: function toString() { + return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 : this.unit === 's' ? this.value / 1e3 : this.value) + this.unit; + } + }, { + key: "toJSON", + value: function toJSON() { + return this.toString(); + } + }, { + key: "toArray", + value: function toArray() { + return [this.value, this.unit]; + } + }, { + key: "valueOf", + value: function valueOf() { + return this.value; + } // Add number + + }, { + key: "plus", + value: function plus(number) { + number = new SVGNumber(number); + return new SVGNumber(this + number, this.unit || number.unit); + } // Subtract number + + }, { + key: "minus", + value: function minus(number) { + number = new SVGNumber(number); + return new SVGNumber(this - number, this.unit || number.unit); + } // Multiply number + + }, { + key: "times", + value: function times(number) { + number = new SVGNumber(number); + return new SVGNumber(this * number, this.unit || number.unit); + } // Divide number + + }, { + key: "divide", + value: function divide(number) { + number = new SVGNumber(number); + return new SVGNumber(this / number, this.unit || number.unit); + } + }]); + + return SVGNumber; + }(); + var listenerId = 0; function getEvents(node) { @@ -630,11 +940,7 @@ var SVG = (function () { var bag = getEvents(node); var n = getEventTarget(node); // events can be an array of events or a string of events - events = Array.isArray(events) ? events : events.split(delimiter); // ensure instance object for nodes which are not adopted - // n.instance = n.instance || {events: {}} - // pull event handlers from the element - // var bag = n.instance.events - // add id to listener + events = Array.isArray(events) ? events : events.split(delimiter); // add id to listener if (!listener._svgjsListenerId) { listener._svgjsListenerId = ++listenerId; @@ -655,16 +961,12 @@ var SVG = (function () { function off(node, events, listener, options) { var bag = getEvents(node); - var n = getEventTarget(node); // we cannot remove an event if its not an svg.js instance - // if (!n.instance) return - // listener can be a function or a number + var n = getEventTarget(node); // listener can be a function or a number if (typeof listener === 'function') { listener = listener._svgjsListenerId; if (!listener) return; - } // pull event handlers from the element - // var bag = n.instance.events - // events can be an array of events or a string or undefined + } // events can be an array of events or a string or undefined events = Array.isArray(events) ? events : (events || '').split(delimiter); @@ -739,6 +1041,56 @@ var SVG = (function () { dispatch: dispatch }); + var methods = {}; + 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), + _name2 = _arr$_i[0], + _m = _arr$_i[1]; + + registerMethods(_name2, _m); + } + + return; + } + + methods[name] = Object.assign(methods[name] || {}, m); + } + function getMethodsFor(name) { + return methods[name] || {}; + } + var EventTarget = /*#__PURE__*/ function (_Base) { @@ -821,7 +1173,7 @@ var SVG = (function () { return EventTarget; }(Base); // Add events to elements - var methods = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'touchstart', 'touchmove', 'touchleave', 'touchend', 'touchcancel'].reduce(function (last, event) { + var methods$1 = ['click', 'dblclick', 'mousedown', 'mouseup', 'mouseover', 'mouseout', 'mousemove', 'mouseenter', 'mouseleave', 'touchstart', 'touchmove', 'touchleave', 'touchend', 'touchcancel'].reduce(function (last, event) { // add event to Element var fn = function fn(f) { if (f === null) { @@ -836,11 +1188,7 @@ var SVG = (function () { last[event] = fn; return last; }, {}); - extend(EventTarget, methods); // registerMethods('EventTarget', { - // on, off, dispatch, fire - // }) - // - // registerConstructor('EventTarget', setup) + registerMethods('Element', methods$1); // Map function function map(array, block) { @@ -1039,209 +1387,6 @@ var SVG = (function () { return Color; }(); - /* eslint no-new-func: "off" */ - var subClassArray = function () { - try { - // try es6 subclassing - return Function('name', 'baseClass', '_constructor', ['baseClass = baseClass || Array', 'return {', '[name]: class extends baseClass {', 'constructor (...args) {', 'super(...args)', '_constructor && _constructor.apply(this, args)', '}', '}', '}[name]'].join('\n')); - } catch (e) { - // Use es5 approach - return function (name) { - var baseClass = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Array; - - var _constructor = arguments.length > 2 ? arguments[2] : undefined; - - var Arr = function Arr() { - baseClass.apply(this, arguments); - _constructor && _constructor.apply(this, arguments); - }; - - Arr.prototype = Object.create(baseClass.prototype); - Arr.prototype.constructor = Arr; - return Arr; - }; - } - }(); - - var SVGArray = subClassArray('SVGArray', Array, function () { - this.init.apply(this, arguments); - }); - extend(SVGArray, { - init: function init() { - // this.splice(0, this.length) - this.length = 0; - this.push.apply(this, _toConsumableArray(this.parse.apply(this, arguments))); - }, - toArray: function toArray() { - // const ret = [] - // ret.push(...this) - // return ret - return Array.prototype.concat.apply([], this); - }, - toString: function toString() { - return this.join(' '); - }, - // Flattens the array if needed - valueOf: function valueOf() { - var ret = []; - ret.push.apply(ret, _toConsumableArray(this)); - return ret; // return this.toArray() - }, - // Parse whitespace separated string - parse: function parse() { - var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; - // array = array.valueOf() - // If already is an array, no need to parse it - if (array instanceof Array) return array; - return array.trim().split(delimiter).map(parseFloat); - }, - clone: function clone() { - return new this.constructor(this); - }, - toSet: function toSet() { - return new Set(this); - } - }); // export default class SVGArray extends BaseArray { - // constructor (...args) { - // super() - // this.init(...args) - // } - // - // init (array, fallback = []) { - // //this.splice(0, this.length) - // this.length = 0 - // this.push(...this.parse(array || fallback)) - // } - // - // toArray () { - // return [].concat(this) - // } - // - // toString () { - // return this.join(' ') - // } - // - // valueOf () { - // return this.toArray() - // } - // - // // Parse whitespace separated string - // parse (array) { - // array = array.valueOf() - // - // // if already is an array, no need to parse it - // if (Array.isArray(array)) return array - // - // return array.trim().split(delimiter).map(parseFloat) - // } - // - // clone () { - // return new this.constructor(this) - // } - // - // toSet () { - // return new Set(this) - // } - // } - - var SVGNumber = - /*#__PURE__*/ - function () { - // Initialize - function SVGNumber() { - _classCallCheck(this, SVGNumber); - - this.init.apply(this, arguments); - } - - _createClass(SVGNumber, [{ - key: "init", - value: function init(value, unit) { - unit = Array.isArray(value) ? value[1] : unit; - value = Array.isArray(value) ? value[0] : value; // initialize defaults - - this.value = 0; - this.unit = unit || ''; // parse value - - if (typeof value === 'number') { - // ensure a valid numeric value - this.value = isNaN(value) ? 0 : !isFinite(value) ? value < 0 ? -3.4e+38 : +3.4e+38 : value; - } else if (typeof value === 'string') { - unit = value.match(numberAndUnit); - - if (unit) { - // make value numeric - this.value = parseFloat(unit[1]); // normalize - - if (unit[5] === '%') { - this.value /= 100; - } else if (unit[5] === 's') { - this.value *= 1000; - } // store unit - - - this.unit = unit[5]; - } - } else { - if (value instanceof SVGNumber) { - this.value = value.valueOf(); - this.unit = value.unit; - } - } - } - }, { - key: "toString", - value: function toString() { - return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6 : this.unit === 's' ? this.value / 1e3 : this.value) + this.unit; - } - }, { - key: "toJSON", - value: function toJSON() { - return this.toString(); - } - }, { - key: "toArray", - value: function toArray() { - return [this.value, this.unit]; - } - }, { - key: "valueOf", - value: function valueOf() { - return this.value; - } // Add number - - }, { - key: "plus", - value: function plus(number) { - number = new SVGNumber(number); - return new SVGNumber(this + number, this.unit || number.unit); - } // Subtract number - - }, { - key: "minus", - value: function minus(number) { - number = new SVGNumber(number); - return new SVGNumber(this - number, this.unit || number.unit); - } // Multiply number - - }, { - key: "times", - value: function times(number) { - number = new SVGNumber(number); - return new SVGNumber(this * number, this.unit || number.unit); - } // Divide number - - }, { - key: "divide", - value: function divide(number) { - number = new SVGNumber(number); - return new SVGNumber(this / number, this.unit || number.unit); - } - }]); - - return SVGNumber; - }(); - // Set svg element attribute function attr(attr, val, ns) { @@ -1331,7 +1476,7 @@ var SVG = (function () { } return this; - } // registerMethods('Element', {attr}) + } var Dom = /*#__PURE__*/ @@ -1534,7 +1679,7 @@ var SVG = (function () { }, { key: "replace", value: function replace(element) { - // FIXME: after might not be available here + // FIXME: after() might not be available here this.after(element).remove(); return element; } // Return id on string conversion @@ -1737,21 +1882,7 @@ var SVG = (function () { }]); return Element; - }(Dom); // registerMethods('Element', { - - var Shape = - /*#__PURE__*/ - function (_Element) { - _inherits(Shape, _Element); - - function Shape() { - _classCallCheck(this, Shape); - - return _possibleConstructorReturn(this, _getPrototypeOf(Shape).apply(this, arguments)); - } - - return Shape; - }(Element); + }(Dom); var Container = /*#__PURE__*/ @@ -1790,20 +1921,40 @@ var SVG = (function () { return Container; }(Element); - var HtmlNode = + var Bare = /*#__PURE__*/ - function (_Dom) { - _inherits(HtmlNode, _Dom); + function (_Container) { + _inherits(Bare, _Container); - function HtmlNode(node) { - _classCallCheck(this, HtmlNode); + function Bare(node) { + _classCallCheck(this, Bare); - return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).call(this, node, HtmlNode)); + return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), Bare)); } - return HtmlNode; - }(Dom); - register(HtmlNode); + _createClass(Bare, [{ + key: "words", + value: function words(text) { + // remove contents + while (this.node.hasChildNodes()) { + this.node.removeChild(this.node.lastChild); + } // create text node + + + this.node.appendChild(document.createTextNode(text)); + return this; + } + }]); + + return Bare; + }(Container); + register(Bare); + registerMethods('Container', { + // Create an element that is not described by SVG.js + element: function element(node, inherit) { + return this.put(new Bare(node, inherit)); + } + }); var Defs = /*#__PURE__*/ @@ -1832,56 +1983,6 @@ var SVG = (function () { }(Container); register(Defs); - var methods$1 = {}; - 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), - _name2 = _arr$_i[0], - _m = _arr$_i[1]; - - registerMethods(_name2, _m); - } - - return; - } - - methods$1[name] = Object.assign(methods$1[name] || {}, m); - } - function getMethodsFor(name) { - return methods$1[name] || {}; - } // FIXME: save memory? - var Doc$1 = /*#__PURE__*/ function (_Container) { @@ -1910,7 +2011,7 @@ var SVG = (function () { key: "doc", value: function doc() { if (this.isRoot()) return this; - return _get(_getPrototypeOf(Doc.prototype), "doc", this).call(this); // return doc.call(this) + return _get(_getPrototypeOf(Doc.prototype), "doc", this).call(this); } // Add namespaces }, { @@ -1937,20 +2038,8 @@ var SVG = (function () { return this.node.parentNode.nodeName === '#document' ? null : adopt(this.node.parentNode); } - return _get(_getPrototypeOf(Doc.prototype), "parent", this).call(this, type); // return parent.call(this, type) - } // Removes the doc from the DOM - // remove() { - // if (!this.isRoot()) { - // return super.remove() - // } - // - // if (this.parent()) { - // this.parent().remove(this) - // } - // - // return this - // } - + return _get(_getPrototypeOf(Doc.prototype), "parent", this).call(this, type); + } }, { key: "clear", value: function clear() { @@ -1975,216 +2064,231 @@ var SVG = (function () { }); register(Doc$1, 'Doc', true); - var G = - /*#__PURE__*/ - function (_Container) { - _inherits(G, _Container); - - function G(node) { - _classCallCheck(this, G); - - return _possibleConstructorReturn(this, _getPrototypeOf(G).call(this, nodeOrNew('g', node), G)); + function parser() { + // Reuse cached element if possible + if (!parser.nodes) { + var svg = new Doc$1().size(2, 0).css({ + opacity: 0, + position: 'absolute', + left: '-100%', + top: '-100%', + overflow: 'hidden' + }); + var path = svg.path().node; + parser.nodes = { + svg: svg, + path: path + }; } - return G; - }(Container); - registerMethods({ - Element: { - // Create a group element - group: function group() { - return this.put(new G()); - } + if (!parser.nodes.svg.node.parentNode) { + var b = document.body || document.documentElement; + parser.nodes.svg.addTo(b); } - }); - register(G); - var Queue = + return parser.nodes; + } + + var Point = /*#__PURE__*/ function () { - function Queue() { - _classCallCheck(this, Queue); - - this._first = null; - this._last = null; - } - - _createClass(Queue, [{ - key: "push", - value: function push(value) { - // An item stores an id and the provided value - var item = value.next ? value : { - value: value, - next: null, - prev: null // Deal with the queue being empty or populated + // Initialize + function Point(x, y, base) { + _classCallCheck(this, Point); - }; + var source; + base = base || { + x: 0, + y: 0 // ensure source as object - if (this._last) { - item.prev = this._last; - this._last.next = item; - this._last = item; - } else { - this._last = item; - this._first = item; - } // Update the length and return the current item + }; + source = Array.isArray(x) ? { + x: x[0], + y: x[1] + } : _typeof(x) === 'object' ? { + x: x.x, + y: x.y + } : { + x: x, + y: y // merge source + }; + this.x = source.x == null ? base.x : source.x; + this.y = source.y == null ? base.y : source.y; + } // Clone point - return item; - } - }, { - key: "shift", - value: function shift() { - // Check if we have a value - var remove = this._first; - if (!remove) return null; // If we do, remove it and relink things - this._first = remove.next; - if (this._first) this._first.prev = null; - this._last = this._first ? this._last : null; - return remove.value; - } // Shows us the first item in the list + _createClass(Point, [{ + key: "clone", + value: function clone() { + return new Point(this); + } // Convert to native SVGPoint }, { - key: "first", - value: function first() { - return this._first && this._first.value; - } // Shows us the last item in the list + key: "native", + value: function native() { + // create new point + var point = parser().svg.node.createSVGPoint(); // update with current values - }, { - key: "last", - value: function last() { - return this._last && this._last.value; - } // Removes the item that was returned from the push + point.x = this.x; + point.y = this.y; + return point; + } // transform point with matrix }, { - key: "remove", - value: function remove(item) { - // Relink the previous item - if (item.prev) item.prev.next = item.next; - if (item.next) item.next.prev = item.prev; - if (item === this._last) this._last = item.prev; - if (item === this._first) this._first = item.next; // Invalidate item + key: "transform", + value: function transform(m) { + // Perform the matrix multiplication + var x = m.a * this.x + m.c * this.y + m.e; + var y = m.b * this.x + m.d * this.y + m.f; // Return the required point - item.prev = null; - item.next = null; + return new Point(x, y); } }]); - return Queue; + return Point; }(); + registerMethods({ + Element: { + // Get point + point: function point(x, y) { + return new Point(x, y).transform(this.screenCTM().inverse()); + } + } + }); - var Animator = { - nextDraw: null, - frames: new Queue(), - timeouts: new Queue(), - timer: window.performance || window.Date, - transforms: [], - frame: function frame(fn) { - // Store the node - var node = Animator.frames.push({ - run: fn - }); // Request an animation frame if we don't have one - - if (Animator.nextDraw === null) { - Animator.nextDraw = window.requestAnimationFrame(Animator._draw); - } // Return the node so we can remove it easily - + var Box = + /*#__PURE__*/ + function () { + function Box() { + _classCallCheck(this, Box); - return node; - }, - transform_frame: function transform_frame(fn, id) { - Animator.transforms[id] = fn; - }, - timeout: function timeout(fn, delay) { - delay = delay || 0; // Work out when the event should fire + this.init.apply(this, arguments); + } - var time = Animator.timer.now() + delay; // Add the timeout to the end of the queue + _createClass(Box, [{ + key: "init", + value: function init(source) { + var base = [0, 0, 0, 0]; + source = typeof source === 'string' ? source.split(delimiter).map(parseFloat) : Array.isArray(source) ? source : _typeof(source) === 'object' ? [source.left != null ? source.left : source.x, source.top != null ? source.top : source.y, source.width, source.height] : arguments.length === 4 ? [].slice.call(arguments) : base; + this.x = source[0]; + this.y = source[1]; + this.width = source[2]; + this.height = source[3]; // add center, right, bottom... - var node = Animator.timeouts.push({ - run: fn, - time: time - }); // Request another animation frame if we need one + fullBox(this); + } // Merge rect box with another, return a new instance - if (Animator.nextDraw === null) { - Animator.nextDraw = window.requestAnimationFrame(Animator._draw); + }, { + key: "merge", + value: function merge(box) { + var x = Math.min(this.x, box.x); + var y = Math.min(this.y, box.y); + var width = Math.max(this.x + this.width, box.x + box.width) - x; + var height = Math.max(this.y + this.height, box.y + box.height) - y; + return new Box(x, y, width, height); } + }, { + key: "transform", + value: function transform(m) { + var xMin = Infinity; + 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)]; + pts.forEach(function (p) { + p = p.transform(m); + xMin = Math.min(xMin, p.x); + xMax = Math.max(xMax, p.x); + yMin = Math.min(yMin, p.y); + yMax = Math.max(yMax, p.y); + }); + return new Box(xMin, yMin, xMax - xMin, yMax - yMin); + } + }, { + key: "addOffset", + value: function addOffset() { + // offset by window scroll position, because getBoundingClientRect changes when window is scrolled + this.x += window.pageXOffset; + this.y += window.pageYOffset; + return this; + } + }, { + key: "toString", + value: function toString() { + return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height; + } + }, { + key: "toArray", + value: function toArray() { + return [this.x, this.y, this.width, this.height]; + } + }]); - return node; - }, - cancelFrame: function cancelFrame(node) { - Animator.frames.remove(node); - }, - clearTimeout: function clearTimeout(node) { - Animator.timeouts.remove(node); - }, - _draw: function _draw(now) { - // Run all the timeouts we can run, if they are not ready yet, add them - // to the end of the queue immediately! (bad timeouts!!! [sarcasm]) - var nextTimeout = null; - var lastTimeout = Animator.timeouts.last(); - - while (nextTimeout = Animator.timeouts.shift()) { - // Run the timeout if its time, or push it to the end - if (now >= nextTimeout.time) { - nextTimeout.run(); - } else { - Animator.timeouts.push(nextTimeout); - } // If we hit the last item, we should stop shifting out more items + return Box; + }(); + function getBox(cb) { + var box; - if (nextTimeout === lastTimeout) break; - } // Run all of the animation frames + try { + box = cb(this.node); + if (isNulledBox(box) && !domContains(this.node)) { + throw new Error('Element not in the dom'); + } + } catch (e) { + try { + var clone = this.clone(parser().svg).show(); + box = cb(clone.node); + clone.remove(); + } catch (e) { + console.warn('Getting a bounding box of this element is not possible'); + } + } - var nextFrame = null; - var lastFrame = Animator.frames.last(); + return box; + } - while (nextFrame !== lastFrame && (nextFrame = Animator.frames.shift())) { - nextFrame.run(); + registerMethods({ + Element: { + // Get bounding box + bbox: function bbox() { + return new Box(getBox.call(this, function (node) { + return node.getBBox(); + })); + }, + rbox: function rbox(el) { + var box = new Box(getBox.call(this, function (node) { + return node.getBoundingClientRect(); + })); + if (el) return box.transform(el.screenCTM().inverse()); + return box.addOffset(); } + }, + viewbox: { + viewbox: function viewbox(x, y, width, height) { + // act as getter + if (x == null) return new Box(this.attr('viewBox')); // act as setter - Animator.transforms.forEach(function (el) { - el(); - }); // If we have remaining timeouts or frames, draw until we don't anymore - - Animator.nextDraw = Animator.timeouts.first() || Animator.frames.first() ? window.requestAnimationFrame(Animator._draw) : null; + return this.attr('viewBox', new Box(x, y, width, height)); + } } - }; + }); - var Bare = + var Shape = /*#__PURE__*/ - function (_Container) { - _inherits(Bare, _Container); + function (_Element) { + _inherits(Shape, _Element); - function Bare(node) { - _classCallCheck(this, Bare); + function Shape() { + _classCallCheck(this, Shape); - return _possibleConstructorReturn(this, _getPrototypeOf(Bare).call(this, nodeOrNew(node, typeof node === 'string' ? null : node), Bare)); + return _possibleConstructorReturn(this, _getPrototypeOf(Shape).apply(this, arguments)); } - _createClass(Bare, [{ - key: "words", - value: function words(text) { - // remove contents - while (this.node.hasChildNodes()) { - this.node.removeChild(this.node.lastChild); - } // create text node - - - this.node.appendChild(document.createTextNode(text)); - return this; - } - }]); - - return Bare; - }(Container); - register(Bare); - registerMethods('Container', { - // Create an element that is not described by SVG.js - element: function element(node, inherit) { - return this.put(new Bare(node, inherit)); - } - }); + return Shape; + }(Element); // FIXME: import this to runner @@ -2288,28 +2392,6 @@ var SVG = (function () { }); register(Circle); - // SVG.get = function (id) { - // var node = document.getElementById(idFromReference(id) || id) - // return SVG.adopt(node) - // } - // - // // Select elements by query string - // SVG.select = function (query, parent) { - // return SVG.utils.map((parent || document).querySelectorAll(query), function (node) { - // return SVG.adopt(node) - // }) - // } - // - // SVG.$$ = function (query, parent) { - // return SVG.utils.map((parent || document).querySelectorAll(query), function (node) { - // return SVG.adopt(node) - // }) - // } - // - // SVG.$ = function (query, parent) { - // return SVG.adopt((parent || document).querySelector(query)) - // } - function baseFind(query, parent) { return map((parent || document).querySelectorAll(query), function (node) { return adopt(node); @@ -2343,7 +2425,7 @@ var SVG = (function () { el.unclip(); }); // remove clipPath from parent - return _get(_getPrototypeOf(ClipPath.prototype), "remove", this).call(this); // return remove.call(this) + return _get(_getPrototypeOf(ClipPath.prototype), "remove", this).call(this); } }, { key: "targets", @@ -2380,56 +2462,235 @@ var SVG = (function () { }); register(ClipPath); - var A = + /***
+ Base Class
+ ==========
+ The base stepper class that will be
+ ***/ + + function makeSetterGetter(k, f) { + return function (v) { + if (v == null) return this[v]; + this[k] = v; + if (f) f.call(this); + return this; + }; + } + + var easing = { + '-': function _(pos) { + return pos; + }, + '<>': 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 bezier(t0, x0, t1, x1) { + return function (t) {// TODO: FINISH + }; + } + }; + var Stepper = /*#__PURE__*/ - function (_Container) { - _inherits(A, _Container); + function () { + function Stepper() { + _classCallCheck(this, Stepper); + } - function A(node) { - _classCallCheck(this, A); + _createClass(Stepper, [{ + key: "done", + value: function done() { + return false; + } + }]); - return _possibleConstructorReturn(this, _getPrototypeOf(A).call(this, nodeOrNew('a', node), A)); - } // Link url + return Stepper; + }(); + /***
+ Easing Functions
+ ================
+ ***/ + + var Ease = + /*#__PURE__*/ + function (_Stepper) { + _inherits(Ease, _Stepper); + function Ease(fn) { + var _this; - _createClass(A, [{ - key: "to", - value: function to(url) { - return this.attr('href', url, xlink); - } // Link target attribute + _classCallCheck(this, Ease); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Ease).call(this)); + _this.ease = easing[fn || timeline.ease] || fn; + return _this; + } + _createClass(Ease, [{ + key: "step", + value: function step(from, to, pos) { + if (typeof from !== 'number') { + return pos < 1 ? from : to; + } + + return from + (to - from) * this.ease(pos); + } + }]); + + return Ease; + }(Stepper); + /***
+ Controller Types
+ ================
+ ***/ + + var Controller = + /*#__PURE__*/ + function (_Stepper2) { + _inherits(Controller, _Stepper2); + + function Controller(fn) { + var _this2; + + _classCallCheck(this, Controller); + + _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Controller).call(this)); + _this2.stepper = fn; + return _this2; + } + + _createClass(Controller, [{ + key: "step", + value: function step(current, target, dt, c) { + return this.stepper(current, target, dt, c); + } }, { - key: "target", - value: function target(_target) { - return this.attr('target', _target); + key: "done", + value: function done(c) { + return c.done; } }]); - return A; - }(Container); - registerMethods({ - Container: { - // Create a hyperlink element - link: function link(url) { - return this.put(new A()).to(url); + return Controller; + }(Stepper); + + function recalculate() { + // Apply the default parameters + var duration = (this._duration || 500) / 1000; + var overshoot = this._overshoot || 0; // Calculate the PID natural response + + var eps = 1e-10; + var pi = Math.PI; + var os = Math.log(overshoot / 100 + eps); + var zeta = -os / Math.sqrt(pi * pi + os * os); + var wn = 3.9 / (zeta * duration); // Calculate the Spring values + + this.d = 2 * zeta * wn; + this.k = wn * wn; + } + + var Spring = + /*#__PURE__*/ + function (_Controller) { + _inherits(Spring, _Controller); + + function Spring(duration, overshoot) { + var _this3; + + _classCallCheck(this, Spring); + + _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Spring).call(this)); + + _this3.duration(duration || 500).overshoot(overshoot || 0); + + return _this3; + } + + _createClass(Spring, [{ + key: "step", + value: function step(current, target, dt, c) { + if (typeof current === 'string') return current; + c.done = dt === Infinity; + if (dt === Infinity) return target; + if (dt === 0) return current; + if (dt > 100) dt = 16; + dt /= 1000; // Get the previous velocity + + var velocity = c.velocity || 0; // Apply the control to get the new position and store it + + var acceleration = -this.d * velocity - this.k * (current - target); + var newPosition = current + velocity * dt + acceleration * dt * dt / 2; // Store the velocity + + c.velocity = velocity + acceleration * dt; // Figure out if we have converged, and if so, pass the value + + c.done = Math.abs(target - newPosition) + Math.abs(velocity) < 0.002; + return c.done ? target : newPosition; } - }, - Element: { - // Create a hyperlink element - linkTo: function linkTo(url) { - var link = new A(); + }]); - if (typeof url === 'function') { - url.call(link, link); - } else { - link.to(url); + return Spring; + }(Controller); + extend(Spring, { + duration: makeSetterGetter('_duration', recalculate), + overshoot: makeSetterGetter('_overshoot', recalculate) + }); + var PID = + /*#__PURE__*/ + function (_Controller2) { + _inherits(PID, _Controller2); + + function PID(p, i, d, windup) { + var _this4; + + _classCallCheck(this, PID); + + _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PID).call(this)); + p = p == null ? 0.1 : p; + i = i == null ? 0.01 : i; + d = d == null ? 0 : d; + windup = windup == null ? 1000 : windup; + + _this4.p(p).i(i).d(d).windup(windup); + + return _this4; + } + + _createClass(PID, [{ + key: "step", + value: function step(current, target, dt, c) { + if (typeof current === 'string') return current; + c.done = dt === Infinity; + if (dt === Infinity) return target; + if (dt === 0) return current; + var p = target - current; + var i = (c.integral || 0) + p * dt; + var d = (p - (c.error || 0)) / dt; + var windup = this.windup; // antiwindup + + if (windup !== false) { + i = Math.max(-windup, Math.min(i, windup)); } - return this.parent().put(link).put(this); + c.error = p; + c.integral = i; + c.done = Math.abs(p) < 0.001; + return c.done ? target : current + (this.P * p + this.I * i + this.D * d); } - } + }]); + + return PID; + }(Controller); + extend(PID, { + windup: makeSetterGetter('windup'), + p: makeSetterGetter('P'), + i: makeSetterGetter('I'), + d: makeSetterGetter('D') }); - register(A); var Ellipse = /*#__PURE__*/ @@ -2513,218 +2774,6 @@ var SVG = (function () { to: to }); - function parser() { - // Reuse cached element if possible - if (!parser.nodes) { - var svg = new Doc$1().size(2, 0).css({ - opacity: 0, - position: 'absolute', - left: '-100%', - top: '-100%', - overflow: 'hidden' - }); - var path = svg.path().node; - parser.nodes = { - svg: svg, - path: path - }; - } - - if (!parser.nodes.svg.node.parentNode) { - var b = document.body || document.documentElement; - parser.nodes.svg.addTo(b); - } - - return parser.nodes; - } - - var Point = - /*#__PURE__*/ - function () { - // Initialize - function Point(x, y, base) { - _classCallCheck(this, Point); - - var source; - base = base || { - x: 0, - y: 0 // ensure source as object - - }; - source = Array.isArray(x) ? { - x: x[0], - y: x[1] - } : _typeof(x) === 'object' ? { - x: x.x, - y: x.y - } : { - x: x, - y: y // merge source - - }; - this.x = source.x == null ? base.x : source.x; - this.y = source.y == null ? base.y : source.y; - } // Clone point - - - _createClass(Point, [{ - key: "clone", - value: function clone() { - return new Point(this); - } // Convert to native SVGPoint - - }, { - key: "native", - value: function native() { - // create new point - var point = parser().svg.node.createSVGPoint(); // update with current values - - point.x = this.x; - point.y = this.y; - return point; - } // transform point with matrix - - }, { - key: "transform", - value: function transform(m) { - // Perform the matrix multiplication - var x = m.a * this.x + m.c * this.y + m.e; - var y = m.b * this.x + m.d * this.y + m.f; // Return the required point - - return new Point(x, y); - } - }]); - - return Point; - }(); - registerMethods({ - Element: { - // Get point - point: function point(x, y) { - return new Point(x, y).transform(this.screenCTM().inverse()); - } - } - }); - - var Box = - /*#__PURE__*/ - function () { - function Box() { - _classCallCheck(this, Box); - - this.init.apply(this, arguments); - } - - _createClass(Box, [{ - key: "init", - value: function init(source) { - var base = [0, 0, 0, 0]; - source = typeof source === 'string' ? source.split(delimiter).map(parseFloat) : Array.isArray(source) ? source : _typeof(source) === 'object' ? [source.left != null ? source.left : source.x, source.top != null ? source.top : source.y, source.width, source.height] : arguments.length === 4 ? [].slice.call(arguments) : base; - this.x = source[0]; - this.y = source[1]; - this.width = source[2]; - this.height = source[3]; // add center, right, bottom... - - fullBox(this); - } // Merge rect box with another, return a new instance - - }, { - key: "merge", - value: function merge(box) { - var x = Math.min(this.x, box.x); - var y = Math.min(this.y, box.y); - var width = Math.max(this.x + this.width, box.x + box.width) - x; - var height = Math.max(this.y + this.height, box.y + box.height) - y; - return new Box(x, y, width, height); - } - }, { - key: "transform", - value: function transform(m) { - var xMin = Infinity; - 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)]; - pts.forEach(function (p) { - p = p.transform(m); - xMin = Math.min(xMin, p.x); - xMax = Math.max(xMax, p.x); - yMin = Math.min(yMin, p.y); - yMax = Math.max(yMax, p.y); - }); - return new Box(xMin, yMin, xMax - xMin, yMax - yMin); - } - }, { - key: "addOffset", - value: function addOffset() { - // offset by window scroll position, because getBoundingClientRect changes when window is scrolled - this.x += window.pageXOffset; - this.y += window.pageYOffset; - return this; - } - }, { - key: "toString", - value: function toString() { - return this.x + ' ' + this.y + ' ' + this.width + ' ' + this.height; - } - }, { - key: "toArray", - value: function toArray() { - return [this.x, this.y, this.width, this.height]; - } - }]); - - return Box; - }(); - - function getBox(cb) { - var box; - - try { - box = cb(this.node); - - if (isNulledBox(box) && !domContains(this.node)) { - throw new Error('Element not in the dom'); - } - } catch (e) { - try { - var clone = this.clone(parser().svg).show(); - box = cb(clone.node); - clone.remove(); - } catch (e) { - console.warn('Getting a bounding box of this element is not possible'); - } - } - - return box; - } - - registerMethods({ - Element: { - // Get bounding box - bbox: function bbox() { - return new Box(getBox.call(this, function (node) { - return node.getBBox(); - })); - }, - rbox: function rbox(el) { - var box = new Box(getBox.call(this, function (node) { - return node.getBoundingClientRect(); - })); - if (el) return box.transform(el.screenCTM().inverse()); - return box.addOffset(); - } - }, - viewbox: { - viewbox: function viewbox(x, y, width, height) { - // act as getter - if (x == null) return new Box(this.attr('viewBox')); // act as setter - - return this.attr('viewBox', new Box(x, y, width, height)); - } - } - }); - var Gradient = /*#__PURE__*/ function (_Container) { @@ -2772,7 +2821,7 @@ var SVG = (function () { key: "attr", value: function attr(a, b, c) { if (a === 'transform') a = 'gradientTransform'; - return _get(_getPrototypeOf(Gradient.prototype), "attr", this).call(this, a, b, c); // return attr.call(this, a, b, c) + return _get(_getPrototypeOf(Gradient.prototype), "attr", this).call(this, a, b, c); } }, { key: "targets", @@ -2805,6 +2854,95 @@ var SVG = (function () { }); register(Gradient); + var G = + /*#__PURE__*/ + function (_Container) { + _inherits(G, _Container); + + function G(node) { + _classCallCheck(this, G); + + return _possibleConstructorReturn(this, _getPrototypeOf(G).call(this, nodeOrNew('g', node), G)); + } + + return G; + }(Container); + registerMethods({ + Element: { + // Create a group element + group: function group() { + return this.put(new G()); + } + } + }); + register(G); + + var HtmlNode = + /*#__PURE__*/ + function (_Dom) { + _inherits(HtmlNode, _Dom); + + function HtmlNode(node) { + _classCallCheck(this, HtmlNode); + + return _possibleConstructorReturn(this, _getPrototypeOf(HtmlNode).call(this, node, HtmlNode)); + } + + return HtmlNode; + }(Dom); + register(HtmlNode); + + var A = + /*#__PURE__*/ + function (_Container) { + _inherits(A, _Container); + + function A(node) { + _classCallCheck(this, A); + + return _possibleConstructorReturn(this, _getPrototypeOf(A).call(this, nodeOrNew('a', node), A)); + } // Link url + + + _createClass(A, [{ + key: "to", + value: function to(url) { + return this.attr('href', url, xlink); + } // Link target attribute + + }, { + key: "target", + value: function target(_target) { + return this.attr('target', _target); + } + }]); + + return A; + }(Container); + registerMethods({ + Container: { + // Create a hyperlink element + link: function link(url) { + return this.put(new A()).to(url); + } + }, + Element: { + // Create a hyperlink element + linkTo: function linkTo(url) { + var link = new A(); + + if (typeof url === 'function') { + url.call(link, link); + } else { + link.to(url); + } + + return this.parent().put(link).put(this); + } + } + }); + register(A); + var Pattern = /*#__PURE__*/ function (_Container) { @@ -2847,7 +2985,7 @@ var SVG = (function () { key: "attr", value: function attr(a, b, c) { if (a === 'transform') a = 'patternTransform'; - return _get(_getPrototypeOf(Pattern.prototype), "attr", this).call(this, a, b, c); // return attr.call(this, a, b, c) + return _get(_getPrototypeOf(Pattern.prototype), "attr", this).call(this, a, b, c); } }, { key: "targets", @@ -3056,129 +3194,7 @@ var SVG = (function () { height: maxY - minY }; } - }); // export default class PointArray extends SVGArray { - // constructor (array, fallback = [[0, 0]]) { - // super(array, fallback) - // } - // - // // Convert array to string - // toString () { - // // convert to a poly point string - // for (var i = 0, il = this.length, array = []; i < il; i++) { - // array.push(this[i].join(',')) - // } - // - // return array.join(' ') - // } - // - // // toArray () { - // // return this.reduce(function (prev, curr) { - // // return [].concat.call(prev, curr) - // // }, []) - // // } - // - // // Convert array to line object - // toLine () { - // return { - // x1: this[0][0], - // y1: this[0][1], - // x2: this[1][0], - // y2: this[1][1] - // } - // } - // - // // Get morphed array at given position - // at (pos) { - // // make sure a destination is defined - // if (!this.destination) return this - // - // // generate morphed point string - // for (var i = 0, il = this.length, array = []; i < il; i++) { - // array.push([ - // this[i][0] + (this.destination[i][0] - this[i][0]) * pos, - // this[i][1] + (this.destination[i][1] - this[i][1]) * pos - // ]) - // } - // - // return new PointArray(array) - // } - // - // // Parse point string and flat array - // parse (array) { - // var points = [] - // - // array = array.valueOf() - // - // // if it is an array - // if (Array.isArray(array)) { - // // and it is not flat, there is no need to parse it - // if (Array.isArray(array[0])) { - // return array - // } - // } else { // Else, it is considered as a string - // // parse points - // array = array.trim().split(delimiter).map(parseFloat) - // } - // - // // validate points - https://svgwg.org/svg2-draft/shapes.html#DataTypePoints - // // Odd number of coordinates is an error. In such cases, drop the last odd coordinate. - // if (array.length % 2 !== 0) array.pop() - // - // // wrap points in two-tuples and parse points as floats - // for (var i = 0, len = array.length; i < len; i = i + 2) { - // points.push([ array[i], array[i + 1] ]) - // } - // - // return points - // } - // - // // Move point string - // move (x, y) { - // var box = this.bbox() - // - // // get relative offset - // x -= box.x - // y -= box.y - // - // // move every point - // if (!isNaN(x) && !isNaN(y)) { - // for (var i = this.length - 1; i >= 0; i--) { - // this[i] = [this[i][0] + x, this[i][1] + y] - // } - // } - // - // return this - // } - // - // // Resize poly string - // size (width, height) { - // var i - // var box = this.bbox() - // - // // recalculate position of all points according to new size - // for (i = this.length - 1; i >= 0; i--) { - // if (box.width) this[i][0] = ((this[i][0] - box.x) * width) / box.width + box.x - // if (box.height) this[i][1] = ((this[i][1] - box.y) * height) / box.height + box.y - // } - // - // return this - // } - // - // // Get bounding box of points - // bbox () { - // var maxX = -Infinity - // var maxY = -Infinity - // var minX = Infinity - // var minY = Infinity - // this.forEach(function (el) { - // maxX = Math.max(el[0], maxX) - // maxY = Math.max(el[1], maxY) - // minX = Math.min(el[0], minX) - // minY = Math.min(el[1], minY) - // }) - // return {x: minX, y: minY, width: maxX - minX, height: maxY - minY} - // } - // } + }); var MorphArray = PointArray; // Move by left top corner over x-axis @@ -3382,7 +3398,7 @@ var SVG = (function () { el.unmask(); }); // remove mask from parent - return _get(_getPrototypeOf(Mask.prototype), "remove", this).call(this); // return remove.call(this) + return _get(_getPrototypeOf(Mask.prototype), "remove", this).call(this); } }, { key: "targets", @@ -3418,1120 +3434,6 @@ var SVG = (function () { }); register(Mask); - var PathArray = subClassArray('PathArray', SVGArray); - var pathHandlers = { - M: function M(c, p, p0) { - p.x = p0.x = c[0]; - p.y = p0.y = c[1]; - return ['M', p.x, p.y]; - }, - L: function L(c, p) { - p.x = c[0]; - p.y = c[1]; - return ['L', c[0], c[1]]; - }, - H: function H(c, p) { - p.x = c[0]; - return ['H', c[0]]; - }, - V: function V(c, p) { - p.y = c[0]; - return ['V', c[0]]; - }, - C: function C(c, p) { - p.x = c[4]; - p.y = c[5]; - return ['C', c[0], c[1], c[2], c[3], c[4], c[5]]; - }, - S: function S(c, p) { - p.x = c[2]; - p.y = c[3]; - return ['S', c[0], c[1], c[2], c[3]]; - }, - Q: function Q(c, p) { - p.x = c[2]; - p.y = c[3]; - return ['Q', c[0], c[1], c[2], c[3]]; - }, - T: function T(c, p) { - p.x = c[0]; - p.y = c[1]; - return ['T', c[0], c[1]]; - }, - Z: function Z(c, p, p0) { - p.x = p0.x; - p.y = p0.y; - return ['Z']; - }, - A: function A(c, p) { - p.x = c[5]; - p.y = c[6]; - return ['A', c[0], c[1], c[2], c[3], c[4], c[5], c[6]]; - } - }; - var mlhvqtcsaz = 'mlhvqtcsaz'.split(''); - - for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) { - pathHandlers[mlhvqtcsaz[i]] = function (i) { - return function (c, p, p0) { - if (i === 'H') c[0] = c[0] + p.x;else if (i === 'V') c[0] = c[0] + p.y;else if (i === 'A') { - c[5] = c[5] + p.x; - c[6] = c[6] + p.y; - } else { - for (var j = 0, jl = c.length; j < jl; ++j) { - c[j] = c[j] + (j % 2 ? p.y : p.x); - } - } - return pathHandlers[i](c, p, p0); - }; - }(mlhvqtcsaz[i].toUpperCase()); - } - - extend(PathArray, { - // Convert array to string - toString: function toString() { - return arrayToString(this); - }, - // Move path string - move: function move(x, y) { - // get bounding box of current situation - var box = this.bbox(); // get relative offset - - x -= box.x; - y -= box.y; - - if (!isNaN(x) && !isNaN(y)) { - // move every point - for (var l, i = this.length - 1; i >= 0; i--) { - l = this[i][0]; - - if (l === 'M' || l === 'L' || l === 'T') { - this[i][1] += x; - this[i][2] += y; - } else if (l === 'H') { - this[i][1] += x; - } else if (l === 'V') { - this[i][1] += y; - } else if (l === 'C' || l === 'S' || l === 'Q') { - this[i][1] += x; - this[i][2] += y; - this[i][3] += x; - this[i][4] += y; - - if (l === 'C') { - this[i][5] += x; - this[i][6] += y; - } - } else if (l === 'A') { - this[i][6] += x; - this[i][7] += y; - } - } - } - - return this; - }, - // Resize path string - size: function size(width, height) { - // get bounding box of current situation - var box = this.bbox(); - var i, l; // recalculate position of all points according to new size - - for (i = this.length - 1; i >= 0; i--) { - l = this[i][0]; - - if (l === 'M' || l === 'L' || l === 'T') { - this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; - this[i][2] = (this[i][2] - box.y) * height / box.height + box.y; - } else if (l === 'H') { - this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; - } else if (l === 'V') { - this[i][1] = (this[i][1] - box.y) * height / box.height + box.y; - } else if (l === 'C' || l === 'S' || l === 'Q') { - this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; - this[i][2] = (this[i][2] - box.y) * height / box.height + box.y; - this[i][3] = (this[i][3] - box.x) * width / box.width + box.x; - this[i][4] = (this[i][4] - box.y) * height / box.height + box.y; - - if (l === 'C') { - this[i][5] = (this[i][5] - box.x) * width / box.width + box.x; - this[i][6] = (this[i][6] - box.y) * height / box.height + box.y; - } - } else if (l === 'A') { - // resize radii - this[i][1] = this[i][1] * width / box.width; - this[i][2] = this[i][2] * height / box.height; // move position values - - this[i][6] = (this[i][6] - box.x) * width / box.width + box.x; - this[i][7] = (this[i][7] - box.y) * height / box.height + box.y; - } - } - - return this; - }, - // Test if the passed path array use the same path data commands as this path array - equalCommands: function equalCommands(pathArray) { - var i, il, equalCommands; - pathArray = new PathArray(pathArray); - equalCommands = this.length === pathArray.length; - - for (i = 0, il = this.length; equalCommands && i < il; i++) { - equalCommands = this[i][0] === pathArray[i][0]; - } - - return equalCommands; - }, - // Make path array morphable - morph: function morph(pathArray) { - pathArray = new PathArray(pathArray); - - if (this.equalCommands(pathArray)) { - this.destination = pathArray; - } else { - this.destination = null; - } - - return this; - }, - // Get morphed path array at given position - at: function at(pos) { - // make sure a destination is defined - if (!this.destination) return this; - var sourceArray = this; - var destinationArray = this.destination.value; - var array = []; - var pathArray = new PathArray(); - var i, il, j, jl; // Animate has specified in the SVG spec - // See: https://www.w3.org/TR/SVG11/paths.html#PathElement - - for (i = 0, il = sourceArray.length; i < il; i++) { - array[i] = [sourceArray[i][0]]; - - for (j = 1, jl = sourceArray[i].length; j < jl; j++) { - array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos; - } // For the two flags of the elliptical arc command, the SVG spec say: - // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true - // Elliptical arc command as an array followed by corresponding indexes: - // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y] - // 0 1 2 3 4 5 6 7 - - - if (array[i][0] === 'A') { - array[i][4] = +(array[i][4] !== 0); - array[i][5] = +(array[i][5] !== 0); - } - } // Directly modify the value of a path array, this is done this way for performance - - - pathArray.value = array; - return pathArray; - }, - // Absolutize and parse path to array - parse: function parse() { - var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [['M', 0, 0]]; - // if it's already a patharray, no need to parse it - if (array instanceof PathArray) return array; // prepare for parsing - - var s; - var paramCnt = { - 'M': 2, - 'L': 2, - 'H': 1, - 'V': 1, - 'C': 6, - 'S': 4, - 'Q': 4, - 'T': 2, - 'A': 7, - 'Z': 0 - }; - - if (typeof array === 'string') { - array = array.replace(numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123 - .replace(pathLetters, ' $& ') // put some room between letters and numbers - .replace(hyphen, '$1 -') // add space before hyphen - .trim() // trim - .split(delimiter); // split into array - } else { - array = array.reduce(function (prev, curr) { - return [].concat.call(prev, curr); - }, []); - } // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...] - - - var result = []; - var p = new Point(); - var p0 = new Point(); - var index = 0; - var len = array.length; - - do { - // Test if we have a path letter - if (isPathLetter.test(array[index])) { - s = array[index]; - ++index; // If last letter was a move command and we got no new, it defaults to [L]ine - } else if (s === 'M') { - s = 'L'; - } else if (s === 'm') { - s = 'l'; - } - - result.push(pathHandlers[s].call(null, array.slice(index, index = index + paramCnt[s.toUpperCase()]).map(parseFloat), p, p0)); - } while (len > index); - - return result; - }, - // Get bounding box of path - bbox: function bbox() { - parser().path.setAttribute('d', this.toString()); - return parser.nodes.path.getBBox(); - } - }); // export default class PathArray extends SVGArray { - // constructor (array, fallback = [['M', 0, 0]]) { - // super(array, fallback) - // } - // - // // Convert array to string - // toString () { - // return arrayToString(this) - // } - // - // toArray () { - // return this.reduce(function (prev, curr) { - // return [].concat.call(prev, curr) - // }, []) - // } - // - // // Move path string - // move (x, y) { - // // get bounding box of current situation - // var box = this.bbox() - // - // // get relative offset - // x -= box.x - // y -= box.y - // - // if (!isNaN(x) && !isNaN(y)) { - // // move every point - // for (var l, i = this.length - 1; i >= 0; i--) { - // l = this[i][0] - // - // if (l === 'M' || l === 'L' || l === 'T') { - // this[i][1] += x - // this[i][2] += y - // } else if (l === 'H') { - // this[i][1] += x - // } else if (l === 'V') { - // this[i][1] += y - // } else if (l === 'C' || l === 'S' || l === 'Q') { - // this[i][1] += x - // this[i][2] += y - // this[i][3] += x - // this[i][4] += y - // - // if (l === 'C') { - // this[i][5] += x - // this[i][6] += y - // } - // } else if (l === 'A') { - // this[i][6] += x - // this[i][7] += y - // } - // } - // } - // - // return this - // } - // - // // Resize path string - // size (width, height) { - // // get bounding box of current situation - // var box = this.bbox() - // var i, l - // - // // recalculate position of all points according to new size - // for (i = this.length - 1; i >= 0; i--) { - // l = this[i][0] - // - // if (l === 'M' || l === 'L' || l === 'T') { - // this[i][1] = ((this[i][1] - box.x) * width) / box.width + box.x - // this[i][2] = ((this[i][2] - box.y) * height) / box.height + box.y - // } else if (l === 'H') { - // this[i][1] = ((this[i][1] - box.x) * width) / box.width + box.x - // } else if (l === 'V') { - // this[i][1] = ((this[i][1] - box.y) * height) / box.height + box.y - // } else if (l === 'C' || l === 'S' || l === 'Q') { - // this[i][1] = ((this[i][1] - box.x) * width) / box.width + box.x - // this[i][2] = ((this[i][2] - box.y) * height) / box.height + box.y - // this[i][3] = ((this[i][3] - box.x) * width) / box.width + box.x - // this[i][4] = ((this[i][4] - box.y) * height) / box.height + box.y - // - // if (l === 'C') { - // this[i][5] = ((this[i][5] - box.x) * width) / box.width + box.x - // this[i][6] = ((this[i][6] - box.y) * height) / box.height + box.y - // } - // } else if (l === 'A') { - // // resize radii - // this[i][1] = (this[i][1] * width) / box.width - // this[i][2] = (this[i][2] * height) / box.height - // - // // move position values - // this[i][6] = ((this[i][6] - box.x) * width) / box.width + box.x - // this[i][7] = ((this[i][7] - box.y) * height) / box.height + box.y - // } - // } - // - // return this - // } - // - // // Test if the passed path array use the same path data commands as this path array - // equalCommands (pathArray) { - // var i, il, equalCommands - // - // pathArray = new PathArray(pathArray) - // - // equalCommands = this.length === pathArray.value.length - // for (i = 0, il = this.length; equalCommands && i < il; i++) { - // equalCommands = this[i][0] === pathArray.value[i][0] - // } - // - // return equalCommands - // } - // - // // Make path array morphable - // morph (pathArray) { - // pathArray = new PathArray(pathArray) - // - // if (this.equalCommands(pathArray)) { - // this.destination = pathArray - // } else { - // this.destination = null - // } - // - // return this - // } - // - // // Get morphed path array at given position - // at (pos) { - // // make sure a destination is defined - // if (!this.destination) return this - // - // var sourceArray = this - // var destinationArray = this.destination.value - // var array = [] - // var pathArray = new PathArray() - // var i, il, j, jl - // - // // Animate has specified in the SVG spec - // // See: https://www.w3.org/TR/SVG11/paths.html#PathElement - // for (i = 0, il = sourceArray.length; i < il; i++) { - // array[i] = [sourceArray[i][0]] - // for (j = 1, jl = sourceArray[i].length; j < jl; j++) { - // array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos - // } - // // For the two flags of the elliptical arc command, the SVG spec say: - // // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true - // // Elliptical arc command as an array followed by corresponding indexes: - // // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y] - // // 0 1 2 3 4 5 6 7 - // if (array[i][0] === 'A') { - // array[i][4] = +(array[i][4] !== 0) - // array[i][5] = +(array[i][5] !== 0) - // } - // } - // - // // Directly modify the value of a path array, this is done this way for performance - // pathArray.value = array - // return pathArray - // } - // - // // Absolutize and parse path to array - // parse (array) { - // // if it's already a patharray, no need to parse it - // if (array instanceof PathArray) return array.valueOf() - // - // // prepare for parsing - // var s - // var paramCnt = { 'M': 2, 'L': 2, 'H': 1, 'V': 1, 'C': 6, 'S': 4, 'Q': 4, 'T': 2, 'A': 7, 'Z': 0 } - // - // if (typeof array === 'string') { - // array = array - // .replace(numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123 - // .replace(pathLetters, ' $& ') // put some room between letters and numbers - // .replace(hyphen, '$1 -') // add space before hyphen - // .trim() // trim - // .split(delimiter) // split into array - // } else { - // array = array.reduce(function (prev, curr) { - // return [].concat.call(prev, curr) - // }, []) - // } - // - // // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...] - // var result = [] - // var p = new Point() - // var p0 = new Point() - // var index = 0 - // var len = array.length - // - // do { - // // Test if we have a path letter - // if (isPathLetter.test(array[index])) { - // s = array[index] - // ++index - // // If last letter was a move command and we got no new, it defaults to [L]ine - // } else if (s === 'M') { - // s = 'L' - // } else if (s === 'm') { - // s = 'l' - // } - // - // result.push(pathHandlers[s].call(null, - // array.slice(index, (index = index + paramCnt[s.toUpperCase()])).map(parseFloat), - // p, p0 - // ) - // ) - // } while (len > index) - // - // return result - // } - // - // // Get bounding box of path - // bbox () { - // parser().path.setAttribute('d', this.toString()) - // return parser.nodes.path.getBBox() - // } - // } - - var Path = - /*#__PURE__*/ - function (_Shape) { - _inherits(Path, _Shape); - - // Initialize node - function Path(node) { - _classCallCheck(this, Path); - - return _possibleConstructorReturn(this, _getPrototypeOf(Path).call(this, nodeOrNew('path', node), Path)); - } // Get array - - - _createClass(Path, [{ - key: "array", - value: function array() { - return this._array || (this._array = new PathArray(this.attr('d'))); - } // Plot new path - - }, { - key: "plot", - value: function plot(d) { - return d == null ? this.array() : this.clear().attr('d', typeof d === 'string' ? d : this._array = new PathArray(d)); - } // Clear array cache - - }, { - key: "clear", - value: function clear() { - delete this._array; - return this; - } // Move by left top corner - - }, { - key: "move", - value: function move(x, y) { - return this.attr('d', this.array().move(x, y)); - } // Move by left top corner over x-axis - - }, { - key: "x", - value: function x(_x) { - return _x == null ? this.bbox().x : this.move(_x, this.bbox().y); - } // Move by left top corner over y-axis - - }, { - key: "y", - value: function y(_y) { - return _y == null ? this.bbox().y : this.move(this.bbox().x, _y); - } // Set element size to given width and height - - }, { - key: "size", - value: function size(width, height) { - var p = proportionalSize(this, width, height); - return this.attr('d', this.array().size(p.width, p.height)); - } // Set width of element - - }, { - key: "width", - value: function width(_width) { - return _width == null ? this.bbox().width : this.size(_width, this.bbox().height); - } // Set height of element - - }, { - key: "height", - value: function height(_height) { - return _height == null ? this.bbox().height : this.size(this.bbox().width, _height); - } - }, { - key: "targets", - value: function targets() { - return baseFind('svg textpath [href*="' + this.id() + '"]'); - } - }]); - - return Path; - }(Shape); // Define morphable array - Path.prototype.MorphArray = PathArray; // Add parent method - - registerMethods({ - Container: { - // Create a wrapped path element - path: function path(d) { - // make sure plot is called as a setter - return this.put(new Path()).plot(d || new PathArray()); - } - } - }); - register(Path); - - // Add polygon-specific functions - - function array() { - return this._array || (this._array = new PointArray(this.attr('points'))); - } // Plot new path - - function plot(p) { - return p == null ? this.array() : this.clear().attr('points', typeof p === 'string' ? p : this._array = new PointArray(p)); - } // Clear array cache - - function clear() { - delete this._array; - return this; - } // Move by left top corner - - function move(x, y) { - return this.attr('points', this.array().move(x, y)); - } // Set element size to given width and height - - function size$1(width, height) { - var p = proportionalSize(this, width, height); - return this.attr('points', this.array().size(p.width, p.height)); - } - - var poly = /*#__PURE__*/Object.freeze({ - array: array, - plot: plot, - clear: clear, - move: move, - size: size$1 - }); - - var Polygon = - /*#__PURE__*/ - function (_Shape) { - _inherits(Polygon, _Shape); - - // Initialize node - function Polygon(node) { - _classCallCheck(this, Polygon); - - return _possibleConstructorReturn(this, _getPrototypeOf(Polygon).call(this, nodeOrNew('polygon', node), Polygon)); - } - - return Polygon; - }(Shape); - registerMethods({ - Container: { - // Create a wrapped polygon element - polygon: function polygon(p) { - // make sure plot is called as a setter - return this.put(new Polygon()).plot(p || new PointArray()); - } - } - }); - extend(Polygon, pointed); - extend(Polygon, poly); - register(Polygon); - - var Polyline = - /*#__PURE__*/ - function (_Shape) { - _inherits(Polyline, _Shape); - - // Initialize node - function Polyline(node) { - _classCallCheck(this, Polyline); - - return _possibleConstructorReturn(this, _getPrototypeOf(Polyline).call(this, nodeOrNew('polyline', node), Polyline)); - } - - return Polyline; - }(Shape); - registerMethods({ - Container: { - // Create a wrapped polygon element - polyline: function polyline(p) { - // make sure plot is called as a setter - return this.put(new Polyline()).plot(p || new PointArray()); - } - } - }); - extend(Polyline, pointed); - extend(Polyline, poly); - register(Polyline); - - var Rect = - /*#__PURE__*/ - function (_Shape) { - _inherits(Rect, _Shape); - - // Initialize node - function Rect(node) { - _classCallCheck(this, Rect); - - return _possibleConstructorReturn(this, _getPrototypeOf(Rect).call(this, nodeOrNew('rect', node), Rect)); - } // FIXME: unify with circle - // Radius x value - - - _createClass(Rect, [{ - key: "rx", - value: function rx(_rx) { - return this.attr('rx', _rx); - } // Radius y value - - }, { - key: "ry", - value: function ry(_ry) { - return this.attr('ry', _ry); - } - }]); - - return Rect; - }(Shape); - registerMethods({ - Container: { - // Create a rect element - rect: function rect(width, height) { - return this.put(new Rect()).size(width, height); - } - } - }); - register(Rect); - - var _Symbol = - /*#__PURE__*/ - function (_Container) { - _inherits(_Symbol, _Container); - - // Initialize node - function _Symbol(node) { - _classCallCheck(this, _Symbol); - - return _possibleConstructorReturn(this, _getPrototypeOf(_Symbol).call(this, nodeOrNew('symbol', node), _Symbol)); - } - - return _Symbol; - }(Container); - registerMethods({ - Container: { - symbol: function symbol() { - return this.put(new _Symbol()); - } - } - }); - register(_Symbol); - - // Create plain text node - function plain(text) { - // clear if build mode is disabled - if (this._build === false) { - this.clear(); - } // create text node - - - this.node.appendChild(document.createTextNode(text)); - return this; - } // FIXME: Does this also work for textpath? - // Get length of text element - - function length() { - return this.node.getComputedTextLength(); - } - - var textable = /*#__PURE__*/Object.freeze({ - plain: plain, - length: length - }); - - var Text = - /*#__PURE__*/ - function (_Shape) { - _inherits(Text, _Shape); - - // Initialize node - function Text(node) { - var _this; - - _classCallCheck(this, Text); - - _this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, nodeOrNew('text', node), Text)); - _this.dom.leading = new SVGNumber(1.3); // store leading value for rebuilding - - _this._rebuild = true; // enable automatic updating of dy values - - _this._build = false; // disable build mode for adding multiple lines - // set default font - - _this.attr('font-family', attrs['font-family']); - - return _this; - } // Move over x-axis - - - _createClass(Text, [{ - key: "x", - value: function x(_x) { - // act as getter - if (_x == null) { - return this.attr('x'); - } - - return this.attr('x', _x); - } // Move over y-axis - - }, { - key: "y", - value: function y(_y) { - var oy = this.attr('y'); - var o = typeof oy === 'number' ? oy - this.bbox().y : 0; // act as getter - - if (_y == null) { - return typeof oy === 'number' ? oy - o : oy; - } - - return this.attr('y', typeof _y === 'number' ? _y + o : _y); - } // Move center over x-axis - - }, { - key: "cx", - value: function cx(x) { - return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2); - } // Move center over y-axis - - }, { - key: "cy", - value: function cy(y) { - return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2); - } // Set the text content - - }, { - key: "text", - value: function text(_text) { - // act as getter - if (_text === undefined) { - // FIXME use children() or each() - var children = this.node.childNodes; - var firstLine = 0; - _text = ''; - - for (var i = 0, len = children.length; i < len; ++i) { - // skip textPaths - they are no lines - if (children[i].nodeName === 'textPath') { - if (i === 0) firstLine = 1; - continue; - } // add newline if its not the first child and newLined is set to true - - - if (i !== firstLine && children[i].nodeType !== 3 && adopt(children[i]).dom.newLined === true) { - _text += '\n'; - } // add content of this node - - - _text += children[i].textContent; - } - - return _text; - } // remove existing content - - - this.clear().build(true); - - if (typeof _text === 'function') { - // call block - _text.call(this, this); - } else { - // store text and make sure text is not blank - _text = _text.split('\n'); // build new lines - - for (var j = 0, jl = _text.length; j < jl; j++) { - this.tspan(_text[j]).newLine(); - } - } // disable build mode and rebuild lines - - - return this.build(false).rebuild(); - } // Set / get leading - - }, { - key: "leading", - value: function leading(value) { - // act as getter - if (value == null) { - return this.dom.leading; - } // act as setter - - - this.dom.leading = new SVGNumber(value); - return this.rebuild(); - } // Rebuild appearance type - - }, { - key: "rebuild", - value: function rebuild(_rebuild) { - // store new rebuild flag if given - if (typeof _rebuild === 'boolean') { - this._rebuild = _rebuild; - } // define position of all lines - - - if (this._rebuild) { - var self = this; - var blankLineOffset = 0; - var dy = this.dom.leading * new SVGNumber(this.attr('font-size')); - this.each(function () { - if (this.dom.newLined) { - this.attr('x', self.attr('x')); - - if (this.text() === '\n') { - blankLineOffset += dy; - } else { - this.attr('dy', dy + blankLineOffset); - blankLineOffset = 0; - } - } - }); - this.fire('rebuild'); - } - - return this; - } // Enable / disable build mode - - }, { - key: "build", - value: function build(_build) { - this._build = !!_build; - return this; - } // overwrite method from parent to set data properly - - }, { - key: "setData", - value: function setData(o) { - this.dom = o; - this.dom.leading = new SVGNumber(o.leading || 1.3); - return this; - } - }]); - - return Text; - }(Shape); - extend(Text, textable); - registerMethods({ - Container: { - // Create text element - text: function text(_text2) { - return this.put(new Text()).text(_text2); - }, - // Create plain text element - plain: function plain$$1(text) { - return this.put(new Text()).plain(text); - } - } - }); - register(Text); - - var TextPath = - /*#__PURE__*/ - function (_Text) { - _inherits(TextPath, _Text); - - // Initialize node - function TextPath(node) { - _classCallCheck(this, TextPath); - - return _possibleConstructorReturn(this, _getPrototypeOf(TextPath).call(this, nodeOrNew('textPath', node), TextPath)); - } // return the array of the path track element - - - _createClass(TextPath, [{ - key: "array", - value: function array() { - var track = this.track(); - return track ? track.array() : null; - } // Plot path if any - - }, { - key: "plot", - value: function plot(d) { - var track = this.track(); - var pathArray = null; - - if (track) { - pathArray = track.plot(d); - } - - return d == null ? pathArray : this; - } // Get the path element - - }, { - key: "track", - value: function track() { - return this.reference('href'); - } - }]); - - return TextPath; - }(Text); - registerMethods({ - Container: { - textPath: function textPath(text, path) { - return this.defs().path(path).text(text).addTo(this); - } - }, - Text: { - // Create path for text to run on - path: function path(track) { - var path = new TextPath(); // if d is a path, reuse it - - if (!(track instanceof Path)) { - // create path element - track = this.doc().defs().path(track); - } // link textPath to path and add content - - - path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath - - return this.put(path); - }, - // FIXME: make this plural? - // Get the textPath children - textPath: function textPath() { - return this.find('textPath'); - } - }, - Path: { - // creates a textPath from this path - text: function text(_text) { - if (_text instanceof Text) { - var txt = _text.text(); - - return _text.clear().path(this).text(txt); - } - - return this.parent().put(new Text()).path(this).text(_text); - } // FIXME: Maybe add `targets` to get all textPaths associated with this path - - } - }); - TextPath.prototype.MorphArray = PathArray; - register(TextPath); - - var Tspan = - /*#__PURE__*/ - function (_Text) { - _inherits(Tspan, _Text); - - // Initialize node - function Tspan(node) { - _classCallCheck(this, Tspan); - - return _possibleConstructorReturn(this, _getPrototypeOf(Tspan).call(this, nodeOrNew('tspan', node), Tspan)); - } // Set text content - - - _createClass(Tspan, [{ - key: "text", - value: function text(_text) { - if (_text == null) return this.node.textContent + (this.dom.newLined ? '\n' : ''); - typeof _text === 'function' ? _text.call(this, this) : this.plain(_text); - return this; - } // Shortcut dx - - }, { - key: "dx", - value: function dx(_dx) { - return this.attr('dx', _dx); - } // Shortcut dy - - }, { - key: "dy", - value: function dy(_dy) { - return this.attr('dy', _dy); - } // Create new line - - }, { - key: "newLine", - value: function newLine() { - // fetch text parent - var t = this.parent(Text); // mark new line - - this.dom.newLined = true; // apply new position - - return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x()); - } - }]); - - return Tspan; - }(Text); - extend(Tspan, textable); - registerMethods({ - Tspan: { - tspan: function tspan(text) { - var tspan = new Tspan(); // clear if build mode is disabled - - if (!this._build) { - this.clear(); - } // add new tspan - - - this.node.appendChild(tspan.node); - return tspan.text(text); - } - } - }); - register(Tspan); - - var Use = - /*#__PURE__*/ - function (_Shape) { - _inherits(Use, _Shape); - - function Use(node) { - _classCallCheck(this, Use); - - return _possibleConstructorReturn(this, _getPrototypeOf(Use).call(this, nodeOrNew('use', node), Use)); - } // Use element as a reference - - - _createClass(Use, [{ - key: "element", - value: function element(_element, file) { - // Set lined element - return this.attr('href', (file || '') + '#' + _element, xlink); - } - }]); - - return Use; - }(Shape); - registerMethods({ - Container: { - // Create a use element - use: function use(element, file) { - return this.put(new Use()).element(element, file); - } - } - }); - register(Use); - var Matrix = /*#__PURE__*/ function () { @@ -5050,234 +3952,274 @@ var SVG = (function () { } }); - /***
- Base Class
- ==========
- The base stepper class that will be
- ***/ - - function makeSetterGetter(k, f) { - return function (v) { - if (v == null) return this[v]; - this[k] = v; - if (f) f.call(this); - return this; - }; - } - - var easing = { - '-': function _(pos) { - return pos; + var PathArray = subClassArray('PathArray', SVGArray); + var pathHandlers = { + M: function M(c, p, p0) { + p.x = p0.x = c[0]; + p.y = p0.y = c[1]; + return ['M', p.x, p.y]; }, - '<>': function _(pos) { - return -Math.cos(pos * Math.PI) / 2 + 0.5; + L: function L(c, p) { + p.x = c[0]; + p.y = c[1]; + return ['L', c[0], c[1]]; }, - '>': function _(pos) { - return Math.sin(pos * Math.PI / 2); + H: function H(c, p) { + p.x = c[0]; + return ['H', c[0]]; }, - '<': function _(pos) { - return -Math.cos(pos * Math.PI / 2) + 1; + V: function V(c, p) { + p.y = c[0]; + return ['V', c[0]]; }, - bezier: function bezier(t0, x0, t1, x1) { - return function (t) {// TODO: FINISH - }; + C: function C(c, p) { + p.x = c[4]; + p.y = c[5]; + return ['C', c[0], c[1], c[2], c[3], c[4], c[5]]; + }, + S: function S(c, p) { + p.x = c[2]; + p.y = c[3]; + return ['S', c[0], c[1], c[2], c[3]]; + }, + Q: function Q(c, p) { + p.x = c[2]; + p.y = c[3]; + return ['Q', c[0], c[1], c[2], c[3]]; + }, + T: function T(c, p) { + p.x = c[0]; + p.y = c[1]; + return ['T', c[0], c[1]]; + }, + Z: function Z(c, p, p0) { + p.x = p0.x; + p.y = p0.y; + return ['Z']; + }, + A: function A(c, p) { + p.x = c[5]; + p.y = c[6]; + return ['A', c[0], c[1], c[2], c[3], c[4], c[5], c[6]]; } }; - var Stepper = - /*#__PURE__*/ - function () { - function Stepper() { - _classCallCheck(this, Stepper); - } - - _createClass(Stepper, [{ - key: "done", - value: function done() { - return false; - } - }]); + var mlhvqtcsaz = 'mlhvqtcsaz'.split(''); - return Stepper; - }(); - /***
- Easing Functions
- ================
- ***/ + for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) { + pathHandlers[mlhvqtcsaz[i]] = function (i) { + return function (c, p, p0) { + if (i === 'H') c[0] = c[0] + p.x;else if (i === 'V') c[0] = c[0] + p.y;else if (i === 'A') { + c[5] = c[5] + p.x; + c[6] = c[6] + p.y; + } else { + for (var j = 0, jl = c.length; j < jl; ++j) { + c[j] = c[j] + (j % 2 ? p.y : p.x); + } + } + return pathHandlers[i](c, p, p0); + }; + }(mlhvqtcsaz[i].toUpperCase()); + } - var Ease = - /*#__PURE__*/ - function (_Stepper) { - _inherits(Ease, _Stepper); + extend(PathArray, { + // Convert array to string + toString: function toString() { + return arrayToString(this); + }, + // Move path string + move: function move(x, y) { + // get bounding box of current situation + var box = this.bbox(); // get relative offset - function Ease(fn) { - var _this; + x -= box.x; + y -= box.y; - _classCallCheck(this, Ease); + if (!isNaN(x) && !isNaN(y)) { + // move every point + for (var l, i = this.length - 1; i >= 0; i--) { + l = this[i][0]; - _this = _possibleConstructorReturn(this, _getPrototypeOf(Ease).call(this)); - _this.ease = easing[fn || timeline.ease] || fn; - return _this; - } + if (l === 'M' || l === 'L' || l === 'T') { + this[i][1] += x; + this[i][2] += y; + } else if (l === 'H') { + this[i][1] += x; + } else if (l === 'V') { + this[i][1] += y; + } else if (l === 'C' || l === 'S' || l === 'Q') { + this[i][1] += x; + this[i][2] += y; + this[i][3] += x; + this[i][4] += y; - _createClass(Ease, [{ - key: "step", - value: function step(from, to, pos) { - if (typeof from !== 'number') { - return pos < 1 ? from : to; + if (l === 'C') { + this[i][5] += x; + this[i][6] += y; + } + } else if (l === 'A') { + this[i][6] += x; + this[i][7] += y; + } } - - return from + (to - from) * this.ease(pos); } - }]); - - return Ease; - }(Stepper); - /***
- Controller Types
- ================
- ***/ - var Controller = - /*#__PURE__*/ - function (_Stepper2) { - _inherits(Controller, _Stepper2); + return this; + }, + // Resize path string + size: function size(width, height) { + // get bounding box of current situation + var box = this.bbox(); + var i, l; // recalculate position of all points according to new size - function Controller(fn) { - var _this2; + for (i = this.length - 1; i >= 0; i--) { + l = this[i][0]; - _classCallCheck(this, Controller); + if (l === 'M' || l === 'L' || l === 'T') { + this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; + this[i][2] = (this[i][2] - box.y) * height / box.height + box.y; + } else if (l === 'H') { + this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; + } else if (l === 'V') { + this[i][1] = (this[i][1] - box.y) * height / box.height + box.y; + } else if (l === 'C' || l === 'S' || l === 'Q') { + this[i][1] = (this[i][1] - box.x) * width / box.width + box.x; + this[i][2] = (this[i][2] - box.y) * height / box.height + box.y; + this[i][3] = (this[i][3] - box.x) * width / box.width + box.x; + this[i][4] = (this[i][4] - box.y) * height / box.height + box.y; - _this2 = _possibleConstructorReturn(this, _getPrototypeOf(Controller).call(this)); - _this2.stepper = fn; - return _this2; - } + if (l === 'C') { + this[i][5] = (this[i][5] - box.x) * width / box.width + box.x; + this[i][6] = (this[i][6] - box.y) * height / box.height + box.y; + } + } else if (l === 'A') { + // resize radii + this[i][1] = this[i][1] * width / box.width; + this[i][2] = this[i][2] * height / box.height; // move position values - _createClass(Controller, [{ - key: "step", - value: function step(current, target, dt, c) { - return this.stepper(current, target, dt, c); - } - }, { - key: "done", - value: function done(c) { - return c.done; + this[i][6] = (this[i][6] - box.x) * width / box.width + box.x; + this[i][7] = (this[i][7] - box.y) * height / box.height + box.y; + } } - }]); - - return Controller; - }(Stepper); - - function recalculate() { - // Apply the default parameters - var duration = (this._duration || 500) / 1000; - var overshoot = this._overshoot || 0; // Calculate the PID natural response - - var eps = 1e-10; - var pi = Math.PI; - var os = Math.log(overshoot / 100 + eps); - var zeta = -os / Math.sqrt(pi * pi + os * os); - var wn = 3.9 / (zeta * duration); // Calculate the Spring values - - this.d = 2 * zeta * wn; - this.k = wn * wn; - } - - var Spring = - /*#__PURE__*/ - function (_Controller) { - _inherits(Spring, _Controller); - function Spring(duration, overshoot) { - var _this3; - - _classCallCheck(this, Spring); - - _this3 = _possibleConstructorReturn(this, _getPrototypeOf(Spring).call(this)); + return this; + }, + // Test if the passed path array use the same path data commands as this path array + equalCommands: function equalCommands(pathArray) { + var i, il, equalCommands; + pathArray = new PathArray(pathArray); + equalCommands = this.length === pathArray.length; - _this3.duration(duration || 500).overshoot(overshoot || 0); + for (i = 0, il = this.length; equalCommands && i < il; i++) { + equalCommands = this[i][0] === pathArray[i][0]; + } - return _this3; - } + return equalCommands; + }, + // Make path array morphable + morph: function morph(pathArray) { + pathArray = new PathArray(pathArray); - _createClass(Spring, [{ - key: "step", - value: function step(current, target, dt, c) { - if (typeof current === 'string') return current; - c.done = dt === Infinity; - if (dt === Infinity) return target; - if (dt === 0) return current; - if (dt > 100) dt = 16; - dt /= 1000; // Get the previous velocity + if (this.equalCommands(pathArray)) { + this.destination = pathArray; + } else { + this.destination = null; + } - var velocity = c.velocity || 0; // Apply the control to get the new position and store it + return this; + }, + // Get morphed path array at given position + at: function at(pos) { + // make sure a destination is defined + if (!this.destination) return this; + var sourceArray = this; + var destinationArray = this.destination.value; + var array = []; + var pathArray = new PathArray(); + var i, il, j, jl; // Animate has specified in the SVG spec + // See: https://www.w3.org/TR/SVG11/paths.html#PathElement - var acceleration = -this.d * velocity - this.k * (current - target); - var newPosition = current + velocity * dt + acceleration * dt * dt / 2; // Store the velocity + for (i = 0, il = sourceArray.length; i < il; i++) { + array[i] = [sourceArray[i][0]]; - c.velocity = velocity + acceleration * dt; // Figure out if we have converged, and if so, pass the value + for (j = 1, jl = sourceArray[i].length; j < jl; j++) { + array[i][j] = sourceArray[i][j] + (destinationArray[i][j] - sourceArray[i][j]) * pos; + } // For the two flags of the elliptical arc command, the SVG spec say: + // Flags and booleans are interpolated as fractions between zero and one, with any non-zero value considered to be a value of one/true + // Elliptical arc command as an array followed by corresponding indexes: + // ['A', rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y] + // 0 1 2 3 4 5 6 7 - c.done = Math.abs(target - newPosition) + Math.abs(velocity) < 0.002; - return c.done ? target : newPosition; - } - }]); - return Spring; - }(Controller); - extend(Spring, { - duration: makeSetterGetter('_duration', recalculate), - overshoot: makeSetterGetter('_overshoot', recalculate) - }); - var PID = - /*#__PURE__*/ - function (_Controller2) { - _inherits(PID, _Controller2); + if (array[i][0] === 'A') { + array[i][4] = +(array[i][4] !== 0); + array[i][5] = +(array[i][5] !== 0); + } + } // Directly modify the value of a path array, this is done this way for performance - function PID(p, i, d, windup) { - var _this4; - _classCallCheck(this, PID); + pathArray.value = array; + return pathArray; + }, + // Absolutize and parse path to array + parse: function parse() { + var array = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [['M', 0, 0]]; + // if it's already a patharray, no need to parse it + if (array instanceof PathArray) return array; // prepare for parsing - _this4 = _possibleConstructorReturn(this, _getPrototypeOf(PID).call(this)); - p = p == null ? 0.1 : p; - i = i == null ? 0.01 : i; - d = d == null ? 0 : d; - windup = windup == null ? 1000 : windup; + var s; + var paramCnt = { + 'M': 2, + 'L': 2, + 'H': 1, + 'V': 1, + 'C': 6, + 'S': 4, + 'Q': 4, + 'T': 2, + 'A': 7, + 'Z': 0 + }; - _this4.p(p).i(i).d(d).windup(windup); + if (typeof array === 'string') { + array = array.replace(numbersWithDots, pathRegReplace) // convert 45.123.123 to 45.123 .123 + .replace(pathLetters, ' $& ') // put some room between letters and numbers + .replace(hyphen, '$1 -') // add space before hyphen + .trim() // trim + .split(delimiter); // split into array + } else { + array = array.reduce(function (prev, curr) { + return [].concat.call(prev, curr); + }, []); + } // array now is an array containing all parts of a path e.g. ['M', '0', '0', 'L', '30', '30' ...] - return _this4; - } - _createClass(PID, [{ - key: "step", - value: function step(current, target, dt, c) { - if (typeof current === 'string') return current; - c.done = dt === Infinity; - if (dt === Infinity) return target; - if (dt === 0) return current; - var p = target - current; - var i = (c.integral || 0) + p * dt; - var d = (p - (c.error || 0)) / dt; - var windup = this.windup; // antiwindup + var result = []; + var p = new Point(); + var p0 = new Point(); + var index = 0; + var len = array.length; - if (windup !== false) { - i = Math.max(-windup, Math.min(i, windup)); + do { + // Test if we have a path letter + if (isPathLetter.test(array[index])) { + s = array[index]; + ++index; // If last letter was a move command and we got no new, it defaults to [L]ine + } else if (s === 'M') { + s = 'L'; + } else if (s === 'm') { + s = 'l'; } - c.error = p; - c.integral = i; - c.done = Math.abs(p) < 0.001; - return c.done ? target : current + (this.P * p + this.I * i + this.D * d); - } - }]); + result.push(pathHandlers[s].call(null, array.slice(index, index = index + paramCnt[s.toUpperCase()]).map(parseFloat), p, p0)); + } while (len > index); - return PID; - }(Controller); - extend(PID, { - windup: makeSetterGetter('windup'), - p: makeSetterGetter('P'), - i: makeSetterGetter('I'), - d: makeSetterGetter('D') + return result; + }, + // Get bounding box of path + bbox: function bbox() { + parser().path.setAttribute('d', this.toString()); + return parser.nodes.path.getBBox(); + } }); var Morphable = @@ -5530,6 +4472,221 @@ var SVG = (function () { }); } + var Path = + /*#__PURE__*/ + function (_Shape) { + _inherits(Path, _Shape); + + // Initialize node + function Path(node) { + _classCallCheck(this, Path); + + return _possibleConstructorReturn(this, _getPrototypeOf(Path).call(this, nodeOrNew('path', node), Path)); + } // Get array + + + _createClass(Path, [{ + key: "array", + value: function array() { + return this._array || (this._array = new PathArray(this.attr('d'))); + } // Plot new path + + }, { + key: "plot", + value: function plot(d) { + return d == null ? this.array() : this.clear().attr('d', typeof d === 'string' ? d : this._array = new PathArray(d)); + } // Clear array cache + + }, { + key: "clear", + value: function clear() { + delete this._array; + return this; + } // Move by left top corner + + }, { + key: "move", + value: function move(x, y) { + return this.attr('d', this.array().move(x, y)); + } // Move by left top corner over x-axis + + }, { + key: "x", + value: function x(_x) { + return _x == null ? this.bbox().x : this.move(_x, this.bbox().y); + } // Move by left top corner over y-axis + + }, { + key: "y", + value: function y(_y) { + return _y == null ? this.bbox().y : this.move(this.bbox().x, _y); + } // Set element size to given width and height + + }, { + key: "size", + value: function size(width, height) { + var p = proportionalSize(this, width, height); + return this.attr('d', this.array().size(p.width, p.height)); + } // Set width of element + + }, { + key: "width", + value: function width(_width) { + return _width == null ? this.bbox().width : this.size(_width, this.bbox().height); + } // Set height of element + + }, { + key: "height", + value: function height(_height) { + return _height == null ? this.bbox().height : this.size(this.bbox().width, _height); + } + }, { + key: "targets", + value: function targets() { + return baseFind('svg textpath [href*="' + this.id() + '"]'); + } + }]); + + return Path; + }(Shape); // Define morphable array + Path.prototype.MorphArray = PathArray; // Add parent method + + registerMethods({ + Container: { + // Create a wrapped path element + path: function path(d) { + // make sure plot is called as a setter + return this.put(new Path()).plot(d || new PathArray()); + } + } + }); + register(Path); + + // Add polygon-specific functions + + function array() { + return this._array || (this._array = new PointArray(this.attr('points'))); + } // Plot new path + + function plot(p) { + return p == null ? this.array() : this.clear().attr('points', typeof p === 'string' ? p : this._array = new PointArray(p)); + } // Clear array cache + + function clear() { + delete this._array; + return this; + } // Move by left top corner + + function move(x, y) { + return this.attr('points', this.array().move(x, y)); + } // Set element size to given width and height + + function size$1(width, height) { + var p = proportionalSize(this, width, height); + return this.attr('points', this.array().size(p.width, p.height)); + } + + var poly = /*#__PURE__*/Object.freeze({ + array: array, + plot: plot, + clear: clear, + move: move, + size: size$1 + }); + + var Polygon = + /*#__PURE__*/ + function (_Shape) { + _inherits(Polygon, _Shape); + + // Initialize node + function Polygon(node) { + _classCallCheck(this, Polygon); + + return _possibleConstructorReturn(this, _getPrototypeOf(Polygon).call(this, nodeOrNew('polygon', node), Polygon)); + } + + return Polygon; + }(Shape); + registerMethods({ + Container: { + // Create a wrapped polygon element + polygon: function polygon(p) { + // make sure plot is called as a setter + return this.put(new Polygon()).plot(p || new PointArray()); + } + } + }); + extend(Polygon, pointed); + extend(Polygon, poly); + register(Polygon); + + var Polyline = + /*#__PURE__*/ + function (_Shape) { + _inherits(Polyline, _Shape); + + // Initialize node + function Polyline(node) { + _classCallCheck(this, Polyline); + + return _possibleConstructorReturn(this, _getPrototypeOf(Polyline).call(this, nodeOrNew('polyline', node), Polyline)); + } + + return Polyline; + }(Shape); + registerMethods({ + Container: { + // Create a wrapped polygon element + polyline: function polyline(p) { + // make sure plot is called as a setter + return this.put(new Polyline()).plot(p || new PointArray()); + } + } + }); + extend(Polyline, pointed); + extend(Polyline, poly); + register(Polyline); + + var Rect = + /*#__PURE__*/ + function (_Shape) { + _inherits(Rect, _Shape); + + // Initialize node + function Rect(node) { + _classCallCheck(this, Rect); + + return _possibleConstructorReturn(this, _getPrototypeOf(Rect).call(this, nodeOrNew('rect', node), Rect)); + } // FIXME: unify with circle + // Radius x value + + + _createClass(Rect, [{ + key: "rx", + value: function rx(_rx) { + return this.attr('rx', _rx); + } // Radius y value + + }, { + key: "ry", + value: function ry(_ry) { + return this.attr('ry', _ry); + } + }]); + + return Rect; + }(Shape); + registerMethods({ + Container: { + // Create a rect element + rect: function rect(width, height) { + return this.put(new Rect()).size(width, height); + } + } + }); + register(Rect); + var time = window.performance || Date; var makeSchedule = function makeSchedule(runnerInfo) { @@ -6731,96 +5888,470 @@ var SVG = (function () { } }); - // export {default as SVGArray} from './SVGArray.js' - // export {default as Bare} from './Bare.js' - // export {default as Box} from './Box.js' - // export {default as Circle} from './Circle.js' - // export {default as ClipPath} from './ClipPath.js' - // export {default as Color} from './Color.js' - // export {default as Container} from './Container.js' - // export {Controller, Ease, PID, Spring} from './Controller.js' - // export {default as Defs} from './Defs.js' - // export {default as Doc} from './Doc.js' - // export {default as Element} from './Element.js' - // export {default as Ellipse} from './Ellipse.js' - // export {default as EventTarget} from './EventTarget.js' - // export {default as Gradient} from './Gradient.js' - // export {default as G} from './G.js' - // export {default as HtmlNode} from './HtmlNode.js' - // export {default as A} from './A.js' - // export {default as Image} from './Image.js' - // export {default as Line} from './Line.js' - // export {default as Marker} from './Marker.js' - // export {default as Mask} from './Mask.js' - // export {default as Matrix} from './Matrix.js' - // export {default as Morphable} from './Morphable.js' - // export {default as SVGNumber} from './SVGNumber.js' - // export {default as Path} from './Path.js' - // export {default as PathArray} from './PathArray.js' - // export {default as Pattern} from './Pattern.js' - // export {default as Point} from './Point.js' - // export {default as PointArray} from './PointArray.js' - // export {default as Polygon} from './Polygon.js' - // export {default as Polyline} from './Polyline.js' - // export {default as Queue} from './Queue.js' - // export {default as Rect} from './Rect.js' - // export {default as Runner} from './Runner.js' - // export {default as Shape} from './Shape.js' - // export {default as Stop} from './Stop.js' - // export {default as Symbol} from './Symbol.js' - // export {default as Text} from './Text.js' - // export {default as TextPath} from './TextPath.js' - // export {default as Timeline} from './Timeline.js' - // export {default as Use} from './Use.js' + var _Symbol = + /*#__PURE__*/ + function (_Container) { + _inherits(_Symbol, _Container); + + // Initialize node + function _Symbol(node) { + _classCallCheck(this, _Symbol); + + return _possibleConstructorReturn(this, _getPrototypeOf(_Symbol).call(this, nodeOrNew('symbol', node), _Symbol)); + } + + return _Symbol; + }(Container); + registerMethods({ + Container: { + symbol: function symbol() { + return this.put(new _Symbol()); + } + } + }); + register(_Symbol); + + // Create plain text node + function plain(text) { + // clear if build mode is disabled + if (this._build === false) { + this.clear(); + } // create text node + + + this.node.appendChild(document.createTextNode(text)); + return this; + } // FIXME: Does this also work for textpath? + // Get length of text element + + function length() { + return this.node.getComputedTextLength(); + } + + var textable = /*#__PURE__*/Object.freeze({ + plain: plain, + length: length + }); + + var Text = + /*#__PURE__*/ + function (_Shape) { + _inherits(Text, _Shape); + + // Initialize node + function Text(node) { + var _this; + + _classCallCheck(this, Text); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Text).call(this, nodeOrNew('text', node), Text)); + _this.dom.leading = new SVGNumber(1.3); // store leading value for rebuilding + + _this._rebuild = true; // enable automatic updating of dy values + + _this._build = false; // disable build mode for adding multiple lines + // set default font + + _this.attr('font-family', attrs['font-family']); + + return _this; + } // Move over x-axis + + + _createClass(Text, [{ + key: "x", + value: function x(_x) { + // act as getter + if (_x == null) { + return this.attr('x'); + } + + return this.attr('x', _x); + } // Move over y-axis + + }, { + key: "y", + value: function y(_y) { + var oy = this.attr('y'); + var o = typeof oy === 'number' ? oy - this.bbox().y : 0; // act as getter + + if (_y == null) { + return typeof oy === 'number' ? oy - o : oy; + } + + return this.attr('y', typeof _y === 'number' ? _y + o : _y); + } // Move center over x-axis + + }, { + key: "cx", + value: function cx(x) { + return x == null ? this.bbox().cx : this.x(x - this.bbox().width / 2); + } // Move center over y-axis + + }, { + key: "cy", + value: function cy(y) { + return y == null ? this.bbox().cy : this.y(y - this.bbox().height / 2); + } // Set the text content + + }, { + key: "text", + value: function text(_text) { + // act as getter + if (_text === undefined) { + // FIXME use children() or each() + var children = this.node.childNodes; + var firstLine = 0; + _text = ''; + + for (var i = 0, len = children.length; i < len; ++i) { + // skip textPaths - they are no lines + if (children[i].nodeName === 'textPath') { + if (i === 0) firstLine = 1; + continue; + } // add newline if its not the first child and newLined is set to true + + + if (i !== firstLine && children[i].nodeType !== 3 && adopt(children[i]).dom.newLined === true) { + _text += '\n'; + } // add content of this node + + + _text += children[i].textContent; + } + + return _text; + } // remove existing content + + + this.clear().build(true); + + if (typeof _text === 'function') { + // call block + _text.call(this, this); + } else { + // store text and make sure text is not blank + _text = _text.split('\n'); // build new lines + + for (var j = 0, jl = _text.length; j < jl; j++) { + this.tspan(_text[j]).newLine(); + } + } // disable build mode and rebuild lines + + + return this.build(false).rebuild(); + } // Set / get leading + + }, { + key: "leading", + value: function leading(value) { + // act as getter + if (value == null) { + return this.dom.leading; + } // act as setter + + + this.dom.leading = new SVGNumber(value); + return this.rebuild(); + } // Rebuild appearance type + + }, { + key: "rebuild", + value: function rebuild(_rebuild) { + // store new rebuild flag if given + if (typeof _rebuild === 'boolean') { + this._rebuild = _rebuild; + } // define position of all lines + + + if (this._rebuild) { + var self = this; + var blankLineOffset = 0; + var dy = this.dom.leading * new SVGNumber(this.attr('font-size')); + this.each(function () { + if (this.dom.newLined) { + this.attr('x', self.attr('x')); + + if (this.text() === '\n') { + blankLineOffset += dy; + } else { + this.attr('dy', dy + blankLineOffset); + blankLineOffset = 0; + } + } + }); + this.fire('rebuild'); + } + + return this; + } // Enable / disable build mode + + }, { + key: "build", + value: function build(_build) { + this._build = !!_build; + return this; + } // overwrite method from parent to set data properly + + }, { + key: "setData", + value: function setData(o) { + this.dom = o; + this.dom.leading = new SVGNumber(o.leading || 1.3); + return this; + } + }]); + + return Text; + }(Shape); + extend(Text, textable); + registerMethods({ + Container: { + // Create text element + text: function text(_text2) { + return this.put(new Text()).text(_text2); + }, + // Create plain text element + plain: function plain$$1(text) { + return this.put(new Text()).plain(text); + } + } + }); + register(Text); + + var TextPath = + /*#__PURE__*/ + function (_Text) { + _inherits(TextPath, _Text); + + // Initialize node + function TextPath(node) { + _classCallCheck(this, TextPath); + + return _possibleConstructorReturn(this, _getPrototypeOf(TextPath).call(this, nodeOrNew('textPath', node), TextPath)); + } // return the array of the path track element + + + _createClass(TextPath, [{ + key: "array", + value: function array() { + var track = this.track(); + return track ? track.array() : null; + } // Plot path if any + + }, { + key: "plot", + value: function plot(d) { + var track = this.track(); + var pathArray = null; + + if (track) { + pathArray = track.plot(d); + } + + return d == null ? pathArray : this; + } // Get the path element + + }, { + key: "track", + value: function track() { + return this.reference('href'); + } + }]); + + return TextPath; + }(Text); + registerMethods({ + Container: { + textPath: function textPath(text, path) { + return this.defs().path(path).text(text).addTo(this); + } + }, + Text: { + // Create path for text to run on + path: function path(track) { + var path = new TextPath(); // if d is a path, reuse it + + if (!(track instanceof Path)) { + // create path element + track = this.doc().defs().path(track); + } // link textPath to path and add content + + + path.attr('href', '#' + track, xlink); // add textPath element as child node and return textPath + + return this.put(path); + }, + // FIXME: make this plural? + // Get the textPath children + textPath: function textPath() { + return this.find('textPath'); + } + }, + Path: { + // creates a textPath from this path + text: function text(_text) { + if (_text instanceof Text) { + var txt = _text.text(); + + return _text.clear().path(this).text(txt); + } + + return this.parent().put(new Text()).path(this).text(_text); + } // FIXME: Maybe add `targets` to get all textPaths associated with this path + + } + }); + TextPath.prototype.MorphArray = PathArray; + register(TextPath); + + var Tspan = + /*#__PURE__*/ + function (_Text) { + _inherits(Tspan, _Text); + + // Initialize node + function Tspan(node) { + _classCallCheck(this, Tspan); + + return _possibleConstructorReturn(this, _getPrototypeOf(Tspan).call(this, nodeOrNew('tspan', node), Tspan)); + } // Set text content + + + _createClass(Tspan, [{ + key: "text", + value: function text(_text) { + if (_text == null) return this.node.textContent + (this.dom.newLined ? '\n' : ''); + typeof _text === 'function' ? _text.call(this, this) : this.plain(_text); + return this; + } // Shortcut dx + + }, { + key: "dx", + value: function dx(_dx) { + return this.attr('dx', _dx); + } // Shortcut dy + + }, { + key: "dy", + value: function dy(_dy) { + return this.attr('dy', _dy); + } // Create new line + + }, { + key: "newLine", + value: function newLine() { + // fetch text parent + var t = this.parent(Text); // mark new line + + this.dom.newLined = true; // apply new position + + return this.dy(t.dom.leading * t.attr('font-size')).attr('x', t.x()); + } + }]); + + return Tspan; + }(Text); + extend(Tspan, textable); + registerMethods({ + Tspan: { + tspan: function tspan(text) { + var tspan = new Tspan(); // clear if build mode is disabled + + if (!this._build) { + this.clear(); + } // add new tspan + + + this.node.appendChild(tspan.node); + return tspan.text(text); + } + } + }); + register(Tspan); + + var Use = + /*#__PURE__*/ + function (_Shape) { + _inherits(Use, _Shape); + + function Use(node) { + _classCallCheck(this, Use); + + return _possibleConstructorReturn(this, _getPrototypeOf(Use).call(this, nodeOrNew('use', node), Use)); + } // Use element as a reference + + + _createClass(Use, [{ + key: "element", + value: function element(_element, file) { + // Set lined element + return this.attr('href', (file || '') + '#' + _element, xlink); + } + }]); + + return Use; + }(Shape); + registerMethods({ + Container: { + // Create a use element + use: function use(element, file) { + return this.put(new Use()).element(element, file); + } + } + }); + register(Use); + + var Classes = /*#__PURE__*/Object.freeze({ - EventTarget: EventTarget, - Dom: Dom, - Element: Element, - Shape: Shape, - Container: Container, - HtmlNode: HtmlNode, - Doc: Doc$1, - Defs: Defs, - G: G, Animator: Animator, + SVGArray: SVGArray, Bare: Bare, + Box: Box, Circle: Circle, ClipPath: ClipPath, - A: A, + Color: Color, + Container: Container, + Controller: Controller, + Ease: Ease, + PID: PID, + Spring: Spring, + Defs: Defs, + Doc: Doc$1, + Dom: Dom, + Element: Element, Ellipse: Ellipse, - Stop: Stop, + EventTarget: EventTarget, Gradient: Gradient, + G: G, + HtmlNode: HtmlNode, + A: A, Image: Image, Line: Line, Marker: Marker, Mask: Mask, + Matrix: Matrix, + Morphable: Morphable, + SVGNumber: SVGNumber, Path: Path, + PathArray: PathArray, Pattern: Pattern, + Point: Point, + PointArray: PointArray, Polygon: Polygon, Polyline: Polyline, + Queue: Queue, Rect: Rect, + Runner: Runner, + Shape: Shape, + Stop: Stop, Symbol: _Symbol, Text: Text, TextPath: TextPath, - Tspan: Tspan, - Use: Use, - SVGNumber: SVGNumber, - SVGArray: SVGArray, - PathArray: PathArray, - PointArray: PointArray, - Matrix: Matrix, - Point: Point, - Box: Box, - Color: Color, - Morphable: Morphable, - Queue: Queue, - Runner: Runner, Timeline: Timeline, - Controller: Controller, - Ease: Ease, - PID: PID, - Spring: Spring + Tspan: Tspan, + Use: Use }); // ### This module adds backward / forward functionality to elements. @@ -7125,10 +6656,6 @@ var SVG = (function () { transform: transform }); - // - // export function setup (node) { - // this._memory = {} - // } // Remember arbitrary data function remember(k, v) { @@ -7167,7 +6694,7 @@ var SVG = (function () { remember: remember, forget: forget, memory: memory - }); // registerConstructor('Memory', setup) + }); var sugar = { stroke: ['color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset'], |