diff --git a/dist/canvg.js b/dist/canvg.js index 42651919..25f71da2 100644 --- a/dist/canvg.js +++ b/dist/canvg.js @@ -1,262 +1,6 @@ var canvg = (function (exports) { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - function _inherits(subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function"); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true - } - }); - if (superClass) _setPrototypeOf(subClass, superClass); - } - - function _getPrototypeOf(o) { - _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf(o); - } - - function _setPrototypeOf(o, p) { - _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf(o, p); - } - - function _isNativeReflectConstruct() { - if (typeof Reflect === "undefined" || !Reflect.construct) return false; - if (Reflect.construct.sham) return false; - if (typeof Proxy === "function") return true; - - try { - Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); - return true; - } catch (e) { - return false; - } - } - - function _construct(Parent, args, Class) { - if (_isNativeReflectConstruct()) { - _construct = Reflect.construct; - } else { - _construct = function _construct(Parent, args, Class) { - var a = [null]; - a.push.apply(a, args); - var Constructor = Function.bind.apply(Parent, a); - var instance = new Constructor(); - if (Class) _setPrototypeOf(instance, Class.prototype); - return instance; - }; - } - - return _construct.apply(null, arguments); - } - - function _assertThisInitialized(self) { - if (self === void 0) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return self; - } - - function _possibleConstructorReturn(self, call) { - if (call && (typeof call === "object" || typeof call === "function")) { - return call; - } - - return _assertThisInitialized(self); - } - - function _createSuper(Derived) { - var hasNativeReflectConstruct = _isNativeReflectConstruct(); - - return function _createSuperInternal() { - var Super = _getPrototypeOf(Derived), - result; - - if (hasNativeReflectConstruct) { - var NewTarget = _getPrototypeOf(this).constructor; - - result = Reflect.construct(Super, arguments, NewTarget); - } else { - result = Super.apply(this, arguments); - } - - return _possibleConstructorReturn(this, result); - }; - } - - function _superPropBase(object, property) { - while (!Object.prototype.hasOwnProperty.call(object, property)) { - object = _getPrototypeOf(object); - if (object === null) break; - } - - return object; - } - - function _get(target, property, receiver) { - if (typeof Reflect !== "undefined" && Reflect.get) { - _get = Reflect.get; - } else { - _get = function _get(target, property, receiver) { - var base = _superPropBase(target, property); - - if (!base) return; - var desc = Object.getOwnPropertyDescriptor(base, property); - - if (desc.get) { - return desc.get.call(receiver); - } - - return desc.value; - }; - } - - return _get(target, property, receiver || target); - } - - function _slicedToArray(arr, i) { - return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); - } - - function _toConsumableArray(arr) { - return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); - } - - function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return _arrayLikeToArray(arr); - } - - function _arrayWithHoles(arr) { - if (Array.isArray(arr)) return arr; - } - - function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); - } - - function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"] != null) _i["return"](); - } finally { - if (_d) throw _e; - } - } - - return _arr; - } - - function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); - } - - function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; - - return arr2; - } - - function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - function _nonIterableRest() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - /** * For parsing color values. * @module RGBColor @@ -264,7 +8,7 @@ var canvg = (function (exports) { * @see https://www.phpied.com/rgb-color-parser-in-javascript/ * @license MIT */ - var simpleColors = { + const simpleColors = { aliceblue: 'f0f8ff', antiquewhite: 'faebd7', aqua: '00ffff', @@ -410,59 +154,43 @@ var canvg = (function (exports) { yellowgreen: '9acd32' }; // array of color definition objects - var colorDefs = [{ + const colorDefs = [{ re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/, // re: /^rgb\((?\d{1,3}),\s*(?\d{1,3}),\s*(?\d{1,3})\)$/, example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'], - process: function process(_) { - for (var _len = arguments.length, bits = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - bits[_key - 1] = arguments[_key]; - } - return bits.map(function (b) { - return Number.parseInt(b); - }); + process(_, ...bits) { + return bits.map(b => Number.parseInt(b)); } + }, { re: /^(\w{2})(\w{2})(\w{2})$/, // re: /^(?\w{2})(?\w{2})(?\w{2})$/, example: ['#00ff00', '336699'], - process: function process(_) { - for (var _len2 = arguments.length, bits = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - bits[_key2 - 1] = arguments[_key2]; - } - return bits.map(function (b) { - return Number.parseInt(b, 16); - }); + process(_, ...bits) { + return bits.map(b => Number.parseInt(b, 16)); } + }, { re: /^(\w)(\w)(\w)$/, // re: /^(?\w{1})(?\w{1})(?\w{1})$/, example: ['#fb0', 'f0f'], - process: function process(_) { - for (var _len3 = arguments.length, bits = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { - bits[_key3 - 1] = arguments[_key3]; - } - return bits.map(function (b) { - return Number.parseInt(b + b, 16); - }); + process(_, ...bits) { + return bits.map(b => Number.parseInt(b + b, 16)); } + }]; /** * A class to parse color values. */ - var RGBColor = /*#__PURE__*/function () { + class RGBColor { /** * @param {string} colorString */ - function RGBColor(colorString) { - var _this = this; - - _classCallCheck(this, RGBColor); - + constructor(colorString) { this.ok = false; // strip any leading # if (colorString.charAt(0) === '#') { @@ -480,24 +208,20 @@ var canvg = (function (exports) { // search through the definitions to find a match - colorDefs.forEach(function (_ref) { - var re = _ref.re, - processor = _ref.process; - var bits = re.exec(colorString); + colorDefs.forEach(({ + re, + process: processor + }) => { + const bits = re.exec(colorString); if (bits) { - var _processor = processor.apply(void 0, _toConsumableArray(bits)), - _processor2 = _slicedToArray(_processor, 3), - r = _processor2[0], - g = _processor2[1], - b = _processor2[2]; - - Object.assign(_this, { - r: r, - g: g, - b: b + const [r, g, b] = processor(...bits); + Object.assign(this, { + r, + g, + b }); - _this.ok = true; + this.ok = true; } }); // validate/cleanup values @@ -511,80 +235,81 @@ var canvg = (function (exports) { */ - _createClass(RGBColor, [{ - key: "toRGB", - value: function toRGB() { - return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; + toRGB() { + return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; + } + /** + * @returns {string} + */ + + + toHex() { + let r = this.r.toString(16); + let g = this.g.toString(16); + let b = this.b.toString(16); + + if (r.length === 1) { + r = '0' + r; } - /** - * @returns {string} - */ - }, { - key: "toHex", - value: function toHex() { - var r = this.r.toString(16); - var g = this.g.toString(16); - var b = this.b.toString(16); - - if (r.length === 1) { - r = '0' + r; - } - - if (g.length === 1) { - g = '0' + g; - } - - if (b.length === 1) { - b = '0' + b; - } - - return '#' + r + g + b; + if (g.length === 1) { + g = '0' + g; } - /** - * Offers a bulleted list of help. - * @returns {HTMLUListElement} - */ - }], [{ - key: "getHelpXML", - value: function getHelpXML() { - var examples = [].concat(_toConsumableArray(colorDefs.flatMap(function (_ref2) { - var example = _ref2.example; - return example; - })), _toConsumableArray(Object.keys(simpleColors))); - var xml = document.createElement('ul'); - xml.setAttribute('id', 'rgbcolor-examples'); - xml.append.apply(xml, _toConsumableArray(examples.map(function (example) { - try { - var listItem = document.createElement('li'); - var listColor = new RGBColor(example); - var exampleDiv = document.createElement('div'); - exampleDiv.style.cssText = "\n margin: 3px;\n border: 1px solid black;\n background: ".concat(listColor.toHex(), ";\n color: ").concat(listColor.toHex(), ";"); - exampleDiv.append('test'); - var listItemValue = " ".concat(example, " -> ").concat(listColor.toRGB(), " -> ").concat(listColor.toHex()); - listItem.append(exampleDiv, listItemValue); - return listItem; - } catch (e) { - return ''; - } - }))); - return xml; + if (b.length === 1) { + b = '0' + b; } - }]); - return RGBColor; - }(); + return '#' + r + g + b; + } + /** + * Offers a bulleted list of help. + * @returns {HTMLUListElement} + */ + + + static getHelpXML() { + const examples = [// add regexps + ...colorDefs.flatMap(({ + example + }) => { + return example; + }), // add type-in colors + ...Object.keys(simpleColors)]; + const xml = document.createElement('ul'); + xml.setAttribute('id', 'rgbcolor-examples'); + xml.append(...examples.map(example => { + try { + const listItem = document.createElement('li'); + const listColor = new RGBColor(example); + const exampleDiv = document.createElement('div'); + exampleDiv.style.cssText = ` + margin: 3px; + border: 1px solid black; + background: ${listColor.toHex()}; + color: ${listColor.toHex()};`; + exampleDiv.append('test'); + const listItemValue = ` ${example} -> ${listColor.toRGB()} -> ${listColor.toHex()}`; + listItem.append(exampleDiv, listItemValue); + return listItem; + } catch (e) { + return ''; + } + })); + return xml; + } + + } function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function _typeof(obj) { + _typeof = function (obj) { return typeof obj; }; } else { - _typeof = function _typeof(obj) { + _typeof = function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } @@ -592,7 +317,7 @@ var canvg = (function (exports) { return _typeof(obj); } - function _classCallCheck$1(instance, Constructor) { + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } @@ -909,7 +634,7 @@ var canvg = (function (exports) { * Set properties. */ function BlurStack() { - _classCallCheck$1(this, BlurStack); + _classCallCheck(this, BlurStack); this.r = 0; this.g = 0; @@ -918,13 +643,14 @@ var canvg = (function (exports) { this.next = null; }; + /* eslint-disable new-cap, class-methods-use-this, jsdoc/require-jsdoc */ /** * Whether a value is `null` or `undefined`. * @param {any} val * @returns {boolean} */ - var isNullish = function isNullish(val) { + const isNullish = val => { return val === null || val === undefined; }; /** @@ -958,17 +684,17 @@ var canvg = (function (exports) { */ - var canvg = function canvg(target, s, opts) { + const canvg = function (target, s, opts) { // no parameters if (isNullish(target) && isNullish(s) && isNullish(opts)) { - var svgTags = document.querySelectorAll('svg'); - return Promise.all(_toConsumableArray(svgTags).map(function (svgTag) { - var c = document.createElement('canvas'); + const svgTags = document.querySelectorAll('svg'); + return Promise.all([...svgTags].map(svgTag => { + const c = document.createElement('canvas'); c.width = svgTag.clientWidth; c.height = svgTag.clientHeight; svgTag.before(c); svgTag.remove(); - var div = document.createElement('div'); + const div = document.createElement('div'); div.append(svgTag); return canvg(c, div.innerHTML); })); @@ -980,13 +706,13 @@ var canvg = (function (exports) { if (!isNullish(target.svg)) target.svg.stop(); - var svg = build(opts || {}); // on i.e. 8 for flash canvas, we can't assign the property so check for it + const svg = build(opts || {}); // on i.e. 8 for flash canvas, we can't assign the property so check for it if (!(target.childNodes.length === 1 && target.childNodes[0].nodeName === 'OBJECT')) { target.svg = svg; } - var ctx = target.getContext('2d'); + const ctx = target.getContext('2d'); if (typeof s.documentElement !== 'undefined') { // load from xml doc @@ -1011,8 +737,8 @@ var canvg = (function (exports) { function build(opts) { /* eslint-enable jsdoc/check-types */ - var svg = { - opts: opts + const svg = { + opts }; svg.FRAMERATE = 30; svg.MAX_VIRTUAL_PIXELS = 30000; @@ -1030,7 +756,7 @@ var canvg = (function (exports) { svg.init = function (ctx) { - var uniqueId = 0; + let uniqueId = 0; svg.UniqueId = function () { uniqueId++; @@ -1044,42 +770,48 @@ var canvg = (function (exports) { svg.ctx = ctx; svg.ViewPort = { viewPorts: [], - Clear: function Clear() { + + Clear() { this.viewPorts = []; }, - SetCurrent: function SetCurrent(width, height) { + + SetCurrent(width, height) { this.viewPorts.push({ - width: width, - height: height + width, + height }); }, - RemoveCurrent: function RemoveCurrent() { + + RemoveCurrent() { this.viewPorts.pop(); }, - Current: function Current() { + + Current() { return this.viewPorts[this.viewPorts.length - 1]; }, - width: function width() { + + width() { return this.Current().width; }, - height: function height() { + + height() { return this.Current().height; }, - ComputeSize: function ComputeSize(d) { + + ComputeSize(d) { if (!isNullish(d) && typeof d === 'number') return d; if (d === 'x') return this.width(); if (d === 'y') return this.height(); - return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2); + return Math.sqrt(this.width() ** 2 + this.height() ** 2) / Math.sqrt(2); } + }; }; svg.init(); // images loaded svg.ImagesLoaded = function () { - return svg.Images.every(function (img) { - return img.loaded; - }); + return svg.Images.every(img => img.loaded); }; // trim @@ -1095,13 +827,13 @@ var canvg = (function (exports) { svg.ajax = function (url, asynch) { - var AJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP'); + const AJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP'); if (asynch) { - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new - var req = AJAX.open('GET', url, true); - req.addEventListener('load', function () { + const req = AJAX.open('GET', url, true); + req.addEventListener('load', () => { resolve(AJAX.responseText); }); AJAX.send(null); @@ -1116,12 +848,12 @@ var canvg = (function (exports) { svg.parseXml = function (xml) { if (window.DOMParser) { - var parser = new DOMParser(); + const parser = new DOMParser(); return parser.parseFromString(xml, 'text/xml'); } xml = xml.replace(/]*>/, ''); - var xmlDoc = new window.ActiveXObject('Microsoft.XMLDOM'); + const xmlDoc = new window.ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = 'false'; xmlDoc.loadXML(xml); return xmlDoc; @@ -1129,7 +861,7 @@ var canvg = (function (exports) { // get the text baseline - var textBaselineMapping = { + const textBaselineMapping = { baseline: 'alphabetic', 'before-edge': 'top', 'text-before-edge': 'top', @@ -1142,231 +874,210 @@ var canvg = (function (exports) { hanging: 'hanging', mathematical: 'alphabetic' }; - - svg.Property = /*#__PURE__*/function () { - function Property(name, value) { - _classCallCheck(this, Property); - + svg.Property = class Property { + constructor(name, value) { this.name = name; this.value = value; } - _createClass(Property, [{ - key: "getValue", - value: function getValue() { - return this.value; + getValue() { + return this.value; + } + + hasValue() { + return !isNullish(this.value) && this.value !== ''; + } // return the numerical value of the property + + + numValue() { + if (!this.hasValue()) return 0; + let n = Number.parseFloat(this.value); + + if (String(this.value).endsWith('%')) { + n /= 100.0; } - }, { - key: "hasValue", - value: function hasValue() { - return !isNullish(this.value) && this.value !== ''; - } // return the numerical value of the property - }, { - key: "numValue", - value: function numValue() { - if (!this.hasValue()) return 0; - var n = Number.parseFloat(this.value); + return n; + } - if (String(this.value).endsWith('%')) { - n /= 100.0; + valueOrDefault(def) { + if (this.hasValue()) return this.value; + return def; + } + + numValueOrDefault(def) { + if (this.hasValue()) return this.numValue(); + return def; + } // color extensions + // augment the current color value with the opacity + + + addOpacity(opacityProp) { + let newValue = this.value; + + if (!isNullish(opacityProp.value) && opacityProp.value !== '' && typeof this.value === 'string') { + // can only add opacity to colors, not patterns + const color = new RGBColor(this.value); + + if (color.ok) { + newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')'; } - - return n; } - }, { - key: "valueOrDefault", - value: function valueOrDefault(def) { - if (this.hasValue()) return this.value; - return def; + + return new svg.Property(this.name, newValue); + } // definition extensions + // get the definition from the definitions table + + + getDefinition() { + let name = this.value.match(/#([^)'"]+)/); + + if (name) { + name = name[1]; } - }, { - key: "numValueOrDefault", - value: function numValueOrDefault(def) { - if (this.hasValue()) return this.numValue(); - return def; - } // color extensions - // augment the current color value with the opacity - }, { - key: "addOpacity", - value: function addOpacity(opacityProp) { - var newValue = this.value; + if (!name) { + name = this.value; + } - if (!isNullish(opacityProp.value) && opacityProp.value !== '' && typeof this.value === 'string') { - // can only add opacity to colors, not patterns - var color = new RGBColor(this.value); + return svg.Definitions[name]; + } - if (color.ok) { - newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')'; + isUrlDefinition() { + return this.value.startsWith('url('); + } + + getFillStyleDefinition(e, opacityProp) { + let def = this.getDefinition(); // gradient + + if (!isNullish(def) && def.createGradient) { + return def.createGradient(svg.ctx, e, opacityProp); + } // pattern + + + if (!isNullish(def) && def.createPattern) { + if (def.getHrefAttribute().hasValue()) { + const pt = def.attribute('patternTransform'); + def = def.getHrefAttribute().getDefinition(); + + if (pt.hasValue()) { + def.attribute('patternTransform', true).value = pt.value; } } - return new svg.Property(this.name, newValue); - } // definition extensions - // get the definition from the definitions table - - }, { - key: "getDefinition", - value: function getDefinition() { - var name = this.value.match(/#([^)'"]+)/); - - if (name) { - name = name[1]; - } - - if (!name) { - name = this.value; - } - - return svg.Definitions[name]; + return def.createPattern(svg.ctx, e); } - }, { - key: "isUrlDefinition", - value: function isUrlDefinition() { - return this.value.startsWith('url('); - } - }, { - key: "getFillStyleDefinition", - value: function getFillStyleDefinition(e, opacityProp) { - var def = this.getDefinition(); // gradient - if (!isNullish(def) && def.createGradient) { - return def.createGradient(svg.ctx, e, opacityProp); - } // pattern + return null; + } // length extensions - if (!isNullish(def) && def.createPattern) { - if (def.getHrefAttribute().hasValue()) { - var pt = def.attribute('patternTransform'); - def = def.getHrefAttribute().getDefinition(); + getDPI(viewPort) { + return 96.0; // TODO: compute? + } - if (pt.hasValue()) { - def.attribute('patternTransform', true).value = pt.value; - } - } + getEM(viewPort) { + let em = 12; + const fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); + if (fontSize.hasValue()) em = fontSize.toPixels(viewPort); + return em; + } - return def.createPattern(svg.ctx, e); - } + getUnits() { + return String(this.value).replace(/[\d.-]/g, ''); + } // get the length as pixels - return null; - } // length extensions - }, { - key: "getDPI", - value: function getDPI(viewPort) { - return 96.0; // TODO: compute? - } - }, { - key: "getEM", - value: function getEM(viewPort) { - var em = 12; - var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); - if (fontSize.hasValue()) em = fontSize.toPixels(viewPort); - return em; - } - }, { - key: "getUnits", - value: function getUnits() { - return String(this.value).replace(/[\d.-]/g, ''); - } // get the length as pixels + toPixels(viewPort, processPercent) { + if (!this.hasValue()) return 0; + const s = String(this.value); + if (s.endsWith('em')) return this.numValue() * this.getEM(viewPort); + if (s.endsWith('ex')) return this.numValue() * this.getEM(viewPort) / 2.0; + if (s.endsWith('px')) return this.numValue(); + if (s.endsWith('pt')) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0); + if (s.endsWith('pc')) return this.numValue() * 15; + if (s.endsWith('cm')) return this.numValue() * this.getDPI(viewPort) / 2.54; + if (s.endsWith('mm')) return this.numValue() * this.getDPI(viewPort) / 25.4; + if (s.endsWith('in')) return this.numValue() * this.getDPI(viewPort); + if (s.endsWith('%')) return this.numValue() * svg.ViewPort.ComputeSize(viewPort); + const n = this.numValue(); + if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort); + return n; + } // time extensions + // get the time as milliseconds - }, { - key: "toPixels", - value: function toPixels(viewPort, processPercent) { - if (!this.hasValue()) return 0; - var s = String(this.value); - if (s.endsWith('em')) return this.numValue() * this.getEM(viewPort); - if (s.endsWith('ex')) return this.numValue() * this.getEM(viewPort) / 2.0; - if (s.endsWith('px')) return this.numValue(); - if (s.endsWith('pt')) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0); - if (s.endsWith('pc')) return this.numValue() * 15; - if (s.endsWith('cm')) return this.numValue() * this.getDPI(viewPort) / 2.54; - if (s.endsWith('mm')) return this.numValue() * this.getDPI(viewPort) / 25.4; - if (s.endsWith('in')) return this.numValue() * this.getDPI(viewPort); - if (s.endsWith('%')) return this.numValue() * svg.ViewPort.ComputeSize(viewPort); - var n = this.numValue(); - if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort); - return n; - } // time extensions - // get the time as milliseconds - }, { - key: "toMilliseconds", - value: function toMilliseconds() { - if (!this.hasValue()) return 0; - var s = String(this.value); - if (s.endsWith('ms')) return this.numValue(); - if (s.endsWith('s')) return this.numValue() * 1000; - return this.numValue(); - } // angle extensions - // get the angle as radians + toMilliseconds() { + if (!this.hasValue()) return 0; + const s = String(this.value); + if (s.endsWith('ms')) return this.numValue(); + if (s.endsWith('s')) return this.numValue() * 1000; + return this.numValue(); + } // angle extensions + // get the angle as radians - }, { - key: "toRadians", - value: function toRadians() { - if (!this.hasValue()) return 0; - var s = String(this.value); - if (s.endsWith('deg')) return this.numValue() * (Math.PI / 180.0); - if (s.endsWith('grad')) return this.numValue() * (Math.PI / 200.0); - if (s.endsWith('rad')) return this.numValue(); - return this.numValue() * (Math.PI / 180.0); - } - }, { - key: "toTextBaseline", - value: function toTextBaseline() { - if (!this.hasValue()) return null; - return textBaselineMapping[this.value]; - } - }]); - return Property; - }(); // fonts + toRadians() { + if (!this.hasValue()) return 0; + const s = String(this.value); + if (s.endsWith('deg')) return this.numValue() * (Math.PI / 180.0); + if (s.endsWith('grad')) return this.numValue() * (Math.PI / 200.0); + if (s.endsWith('rad')) return this.numValue(); + return this.numValue() * (Math.PI / 180.0); + } + toTextBaseline() { + if (!this.hasValue()) return null; + return textBaselineMapping[this.value]; + } + + }; // fonts svg.Font = { Styles: 'normal|italic|oblique|inherit', Variants: 'normal|small-caps|inherit', Weights: 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit', - CreateFont: function CreateFont(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { - var f = !isNullish(inherit) ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font); + + CreateFont(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) { + const f = !isNullish(inherit) ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font); return { fontFamily: fontFamily || f.fontFamily, fontSize: fontSize || f.fontSize, fontStyle: fontStyle || f.fontStyle, fontWeight: fontWeight || f.fontWeight, fontVariant: fontVariant || f.fontVariant, - toString: function toString() { + + toString() { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' '); } + }; }, - Parse: function Parse(s) { - var _this = this; - var f = {}; - var ds = svg.trim(svg.compressSpaces(s || '')).split(' '); - var set = { + Parse(s) { + const f = {}; + const ds = svg.trim(svg.compressSpaces(s || '')).split(' '); + const set = { fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false }; - var ff = ''; - ds.forEach(function (d) { - if (!set.fontStyle && _this.Styles.includes(d)) { + let ff = ''; + ds.forEach(d => { + if (!set.fontStyle && this.Styles.includes(d)) { if (d !== 'inherit') { f.fontStyle = d; } set.fontStyle = true; - } else if (!set.fontVariant && _this.Variants.includes(d)) { + } else if (!set.fontVariant && this.Variants.includes(d)) { if (d !== 'inherit') { f.fontVariant = d; } set.fontStyle = set.fontVariant = true; - } else if (!set.fontWeight && _this.Weights.includes(d)) { + } else if (!set.fontWeight && this.Weights.includes(d)) { if (d !== 'inherit') { f.fontWeight = d; } @@ -1389,51 +1100,43 @@ var canvg = (function (exports) { return f; } + }; // points and paths svg.ToNumberArray = function (s) { - var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' '); - return a.map(function (_a) { - return Number.parseFloat(_a); - }); + const a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' '); + return a.map(_a => Number.parseFloat(_a)); }; - svg.Point = /*#__PURE__*/function () { - function _class(x, y) { - _classCallCheck(this, _class); - + svg.Point = class { + constructor(x, y) { this.x = x; this.y = y; } - _createClass(_class, [{ - key: "angleTo", - value: function angleTo(p) { - return Math.atan2(p.y - this.y, p.x - this.x); - } - }, { - key: "applyTransform", - value: function applyTransform(v) { - var xp = this.x * v[0] + this.y * v[2] + v[4]; - var yp = this.x * v[1] + this.y * v[3] + v[5]; - this.x = xp; - this.y = yp; - } - }]); + angleTo(p) { + return Math.atan2(p.y - this.y, p.x - this.x); + } - return _class; - }(); + applyTransform(v) { + const xp = this.x * v[0] + this.y * v[2] + v[4]; + const yp = this.x * v[1] + this.y * v[3] + v[5]; + this.x = xp; + this.y = yp; + } + + }; svg.CreatePoint = function (s) { - var a = svg.ToNumberArray(s); + const a = svg.ToNumberArray(s); return new svg.Point(a[0], a[1]); }; svg.CreatePath = function (s) { - var a = svg.ToNumberArray(s); - var path = []; + const a = svg.ToNumberArray(s); + const path = []; - for (var i = 0; i < a.length; i += 2) { + for (let i = 0; i < a.length; i += 2) { path.push(new svg.Point(a[i], a[i + 1])); } @@ -1441,10 +1144,8 @@ var canvg = (function (exports) { }; // bounding box - svg.BoundingBox = /*#__PURE__*/function () { - function _class2(x1, y1, x2, y2) { - _classCallCheck(this, _class2); - + svg.BoundingBox = class { + constructor(x1, y1, x2, y2) { // pass in initial points if you want this.x1 = Number.NaN; this.y1 = Number.NaN; @@ -1454,333 +1155,273 @@ var canvg = (function (exports) { this.addPoint(x2, y2); } - _createClass(_class2, [{ - key: "x", - value: function x() { - return this.x1; - } - }, { - key: "y", - value: function y() { - return this.y1; - } - }, { - key: "width", - value: function width() { - return this.x2 - this.x1; - } - }, { - key: "height", - value: function height() { - return this.y2 - this.y1; - } - }, { - key: "addPoint", - value: function addPoint(x, y) { - if (!isNullish(x)) { - if (isNaN(this.x1) || isNaN(this.x2)) { - this.x1 = x; - this.x2 = x; - } + x() { + return this.x1; + } - if (x < this.x1) this.x1 = x; - if (x > this.x2) this.x2 = x; + y() { + return this.y1; + } + + width() { + return this.x2 - this.x1; + } + + height() { + return this.y2 - this.y1; + } + + addPoint(x, y) { + if (!isNullish(x)) { + if (isNaN(this.x1) || isNaN(this.x2)) { + this.x1 = x; + this.x2 = x; } - if (!isNullish(y)) { - if (isNaN(this.y1) || isNaN(this.y2)) { - this.y1 = y; - this.y2 = y; - } + if (x < this.x1) this.x1 = x; + if (x > this.x2) this.x2 = x; + } - if (y < this.y1) this.y1 = y; - if (y > this.y2) this.y2 = y; + if (!isNullish(y)) { + if (isNaN(this.y1) || isNaN(this.y2)) { + this.y1 = y; + this.y2 = y; } - } - }, { - key: "addX", - value: function addX(x) { - this.addPoint(x, null); - } - }, { - key: "addY", - value: function addY(y) { - this.addPoint(null, y); - } - }, { - key: "addBoundingBox", - value: function addBoundingBox(bb) { - this.addPoint(bb.x1, bb.y1); - this.addPoint(bb.x2, bb.y2); - } - }, { - key: "addQuadraticCurve", - value: function addQuadraticCurve(p0x, p0y, p1x, p1y, p2x, p2y) { - var cp1x = p0x + 2 / 3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0) - var cp1y = p0y + 2 / 3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0) - - var cp2x = cp1x + 1 / 3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0) - - var cp2y = cp1y + 1 / 3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0) - - this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y); + if (y < this.y1) this.y1 = y; + if (y > this.y2) this.y2 = y; } - }, { - key: "addBezierCurve", - value: function addBezierCurve(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) { - var _this2 = this; + } - // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html - var p0 = [p0x, p0y], + addX(x) { + this.addPoint(x, null); + } + + addY(y) { + this.addPoint(null, y); + } + + addBoundingBox(bb) { + this.addPoint(bb.x1, bb.y1); + this.addPoint(bb.x2, bb.y2); + } + + addQuadraticCurve(p0x, p0y, p1x, p1y, p2x, p2y) { + const cp1x = p0x + 2 / 3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0) + + const cp1y = p0y + 2 / 3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0) + + const cp2x = cp1x + 1 / 3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0) + + const cp2y = cp1y + 1 / 3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0) + + this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y, cp2y, p2x, p2y); + } + + addBezierCurve(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) { + // from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html + const p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y]; - this.addPoint(p0[0], p0[1]); - this.addPoint(p3[0], p3[1]); + this.addPoint(p0[0], p0[1]); + this.addPoint(p3[0], p3[1]); - var _loop = function _loop(i) { - var f = function f(t) { - return Math.pow(1 - t, 3) * p0[i] + 3 * Math.pow(1 - t, 2) * t * p1[i] + 3 * (1 - t) * Math.pow(t, 2) * p2[i] + Math.pow(t, 3) * p3[i]; - }; - - var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; - var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; - var c = 3 * p1[i] - 3 * p0[i]; - - if (a === 0) { - if (b === 0) return "continue"; - var t = -c / b; - - if (t > 0 && t < 1) { - if (i === 0) _this2.addX(f(t)); - if (i === 1) _this2.addY(f(t)); - } - - return "continue"; - } - - var b2ac = Math.pow(b, 2) - 4 * c * a; - if (b2ac < 0) return "continue"; - var t1 = (-b + Math.sqrt(b2ac)) / (2 * a); - - if (t1 > 0 && t1 < 1) { - if (i === 0) _this2.addX(f(t1)); - if (i === 1) _this2.addY(f(t1)); - } - - var t2 = (-b - Math.sqrt(b2ac)) / (2 * a); - - if (t2 > 0 && t2 < 1) { - if (i === 0) _this2.addX(f(t2)); - if (i === 1) _this2.addY(f(t2)); - } + for (let i = 0; i <= 1; i++) { + const f = function (t) { + return (1 - t) ** 3 * p0[i] + 3 * (1 - t) ** 2 * t * p1[i] + 3 * (1 - t) * t ** 2 * p2[i] + t ** 3 * p3[i]; }; - for (var i = 0; i <= 1; i++) { - var _ret = _loop(i); + const b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i]; + const a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i]; + const c = 3 * p1[i] - 3 * p0[i]; - if (_ret === "continue") continue; + if (a === 0) { + if (b === 0) continue; + const t = -c / b; + + if (t > 0 && t < 1) { + if (i === 0) this.addX(f(t)); + if (i === 1) this.addY(f(t)); + } + + continue; + } + + const b2ac = b ** 2 - 4 * c * a; + if (b2ac < 0) continue; + const t1 = (-b + Math.sqrt(b2ac)) / (2 * a); + + if (t1 > 0 && t1 < 1) { + if (i === 0) this.addX(f(t1)); + if (i === 1) this.addY(f(t1)); + } + + const t2 = (-b - Math.sqrt(b2ac)) / (2 * a); + + if (t2 > 0 && t2 < 1) { + if (i === 0) this.addX(f(t2)); + if (i === 1) this.addY(f(t2)); } } - }, { - key: "isPointInBox", - value: function isPointInBox(x, y) { - return this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2; - } - }]); + } - return _class2; - }(); // transforms + isPointInBox(x, y) { + return this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2; + } + }; // transforms - svg.Transform = /*#__PURE__*/function () { - function _class3(v) { - var _this6 = this; - - _classCallCheck(this, _class3); - + svg.Transform = class { + constructor(v) { this.Type = { - translate: function translate(s) { - _classCallCheck(this, translate); + translate: class { + constructor(s) { + this.p = svg.CreatePoint(s); - this.p = svg.CreatePoint(s); + this.apply = function (ctx) { + ctx.translate(this.p.x || 0.0, this.p.y || 0.0); + }; - this.apply = function (ctx) { - ctx.translate(this.p.x || 0.0, this.p.y || 0.0); - }; + this.unapply = function (ctx) { + ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0); + }; - this.unapply = function (ctx) { - ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0); - }; + this.applyToPoint = function (p) { + p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); + }; + } - this.applyToPoint = function (p) { - p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); - }; }, - rotate: function rotate(s) { - _classCallCheck(this, rotate); + rotate: class { + constructor(s) { + const a = svg.ToNumberArray(s); + this.angle = new svg.Property('angle', a[0]); + this.cx = a[1] || 0; + this.cy = a[2] || 0; - var a = svg.ToNumberArray(s); - this.angle = new svg.Property('angle', a[0]); - this.cx = a[1] || 0; - this.cy = a[2] || 0; + this.apply = function (ctx) { + ctx.translate(this.cx, this.cy); + ctx.rotate(this.angle.toRadians()); + ctx.translate(-this.cx, -this.cy); + }; - this.apply = function (ctx) { - ctx.translate(this.cx, this.cy); - ctx.rotate(this.angle.toRadians()); - ctx.translate(-this.cx, -this.cy); - }; + this.unapply = function (ctx) { + ctx.translate(this.cx, this.cy); + ctx.rotate(-1.0 * this.angle.toRadians()); + ctx.translate(-this.cx, -this.cy); + }; - this.unapply = function (ctx) { - ctx.translate(this.cx, this.cy); - ctx.rotate(-1.0 * this.angle.toRadians()); - ctx.translate(-this.cx, -this.cy); - }; + this.applyToPoint = function (p) { + const _a = this.angle.toRadians(); - this.applyToPoint = function (p) { - var _a = this.angle.toRadians(); + p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); + p.applyTransform([Math.cos(_a), Math.sin(_a), -Math.sin(_a), Math.cos(_a), 0, 0]); + p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]); + }; + } - p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]); - p.applyTransform([Math.cos(_a), Math.sin(_a), -Math.sin(_a), Math.cos(_a), 0, 0]); - p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]); - }; }, - scale: function scale(s) { - _classCallCheck(this, scale); + scale: class { + constructor(s) { + this.p = svg.CreatePoint(s); - this.p = svg.CreatePoint(s); + this.apply = function (ctx) { + ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0); + }; - this.apply = function (ctx) { - ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0); - }; + this.unapply = function (ctx) { + ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0); + }; - this.unapply = function (ctx) { - ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0); - }; + this.applyToPoint = function (p) { + p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]); + }; + } - this.applyToPoint = function (p) { - p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]); - }; }, - matrix: function matrix(s) { - _classCallCheck(this, matrix); + matrix: class { + constructor(s) { + this.m = svg.ToNumberArray(s); - this.m = svg.ToNumberArray(s); + this.apply = function (ctx) { + ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]); + }; - this.apply = function (ctx) { - ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]); - }; + this.applyToPoint = function (p) { + p.applyTransform(this.m); + }; + } - this.applyToPoint = function (p) { - p.applyTransform(this.m); - }; } }; Object.assign(this.Type, { - SkewBase: /*#__PURE__*/function (_this$Type$matrix) { - _inherits(SkewBase, _this$Type$matrix); - - var _super = _createSuper(SkewBase); - - function SkewBase(s) { - var _this3; - - _classCallCheck(this, SkewBase); - - _this3 = _super.call(this, s); - _this3.angle = new svg.Property('angle', s); - return _this3; + SkewBase: class extends this.Type.matrix { + constructor(s) { + super(s); + this.angle = new svg.Property('angle', s); } - return SkewBase; - }(this.Type.matrix) + } }); Object.assign(this.Type, { - skewX: /*#__PURE__*/function (_this$Type$SkewBase) { - _inherits(skewX, _this$Type$SkewBase); - - var _super2 = _createSuper(skewX); - - function skewX(s) { - var _this4; - - _classCallCheck(this, skewX); - - _this4 = _super2.call(this, s); - _this4.m = [1, 0, Math.tan(_this4.angle.toRadians()), 1, 0, 0]; - return _this4; + skewX: class extends this.Type.SkewBase { + constructor(s) { + super(s); + this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0]; } - return skewX; - }(this.Type.SkewBase), - skewY: /*#__PURE__*/function (_this$Type$SkewBase2) { - _inherits(skewY, _this$Type$SkewBase2); - - var _super3 = _createSuper(skewY); - - function skewY(s) { - var _this5; - - _classCallCheck(this, skewY); - - _this5 = _super3.call(this, s); - _this5.m = [1, Math.tan(_this5.angle.toRadians()), 0, 1, 0, 0]; - return _this5; + }, + skewY: class extends this.Type.SkewBase { + constructor(s) { + super(s); + this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0]; } - return skewY; - }(this.Type.SkewBase) + } }); - var data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g, ') ').split(/\s(?=[a-z])/); - this.transforms = data.map(function (d) { - var type = svg.trim(d.split('(')[0]); - var s = d.split('(')[1].replace(')', ''); - var transform = new _this6.Type[type](s); + const data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g, ') ').split(/\s(?=[a-z])/); + this.transforms = data.map(d => { + const type = svg.trim(d.split('(')[0]); + const s = d.split('(')[1].replace(')', ''); + const transform = new this.Type[type](s); transform.type = type; return transform; }); } - _createClass(_class3, [{ - key: "apply", - value: function apply(ctx) { - this.transforms.forEach(function (transform) { - transform.apply(ctx); - }); - } - }, { - key: "unapply", - value: function unapply(ctx) { - for (var i = this.transforms.length - 1; i >= 0; i--) { - this.transforms[i].unapply(ctx); - } - } - }, { - key: "applyToPoint", - value: function applyToPoint(p) { - this.transforms.forEach(function (transform) { - transform.applyToPoint(p); - }); - } - }]); + apply(ctx) { + this.transforms.forEach(transform => { + transform.apply(ctx); + }); + } - return _class3; - }(); // aspect ratio + unapply(ctx) { + for (let i = this.transforms.length - 1; i >= 0; i--) { + this.transforms[i].unapply(ctx); + } + } + applyToPoint(p) { + this.transforms.forEach(transform => { + transform.applyToPoint(p); + }); + } + + }; // aspect ratio svg.AspectRatio = function (ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) { // aspect ratio - https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute aspectRatio = svg.compressSpaces(aspectRatio); aspectRatio = aspectRatio.replace(/^defer\s/, ''); // ignore defer - var align = aspectRatio.split(' ')[0] || 'xMidYMid'; - var meetOrSlice = aspectRatio.split(' ')[1] || 'meet'; // calculate scale + const align = aspectRatio.split(' ')[0] || 'xMidYMid'; + const meetOrSlice = aspectRatio.split(' ')[1] || 'meet'; // calculate scale - var scaleX = width / desiredWidth; - var scaleY = height / desiredHeight; - var scaleMin = Math.min(scaleX, scaleY); - var scaleMax = Math.max(scaleX, scaleY); + const scaleX = width / desiredWidth; + const scaleY = height / desiredHeight; + const scaleMin = Math.min(scaleX, scaleY); + const scaleMax = Math.max(scaleX, scaleY); if (meetOrSlice === 'meet') { desiredWidth *= scaleMin; @@ -1814,13 +1455,8 @@ var canvg = (function (exports) { svg.Element = {}; svg.EmptyProperty = new svg.Property('EMPTY', ''); - - svg.Element.ElementBase = /*#__PURE__*/function () { - function _class4(node) { - var _this7 = this; - - _classCallCheck(this, _class4); - + svg.Element.ElementBase = class { + constructor(node) { // Argument from inheriting class this.captureTextNodes = arguments[1]; // eslint-disable-line prefer-rest-params @@ -1831,67 +1467,52 @@ var canvg = (function (exports) { if (!isNullish(node) && node.nodeType === 1) { // ELEMENT_NODE // add children - _toConsumableArray(node.childNodes).forEach(function (childNode) { + [...node.childNodes].forEach(childNode => { if (childNode.nodeType === 1) { - _this7.addChild(childNode, true); // ELEMENT_NODE - + this.addChild(childNode, true); // ELEMENT_NODE } - if (_this7.captureTextNodes && (childNode.nodeType === 3 || childNode.nodeType === 4)) { - var text = childNode.nodeValue || childNode.text || ''; + if (this.captureTextNodes && (childNode.nodeType === 3 || childNode.nodeType === 4)) { + const text = childNode.nodeValue || childNode.text || ''; if (svg.trim(svg.compressSpaces(text)) !== '') { - _this7.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE - + this.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE } } }); // add attributes - - _toConsumableArray(node.attributes).forEach(function (_ref) { - var nodeName = _ref.nodeName, - nodeValue = _ref.nodeValue; - _this7.attributes[nodeName] = new svg.Property(nodeName, nodeValue); + [...node.attributes].forEach(({ + nodeName, + nodeValue + }) => { + this.attributes[nodeName] = new svg.Property(nodeName, nodeValue); }); // add tag styles - - var styles = svg.Styles[node.nodeName]; + let styles = svg.Styles[node.nodeName]; if (!isNullish(styles)) { - Object.entries(styles).forEach(function (_ref2) { - var _ref3 = _slicedToArray(_ref2, 2), - name = _ref3[0], - styleValue = _ref3[1]; - - _this7.styles[name] = styleValue; + Object.entries(styles).forEach(([name, styleValue]) => { + this.styles[name] = styleValue; }); } // add class styles if (this.attribute('class').hasValue()) { - var classes = svg.compressSpaces(this.attribute('class').value).split(' '); - classes.forEach(function (clss) { + const classes = svg.compressSpaces(this.attribute('class').value).split(' '); + classes.forEach(clss => { styles = svg.Styles['.' + clss]; if (!isNullish(styles)) { - Object.entries(styles).forEach(function (_ref4) { - var _ref5 = _slicedToArray(_ref4, 2), - name = _ref5[0], - styleValue = _ref5[1]; - - _this7.styles[name] = styleValue; + Object.entries(styles).forEach(([name, styleValue]) => { + this.styles[name] = styleValue; }); } styles = svg.Styles[node.nodeName + '.' + clss]; if (!isNullish(styles)) { - Object.entries(styles).forEach(function (_ref6) { - var _ref7 = _slicedToArray(_ref6, 2), - name = _ref7[0], - styleValue = _ref7[1]; - - _this7.styles[name] = styleValue; + Object.entries(styles).forEach(([name, styleValue]) => { + this.styles[name] = styleValue; }); } }); @@ -1899,32 +1520,28 @@ var canvg = (function (exports) { if (this.attribute('id').hasValue()) { - var _styles = svg.Styles['#' + this.attribute('id').value]; + const _styles = svg.Styles['#' + this.attribute('id').value]; if (!isNullish(_styles)) { - Object.entries(_styles).forEach(function (_ref8) { - var _ref9 = _slicedToArray(_ref8, 2), - name = _ref9[0], - styleValue = _ref9[1]; - - _this7.styles[name] = styleValue; + Object.entries(_styles).forEach(([name, styleValue]) => { + this.styles[name] = styleValue; }); } } // add inline styles if (this.attribute('style').hasValue()) { - var _styles2 = this.attribute('style').value.split(';'); + const _styles = this.attribute('style').value.split(';'); - _styles2.forEach(function (style) { + _styles.forEach(style => { if (svg.trim(style) !== '') { - var _style$split = style.split(':'), - name = _style$split.name, - value = _style$split.value; - + let { + name, + value + } = style.split(':'); name = svg.trim(name); value = svg.trim(value); - _this7.styles[name] = new svg.Property(name, value); + this.styles[name] = new svg.Property(name, value); } }); } // add id @@ -1939,641 +1556,474 @@ var canvg = (function (exports) { } // get or create attribute - _createClass(_class4, [{ - key: "attribute", - value: function attribute(name, createIfNotExists) { - var a = this.attributes[name]; - if (!isNullish(a)) return a; + attribute(name, createIfNotExists) { + let a = this.attributes[name]; + if (!isNullish(a)) return a; - if (createIfNotExists === true) { - a = new svg.Property(name, ''); - this.attributes[name] = a; - } - - return a || svg.EmptyProperty; + if (createIfNotExists === true) { + a = new svg.Property(name, ''); + this.attributes[name] = a; } - }, { - key: "getHrefAttribute", - value: function getHrefAttribute() { - for (var a in this.attributes) { - if (a.endsWith(':href')) { - return this.attributes[a]; + + return a || svg.EmptyProperty; + } + + getHrefAttribute() { + for (const a in this.attributes) { + if (a.endsWith(':href')) { + return this.attributes[a]; + } + } + + return svg.EmptyProperty; + } // get or create style, crawls up node tree + + + style(name, createIfNotExists, skipAncestors) { + let s = this.styles[name]; + if (!isNullish(s)) return s; + const a = this.attribute(name); + + if (!isNullish(a) && a.hasValue()) { + this.styles[name] = a; // move up to me to cache + + return a; + } + + if (skipAncestors !== true) { + const p = this.parent; + + if (!isNullish(p)) { + const ps = p.style(name); + + if (!isNullish(ps) && ps.hasValue()) { + return ps; } } + } - return svg.EmptyProperty; - } // get or create style, crawls up node tree + if (createIfNotExists === true) { + s = new svg.Property(name, ''); + this.styles[name] = s; + } - }, { - key: "style", - value: function style(name, createIfNotExists, skipAncestors) { - var s = this.styles[name]; - if (!isNullish(s)) return s; - var a = this.attribute(name); + return s || svg.EmptyProperty; + } // base render - if (!isNullish(a) && a.hasValue()) { - this.styles[name] = a; // move up to me to cache - return a; + render(ctx) { + // don't render display=none + if (this.style('display').value === 'none') return; // don't render visibility=hidden + + if (this.style('visibility').value === 'hidden') return; + ctx.save(); + + if (this.attribute('mask').hasValue()) { + // mask + const mask = this.attribute('mask').getDefinition(); + if (!isNullish(mask)) mask.apply(ctx, this); + } else if (this.style('filter').hasValue()) { + // filter + const filter = this.style('filter').getDefinition(); + if (!isNullish(filter)) filter.apply(ctx, this); + } else { + this.setContext(ctx); + this.renderChildren(ctx); + this.clearContext(ctx); + } + + ctx.restore(); + } // base set context + + + setContext(ctx) {// OVERRIDE ME! + } // base clear context + + + clearContext(ctx) {// OVERRIDE ME! + } // base render children + + + renderChildren(ctx) { + this.children.forEach(child => { + child.render(ctx); + }); + } + + addChild(childNode, create) { + const child = create ? svg.CreateElement(childNode) : childNode; + child.parent = this; + + if (child.type !== 'title') { + this.children.push(child); + } + } + + }; + svg.Element.RenderedElementBase = class extends svg.Element.ElementBase { + setContext(ctx) { + // fill + if (this.style('fill').isUrlDefinition()) { + const fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity')); + if (!isNullish(fs)) ctx.fillStyle = fs; + } else if (this.style('fill').hasValue()) { + const fillStyle = this.style('fill'); + if (fillStyle.value === 'currentColor') fillStyle.value = this.style('color').value; + ctx.fillStyle = fillStyle.value === 'none' ? 'rgba(0,0,0,0)' : fillStyle.value; + } + + if (this.style('fill-opacity').hasValue()) { + let fillStyle = new svg.Property('fill', ctx.fillStyle); + fillStyle = fillStyle.addOpacity(this.style('fill-opacity')); + ctx.fillStyle = fillStyle.value; + } // stroke + + + if (this.style('stroke').isUrlDefinition()) { + const fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity')); + if (!isNullish(fs)) ctx.strokeStyle = fs; + } else if (this.style('stroke').hasValue()) { + const strokeStyle = this.style('stroke'); + if (strokeStyle.value === 'currentColor') strokeStyle.value = this.style('color').value; + ctx.strokeStyle = strokeStyle.value === 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value; + } + + if (this.style('stroke-opacity').hasValue()) { + let strokeStyle = new svg.Property('stroke', ctx.strokeStyle); + strokeStyle = strokeStyle.addOpacity(this.style('stroke-opacity')); + ctx.strokeStyle = strokeStyle.value; + } + + if (this.style('stroke-width').hasValue()) { + const newLineWidth = this.style('stroke-width').toPixels(); + ctx.lineWidth = newLineWidth === 0 ? 0.001 : newLineWidth; // browsers don't respect 0 + } + + if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value; + if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value; + if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value; + + if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value !== 'none') { + const gaps = svg.ToNumberArray(this.style('stroke-dasharray').value); + + if (typeof ctx.setLineDash !== 'undefined') { + ctx.setLineDash(gaps); + } else if (typeof ctx.webkitLineDash !== 'undefined') { + ctx.webkitLineDash = gaps; + } else if (typeof ctx.mozDash !== 'undefined' && !(gaps.length === 1 && gaps[0] === 0)) { + ctx.mozDash = gaps; } - if (skipAncestors !== true) { - var p = this.parent; + const offset = this.style('stroke-dashoffset').numValueOrDefault(1); - if (!isNullish(p)) { - var ps = p.style(name); - - if (!isNullish(ps) && ps.hasValue()) { - return ps; - } - } + if (typeof ctx.lineDashOffset !== 'undefined') { + ctx.lineDashOffset = offset; + } else if (typeof ctx.webkitLineDashOffset !== 'undefined') { + ctx.webkitLineDashOffset = offset; + } else if (typeof ctx.mozDashOffset !== 'undefined') { + ctx.mozDashOffset = offset; } + } // font - if (createIfNotExists === true) { - s = new svg.Property(name, ''); - this.styles[name] = s; - } - return s || svg.EmptyProperty; - } // base render + if (typeof ctx.font !== 'undefined') { + ctx.font = svg.Font.CreateFont(this.style('font-style').value, this.style('font-variant').value, this.style('font-weight').value, this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '', this.style('font-family').value).toString(); + } // transform - }, { - key: "render", - value: function render(ctx) { - // don't render display=none - if (this.style('display').value === 'none') return; // don't render visibility=hidden - if (this.style('visibility').value === 'hidden') return; - ctx.save(); + if (this.attribute('transform').hasValue()) { + const transform = new svg.Transform(this.attribute('transform').value); + transform.apply(ctx); + } // clip - if (this.attribute('mask').hasValue()) { - // mask - var mask = this.attribute('mask').getDefinition(); - if (!isNullish(mask)) mask.apply(ctx, this); - } else if (this.style('filter').hasValue()) { - // filter - var filter = this.style('filter').getDefinition(); - if (!isNullish(filter)) filter.apply(ctx, this); + + if (this.style('clip-path', false, true).hasValue()) { + const clip = this.style('clip-path', false, true).getDefinition(); + if (!isNullish(clip)) clip.apply(ctx); + } // opacity + + + if (this.style('opacity').hasValue()) { + ctx.globalAlpha = this.style('opacity').numValue(); + } + } + + }; + svg.Element.PathElementBase = class extends svg.Element.RenderedElementBase { + path(ctx) { + if (!isNullish(ctx)) ctx.beginPath(); + return new svg.BoundingBox(); + } + + renderChildren(ctx) { + this.path(ctx); + svg.Mouse.checkPath(this, ctx); + + if (ctx.fillStyle !== '') { + if (this.style('fill-rule').valueOrDefault('inherit') !== 'inherit') { + ctx.fill(this.style('fill-rule').value); } else { - this.setContext(ctx); - this.renderChildren(ctx); - this.clearContext(ctx); - } - - ctx.restore(); - } // base set context - - }, { - key: "setContext", - value: function setContext(ctx) {// OVERRIDE ME! - } // base clear context - - }, { - key: "clearContext", - value: function clearContext(ctx) {// OVERRIDE ME! - } // base render children - - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - this.children.forEach(function (child) { - child.render(ctx); - }); - } - }, { - key: "addChild", - value: function addChild(childNode, create) { - var child = create ? svg.CreateElement(childNode) : childNode; - child.parent = this; - - if (child.type !== 'title') { - this.children.push(child); + ctx.fill(); } } - }]); - return _class4; - }(); + if (ctx.strokeStyle !== '') ctx.stroke(); + const markers = this.getMarkers(); - svg.Element.RenderedElementBase = /*#__PURE__*/function (_svg$Element$ElementB) { - _inherits(_class5, _svg$Element$ElementB); - - var _super4 = _createSuper(_class5); - - function _class5() { - _classCallCheck(this, _class5); - - return _super4.apply(this, arguments); - } - - _createClass(_class5, [{ - key: "setContext", - value: function setContext(ctx) { - // fill - if (this.style('fill').isUrlDefinition()) { - var fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity')); - if (!isNullish(fs)) ctx.fillStyle = fs; - } else if (this.style('fill').hasValue()) { - var fillStyle = this.style('fill'); - if (fillStyle.value === 'currentColor') fillStyle.value = this.style('color').value; - ctx.fillStyle = fillStyle.value === 'none' ? 'rgba(0,0,0,0)' : fillStyle.value; + if (!isNullish(markers)) { + if (this.style('marker-start').isUrlDefinition()) { + const marker = this.style('marker-start').getDefinition(); + marker.render(ctx, markers[0][0], markers[0][1]); } - if (this.style('fill-opacity').hasValue()) { - var _fillStyle = new svg.Property('fill', ctx.fillStyle); + if (this.style('marker-mid').isUrlDefinition()) { + const marker = this.style('marker-mid').getDefinition(); - _fillStyle = _fillStyle.addOpacity(this.style('fill-opacity')); - ctx.fillStyle = _fillStyle.value; - } // stroke - - - if (this.style('stroke').isUrlDefinition()) { - var _fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity')); - - if (!isNullish(_fs)) ctx.strokeStyle = _fs; - } else if (this.style('stroke').hasValue()) { - var strokeStyle = this.style('stroke'); - if (strokeStyle.value === 'currentColor') strokeStyle.value = this.style('color').value; - ctx.strokeStyle = strokeStyle.value === 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value; - } - - if (this.style('stroke-opacity').hasValue()) { - var _strokeStyle = new svg.Property('stroke', ctx.strokeStyle); - - _strokeStyle = _strokeStyle.addOpacity(this.style('stroke-opacity')); - ctx.strokeStyle = _strokeStyle.value; - } - - if (this.style('stroke-width').hasValue()) { - var newLineWidth = this.style('stroke-width').toPixels(); - ctx.lineWidth = newLineWidth === 0 ? 0.001 : newLineWidth; // browsers don't respect 0 - } - - if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value; - if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value; - if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value; - - if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value !== 'none') { - var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value); - - if (typeof ctx.setLineDash !== 'undefined') { - ctx.setLineDash(gaps); - } else if (typeof ctx.webkitLineDash !== 'undefined') { - ctx.webkitLineDash = gaps; - } else if (typeof ctx.mozDash !== 'undefined' && !(gaps.length === 1 && gaps[0] === 0)) { - ctx.mozDash = gaps; - } - - var offset = this.style('stroke-dashoffset').numValueOrDefault(1); - - if (typeof ctx.lineDashOffset !== 'undefined') { - ctx.lineDashOffset = offset; - } else if (typeof ctx.webkitLineDashOffset !== 'undefined') { - ctx.webkitLineDashOffset = offset; - } else if (typeof ctx.mozDashOffset !== 'undefined') { - ctx.mozDashOffset = offset; - } - } // font - - - if (typeof ctx.font !== 'undefined') { - ctx.font = svg.Font.CreateFont(this.style('font-style').value, this.style('font-variant').value, this.style('font-weight').value, this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '', this.style('font-family').value).toString(); - } // transform - - - if (this.attribute('transform').hasValue()) { - var transform = new svg.Transform(this.attribute('transform').value); - transform.apply(ctx); - } // clip - - - if (this.style('clip-path', false, true).hasValue()) { - var clip = this.style('clip-path', false, true).getDefinition(); - if (!isNullish(clip)) clip.apply(ctx); - } // opacity - - - if (this.style('opacity').hasValue()) { - ctx.globalAlpha = this.style('opacity').numValue(); - } - } - }]); - - return _class5; - }(svg.Element.ElementBase); - - svg.Element.PathElementBase = /*#__PURE__*/function (_svg$Element$Rendered) { - _inherits(_class6, _svg$Element$Rendered); - - var _super5 = _createSuper(_class6); - - function _class6() { - _classCallCheck(this, _class6); - - return _super5.apply(this, arguments); - } - - _createClass(_class6, [{ - key: "path", - value: function path(ctx) { - if (!isNullish(ctx)) ctx.beginPath(); - return new svg.BoundingBox(); - } - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - this.path(ctx); - svg.Mouse.checkPath(this, ctx); - - if (ctx.fillStyle !== '') { - if (this.style('fill-rule').valueOrDefault('inherit') !== 'inherit') { - ctx.fill(this.style('fill-rule').value); - } else { - ctx.fill(); + for (let i = 1; i < markers.length - 1; i++) { + marker.render(ctx, markers[i][0], markers[i][1]); } } - if (ctx.strokeStyle !== '') ctx.stroke(); - var markers = this.getMarkers(); - - if (!isNullish(markers)) { - if (this.style('marker-start').isUrlDefinition()) { - var marker = this.style('marker-start').getDefinition(); - marker.render(ctx, markers[0][0], markers[0][1]); - } - - if (this.style('marker-mid').isUrlDefinition()) { - var _marker = this.style('marker-mid').getDefinition(); - - for (var i = 1; i < markers.length - 1; i++) { - _marker.render(ctx, markers[i][0], markers[i][1]); - } - } - - if (this.style('marker-end').isUrlDefinition()) { - var _marker2 = this.style('marker-end').getDefinition(); - - _marker2.render(ctx, markers[markers.length - 1][0], markers[markers.length - 1][1]); - } + if (this.style('marker-end').isUrlDefinition()) { + const marker = this.style('marker-end').getDefinition(); + marker.render(ctx, markers[markers.length - 1][0], markers[markers.length - 1][1]); } } - }, { - key: "getBoundingBox", - value: function getBoundingBox() { - return this.path(); - } - }, { - key: "getMarkers", - value: function getMarkers() { - return null; - } - }]); - - return _class6; - }(svg.Element.RenderedElementBase); // svg element - - - svg.Element.svg = /*#__PURE__*/function (_svg$Element$Rendered2) { - _inherits(_class7, _svg$Element$Rendered2); - - var _super6 = _createSuper(_class7); - - function _class7() { - _classCallCheck(this, _class7); - - return _super6.apply(this, arguments); } - _createClass(_class7, [{ - key: "clearContext", - value: function clearContext(ctx) { - _get(_getPrototypeOf(_class7.prototype), "clearContext", this).call(this, ctx); - - svg.ViewPort.RemoveCurrent(); - } - }, { - key: "setContext", - value: function setContext(ctx) { - // initial values and defaults - ctx.strokeStyle = 'rgba(0,0,0,0)'; - ctx.lineCap = 'butt'; - ctx.lineJoin = 'miter'; - ctx.miterLimit = 4; - - if (typeof ctx.font !== 'undefined' && typeof window.getComputedStyle !== 'undefined') { - ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font'); - } - - _get(_getPrototypeOf(_class7.prototype), "setContext", this).call(this, ctx); // create new view port - - - if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0; - if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0; - ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y')); - var width = svg.ViewPort.width(); - var height = svg.ViewPort.height(); - if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%'; - if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%'; - - if (typeof this.root === 'undefined') { - width = this.attribute('width').toPixels('x'); - height = this.attribute('height').toPixels('y'); - var x = 0; - var y = 0; - - if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) { - x = -this.attribute('refX').toPixels('x'); - y = -this.attribute('refY').toPixels('y'); - } - - if (this.attribute('overflow').valueOrDefault('hidden') !== 'visible') { - ctx.beginPath(); - ctx.moveTo(x, y); - ctx.lineTo(width, y); - ctx.lineTo(width, height); - ctx.lineTo(x, height); - ctx.closePath(); - ctx.clip(); - } - } - - svg.ViewPort.SetCurrent(width, height); // viewbox - - if (this.attribute('viewBox').hasValue()) { - var viewBox = svg.ToNumberArray(this.attribute('viewBox').value); - var minX = viewBox[0]; - var minY = viewBox[1]; - width = viewBox[2]; - height = viewBox[3]; - svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, svg.ViewPort.width(), width, svg.ViewPort.height(), height, minX, minY, this.attribute('refX').value, this.attribute('refY').value); - svg.ViewPort.RemoveCurrent(); - svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); - } - } - }]); - - return _class7; - }(svg.Element.RenderedElementBase); // rect element - - - svg.Element.rect = /*#__PURE__*/function (_svg$Element$PathElem) { - _inherits(_class8, _svg$Element$PathElem); - - var _super7 = _createSuper(_class8); - - function _class8() { - _classCallCheck(this, _class8); - - return _super7.apply(this, arguments); + getBoundingBox() { + return this.path(); } - _createClass(_class8, [{ - key: "path", - value: function path(ctx) { - var x = this.attribute('x').toPixels('x'); - var y = this.attribute('y').toPixels('y'); - var width = this.attribute('width').toPixels('x'); - var height = this.attribute('height').toPixels('y'); - var rx = this.attribute('rx').toPixels('x'); - var ry = this.attribute('ry').toPixels('y'); - if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx; - if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry; - rx = Math.min(rx, width / 2.0); - ry = Math.min(ry, height / 2.0); - - if (!isNullish(ctx)) { - ctx.beginPath(); - ctx.moveTo(x + rx, y); - ctx.lineTo(x + width - rx, y); - ctx.quadraticCurveTo(x + width, y, x + width, y + ry); - ctx.lineTo(x + width, y + height - ry); - ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height); - ctx.lineTo(x + rx, y + height); - ctx.quadraticCurveTo(x, y + height, x, y + height - ry); - ctx.lineTo(x, y + ry); - ctx.quadraticCurveTo(x, y, x + rx, y); - ctx.closePath(); - } - - return new svg.BoundingBox(x, y, x + width, y + height); - } - }]); - - return _class8; - }(svg.Element.PathElementBase); // circle element - - - svg.Element.circle = /*#__PURE__*/function (_svg$Element$PathElem2) { - _inherits(_class9, _svg$Element$PathElem2); - - var _super8 = _createSuper(_class9); - - function _class9() { - _classCallCheck(this, _class9); - - return _super8.apply(this, arguments); + getMarkers() { + return null; } - _createClass(_class9, [{ - key: "path", - value: function path(ctx) { - var cx = this.attribute('cx').toPixels('x'); - var cy = this.attribute('cy').toPixels('y'); - var r = this.attribute('r').toPixels(); + }; // svg element - if (!isNullish(ctx)) { - ctx.beginPath(); - ctx.arc(cx, cy, r, 0, Math.PI * 2, true); - ctx.closePath(); - } - - return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r); - } - }]); - - return _class9; - }(svg.Element.PathElementBase); // ellipse element - - - var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3); - - svg.Element.ellipse = /*#__PURE__*/function (_svg$Element$PathElem3) { - _inherits(_class10, _svg$Element$PathElem3); - - var _super9 = _createSuper(_class10); - - function _class10() { - _classCallCheck(this, _class10); - - return _super9.apply(this, arguments); + svg.Element.svg = class extends svg.Element.RenderedElementBase { + clearContext(ctx) { + super.clearContext(ctx); + svg.ViewPort.RemoveCurrent(); } - _createClass(_class10, [{ - key: "path", - value: function path(ctx) { - var rx = this.attribute('rx').toPixels('x'); - var ry = this.attribute('ry').toPixels('y'); - var cx = this.attribute('cx').toPixels('x'); - var cy = this.attribute('cy').toPixels('y'); + setContext(ctx) { + // initial values and defaults + ctx.strokeStyle = 'rgba(0,0,0,0)'; + ctx.lineCap = 'butt'; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 4; - if (!isNullish(ctx)) { - ctx.beginPath(); - ctx.moveTo(cx, cy - ry); - ctx.bezierCurveTo(cx + KAPPA * rx, cy - ry, cx + rx, cy - KAPPA * ry, cx + rx, cy); - ctx.bezierCurveTo(cx + rx, cy + KAPPA * ry, cx + KAPPA * rx, cy + ry, cx, cy + ry); - ctx.bezierCurveTo(cx - KAPPA * rx, cy + ry, cx - rx, cy + KAPPA * ry, cx - rx, cy); - ctx.bezierCurveTo(cx - rx, cy - KAPPA * ry, cx - KAPPA * rx, cy - ry, cx, cy - ry); - ctx.closePath(); + if (typeof ctx.font !== 'undefined' && typeof window.getComputedStyle !== 'undefined') { + ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font'); + } + + super.setContext(ctx); // create new view port + + if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0; + if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0; + ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y')); + let width = svg.ViewPort.width(); + let height = svg.ViewPort.height(); + if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%'; + if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%'; + + if (typeof this.root === 'undefined') { + width = this.attribute('width').toPixels('x'); + height = this.attribute('height').toPixels('y'); + let x = 0; + let y = 0; + + if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) { + x = -this.attribute('refX').toPixels('x'); + y = -this.attribute('refY').toPixels('y'); } - return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry); - } - }]); - - return _class10; - }(svg.Element.PathElementBase); // line element - - - svg.Element.line = /*#__PURE__*/function (_svg$Element$PathElem4) { - _inherits(_class11, _svg$Element$PathElem4); - - var _super10 = _createSuper(_class11); - - function _class11() { - _classCallCheck(this, _class11); - - return _super10.apply(this, arguments); - } - - _createClass(_class11, [{ - key: "getPoints", - value: function getPoints() { - return [new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')), new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))]; - } - }, { - key: "path", - value: function path(ctx) { - var points = this.getPoints(); - - if (!isNullish(ctx)) { - ctx.beginPath(); - ctx.moveTo(points[0].x, points[0].y); - ctx.lineTo(points[1].x, points[1].y); - } - - return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y); - } - }, { - key: "getMarkers", - value: function getMarkers() { - var points = this.getPoints(); - var a = points[0].angleTo(points[1]); - return [[points[0], a], [points[1], a]]; - } - }]); - - return _class11; - }(svg.Element.PathElementBase); // polyline element - - - svg.Element.polyline = /*#__PURE__*/function (_svg$Element$PathElem5) { - _inherits(_class12, _svg$Element$PathElem5); - - var _super11 = _createSuper(_class12); - - function _class12(node) { - var _this8; - - _classCallCheck(this, _class12); - - _this8 = _super11.call(this, node); - _this8.points = svg.CreatePath(_this8.attribute('points').value); - return _this8; - } - - _createClass(_class12, [{ - key: "path", - value: function path(ctx) { - var _this$points$ = this.points[0], - x = _this$points$.x, - y = _this$points$.y; - var bb = new svg.BoundingBox(x, y); - - if (!isNullish(ctx)) { + if (this.attribute('overflow').valueOrDefault('hidden') !== 'visible') { ctx.beginPath(); ctx.moveTo(x, y); + ctx.lineTo(width, y); + ctx.lineTo(width, height); + ctx.lineTo(x, height); + ctx.closePath(); + ctx.clip(); } - - for (var i = 1; i < this.points.length; i++) { - var _this$points$i = this.points[i], - _x = _this$points$i.x, - _y = _this$points$i.y; - bb.addPoint(_x, _y); - if (!isNullish(ctx)) ctx.lineTo(_x, _y); - } - - return bb; } - }, { - key: "getMarkers", - value: function getMarkers() { - var markers = []; - for (var i = 0; i < this.points.length - 1; i++) { - markers.push([this.points[i], this.points[i].angleTo(this.points[i + 1])]); - } + svg.ViewPort.SetCurrent(width, height); // viewbox - markers.push([this.points[this.points.length - 1], markers[markers.length - 1][1]]); - return markers; + if (this.attribute('viewBox').hasValue()) { + const viewBox = svg.ToNumberArray(this.attribute('viewBox').value); + const minX = viewBox[0]; + const minY = viewBox[1]; + width = viewBox[2]; + height = viewBox[3]; + svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, svg.ViewPort.width(), width, svg.ViewPort.height(), height, minX, minY, this.attribute('refX').value, this.attribute('refY').value); + svg.ViewPort.RemoveCurrent(); + svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]); } - }]); - - return _class12; - }(svg.Element.PathElementBase); // polygon element - - - svg.Element.polygon = /*#__PURE__*/function (_svg$Element$polyline) { - _inherits(_class13, _svg$Element$polyline); - - var _super12 = _createSuper(_class13); - - function _class13() { - _classCallCheck(this, _class13); - - return _super12.apply(this, arguments); } - _createClass(_class13, [{ - key: "path", - value: function path(ctx) { - var bb = _get(_getPrototypeOf(_class13.prototype), "path", this).call(this, ctx); + }; // rect element - if (!isNullish(ctx)) { - ctx.lineTo(this.points[0].x, this.points[0].y); - ctx.closePath(); - } + svg.Element.rect = class extends svg.Element.PathElementBase { + path(ctx) { + const x = this.attribute('x').toPixels('x'); + const y = this.attribute('y').toPixels('y'); + const width = this.attribute('width').toPixels('x'); + const height = this.attribute('height').toPixels('y'); + let rx = this.attribute('rx').toPixels('x'); + let ry = this.attribute('ry').toPixels('y'); + if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx; + if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry; + rx = Math.min(rx, width / 2.0); + ry = Math.min(ry, height / 2.0); - return bb; + if (!isNullish(ctx)) { + ctx.beginPath(); + ctx.moveTo(x + rx, y); + ctx.lineTo(x + width - rx, y); + ctx.quadraticCurveTo(x + width, y, x + width, y + ry); + ctx.lineTo(x + width, y + height - ry); + ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height); + ctx.lineTo(x + rx, y + height); + ctx.quadraticCurveTo(x, y + height, x, y + height - ry); + ctx.lineTo(x, y + ry); + ctx.quadraticCurveTo(x, y, x + rx, y); + ctx.closePath(); } - }]); - return _class13; - }(svg.Element.polyline); // path element + return new svg.BoundingBox(x, y, x + width, y + height); + } + }; // circle element - svg.Element.path = /*#__PURE__*/function (_svg$Element$PathElem6) { - _inherits(_class14, _svg$Element$PathElem6); + svg.Element.circle = class extends svg.Element.PathElementBase { + path(ctx) { + const cx = this.attribute('cx').toPixels('x'); + const cy = this.attribute('cy').toPixels('y'); + const r = this.attribute('r').toPixels(); - var _super13 = _createSuper(_class14); + if (!isNullish(ctx)) { + ctx.beginPath(); + ctx.arc(cx, cy, r, 0, Math.PI * 2, true); + ctx.closePath(); + } - function _class14(node) { - var _this9; + return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r); + } - _classCallCheck(this, _class14); + }; // ellipse element - _this9 = _super13.call(this, node); + const KAPPA = 4 * ((Math.sqrt(2) - 1) / 3); + svg.Element.ellipse = class extends svg.Element.PathElementBase { + path(ctx) { + const rx = this.attribute('rx').toPixels('x'); + const ry = this.attribute('ry').toPixels('y'); + const cx = this.attribute('cx').toPixels('x'); + const cy = this.attribute('cy').toPixels('y'); - var d = _this9.attribute('d').value // TODO: convert to real lexer based on https://www.w3.org/TR/SVG11/paths.html#PathDataBNF + if (!isNullish(ctx)) { + ctx.beginPath(); + ctx.moveTo(cx, cy - ry); + ctx.bezierCurveTo(cx + KAPPA * rx, cy - ry, cx + rx, cy - KAPPA * ry, cx + rx, cy); + ctx.bezierCurveTo(cx + rx, cy + KAPPA * ry, cx + KAPPA * rx, cy + ry, cx, cy + ry); + ctx.bezierCurveTo(cx - KAPPA * rx, cy + ry, cx - rx, cy + KAPPA * ry, cx - rx, cy); + ctx.bezierCurveTo(cx - rx, cy - KAPPA * ry, cx - KAPPA * rx, cy - ry, cx, cy - ry); + ctx.closePath(); + } + + return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry); + } + + }; // line element + + svg.Element.line = class extends svg.Element.PathElementBase { + getPoints() { + return [new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')), new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))]; + } + + path(ctx) { + const points = this.getPoints(); + + if (!isNullish(ctx)) { + ctx.beginPath(); + ctx.moveTo(points[0].x, points[0].y); + ctx.lineTo(points[1].x, points[1].y); + } + + return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y); + } + + getMarkers() { + const points = this.getPoints(); + const a = points[0].angleTo(points[1]); + return [[points[0], a], [points[1], a]]; + } + + }; // polyline element + + svg.Element.polyline = class extends svg.Element.PathElementBase { + constructor(node) { + super(node); + this.points = svg.CreatePath(this.attribute('points').value); + } + + path(ctx) { + const { + x, + y + } = this.points[0]; + const bb = new svg.BoundingBox(x, y); + + if (!isNullish(ctx)) { + ctx.beginPath(); + ctx.moveTo(x, y); + } + + for (let i = 1; i < this.points.length; i++) { + const { + x: _x, + y: _y + } = this.points[i]; + bb.addPoint(_x, _y); + if (!isNullish(ctx)) ctx.lineTo(_x, _y); + } + + return bb; + } + + getMarkers() { + const markers = []; + + for (let i = 0; i < this.points.length - 1; i++) { + markers.push([this.points[i], this.points[i].angleTo(this.points[i + 1])]); + } + + markers.push([this.points[this.points.length - 1], markers[markers.length - 1][1]]); + return markers; + } + + }; // polygon element + + svg.Element.polygon = class extends svg.Element.polyline { + path(ctx) { + const bb = super.path(ctx); + + if (!isNullish(ctx)) { + ctx.lineTo(this.points[0].x, this.points[0].y); + ctx.closePath(); + } + + return bb; + } + + }; // path element + + svg.Element.path = class extends svg.Element.PathElementBase { + constructor(node) { + super(node); + let d = this.attribute('d').value // TODO: convert to real lexer based on https://www.w3.org/TR/SVG11/paths.html#PathDataBNF .replace(/,/gm, ' ') // get rid of all commas .replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2') // separate commands from commands .replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2') // separate commands from commands @@ -2583,13 +2033,13 @@ var canvg = (function (exports) { .replace(/(\.\d*)(\.)/gm, '$1 $2') // separate digits when no comma .replace(/([Aa](\s+\d+)(\s+\d+)(\s+\d+))\s+([01])\s*([01])/gm, '$1 $5 $6 '); // shorthand elliptical arc path syntax - d = svg.compressSpaces(d); // compress multiple spaces d = svg.trim(d); - _this9.PathParser = { + this.PathParser = { tokens: d.split(' '), - reset: function reset() { + + reset() { this.i = -1; this.command = ''; this.previousCommand = ''; @@ -2599,14 +2049,17 @@ var canvg = (function (exports) { this.points = []; this.angles = []; }, - isEnd: function isEnd() { + + isEnd() { return this.i >= this.tokens.length - 1; }, - isCommandOrEnd: function isCommandOrEnd() { + + isCommandOrEnd() { if (this.isEnd()) return true; return !isNullish(this.tokens[this.i + 1].match(/^[A-Za-z]$/)); }, - isRelativeCommand: function isRelativeCommand() { + + isRelativeCommand() { switch (this.command) { case 'm': case 'l': @@ -2623,41 +2076,49 @@ var canvg = (function (exports) { return false; }, - getToken: function getToken() { + + getToken() { this.i++; return this.tokens[this.i]; }, - getScalar: function getScalar() { + + getScalar() { return Number.parseFloat(this.getToken()); }, - nextCommand: function nextCommand() { + + nextCommand() { this.previousCommand = this.command; this.command = this.getToken(); }, - getPoint: function getPoint() { - var p = new svg.Point(this.getScalar(), this.getScalar()); + + getPoint() { + const p = new svg.Point(this.getScalar(), this.getScalar()); return this.makeAbsolute(p); }, - getAsControlPoint: function getAsControlPoint() { - var p = this.getPoint(); + + getAsControlPoint() { + const p = this.getPoint(); this.control = p; return p; }, - getAsCurrentPoint: function getAsCurrentPoint() { - var p = this.getPoint(); + + getAsCurrentPoint() { + const p = this.getPoint(); this.current = p; return p; }, - getReflectedControlPoint: function getReflectedControlPoint() { + + getReflectedControlPoint() { if (this.previousCommand.toLowerCase() !== 'c' && this.previousCommand.toLowerCase() !== 's' && this.previousCommand.toLowerCase() !== 'q' && this.previousCommand.toLowerCase() !== 't') { return this.current; } // reflect point - var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); + const p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y); return p; }, - makeAbsolute: function makeAbsolute(p) { + + makeAbsolute(p) { if (this.isRelativeCommand()) { p.x += this.current.x; p.y += this.current.y; @@ -2665,7 +2126,8 @@ var canvg = (function (exports) { return p; }, - addMarker: function addMarker(p, from, priorTo) { + + addMarker(p, from, priorTo) { // if the last angle isn't filled in because we didn't have this point yet ... if (!isNullish(priorTo) && this.angles.length > 0 && isNullish(this.angles[this.angles.length - 1])) { this.angles[this.angles.length - 1] = this.points[this.points.length - 1].angleTo(priorTo); @@ -2673,17 +2135,20 @@ var canvg = (function (exports) { this.addMarkerAngle(p, isNullish(from) ? null : from.angleTo(p)); }, - addMarkerAngle: function addMarkerAngle(p, a) { + + addMarkerAngle(p, a) { this.points.push(p); this.angles.push(a); }, - getMarkerPoints: function getMarkerPoints() { + + getMarkerPoints() { return this.points; }, - getMarkerAngles: function getMarkerAngles() { - for (var i = 0; i < this.angles.length; i++) { + + getMarkerAngles() { + for (let i = 0; i < this.angles.length; i++) { if (isNullish(this.angles[i])) { - for (var j = i + 1; j < this.angles.length; j++) { + for (let j = i + 1; j < this.angles.length; j++) { if (!isNullish(this.angles[j])) { this.angles[i] = this.angles[j]; break; @@ -2694,1386 +2159,1002 @@ var canvg = (function (exports) { return this.angles; } + }; - return _this9; } - _createClass(_class14, [{ - key: "path", - value: function path(ctx) { - var pp = this.PathParser; - pp.reset(); - var bb = new svg.BoundingBox(); - if (!isNullish(ctx)) ctx.beginPath(); + path(ctx) { + const pp = this.PathParser; + pp.reset(); + const bb = new svg.BoundingBox(); + if (!isNullish(ctx)) ctx.beginPath(); - while (!pp.isEnd()) { - pp.nextCommand(); + while (!pp.isEnd()) { + pp.nextCommand(); - switch (pp.command) { - case 'M': - case 'm': - { - var p = pp.getAsCurrentPoint(); - pp.addMarker(p); - bb.addPoint(p.x, p.y); - if (!isNullish(ctx)) ctx.moveTo(p.x, p.y); - pp.start = pp.current; + switch (pp.command) { + case 'M': + case 'm': + { + const p = pp.getAsCurrentPoint(); + pp.addMarker(p); + bb.addPoint(p.x, p.y); + if (!isNullish(ctx)) ctx.moveTo(p.x, p.y); + pp.start = pp.current; - while (!pp.isCommandOrEnd()) { - var _p = pp.getAsCurrentPoint(); - - pp.addMarker(_p, pp.start); - bb.addPoint(_p.x, _p.y); - if (!isNullish(ctx)) ctx.lineTo(_p.x, _p.y); - } - - break; - } - - case 'L': - case 'l': while (!pp.isCommandOrEnd()) { - var c = pp.current; + const _p = pp.getAsCurrentPoint(); - var _p2 = pp.getAsCurrentPoint(); - - pp.addMarker(_p2, c); - bb.addPoint(_p2.x, _p2.y); - if (!isNullish(ctx)) ctx.lineTo(_p2.x, _p2.y); + pp.addMarker(_p, pp.start); + bb.addPoint(_p.x, _p.y); + if (!isNullish(ctx)) ctx.lineTo(_p.x, _p.y); } break; + } - case 'H': - case 'h': - while (!pp.isCommandOrEnd()) { - var newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y); - pp.addMarker(newP, pp.current); - pp.current = newP; - bb.addPoint(pp.current.x, pp.current.y); - if (!isNullish(ctx)) ctx.lineTo(pp.current.x, pp.current.y); + case 'L': + case 'l': + while (!pp.isCommandOrEnd()) { + const c = pp.current; + const p = pp.getAsCurrentPoint(); + pp.addMarker(p, c); + bb.addPoint(p.x, p.y); + if (!isNullish(ctx)) ctx.lineTo(p.x, p.y); + } + + break; + + case 'H': + case 'h': + while (!pp.isCommandOrEnd()) { + const newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y); + pp.addMarker(newP, pp.current); + pp.current = newP; + bb.addPoint(pp.current.x, pp.current.y); + if (!isNullish(ctx)) ctx.lineTo(pp.current.x, pp.current.y); + } + + break; + + case 'V': + case 'v': + while (!pp.isCommandOrEnd()) { + const newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar()); + pp.addMarker(newP, pp.current); + pp.current = newP; + bb.addPoint(pp.current.x, pp.current.y); + if (!isNullish(ctx)) ctx.lineTo(pp.current.x, pp.current.y); + } + + break; + + case 'C': + case 'c': + while (!pp.isCommandOrEnd()) { + const curr = pp.current; + const p1 = pp.getPoint(); + const cntrl = pp.getAsControlPoint(); + const cp = pp.getAsCurrentPoint(); + pp.addMarker(cp, cntrl, p1); + bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); + if (!isNullish(ctx)) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); + } + + break; + + case 'S': + case 's': + while (!pp.isCommandOrEnd()) { + const curr = pp.current; + const p1 = pp.getReflectedControlPoint(); + const cntrl = pp.getAsControlPoint(); + const cp = pp.getAsCurrentPoint(); + pp.addMarker(cp, cntrl, p1); + bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); + if (!isNullish(ctx)) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); + } + + break; + + case 'Q': + case 'q': + while (!pp.isCommandOrEnd()) { + const curr = pp.current; + const cntrl = pp.getAsControlPoint(); + const cp = pp.getAsCurrentPoint(); + pp.addMarker(cp, cntrl, cntrl); + bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y); + if (!isNullish(ctx)) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y); + } + + break; + + case 'T': + case 't': + while (!pp.isCommandOrEnd()) { + const curr = pp.current; + const cntrl = pp.getReflectedControlPoint(); + pp.control = cntrl; + const cp = pp.getAsCurrentPoint(); + pp.addMarker(cp, cntrl, cntrl); + bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y); + if (!isNullish(ctx)) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y); + } + + break; + + case 'A': + case 'a': + while (!pp.isCommandOrEnd()) { + const curr = pp.current; + let rx = pp.getScalar(); + let ry = pp.getScalar(); + const xAxisRotation = pp.getScalar() * (Math.PI / 180.0); + const largeArcFlag = pp.getScalar(); + const sweepFlag = pp.getScalar(); + const cp = pp.getAsCurrentPoint(); // Conversion from endpoint to center parameterization + // https://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter + // x1', y1' + + const currp = new svg.Point(Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0, -Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0); // adjust radii + + const l = currp.x ** 2 / rx ** 2 + currp.y ** 2 / ry ** 2; + + if (l > 1) { + rx *= Math.sqrt(l); + ry *= Math.sqrt(l); + } // cx', cy' + + + let s = (largeArcFlag === sweepFlag ? -1 : 1) * Math.sqrt((rx ** 2 * ry ** 2 - rx ** 2 * currp.y ** 2 - ry ** 2 * currp.x ** 2) / (rx ** 2 * currp.y ** 2 + ry ** 2 * currp.x ** 2)); + if (isNaN(s)) s = 0; + const cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx); // cx, cy + + const centp = new svg.Point((curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y, (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y); // vector magnitude + + const m = function (v) { + return Math.sqrt(v[0] ** 2 + v[1] ** 2); + }; // ratio between two vectors + + + const r = function (u, v) { + return (u[0] * v[0] + u[1] * v[1]) / (m(u) * m(v)); + }; // angle between two vectors + + + const a = function (u, v) { + return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(r(u, v)); + }; // initial angle + + + const a1 = a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]); // angle delta + + const u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]; + const v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry]; + let ad = a(u, v); + if (r(u, v) <= -1) ad = Math.PI; + if (r(u, v) >= 1) ad = 0; // for markers + + const dir = 1 - sweepFlag ? 1.0 : -1.0; + const ah = a1 + dir * (ad / 2.0); + const halfWay = new svg.Point(centp.x + rx * Math.cos(ah), centp.y + ry * Math.sin(ah)); + pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2); + pp.addMarkerAngle(cp, ah - dir * Math.PI); + bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better + + if (!isNullish(ctx)) { + const _r = rx > ry ? rx : ry; + + const sx = rx > ry ? 1 : rx / ry; + const sy = rx > ry ? ry / rx : 1; + ctx.translate(centp.x, centp.y); + ctx.rotate(xAxisRotation); + ctx.scale(sx, sy); + ctx.arc(0, 0, _r, a1, a1 + ad, 1 - sweepFlag); + ctx.scale(1 / sx, 1 / sy); + ctx.rotate(-xAxisRotation); + ctx.translate(-centp.x, -centp.y); } + } - break; + break; - case 'V': - case 'v': - while (!pp.isCommandOrEnd()) { - var _newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar()); - - pp.addMarker(_newP, pp.current); - pp.current = _newP; - bb.addPoint(pp.current.x, pp.current.y); - if (!isNullish(ctx)) ctx.lineTo(pp.current.x, pp.current.y); - } - - break; - - case 'C': - case 'c': - while (!pp.isCommandOrEnd()) { - var curr = pp.current; - var p1 = pp.getPoint(); - var cntrl = pp.getAsControlPoint(); - var cp = pp.getAsCurrentPoint(); - pp.addMarker(cp, cntrl, p1); - bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); - if (!isNullish(ctx)) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y); - } - - break; - - case 'S': - case 's': - while (!pp.isCommandOrEnd()) { - var _curr = pp.current; - - var _p3 = pp.getReflectedControlPoint(); - - var _cntrl = pp.getAsControlPoint(); - - var _cp = pp.getAsCurrentPoint(); - - pp.addMarker(_cp, _cntrl, _p3); - bb.addBezierCurve(_curr.x, _curr.y, _p3.x, _p3.y, _cntrl.x, _cntrl.y, _cp.x, _cp.y); - if (!isNullish(ctx)) ctx.bezierCurveTo(_p3.x, _p3.y, _cntrl.x, _cntrl.y, _cp.x, _cp.y); - } - - break; - - case 'Q': - case 'q': - while (!pp.isCommandOrEnd()) { - var _curr2 = pp.current; - - var _cntrl2 = pp.getAsControlPoint(); - - var _cp2 = pp.getAsCurrentPoint(); - - pp.addMarker(_cp2, _cntrl2, _cntrl2); - bb.addQuadraticCurve(_curr2.x, _curr2.y, _cntrl2.x, _cntrl2.y, _cp2.x, _cp2.y); - if (!isNullish(ctx)) ctx.quadraticCurveTo(_cntrl2.x, _cntrl2.y, _cp2.x, _cp2.y); - } - - break; - - case 'T': - case 't': - while (!pp.isCommandOrEnd()) { - var _curr3 = pp.current; - - var _cntrl3 = pp.getReflectedControlPoint(); - - pp.control = _cntrl3; - - var _cp3 = pp.getAsCurrentPoint(); - - pp.addMarker(_cp3, _cntrl3, _cntrl3); - bb.addQuadraticCurve(_curr3.x, _curr3.y, _cntrl3.x, _cntrl3.y, _cp3.x, _cp3.y); - if (!isNullish(ctx)) ctx.quadraticCurveTo(_cntrl3.x, _cntrl3.y, _cp3.x, _cp3.y); - } - - break; - - case 'A': - case 'a': - var _loop2 = function _loop2() { - var curr = pp.current; - var rx = pp.getScalar(); - var ry = pp.getScalar(); - var xAxisRotation = pp.getScalar() * (Math.PI / 180.0); - var largeArcFlag = pp.getScalar(); - var sweepFlag = pp.getScalar(); - var cp = pp.getAsCurrentPoint(); // Conversion from endpoint to center parameterization - // https://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter - // x1', y1' - - var currp = new svg.Point(Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0, -Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0); // adjust radii - - var l = Math.pow(currp.x, 2) / Math.pow(rx, 2) + Math.pow(currp.y, 2) / Math.pow(ry, 2); - - if (l > 1) { - rx *= Math.sqrt(l); - ry *= Math.sqrt(l); - } // cx', cy' - - - var s = (largeArcFlag === sweepFlag ? -1 : 1) * Math.sqrt((Math.pow(rx, 2) * Math.pow(ry, 2) - Math.pow(rx, 2) * Math.pow(currp.y, 2) - Math.pow(ry, 2) * Math.pow(currp.x, 2)) / (Math.pow(rx, 2) * Math.pow(currp.y, 2) + Math.pow(ry, 2) * Math.pow(currp.x, 2))); - if (isNaN(s)) s = 0; - var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx); // cx, cy - - var centp = new svg.Point((curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y, (curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y); // vector magnitude - - var m = function m(v) { - return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)); - }; // ratio between two vectors - - - var r = function r(u, v) { - return (u[0] * v[0] + u[1] * v[1]) / (m(u) * m(v)); - }; // angle between two vectors - - - var a = function a(u, v) { - return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(r(u, v)); - }; // initial angle - - - var a1 = a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]); // angle delta - - var u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]; - var v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry]; - var ad = a(u, v); - if (r(u, v) <= -1) ad = Math.PI; - if (r(u, v) >= 1) ad = 0; // for markers - - var dir = 1 - sweepFlag ? 1.0 : -1.0; - var ah = a1 + dir * (ad / 2.0); - var halfWay = new svg.Point(centp.x + rx * Math.cos(ah), centp.y + ry * Math.sin(ah)); - pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2); - pp.addMarkerAngle(cp, ah - dir * Math.PI); - bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better - - if (!isNullish(ctx)) { - var _r = rx > ry ? rx : ry; - - var sx = rx > ry ? 1 : rx / ry; - var sy = rx > ry ? ry / rx : 1; - ctx.translate(centp.x, centp.y); - ctx.rotate(xAxisRotation); - ctx.scale(sx, sy); - ctx.arc(0, 0, _r, a1, a1 + ad, 1 - sweepFlag); - ctx.scale(1 / sx, 1 / sy); - ctx.rotate(-xAxisRotation); - ctx.translate(-centp.x, -centp.y); - } - }; - - while (!pp.isCommandOrEnd()) { - _loop2(); - } - - break; - - case 'Z': - case 'z': - if (!isNullish(ctx)) ctx.closePath(); - pp.current = pp.start; - } + case 'Z': + case 'z': + if (!isNullish(ctx)) ctx.closePath(); + pp.current = pp.start; } - - return bb; } - }, { - key: "getMarkers", - value: function getMarkers() { - var points = this.PathParser.getMarkerPoints(); - var angles = this.PathParser.getMarkerAngles(); - var markers = points.map(function (point, i) { - return [point, angles[i]]; - }); - return markers; - } - }]); - return _class14; - }(svg.Element.PathElementBase); // pattern element - - - svg.Element.pattern = /*#__PURE__*/function (_svg$Element$ElementB2) { - _inherits(_class15, _svg$Element$ElementB2); - - var _super14 = _createSuper(_class15); - - function _class15() { - _classCallCheck(this, _class15); - - return _super14.apply(this, arguments); + return bb; } - _createClass(_class15, [{ - key: "createPattern", - value: function createPattern(ctx, element) { - var width = this.attribute('width').toPixels('x', true); - var height = this.attribute('height').toPixels('y', true); // render me using a temporary svg element + getMarkers() { + const points = this.PathParser.getMarkerPoints(); + const angles = this.PathParser.getMarkerAngles(); + const markers = points.map((point, i) => { + return [point, angles[i]]; + }); + return markers; + } - var tempSvg = new svg.Element.svg(); - tempSvg.attributes.viewBox = new svg.Property('viewBox', this.attribute('viewBox').value); - tempSvg.attributes.width = new svg.Property('width', width + 'px'); - tempSvg.attributes.height = new svg.Property('height', height + 'px'); - tempSvg.attributes.transform = new svg.Property('transform', this.attribute('patternTransform').value); - tempSvg.children = this.children; - var c = document.createElement('canvas'); - c.width = width; - c.height = height; - var cctx = c.getContext('2d'); + }; // pattern element - if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) { - cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true)); - } // render 3x3 grid so when we transform there's no white space on edges + svg.Element.pattern = class extends svg.Element.ElementBase { + createPattern(ctx, element) { + const width = this.attribute('width').toPixels('x', true); + const height = this.attribute('height').toPixels('y', true); // render me using a temporary svg element + + const tempSvg = new svg.Element.svg(); + tempSvg.attributes.viewBox = new svg.Property('viewBox', this.attribute('viewBox').value); + tempSvg.attributes.width = new svg.Property('width', width + 'px'); + tempSvg.attributes.height = new svg.Property('height', height + 'px'); + tempSvg.attributes.transform = new svg.Property('transform', this.attribute('patternTransform').value); + tempSvg.children = this.children; + const c = document.createElement('canvas'); + c.width = width; + c.height = height; + const cctx = c.getContext('2d'); + + if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) { + cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true)); + } // render 3x3 grid so when we transform there's no white space on edges - for (var x = -1; x <= 1; x++) { - for (var y = -1; y <= 1; y++) { - cctx.save(); - cctx.translate(x * c.width, y * c.height); - tempSvg.render(cctx); - cctx.restore(); - } + for (let x = -1; x <= 1; x++) { + for (let y = -1; y <= 1; y++) { + cctx.save(); + cctx.translate(x * c.width, y * c.height); + tempSvg.render(cctx); + cctx.restore(); } - - var pattern = ctx.createPattern(c, 'repeat'); - return pattern; } - }]); - return _class15; - }(svg.Element.ElementBase); // marker element - - - svg.Element.marker = /*#__PURE__*/function (_svg$Element$ElementB3) { - _inherits(_class16, _svg$Element$ElementB3); - - var _super15 = _createSuper(_class16); - - function _class16() { - _classCallCheck(this, _class16); - - return _super15.apply(this, arguments); + const pattern = ctx.createPattern(c, 'repeat'); + return pattern; } - _createClass(_class16, [{ - key: "render", - value: function render(ctx, point, angle) { - ctx.translate(point.x, point.y); - if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(angle); - if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth); - ctx.save(); // render me using a temporary svg element + }; // marker element - var tempSvg = new svg.Element.svg(); - tempSvg.attributes.viewBox = new svg.Property('viewBox', this.attribute('viewBox').value); - tempSvg.attributes.refX = new svg.Property('refX', this.attribute('refX').value); - tempSvg.attributes.refY = new svg.Property('refY', this.attribute('refY').value); - tempSvg.attributes.width = new svg.Property('width', this.attribute('markerWidth').value); - tempSvg.attributes.height = new svg.Property('height', this.attribute('markerHeight').value); - tempSvg.attributes.fill = new svg.Property('fill', this.attribute('fill').valueOrDefault('black')); - tempSvg.attributes.stroke = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none')); - tempSvg.children = this.children; - tempSvg.render(ctx); - ctx.restore(); - if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(1 / ctx.lineWidth, 1 / ctx.lineWidth); - if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(-angle); - ctx.translate(-point.x, -point.y); - } - }]); + svg.Element.marker = class extends svg.Element.ElementBase { + render(ctx, point, angle) { + ctx.translate(point.x, point.y); + if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(angle); + if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth); + ctx.save(); // render me using a temporary svg element - return _class16; - }(svg.Element.ElementBase); // definitions element - - - svg.Element.defs = /*#__PURE__*/function (_svg$Element$ElementB4) { - _inherits(_class17, _svg$Element$ElementB4); - - var _super16 = _createSuper(_class17); - - function _class17() { - _classCallCheck(this, _class17); - - return _super16.apply(this, arguments); + const tempSvg = new svg.Element.svg(); + tempSvg.attributes.viewBox = new svg.Property('viewBox', this.attribute('viewBox').value); + tempSvg.attributes.refX = new svg.Property('refX', this.attribute('refX').value); + tempSvg.attributes.refY = new svg.Property('refY', this.attribute('refY').value); + tempSvg.attributes.width = new svg.Property('width', this.attribute('markerWidth').value); + tempSvg.attributes.height = new svg.Property('height', this.attribute('markerHeight').value); + tempSvg.attributes.fill = new svg.Property('fill', this.attribute('fill').valueOrDefault('black')); + tempSvg.attributes.stroke = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none')); + tempSvg.children = this.children; + tempSvg.render(ctx); + ctx.restore(); + if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(1 / ctx.lineWidth, 1 / ctx.lineWidth); + if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(-angle); + ctx.translate(-point.x, -point.y); } - _createClass(_class17, [{ - key: "render", - value: function render(ctx) {// NOOP - } - }]); + }; // definitions element - return _class17; - }(svg.Element.ElementBase); // base for gradients + svg.Element.defs = class extends svg.Element.ElementBase { + render(ctx) {// NOOP + } + }; // base for gradients - svg.Element.GradientBase = /*#__PURE__*/function (_svg$Element$ElementB5) { - _inherits(_class18, _svg$Element$ElementB5); - - var _super17 = _createSuper(_class18); - - function _class18(node) { - var _this10; - - _classCallCheck(this, _class18); - - _this10 = _super17.call(this, node); - _this10.gradientUnits = _this10.attribute('gradientUnits').valueOrDefault('objectBoundingBox'); - _this10.stops = []; - - _this10.children.forEach(function (child) { + svg.Element.GradientBase = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox'); + this.stops = []; + this.children.forEach(child => { if (child.type === 'stop') { - _this10.stops.push(child); + this.stops.push(child); } }); - - return _this10; } - _createClass(_class18, [{ - key: "getGradient", - value: function getGradient() {// OVERRIDE ME! - } - }, { - key: "createGradient", - value: function createGradient(ctx, element, parentOpacityProp) { - var stopsContainer = this.getHrefAttribute().hasValue() ? this.getHrefAttribute().getDefinition() : this; - - var addParentOpacity = function addParentOpacity(color) { - if (parentOpacityProp.hasValue()) { - var p = new svg.Property('color', color); - return p.addOpacity(parentOpacityProp).value; - } - - return color; - }; - - var g = this.getGradient(ctx, element); - if (isNullish(g)) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color); - stopsContainer.stops.forEach(function (_ref10) { - var offset = _ref10.offset, - color = _ref10.color; - g.addColorStop(offset, addParentOpacity(color)); - }); - - if (this.attribute('gradientTransform').hasValue()) { - // render as transformed pattern on temporary canvas - var rootView = svg.ViewPort.viewPorts[0]; - var rect = new svg.Element.rect(); - rect.attributes.x = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS / 3.0); - rect.attributes.y = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS / 3.0); - rect.attributes.width = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS); - rect.attributes.height = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS); - var group = new svg.Element.g(); - group.attributes.transform = new svg.Property('transform', this.attribute('gradientTransform').value); - group.children = [rect]; - var tempSvg = new svg.Element.svg(); - tempSvg.attributes.x = new svg.Property('x', 0); - tempSvg.attributes.y = new svg.Property('y', 0); - tempSvg.attributes.width = new svg.Property('width', rootView.width); - tempSvg.attributes.height = new svg.Property('height', rootView.height); - tempSvg.children = [group]; - var c = document.createElement('canvas'); - c.width = rootView.width; - c.height = rootView.height; - var tempCtx = c.getContext('2d'); - tempCtx.fillStyle = g; - tempSvg.render(tempCtx); - return tempCtx.createPattern(c, 'no-repeat'); - } - - return g; - } - }]); - - return _class18; - }(svg.Element.ElementBase); // linear gradient element - - - svg.Element.linearGradient = /*#__PURE__*/function (_svg$Element$Gradient) { - _inherits(_class19, _svg$Element$Gradient); - - var _super18 = _createSuper(_class19); - - function _class19() { - _classCallCheck(this, _class19); - - return _super18.apply(this, arguments); + getGradient() {// OVERRIDE ME! } - _createClass(_class19, [{ - key: "getGradient", - value: function getGradient(ctx, element) { - var useBB = this.gradientUnits === 'objectBoundingBox' && element.getBoundingBox; - var bb = useBB ? element.getBoundingBox() : null; + createGradient(ctx, element, parentOpacityProp) { + const stopsContainer = this.getHrefAttribute().hasValue() ? this.getHrefAttribute().getDefinition() : this; - if (!this.attribute('x1').hasValue() && !this.attribute('y1').hasValue() && !this.attribute('x2').hasValue() && !this.attribute('y2').hasValue()) { - this.attribute('x1', true).value = 0; - this.attribute('y1', true).value = 0; - this.attribute('x2', true).value = 1; - this.attribute('y2', true).value = 0; + const addParentOpacity = function (color) { + if (parentOpacityProp.hasValue()) { + const p = new svg.Property('color', color); + return p.addOpacity(parentOpacityProp).value; } - var x1 = useBB ? bb.x() + bb.width() * this.attribute('x1').numValue() : this.attribute('x1').toPixels('x'); - var y1 = useBB ? bb.y() + bb.height() * this.attribute('y1').numValue() : this.attribute('y1').toPixels('y'); - var x2 = useBB ? bb.x() + bb.width() * this.attribute('x2').numValue() : this.attribute('x2').toPixels('x'); - var y2 = useBB ? bb.y() + bb.height() * this.attribute('y2').numValue() : this.attribute('y2').toPixels('y'); - if (x1 === x2 && y1 === y2) return null; - return ctx.createLinearGradient(x1, y1, x2, y2); + return color; + }; + + const g = this.getGradient(ctx, element); + if (isNullish(g)) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color); + stopsContainer.stops.forEach(({ + offset, + color + }) => { + g.addColorStop(offset, addParentOpacity(color)); + }); + + if (this.attribute('gradientTransform').hasValue()) { + // render as transformed pattern on temporary canvas + const rootView = svg.ViewPort.viewPorts[0]; + const rect = new svg.Element.rect(); + rect.attributes.x = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS / 3.0); + rect.attributes.y = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS / 3.0); + rect.attributes.width = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS); + rect.attributes.height = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS); + const group = new svg.Element.g(); + group.attributes.transform = new svg.Property('transform', this.attribute('gradientTransform').value); + group.children = [rect]; + const tempSvg = new svg.Element.svg(); + tempSvg.attributes.x = new svg.Property('x', 0); + tempSvg.attributes.y = new svg.Property('y', 0); + tempSvg.attributes.width = new svg.Property('width', rootView.width); + tempSvg.attributes.height = new svg.Property('height', rootView.height); + tempSvg.children = [group]; + const c = document.createElement('canvas'); + c.width = rootView.width; + c.height = rootView.height; + const tempCtx = c.getContext('2d'); + tempCtx.fillStyle = g; + tempSvg.render(tempCtx); + return tempCtx.createPattern(c, 'no-repeat'); } - }]); - return _class19; - }(svg.Element.GradientBase); // radial gradient element - - - svg.Element.radialGradient = /*#__PURE__*/function (_svg$Element$Gradient2) { - _inherits(_class20, _svg$Element$Gradient2); - - var _super19 = _createSuper(_class20); - - function _class20() { - _classCallCheck(this, _class20); - - return _super19.apply(this, arguments); + return g; } - _createClass(_class20, [{ - key: "getGradient", - value: function getGradient(ctx, element) { - var useBB = this.gradientUnits === 'objectBoundingBox' && element.getBoundingBox; - var bb = useBB ? element.getBoundingBox() : null; - if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%'; - if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%'; - if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%'; - var cx = useBB ? bb.x() + bb.width() * this.attribute('cx').numValue() : this.attribute('cx').toPixels('x'); - var cy = useBB ? bb.y() + bb.height() * this.attribute('cy').numValue() : this.attribute('cy').toPixels('y'); - var fx = cx; - var fy = cy; + }; // linear gradient element - if (this.attribute('fx').hasValue()) { - fx = useBB ? bb.x() + bb.width() * this.attribute('fx').numValue() : this.attribute('fx').toPixels('x'); - } + svg.Element.linearGradient = class extends svg.Element.GradientBase { + getGradient(ctx, element) { + const useBB = this.gradientUnits === 'objectBoundingBox' && element.getBoundingBox; + const bb = useBB ? element.getBoundingBox() : null; - if (this.attribute('fy').hasValue()) { - fy = useBB ? bb.y() + bb.height() * this.attribute('fy').numValue() : this.attribute('fy').toPixels('y'); - } - - var r = useBB ? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue() : this.attribute('r').toPixels(); - return ctx.createRadialGradient(fx, fy, 0, cx, cy, r); - } - }]); - - return _class20; - }(svg.Element.GradientBase); // gradient stop element - - - svg.Element.stop = /*#__PURE__*/function (_svg$Element$ElementB6) { - _inherits(_class21, _svg$Element$ElementB6); - - var _super20 = _createSuper(_class21); - - function _class21(node) { - var _this11; - - _classCallCheck(this, _class21); - - _this11 = _super20.call(this, node); - _this11.offset = _this11.attribute('offset').numValue(); - if (_this11.offset < 0) _this11.offset = 0; - if (_this11.offset > 1) _this11.offset = 1; - - var stopColor = _this11.style('stop-color'); - - if (_this11.style('stop-opacity').hasValue()) { - stopColor = stopColor.addOpacity(_this11.style('stop-opacity')); + if (!this.attribute('x1').hasValue() && !this.attribute('y1').hasValue() && !this.attribute('x2').hasValue() && !this.attribute('y2').hasValue()) { + this.attribute('x1', true).value = 0; + this.attribute('y1', true).value = 0; + this.attribute('x2', true).value = 1; + this.attribute('y2', true).value = 0; } - _this11.color = stopColor.value; - return _this11; + const x1 = useBB ? bb.x() + bb.width() * this.attribute('x1').numValue() : this.attribute('x1').toPixels('x'); + const y1 = useBB ? bb.y() + bb.height() * this.attribute('y1').numValue() : this.attribute('y1').toPixels('y'); + const x2 = useBB ? bb.x() + bb.width() * this.attribute('x2').numValue() : this.attribute('x2').toPixels('x'); + const y2 = useBB ? bb.y() + bb.height() * this.attribute('y2').numValue() : this.attribute('y2').toPixels('y'); + if (x1 === x2 && y1 === y2) return null; + return ctx.createLinearGradient(x1, y1, x2, y2); } - return _class21; - }(svg.Element.ElementBase); // animation base element + }; // radial gradient element + svg.Element.radialGradient = class extends svg.Element.GradientBase { + getGradient(ctx, element) { + const useBB = this.gradientUnits === 'objectBoundingBox' && element.getBoundingBox; + const bb = useBB ? element.getBoundingBox() : null; + if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%'; + if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%'; + if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%'; + const cx = useBB ? bb.x() + bb.width() * this.attribute('cx').numValue() : this.attribute('cx').toPixels('x'); + const cy = useBB ? bb.y() + bb.height() * this.attribute('cy').numValue() : this.attribute('cy').toPixels('y'); + let fx = cx; + let fy = cy; - svg.Element.AnimateBase = /*#__PURE__*/function (_svg$Element$ElementB7) { - _inherits(_class22, _svg$Element$ElementB7); + if (this.attribute('fx').hasValue()) { + fx = useBB ? bb.x() + bb.width() * this.attribute('fx').numValue() : this.attribute('fx').toPixels('x'); + } - var _super21 = _createSuper(_class22); + if (this.attribute('fy').hasValue()) { + fy = useBB ? bb.y() + bb.height() * this.attribute('fy').numValue() : this.attribute('fy').toPixels('y'); + } - function _class22(node) { - var _this12; - - _classCallCheck(this, _class22); - - _this12 = _super21.call(this, node); - svg.Animations.push(_assertThisInitialized(_this12)); - _this12.duration = 0.0; - _this12.begin = _this12.attribute('begin').toMilliseconds(); - _this12.maxDuration = _this12.begin + _this12.attribute('dur').toMilliseconds(); - _this12.initialValue = null; - _this12.initialUnits = ''; - _this12.removed = false; - _this12.from = _this12.attribute('from'); - _this12.to = _this12.attribute('to'); - _this12.values = _this12.attribute('values'); - if (_this12.values.hasValue()) _this12.values.value = _this12.values.value.split(';'); - return _this12; + const r = useBB ? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue() : this.attribute('r').toPixels(); + return ctx.createRadialGradient(fx, fy, 0, cx, cy, r); } - _createClass(_class22, [{ - key: "getProperty", - value: function getProperty() { - var attributeType = this.attribute('attributeType').value; - var attributeName = this.attribute('attributeName').value; + }; // gradient stop element - if (attributeType === 'CSS') { - return this.parent.style(attributeName, true); - } + svg.Element.stop = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + this.offset = this.attribute('offset').numValue(); + if (this.offset < 0) this.offset = 0; + if (this.offset > 1) this.offset = 1; + let stopColor = this.style('stop-color'); - return this.parent.attribute(attributeName, true); + if (this.style('stop-opacity').hasValue()) { + stopColor = stopColor.addOpacity(this.style('stop-opacity')); } - }, { - key: "calcValue", - value: function calcValue() { - // OVERRIDE ME! - return ''; + + this.color = stopColor.value; + } + + }; // animation base element + + svg.Element.AnimateBase = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + svg.Animations.push(this); + this.duration = 0.0; + this.begin = this.attribute('begin').toMilliseconds(); + this.maxDuration = this.begin + this.attribute('dur').toMilliseconds(); + this.initialValue = null; + this.initialUnits = ''; + this.removed = false; + this.from = this.attribute('from'); + this.to = this.attribute('to'); + this.values = this.attribute('values'); + if (this.values.hasValue()) this.values.value = this.values.value.split(';'); + } + + getProperty() { + const attributeType = this.attribute('attributeType').value; + const attributeName = this.attribute('attributeName').value; + + if (attributeType === 'CSS') { + return this.parent.style(attributeName, true); } - }, { - key: "update", - value: function update(delta) { - // set initial value - if (isNullish(this.initialValue)) { - this.initialValue = this.getProperty().value; - this.initialUnits = this.getProperty().getUnits(); - } // if we're past the end time + + return this.parent.attribute(attributeName, true); + } + + calcValue() { + // OVERRIDE ME! + return ''; + } + + update(delta) { + // set initial value + if (isNullish(this.initialValue)) { + this.initialValue = this.getProperty().value; + this.initialUnits = this.getProperty().getUnits(); + } // if we're past the end time - if (this.duration > this.maxDuration) { - // loop for indefinitely repeating animations - if (this.attribute('repeatCount').value === 'indefinite' || this.attribute('repeatDur').value === 'indefinite') { - this.duration = 0.0; - } else if (this.attribute('fill').valueOrDefault('remove') === 'freeze' && !this.frozen) { - this.frozen = true; - this.parent.animationFrozen = true; - this.parent.animationFrozenValue = this.getProperty().value; - } else if (this.attribute('fill').valueOrDefault('remove') === 'remove' && !this.removed) { - this.removed = true; - this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue; - return true; - } - - return false; + if (this.duration > this.maxDuration) { + // loop for indefinitely repeating animations + if (this.attribute('repeatCount').value === 'indefinite' || this.attribute('repeatDur').value === 'indefinite') { + this.duration = 0.0; + } else if (this.attribute('fill').valueOrDefault('remove') === 'freeze' && !this.frozen) { + this.frozen = true; + this.parent.animationFrozen = true; + this.parent.animationFrozenValue = this.getProperty().value; + } else if (this.attribute('fill').valueOrDefault('remove') === 'remove' && !this.removed) { + this.removed = true; + this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue; + return true; } - this.duration += delta; // if we're past the begin time + return false; + } - var updated = false; + this.duration += delta; // if we're past the begin time - if (this.begin < this.duration) { - var newValue = this.calcValue(); // tween + let updated = false; - if (this.attribute('type').hasValue()) { - // for transform, etc. - var type = this.attribute('type').value; - newValue = type + '(' + newValue + ')'; - } + if (this.begin < this.duration) { + let newValue = this.calcValue(); // tween - this.getProperty().value = newValue; - updated = true; + if (this.attribute('type').hasValue()) { + // for transform, etc. + const type = this.attribute('type').value; + newValue = type + '(' + newValue + ')'; } - return updated; - } // fraction of duration we've covered + this.getProperty().value = newValue; + updated = true; + } - }, { - key: "progress", - value: function progress() { - var ret = { - progress: (this.duration - this.begin) / (this.maxDuration - this.begin) - }; + return updated; + } // fraction of duration we've covered - if (this.values.hasValue()) { - var p = ret.progress * (this.values.value.length - 1); - var lb = Math.floor(p), + + progress() { + const ret = { + progress: (this.duration - this.begin) / (this.maxDuration - this.begin) + }; + + if (this.values.hasValue()) { + const p = ret.progress * (this.values.value.length - 1); + const lb = Math.floor(p), ub = Math.ceil(p); - ret.from = new svg.Property('from', Number.parseFloat(this.values.value[lb])); - ret.to = new svg.Property('to', Number.parseFloat(this.values.value[ub])); - ret.progress = (p - lb) / (ub - lb); - } else { - ret.from = this.from; - ret.to = this.to; - } - - return ret; + ret.from = new svg.Property('from', Number.parseFloat(this.values.value[lb])); + ret.to = new svg.Property('to', Number.parseFloat(this.values.value[ub])); + ret.progress = (p - lb) / (ub - lb); + } else { + ret.from = this.from; + ret.to = this.to; } - }]); - return _class22; - }(svg.Element.ElementBase); // animate element - - - svg.Element.animate = /*#__PURE__*/function (_svg$Element$AnimateB) { - _inherits(_class23, _svg$Element$AnimateB); - - var _super22 = _createSuper(_class23); - - function _class23() { - _classCallCheck(this, _class23); - - return _super22.apply(this, arguments); + return ret; } - _createClass(_class23, [{ - key: "calcValue", - value: function calcValue() { - var p = this.progress(); // tween value linearly + }; // animate element - var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; - return newValue + this.initialUnits; - } - }]); + svg.Element.animate = class extends svg.Element.AnimateBase { + calcValue() { + const p = this.progress(); // tween value linearly - return _class23; - }(svg.Element.AnimateBase); // animate color element - - - svg.Element.animateColor = /*#__PURE__*/function (_svg$Element$AnimateB2) { - _inherits(_class24, _svg$Element$AnimateB2); - - var _super23 = _createSuper(_class24); - - function _class24() { - _classCallCheck(this, _class24); - - return _super23.apply(this, arguments); + const newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; + return newValue + this.initialUnits; } - _createClass(_class24, [{ - key: "calcValue", - value: function calcValue() { - var p = this.progress(); - var from = new RGBColor(p.from.value); - var to = new RGBColor(p.to.value); + }; // animate color element - if (from.ok && to.ok) { - // tween color linearly - var r = from.r + (to.r - from.r) * p.progress; - var g = from.g + (to.g - from.g) * p.progress; - var b = from.b + (to.b - from.b) * p.progress; - return 'rgb(' + Number.parseInt(r) + ',' + Number.parseInt(g) + ',' + Number.parseInt(b) + ')'; - } + svg.Element.animateColor = class extends svg.Element.AnimateBase { + calcValue() { + const p = this.progress(); + const from = new RGBColor(p.from.value); + const to = new RGBColor(p.to.value); - return this.attribute('from').value; + if (from.ok && to.ok) { + // tween color linearly + const r = from.r + (to.r - from.r) * p.progress; + const g = from.g + (to.g - from.g) * p.progress; + const b = from.b + (to.b - from.b) * p.progress; + return 'rgb(' + Number.parseInt(r) + ',' + Number.parseInt(g) + ',' + Number.parseInt(b) + ')'; } - }]); - return _class24; - }(svg.Element.AnimateBase); // animate transform element - - - svg.Element.animateTransform = /*#__PURE__*/function (_svg$Element$animate) { - _inherits(_class25, _svg$Element$animate); - - var _super24 = _createSuper(_class25); - - function _class25() { - _classCallCheck(this, _class25); - - return _super24.apply(this, arguments); + return this.attribute('from').value; } - _createClass(_class25, [{ - key: "calcValue", - value: function calcValue() { - var p = this.progress(); // tween value linearly + }; // animate transform element - var from = svg.ToNumberArray(p.from.value); - var to = svg.ToNumberArray(p.to.value); - var newValue = ''; - from.forEach(function (fr, i) { - newValue += fr + (to[i] - fr) * p.progress + ' '; - }); - return newValue; - } - }]); + svg.Element.animateTransform = class extends svg.Element.animate { + calcValue() { + const p = this.progress(); // tween value linearly - return _class25; - }(svg.Element.animate); // font element + const from = svg.ToNumberArray(p.from.value); + const to = svg.ToNumberArray(p.to.value); + let newValue = ''; + from.forEach((fr, i) => { + newValue += fr + (to[i] - fr) * p.progress + ' '; + }); + return newValue; + } + }; // font element - svg.Element.font = /*#__PURE__*/function (_svg$Element$ElementB8) { - _inherits(_class26, _svg$Element$ElementB8); - - var _super25 = _createSuper(_class26); - - function _class26(node) { - var _this13; - - _classCallCheck(this, _class26); - - _this13 = _super25.call(this, node); - _this13.horizAdvX = _this13.attribute('horiz-adv-x').numValue(); - _this13.isRTL = false; - _this13.isArabic = false; - _this13.fontFace = null; - _this13.missingGlyph = null; - _this13.glyphs = []; - - _this13.children.forEach(function (child) { + svg.Element.font = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); + this.isRTL = false; + this.isArabic = false; + this.fontFace = null; + this.missingGlyph = null; + this.glyphs = []; + this.children.forEach(child => { if (child.type === 'font-face') { - _this13.fontFace = child; + this.fontFace = child; if (child.style('font-family').hasValue()) { - svg.Definitions[child.style('font-family').value] = _assertThisInitialized(_this13); + svg.Definitions[child.style('font-family').value] = this; } } else if (child.type === 'missing-glyph') { - _this13.missingGlyph = child; + this.missingGlyph = child; } else if (child.type === 'glyph') { if (child.arabicForm !== '') { - _this13.isRTL = true; - _this13.isArabic = true; + this.isRTL = true; + this.isArabic = true; - if (typeof _this13.glyphs[child.unicode] === 'undefined') { - _this13.glyphs[child.unicode] = []; + if (typeof this.glyphs[child.unicode] === 'undefined') { + this.glyphs[child.unicode] = []; } - _this13.glyphs[child.unicode][child.arabicForm] = child; + this.glyphs[child.unicode][child.arabicForm] = child; } else { - _this13.glyphs[child.unicode] = child; + this.glyphs[child.unicode] = child; } } }); - - return _this13; } - return _class26; - }(svg.Element.ElementBase); // font-face element + }; // font-face element - - svg.Element.fontface = /*#__PURE__*/function (_svg$Element$ElementB9) { - _inherits(_class27, _svg$Element$ElementB9); - - var _super26 = _createSuper(_class27); - - function _class27(node) { - var _this14; - - _classCallCheck(this, _class27); - - _this14 = _super26.call(this, node); - _this14.ascent = _this14.attribute('ascent').value; - _this14.descent = _this14.attribute('descent').value; - _this14.unitsPerEm = _this14.attribute('units-per-em').numValue(); - return _this14; + svg.Element.fontface = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + this.ascent = this.attribute('ascent').value; + this.descent = this.attribute('descent').value; + this.unitsPerEm = this.attribute('units-per-em').numValue(); } - return _class27; - }(svg.Element.ElementBase); // missing-glyph element + }; // missing-glyph element - - svg.Element.missingglyph = /*#__PURE__*/function (_svg$Element$path) { - _inherits(_class28, _svg$Element$path); - - var _super27 = _createSuper(_class28); - - function _class28(node) { - var _this15; - - _classCallCheck(this, _class28); - - _this15 = _super27.call(this, node); - _this15.horizAdvX = 0; - return _this15; + svg.Element.missingglyph = class extends svg.Element.path { + constructor(node) { + super(node); + this.horizAdvX = 0; } - return _class28; - }(svg.Element.path); // glyph element + }; // glyph element - - svg.Element.glyph = /*#__PURE__*/function (_svg$Element$path2) { - _inherits(_class29, _svg$Element$path2); - - var _super28 = _createSuper(_class29); - - function _class29(node) { - var _this16; - - _classCallCheck(this, _class29); - - _this16 = _super28.call(this, node); - _this16.horizAdvX = _this16.attribute('horiz-adv-x').numValue(); - _this16.unicode = _this16.attribute('unicode').value; - _this16.arabicForm = _this16.attribute('arabic-form').value; - return _this16; + svg.Element.glyph = class extends svg.Element.path { + constructor(node) { + super(node); + this.horizAdvX = this.attribute('horiz-adv-x').numValue(); + this.unicode = this.attribute('unicode').value; + this.arabicForm = this.attribute('arabic-form').value; } - return _class29; - }(svg.Element.path); // text element + }; // text element - - svg.Element.text = /*#__PURE__*/function (_svg$Element$Rendered3) { - _inherits(_class30, _svg$Element$Rendered3); - - var _super29 = _createSuper(_class30); - - function _class30(node) { - _classCallCheck(this, _class30); - - return _super29.call(this, node, true); + svg.Element.text = class extends svg.Element.RenderedElementBase { + constructor(node) { + super(node, true); } - _createClass(_class30, [{ - key: "setContext", - value: function setContext(ctx) { - _get(_getPrototypeOf(_class30.prototype), "setContext", this).call(this, ctx); - - var textBaseline = this.style('dominant-baseline').toTextBaseline(); - if (isNullish(textBaseline)) textBaseline = this.style('alignment-baseline').toTextBaseline(); - if (!isNullish(textBaseline)) ctx.textBaseline = textBaseline; - } - }, { - key: "getBoundingBox", - value: function getBoundingBox() { - var x = this.attribute('x').toPixels('x'); - var y = this.attribute('y').toPixels('y'); - var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); - return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y); - } - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - var _this17 = this; - - this.x = this.attribute('x').toPixels('x'); - this.y = this.attribute('y').toPixels('y'); - this.x += this.getAnchorDelta(ctx, this, 0); - this.children.forEach(function (child, i) { - _this17.renderChild(ctx, _this17, i); - }); - } - }, { - key: "getAnchorDelta", - value: function getAnchorDelta(ctx, parent, startI) { - var textAnchor = this.style('text-anchor').valueOrDefault('start'); - - if (textAnchor !== 'start') { - var width = 0; - - for (var i = startI; i < parent.children.length; i++) { - var child = parent.children[i]; - if (i > startI && child.attribute('x').hasValue()) break; // new group - - width += child.measureTextRecursive(ctx); - } - - return -1 * (textAnchor === 'end' ? width : width / 2.0); - } - - return 0; - } - }, { - key: "renderChild", - value: function renderChild(ctx, parent, i) { - var child = parent.children[i]; - - if (child.attribute('x').hasValue()) { - child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i); - if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x'); - } else { - if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x'); - if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x'); - child.x = this.x; - } - - this.x = child.x + child.measureText(ctx); - - if (child.attribute('y').hasValue()) { - child.y = child.attribute('y').toPixels('y'); - if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y'); - } else { - if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y'); - if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y'); - child.y = this.y; - } - - this.y = child.y; - child.render(ctx); - - for (var j = 0; j < child.children.length; j++) { - this.renderChild(ctx, child, j); - } - } - }]); - - return _class30; - }(svg.Element.RenderedElementBase); // text base - - - svg.Element.TextElementBase = /*#__PURE__*/function (_svg$Element$Rendered4) { - _inherits(_class31, _svg$Element$Rendered4); - - var _super30 = _createSuper(_class31); - - function _class31() { - _classCallCheck(this, _class31); - - return _super30.apply(this, arguments); + setContext(ctx) { + super.setContext(ctx); + let textBaseline = this.style('dominant-baseline').toTextBaseline(); + if (isNullish(textBaseline)) textBaseline = this.style('alignment-baseline').toTextBaseline(); + if (!isNullish(textBaseline)) ctx.textBaseline = textBaseline; } - _createClass(_class31, [{ - key: "getGlyph", - value: function getGlyph(font, text, i) { - var c = text[i]; - var glyph = null; + getBoundingBox() { + const x = this.attribute('x').toPixels('x'); + const y = this.attribute('y').toPixels('y'); + const fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); + return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y); + } - if (font.isArabic) { - var arabicForm = 'isolated'; - if ((i === 0 || text[i - 1] === ' ') && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'terminal'; - if (i > 0 && text[i - 1] !== ' ' && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'medial'; - if (i > 0 && text[i - 1] !== ' ' && (i === text.length - 1 || text[i + 1] === ' ')) arabicForm = 'initial'; + renderChildren(ctx) { + this.x = this.attribute('x').toPixels('x'); + this.y = this.attribute('y').toPixels('y'); + this.x += this.getAnchorDelta(ctx, this, 0); + this.children.forEach((child, i) => { + this.renderChild(ctx, this, i); + }); + } - if (typeof font.glyphs[c] !== 'undefined') { - glyph = font.glyphs[c][arabicForm]; - if (isNullish(glyph) && font.glyphs[c].type === 'glyph') glyph = font.glyphs[c]; - } - } else { - glyph = font.glyphs[c]; - } + getAnchorDelta(ctx, parent, startI) { + const textAnchor = this.style('text-anchor').valueOrDefault('start'); - if (isNullish(glyph)) glyph = font.missingGlyph; - return glyph; - } - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - var customFont = this.parent.style('font-family').getDefinition(); + if (textAnchor !== 'start') { + let width = 0; - if (!isNullish(customFont)) { - var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); - var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle); - var text = this.getText(); - if (customFont.isRTL) text = text.split('').reverse().join(''); - var dx = svg.ToNumberArray(this.parent.attribute('dx').value); + for (let i = startI; i < parent.children.length; i++) { + const child = parent.children[i]; + if (i > startI && child.attribute('x').hasValue()) break; // new group - for (var i = 0; i < text.length; i++) { - var glyph = this.getGlyph(customFont, text, i); - var scale = fontSize / customFont.fontFace.unitsPerEm; - ctx.translate(this.x, this.y); - ctx.scale(scale, -scale); - var lw = ctx.lineWidth; - ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize; - if (fontStyle === 'italic') ctx.transform(1, 0, 0.4, 1, 0, 0); - glyph.render(ctx); - if (fontStyle === 'italic') ctx.transform(1, 0, -0.4, 1, 0, 0); - ctx.lineWidth = lw; - ctx.scale(1 / scale, -1 / scale); - ctx.translate(-this.x, -this.y); - this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm; - - if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) { - this.x += dx[i]; - } - } - - return; - } - - if (ctx.fillStyle !== '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y); - if (ctx.strokeStyle !== '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y); - } - }, { - key: "getText", - value: function getText() {// OVERRIDE ME - } - }, { - key: "measureTextRecursive", - value: function measureTextRecursive(ctx) { - var width = this.measureText(ctx); - this.children.forEach(function (child) { width += child.measureTextRecursive(ctx); - }); - return width; - } - }, { - key: "measureText", - value: function measureText(ctx) { - var customFont = this.parent.style('font-family').getDefinition(); - - if (!isNullish(customFont)) { - var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); - var measure = 0; - var text = this.getText(); - if (customFont.isRTL) text = text.split('').reverse().join(''); - var dx = svg.ToNumberArray(this.parent.attribute('dx').value); - - for (var i = 0; i < text.length; i++) { - var glyph = this.getGlyph(customFont, text, i); - measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm; - - if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) { - measure += dx[i]; - } - } - - return measure; } - var textToMeasure = svg.compressSpaces(this.getText()); - if (!ctx.measureText) return textToMeasure.length * 10; - ctx.save(); - this.setContext(ctx); - - var _ctx$measureText = ctx.measureText(textToMeasure), - width = _ctx$measureText.width; - - ctx.restore(); - return width; + return -1 * (textAnchor === 'end' ? width : width / 2.0); } - }]); - return _class31; - }(svg.Element.RenderedElementBase); // tspan - - - svg.Element.tspan = /*#__PURE__*/function (_svg$Element$TextElem) { - _inherits(_class32, _svg$Element$TextElem); - - var _super31 = _createSuper(_class32); - - function _class32(node) { - var _this18; - - _classCallCheck(this, _class32); - - _this18 = _super31.call(this, node, true); - _this18.text = node.nodeValue || node.text || ''; - return _this18; + return 0; } - _createClass(_class32, [{ - key: "getText", - value: function getText() { - return this.text; + renderChild(ctx, parent, i) { + const child = parent.children[i]; + + if (child.attribute('x').hasValue()) { + child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i); + if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x'); + } else { + if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x'); + if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x'); + child.x = this.x; } - }]); - return _class32; - }(svg.Element.TextElementBase); // tref + this.x = child.x + child.measureText(ctx); + if (child.attribute('y').hasValue()) { + child.y = child.attribute('y').toPixels('y'); + if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y'); + } else { + if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y'); + if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y'); + child.y = this.y; + } - svg.Element.tref = /*#__PURE__*/function (_svg$Element$TextElem2) { - _inherits(_class33, _svg$Element$TextElem2); + this.y = child.y; + child.render(ctx); - var _super32 = _createSuper(_class33); - - function _class33() { - _classCallCheck(this, _class33); - - return _super32.apply(this, arguments); + for (let j = 0; j < child.children.length; j++) { + this.renderChild(ctx, child, j); + } } - _createClass(_class33, [{ - key: "getText", - value: function getText() { - var element = this.getHrefAttribute().getDefinition(); - if (!isNullish(element)) return element.children[0].getText(); - return undefined; + }; // text base + + svg.Element.TextElementBase = class extends svg.Element.RenderedElementBase { + getGlyph(font, text, i) { + const c = text[i]; + let glyph = null; + + if (font.isArabic) { + let arabicForm = 'isolated'; + if ((i === 0 || text[i - 1] === ' ') && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'terminal'; + if (i > 0 && text[i - 1] !== ' ' && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'medial'; + if (i > 0 && text[i - 1] !== ' ' && (i === text.length - 1 || text[i + 1] === ' ')) arabicForm = 'initial'; + + if (typeof font.glyphs[c] !== 'undefined') { + glyph = font.glyphs[c][arabicForm]; + if (isNullish(glyph) && font.glyphs[c].type === 'glyph') glyph = font.glyphs[c]; + } + } else { + glyph = font.glyphs[c]; } - }]); - return _class33; - }(svg.Element.TextElementBase); // a element + if (isNullish(glyph)) glyph = font.missingGlyph; + return glyph; + } + renderChildren(ctx) { + const customFont = this.parent.style('font-family').getDefinition(); - svg.Element.a = /*#__PURE__*/function (_svg$Element$TextElem3) { - _inherits(_class34, _svg$Element$TextElem3); + if (!isNullish(customFont)) { + const fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); + const fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle); + let text = this.getText(); + if (customFont.isRTL) text = text.split('').reverse().join(''); + const dx = svg.ToNumberArray(this.parent.attribute('dx').value); - var _super33 = _createSuper(_class34); + for (let i = 0; i < text.length; i++) { + const glyph = this.getGlyph(customFont, text, i); + const scale = fontSize / customFont.fontFace.unitsPerEm; + ctx.translate(this.x, this.y); + ctx.scale(scale, -scale); + const lw = ctx.lineWidth; + ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize; + if (fontStyle === 'italic') ctx.transform(1, 0, 0.4, 1, 0, 0); + glyph.render(ctx); + if (fontStyle === 'italic') ctx.transform(1, 0, -0.4, 1, 0, 0); + ctx.lineWidth = lw; + ctx.scale(1 / scale, -1 / scale); + ctx.translate(-this.x, -this.y); + this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm; - function _class34(node) { - var _this19; + if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) { + this.x += dx[i]; + } + } - _classCallCheck(this, _class34); + return; + } - _this19 = _super33.call(this, node); - _this19.hasText = true; + if (ctx.fillStyle !== '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y); + if (ctx.strokeStyle !== '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y); + } - _toConsumableArray(node.childNodes).forEach(function (childNode) { + getText() {// OVERRIDE ME + } + + measureTextRecursive(ctx) { + let width = this.measureText(ctx); + this.children.forEach(child => { + width += child.measureTextRecursive(ctx); + }); + return width; + } + + measureText(ctx) { + const customFont = this.parent.style('font-family').getDefinition(); + + if (!isNullish(customFont)) { + const fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize); + let measure = 0; + let text = this.getText(); + if (customFont.isRTL) text = text.split('').reverse().join(''); + const dx = svg.ToNumberArray(this.parent.attribute('dx').value); + + for (let i = 0; i < text.length; i++) { + const glyph = this.getGlyph(customFont, text, i); + measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm; + + if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) { + measure += dx[i]; + } + } + + return measure; + } + + const textToMeasure = svg.compressSpaces(this.getText()); + if (!ctx.measureText) return textToMeasure.length * 10; + ctx.save(); + this.setContext(ctx); + const { + width + } = ctx.measureText(textToMeasure); + ctx.restore(); + return width; + } + + }; // tspan + + svg.Element.tspan = class extends svg.Element.TextElementBase { + constructor(node) { + super(node, true); + this.text = node.nodeValue || node.text || ''; + } + + getText() { + return this.text; + } + + }; // tref + + svg.Element.tref = class extends svg.Element.TextElementBase { + getText() { + const element = this.getHrefAttribute().getDefinition(); + if (!isNullish(element)) return element.children[0].getText(); + return undefined; + } + + }; // a element + + svg.Element.a = class extends svg.Element.TextElementBase { + constructor(node) { + super(node); + this.hasText = true; + [...node.childNodes].forEach(childNode => { if (childNode.nodeType !== 3) { - _this19.hasText = false; + this.hasText = false; } }); // this might contain text - - _this19.text = _this19.hasText ? node.childNodes[0].nodeValue : ''; - return _this19; + this.text = this.hasText ? node.childNodes[0].nodeValue : ''; } - _createClass(_class34, [{ - key: "getText", - value: function getText() { - return this.text; + getText() { + return this.text; + } + + renderChildren(ctx) { + if (this.hasText) { + // render as text element + super.renderChildren(ctx); + const fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); + svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y)); + } else { + // render as temporary group + const g = new svg.Element.g(); + g.children = this.children; + g.parent = this; + g.render(ctx); } - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - if (this.hasText) { - // render as text element - _get(_getPrototypeOf(_class34.prototype), "renderChildren", this).call(this, ctx); + } - var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize); - svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y)); - } else { - // render as temporary group - var g = new svg.Element.g(); - g.children = this.children; - g.parent = this; - g.render(ctx); - } - } - }, { - key: "onclick", - value: function onclick() { - window.open(this.getHrefAttribute().value); - } - }, { - key: "onmousemove", - value: function onmousemove() { - svg.ctx.canvas.style.cursor = 'pointer'; - } - }]); + onclick() { + window.open(this.getHrefAttribute().value); + } - return _class34; - }(svg.Element.TextElementBase); // image element + onmousemove() { + svg.ctx.canvas.style.cursor = 'pointer'; + } + }; // image element - svg.Element.image = /*#__PURE__*/function (_svg$Element$Rendered5) { - _inherits(_class35, _svg$Element$Rendered5); - - var _super34 = _createSuper(_class35); - - function _class35(node) { - var _this20; - - _classCallCheck(this, _class35); - - _this20 = _super34.call(this, node); - - var href = _this20.getHrefAttribute().value; + svg.Element.image = class extends svg.Element.RenderedElementBase { + constructor(node) { + super(node); + const href = this.getHrefAttribute().value; if (href === '') { - return _possibleConstructorReturn(_this20); + return; } - _this20._isSvg = href.match(/\.svg$/); - svg.Images.push(_assertThisInitialized(_this20)); - _this20.loaded = false; + this._isSvg = href.match(/\.svg$/); + svg.Images.push(this); + this.loaded = false; - if (!_this20._isSvg) { - _this20.img = document.createElement('img'); + if (!this._isSvg) { + this.img = document.createElement('img'); if (svg.opts.useCORS === true) { - _this20.img.crossOrigin = 'Anonymous'; + this.img.crossOrigin = 'Anonymous'; } - _this20.img.addEventListener('load', function () { - _this20.loaded = true; + this.img.addEventListener('load', () => { + this.loaded = true; }); - - _this20.img.addEventListener('error', function () { + this.img.addEventListener('error', () => { svg.log('ERROR: image "' + href + '" not found'); - _this20.loaded = true; + this.loaded = true; }); - - _this20.img.src = href; + this.img.src = href; } else { - svg.ajax(href, true).then(function (img) { + svg.ajax(href, true).then(img => { // eslint-disable-line promise/prefer-await-to-then, promise/always-return - _this20.img = img; - _this20.loaded = true; - })["catch"](function (err) { + this.img = img; + this.loaded = true; + }).catch(err => { // eslint-disable-line promise/prefer-await-to-callbacks - _this20.erred = true; + this.erred = true; console.error('Ajax error for canvg', err); // eslint-disable-line no-console }); } - - return _this20; } - _createClass(_class35, [{ - key: "renderChildren", - value: function renderChildren(ctx) { - var x = this.attribute('x').toPixels('x'); - var y = this.attribute('y').toPixels('y'); - var width = this.attribute('width').toPixels('x'); - var height = this.attribute('height').toPixels('y'); - if (width === 0 || height === 0) return; - ctx.save(); + renderChildren(ctx) { + const x = this.attribute('x').toPixels('x'); + const y = this.attribute('y').toPixels('y'); + const width = this.attribute('width').toPixels('x'); + const height = this.attribute('height').toPixels('y'); + if (width === 0 || height === 0) return; + ctx.save(); - if (this._isSvg) { - ctx.drawSvg(this.img, x, y, width, height); - } else { - ctx.translate(x, y); - svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, width, this.img.width, height, this.img.height, 0, 0); - ctx.drawImage(this.img, 0, 0); - } - - ctx.restore(); + if (this._isSvg) { + ctx.drawSvg(this.img, x, y, width, height); + } else { + ctx.translate(x, y); + svg.AspectRatio(ctx, this.attribute('preserveAspectRatio').value, width, this.img.width, height, this.img.height, 0, 0); + ctx.drawImage(this.img, 0, 0); } - }, { - key: "getBoundingBox", - value: function getBoundingBox() { - var x = this.attribute('x').toPixels('x'); - var y = this.attribute('y').toPixels('y'); - var width = this.attribute('width').toPixels('x'); - var height = this.attribute('height').toPixels('y'); - return new svg.BoundingBox(x, y, x + width, y + height); - } - }]); - return _class35; - }(svg.Element.RenderedElementBase); // group element - - - svg.Element.g = /*#__PURE__*/function (_svg$Element$Rendered6) { - _inherits(_class36, _svg$Element$Rendered6); - - var _super35 = _createSuper(_class36); - - function _class36() { - _classCallCheck(this, _class36); - - return _super35.apply(this, arguments); + ctx.restore(); } - _createClass(_class36, [{ - key: "getBoundingBox", - value: function getBoundingBox() { - var bb = new svg.BoundingBox(); - this.children.forEach(function (child) { - bb.addBoundingBox(child.getBoundingBox()); - }); - return bb; - } - }]); - - return _class36; - }(svg.Element.RenderedElementBase); // symbol element - - - svg.Element.symbol = /*#__PURE__*/function (_svg$Element$Rendered7) { - _inherits(_class37, _svg$Element$Rendered7); - - var _super36 = _createSuper(_class37); - - function _class37() { - _classCallCheck(this, _class37); - - return _super36.apply(this, arguments); + getBoundingBox() { + const x = this.attribute('x').toPixels('x'); + const y = this.attribute('y').toPixels('y'); + const width = this.attribute('width').toPixels('x'); + const height = this.attribute('height').toPixels('y'); + return new svg.BoundingBox(x, y, x + width, y + height); } - _createClass(_class37, [{ - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); + }; // group element - return _class37; - }(svg.Element.RenderedElementBase); // style element + svg.Element.g = class extends svg.Element.RenderedElementBase { + getBoundingBox() { + const bb = new svg.BoundingBox(); + this.children.forEach(child => { + bb.addBoundingBox(child.getBoundingBox()); + }); + return bb; + } + }; // symbol element - svg.Element.style = /*#__PURE__*/function (_svg$Element$ElementB10) { - _inherits(_class38, _svg$Element$ElementB10); + svg.Element.symbol = class extends svg.Element.RenderedElementBase { + render(ctx) {// NO RENDER + } - var _super37 = _createSuper(_class38); + }; // style element - function _class38(node) { - var _this21; + svg.Element.style = class extends svg.Element.ElementBase { + constructor(node) { + super(node); // text, or spaces then CDATA - _classCallCheck(this, _class38); - - _this21 = _super37.call(this, node); // text, or spaces then CDATA - - var css = ''; - - _toConsumableArray(node.childNodes).forEach(function (_ref11) { - var nodeValue = _ref11.nodeValue; + let css = ''; + [...node.childNodes].forEach(({ + nodeValue + }) => { css += nodeValue; }); // remove comments - css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\/)|(^\s*\/\/.*)/gm, ''); // eslint-disable-line unicorn/no-unsafe-regex // replace whitespace css = svg.compressSpaces(css); - var cssDefs = css.split('}'); - cssDefs.forEach(function (cssDef) { + const cssDefs = css.split('}'); + cssDefs.forEach(cssDef => { if (svg.trim(cssDef) !== '') { - var _cssDef$split = cssDef.split('{'), - _cssDef$split2 = _slicedToArray(_cssDef$split, 2), - cssClasses = _cssDef$split2[0], - cssProps = _cssDef$split2[1]; - + let [cssClasses, cssProps] = cssDef.split('{'); cssClasses = cssClasses.split(','); cssProps = cssProps.split(';'); - cssClasses.forEach(function (cssClass) { + cssClasses.forEach(cssClass => { cssClass = svg.trim(cssClass); if (cssClass !== '') { - var props = {}; - cssProps.forEach(function (cssProp) { - var prop = cssProp.indexOf(':'); - var name = cssProp.substr(0, prop); - var value = cssProp.substr(prop + 1, cssProp.length - prop); + const props = {}; + cssProps.forEach(cssProp => { + const prop = cssProp.indexOf(':'); + const name = cssProp.substr(0, prop); + const value = cssProp.substr(prop + 1, cssProp.length - prop); if (!isNullish(name) && !isNullish(value)) { props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value)); @@ -4082,18 +3163,17 @@ var canvg = (function (exports) { svg.Styles[cssClass] = props; if (cssClass === '@font-face') { - var fontFamily = props['font-family'].value.replace(/"/g, ''); - var srcs = props.src.value.split(','); - srcs.forEach(function (src) { + const fontFamily = props['font-family'].value.replace(/"/g, ''); + const srcs = props.src.value.split(','); + srcs.forEach(src => { if (src.includes('format("svg")')) { - var urlStart = src.indexOf('url'); - var urlEnd = src.indexOf(')', urlStart); - var url = src.substr(urlStart + 5, urlEnd - urlStart - 6); // Can this ajax safely be converted to async? + const urlStart = src.indexOf('url'); + const urlEnd = src.indexOf(')', urlStart); + const url = src.substr(urlStart + 5, urlEnd - urlStart - 6); // Can this ajax safely be converted to async? - var doc = svg.parseXml(svg.ajax(url)); - var fonts = doc.getElementsByTagName('font'); - - _toConsumableArray(fonts).forEach(function (font) { + const doc = svg.parseXml(svg.ajax(url)); + const fonts = doc.getElementsByTagName('font'); + [...fonts].forEach(font => { font = svg.CreateElement(font); svg.Definitions[fontFamily] = font; }); @@ -4104,282 +3184,190 @@ var canvg = (function (exports) { }); } }); - return _this21; } - return _class38; - }(svg.Element.ElementBase); // use element + }; // use element - - svg.Element.use = /*#__PURE__*/function (_svg$Element$Rendered8) { - _inherits(_class39, _svg$Element$Rendered8); - - var _super38 = _createSuper(_class39); - - function _class39(node) { - var _this22; - - _classCallCheck(this, _class39); - - _this22 = _super38.call(this, node); - _this22._el = _this22.getHrefAttribute().getDefinition(); - return _this22; + svg.Element.use = class extends svg.Element.RenderedElementBase { + constructor(node) { + super(node); + this._el = this.getHrefAttribute().getDefinition(); } - _createClass(_class39, [{ - key: "setContext", - value: function setContext(ctx) { - _get(_getPrototypeOf(_class39.prototype), "setContext", this).call(this, ctx); + setContext(ctx) { + super.setContext(ctx); + if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0); + if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y')); + } - if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0); - if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y')); - } - }, { - key: "path", - value: function path(ctx) { - var element = this._el; - if (!isNullish(element)) element.path(ctx); - } - }, { - key: "getBoundingBox", - value: function getBoundingBox() { - var element = this._el; - if (!isNullish(element)) return element.getBoundingBox(); - return undefined; - } - }, { - key: "renderChildren", - value: function renderChildren(ctx) { - var element = this._el; + path(ctx) { + const { + _el: element + } = this; + if (!isNullish(element)) element.path(ctx); + } - if (!isNullish(element)) { - var tempSvg = element; + getBoundingBox() { + const { + _el: element + } = this; + if (!isNullish(element)) return element.getBoundingBox(); + return undefined; + } - if (element.type === 'symbol') { - // render me using a temporary svg element in symbol cases (https://www.w3.org/TR/SVG/struct.html#UseElement) - tempSvg = new svg.Element.svg(); - tempSvg.type = 'svg'; - tempSvg.attributes.viewBox = new svg.Property('viewBox', element.attribute('viewBox').value); - tempSvg.attributes.preserveAspectRatio = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value); - tempSvg.attributes.overflow = new svg.Property('overflow', element.attribute('overflow').value); - tempSvg.children = element.children; - } + renderChildren(ctx) { + const { + _el: element + } = this; - if (tempSvg.type === 'svg') { - // if symbol or svg, inherit width/height from me - if (this.attribute('width').hasValue()) tempSvg.attributes.width = new svg.Property('width', this.attribute('width').value); - if (this.attribute('height').hasValue()) tempSvg.attributes.height = new svg.Property('height', this.attribute('height').value); - } + if (!isNullish(element)) { + let tempSvg = element; - var oldParent = tempSvg.parent; - tempSvg.parent = null; - tempSvg.render(ctx); - tempSvg.parent = oldParent; + if (element.type === 'symbol') { + // render me using a temporary svg element in symbol cases (https://www.w3.org/TR/SVG/struct.html#UseElement) + tempSvg = new svg.Element.svg(); + tempSvg.type = 'svg'; + tempSvg.attributes.viewBox = new svg.Property('viewBox', element.attribute('viewBox').value); + tempSvg.attributes.preserveAspectRatio = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value); + tempSvg.attributes.overflow = new svg.Property('overflow', element.attribute('overflow').value); + tempSvg.children = element.children; } + + if (tempSvg.type === 'svg') { + // if symbol or svg, inherit width/height from me + if (this.attribute('width').hasValue()) tempSvg.attributes.width = new svg.Property('width', this.attribute('width').value); + if (this.attribute('height').hasValue()) tempSvg.attributes.height = new svg.Property('height', this.attribute('height').value); + } + + const oldParent = tempSvg.parent; + tempSvg.parent = null; + tempSvg.render(ctx); + tempSvg.parent = oldParent; } - }]); - - return _class39; - }(svg.Element.RenderedElementBase); // mask element - - - svg.Element.mask = /*#__PURE__*/function (_svg$Element$ElementB11) { - _inherits(_class40, _svg$Element$ElementB11); - - var _super39 = _createSuper(_class40); - - function _class40() { - _classCallCheck(this, _class40); - - return _super39.apply(this, arguments); } - _createClass(_class40, [{ - key: "apply", - value: function apply(ctx, element) { - // render as temp svg - var x = this.attribute('x').toPixels('x'); - var y = this.attribute('y').toPixels('y'); - var width = this.attribute('width').toPixels('x'); - var height = this.attribute('height').toPixels('y'); + }; // mask element - if (width === 0 && height === 0) { - var bb = new svg.BoundingBox(); - this.children.forEach(function (child) { - bb.addBoundingBox(child.getBoundingBox()); - }); - x = Math.floor(bb.x1); - y = Math.floor(bb.y1); - width = Math.floor(bb.width()); - height = Math.floor(bb.height()); - } // temporarily remove mask to avoid recursion + svg.Element.mask = class extends svg.Element.ElementBase { + apply(ctx, element) { + // render as temp svg + let x = this.attribute('x').toPixels('x'); + let y = this.attribute('y').toPixels('y'); + let width = this.attribute('width').toPixels('x'); + let height = this.attribute('height').toPixels('y'); + + if (width === 0 && height === 0) { + const bb = new svg.BoundingBox(); + this.children.forEach(child => { + bb.addBoundingBox(child.getBoundingBox()); + }); + x = Math.floor(bb.x1); + y = Math.floor(bb.y1); + width = Math.floor(bb.width()); + height = Math.floor(bb.height()); + } // temporarily remove mask to avoid recursion - var mask = element.attribute('mask').value; - element.attribute('mask').value = ''; - var cMask = document.createElement('canvas'); - cMask.width = x + width; - cMask.height = y + height; - var maskCtx = cMask.getContext('2d'); - this.renderChildren(maskCtx); - var c = document.createElement('canvas'); - c.width = x + width; - c.height = y + height; - var tempCtx = c.getContext('2d'); - element.render(tempCtx); - tempCtx.globalCompositeOperation = 'destination-in'; - tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat'); - tempCtx.fillRect(0, 0, x + width, y + height); - ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat'); - ctx.fillRect(0, 0, x + width, y + height); // reassign mask + const mask = element.attribute('mask').value; + element.attribute('mask').value = ''; + const cMask = document.createElement('canvas'); + cMask.width = x + width; + cMask.height = y + height; + const maskCtx = cMask.getContext('2d'); + this.renderChildren(maskCtx); + const c = document.createElement('canvas'); + c.width = x + width; + c.height = y + height; + const tempCtx = c.getContext('2d'); + element.render(tempCtx); + tempCtx.globalCompositeOperation = 'destination-in'; + tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat'); + tempCtx.fillRect(0, 0, x + width, y + height); + ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat'); + ctx.fillRect(0, 0, x + width, y + height); // reassign mask - element.attribute('mask').value = mask; - } - }, { - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); - - return _class40; - }(svg.Element.ElementBase); // clip element - - - svg.Element.clipPath = /*#__PURE__*/function (_svg$Element$ElementB12) { - _inherits(_class41, _svg$Element$ElementB12); - - var _super40 = _createSuper(_class41); - - function _class41() { - _classCallCheck(this, _class41); - - return _super40.apply(this, arguments); + element.attribute('mask').value = mask; } - _createClass(_class41, [{ - key: "apply", - value: function apply(ctx) { - this.children.forEach(function (child) { - if (typeof child.path !== 'undefined') { - var transform = null; + render(ctx) {// NO RENDER + } - if (child.attribute('transform').hasValue()) { - transform = new svg.Transform(child.attribute('transform').value); - transform.apply(ctx); - } + }; // clip element - child.path(ctx); - ctx.clip(); + svg.Element.clipPath = class extends svg.Element.ElementBase { + apply(ctx) { + this.children.forEach(child => { + if (typeof child.path !== 'undefined') { + let transform = null; - if (transform) { - transform.unapply(ctx); - } + if (child.attribute('transform').hasValue()) { + transform = new svg.Transform(child.attribute('transform').value); + transform.apply(ctx); } - }); - } - }, { - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); - return _class41; - }(svg.Element.ElementBase); // filters + child.path(ctx); + ctx.clip(); - - svg.Element.filter = /*#__PURE__*/function (_svg$Element$ElementB13) { - _inherits(_class42, _svg$Element$ElementB13); - - var _super41 = _createSuper(_class42); - - function _class42() { - _classCallCheck(this, _class42); - - return _super41.apply(this, arguments); + if (transform) { + transform.unapply(ctx); + } + } + }); } - _createClass(_class42, [{ - key: "apply", - value: function apply(ctx, element) { - // render as temp svg - var bb = element.getBoundingBox(); - var x = Math.floor(bb.x1); - var y = Math.floor(bb.y1); - var width = Math.floor(bb.width()); - var height = Math.floor(bb.height()); // temporarily remove filter to avoid recursion - - var filter = element.style('filter').value; - element.style('filter').value = ''; - var px = 0, - py = 0; - this.children.forEach(function (child) { - var efd = child.extraFilterDistance || 0; - px = Math.max(px, efd); - py = Math.max(py, efd); - }); - var c = document.createElement('canvas'); - c.width = width + 2 * px; - c.height = height + 2 * py; - var tempCtx = c.getContext('2d'); - tempCtx.translate(-x + px, -y + py); - element.render(tempCtx); // apply filters - - this.children.forEach(function (child) { - child.apply(tempCtx, 0, 0, width + 2 * px, height + 2 * py); - }); // render on me - - ctx.drawImage(c, 0, 0, width + 2 * px, height + 2 * py, x - px, y - py, width + 2 * px, height + 2 * py); // reassign filter - - element.style('filter', true).value = filter; - } - }, { - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); - - return _class42; - }(svg.Element.ElementBase); - - svg.Element.feMorphology = /*#__PURE__*/function (_svg$Element$ElementB14) { - _inherits(_class43, _svg$Element$ElementB14); - - var _super42 = _createSuper(_class43); - - function _class43() { - _classCallCheck(this, _class43); - - return _super42.apply(this, arguments); + render(ctx) {// NO RENDER } - _createClass(_class43, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) {// TODO: implement - } - }]); + }; // filters - return _class43; - }(svg.Element.ElementBase); + svg.Element.filter = class extends svg.Element.ElementBase { + apply(ctx, element) { + // render as temp svg + const bb = element.getBoundingBox(); + const x = Math.floor(bb.x1); + const y = Math.floor(bb.y1); + const width = Math.floor(bb.width()); + const height = Math.floor(bb.height()); // temporarily remove filter to avoid recursion - svg.Element.feComposite = /*#__PURE__*/function (_svg$Element$ElementB15) { - _inherits(_class44, _svg$Element$ElementB15); + const filter = element.style('filter').value; + element.style('filter').value = ''; + let px = 0, + py = 0; + this.children.forEach(child => { + const efd = child.extraFilterDistance || 0; + px = Math.max(px, efd); + py = Math.max(py, efd); + }); + const c = document.createElement('canvas'); + c.width = width + 2 * px; + c.height = height + 2 * py; + const tempCtx = c.getContext('2d'); + tempCtx.translate(-x + px, -y + py); + element.render(tempCtx); // apply filters - var _super43 = _createSuper(_class44); + this.children.forEach(child => { + child.apply(tempCtx, 0, 0, width + 2 * px, height + 2 * py); + }); // render on me - function _class44() { - _classCallCheck(this, _class44); + ctx.drawImage(c, 0, 0, width + 2 * px, height + 2 * py, x - px, y - py, width + 2 * px, height + 2 * py); // reassign filter - return _super43.apply(this, arguments); + element.style('filter', true).value = filter; } - _createClass(_class44, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) {// TODO: implement - } - }]); + render(ctx) {// NO RENDER + } - return _class44; - }(svg.Element.ElementBase); + }; + svg.Element.feMorphology = class extends svg.Element.ElementBase { + apply(ctx, x, y, width, height) {// TODO: implement + } + + }; + svg.Element.feComposite = class extends svg.Element.ElementBase { + apply(ctx, x, y, width, height) {// TODO: implement + } + + }; /** * @param {Uint8ClampedArray} img * @param {Integer} x @@ -4390,7 +3378,6 @@ var canvg = (function (exports) { * @returns {Integer} */ - function imGet(img, x, y, width, height, rgba) { return img[y * width * 4 + x * 4 + rgba]; } @@ -4410,33 +3397,25 @@ var canvg = (function (exports) { img[y * width * 4 + x * 4 + rgba] = val; } - svg.Element.feColorMatrix = /*#__PURE__*/function (_svg$Element$ElementB16) { - _inherits(_class45, _svg$Element$ElementB16); + svg.Element.feColorMatrix = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + let matrix = svg.ToNumberArray(this.attribute('values').value); - var _super44 = _createSuper(_class45); - - function _class45(node) { - var _this23; - - _classCallCheck(this, _class45); - - _this23 = _super44.call(this, node); - var matrix = svg.ToNumberArray(_this23.attribute('values').value); - - switch (_this23.attribute('type').valueOrDefault('matrix')) { + switch (this.attribute('type').valueOrDefault('matrix')) { // https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement case 'saturate': { - var s = matrix[0]; + const s = matrix[0]; matrix = [0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0, 0, 0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0, 0, 0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]; break; } case 'hueRotate': { - var a = matrix[0] * Math.PI / 180.0; + const a = matrix[0] * Math.PI / 180.0; - var c = function c(m1, m2, m3) { + const c = function (m1, m2, m3) { return m1 + Math.cos(a) * m2 + Math.sin(a) * m3; }; @@ -4449,130 +3428,84 @@ var canvg = (function (exports) { break; } - _this23.matrix = matrix; + this.matrix = matrix; - _this23._m = function (i, v) { - var mi = matrix[i]; + this._m = (i, v) => { + const mi = matrix[i]; return mi * (mi < 0 ? v - 255 : v); }; - - return _this23; } - _createClass(_class45, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) { - var m = this._m; // assuming x==0 && y==0 for now + apply(ctx, x, y, width, height) { + const { + _m: m + } = this; // assuming x==0 && y==0 for now - var srcData = ctx.getImageData(0, 0, width, height); + const srcData = ctx.getImageData(0, 0, width, height); - for (var _y = 0; _y < height; _y++) { - for (var _x = 0; _x < width; _x++) { - var r = imGet(srcData.data, _x, _y, width, height, 0); - var g = imGet(srcData.data, _x, _y, width, height, 1); - var b = imGet(srcData.data, _x, _y, width, height, 2); - var a = imGet(srcData.data, _x, _y, width, height, 3); - imSet(srcData.data, _x, _y, width, height, 0, m(0, r) + m(1, g) + m(2, b) + m(3, a) + m(4, 1)); - imSet(srcData.data, _x, _y, width, height, 1, m(5, r) + m(6, g) + m(7, b) + m(8, a) + m(9, 1)); - imSet(srcData.data, _x, _y, width, height, 2, m(10, r) + m(11, g) + m(12, b) + m(13, a) + m(14, 1)); - imSet(srcData.data, _x, _y, width, height, 3, m(15, r) + m(16, g) + m(17, b) + m(18, a) + m(19, 1)); - } + for (let _y = 0; _y < height; _y++) { + for (let _x = 0; _x < width; _x++) { + const r = imGet(srcData.data, _x, _y, width, height, 0); + const g = imGet(srcData.data, _x, _y, width, height, 1); + const b = imGet(srcData.data, _x, _y, width, height, 2); + const a = imGet(srcData.data, _x, _y, width, height, 3); + imSet(srcData.data, _x, _y, width, height, 0, m(0, r) + m(1, g) + m(2, b) + m(3, a) + m(4, 1)); + imSet(srcData.data, _x, _y, width, height, 1, m(5, r) + m(6, g) + m(7, b) + m(8, a) + m(9, 1)); + imSet(srcData.data, _x, _y, width, height, 2, m(10, r) + m(11, g) + m(12, b) + m(13, a) + m(14, 1)); + imSet(srcData.data, _x, _y, width, height, 3, m(15, r) + m(16, g) + m(17, b) + m(18, a) + m(19, 1)); } - - ctx.clearRect(0, 0, width, height); - ctx.putImageData(srcData, 0, 0); } - }]); - return _class45; - }(svg.Element.ElementBase); - - svg.Element.feGaussianBlur = /*#__PURE__*/function (_svg$Element$ElementB17) { - _inherits(_class46, _svg$Element$ElementB17); - - var _super45 = _createSuper(_class46); - - function _class46(node) { - var _this24; - - _classCallCheck(this, _class46); - - _this24 = _super45.call(this, node); - _this24.blurRadius = Math.floor(_this24.attribute('stdDeviation').numValue()); - _this24.extraFilterDistance = _this24.blurRadius; - return _this24; + ctx.clearRect(0, 0, width, height); + ctx.putImageData(srcData, 0, 0); } - _createClass(_class46, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) { - // Todo: This might not be a problem anymore with out `instanceof` fix - // StackBlur requires canvas be on document - ctx.canvas.id = svg.UniqueId(); - ctx.canvas.style.display = 'none'; - document.body.append(ctx.canvas); - processCanvasRGBA(ctx.canvas, x, y, width, height, this.blurRadius); - ctx.canvas.remove(); - } - }]); - - return _class46; - }(svg.Element.ElementBase); // title element, do nothing - - - svg.Element.title = /*#__PURE__*/function (_svg$Element$ElementB18) { - _inherits(_class47, _svg$Element$ElementB18); - - var _super46 = _createSuper(_class47); - - function _class47(node) { - _classCallCheck(this, _class47); - - return _super46.call(this); + }; + svg.Element.feGaussianBlur = class extends svg.Element.ElementBase { + constructor(node) { + super(node); + this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue()); + this.extraFilterDistance = this.blurRadius; } - return _class47; - }(svg.Element.ElementBase); // desc element, do nothing - - - svg.Element.desc = /*#__PURE__*/function (_svg$Element$ElementB19) { - _inherits(_class48, _svg$Element$ElementB19); - - var _super47 = _createSuper(_class48); - - function _class48(node) { - _classCallCheck(this, _class48); - - return _super47.call(this); + apply(ctx, x, y, width, height) { + // Todo: This might not be a problem anymore with out `instanceof` fix + // StackBlur requires canvas be on document + ctx.canvas.id = svg.UniqueId(); + ctx.canvas.style.display = 'none'; + document.body.append(ctx.canvas); + processCanvasRGBA(ctx.canvas, x, y, width, height, this.blurRadius); + ctx.canvas.remove(); } - return _class48; - }(svg.Element.ElementBase); + }; // title element, do nothing - svg.Element.MISSING = /*#__PURE__*/function (_svg$Element$ElementB20) { - _inherits(_class49, _svg$Element$ElementB20); + svg.Element.title = class extends svg.Element.ElementBase { + constructor(node) { + super(); + } - var _super48 = _createSuper(_class49); + }; // desc element, do nothing - function _class49(node) { - var _this25; + svg.Element.desc = class extends svg.Element.ElementBase { + constructor(node) { + super(); + } - _classCallCheck(this, _class49); - - _this25 = _super48.call(this); + }; + svg.Element.MISSING = class extends svg.Element.ElementBase { + constructor(node) { + super(); svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.'); - return _this25; } - return _class49; - }(svg.Element.ElementBase); // element factory - + }; // element factory svg.CreateElement = function (node) { - var className = node.nodeName.replace(/^[^:]+:/, '') // remove namespace + const className = node.nodeName.replace(/^[^:]+:/, '') // remove namespace .replace(/-/g, ''); // remove dashes - var e; + let e; if (typeof svg.Element[className] !== 'undefined') { e = new svg.Element[className](node); @@ -4585,32 +3518,10 @@ var canvg = (function (exports) { }; // load from url - svg.load = /*#__PURE__*/function () { - var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(ctx, url) { - var dom; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - _context.next = 2; - return svg.ajax(url, true); - - case 2: - dom = _context.sent; - return _context.abrupt("return", svg.loadXml(ctx, dom)); - - case 4: - case "end": - return _context.stop(); - } - } - }, _callee); - })); - - return function (_x2, _x3) { - return _ref12.apply(this, arguments); - }; - }(); // load from xml + svg.load = async function (ctx, url) { + const dom = await svg.ajax(url, true); + return svg.loadXml(ctx, dom); + }; // load from xml svg.loadXml = function (ctx, xml) { @@ -4618,11 +3529,11 @@ var canvg = (function (exports) { }; svg.loadXmlDoc = function (ctx, dom) { - var res; + let res; svg.init(ctx); - var mapXY = function mapXY(p) { - var e = ctx.canvas; + const mapXY = function (p) { + let e = ctx.canvas; while (e) { p.x -= e.offsetLeft; @@ -4638,31 +3549,31 @@ var canvg = (function (exports) { if (svg.opts.ignoreMouse !== true) { ctx.canvas.addEventListener('click', function (e) { - var args = !isNullish(e) ? [e.clientX, e.clientY] : [event.clientX, event.clientY]; // eslint-disable-line no-restricted-globals - - var _mapXY = mapXY(_construct(svg.Point, args)), - x = _mapXY.x, - y = _mapXY.y; + const args = !isNullish(e) ? [e.clientX, e.clientY] : [event.clientX, event.clientY]; // eslint-disable-line no-restricted-globals + const { + x, + y + } = mapXY(new svg.Point(...args)); svg.Mouse.onclick(x, y); }); ctx.canvas.addEventListener('mousemove', function (e) { - var args = !isNullish(e) ? [e.clientX, e.clientY] : [event.clientX, event.clientY]; // eslint-disable-line no-restricted-globals - - var _mapXY2 = mapXY(_construct(svg.Point, args)), - x = _mapXY2.x, - y = _mapXY2.y; + const args = !isNullish(e) ? [e.clientX, e.clientY] : [event.clientX, event.clientY]; // eslint-disable-line no-restricted-globals + const { + x, + y + } = mapXY(new svg.Point(...args)); svg.Mouse.onmousemove(x, y); }); } - var e = svg.CreateElement(dom.documentElement); + const e = svg.CreateElement(dom.documentElement); e.root = true; // render loop - var isFirstRender = true; + let isFirstRender = true; - var draw = function draw(resolve) { + const draw = function (resolve) { svg.ViewPort.Clear(); if (ctx.canvas.parentNode) { @@ -4682,8 +3593,8 @@ var canvg = (function (exports) { } } - var cWidth = ctx.canvas.clientWidth || ctx.canvas.width; - var cHeight = ctx.canvas.clientHeight || ctx.canvas.height; + let cWidth = ctx.canvas.clientWidth || ctx.canvas.width; + let cHeight = ctx.canvas.clientHeight || ctx.canvas.height; if (svg.opts.ignoreDimensions === true && e.style('width').hasValue() && e.style('height').hasValue()) { cWidth = e.style('width').toPixels('x'); @@ -4701,8 +3612,8 @@ var canvg = (function (exports) { } if (!isNullish(svg.opts.scaleWidth) || !isNullish(svg.opts.scaleHeight)) { - var viewBox = svg.ToNumberArray(e.attribute('viewBox').value); - var xRatio = null, + const viewBox = svg.ToNumberArray(e.attribute('viewBox').value); + let xRatio = null, yRatio = null; if (!isNullish(svg.opts.scaleWidth)) { @@ -4748,9 +3659,9 @@ var canvg = (function (exports) { } }; - var waitingForImages = true; + let waitingForImages = true; svg.intervalID = setInterval(function () { - var needUpdate = false; + let needUpdate = false; if (waitingForImages && svg.ImagesLoaded()) { waitingForImages = false; @@ -4764,8 +3675,8 @@ var canvg = (function (exports) { if (svg.opts.ignoreAnimation !== true) { - svg.Animations.forEach(function (animation) { - var needAnimationUpdate = animation.update(1000 / svg.FRAMERATE); + svg.Animations.forEach(animation => { + const needAnimationUpdate = animation.update(1000 / svg.FRAMERATE); needUpdate = needUpdate || needAnimationUpdate; }); } // need update from redraw? @@ -4784,7 +3695,7 @@ var canvg = (function (exports) { } }, 1000 / svg.FRAMERATE); // Todo: Replace with an image loading Promise utility? - return new Promise(function (resolve, reject) { + return new Promise((resolve, reject) => { // eslint-disable-line promise/avoid-new if (svg.ImagesLoaded()) { waitingForImages = false; @@ -4796,7 +3707,7 @@ var canvg = (function (exports) { }); }; - svg.stop = function () { + svg.stop = () => { if (svg.intervalID) { clearInterval(svg.intervalID); } @@ -4804,60 +3715,65 @@ var canvg = (function (exports) { svg.Mouse = { events: [], - hasEvents: function hasEvents() { + + hasEvents() { return this.events.length !== 0; }, - onclick: function onclick(x, y) { + + onclick(x, y) { this.events.push({ type: 'onclick', - x: x, - y: y, - run: function run(e) { + x, + y, + + run(e) { if (e.onclick) e.onclick(); } + }); }, - onmousemove: function onmousemove(x, y) { + + onmousemove(x, y) { this.events.push({ type: 'onmousemove', - x: x, - y: y, - run: function run(e) { + x, + y, + + run(e) { if (e.onmousemove) e.onmousemove(); } + }); }, + eventElements: [], - checkPath: function checkPath(element, ctx) { - var _this26 = this; - - this.events.forEach(function (_ref13, i) { - var x = _ref13.x, - y = _ref13.y; + checkPath(element, ctx) { + this.events.forEach(({ + x, + y + }, i) => { if (ctx.isPointInPath && ctx.isPointInPath(x, y)) { - _this26.eventElements[i] = element; + this.eventElements[i] = element; } }); }, - checkBoundingBox: function checkBoundingBox(element, bb) { - var _this27 = this; - - this.events.forEach(function (_ref14, i) { - var x = _ref14.x, - y = _ref14.y; + checkBoundingBox(element, bb) { + this.events.forEach(({ + x, + y + }, i) => { if (bb.isPointInBox(x, y)) { - _this27.eventElements[i] = element; + this.eventElements[i] = element; } }); }, - runEvents: function runEvents() { - var _this28 = this; + runEvents() { svg.ctx.canvas.style.cursor = ''; - this.events.forEach(function (e, i) { - var element = _this28.eventElements[i]; + this.events.forEach((e, i) => { + let element = this.eventElements[i]; while (element) { e.run(element); @@ -4868,6 +3784,7 @@ var canvg = (function (exports) { this.events = []; this.eventElements = []; } + }; return svg; } diff --git a/dist/dom-polyfill.js b/dist/dom-polyfill.js index dc627299..8fc83ff2 100644 --- a/dist/dom-polyfill.js +++ b/dist/dom-polyfill.js @@ -1,22 +1,6 @@ (function () { 'use strict'; - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function (obj) { - return typeof obj; - }; - } else { - _typeof = function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); - } - // From https://github.com/inexorabletash/polyfill/blob/master/dom.js /** @@ -31,7 +15,7 @@ */ function mixin(o, ps) { if (!o) return; - Object.keys(ps).forEach(function (p) { + Object.keys(ps).forEach(p => { if (p in o || p in o.prototype) { return; } @@ -52,8 +36,8 @@ function convertNodesIntoANode(nodes) { - nodes = nodes.map(function (node) { - var isNode = node && _typeof(node) === 'object' && 'nodeType' in node; + nodes = nodes.map(node => { + const isNode = node && typeof node === 'object' && 'nodeType' in node; return isNode ? node : document.createTextNode(node); }); @@ -61,30 +45,24 @@ return nodes[0]; } - var node = document.createDocumentFragment(); - nodes.forEach(function (n) { + const node = document.createDocumentFragment(); + nodes.forEach(n => { node.appendChild(n); }); return node; } - var ParentNode = { - prepend: function prepend() { - for (var _len = arguments.length, nodes = new Array(_len), _key = 0; _key < _len; _key++) { - nodes[_key] = arguments[_key]; - } - + const ParentNode = { + prepend(...nodes) { nodes = convertNodesIntoANode(nodes); this.insertBefore(nodes, this.firstChild); }, - append: function append() { - for (var _len2 = arguments.length, nodes = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - nodes[_key2] = arguments[_key2]; - } + append(...nodes) { nodes = convertNodesIntoANode(nodes); this.appendChild(nodes); } + }; mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8 @@ -92,54 +70,44 @@ mixin(Element, ParentNode); // Mixin ChildNode // https://dom.spec.whatwg.org/#interface-childnode - var ChildNode = { - before: function before() { - var parent = this.parentNode; + const ChildNode = { + before(...nodes) { + const parent = this.parentNode; if (!parent) return; - var viablePreviousSibling = this.previousSibling; - - for (var _len3 = arguments.length, nodes = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { - nodes[_key3] = arguments[_key3]; - } + let viablePreviousSibling = this.previousSibling; while (nodes.includes(viablePreviousSibling)) { viablePreviousSibling = viablePreviousSibling.previousSibling; } - var node = convertNodesIntoANode(nodes); + const node = convertNodesIntoANode(nodes); parent.insertBefore(node, viablePreviousSibling ? viablePreviousSibling.nextSibling : parent.firstChild); }, - after: function after() { - var parent = this.parentNode; - if (!parent) return; - var viableNextSibling = this.nextSibling; - for (var _len4 = arguments.length, nodes = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { - nodes[_key4] = arguments[_key4]; - } + after(...nodes) { + const parent = this.parentNode; + if (!parent) return; + let viableNextSibling = this.nextSibling; while (nodes.includes(viableNextSibling)) { viableNextSibling = viableNextSibling.nextSibling; } - var node = convertNodesIntoANode(nodes); // eslint-disable-next-line unicorn/prefer-modern-dom-apis + const node = convertNodesIntoANode(nodes); // eslint-disable-next-line unicorn/prefer-modern-dom-apis parent.insertBefore(node, viableNextSibling); }, - replaceWith: function replaceWith() { - var parent = this.parentNode; - if (!parent) return; - var viableNextSibling = this.nextSibling; - for (var _len5 = arguments.length, nodes = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) { - nodes[_key5] = arguments[_key5]; - } + replaceWith(...nodes) { + const parent = this.parentNode; + if (!parent) return; + let viableNextSibling = this.nextSibling; while (nodes.includes(viableNextSibling)) { viableNextSibling = viableNextSibling.nextSibling; } - var node = convertNodesIntoANode(nodes); + const node = convertNodesIntoANode(nodes); if (this.parentNode === parent) { parent.replaceChild(node, this); @@ -148,13 +116,15 @@ parent.insertBefore(node, viableNextSibling); } }, - remove: function remove() { + + remove() { if (!this.parentNode) { return; } this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove } + }; mixin(DocumentType, ChildNode); mixin(Element, ChildNode); diff --git a/dist/extensions/ext-arrows.js b/dist/extensions/ext-arrows.js index df4e65b8..959b5f51 100644 --- a/dist/extensions/ext-arrows.js +++ b/dist/extensions/ext-arrows.js @@ -1,42 +1,6 @@ var svgEditorExtension_arrows = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /** * @file ext-arrows.js * @@ -47,351 +11,361 @@ var svgEditorExtension_arrows = (function () { */ var extArrows = { name: 'arrows', - init: function init(S) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() { - var strings, svgEditor, svgCanvas, addElem, nonce, $, prefix, selElems, arrowprefix, randomizeIds, setArrowNonce, unsetArrowNonce, pathdata, getLinked, showPanel, resetMarker, addMarker, setArrow, colorChanged, contextTools; - return regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - colorChanged = function _colorChanged(elem) { - var color = elem.getAttribute('stroke'); - var mtypes = ['start', 'mid', 'end']; - var defs = svgCanvas.findDefs(); - $.each(mtypes, function (i, type) { - var marker = getLinked(elem, 'marker-' + type); + async init(S) { + const strings = await S.importLocale(); + const svgEditor = this; + const svgCanvas = svgEditor.canvas; + const // {svgcontent} = S, + addElem = svgCanvas.addSVGElementFromJson, + { + nonce, + $ + } = S, + prefix = 'se_arrow_'; + let selElems, + arrowprefix, + randomizeIds = S.randomize_ids; + /** + * @param {Window} win + * @param {!(string|Integer)} n + * @returns {void} + */ - if (!marker) { - return; - } - - var curColor = $(marker).children().attr('fill'); - var curD = $(marker).children().attr('d'); - - if (curColor === color) { - return; - } - - var allMarkers = $(defs).find('marker'); - var newMarker = null; // Different color, check if already made - - allMarkers.each(function () { - var attrs = $(this).children().attr(['fill', 'd']); - - if (attrs.fill === color && attrs.d === curD) { - // Found another marker with this color and this path - newMarker = this; // eslint-disable-line consistent-this - } - }); - - if (!newMarker) { - // Create a new marker with this color - var lastId = marker.id; - var dir = lastId.includes('_fw') ? 'fw' : 'bk'; - newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length); - $(newMarker).children().attr('fill', color); - } - - $(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed - - var remove = true; - $(S.svgcontent).find('line, polyline, path, polygon').each(function () { - var element = this; // eslint-disable-line consistent-this - - $.each(mtypes, function (j, mtype) { - if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') { - remove = false; - return remove; - } - - return undefined; - }); - - if (!remove) { - return false; - } - - return undefined; - }); // Not found, so can safely remove - - if (remove) { - $(marker).remove(); - } - }); - }; - - setArrow = function _setArrow() { - resetMarker(); - var type = this.value; - - if (type === 'none') { - return; - } // Set marker on element + function setArrowNonce(win, n) { + randomizeIds = true; + arrowprefix = prefix + n + '_'; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; + } + /** + * @param {Window} win + * @returns {void} + */ - var dir = 'fw'; + function unsetArrowNonce(win) { + randomizeIds = false; + arrowprefix = prefix; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; + } - if (type === 'mid_bk') { - type = 'mid'; - dir = 'bk'; - } else if (type === 'both') { - addMarker('bk', type); - svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')'); - type = 'end'; - dir = 'fw'; - } else if (type === 'start') { - dir = 'bk'; - } + svgCanvas.bind('setnonce', setArrowNonce); + svgCanvas.bind('unsetnonce', unsetArrowNonce); - addMarker(dir, type); - svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')'); - svgCanvas.call('changed', selElems); - }; + if (randomizeIds) { + arrowprefix = prefix + nonce + '_'; + } else { + arrowprefix = prefix; + } - addMarker = function _addMarker(dir, type, id) { - // TODO: Make marker (or use?) per arrow type, since refX can be different - id = id || arrowprefix + dir; - var data = pathdata[dir]; + const pathdata = { + fw: { + d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', + refx: 8, + id: arrowprefix + 'fw' + }, + bk: { + d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', + refx: 2, + id: arrowprefix + 'bk' + } + }; + /** + * Gets linked element. + * @param {Element} elem + * @param {string} attr + * @returns {Element} + */ - if (type === 'mid') { - data.refx = 5; - } + function getLinked(elem, attr) { + const str = elem.getAttribute(attr); - var marker = svgCanvas.getElem(id); + if (!str) { + return null; + } - if (!marker) { - marker = addElem({ - element: 'marker', - attr: { - viewBox: '0 0 10 10', - id: id, - refY: 5, - markerUnits: 'strokeWidth', - markerWidth: 5, - markerHeight: 5, - orient: 'auto', - style: 'pointer-events:none' // Currently needed for Opera + const m = str.match(/\(#(.*)\)/); // const m = str.match(/\(#(?.+)\)/); + // if (!m || !m.groups.id) { - } - }); - var arrow = addElem({ - element: 'path', - attr: { - d: data.d, - fill: '#000000' - } - }); - marker.append(arrow); - svgCanvas.findDefs().append(marker); - } + if (!m || m.length !== 2) { + return null; + } - marker.setAttribute('refX', data.refx); - return marker; - }; + return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id); + } + /** + * @param {boolean} on + * @returns {void} + */ - resetMarker = function _resetMarker() { - var el = selElems[0]; - el.removeAttribute('marker-start'); - el.removeAttribute('marker-mid'); - el.removeAttribute('marker-end'); - }; - showPanel = function _showPanel(on) { - $('#arrow_panel').toggle(on); + function showPanel(on) { + $('#arrow_panel').toggle(on); - if (on) { - var el = selElems[0]; - var end = el.getAttribute('marker-end'); - var start = el.getAttribute('marker-start'); - var mid = el.getAttribute('marker-mid'); - var val; + if (on) { + const el = selElems[0]; + const end = el.getAttribute('marker-end'); + const start = el.getAttribute('marker-start'); + const mid = el.getAttribute('marker-mid'); + let val; - if (end && start) { - val = 'both'; - } else if (end) { - val = 'end'; - } else if (start) { - val = 'start'; - } else if (mid) { - val = 'mid'; + if (end && start) { + val = 'both'; + } else if (end) { + val = 'end'; + } else if (start) { + val = 'start'; + } else if (mid) { + val = 'mid'; - if (mid.includes('bk')) { - val = 'mid_bk'; - } - } - - if (!start && !mid && !end) { - val = 'none'; - } - - $('#arrow_list').val(val); - } - }; - - getLinked = function _getLinked(elem, attr) { - var str = elem.getAttribute(attr); - - if (!str) { - return null; - } - - var m = str.match(/\(#(.*)\)/); // const m = str.match(/\(#(?.+)\)/); - // if (!m || !m.groups.id) { - - if (!m || m.length !== 2) { - return null; - } - - return svgCanvas.getElem(m[1]); // return svgCanvas.getElem(m.groups.id); - }; - - unsetArrowNonce = function _unsetArrowNonce(win) { - randomizeIds = false; - arrowprefix = prefix; - pathdata.fw.id = arrowprefix + 'fw'; - pathdata.bk.id = arrowprefix + 'bk'; - }; - - setArrowNonce = function _setArrowNonce(win, n) { - randomizeIds = true; - arrowprefix = prefix + n + '_'; - pathdata.fw.id = arrowprefix + 'fw'; - pathdata.bk.id = arrowprefix + 'bk'; - }; - - _context2.next = 10; - return S.importLocale(); - - case 10: - strings = _context2.sent; - svgEditor = _this; - svgCanvas = svgEditor.canvas; - // {svgcontent} = S, - addElem = svgCanvas.addSVGElementFromJson, nonce = S.nonce, $ = S.$, prefix = 'se_arrow_'; - randomizeIds = S.randomize_ids; - /** - * @param {Window} win - * @param {!(string|Integer)} n - * @returns {void} - */ - - svgCanvas.bind('setnonce', setArrowNonce); - svgCanvas.bind('unsetnonce', unsetArrowNonce); - - if (randomizeIds) { - arrowprefix = prefix + nonce + '_'; - } else { - arrowprefix = prefix; - } - - pathdata = { - fw: { - d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', - refx: 8, - id: arrowprefix + 'fw' - }, - bk: { - d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', - refx: 2, - id: arrowprefix + 'bk' - } - }; - /** - * Gets linked element. - * @param {Element} elem - * @param {string} attr - * @returns {Element} - */ - - contextTools = [{ - type: 'select', - panel: 'arrow_panel', - id: 'arrow_list', - defval: 'none', - events: { - change: setArrow - } - }]; - return _context2.abrupt("return", { - name: strings.name, - context_tools: strings.contextTools.map(function (contextTool, i) { - return Object.assign(contextTools[i], contextTool); - }), - callback: function callback() { - $('#arrow_panel').hide(); // Set ID so it can be translated in locale file - - $('#arrow_list option')[0].id = 'connector_no_arrow'; - }, - addLangData: function addLangData(_ref) { - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var lang, importLocale, _yield$importLocale, langList; - - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - lang = _ref.lang, importLocale = _ref.importLocale; - _context.next = 3; - return importLocale(); - - case 3: - _yield$importLocale = _context.sent; - langList = _yield$importLocale.langList; - return _context.abrupt("return", { - data: langList - }); - - case 6: - case "end": - return _context.stop(); - } - } - }, _callee); - }))(); - }, - selectedChanged: function selectedChanged(opts) { - // Use this to update the current selected elements - selElems = opts.elems; - var markerElems = ['line', 'path', 'polyline', 'polygon']; - var i = selElems.length; - - while (i--) { - var elem = selElems[i]; - - if (elem && markerElems.includes(elem.tagName)) { - if (opts.selectedElement && !opts.multiselected) { - showPanel(true); - } else { - showPanel(false); - } - } else { - showPanel(false); - } - } - }, - elementChanged: function elementChanged(opts) { - var elem = opts.elems[0]; - - if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) { - // const start = elem.getAttribute('marker-start'); - // const mid = elem.getAttribute('marker-mid'); - // const end = elem.getAttribute('marker-end'); - // Has marker, so see if it should match color - colorChanged(elem); - } - } - }); - - case 21: - case "end": - return _context2.stop(); + if (mid.includes('bk')) { + val = 'mid_bk'; } } - }, _callee2); - }))(); + + if (!start && !mid && !end) { + val = 'none'; + } + + $('#arrow_list').val(val); + } + } + /** + * + * @returns {void} + */ + + + function resetMarker() { + const el = selElems[0]; + el.removeAttribute('marker-start'); + el.removeAttribute('marker-mid'); + el.removeAttribute('marker-end'); + } + /** + * @param {"bk"|"fw"} dir + * @param {"both"|"mid"|"end"|"start"} type + * @param {string} id + * @returns {Element} + */ + + + function addMarker(dir, type, id) { + // TODO: Make marker (or use?) per arrow type, since refX can be different + id = id || arrowprefix + dir; + const data = pathdata[dir]; + + if (type === 'mid') { + data.refx = 5; + } + + let marker = svgCanvas.getElem(id); + + if (!marker) { + marker = addElem({ + element: 'marker', + attr: { + viewBox: '0 0 10 10', + id, + refY: 5, + markerUnits: 'strokeWidth', + markerWidth: 5, + markerHeight: 5, + orient: 'auto', + style: 'pointer-events:none' // Currently needed for Opera + + } + }); + const arrow = addElem({ + element: 'path', + attr: { + d: data.d, + fill: '#000000' + } + }); + marker.append(arrow); + svgCanvas.findDefs().append(marker); + } + + marker.setAttribute('refX', data.refx); + return marker; + } + /** + * + * @returns {void} + */ + + + function setArrow() { + resetMarker(); + let type = this.value; + + if (type === 'none') { + return; + } // Set marker on element + + + let dir = 'fw'; + + if (type === 'mid_bk') { + type = 'mid'; + dir = 'bk'; + } else if (type === 'both') { + addMarker('bk', type); + svgCanvas.changeSelectedAttribute('marker-start', 'url(#' + pathdata.bk.id + ')'); + type = 'end'; + dir = 'fw'; + } else if (type === 'start') { + dir = 'bk'; + } + + addMarker(dir, type); + svgCanvas.changeSelectedAttribute('marker-' + type, 'url(#' + pathdata[dir].id + ')'); + svgCanvas.call('changed', selElems); + } + /** + * @param {Element} elem + * @returns {void} + */ + + + function colorChanged(elem) { + const color = elem.getAttribute('stroke'); + const mtypes = ['start', 'mid', 'end']; + const defs = svgCanvas.findDefs(); + $.each(mtypes, function (i, type) { + const marker = getLinked(elem, 'marker-' + type); + + if (!marker) { + return; + } + + const curColor = $(marker).children().attr('fill'); + const curD = $(marker).children().attr('d'); + + if (curColor === color) { + return; + } + + const allMarkers = $(defs).find('marker'); + let newMarker = null; // Different color, check if already made + + allMarkers.each(function () { + const attrs = $(this).children().attr(['fill', 'd']); + + if (attrs.fill === color && attrs.d === curD) { + // Found another marker with this color and this path + newMarker = this; // eslint-disable-line consistent-this + } + }); + + if (!newMarker) { + // Create a new marker with this color + const lastId = marker.id; + const dir = lastId.includes('_fw') ? 'fw' : 'bk'; + newMarker = addMarker(dir, type, arrowprefix + dir + allMarkers.length); + $(newMarker).children().attr('fill', color); + } + + $(elem).attr('marker-' + type, 'url(#' + newMarker.id + ')'); // Check if last marker can be removed + + let remove = true; + $(S.svgcontent).find('line, polyline, path, polygon').each(function () { + const element = this; // eslint-disable-line consistent-this + + $.each(mtypes, function (j, mtype) { + if ($(element).attr('marker-' + mtype) === 'url(#' + marker.id + ')') { + remove = false; + return remove; + } + + return undefined; + }); + + if (!remove) { + return false; + } + + return undefined; + }); // Not found, so can safely remove + + if (remove) { + $(marker).remove(); + } + }); + } + + const contextTools = [{ + type: 'select', + panel: 'arrow_panel', + id: 'arrow_list', + defval: 'none', + events: { + change: setArrow + } + }]; + return { + name: strings.name, + context_tools: strings.contextTools.map((contextTool, i) => { + return Object.assign(contextTools[i], contextTool); + }), + + callback() { + $('#arrow_panel').hide(); // Set ID so it can be translated in locale file + + $('#arrow_list option')[0].id = 'connector_no_arrow'; + }, + + async addLangData({ + lang, + importLocale + }) { + const { + langList + } = await importLocale(); + return { + data: langList + }; + }, + + selectedChanged(opts) { + // Use this to update the current selected elements + selElems = opts.elems; + const markerElems = ['line', 'path', 'polyline', 'polygon']; + let i = selElems.length; + + while (i--) { + const elem = selElems[i]; + + if (elem && markerElems.includes(elem.tagName)) { + if (opts.selectedElement && !opts.multiselected) { + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); + } + } + }, + + elementChanged(opts) { + const elem = opts.elems[0]; + + if (elem && (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end'))) { + // const start = elem.getAttribute('marker-start'); + // const mid = elem.getAttribute('marker-mid'); + // const end = elem.getAttribute('marker-end'); + // Has marker, so see if it should match color + colorChanged(elem); + } + } + + }; } + }; return extArrows; diff --git a/dist/extensions/ext-closepath.js b/dist/extensions/ext-closepath.js index c5ab1e17..e387b0c7 100644 --- a/dist/extensions/ext-closepath.js +++ b/dist/extensions/ext-closepath.js @@ -1,41 +1,2118 @@ var svgEditorExtension_closepath = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } + /* eslint-disable import/unambiguous */ - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } + /* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs, + SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs, + SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs, + SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs, + SVGPathSegClosePath, SVGPathSegCurvetoCubicRel, + SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel, + SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel, + SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel, + SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */ - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + /** + * SVGPathSeg API polyfill + * https://github.com/progers/pathseg + * + * This is a drop-in replacement for the `SVGPathSeg` and `SVGPathSegList` APIs + * that were removed from SVG2 ({@link https://lists.w3.org/Archives/Public/www-svg/2015Jun/0044.html}), + * including the latest spec changes which were implemented in Firefox 43 and + * Chrome 46. + */ - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + /* eslint-disable no-shadow, class-methods-use-this, jsdoc/require-jsdoc */ + // Linting: We avoid `no-shadow` as ESLint thinks these are still available globals + // Linting: We avoid `class-methods-use-this` as this is a polyfill that must + // follow the conventions + (() => { + if (!('SVGPathSeg' in window)) { + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg + class SVGPathSeg { + constructor(type, typeAsLetter, owningPathSegList) { + this.pathSegType = type; + this.pathSegTypeAsLetter = typeAsLetter; + this._owningPathSegList = owningPathSegList; + } // Notify owning PathSegList on any changes so they can be synchronized back to the path element. + + + _segmentChanged() { + if (this._owningPathSegList) { + this._owningPathSegList.segmentChanged(this); + } } - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + } + + SVGPathSeg.prototype.classname = 'SVGPathSeg'; + SVGPathSeg.PATHSEG_UNKNOWN = 0; + SVGPathSeg.PATHSEG_CLOSEPATH = 1; + SVGPathSeg.PATHSEG_MOVETO_ABS = 2; + SVGPathSeg.PATHSEG_MOVETO_REL = 3; + SVGPathSeg.PATHSEG_LINETO_ABS = 4; + SVGPathSeg.PATHSEG_LINETO_REL = 5; + SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS = 6; + SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL = 7; + SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS = 8; + SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL = 9; + SVGPathSeg.PATHSEG_ARC_ABS = 10; + SVGPathSeg.PATHSEG_ARC_REL = 11; + SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS = 12; + SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL = 13; + SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS = 14; + SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL = 15; + SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS = 16; + SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL = 17; + SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS = 18; + SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL = 19; + + class SVGPathSegClosePath extends SVGPathSeg { + constructor(owningPathSegList) { + super(SVGPathSeg.PATHSEG_CLOSEPATH, 'z', owningPathSegList); } - _next(undefined); + toString() { + return '[object SVGPathSegClosePath]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter; + } + + clone() { + return new SVGPathSegClosePath(undefined); + } + + } + + class SVGPathSegMovetoAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_MOVETO_ABS, 'M', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegMovetoAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegMovetoAbs(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegMovetoAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } }); - }; - } + + class SVGPathSegMovetoRel extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_MOVETO_REL, 'm', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegMovetoRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegMovetoRel(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegMovetoRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegLinetoAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_LINETO_ABS, 'L', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegLinetoAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegLinetoAbs(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegLinetoAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegLinetoRel extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_LINETO_REL, 'l', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegLinetoRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegLinetoRel(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegLinetoRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoCubicAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y, x1, y1, x2, y2) { + super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, 'C', owningPathSegList); + this._x = x; + this._y = y; + this._x1 = x1; + this._y1 = y1; + this._x2 = x2; + this._y2 = y2; + } + + toString() { + return '[object SVGPathSegCurvetoCubicAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); + } + + } + + Object.defineProperties(SVGPathSegCurvetoCubicAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x1: { + get() { + return this._x1; + }, + + set(x1) { + this._x1 = x1; + + this._segmentChanged(); + }, + + enumerable: true + }, + y1: { + get() { + return this._y1; + }, + + set(y1) { + this._y1 = y1; + + this._segmentChanged(); + }, + + enumerable: true + }, + x2: { + get() { + return this._x2; + }, + + set(x2) { + this._x2 = x2; + + this._segmentChanged(); + }, + + enumerable: true + }, + y2: { + get() { + return this._y2; + }, + + set(y2) { + this._y2 = y2; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoCubicRel extends SVGPathSeg { + constructor(owningPathSegList, x, y, x1, y1, x2, y2) { + super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, 'c', owningPathSegList); + this._x = x; + this._y = y; + this._x1 = x1; + this._y1 = y1; + this._x2 = x2; + this._y2 = y2; + } + + toString() { + return '[object SVGPathSegCurvetoCubicRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); + } + + } + + Object.defineProperties(SVGPathSegCurvetoCubicRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x1: { + get() { + return this._x1; + }, + + set(x1) { + this._x1 = x1; + + this._segmentChanged(); + }, + + enumerable: true + }, + y1: { + get() { + return this._y1; + }, + + set(y1) { + this._y1 = y1; + + this._segmentChanged(); + }, + + enumerable: true + }, + x2: { + get() { + return this._x2; + }, + + set(x2) { + this._x2 = x2; + + this._segmentChanged(); + }, + + enumerable: true + }, + y2: { + get() { + return this._y2; + }, + + set(y2) { + this._y2 = y2; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoQuadraticAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y, x1, y1) { + super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, 'Q', owningPathSegList); + this._x = x; + this._y = y; + this._x1 = x1; + this._y1 = y1; + } + + toString() { + return '[object SVGPathSegCurvetoQuadraticAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); + } + + } + + Object.defineProperties(SVGPathSegCurvetoQuadraticAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x1: { + get() { + return this._x1; + }, + + set(x1) { + this._x1 = x1; + + this._segmentChanged(); + }, + + enumerable: true + }, + y1: { + get() { + return this._y1; + }, + + set(y1) { + this._y1 = y1; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoQuadraticRel extends SVGPathSeg { + constructor(owningPathSegList, x, y, x1, y1) { + super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, 'q', owningPathSegList); + this._x = x; + this._y = y; + this._x1 = x1; + this._y1 = y1; + } + + toString() { + return '[object SVGPathSegCurvetoQuadraticRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); + } + + } + + Object.defineProperties(SVGPathSegCurvetoQuadraticRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x1: { + get() { + return this._x1; + }, + + set(x1) { + this._x1 = x1; + + this._segmentChanged(); + }, + + enumerable: true + }, + y1: { + get() { + return this._y1; + }, + + set(y1) { + this._y1 = y1; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegArcAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { + super(SVGPathSeg.PATHSEG_ARC_ABS, 'A', owningPathSegList); + this._x = x; + this._y = y; + this._r1 = r1; + this._r2 = r2; + this._angle = angle; + this._largeArcFlag = largeArcFlag; + this._sweepFlag = sweepFlag; + } + + toString() { + return '[object SVGPathSegArcAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); + } + + } + + Object.defineProperties(SVGPathSegArcAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + r1: { + get() { + return this._r1; + }, + + set(r1) { + this._r1 = r1; + + this._segmentChanged(); + }, + + enumerable: true + }, + r2: { + get() { + return this._r2; + }, + + set(r2) { + this._r2 = r2; + + this._segmentChanged(); + }, + + enumerable: true + }, + angle: { + get() { + return this._angle; + }, + + set(angle) { + this._angle = angle; + + this._segmentChanged(); + }, + + enumerable: true + }, + largeArcFlag: { + get() { + return this._largeArcFlag; + }, + + set(largeArcFlag) { + this._largeArcFlag = largeArcFlag; + + this._segmentChanged(); + }, + + enumerable: true + }, + sweepFlag: { + get() { + return this._sweepFlag; + }, + + set(sweepFlag) { + this._sweepFlag = sweepFlag; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegArcRel extends SVGPathSeg { + constructor(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { + super(SVGPathSeg.PATHSEG_ARC_REL, 'a', owningPathSegList); + this._x = x; + this._y = y; + this._r1 = r1; + this._r2 = r2; + this._angle = angle; + this._largeArcFlag = largeArcFlag; + this._sweepFlag = sweepFlag; + } + + toString() { + return '[object SVGPathSegArcRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); + } + + } + + Object.defineProperties(SVGPathSegArcRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + r1: { + get() { + return this._r1; + }, + + set(r1) { + this._r1 = r1; + + this._segmentChanged(); + }, + + enumerable: true + }, + r2: { + get() { + return this._r2; + }, + + set(r2) { + this._r2 = r2; + + this._segmentChanged(); + }, + + enumerable: true + }, + angle: { + get() { + return this._angle; + }, + + set(angle) { + this._angle = angle; + + this._segmentChanged(); + }, + + enumerable: true + }, + largeArcFlag: { + get() { + return this._largeArcFlag; + }, + + set(largeArcFlag) { + this._largeArcFlag = largeArcFlag; + + this._segmentChanged(); + }, + + enumerable: true + }, + sweepFlag: { + get() { + return this._sweepFlag; + }, + + set(sweepFlag) { + this._sweepFlag = sweepFlag; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegLinetoHorizontalAbs extends SVGPathSeg { + constructor(owningPathSegList, x) { + super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, 'H', owningPathSegList); + this._x = x; + } + + toString() { + return '[object SVGPathSegLinetoHorizontalAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x; + } + + clone() { + return new SVGPathSegLinetoHorizontalAbs(undefined, this._x); + } + + } + + Object.defineProperty(SVGPathSegLinetoHorizontalAbs.prototype, 'x', { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }); + + class SVGPathSegLinetoHorizontalRel extends SVGPathSeg { + constructor(owningPathSegList, x) { + super(SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, 'h', owningPathSegList); + this._x = x; + } + + toString() { + return '[object SVGPathSegLinetoHorizontalRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x; + } + + clone() { + return new SVGPathSegLinetoHorizontalRel(undefined, this._x); + } + + } + + Object.defineProperty(SVGPathSegLinetoHorizontalRel.prototype, 'x', { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }); + + class SVGPathSegLinetoVerticalAbs extends SVGPathSeg { + constructor(owningPathSegList, y) { + super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, 'V', owningPathSegList); + this._y = y; + } + + toString() { + return '[object SVGPathSegLinetoVerticalAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._y; + } + + clone() { + return new SVGPathSegLinetoVerticalAbs(undefined, this._y); + } + + } + + Object.defineProperty(SVGPathSegLinetoVerticalAbs.prototype, 'y', { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }); + + class SVGPathSegLinetoVerticalRel extends SVGPathSeg { + constructor(owningPathSegList, y) { + super(SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, 'v', owningPathSegList); + this._y = y; + } + + toString() { + return '[object SVGPathSegLinetoVerticalRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._y; + } + + clone() { + return new SVGPathSegLinetoVerticalRel(undefined, this._y); + } + + } + + Object.defineProperty(SVGPathSegLinetoVerticalRel.prototype, 'y', { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }); + + class SVGPathSegCurvetoCubicSmoothAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y, x2, y2) { + super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, 'S', owningPathSegList); + this._x = x; + this._y = y; + this._x2 = x2; + this._y2 = y2; + } + + toString() { + return '[object SVGPathSegCurvetoCubicSmoothAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); + } + + } + + Object.defineProperties(SVGPathSegCurvetoCubicSmoothAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x2: { + get() { + return this._x2; + }, + + set(x2) { + this._x2 = x2; + + this._segmentChanged(); + }, + + enumerable: true + }, + y2: { + get() { + return this._y2; + }, + + set(y2) { + this._y2 = y2; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoCubicSmoothRel extends SVGPathSeg { + constructor(owningPathSegList, x, y, x2, y2) { + super(SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, 's', owningPathSegList); + this._x = x; + this._y = y; + this._x2 = x2; + this._y2 = y2; + } + + toString() { + return '[object SVGPathSegCurvetoCubicSmoothRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); + } + + } + + Object.defineProperties(SVGPathSegCurvetoCubicSmoothRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + }, + x2: { + get() { + return this._x2; + }, + + set(x2) { + this._x2 = x2; + + this._segmentChanged(); + }, + + enumerable: true + }, + y2: { + get() { + return this._y2; + }, + + set(y2) { + this._y2 = y2; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoQuadraticSmoothAbs extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, 'T', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegCurvetoQuadraticSmoothAbs]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothAbs.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } + }); + + class SVGPathSegCurvetoQuadraticSmoothRel extends SVGPathSeg { + constructor(owningPathSegList, x, y) { + super(SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, 't', owningPathSegList); + this._x = x; + this._y = y; + } + + toString() { + return '[object SVGPathSegCurvetoQuadraticSmoothRel]'; + } + + _asPathString() { + return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; + } + + clone() { + return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); + } + + } + + Object.defineProperties(SVGPathSegCurvetoQuadraticSmoothRel.prototype, { + x: { + get() { + return this._x; + }, + + set(x) { + this._x = x; + + this._segmentChanged(); + }, + + enumerable: true + }, + y: { + get() { + return this._y; + }, + + set(y) { + this._y = y; + + this._segmentChanged(); + }, + + enumerable: true + } + }); // Add createSVGPathSeg* functions to SVGPathElement. + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathElement. + + SVGPathElement.prototype.createSVGPathSegClosePath = function () { + return new SVGPathSegClosePath(undefined); + }; + + SVGPathElement.prototype.createSVGPathSegMovetoAbs = function (x, y) { + return new SVGPathSegMovetoAbs(undefined, x, y); + }; + + SVGPathElement.prototype.createSVGPathSegMovetoRel = function (x, y) { + return new SVGPathSegMovetoRel(undefined, x, y); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoAbs = function (x, y) { + return new SVGPathSegLinetoAbs(undefined, x, y); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoRel = function (x, y) { + return new SVGPathSegLinetoRel(undefined, x, y); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoCubicAbs = function (x, y, x1, y1, x2, y2) { + return new SVGPathSegCurvetoCubicAbs(undefined, x, y, x1, y1, x2, y2); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoCubicRel = function (x, y, x1, y1, x2, y2) { + return new SVGPathSegCurvetoCubicRel(undefined, x, y, x1, y1, x2, y2); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticAbs = function (x, y, x1, y1) { + return new SVGPathSegCurvetoQuadraticAbs(undefined, x, y, x1, y1); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticRel = function (x, y, x1, y1) { + return new SVGPathSegCurvetoQuadraticRel(undefined, x, y, x1, y1); + }; + + SVGPathElement.prototype.createSVGPathSegArcAbs = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) { + return new SVGPathSegArcAbs(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); + }; + + SVGPathElement.prototype.createSVGPathSegArcRel = function (x, y, r1, r2, angle, largeArcFlag, sweepFlag) { + return new SVGPathSegArcRel(undefined, x, y, r1, r2, angle, largeArcFlag, sweepFlag); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoHorizontalAbs = function (x) { + return new SVGPathSegLinetoHorizontalAbs(undefined, x); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoHorizontalRel = function (x) { + return new SVGPathSegLinetoHorizontalRel(undefined, x); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoVerticalAbs = function (y) { + return new SVGPathSegLinetoVerticalAbs(undefined, y); + }; + + SVGPathElement.prototype.createSVGPathSegLinetoVerticalRel = function (y) { + return new SVGPathSegLinetoVerticalRel(undefined, y); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothAbs = function (x, y, x2, y2) { + return new SVGPathSegCurvetoCubicSmoothAbs(undefined, x, y, x2, y2); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoCubicSmoothRel = function (x, y, x2, y2) { + return new SVGPathSegCurvetoCubicSmoothRel(undefined, x, y, x2, y2); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothAbs = function (x, y) { + return new SVGPathSegCurvetoQuadraticSmoothAbs(undefined, x, y); + }; + + SVGPathElement.prototype.createSVGPathSegCurvetoQuadraticSmoothRel = function (x, y) { + return new SVGPathSegCurvetoQuadraticSmoothRel(undefined, x, y); + }; + + if (!('getPathSegAtLength' in SVGPathElement.prototype)) { + // Add getPathSegAtLength to SVGPathElement. + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-__svg__SVGPathElement__getPathSegAtLength + // This polyfill requires SVGPathElement.getTotalLength to implement the distance-along-a-path algorithm. + SVGPathElement.prototype.getPathSegAtLength = function (distance) { + if (distance === undefined || !isFinite(distance)) { + throw new Error('Invalid arguments.'); + } + + const measurementElement = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + measurementElement.setAttribute('d', this.getAttribute('d')); + let lastPathSegment = measurementElement.pathSegList.numberOfItems - 1; // If the path is empty, return 0. + + if (lastPathSegment <= 0) { + return 0; + } + + do { + measurementElement.pathSegList.removeItem(lastPathSegment); + + if (distance > measurementElement.getTotalLength()) { + break; + } + + lastPathSegment--; + } while (lastPathSegment > 0); + + return lastPathSegment; + }; + } + + window.SVGPathSeg = SVGPathSeg; + window.SVGPathSegClosePath = SVGPathSegClosePath; + window.SVGPathSegMovetoAbs = SVGPathSegMovetoAbs; + window.SVGPathSegMovetoRel = SVGPathSegMovetoRel; + window.SVGPathSegLinetoAbs = SVGPathSegLinetoAbs; + window.SVGPathSegLinetoRel = SVGPathSegLinetoRel; + window.SVGPathSegCurvetoCubicAbs = SVGPathSegCurvetoCubicAbs; + window.SVGPathSegCurvetoCubicRel = SVGPathSegCurvetoCubicRel; + window.SVGPathSegCurvetoQuadraticAbs = SVGPathSegCurvetoQuadraticAbs; + window.SVGPathSegCurvetoQuadraticRel = SVGPathSegCurvetoQuadraticRel; + window.SVGPathSegArcAbs = SVGPathSegArcAbs; + window.SVGPathSegArcRel = SVGPathSegArcRel; + window.SVGPathSegLinetoHorizontalAbs = SVGPathSegLinetoHorizontalAbs; + window.SVGPathSegLinetoHorizontalRel = SVGPathSegLinetoHorizontalRel; + window.SVGPathSegLinetoVerticalAbs = SVGPathSegLinetoVerticalAbs; + window.SVGPathSegLinetoVerticalRel = SVGPathSegLinetoVerticalRel; + window.SVGPathSegCurvetoCubicSmoothAbs = SVGPathSegCurvetoCubicSmoothAbs; + window.SVGPathSegCurvetoCubicSmoothRel = SVGPathSegCurvetoCubicSmoothRel; + window.SVGPathSegCurvetoQuadraticSmoothAbs = SVGPathSegCurvetoQuadraticSmoothAbs; + window.SVGPathSegCurvetoQuadraticSmoothRel = SVGPathSegCurvetoQuadraticSmoothRel; + } // Checking for SVGPathSegList in window checks for the case of an implementation without the + // SVGPathSegList API. + // The second check for appendItem is specific to Firefox 59+ which removed only parts of the + // SVGPathSegList API (e.g., appendItem). In this case we need to re-implement the entire API + // so the polyfill data (i.e., _list) is used throughout. + + + if (!('SVGPathSegList' in window) || !('appendItem' in window.SVGPathSegList.prototype)) { + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSegList + class SVGPathSegList { + constructor(pathElement) { + this._pathElement = pathElement; + this._list = this._parsePath(this._pathElement.getAttribute('d')); // Use a MutationObserver to catch changes to the path's "d" attribute. + + this._mutationObserverConfig = { + attributes: true, + attributeFilter: ['d'] + }; + this._pathElementMutationObserver = new MutationObserver(this._updateListFromPathMutations.bind(this)); + + this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); + } // Process any pending mutations to the path element and update the list as needed. + // This should be the first call of all public functions and is needed because + // MutationObservers are not synchronous so we can have pending asynchronous mutations. + + + _checkPathSynchronizedToList() { + this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); + } + + _updateListFromPathMutations(mutationRecords) { + if (!this._pathElement) { + return; + } + + let hasPathMutations = false; + mutationRecords.forEach(record => { + if (record.attributeName === 'd') { + hasPathMutations = true; + } + }); + + if (hasPathMutations) { + this._list = this._parsePath(this._pathElement.getAttribute('d')); + } + } // Serialize the list and update the path's 'd' attribute. + + + _writeListToPath() { + this._pathElementMutationObserver.disconnect(); + + this._pathElement.setAttribute('d', SVGPathSegList._pathSegArrayAsString(this._list)); + + this._pathElementMutationObserver.observe(this._pathElement, this._mutationObserverConfig); + } // When a path segment changes the list needs to be synchronized back to the path element. + + + segmentChanged(pathSeg) { + this._writeListToPath(); + } + + clear() { + this._checkPathSynchronizedToList(); + + this._list.forEach(pathSeg => { + pathSeg._owningPathSegList = null; + }); + + this._list = []; + + this._writeListToPath(); + } + + initialize(newItem) { + this._checkPathSynchronizedToList(); + + this._list = [newItem]; + newItem._owningPathSegList = this; + + this._writeListToPath(); + + return newItem; + } + + _checkValidIndex(index) { + if (isNaN(index) || index < 0 || index >= this.numberOfItems) { + throw new Error('INDEX_SIZE_ERR'); + } + } + + getItem(index) { + this._checkPathSynchronizedToList(); + + this._checkValidIndex(index); + + return this._list[index]; + } + + insertItemBefore(newItem, index) { + this._checkPathSynchronizedToList(); // Spec: If the index is greater than or equal to numberOfItems, then the new item is appended to the end of the list. + + + if (index > this.numberOfItems) { + index = this.numberOfItems; + } + + if (newItem._owningPathSegList) { + // SVG2 spec says to make a copy. + newItem = newItem.clone(); + } + + this._list.splice(index, 0, newItem); + + newItem._owningPathSegList = this; + + this._writeListToPath(); + + return newItem; + } + + replaceItem(newItem, index) { + this._checkPathSynchronizedToList(); + + if (newItem._owningPathSegList) { + // SVG2 spec says to make a copy. + newItem = newItem.clone(); + } + + this._checkValidIndex(index); + + this._list[index] = newItem; + newItem._owningPathSegList = this; + + this._writeListToPath(); + + return newItem; + } + + removeItem(index) { + this._checkPathSynchronizedToList(); + + this._checkValidIndex(index); + + const item = this._list[index]; + + this._list.splice(index, 1); + + this._writeListToPath(); + + return item; + } + + appendItem(newItem) { + this._checkPathSynchronizedToList(); + + if (newItem._owningPathSegList) { + // SVG2 spec says to make a copy. + newItem = newItem.clone(); + } + + this._list.push(newItem); + + newItem._owningPathSegList = this; // TODO: Optimize this to just append to the existing attribute. + + this._writeListToPath(); + + return newItem; + } // This closely follows SVGPathParser::parsePath from Source/core/svg/SVGPathParser.cpp. + + + _parsePath(string) { + if (!string || !string.length) { + return []; + } + + const owningPathSegList = this; // eslint-disable-line consistent-this + + class Builder { + constructor() { + this.pathSegList = []; + } + + appendSegment(pathSeg) { + this.pathSegList.push(pathSeg); + } + + } + + class Source { + constructor(string) { + this._string = string; + this._currentIndex = 0; + this._endIndex = this._string.length; + this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN; + + this._skipOptionalSpaces(); + } + + _isCurrentSpace() { + const character = this._string[this._currentIndex]; + return character <= ' ' && (character === ' ' || character === '\n' || character === '\t' || character === '\r' || character === '\f'); + } + + _skipOptionalSpaces() { + while (this._currentIndex < this._endIndex && this._isCurrentSpace()) { + this._currentIndex++; + } + + return this._currentIndex < this._endIndex; + } + + _skipOptionalSpacesOrDelimiter() { + if (this._currentIndex < this._endIndex && !this._isCurrentSpace() && this._string.charAt(this._currentIndex) !== ',') { + return false; + } + + if (this._skipOptionalSpaces()) { + if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === ',') { + this._currentIndex++; + + this._skipOptionalSpaces(); + } + } + + return this._currentIndex < this._endIndex; + } + + hasMoreData() { + return this._currentIndex < this._endIndex; + } + + peekSegmentType() { + const lookahead = this._string[this._currentIndex]; + return this._pathSegTypeFromChar(lookahead); + } + + _pathSegTypeFromChar(lookahead) { + switch (lookahead) { + case 'Z': + case 'z': + return SVGPathSeg.PATHSEG_CLOSEPATH; + + case 'M': + return SVGPathSeg.PATHSEG_MOVETO_ABS; + + case 'm': + return SVGPathSeg.PATHSEG_MOVETO_REL; + + case 'L': + return SVGPathSeg.PATHSEG_LINETO_ABS; + + case 'l': + return SVGPathSeg.PATHSEG_LINETO_REL; + + case 'C': + return SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS; + + case 'c': + return SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL; + + case 'Q': + return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS; + + case 'q': + return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL; + + case 'A': + return SVGPathSeg.PATHSEG_ARC_ABS; + + case 'a': + return SVGPathSeg.PATHSEG_ARC_REL; + + case 'H': + return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS; + + case 'h': + return SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL; + + case 'V': + return SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS; + + case 'v': + return SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL; + + case 'S': + return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS; + + case 's': + return SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL; + + case 'T': + return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS; + + case 't': + return SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL; + + default: + return SVGPathSeg.PATHSEG_UNKNOWN; + } + } + + _nextCommandHelper(lookahead, previousCommand) { + // Check for remaining coordinates in the current command. + if ((lookahead === '+' || lookahead === '-' || lookahead === '.' || lookahead >= '0' && lookahead <= '9') && previousCommand !== SVGPathSeg.PATHSEG_CLOSEPATH) { + if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_ABS) { + return SVGPathSeg.PATHSEG_LINETO_ABS; + } + + if (previousCommand === SVGPathSeg.PATHSEG_MOVETO_REL) { + return SVGPathSeg.PATHSEG_LINETO_REL; + } + + return previousCommand; + } + + return SVGPathSeg.PATHSEG_UNKNOWN; + } + + initialCommandIsMoveTo() { + // If the path is empty it is still valid, so return true. + if (!this.hasMoreData()) { + return true; + } + + const command = this.peekSegmentType(); // Path must start with moveTo. + + return command === SVGPathSeg.PATHSEG_MOVETO_ABS || command === SVGPathSeg.PATHSEG_MOVETO_REL; + } // Parse a number from an SVG path. This very closely follows genericParseNumber(...) from Source/core/svg/SVGParserUtilities.cpp. + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-PathDataBNF + + + _parseNumber() { + let exponent = 0; + let integer = 0; + let frac = 1; + let decimal = 0; + let sign = 1; + let expsign = 1; + const startIndex = this._currentIndex; + + this._skipOptionalSpaces(); // Read the sign. + + + if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '+') { + this._currentIndex++; + } else if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '-') { + this._currentIndex++; + sign = -1; + } + + if (this._currentIndex === this._endIndex || (this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') && this._string.charAt(this._currentIndex) !== '.') { + // The first character of a number must be one of [0-9+-.]. + return undefined; + } // Read the integer part, build right-to-left. + + + const startIntPartIndex = this._currentIndex; + + while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') { + this._currentIndex++; // Advance to first non-digit. + } + + if (this._currentIndex !== startIntPartIndex) { + let scanIntPartIndex = this._currentIndex - 1; + let multiplier = 1; + + while (scanIntPartIndex >= startIntPartIndex) { + integer += multiplier * (this._string.charAt(scanIntPartIndex--) - '0'); + multiplier *= 10; + } + } // Read the decimals. + + + if (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) === '.') { + this._currentIndex++; // There must be a least one digit following the . + + if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') { + return undefined; + } + + while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') { + frac *= 10; + decimal += (this._string.charAt(this._currentIndex) - '0') / frac; + this._currentIndex += 1; + } + } // Read the exponent part. + + + if (this._currentIndex !== startIndex && this._currentIndex + 1 < this._endIndex && (this._string.charAt(this._currentIndex) === 'e' || this._string.charAt(this._currentIndex) === 'E') && this._string.charAt(this._currentIndex + 1) !== 'x' && this._string.charAt(this._currentIndex + 1) !== 'm') { + this._currentIndex++; // Read the sign of the exponent. + + if (this._string.charAt(this._currentIndex) === '+') { + this._currentIndex++; + } else if (this._string.charAt(this._currentIndex) === '-') { + this._currentIndex++; + expsign = -1; + } // There must be an exponent. + + + if (this._currentIndex >= this._endIndex || this._string.charAt(this._currentIndex) < '0' || this._string.charAt(this._currentIndex) > '9') { + return undefined; + } + + while (this._currentIndex < this._endIndex && this._string.charAt(this._currentIndex) >= '0' && this._string.charAt(this._currentIndex) <= '9') { + exponent *= 10; + exponent += this._string.charAt(this._currentIndex) - '0'; + this._currentIndex++; + } + } + + let number = integer + decimal; + number *= sign; + + if (exponent) { + number *= 10 ** (expsign * exponent); + } + + if (startIndex === this._currentIndex) { + return undefined; + } + + this._skipOptionalSpacesOrDelimiter(); + + return number; + } + + _parseArcFlag() { + if (this._currentIndex >= this._endIndex) { + return undefined; + } + + let flag = false; + + const flagChar = this._string.charAt(this._currentIndex++); + + if (flagChar === '0') { + flag = false; + } else if (flagChar === '1') { + flag = true; + } else { + return undefined; + } + + this._skipOptionalSpacesOrDelimiter(); + + return flag; + } + + parseSegment() { + const lookahead = this._string[this._currentIndex]; + + let command = this._pathSegTypeFromChar(lookahead); + + if (command === SVGPathSeg.PATHSEG_UNKNOWN) { + // Possibly an implicit command. Not allowed if this is the first command. + if (this._previousCommand === SVGPathSeg.PATHSEG_UNKNOWN) { + return null; + } + + command = this._nextCommandHelper(lookahead, this._previousCommand); + + if (command === SVGPathSeg.PATHSEG_UNKNOWN) { + return null; + } + } else { + this._currentIndex++; + } + + this._previousCommand = command; + + switch (command) { + case SVGPathSeg.PATHSEG_MOVETO_REL: + return new SVGPathSegMovetoRel(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_MOVETO_ABS: + return new SVGPathSegMovetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_REL: + return new SVGPathSegLinetoRel(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_ABS: + return new SVGPathSegLinetoAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL: + return new SVGPathSegLinetoHorizontalRel(owningPathSegList, this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS: + return new SVGPathSegLinetoHorizontalAbs(owningPathSegList, this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL: + return new SVGPathSegLinetoVerticalRel(owningPathSegList, this._parseNumber()); + + case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS: + return new SVGPathSegLinetoVerticalAbs(owningPathSegList, this._parseNumber()); + + case SVGPathSeg.PATHSEG_CLOSEPATH: + this._skipOptionalSpaces(); + + return new SVGPathSegClosePath(owningPathSegList); + + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + x2: this._parseNumber(), + y2: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoCubicRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2); + } + + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + x2: this._parseNumber(), + y2: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoCubicAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.x2, points.y2); + } + + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL: + { + const points = { + x2: this._parseNumber(), + y2: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, points.x, points.y, points.x2, points.y2); + } + + case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: + { + const points = { + x2: this._parseNumber(), + y2: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, points.x, points.y, points.x2, points.y2); + } + + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, points.x, points.y, points.x1, points.y1); + } + + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegCurvetoQuadraticAbs(owningPathSegList, points.x, points.y, points.x1, points.y1); + } + + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL: + return new SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS: + return new SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, this._parseNumber(), this._parseNumber()); + + case SVGPathSeg.PATHSEG_ARC_REL: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + arcAngle: this._parseNumber(), + arcLarge: this._parseArcFlag(), + arcSweep: this._parseArcFlag(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegArcRel(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep); + } + + case SVGPathSeg.PATHSEG_ARC_ABS: + { + const points = { + x1: this._parseNumber(), + y1: this._parseNumber(), + arcAngle: this._parseNumber(), + arcLarge: this._parseArcFlag(), + arcSweep: this._parseArcFlag(), + x: this._parseNumber(), + y: this._parseNumber() + }; + return new SVGPathSegArcAbs(owningPathSegList, points.x, points.y, points.x1, points.y1, points.arcAngle, points.arcLarge, points.arcSweep); + } + + default: + throw new Error('Unknown path seg type.'); + } + } + + } + + const builder = new Builder(); + const source = new Source(string); + + if (!source.initialCommandIsMoveTo()) { + return []; + } + + while (source.hasMoreData()) { + const pathSeg = source.parseSegment(); + + if (!pathSeg) { + return []; + } + + builder.appendSegment(pathSeg); + } + + return builder.pathSegList; + } // STATIC + + + static _pathSegArrayAsString(pathSegArray) { + let string = ''; + let first = true; + pathSegArray.forEach(pathSeg => { + if (first) { + first = false; + string += pathSeg._asPathString(); + } else { + string += ' ' + pathSeg._asPathString(); + } + }); + return string; + } + + } + + SVGPathSegList.prototype.classname = 'SVGPathSegList'; + Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', { + get() { + this._checkPathSynchronizedToList(); + + return this._list.length; + }, + + enumerable: true + }); // Add the pathSegList accessors to SVGPathElement. + // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGAnimatedPathData + + Object.defineProperties(SVGPathElement.prototype, { + pathSegList: { + get() { + if (!this._pathSegList) { + this._pathSegList = new SVGPathSegList(this); + } + + return this._pathSegList; + }, + + enumerable: true + }, + // TODO: The following are not implemented and simply return SVGPathElement.pathSegList. + normalizedPathSegList: { + get() { + return this.pathSegList; + }, + + enumerable: true + }, + animatedPathSegList: { + get() { + return this.pathSegList; + }, + + enumerable: true + }, + animatedNormalizedPathSegList: { + get() { + return this.pathSegList; + }, + + enumerable: true + } + }); + window.SVGPathSegList = SVGPathSegList; + } + })(); /** * @file ext-closepath.js @@ -45,123 +2122,113 @@ var svgEditorExtension_closepath = (function () { * @copyright 2010 Jeff Schiller * */ - // This extension adds a simple button to the contextual panel for paths // The button toggles whether the path is open or closed + var extClosepath = { name: 'closepath', - init: function init(_ref) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var importLocale, $, strings, svgEditor, selElems, updateButton, showPanel, toggleClosed, buttons; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - importLocale = _ref.importLocale, $ = _ref.$; - _context.next = 3; - return importLocale(); + async init({ + importLocale, + $ + }) { + const strings = await importLocale(); + const svgEditor = this; + let selElems; - case 3: - strings = _context.sent; - svgEditor = _this; + const updateButton = function (path) { + const seglist = path.pathSegList, + closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1, + showbutton = closed ? '#tool_openpath' : '#tool_closepath', + hidebutton = closed ? '#tool_closepath' : '#tool_openpath'; + $(hidebutton).hide(); + $(showbutton).show(); + }; - updateButton = function updateButton(path) { - var seglist = path.pathSegList, - closed = seglist.getItem(seglist.numberOfItems - 1).pathSegType === 1, - showbutton = closed ? '#tool_openpath' : '#tool_closepath', - hidebutton = closed ? '#tool_closepath' : '#tool_openpath'; - $(hidebutton).hide(); - $(showbutton).show(); - }; + const showPanel = function (on) { + $('#closepath_panel').toggle(on); - showPanel = function showPanel(on) { - $('#closepath_panel').toggle(on); + if (on) { + const path = selElems[0]; - if (on) { - var path = selElems[0]; + if (path) { + updateButton(path); + } + } + }; - if (path) { - updateButton(path); - } - } - }; + const toggleClosed = function () { + const path = selElems[0]; - toggleClosed = function toggleClosed() { - var path = selElems[0]; + if (path) { + const seglist = path.pathSegList, + last = seglist.numberOfItems - 1; // is closed - if (path) { - var seglist = path.pathSegList, - last = seglist.numberOfItems - 1; // is closed + if (seglist.getItem(last).pathSegType === 1) { + seglist.removeItem(last); + } else { + seglist.appendItem(path.createSVGPathSegClosePath()); + } - if (seglist.getItem(last).pathSegType === 1) { - seglist.removeItem(last); - } else { - seglist.appendItem(path.createSVGPathSegClosePath()); - } + updateButton(path); + } + }; - updateButton(path); - } - }; + const buttons = [{ + id: 'tool_openpath', + icon: svgEditor.curConfig.extIconsPath + 'openpath.png', + type: 'context', + panel: 'closepath_panel', + events: { + click() { + toggleClosed(); + } - buttons = [{ - id: 'tool_openpath', - icon: svgEditor.curConfig.extIconsPath + 'openpath.png', - type: 'context', - panel: 'closepath_panel', - events: { - click: function click() { - toggleClosed(); - } - } - }, { - id: 'tool_closepath', - icon: svgEditor.curConfig.extIconsPath + 'closepath.png', - type: 'context', - panel: 'closepath_panel', - events: { - click: function click() { - toggleClosed(); - } - } - }]; - return _context.abrupt("return", { - name: strings.name, - svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg', - buttons: strings.buttons.map(function (button, i) { - return Object.assign(buttons[i], button); - }), - callback: function callback() { - $('#closepath_panel').hide(); - }, - selectedChanged: function selectedChanged(opts) { - selElems = opts.elems; - var i = selElems.length; + } + }, { + id: 'tool_closepath', + icon: svgEditor.curConfig.extIconsPath + 'closepath.png', + type: 'context', + panel: 'closepath_panel', + events: { + click() { + toggleClosed(); + } - while (i--) { - var elem = selElems[i]; + } + }]; + return { + name: strings.name, + svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg', + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }), - if (elem && elem.tagName === 'path') { - if (opts.selectedElement && !opts.multiselected) { - showPanel(true); - } else { - showPanel(false); - } - } else { - showPanel(false); - } - } - } - }); + callback() { + $('#closepath_panel').hide(); + }, - case 10: - case "end": - return _context.stop(); + selectedChanged(opts) { + selElems = opts.elems; + let i = selElems.length; + + while (i--) { + const elem = selElems[i]; + + if (elem && elem.tagName === 'path') { + if (opts.selectedElement && !opts.multiselected) { + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); } } - }, _callee); - }))(); + } + + }; } + }; return extClosepath; diff --git a/dist/extensions/ext-connector.js b/dist/extensions/ext-connector.js index 69fcca25..3116c1c4 100644 --- a/dist/extensions/ext-connector.js +++ b/dist/extensions/ext-connector.js @@ -1,42 +1,6 @@ var svgEditorExtension_connector = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /* eslint-disable unicorn/no-fn-reference-in-iterator */ /** @@ -49,644 +13,691 @@ var svgEditorExtension_connector = (function () { */ var extConnector = { name: 'connector', - init: function init(S) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var svgEditor, svgCanvas, getElem, $, svgroot, importLocale, addElem, selManager, connSel, elData, strings, startX, startY, curLine, startElem, endElem, seNs, svgcontent, started, connections, selElems, getBBintersect, getOffset, showPanel, setPoint, updateLine, findConnectors, updateConnectors, init, buttons; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - init = function _init() { - // Make sure all connectors have data set - $(svgcontent).find('*').each(function () { - var conn = this.getAttributeNS(seNs, 'connector'); - - if (conn) { - this.setAttribute('class', connSel.substr(1)); - var connData = conn.split(' '); - var sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]); - var ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]); - $(this).data('c_start', connData[0]).data('c_end', connData[1]).data('start_bb', sbb).data('end_bb', ebb); - svgCanvas.getEditorNS(true); - } - }); // updateConnectors(); - }; - - updateConnectors = function _updateConnectors(elems) { - // Updates connector lines based on selected elements - // Is not used on mousemove, as it runs getStrokedBBox every time, - // which isn't necessary there. - findConnectors(elems); - - if (connections.length) { - // Update line with element - var i = connections.length; - - while (i--) { - var conn = connections[i]; - var line = conn.connector; - var elem = conn.elem; // const sw = line.getAttribute('stroke-width') * 5; - - var pre = conn.is_start ? 'start' : 'end'; // Update bbox for this element - - var bb = svgCanvas.getStrokedBBox([elem]); - bb.x = conn.start_x; - bb.y = conn.start_y; - elData(line, pre + '_bb', bb); - /* const addOffset = */ - - elData(line, pre + '_off'); - var altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element - - var bb2 = elData(line, altPre + '_bb'); - var srcX = bb2.x + bb2.width / 2; - var srcY = bb2.y + bb2.height / 2; // Set point of element being moved - - var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); - setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element - - var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line)); - setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); // Update points attribute manually for webkit - - if (navigator.userAgent.includes('AppleWebKit')) { - var pts = line.points; - var len = pts.numberOfItems; - var ptArr = []; - - for (var j = 0; j < len; j++) { - pt = pts.getItem(j); - ptArr[j] = pt.x + ',' + pt.y; - } - - line.setAttribute('points', ptArr.join(' ')); - } - } - } - }; - - findConnectors = function _findConnectors() { - var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selElems; - var connectors = $(svgcontent).find(connSel); - connections = []; // Loop through connectors to see if one is connected to the element - - connectors.each(function () { - var addThis; - /** - * - * @returns {void} - */ - - function add() { - if (elems.includes(this)) { - // Pretend this element is selected - addThis = true; - } - } // Grab the ends - - - var parts = []; - ['start', 'end'].forEach(function (pos, i) { - var key = 'c_' + pos; - var part = elData(this, key); - - if (part === null || part === undefined) { - // Does this ever return nullish values? - part = document.getElementById(this.attributes['se:connector'].value.split(' ')[i]); - elData(this, 'c_' + pos, part.id); - elData(this, pos + '_bb', svgCanvas.getStrokedBBox([part])); - } else part = document.getElementById(part); - - parts.push(part); - }, this); - - for (var i = 0; i < 2; i++) { - var cElem = parts[i]; - addThis = false; // The connected element might be part of a selected group - - $(cElem).parents().each(add); - - if (!cElem || !cElem.parentNode) { - $(this).remove(); - continue; - } - - if (elems.includes(cElem) || addThis) { - var bb = svgCanvas.getStrokedBBox([cElem]); - connections.push({ - elem: cElem, - connector: this, - is_start: i === 0, - start_x: bb.x, - start_y: bb.y - }); - } - } - }); - }; - - updateLine = function _updateLine(diffX, diffY) { - // Update line with element - var i = connections.length; - - while (i--) { - var conn = connections[i]; - var line = conn.connector; // const {elem} = conn; - - var pre = conn.is_start ? 'start' : 'end'; // const sw = line.getAttribute('stroke-width') * 5; - // Update bbox for this element - - var bb = elData(line, pre + '_bb'); - bb.x = conn.start_x + diffX; - bb.y = conn.start_y + diffY; - elData(line, pre + '_bb', bb); - var altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element - - var bb2 = elData(line, altPre + '_bb'); - var srcX = bb2.x + bb2.width / 2; - var srcY = bb2.y + bb2.height / 2; // Set point of element being moved - - var pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0 - - setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element - - var pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line)); - setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); - } - }; - - setPoint = function _setPoint(elem, pos, x, y, setMid) { - var pts = elem.points; - var pt = svgroot.createSVGPoint(); - pt.x = x; - pt.y = y; - - if (pos === 'end') { - pos = pts.numberOfItems - 1; - } // TODO: Test for this on init, then use alt only if needed - - - try { - pts.replaceItem(pt, pos); - } catch (err) { - // Should only occur in FF which formats points attr as "n,n n,n", so just split - var ptArr = elem.getAttribute('points').split(' '); - - for (var i = 0; i < ptArr.length; i++) { - if (i === pos) { - ptArr[i] = x + ',' + y; - } - } - - elem.setAttribute('points', ptArr.join(' ')); - } - - if (setMid) { - // Add center point - var ptStart = pts.getItem(0); - var ptEnd = pts.getItem(pts.numberOfItems - 1); - setPoint(elem, 1, (ptEnd.x + ptStart.x) / 2, (ptEnd.y + ptStart.y) / 2); - } - }; - - showPanel = function _showPanel(on) { - var connRules = $('#connector_rules'); - - if (!connRules.length) { - connRules = $('').appendTo('head'); - } - - connRules.text(!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }'); - $('#connector_panel').toggle(on); - }; - - getOffset = function _getOffset(side, line) { - var giveOffset = line.getAttribute('marker-' + side); // const giveOffset = $(line).data(side+'_off'); - // TODO: Make this number (5) be based on marker width/height - - var size = line.getAttribute('stroke-width') * 5; - return giveOffset ? size : 0; - }; - - getBBintersect = function _getBBintersect(x, y, bb, offset) { - if (offset) { - offset -= 0; - bb = $.extend({}, bb); - bb.width += offset; - bb.height += offset; - bb.x -= offset / 2; - bb.y -= offset / 2; - } - - var midX = bb.x + bb.width / 2; - var midY = bb.y + bb.height / 2; - var lenX = x - midX; - var lenY = y - midY; - var slope = Math.abs(lenY / lenX); - var ratio; - - if (slope < bb.height / bb.width) { - ratio = bb.width / 2 / Math.abs(lenX); - } else { - ratio = lenY ? bb.height / 2 / Math.abs(lenY) : 0; - } - - return { - x: midX + lenX * ratio, - y: midY + lenY * ratio - }; - }; - - svgEditor = _this; - svgCanvas = svgEditor.canvas; - getElem = svgCanvas.getElem; - $ = S.$, svgroot = S.svgroot, importLocale = S.importLocale, addElem = svgCanvas.addSVGElementFromJson, selManager = S.selectorManager, connSel = '.se_connector', elData = $.data; - _context.next = 14; - return importLocale(); - - case 14: - strings = _context.sent; - svgcontent = S.svgcontent, started = false, connections = [], selElems = []; - /** - * - * @param {Float} x - * @param {Float} y - * @param {module:utilities.BBoxObject} bb - * @param {Float} offset - * @returns {module:math.XYObject} - */ - - // Do once - (function () { - var gse = svgCanvas.groupSelectedElements; - - svgCanvas.groupSelectedElements = function () { - svgCanvas.removeFromSelection($(connSel).toArray()); - - for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - - return gse.apply(this, args); - }; - - var mse = svgCanvas.moveSelectedElements; - - svgCanvas.moveSelectedElements = function () { - for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; - } - - var cmd = mse.apply(this, args); - updateConnectors(); - return cmd; - }; - - seNs = svgCanvas.getEditorNS(); - })(); - /** - * Do on reset. - * @returns {void} - */ - - - // $(svgroot).parent().mousemove(function (e) { - // // if (started - // // || svgCanvas.getMode() !== 'connector' - // // || e.target.parentNode.parentNode !== svgcontent) return; - // - // console.log('y') - // // if (e.target.parentNode.parentNode === svgcontent) { - // // - // // } - // }); - buttons = [{ - id: 'mode_connect', - type: 'mode', - icon: svgEditor.curConfig.imgPath + 'cut.png', - includeWith: { - button: '#tool_line', - isDefault: false, - position: 1 - }, - events: { - click: function click() { - svgCanvas.setMode('connector'); - } - } - }]; - return _context.abrupt("return", { - name: strings.name, - svgicons: svgEditor.curConfig.imgPath + 'conn.svg', - buttons: strings.buttons.map(function (button, i) { - return Object.assign(buttons[i], button); - }), - - /* async */ - addLangData: function addLangData(_ref) { - var lang = _ref.lang; - // , importLocale: importLoc - return { - data: strings.langList - }; - }, - mouseDown: function mouseDown(opts) { - var e = opts.event; - startX = opts.start_x; - startY = opts.start_y; - var mode = svgCanvas.getMode(); - var initStroke = svgEditor.curConfig.initStroke; - - if (mode === 'connector') { - if (started) { - return undefined; - } - - var mouseTarget = e.target; - var parents = $(mouseTarget).parents(); - - if ($.inArray(svgcontent, parents) !== -1) { - // Connectable element - // If child of foreignObject, use parent - var fo = $(mouseTarget).closest('foreignObject'); - startElem = fo.length ? fo[0] : mouseTarget; // Get center of source element - - var bb = svgCanvas.getStrokedBBox([startElem]); - var x = bb.x + bb.width / 2; - var y = bb.y + bb.height / 2; - started = true; - curLine = addElem({ - element: 'polyline', - attr: { - id: svgCanvas.getNextId(), - points: x + ',' + y + ' ' + x + ',' + y + ' ' + startX + ',' + startY, - stroke: '#' + initStroke.color, - 'stroke-width': !startElem.stroke_width || startElem.stroke_width === 0 ? initStroke.width : startElem.stroke_width, - fill: 'none', - opacity: initStroke.opacity, - style: 'pointer-events:none' - } - }); - elData(curLine, 'start_bb', bb); - } - - return { - started: true - }; - } - - if (mode === 'select') { - findConnectors(); - } - - return undefined; - }, - mouseMove: function mouseMove(opts) { - var zoom = svgCanvas.getZoom(); // const e = opts.event; - - var x = opts.mouse_x / zoom; - var y = opts.mouse_y / zoom; - var diffX = x - startX, - diffY = y - startY; - var mode = svgCanvas.getMode(); - - if (mode === 'connector' && started) { - // const sw = curLine.getAttribute('stroke-width') * 3; - // Set start point (adjusts based on bb) - var pt = getBBintersect(x, y, elData(curLine, 'start_bb'), getOffset('start', curLine)); - startX = pt.x; - startY = pt.y; - setPoint(curLine, 0, pt.x, pt.y, true); // Set end point - - setPoint(curLine, 'end', x, y, true); - } else if (mode === 'select') { - var slen = selElems.length; - - while (slen--) { - var elem = selElems[slen]; // Look for selected connector elements - - if (elem && elData(elem, 'c_start')) { - // Remove the "translate" transform given to move - svgCanvas.removeFromSelection([elem]); - svgCanvas.getTransformList(elem).clear(); - } - } - - if (connections.length) { - updateLine(diffX, diffY); - } - } - }, - mouseUp: function mouseUp(opts) { - // const zoom = svgCanvas.getZoom(); - var e = opts.event; // , x = opts.mouse_x / zoom, - // , y = opts.mouse_y / zoom, - - var mouseTarget = e.target; - - if (svgCanvas.getMode() !== 'connector') { - return undefined; - } - - var fo = $(mouseTarget).closest('foreignObject'); - - if (fo.length) { - mouseTarget = fo[0]; - } - - var parents = $(mouseTarget).parents(); - - if (mouseTarget === startElem) { - // Start line through click - started = true; - return { - keep: true, - element: null, - started: started - }; - } - - if ($.inArray(svgcontent, parents) === -1) { - // Not a valid target element, so remove line - $(curLine).remove(); - started = false; - return { - keep: false, - element: null, - started: started - }; - } // Valid end element - - - endElem = mouseTarget; - var startId = startElem.id, - endId = endElem.id; - var connStr = startId + ' ' + endId; - var altStr = endId + ' ' + startId; // Don't create connector if one already exists - - var dupe = $(svgcontent).find(connSel).filter(function () { - var conn = this.getAttributeNS(seNs, 'connector'); - - if (conn === connStr || conn === altStr) { - return true; - } - - return false; - }); - - if (dupe.length) { - $(curLine).remove(); - return { - keep: false, - element: null, - started: false - }; - } - - var bb = svgCanvas.getStrokedBBox([endElem]); - var pt = getBBintersect(startX, startY, bb, getOffset('start', curLine)); - setPoint(curLine, 'end', pt.x, pt.y, true); - $(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb); - seNs = svgCanvas.getEditorNS(true); - curLine.setAttributeNS(seNs, 'se:connector', connStr); - curLine.setAttribute('class', connSel.substr(1)); - curLine.setAttribute('opacity', 1); - svgCanvas.addToSelection([curLine]); - svgCanvas.moveToBottomSelectedElement(); - selManager.requestSelector(curLine).showGrips(false); - started = false; - return { - keep: true, - element: curLine, - started: started - }; - }, - selectedChanged: function selectedChanged(opts) { - // TODO: Find better way to skip operations if no connectors are in use - if (!$(svgcontent).find(connSel).length) { - return; - } - - if (svgCanvas.getMode() === 'connector') { - svgCanvas.setMode('select'); - } // Use this to update the current selected elements - - - selElems = opts.elems; - var i = selElems.length; - - while (i--) { - var elem = selElems[i]; - - if (elem && elData(elem, 'c_start')) { - selManager.requestSelector(elem).showGrips(false); - - if (opts.selectedElement && !opts.multiselected) { - // TODO: Set up context tools and hide most regular line tools - showPanel(true); - } else { - showPanel(false); - } - } else { - showPanel(false); - } - } - - updateConnectors(); - }, - elementChanged: function elementChanged(opts) { - var elem = opts.elems[0]; - if (!elem) return; - - if (elem.tagName === 'svg' && elem.id === 'svgcontent') { - // Update svgcontent (can change on import) - svgcontent = elem; - init(); - } // Has marker, so change offset - - - if (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end')) { - var start = elem.getAttribute('marker-start'); - var mid = elem.getAttribute('marker-mid'); - var end = elem.getAttribute('marker-end'); - curLine = elem; - $(elem).data('start_off', Boolean(start)).data('end_off', Boolean(end)); - - if (elem.tagName === 'line' && mid) { - // Convert to polyline to accept mid-arrow - var x1 = Number(elem.getAttribute('x1')); - var x2 = Number(elem.getAttribute('x2')); - var y1 = Number(elem.getAttribute('y1')); - var y2 = Number(elem.getAttribute('y2')); - var _elem = elem, - id = _elem.id; - var midPt = ' ' + (x1 + x2) / 2 + ',' + (y1 + y2) / 2 + ' '; - var pline = addElem({ - element: 'polyline', - attr: { - points: x1 + ',' + y1 + midPt + x2 + ',' + y2, - stroke: elem.getAttribute('stroke'), - 'stroke-width': elem.getAttribute('stroke-width'), - 'marker-mid': mid, - fill: 'none', - opacity: elem.getAttribute('opacity') || 1 - } - }); - $(elem).after(pline).remove(); - svgCanvas.clearSelection(); - pline.id = id; - svgCanvas.addToSelection([pline]); - elem = pline; - } - } // Update line if it's a connector - - - if (elem.getAttribute('class') === connSel.substr(1)) { - var _start = getElem(elData(elem, 'c_start')); - - updateConnectors([_start]); - } else { - updateConnectors(); - } - }, - IDsUpdated: function IDsUpdated(input) { - var remove = []; - input.elems.forEach(function (elem) { - if ('se:connector' in elem.attr) { - elem.attr['se:connector'] = elem.attr['se:connector'].split(' ').map(function (oldID) { - return input.changes[oldID]; - }).join(' '); // Check validity - the field would be something like 'svg_21 svg_22', but - // if one end is missing, it would be 'svg_21' and therefore fail this test - - if (!/. ./.test(elem.attr['se:connector'])) { - remove.push(elem.attr.id); - } - } - }); - return { - remove: remove - }; - }, - toolButtonStateUpdate: function toolButtonStateUpdate(opts) { - if (opts.nostroke) { - if ($('#mode_connect').hasClass('tool_button_current')) { - svgEditor.clickSelect(); - } - } - - $('#mode_connect').toggleClass('disabled', opts.nostroke); - } - }); - - case 19: - case "end": - return _context.stop(); + async init(S) { + const svgEditor = this; + const svgCanvas = svgEditor.canvas; + const { + getElem + } = svgCanvas; + const { + $, + svgroot, + importLocale + } = S, + addElem = svgCanvas.addSVGElementFromJson, + selManager = S.selectorManager, + connSel = '.se_connector', + // connect_str = '-SE_CONNECT-', + elData = $.data; + const strings = await importLocale(); + let startX, + startY, + curLine, + startElem, + endElem, + seNs, + { + svgcontent + } = S, + started = false, + connections = [], + selElems = []; + /** + * + * @param {Float} x + * @param {Float} y + * @param {module:utilities.BBoxObject} bb + * @param {Float} offset + * @returns {module:math.XYObject} + */ + + function getBBintersect(x, y, bb, offset) { + if (offset) { + offset -= 0; + bb = $.extend({}, bb); + bb.width += offset; + bb.height += offset; + bb.x -= offset / 2; + bb.y -= offset / 2; + } + + const midX = bb.x + bb.width / 2; + const midY = bb.y + bb.height / 2; + const lenX = x - midX; + const lenY = y - midY; + const slope = Math.abs(lenY / lenX); + let ratio; + + if (slope < bb.height / bb.width) { + ratio = bb.width / 2 / Math.abs(lenX); + } else { + ratio = lenY ? bb.height / 2 / Math.abs(lenY) : 0; + } + + return { + x: midX + lenX * ratio, + y: midY + lenY * ratio + }; + } + /** + * @param {"start"|"end"} side + * @param {Element} line + * @returns {Float} + */ + + + function getOffset(side, line) { + const giveOffset = line.getAttribute('marker-' + side); // const giveOffset = $(line).data(side+'_off'); + // TODO: Make this number (5) be based on marker width/height + + const size = line.getAttribute('stroke-width') * 5; + return giveOffset ? size : 0; + } + /** + * @param {boolean} on + * @returns {void} + */ + + + function showPanel(on) { + let connRules = $('#connector_rules'); + + if (!connRules.length) { + connRules = $('').appendTo('head'); + } + + connRules.text(!on ? '' : '#tool_clone, #tool_topath, #tool_angle, #xy_panel { display: none !important; }'); + $('#connector_panel').toggle(on); + } + /** + * @param {Element} elem + * @param {Integer|"end"} pos + * @param {Float} x + * @param {Float} y + * @param {boolean} [setMid] + * @returns {void} + */ + + + function setPoint(elem, pos, x, y, setMid) { + const pts = elem.points; + const pt = svgroot.createSVGPoint(); + pt.x = x; + pt.y = y; + + if (pos === 'end') { + pos = pts.numberOfItems - 1; + } // TODO: Test for this on init, then use alt only if needed + + + try { + pts.replaceItem(pt, pos); + } catch (err) { + // Should only occur in FF which formats points attr as "n,n n,n", so just split + const ptArr = elem.getAttribute('points').split(' '); + + for (let i = 0; i < ptArr.length; i++) { + if (i === pos) { + ptArr[i] = x + ',' + y; } } - }, _callee); - }))(); + + elem.setAttribute('points', ptArr.join(' ')); + } + + if (setMid) { + // Add center point + const ptStart = pts.getItem(0); + const ptEnd = pts.getItem(pts.numberOfItems - 1); + setPoint(elem, 1, (ptEnd.x + ptStart.x) / 2, (ptEnd.y + ptStart.y) / 2); + } + } + /** + * @param {Float} diffX + * @param {Float} diffY + * @returns {void} + */ + + + function updateLine(diffX, diffY) { + // Update line with element + let i = connections.length; + + while (i--) { + const conn = connections[i]; + const line = conn.connector; // const {elem} = conn; + + const pre = conn.is_start ? 'start' : 'end'; // const sw = line.getAttribute('stroke-width') * 5; + // Update bbox for this element + + const bb = elData(line, pre + '_bb'); + bb.x = conn.start_x + diffX; + bb.y = conn.start_y + diffY; + elData(line, pre + '_bb', bb); + const altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element + + const bb2 = elData(line, altPre + '_bb'); + const srcX = bb2.x + bb2.width / 2; + const srcY = bb2.y + bb2.height / 2; // Set point of element being moved + + const pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); // $(line).data(pre+'_off')?sw:0 + + setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element + + const pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line)); + setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); + } + } + /** + * + * @param {Element[]} [elems=selElems] Array of elements + * @returns {void} + */ + + + function findConnectors(elems = selElems) { + const connectors = $(svgcontent).find(connSel); + connections = []; // Loop through connectors to see if one is connected to the element + + connectors.each(function () { + let addThis; + /** + * + * @returns {void} + */ + + function add() { + if (elems.includes(this)) { + // Pretend this element is selected + addThis = true; + } + } // Grab the ends + + + const parts = []; + ['start', 'end'].forEach(function (pos, i) { + const key = 'c_' + pos; + let part = elData(this, key); + + if (part === null || part === undefined) { + // Does this ever return nullish values? + part = document.getElementById(this.attributes['se:connector'].value.split(' ')[i]); + elData(this, 'c_' + pos, part.id); + elData(this, pos + '_bb', svgCanvas.getStrokedBBox([part])); + } else part = document.getElementById(part); + + parts.push(part); + }, this); + + for (let i = 0; i < 2; i++) { + const cElem = parts[i]; + addThis = false; // The connected element might be part of a selected group + + $(cElem).parents().each(add); + + if (!cElem || !cElem.parentNode) { + $(this).remove(); + continue; + } + + if (elems.includes(cElem) || addThis) { + const bb = svgCanvas.getStrokedBBox([cElem]); + connections.push({ + elem: cElem, + connector: this, + is_start: i === 0, + start_x: bb.x, + start_y: bb.y + }); + } + } + }); + } + /** + * @param {Element[]} [elems=selElems] + * @returns {void} + */ + + + function updateConnectors(elems) { + // Updates connector lines based on selected elements + // Is not used on mousemove, as it runs getStrokedBBox every time, + // which isn't necessary there. + findConnectors(elems); + + if (connections.length) { + // Update line with element + let i = connections.length; + + while (i--) { + const conn = connections[i]; + const line = conn.connector; + const { + elem + } = conn; // const sw = line.getAttribute('stroke-width') * 5; + + const pre = conn.is_start ? 'start' : 'end'; // Update bbox for this element + + const bb = svgCanvas.getStrokedBBox([elem]); + bb.x = conn.start_x; + bb.y = conn.start_y; + elData(line, pre + '_bb', bb); + /* const addOffset = */ + + elData(line, pre + '_off'); + const altPre = conn.is_start ? 'end' : 'start'; // Get center pt of connected element + + const bb2 = elData(line, altPre + '_bb'); + const srcX = bb2.x + bb2.width / 2; + const srcY = bb2.y + bb2.height / 2; // Set point of element being moved + + let pt = getBBintersect(srcX, srcY, bb, getOffset(pre, line)); + setPoint(line, conn.is_start ? 0 : 'end', pt.x, pt.y, true); // Set point of connected element + + const pt2 = getBBintersect(pt.x, pt.y, elData(line, altPre + '_bb'), getOffset(altPre, line)); + setPoint(line, conn.is_start ? 'end' : 0, pt2.x, pt2.y, true); // Update points attribute manually for webkit + + if (navigator.userAgent.includes('AppleWebKit')) { + const pts = line.points; + const len = pts.numberOfItems; + const ptArr = []; + + for (let j = 0; j < len; j++) { + pt = pts.getItem(j); + ptArr[j] = pt.x + ',' + pt.y; + } + + line.setAttribute('points', ptArr.join(' ')); + } + } + } + } // Do once + + + (function () { + const gse = svgCanvas.groupSelectedElements; + + svgCanvas.groupSelectedElements = function (...args) { + svgCanvas.removeFromSelection($(connSel).toArray()); + return gse.apply(this, args); + }; + + const mse = svgCanvas.moveSelectedElements; + + svgCanvas.moveSelectedElements = function (...args) { + const cmd = mse.apply(this, args); + updateConnectors(); + return cmd; + }; + + seNs = svgCanvas.getEditorNS(); + })(); + /** + * Do on reset. + * @returns {void} + */ + + + function init() { + // Make sure all connectors have data set + $(svgcontent).find('*').each(function () { + const conn = this.getAttributeNS(seNs, 'connector'); + + if (conn) { + this.setAttribute('class', connSel.substr(1)); + const connData = conn.split(' '); + const sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]); + const ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]); + $(this).data('c_start', connData[0]).data('c_end', connData[1]).data('start_bb', sbb).data('end_bb', ebb); + svgCanvas.getEditorNS(true); + } + }); // updateConnectors(); + } // $(svgroot).parent().mousemove(function (e) { + // // if (started + // // || svgCanvas.getMode() !== 'connector' + // // || e.target.parentNode.parentNode !== svgcontent) return; + // + // console.log('y') + // // if (e.target.parentNode.parentNode === svgcontent) { + // // + // // } + // }); + + + const buttons = [{ + id: 'mode_connect', + type: 'mode', + icon: svgEditor.curConfig.imgPath + 'cut.png', + includeWith: { + button: '#tool_line', + isDefault: false, + position: 1 + }, + events: { + click() { + svgCanvas.setMode('connector'); + } + + } + }]; + return { + name: strings.name, + svgicons: svgEditor.curConfig.imgPath + 'conn.svg', + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }), + + /* async */ + addLangData({ + lang + }) { + // , importLocale: importLoc + return { + data: strings.langList + }; + }, + + mouseDown(opts) { + const e = opts.event; + startX = opts.start_x; + startY = opts.start_y; + const mode = svgCanvas.getMode(); + const { + curConfig: { + initStroke + } + } = svgEditor; + + if (mode === 'connector') { + if (started) { + return undefined; + } + + const mouseTarget = e.target; + const parents = $(mouseTarget).parents(); + + if ($.inArray(svgcontent, parents) !== -1) { + // Connectable element + // If child of foreignObject, use parent + const fo = $(mouseTarget).closest('foreignObject'); + startElem = fo.length ? fo[0] : mouseTarget; // Get center of source element + + const bb = svgCanvas.getStrokedBBox([startElem]); + const x = bb.x + bb.width / 2; + const y = bb.y + bb.height / 2; + started = true; + curLine = addElem({ + element: 'polyline', + attr: { + id: svgCanvas.getNextId(), + points: x + ',' + y + ' ' + x + ',' + y + ' ' + startX + ',' + startY, + stroke: '#' + initStroke.color, + 'stroke-width': !startElem.stroke_width || startElem.stroke_width === 0 ? initStroke.width : startElem.stroke_width, + fill: 'none', + opacity: initStroke.opacity, + style: 'pointer-events:none' + } + }); + elData(curLine, 'start_bb', bb); + } + + return { + started: true + }; + } + + if (mode === 'select') { + findConnectors(); + } + + return undefined; + }, + + mouseMove(opts) { + const zoom = svgCanvas.getZoom(); // const e = opts.event; + + const x = opts.mouse_x / zoom; + const y = opts.mouse_y / zoom; + const diffX = x - startX, + diffY = y - startY; + const mode = svgCanvas.getMode(); + + if (mode === 'connector' && started) { + // const sw = curLine.getAttribute('stroke-width') * 3; + // Set start point (adjusts based on bb) + const pt = getBBintersect(x, y, elData(curLine, 'start_bb'), getOffset('start', curLine)); + startX = pt.x; + startY = pt.y; + setPoint(curLine, 0, pt.x, pt.y, true); // Set end point + + setPoint(curLine, 'end', x, y, true); + } else if (mode === 'select') { + let slen = selElems.length; + + while (slen--) { + const elem = selElems[slen]; // Look for selected connector elements + + if (elem && elData(elem, 'c_start')) { + // Remove the "translate" transform given to move + svgCanvas.removeFromSelection([elem]); + svgCanvas.getTransformList(elem).clear(); + } + } + + if (connections.length) { + updateLine(diffX, diffY); + } + } + }, + + mouseUp(opts) { + // const zoom = svgCanvas.getZoom(); + const e = opts.event; // , x = opts.mouse_x / zoom, + // , y = opts.mouse_y / zoom, + + let mouseTarget = e.target; + + if (svgCanvas.getMode() !== 'connector') { + return undefined; + } + + const fo = $(mouseTarget).closest('foreignObject'); + + if (fo.length) { + mouseTarget = fo[0]; + } + + const parents = $(mouseTarget).parents(); + + if (mouseTarget === startElem) { + // Start line through click + started = true; + return { + keep: true, + element: null, + started + }; + } + + if ($.inArray(svgcontent, parents) === -1) { + // Not a valid target element, so remove line + $(curLine).remove(); + started = false; + return { + keep: false, + element: null, + started + }; + } // Valid end element + + + endElem = mouseTarget; + const startId = startElem.id, + endId = endElem.id; + const connStr = startId + ' ' + endId; + const altStr = endId + ' ' + startId; // Don't create connector if one already exists + + const dupe = $(svgcontent).find(connSel).filter(function () { + const conn = this.getAttributeNS(seNs, 'connector'); + + if (conn === connStr || conn === altStr) { + return true; + } + + return false; + }); + + if (dupe.length) { + $(curLine).remove(); + return { + keep: false, + element: null, + started: false + }; + } + + const bb = svgCanvas.getStrokedBBox([endElem]); + const pt = getBBintersect(startX, startY, bb, getOffset('start', curLine)); + setPoint(curLine, 'end', pt.x, pt.y, true); + $(curLine).data('c_start', startId).data('c_end', endId).data('end_bb', bb); + seNs = svgCanvas.getEditorNS(true); + curLine.setAttributeNS(seNs, 'se:connector', connStr); + curLine.setAttribute('class', connSel.substr(1)); + curLine.setAttribute('opacity', 1); + svgCanvas.addToSelection([curLine]); + svgCanvas.moveToBottomSelectedElement(); + selManager.requestSelector(curLine).showGrips(false); + started = false; + return { + keep: true, + element: curLine, + started + }; + }, + + selectedChanged(opts) { + // TODO: Find better way to skip operations if no connectors are in use + if (!$(svgcontent).find(connSel).length) { + return; + } + + if (svgCanvas.getMode() === 'connector') { + svgCanvas.setMode('select'); + } // Use this to update the current selected elements + + + selElems = opts.elems; + let i = selElems.length; + + while (i--) { + const elem = selElems[i]; + + if (elem && elData(elem, 'c_start')) { + selManager.requestSelector(elem).showGrips(false); + + if (opts.selectedElement && !opts.multiselected) { + // TODO: Set up context tools and hide most regular line tools + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); + } + } + + updateConnectors(); + }, + + elementChanged(opts) { + let elem = opts.elems[0]; + if (!elem) return; + + if (elem.tagName === 'svg' && elem.id === 'svgcontent') { + // Update svgcontent (can change on import) + svgcontent = elem; + init(); + } // Has marker, so change offset + + + if (elem.getAttribute('marker-start') || elem.getAttribute('marker-mid') || elem.getAttribute('marker-end')) { + const start = elem.getAttribute('marker-start'); + const mid = elem.getAttribute('marker-mid'); + const end = elem.getAttribute('marker-end'); + curLine = elem; + $(elem).data('start_off', Boolean(start)).data('end_off', Boolean(end)); + + if (elem.tagName === 'line' && mid) { + // Convert to polyline to accept mid-arrow + const x1 = Number(elem.getAttribute('x1')); + const x2 = Number(elem.getAttribute('x2')); + const y1 = Number(elem.getAttribute('y1')); + const y2 = Number(elem.getAttribute('y2')); + const { + id + } = elem; + const midPt = ' ' + (x1 + x2) / 2 + ',' + (y1 + y2) / 2 + ' '; + const pline = addElem({ + element: 'polyline', + attr: { + points: x1 + ',' + y1 + midPt + x2 + ',' + y2, + stroke: elem.getAttribute('stroke'), + 'stroke-width': elem.getAttribute('stroke-width'), + 'marker-mid': mid, + fill: 'none', + opacity: elem.getAttribute('opacity') || 1 + } + }); + $(elem).after(pline).remove(); + svgCanvas.clearSelection(); + pline.id = id; + svgCanvas.addToSelection([pline]); + elem = pline; + } + } // Update line if it's a connector + + + if (elem.getAttribute('class') === connSel.substr(1)) { + const start = getElem(elData(elem, 'c_start')); + updateConnectors([start]); + } else { + updateConnectors(); + } + }, + + IDsUpdated(input) { + const remove = []; + input.elems.forEach(function (elem) { + if ('se:connector' in elem.attr) { + elem.attr['se:connector'] = elem.attr['se:connector'].split(' ').map(function (oldID) { + return input.changes[oldID]; + }).join(' '); // Check validity - the field would be something like 'svg_21 svg_22', but + // if one end is missing, it would be 'svg_21' and therefore fail this test + + if (!/. ./.test(elem.attr['se:connector'])) { + remove.push(elem.attr.id); + } + } + }); + return { + remove + }; + }, + + toolButtonStateUpdate(opts) { + if (opts.nostroke) { + if ($('#mode_connect').hasClass('tool_button_current')) { + svgEditor.clickSelect(); + } + } + + $('#mode_connect').toggleClass('disabled', opts.nostroke); + } + + }; } + }; return extConnector; diff --git a/dist/extensions/ext-eyedropper.js b/dist/extensions/ext-eyedropper.js index ec8eb9dc..b7bcd8f1 100644 --- a/dist/extensions/ext-eyedropper.js +++ b/dist/extensions/ext-eyedropper.js @@ -1,42 +1,6 @@ var svgEditorExtension_eyedropper = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /** * @file ext-eyedropper.js * @@ -47,154 +11,151 @@ var svgEditorExtension_eyedropper = (function () { */ var extEyedropper = { name: 'eyedropper', - init: function init(S) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var strings, svgEditor, $, ChangeElementCommand, svgCanvas, addToHistory, currentStyle, getStyle, buttons; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - getStyle = function _getStyle(opts) { - // if we are in eyedropper mode, we don't want to disable the eye-dropper tool - var mode = svgCanvas.getMode(); + async init(S) { + const strings = await S.importLocale(); + const svgEditor = this; - if (mode === 'eyedropper') { - return; - } + const { + $, + ChangeElementCommand + } = S, + // , svgcontent, + // svgdoc = S.svgroot.parentNode.ownerDocument, + svgCanvas = svgEditor.canvas, + addToHistory = function (cmd) { + svgCanvas.undoMgr.addCommandToHistory(cmd); + }, + currentStyle = { + fillPaint: 'red', + fillOpacity: 1.0, + strokePaint: 'black', + strokeOpacity: 1.0, + strokeWidth: 5, + strokeDashArray: null, + opacity: 1.0, + strokeLinecap: 'butt', + strokeLinejoin: 'miter' + }; + /** + * + * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts + * @returns {void} + */ - var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected - var elem = null; + function getStyle(opts) { + // if we are in eyedropper mode, we don't want to disable the eye-dropper tool + const mode = svgCanvas.getMode(); - if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) { - elem = opts.elems[0]; - tool.removeClass('disabled'); // grab the current style + if (mode === 'eyedropper') { + return; + } - currentStyle.fillPaint = elem.getAttribute('fill') || 'black'; - currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0; - currentStyle.strokePaint = elem.getAttribute('stroke'); - currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0; - currentStyle.strokeWidth = elem.getAttribute('stroke-width'); - currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray'); - currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap'); - currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin'); - currentStyle.opacity = elem.getAttribute('opacity') || 1.0; // disable eye-dropper tool - } else { - tool.addClass('disabled'); - } - }; + const tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected - _context.next = 3; - return S.importLocale(); + let elem = null; - case 3: - strings = _context.sent; - svgEditor = _this; - $ = S.$, ChangeElementCommand = S.ChangeElementCommand, svgCanvas = svgEditor.canvas, addToHistory = function addToHistory(cmd) { - svgCanvas.undoMgr.addCommandToHistory(cmd); - }, currentStyle = { - fillPaint: 'red', - fillOpacity: 1.0, - strokePaint: 'black', - strokeOpacity: 1.0, - strokeWidth: 5, - strokeDashArray: null, - opacity: 1.0, - strokeLinecap: 'butt', - strokeLinejoin: 'miter' - }; - /** - * - * @param {module:svgcanvas.SvgCanvas#event:ext_selectedChanged|module:svgcanvas.SvgCanvas#event:ext_elementChanged} opts - * @returns {void} - */ + if (!opts.multiselected && opts.elems[0] && !['svg', 'g', 'use'].includes(opts.elems[0].nodeName)) { + elem = opts.elems[0]; + tool.removeClass('disabled'); // grab the current style - buttons = [{ - id: 'tool_eyedropper', - icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png', - type: 'mode', - events: { - click: function click() { - svgCanvas.setMode('eyedropper'); - } - } - }]; - return _context.abrupt("return", { - name: strings.name, - svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml', - buttons: strings.buttons.map(function (button, i) { - return Object.assign(buttons[i], button); - }), - // if we have selected an element, grab its paint and enable the eye dropper button - selectedChanged: getStyle, - elementChanged: getStyle, - mouseDown: function mouseDown(opts) { - var mode = svgCanvas.getMode(); + currentStyle.fillPaint = elem.getAttribute('fill') || 'black'; + currentStyle.fillOpacity = elem.getAttribute('fill-opacity') || 1.0; + currentStyle.strokePaint = elem.getAttribute('stroke'); + currentStyle.strokeOpacity = elem.getAttribute('stroke-opacity') || 1.0; + currentStyle.strokeWidth = elem.getAttribute('stroke-width'); + currentStyle.strokeDashArray = elem.getAttribute('stroke-dasharray'); + currentStyle.strokeLinecap = elem.getAttribute('stroke-linecap'); + currentStyle.strokeLinejoin = elem.getAttribute('stroke-linejoin'); + currentStyle.opacity = elem.getAttribute('opacity') || 1.0; // disable eye-dropper tool + } else { + tool.addClass('disabled'); + } + } - if (mode === 'eyedropper') { - var e = opts.event; - var target = e.target; + const buttons = [{ + id: 'tool_eyedropper', + icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png', + type: 'mode', + events: { + click() { + svgCanvas.setMode('eyedropper'); + } - if (!['svg', 'g', 'use'].includes(target.nodeName)) { - var changes = {}; + } + }]; + return { + name: strings.name, + svgicons: svgEditor.curConfig.extIconsPath + 'eyedropper-icon.xml', + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }), + // if we have selected an element, grab its paint and enable the eye dropper button + selectedChanged: getStyle, + elementChanged: getStyle, - var change = function change(elem, attrname, newvalue) { - changes[attrname] = elem.getAttribute(attrname); - elem.setAttribute(attrname, newvalue); - }; + mouseDown(opts) { + const mode = svgCanvas.getMode(); - if (currentStyle.fillPaint) { - change(target, 'fill', currentStyle.fillPaint); - } + if (mode === 'eyedropper') { + const e = opts.event; + const { + target + } = e; - if (currentStyle.fillOpacity) { - change(target, 'fill-opacity', currentStyle.fillOpacity); - } + if (!['svg', 'g', 'use'].includes(target.nodeName)) { + const changes = {}; - if (currentStyle.strokePaint) { - change(target, 'stroke', currentStyle.strokePaint); - } + const change = function (elem, attrname, newvalue) { + changes[attrname] = elem.getAttribute(attrname); + elem.setAttribute(attrname, newvalue); + }; - if (currentStyle.strokeOpacity) { - change(target, 'stroke-opacity', currentStyle.strokeOpacity); - } + if (currentStyle.fillPaint) { + change(target, 'fill', currentStyle.fillPaint); + } - if (currentStyle.strokeWidth) { - change(target, 'stroke-width', currentStyle.strokeWidth); - } + if (currentStyle.fillOpacity) { + change(target, 'fill-opacity', currentStyle.fillOpacity); + } - if (currentStyle.strokeDashArray) { - change(target, 'stroke-dasharray', currentStyle.strokeDashArray); - } + if (currentStyle.strokePaint) { + change(target, 'stroke', currentStyle.strokePaint); + } - if (currentStyle.opacity) { - change(target, 'opacity', currentStyle.opacity); - } + if (currentStyle.strokeOpacity) { + change(target, 'stroke-opacity', currentStyle.strokeOpacity); + } - if (currentStyle.strokeLinecap) { - change(target, 'stroke-linecap', currentStyle.strokeLinecap); - } + if (currentStyle.strokeWidth) { + change(target, 'stroke-width', currentStyle.strokeWidth); + } - if (currentStyle.strokeLinejoin) { - change(target, 'stroke-linejoin', currentStyle.strokeLinejoin); - } + if (currentStyle.strokeDashArray) { + change(target, 'stroke-dasharray', currentStyle.strokeDashArray); + } - addToHistory(new ChangeElementCommand(target, changes)); - } - } - } - }); + if (currentStyle.opacity) { + change(target, 'opacity', currentStyle.opacity); + } - case 8: - case "end": - return _context.stop(); + if (currentStyle.strokeLinecap) { + change(target, 'stroke-linecap', currentStyle.strokeLinecap); + } + + if (currentStyle.strokeLinejoin) { + change(target, 'stroke-linejoin', currentStyle.strokeLinejoin); + } + + addToHistory(new ChangeElementCommand(target, changes)); } } - }, _callee); - }))(); + } + + }; } + }; return extEyedropper; diff --git a/dist/extensions/ext-foreignobject.js b/dist/extensions/ext-foreignobject.js index e98d6a4c..1288c501 100644 --- a/dist/extensions/ext-foreignobject.js +++ b/dist/extensions/ext-foreignobject.js @@ -1,42 +1,6 @@ var svgEditorExtension_foreignobject = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /** * @file ext-foreignobject.js * @@ -47,315 +11,305 @@ var svgEditorExtension_foreignobject = (function () { */ var extForeignobject = { name: 'foreignobject', - init: function init(S) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() { - var svgEditor, $, text2xml, NS, importLocale, svgCanvas, svgdoc, strings, properlySourceSizeTextArea, showPanel, toggleSourceButtons, selElems, started, newFO, editingforeign, setForeignString, showForeignEditor, setAttr, buttons, contextTools; - return regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - setAttr = function _setAttr(attr, val) { - svgCanvas.changeSelectedAttribute(attr, val); - svgCanvas.call('changed', selElems); - }; + async init(S) { + const svgEditor = this; + const { + $, + text2xml, + NS, + importLocale + } = S; + const svgCanvas = svgEditor.canvas; + const // {svgcontent} = S, + // addElem = svgCanvas.addSVGElementFromJson, + svgdoc = S.svgroot.parentNode.ownerDocument; + const strings = await importLocale(); - showForeignEditor = function _showForeignEditor() { - var elt = selElems[0]; - - if (!elt || editingforeign) { - return; - } - - editingforeign = true; - toggleSourceButtons(true); - elt.removeAttribute('fill'); - var str = svgCanvas.svgToString(elt, 0); - $('#svg_source_textarea').val(str); - $('#svg_source_editor').fadeIn(); - properlySourceSizeTextArea(); - $('#svg_source_textarea').focus(); - }; - - setForeignString = function _setForeignString(xmlString) { - var elt = selElems[0]; // The parent `Element` to append to - - try { - // convert string into XML document - var newDoc = text2xml('' + xmlString + ''); // run it through our sanitizer to remove anything we do not support - - svgCanvas.sanitizeSvg(newDoc.documentElement); - elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true)); - svgCanvas.call('changed', [elt]); - svgCanvas.clearSelection(); - } catch (e) { - // Todo: Surface error to user - console.log(e); // eslint-disable-line no-console - - return false; - } - - return true; - }; - - toggleSourceButtons = function _toggleSourceButtons(on) { - $('#tool_source_save, #tool_source_cancel').toggle(!on); - $('#foreign_save, #foreign_cancel').toggle(on); - }; - - showPanel = function _showPanel(on) { - var fcRules = $('#fc_rules'); - - if (!fcRules.length) { - fcRules = $('').appendTo('head'); - } - - fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }'); - $('#foreignObject_panel').toggle(on); - }; - - svgEditor = _this; - $ = S.$, text2xml = S.text2xml, NS = S.NS, importLocale = S.importLocale; - svgCanvas = svgEditor.canvas; - svgdoc = S.svgroot.parentNode.ownerDocument; - _context2.next = 11; - return importLocale(); - - case 11: - strings = _context2.sent; - - properlySourceSizeTextArea = function properlySourceSizeTextArea() { - // TODO: remove magic numbers here and get values from CSS - var height = $('#svg_source_container').height() - 80; - $('#svg_source_textarea').css('height', height); - }; - /** - * @param {boolean} on - * @returns {void} - */ + const properlySourceSizeTextArea = function () { + // TODO: remove magic numbers here and get values from CSS + const height = $('#svg_source_container').height() - 80; + $('#svg_source_textarea').css('height', height); + }; + /** + * @param {boolean} on + * @returns {void} + */ - editingforeign = false; - /** - * This function sets the content of element elt to the input XML. - * @param {string} xmlString - The XML text - * @returns {boolean} This function returns false if the set was unsuccessful, true otherwise. - */ + function showPanel(on) { + let fcRules = $('#fc_rules'); - buttons = [{ - id: 'tool_foreign', - icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png', - type: 'mode', - events: { - click: function click() { - svgCanvas.setMode('foreign'); - } - } - }, { - id: 'edit_foreign', - icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png', - type: 'context', - panel: 'foreignObject_panel', - events: { - click: function click() { - showForeignEditor(); - } - } - }]; - contextTools = [{ - type: 'input', - panel: 'foreignObject_panel', - id: 'foreign_width', - size: 3, - events: { - change: function change() { - setAttr('width', this.value); - } - } - }, { - type: 'input', - panel: 'foreignObject_panel', - id: 'foreign_height', - events: { - change: function change() { - setAttr('height', this.value); - } - } - }, { - type: 'input', - panel: 'foreignObject_panel', - id: 'foreign_font_size', - size: 2, - defval: 16, - events: { - change: function change() { - setAttr('font-size', this.value); - } - } - }]; - return _context2.abrupt("return", { - name: strings.name, - svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml', - buttons: strings.buttons.map(function (button, i) { - return Object.assign(buttons[i], button); - }), - context_tools: strings.contextTools.map(function (contextTool, i) { - return Object.assign(contextTools[i], contextTool); - }), - callback: function callback() { - $('#foreignObject_panel').hide(); + if (!fcRules.length) { + fcRules = $('').appendTo('head'); + } - var endChanges = function endChanges() { - $('#svg_source_editor').hide(); - editingforeign = false; - $('#svg_source_textarea').blur(); - toggleSourceButtons(false); - }; // TODO: Needs to be done after orig icon loads + fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }'); + $('#foreignObject_panel').toggle(on); + } + /** + * @param {boolean} on + * @returns {void} + */ - setTimeout(function () { - // Create source save/cancel buttons + function toggleSourceButtons(on) { + $('#tool_source_save, #tool_source_cancel').toggle(!on); + $('#foreign_save, #foreign_cancel').toggle(on); + } - /* const save = */ - $('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var ok; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - if (editingforeign) { - _context.next = 2; - break; - } + let selElems, + started, + newFO, + editingforeign = false; + /** + * This function sets the content of element elt to the input XML. + * @param {string} xmlString - The XML text + * @returns {boolean} This function returns false if the set was unsuccessful, true otherwise. + */ - return _context.abrupt("return"); + function setForeignString(xmlString) { + const elt = selElems[0]; // The parent `Element` to append to - case 2: - if (setForeignString($('#svg_source_textarea').val())) { - _context.next = 11; - break; - } + try { + // convert string into XML document + const newDoc = text2xml('' + xmlString + ''); // run it through our sanitizer to remove anything we do not support - _context.next = 5; - return $.confirm('Errors found. Revert to original?'); + svgCanvas.sanitizeSvg(newDoc.documentElement); + elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true)); + svgCanvas.call('changed', [elt]); + svgCanvas.clearSelection(); + } catch (e) { + // Todo: Surface error to user + console.log(e); // eslint-disable-line no-console - case 5: - ok = _context.sent; + return false; + } - if (ok) { - _context.next = 8; - break; - } + return true; + } + /** + * + * @returns {void} + */ - return _context.abrupt("return"); - case 8: - endChanges(); - _context.next = 12; - break; + function showForeignEditor() { + const elt = selElems[0]; - case 11: - endChanges(); + if (!elt || editingforeign) { + return; + } - case 12: - case "end": - return _context.stop(); - } - } - }, _callee); - }))); - /* const cancel = */ + editingforeign = true; + toggleSourceButtons(true); + elt.removeAttribute('fill'); + const str = svgCanvas.svgToString(elt, 0); + $('#svg_source_textarea').val(str); + $('#svg_source_editor').fadeIn(); + properlySourceSizeTextArea(); + $('#svg_source_textarea').focus(); + } + /** + * @param {string} attr + * @param {string|Float} val + * @returns {void} + */ - $('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () { - endChanges(); - }); - }, 3000); - }, - mouseDown: function mouseDown(opts) { - // const e = opts.event; - if (svgCanvas.getMode() !== 'foreign') { - return undefined; - } - started = true; - newFO = svgCanvas.addSVGElementFromJson({ - element: 'foreignObject', - attr: { - x: opts.start_x, - y: opts.start_y, - id: svgCanvas.getNextId(), - 'font-size': 16, - // cur_text.font_size, - width: '48', - height: '20', - style: 'pointer-events:inherit' - } - }); - var m = svgdoc.createElementNS(NS.MATH, 'math'); - m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH); - m.setAttribute('display', 'inline'); - var mi = svgdoc.createElementNS(NS.MATH, 'mi'); - mi.setAttribute('mathvariant', 'normal'); - mi.textContent = "\u03A6"; - var mo = svgdoc.createElementNS(NS.MATH, 'mo'); - mo.textContent = "\u222A"; - var mi2 = svgdoc.createElementNS(NS.MATH, 'mi'); - mi2.textContent = "\u2133"; - m.append(mi, mo, mi2); - newFO.append(m); - return { - started: true - }; - }, - mouseUp: function mouseUp(opts) { - // const e = opts.event; - if (svgCanvas.getMode() !== 'foreign' || !started) { - return undefined; - } + function setAttr(attr, val) { + svgCanvas.changeSelectedAttribute(attr, val); + svgCanvas.call('changed', selElems); + } - var attrs = $(newFO).attr(['width', 'height']); - var keep = attrs.width !== '0' || attrs.height !== '0'; - svgCanvas.addToSelection([newFO], true); - return { - keep: keep, - element: newFO - }; - }, - selectedChanged: function selectedChanged(opts) { - // Use this to update the current selected elements - selElems = opts.elems; - var i = selElems.length; + const buttons = [{ + id: 'tool_foreign', + icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png', + type: 'mode', + events: { + click() { + svgCanvas.setMode('foreign'); + } - while (i--) { - var elem = selElems[i]; + } + }, { + id: 'edit_foreign', + icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png', + type: 'context', + panel: 'foreignObject_panel', + events: { + click() { + showForeignEditor(); + } - if (elem && elem.tagName === 'foreignObject') { - if (opts.selectedElement && !opts.multiselected) { - $('#foreign_font_size').val(elem.getAttribute('font-size')); - $('#foreign_width').val(elem.getAttribute('width')); - $('#foreign_height').val(elem.getAttribute('height')); - showPanel(true); - } else { - showPanel(false); - } - } else { - showPanel(false); - } - } - }, - elementChanged: function elementChanged(opts) {// const elem = opts.elems[0]; - } - }); + } + }]; + const contextTools = [{ + type: 'input', + panel: 'foreignObject_panel', + id: 'foreign_width', + size: 3, + events: { + change() { + setAttr('width', this.value); + } - case 17: - case "end": - return _context2.stop(); + } + }, { + type: 'input', + panel: 'foreignObject_panel', + id: 'foreign_height', + events: { + change() { + setAttr('height', this.value); + } + + } + }, { + type: 'input', + panel: 'foreignObject_panel', + id: 'foreign_font_size', + size: 2, + defval: 16, + events: { + change() { + setAttr('font-size', this.value); + } + + } + }]; + return { + name: strings.name, + svgicons: svgEditor.curConfig.extIconsPath + 'foreignobject-icons.xml', + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }), + context_tools: strings.contextTools.map((contextTool, i) => { + return Object.assign(contextTools[i], contextTool); + }), + + callback() { + $('#foreignObject_panel').hide(); + + const endChanges = function () { + $('#svg_source_editor').hide(); + editingforeign = false; + $('#svg_source_textarea').blur(); + toggleSourceButtons(false); + }; // TODO: Needs to be done after orig icon loads + + + setTimeout(function () { + // Create source save/cancel buttons + + /* const save = */ + $('#tool_source_save').clone().hide().attr('id', 'foreign_save').unbind().appendTo('#tool_source_back').click(async function () { + if (!editingforeign) { + return; + } + + if (!setForeignString($('#svg_source_textarea').val())) { + const ok = await $.confirm('Errors found. Revert to original?'); + + if (!ok) { + return; + } + + endChanges(); + } else { + endChanges(); + } // setSelectMode(); + + }); + /* const cancel = */ + + $('#tool_source_cancel').clone().hide().attr('id', 'foreign_cancel').unbind().appendTo('#tool_source_back').click(function () { + endChanges(); + }); + }, 3000); + }, + + mouseDown(opts) { + // const e = opts.event; + if (svgCanvas.getMode() !== 'foreign') { + return undefined; + } + + started = true; + newFO = svgCanvas.addSVGElementFromJson({ + element: 'foreignObject', + attr: { + x: opts.start_x, + y: opts.start_y, + id: svgCanvas.getNextId(), + 'font-size': 16, + // cur_text.font_size, + width: '48', + height: '20', + style: 'pointer-events:inherit' + } + }); + const m = svgdoc.createElementNS(NS.MATH, 'math'); + m.setAttributeNS(NS.XMLNS, 'xmlns', NS.MATH); + m.setAttribute('display', 'inline'); + const mi = svgdoc.createElementNS(NS.MATH, 'mi'); + mi.setAttribute('mathvariant', 'normal'); + mi.textContent = '\u03A6'; + const mo = svgdoc.createElementNS(NS.MATH, 'mo'); + mo.textContent = '\u222A'; + const mi2 = svgdoc.createElementNS(NS.MATH, 'mi'); + mi2.textContent = '\u2133'; + m.append(mi, mo, mi2); + newFO.append(m); + return { + started: true + }; + }, + + mouseUp(opts) { + // const e = opts.event; + if (svgCanvas.getMode() !== 'foreign' || !started) { + return undefined; + } + + const attrs = $(newFO).attr(['width', 'height']); + const keep = attrs.width !== '0' || attrs.height !== '0'; + svgCanvas.addToSelection([newFO], true); + return { + keep, + element: newFO + }; + }, + + selectedChanged(opts) { + // Use this to update the current selected elements + selElems = opts.elems; + let i = selElems.length; + + while (i--) { + const elem = selElems[i]; + + if (elem && elem.tagName === 'foreignObject') { + if (opts.selectedElement && !opts.multiselected) { + $('#foreign_font_size').val(elem.getAttribute('font-size')); + $('#foreign_width').val(elem.getAttribute('width')); + $('#foreign_height').val(elem.getAttribute('height')); + showPanel(true); + } else { + showPanel(false); + } + } else { + showPanel(false); } } - }, _callee2); - }))(); + }, + + elementChanged(opts) {// const elem = opts.elems[0]; + } + + }; } + }; return extForeignobject; diff --git a/dist/extensions/ext-grid.js b/dist/extensions/ext-grid.js index 420ddccb..3456fae6 100644 --- a/dist/extensions/ext-grid.js +++ b/dist/extensions/ext-grid.js @@ -1,42 +1,6 @@ var svgEditorExtension_grid = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /** * @file ext-grid.js * @@ -47,174 +11,177 @@ var svgEditorExtension_grid = (function () { */ var extGrid = { name: 'grid', - init: function init(_ref) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var $, NS, getTypeMap, importLocale, strings, svgEditor, svgCanvas, svgdoc, assignAttributes, hcanvas, canvBG, units, intervals, showGrid, canvasGrid, gridDefs, gridPattern, gridimg, gridBox, updateGrid, gridUpdate, buttons; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - gridUpdate = function _gridUpdate() { - if (showGrid) { - updateGrid(svgCanvas.getZoom()); - } + async init({ + $, + NS, + getTypeMap, + importLocale + }) { + const strings = await importLocale(); + const svgEditor = this; + const svgCanvas = svgEditor.canvas; + const svgdoc = document.getElementById('svgcanvas').ownerDocument, + { + assignAttributes + } = svgCanvas, + hcanvas = document.createElement('canvas'), + canvBG = $('#canvasBackground'), + units = getTypeMap(), + // Assumes prior `init()` call on `units.js` module + intervals = [0.01, 0.1, 1, 10, 100, 1000]; + let showGrid = svgEditor.curConfig.showGrid || false; + $(hcanvas).hide().appendTo('body'); + const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg'); + assignAttributes(canvasGrid, { + id: 'canvasGrid', + width: '100%', + height: '100%', + x: 0, + y: 0, + overflow: 'visible', + display: 'none' + }); + canvBG.append(canvasGrid); + const gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern - $('#canvasGrid').toggle(showGrid); - $('#view_grid').toggleClass('push_button_pressed tool_button'); - }; + const gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern'); + assignAttributes(gridPattern, { + id: 'gridpattern', + patternUnits: 'userSpaceOnUse', + x: 0, + // -(value.strokeWidth / 2), // position for strokewidth + y: 0, + // -(value.strokeWidth / 2), // position for strokewidth + width: 100, + height: 100 + }); + const gridimg = svgdoc.createElementNS(NS.SVG, 'image'); + assignAttributes(gridimg, { + x: 0, + y: 0, + width: 100, + height: 100 + }); + gridPattern.append(gridimg); + gridDefs.append(gridPattern); + $('#canvasGrid').append(gridDefs); // grid-box - updateGrid = function _updateGrid(zoom) { - // TODO: Try this with elements, then compare performance difference - var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px + const gridBox = svgdoc.createElementNS(NS.SVG, 'rect'); + assignAttributes(gridBox, { + width: '100%', + height: '100%', + x: 0, + y: 0, + 'stroke-width': 0, + stroke: 'none', + fill: 'url(#gridpattern)', + style: 'pointer-events: none; display:visible;' + }); + $('#canvasGrid').append(gridBox); + /** + * + * @param {Float} zoom + * @returns {void} + */ - var uMulti = unit * zoom; // Calculate the main number interval + function updateGrid(zoom) { + // TODO: Try this with elements, then compare performance difference + const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px - var rawM = 100 / uMulti; - var multi = 1; - intervals.some(function (num) { - multi = num; - return rawM <= num; - }); - var bigInt = multi * uMulti; // Set the canvas size to the width of the container + const uMulti = unit * zoom; // Calculate the main number interval - hcanvas.width = bigInt; - hcanvas.height = bigInt; - var ctx = hcanvas.getContext('2d'); - var curD = 0.5; - var part = bigInt / 10; - ctx.globalAlpha = 0.2; - ctx.strokeStyle = svgEditor.curConfig.gridColor; + const rawM = 100 / uMulti; + let multi = 1; + intervals.some(num => { + multi = num; + return rawM <= num; + }); + const bigInt = multi * uMulti; // Set the canvas size to the width of the container - for (var i = 1; i < 10; i++) { - var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10; + hcanvas.width = bigInt; + hcanvas.height = bigInt; + const ctx = hcanvas.getContext('2d'); + const curD = 0.5; + const part = bigInt / 10; + ctx.globalAlpha = 0.2; + ctx.strokeStyle = svgEditor.curConfig.gridColor; - var lineNum = 0; - ctx.moveTo(subD, bigInt); - ctx.lineTo(subD, lineNum); - ctx.moveTo(bigInt, subD); - ctx.lineTo(lineNum, subD); - } + for (let i = 1; i < 10; i++) { + const subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10; - ctx.stroke(); - ctx.beginPath(); - ctx.globalAlpha = 0.5; - ctx.moveTo(curD, bigInt); - ctx.lineTo(curD, 0); - ctx.moveTo(bigInt, curD); - ctx.lineTo(0, curD); - ctx.stroke(); - var datauri = hcanvas.toDataURL('image/png'); - gridimg.setAttribute('width', bigInt); - gridimg.setAttribute('height', bigInt); - gridimg.parentNode.setAttribute('width', bigInt); - gridimg.parentNode.setAttribute('height', bigInt); - svgCanvas.setHref(gridimg, datauri); - }; + const lineNum = 0; + ctx.moveTo(subD, bigInt); + ctx.lineTo(subD, lineNum); + ctx.moveTo(bigInt, subD); + ctx.lineTo(lineNum, subD); + } - $ = _ref.$, NS = _ref.NS, getTypeMap = _ref.getTypeMap, importLocale = _ref.importLocale; - _context.next = 5; - return importLocale(); + ctx.stroke(); + ctx.beginPath(); + ctx.globalAlpha = 0.5; + ctx.moveTo(curD, bigInt); + ctx.lineTo(curD, 0); + ctx.moveTo(bigInt, curD); + ctx.lineTo(0, curD); + ctx.stroke(); + const datauri = hcanvas.toDataURL('image/png'); + gridimg.setAttribute('width', bigInt); + gridimg.setAttribute('height', bigInt); + gridimg.parentNode.setAttribute('width', bigInt); + gridimg.parentNode.setAttribute('height', bigInt); + svgCanvas.setHref(gridimg, datauri); + } + /** + * + * @returns {void} + */ - case 5: - strings = _context.sent; - svgEditor = _this; - svgCanvas = svgEditor.canvas; - svgdoc = document.getElementById('svgcanvas').ownerDocument, assignAttributes = svgCanvas.assignAttributes, hcanvas = document.createElement('canvas'), canvBG = $('#canvasBackground'), units = getTypeMap(), intervals = [0.01, 0.1, 1, 10, 100, 1000]; - showGrid = svgEditor.curConfig.showGrid || false; - $(hcanvas).hide().appendTo('body'); - canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg'); - assignAttributes(canvasGrid, { - id: 'canvasGrid', - width: '100%', - height: '100%', - x: 0, - y: 0, - overflow: 'visible', - display: 'none' - }); - canvBG.append(canvasGrid); - gridDefs = svgdoc.createElementNS(NS.SVG, 'defs'); // grid-pattern - gridPattern = svgdoc.createElementNS(NS.SVG, 'pattern'); - assignAttributes(gridPattern, { - id: 'gridpattern', - patternUnits: 'userSpaceOnUse', - x: 0, - // -(value.strokeWidth / 2), // position for strokewidth - y: 0, - // -(value.strokeWidth / 2), // position for strokewidth - width: 100, - height: 100 - }); - gridimg = svgdoc.createElementNS(NS.SVG, 'image'); - assignAttributes(gridimg, { - x: 0, - y: 0, - width: 100, - height: 100 - }); - gridPattern.append(gridimg); - gridDefs.append(gridPattern); - $('#canvasGrid').append(gridDefs); // grid-box + function gridUpdate() { + if (showGrid) { + updateGrid(svgCanvas.getZoom()); + } - gridBox = svgdoc.createElementNS(NS.SVG, 'rect'); - assignAttributes(gridBox, { - width: '100%', - height: '100%', - x: 0, - y: 0, - 'stroke-width': 0, - stroke: 'none', - fill: 'url(#gridpattern)', - style: 'pointer-events: none; display:visible;' - }); - $('#canvasGrid').append(gridBox); - /** - * - * @param {Float} zoom - * @returns {void} - */ + $('#canvasGrid').toggle(showGrid); + $('#view_grid').toggleClass('push_button_pressed tool_button'); + } - buttons = [{ - id: 'view_grid', - icon: svgEditor.curConfig.extIconsPath + 'grid.png', - type: 'context', - panel: 'editor_panel', - events: { - click: function click() { - svgEditor.curConfig.showGrid = showGrid = !showGrid; - gridUpdate(); - } - } - }]; - return _context.abrupt("return", { - name: strings.name, - svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml', - zoomChanged: function zoomChanged(zoom) { - if (showGrid) { - updateGrid(zoom); - } - }, - callback: function callback() { - if (showGrid) { - gridUpdate(); - } - }, - buttons: strings.buttons.map(function (button, i) { - return Object.assign(buttons[i], button); - }) - }); - - case 27: - case "end": - return _context.stop(); - } + const buttons = [{ + id: 'view_grid', + icon: svgEditor.curConfig.extIconsPath + 'grid.png', + type: 'context', + panel: 'editor_panel', + events: { + click() { + svgEditor.curConfig.showGrid = showGrid = !showGrid; + gridUpdate(); } - }, _callee); - }))(); + + } + }]; + return { + name: strings.name, + svgicons: svgEditor.curConfig.extIconsPath + 'grid-icon.xml', + + zoomChanged(zoom) { + if (showGrid) { + updateGrid(zoom); + } + }, + + callback() { + if (showGrid) { + gridUpdate(); + } + }, + + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }) + }; } + }; return extGrid; diff --git a/dist/extensions/ext-helloworld.js b/dist/extensions/ext-helloworld.js index dffb1c3c..05a11ba7 100644 --- a/dist/extensions/ext-helloworld.js +++ b/dist/extensions/ext-helloworld.js @@ -1,98 +1,6 @@ var svgEditorExtension_helloworld = (function () { 'use strict'; - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - - function _slicedToArray(arr, i) { - return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); - } - - function _arrayWithHoles(arr) { - if (Array.isArray(arr)) return arr; - } - - function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"] != null) _i["return"](); - } finally { - if (_d) throw _e; - } - } - - return _arr; - } - - function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return _arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); - } - - function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; - - return arr2; - } - - function _nonIterableRest() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - /** * @file ext-helloworld.js * @@ -109,95 +17,82 @@ var svgEditorExtension_helloworld = (function () { */ var extHelloworld = { name: 'helloworld', - init: function init(_ref) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() { - var $, importLocale, strings, svgEditor, svgCanvas; - return regeneratorRuntime.wrap(function _callee$(_context) { - while (1) { - switch (_context.prev = _context.next) { - case 0: - $ = _ref.$, importLocale = _ref.importLocale; - _context.next = 3; - return importLocale(); - - case 3: - strings = _context.sent; - svgEditor = _this; - svgCanvas = svgEditor.canvas; - return _context.abrupt("return", { - name: strings.name, - // For more notes on how to make an icon file, see the source of - // the helloworld-icon.xml - svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml', - // Multiple buttons can be added in this array - buttons: [{ - // Must match the icon ID in helloworld-icon.xml - id: 'hello_world', - // Fallback, e.g., for `file:///` access - icon: svgEditor.curConfig.extIconsPath + 'helloworld.png', - // This indicates that the button will be added to the "mode" - // button panel on the left side - type: 'mode', - // Tooltip text - title: strings.buttons[0].title, - // Events - events: { - click: function click() { - // The action taken when the button is clicked on. - // For "mode" buttons, any other button will - // automatically be de-pressed. - svgCanvas.setMode('hello_world'); - } - } - }], - // This is triggered when the main mouse button is pressed down - // on the editor canvas (not the tool panels) - mouseDown: function mouseDown() { - // Check the mode on mousedown - if (svgCanvas.getMode() === 'hello_world') { - // The returned object must include "started" with - // a value of true in order for mouseUp to be triggered - return { - started: true - }; - } - - return undefined; - }, - // This is triggered from anywhere, but "started" must have been set - // to true (see above). Note that "opts" is an object with event info - mouseUp: function mouseUp(opts) { - // Check the mode on mouseup - if (svgCanvas.getMode() === 'hello_world') { - var zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value - - var x = opts.mouse_x / zoom; - var y = opts.mouse_y / zoom; // We do our own formatting - - var text = strings.text; - [['x', x], ['y', y]].forEach(function (_ref2) { - var _ref3 = _slicedToArray(_ref2, 2), - prop = _ref3[0], - val = _ref3[1]; - - text = text.replace('{' + prop + '}', val); - }); // Show the text using the custom alert function - - $.alert(text); - } - } - }); - - case 7: - case "end": - return _context.stop(); + async init({ + $, + importLocale + }) { + // See `/editor/extensions/ext-locale/helloworld/` + const strings = await importLocale(); + const svgEditor = this; + const svgCanvas = svgEditor.canvas; + return { + name: strings.name, + // For more notes on how to make an icon file, see the source of + // the helloworld-icon.xml + svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml', + // Multiple buttons can be added in this array + buttons: [{ + // Must match the icon ID in helloworld-icon.xml + id: 'hello_world', + // Fallback, e.g., for `file:///` access + icon: svgEditor.curConfig.extIconsPath + 'helloworld.png', + // This indicates that the button will be added to the "mode" + // button panel on the left side + type: 'mode', + // Tooltip text + title: strings.buttons[0].title, + // Events + events: { + click() { + // The action taken when the button is clicked on. + // For "mode" buttons, any other button will + // automatically be de-pressed. + svgCanvas.setMode('hello_world'); } + } - }, _callee); - }))(); + }], + + // This is triggered when the main mouse button is pressed down + // on the editor canvas (not the tool panels) + mouseDown() { + // Check the mode on mousedown + if (svgCanvas.getMode() === 'hello_world') { + // The returned object must include "started" with + // a value of true in order for mouseUp to be triggered + return { + started: true + }; + } + + return undefined; + }, + + // This is triggered from anywhere, but "started" must have been set + // to true (see above). Note that "opts" is an object with event info + mouseUp(opts) { + // Check the mode on mouseup + if (svgCanvas.getMode() === 'hello_world') { + const zoom = svgCanvas.getZoom(); // Get the actual coordinate by dividing by the zoom value + + const x = opts.mouse_x / zoom; + const y = opts.mouse_y / zoom; // We do our own formatting + + let { + text + } = strings; + [['x', x], ['y', y]].forEach(([prop, val]) => { + text = text.replace('{' + prop + '}', val); + }); // Show the text using the custom alert function + + $.alert(text); + } + } + + }; } + }; return extHelloworld; diff --git a/dist/extensions/ext-imagelib.js b/dist/extensions/ext-imagelib.js index 43bd2513..ae4caa51 100644 --- a/dist/extensions/ext-imagelib.js +++ b/dist/extensions/ext-imagelib.js @@ -1,58 +1,6 @@ var svgEditorExtension_imagelib = (function () { 'use strict'; - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function (obj) { - return typeof obj; - }; - } else { - _typeof = function (obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); - } - - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } - - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } - - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); - - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); - }); - }; - } - /** * @file ext-imagelib.js * @@ -63,520 +11,500 @@ var svgEditorExtension_imagelib = (function () { */ var extImagelib = { name: 'imagelib', - init: function init(_ref) { - var _this = this; - return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() { - var $, decode64, importLocale, dropXMLInternalSubset, imagelibStrings, modularVersion, svgEditor, uiStrings, svgCanvas, extIconsPath, allowedImageLibOrigins, closeBrowser, importImage, pending, mode, multiArr, transferStopped, preview, submit, onMessage, _onMessage, toggleMulti, showBrowser, buttons; - - return regeneratorRuntime.wrap(function _callee2$(_context2) { - while (1) { - switch (_context2.prev = _context2.next) { - case 0: - showBrowser = function _showBrowser() { - var browser = $('#imgbrowse'); - - if (!browser.length) { - $('
' + '
').insertAfter('#svg_docprops'); - browser = $('#imgbrowse'); - var allLibs = imagelibStrings.select_lib; - var libOpts = $('
    ').appendTo(browser); - var frame = $('