diff --git a/dist/canvg.js b/dist/canvg.js deleted file mode 100644 index 23c96b60..00000000 --- a/dist/canvg.js +++ /dev/null @@ -1,4915 +0,0 @@ -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 - * @author Stoyan Stefanov - * @see https://www.phpied.com/rgb-color-parser-in-javascript/ - * @license MIT - */ - var simpleColors = { - aliceblue: 'f0f8ff', - antiquewhite: 'faebd7', - aqua: '00ffff', - aquamarine: '7fffd4', - azure: 'f0ffff', - beige: 'f5f5dc', - bisque: 'ffe4c4', - black: '000000', - blanchedalmond: 'ffebcd', - blue: '0000ff', - blueviolet: '8a2be2', - brown: 'a52a2a', - burlywood: 'deb887', - cadetblue: '5f9ea0', - chartreuse: '7fff00', - chocolate: 'd2691e', - coral: 'ff7f50', - cornflowerblue: '6495ed', - cornsilk: 'fff8dc', - crimson: 'dc143c', - cyan: '00ffff', - darkblue: '00008b', - darkcyan: '008b8b', - darkgoldenrod: 'b8860b', - darkgray: 'a9a9a9', - darkgreen: '006400', - darkkhaki: 'bdb76b', - darkmagenta: '8b008b', - darkolivegreen: '556b2f', - darkorange: 'ff8c00', - darkorchid: '9932cc', - darkred: '8b0000', - darksalmon: 'e9967a', - darkseagreen: '8fbc8f', - darkslateblue: '483d8b', - darkslategray: '2f4f4f', - darkturquoise: '00ced1', - darkviolet: '9400d3', - deeppink: 'ff1493', - deepskyblue: '00bfff', - dimgray: '696969', - dodgerblue: '1e90ff', - feldspar: 'd19275', - firebrick: 'b22222', - floralwhite: 'fffaf0', - forestgreen: '228b22', - fuchsia: 'ff00ff', - gainsboro: 'dcdcdc', - ghostwhite: 'f8f8ff', - gold: 'ffd700', - goldenrod: 'daa520', - gray: '808080', - green: '008000', - greenyellow: 'adff2f', - honeydew: 'f0fff0', - hotpink: 'ff69b4', - indianred: 'cd5c5c', - indigo: '4b0082', - ivory: 'fffff0', - khaki: 'f0e68c', - lavender: 'e6e6fa', - lavenderblush: 'fff0f5', - lawngreen: '7cfc00', - lemonchiffon: 'fffacd', - lightblue: 'add8e6', - lightcoral: 'f08080', - lightcyan: 'e0ffff', - lightgoldenrodyellow: 'fafad2', - lightgrey: 'd3d3d3', - lightgreen: '90ee90', - lightpink: 'ffb6c1', - lightsalmon: 'ffa07a', - lightseagreen: '20b2aa', - lightskyblue: '87cefa', - lightslateblue: '8470ff', - lightslategray: '778899', - lightsteelblue: 'b0c4de', - lightyellow: 'ffffe0', - lime: '00ff00', - limegreen: '32cd32', - linen: 'faf0e6', - magenta: 'ff00ff', - maroon: '800000', - mediumaquamarine: '66cdaa', - mediumblue: '0000cd', - mediumorchid: 'ba55d3', - mediumpurple: '9370d8', - mediumseagreen: '3cb371', - mediumslateblue: '7b68ee', - mediumspringgreen: '00fa9a', - mediumturquoise: '48d1cc', - mediumvioletred: 'c71585', - midnightblue: '191970', - mintcream: 'f5fffa', - mistyrose: 'ffe4e1', - moccasin: 'ffe4b5', - navajowhite: 'ffdead', - navy: '000080', - oldlace: 'fdf5e6', - olive: '808000', - olivedrab: '6b8e23', - orange: 'ffa500', - orangered: 'ff4500', - orchid: 'da70d6', - palegoldenrod: 'eee8aa', - palegreen: '98fb98', - paleturquoise: 'afeeee', - palevioletred: 'd87093', - papayawhip: 'ffefd5', - peachpuff: 'ffdab9', - peru: 'cd853f', - pink: 'ffc0cb', - plum: 'dda0dd', - powderblue: 'b0e0e6', - purple: '800080', - red: 'ff0000', - rosybrown: 'bc8f8f', - royalblue: '4169e1', - saddlebrown: '8b4513', - salmon: 'fa8072', - sandybrown: 'f4a460', - seagreen: '2e8b57', - seashell: 'fff5ee', - sienna: 'a0522d', - silver: 'c0c0c0', - skyblue: '87ceeb', - slateblue: '6a5acd', - slategray: '708090', - snow: 'fffafa', - springgreen: '00ff7f', - steelblue: '4682b4', - tan: 'd2b48c', - teal: '008080', - thistle: 'd8bfd8', - tomato: 'ff6347', - turquoise: '40e0d0', - violet: 'ee82ee', - violetred: 'd02090', - wheat: 'f5deb3', - white: 'ffffff', - whitesmoke: 'f5f5f5', - yellow: 'ffff00', - yellowgreen: '9acd32' - }; // array of color definition objects - - var 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); - }); - } - }, { - 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); - }); - } - }, { - 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); - }); - } - }]; - /** - * A class to parse color values. - */ - - var RGBColor = /*#__PURE__*/function () { - /** - * @param {string} colorString - */ - function RGBColor(colorString) { - var _this = this; - - _classCallCheck(this, RGBColor); - - this.ok = false; // strip any leading # - - if (colorString.charAt(0) === '#') { - // remove # if any - colorString = colorString.substr(1, 6); - } - - colorString = colorString.replace(/ /g, ''); - colorString = colorString.toLowerCase(); // before getting into regexps, try simple matches - // and overwrite the input - - if (colorString in simpleColors) { - colorString = simpleColors[colorString]; - } // end of simple type-in colors - // search through the definitions to find a match - - - colorDefs.forEach(function (_ref) { - var re = _ref.re, - processor = _ref.process; - var 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 - }); - _this.ok = true; - } - }); // validate/cleanup values - - this.r = this.r < 0 || isNaN(this.r) ? 0 : this.r > 255 ? 255 : this.r; - this.g = this.g < 0 || isNaN(this.g) ? 0 : this.g > 255 ? 255 : this.g; - this.b = this.b < 0 || isNaN(this.b) ? 0 : this.b > 255 ? 255 : this.b; - } // some getters - - /** - * @returns {string} - */ - - - _createClass(RGBColor, [{ - key: "toRGB", - value: function toRGB() { - return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')'; - } - /** - * @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; - } - /** - * 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; - } - }]); - - return RGBColor; - }(); - - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - _typeof = function _typeof(obj) { - return typeof obj; - }; - } else { - _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); - } - - function _classCallCheck$1(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - /* eslint-disable no-bitwise, unicorn/prefer-query-selector */ - - /** - * StackBlur - a fast almost Gaussian Blur For Canvas - * - * In case you find this class useful - especially in commercial projects - - * I am not totally unhappy for a small donation to my PayPal account - * mario@quasimondo.de - * - * Or support me on flattr: - * {@link https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript}. - * - * @module StackBlur - * @author Mario Klingemann - * Contact: mario@quasimondo.com - * Website: {@link http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html} - * Twitter: @quasimondo - * - * @copyright (c) 2010 Mario Klingemann - * - * Permission is hereby granted, free of charge, to any person - * obtaining a copy of this software and associated documentation - * files (the "Software"), to deal in the Software without - * restriction, including without limitation the rights to use, - * copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the - * Software is furnished to do so, subject to the following - * conditions: - * - * The above copyright notice and this permission notice shall be - * included in all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES - * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND - * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT - * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, - * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING - * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - * OTHER DEALINGS IN THE SOFTWARE. - */ - - /* eslint-disable max-len */ - - - var mulTable = [512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292, 512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292, 273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259, 496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292, 282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373, 364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259, 507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381, 374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292, 287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461, 454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373, 368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309, 305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259, 257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442, 437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381, 377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332, 329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292, 289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259]; - var shgTable = [9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24]; - /** - * @param {string|HTMLCanvasElement} canvas - * @param {Integer} topX - * @param {Integer} topY - * @param {Integer} width - * @param {Integer} height - * @throws {Error|TypeError} - * @returns {ImageData} See {@link https://html.spec.whatwg.org/multipage/canvas.html#imagedata} - */ - - - function getImageDataFromCanvas(canvas, topX, topY, width, height) { - if (typeof canvas === 'string') { - canvas = document.getElementById(canvas); - } - - if (!canvas || _typeof(canvas) !== 'object' || !('getContext' in canvas)) { - throw new TypeError('Expecting canvas with `getContext` method ' + 'in processCanvasRGB(A) calls!'); - } - - var context = canvas.getContext('2d'); - - try { - return context.getImageData(topX, topY, width, height); - } catch (e) { - throw new Error('unable to access image data: ' + e); - } - } - /** - * @param {HTMLCanvasElement} canvas - * @param {Integer} topX - * @param {Integer} topY - * @param {Integer} width - * @param {Integer} height - * @param {Float} radius - * @returns {undefined} - */ - - - function processCanvasRGBA(canvas, topX, topY, width, height, radius) { - if (isNaN(radius) || radius < 1) { - return; - } - - radius |= 0; - var imageData = getImageDataFromCanvas(canvas, topX, topY, width, height); - imageData = processImageDataRGBA(imageData, topX, topY, width, height, radius); - canvas.getContext('2d').putImageData(imageData, topX, topY); - } - /** - * @param {ImageData} imageData - * @param {Integer} topX - * @param {Integer} topY - * @param {Integer} width - * @param {Integer} height - * @param {Float} radius - * @returns {ImageData} - */ - - - function processImageDataRGBA(imageData, topX, topY, width, height, radius) { - var pixels = imageData.data; - var x, y, i, p, yp, yi, yw, rSum, gSum, bSum, aSum, rOutSum, gOutSum, bOutSum, aOutSum, rInSum, gInSum, bInSum, aInSum, pr, pg, pb, pa, rbs; - var div = 2 * radius + 1; // const w4 = width << 2; - - var widthMinus1 = width - 1; - var heightMinus1 = height - 1; - var radiusPlus1 = radius + 1; - var sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2; - var stackStart = new BlurStack(); - var stack = stackStart; - var stackEnd; - - for (i = 1; i < div; i++) { - stack = stack.next = new BlurStack(); - - if (i === radiusPlus1) { - stackEnd = stack; - } - } - - stack.next = stackStart; - var stackIn = null; - var stackOut = null; - yw = yi = 0; - var mulSum = mulTable[radius]; - var shgSum = shgTable[radius]; - - for (y = 0; y < height; y++) { - rInSum = gInSum = bInSum = aInSum = rSum = gSum = bSum = aSum = 0; - rOutSum = radiusPlus1 * (pr = pixels[yi]); - gOutSum = radiusPlus1 * (pg = pixels[yi + 1]); - bOutSum = radiusPlus1 * (pb = pixels[yi + 2]); - aOutSum = radiusPlus1 * (pa = pixels[yi + 3]); - rSum += sumFactor * pr; - gSum += sumFactor * pg; - bSum += sumFactor * pb; - aSum += sumFactor * pa; - stack = stackStart; - - for (i = 0; i < radiusPlus1; i++) { - stack.r = pr; - stack.g = pg; - stack.b = pb; - stack.a = pa; - stack = stack.next; - } - - for (i = 1; i < radiusPlus1; i++) { - p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2); - rSum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i); - gSum += (stack.g = pg = pixels[p + 1]) * rbs; - bSum += (stack.b = pb = pixels[p + 2]) * rbs; - aSum += (stack.a = pa = pixels[p + 3]) * rbs; - rInSum += pr; - gInSum += pg; - bInSum += pb; - aInSum += pa; - stack = stack.next; - } - - stackIn = stackStart; - stackOut = stackEnd; - - for (x = 0; x < width; x++) { - pixels[yi + 3] = pa = aSum * mulSum >> shgSum; - - if (pa !== 0) { - pa = 255 / pa; - pixels[yi] = (rSum * mulSum >> shgSum) * pa; - pixels[yi + 1] = (gSum * mulSum >> shgSum) * pa; - pixels[yi + 2] = (bSum * mulSum >> shgSum) * pa; - } else { - pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0; - } - - rSum -= rOutSum; - gSum -= gOutSum; - bSum -= bOutSum; - aSum -= aOutSum; - rOutSum -= stackIn.r; - gOutSum -= stackIn.g; - bOutSum -= stackIn.b; - aOutSum -= stackIn.a; - p = yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1) << 2; - rInSum += stackIn.r = pixels[p]; - gInSum += stackIn.g = pixels[p + 1]; - bInSum += stackIn.b = pixels[p + 2]; - aInSum += stackIn.a = pixels[p + 3]; - rSum += rInSum; - gSum += gInSum; - bSum += bInSum; - aSum += aInSum; - stackIn = stackIn.next; - rOutSum += pr = stackOut.r; - gOutSum += pg = stackOut.g; - bOutSum += pb = stackOut.b; - aOutSum += pa = stackOut.a; - rInSum -= pr; - gInSum -= pg; - bInSum -= pb; - aInSum -= pa; - stackOut = stackOut.next; - yi += 4; - } - - yw += width; - } - - for (x = 0; x < width; x++) { - gInSum = bInSum = aInSum = rInSum = gSum = bSum = aSum = rSum = 0; - yi = x << 2; - rOutSum = radiusPlus1 * (pr = pixels[yi]); - gOutSum = radiusPlus1 * (pg = pixels[yi + 1]); - bOutSum = radiusPlus1 * (pb = pixels[yi + 2]); - aOutSum = radiusPlus1 * (pa = pixels[yi + 3]); - rSum += sumFactor * pr; - gSum += sumFactor * pg; - bSum += sumFactor * pb; - aSum += sumFactor * pa; - stack = stackStart; - - for (i = 0; i < radiusPlus1; i++) { - stack.r = pr; - stack.g = pg; - stack.b = pb; - stack.a = pa; - stack = stack.next; - } - - yp = width; - - for (i = 1; i <= radius; i++) { - yi = yp + x << 2; - rSum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i); - gSum += (stack.g = pg = pixels[yi + 1]) * rbs; - bSum += (stack.b = pb = pixels[yi + 2]) * rbs; - aSum += (stack.a = pa = pixels[yi + 3]) * rbs; - rInSum += pr; - gInSum += pg; - bInSum += pb; - aInSum += pa; - stack = stack.next; - - if (i < heightMinus1) { - yp += width; - } - } - - yi = x; - stackIn = stackStart; - stackOut = stackEnd; - - for (y = 0; y < height; y++) { - p = yi << 2; - pixels[p + 3] = pa = aSum * mulSum >> shgSum; - - if (pa > 0) { - pa = 255 / pa; - pixels[p] = (rSum * mulSum >> shgSum) * pa; - pixels[p + 1] = (gSum * mulSum >> shgSum) * pa; - pixels[p + 2] = (bSum * mulSum >> shgSum) * pa; - } else { - pixels[p] = pixels[p + 1] = pixels[p + 2] = 0; - } - - rSum -= rOutSum; - gSum -= gOutSum; - bSum -= bOutSum; - aSum -= aOutSum; - rOutSum -= stackIn.r; - gOutSum -= stackIn.g; - bOutSum -= stackIn.b; - aOutSum -= stackIn.a; - p = x + ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) * width << 2; - rSum += rInSum += stackIn.r = pixels[p]; - gSum += gInSum += stackIn.g = pixels[p + 1]; - bSum += bInSum += stackIn.b = pixels[p + 2]; - aSum += aInSum += stackIn.a = pixels[p + 3]; - stackIn = stackIn.next; - rOutSum += pr = stackOut.r; - gOutSum += pg = stackOut.g; - bOutSum += pb = stackOut.b; - aOutSum += pa = stackOut.a; - rInSum -= pr; - gInSum -= pg; - bInSum -= pb; - aInSum -= pa; - stackOut = stackOut.next; - yi += width; - } - } - - return imageData; - } - /** - * - */ - - - var BlurStack = - /** - * Set properties. - */ - function BlurStack() { - _classCallCheck$1(this, BlurStack); - - this.r = 0; - this.g = 0; - this.b = 0; - this.a = 0; - this.next = null; - }; - - /** - * Whether a value is `null` or `undefined`. - * @param {any} val - * @returns {boolean} - */ - - var isNullish = function isNullish(val) { - return val === null || val === undefined; - }; - /** - * @callback module:canvg.ForceRedraw - * @returns {boolean} - */ - - /** - * @typedef {PlainObject} module:canvg.CanvgOptions - * @property {boolean} ignoreMouse true => ignore mouse events - * @property {boolean} ignoreAnimation true => ignore animations - * @property {boolean} ignoreDimensions true => does not try to resize canvas - * @property {boolean} ignoreClear true => does not clear canvas - * @property {Integer} offsetX int => draws at a x offset - * @property {Integer} offsetY int => draws at a y offset - * @property {Integer} scaleWidth int => scales horizontally to width - * @property {Integer} scaleHeight int => scales vertically to height - * @property {module:canvg.ForceRedraw} forceRedraw function => will call the function on every frame, if it returns true, will redraw - * @property {boolean} log Adds log function - * @property {boolean} useCORS Whether to set CORS `crossOrigin` for the image to `Anonymous` - */ - - /** - * If called with no arguments, it will replace all `` elements on the page - * with `` elements. - * @function module:canvg.canvg - * @param {HTMLCanvasElement|string} target canvas element or the id of a canvas element - * @param {string|XMLDocument} s - svg string, url to svg file, or xml document - * @param {module:canvg.CanvgOptions} [opts] Optional hash of options - * @returns {Promise} All the function after the first render is completed with dom - */ - - - var canvg = function canvg(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'); - c.width = svgTag.clientWidth; - c.height = svgTag.clientHeight; - svgTag.before(c); - svgTag.remove(); - var div = document.createElement('div'); - div.append(svgTag); - return canvg(c, div.innerHTML); - })); - } - - if (typeof target === 'string') { - target = document.getElementById(target); - } // store class on canvas - - - 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 - - if (!(target.childNodes.length === 1 && target.childNodes[0].nodeName === 'OBJECT')) { - target.svg = svg; - } - - var ctx = target.getContext('2d'); - - if (typeof s.documentElement !== 'undefined') { - // load from xml doc - return svg.loadXmlDoc(ctx, s); - } - - if (s.substr(0, 1) === '<') { - // load from xml string - return svg.loadXml(ctx, s); - } // load from url - - - return svg.load(ctx, s); - }; - /* eslint-disable jsdoc/check-types */ - - /** - * @param {module:canvg.CanvgOptions} opts - * @returns {object} - * @todo Flesh out exactly what object is returned here (after updating to latest and reincluding our changes here and those of StackBlur) - */ - - function build(opts) { - /* eslint-enable jsdoc/check-types */ - var svg = { - opts: opts - }; - svg.FRAMERATE = 30; - svg.MAX_VIRTUAL_PIXELS = 30000; - - svg.log = function (msg) { - /* */ - }; - - if (svg.opts.log === true && typeof console !== 'undefined') { - svg.log = function (msg) { - console.log(msg); - }; // eslint-disable-line no-console - - } // globals - - - svg.init = function (ctx) { - var uniqueId = 0; - - svg.UniqueId = function () { - uniqueId++; - return 'canvg' + uniqueId; - }; - - svg.Definitions = {}; - svg.Styles = {}; - svg.Animations = []; - svg.Images = []; - svg.ctx = ctx; - svg.ViewPort = { - viewPorts: [], - Clear: function Clear() { - this.viewPorts = []; - }, - SetCurrent: function SetCurrent(width, height) { - this.viewPorts.push({ - width: width, - height: height - }); - }, - RemoveCurrent: function RemoveCurrent() { - this.viewPorts.pop(); - }, - Current: function Current() { - return this.viewPorts[this.viewPorts.length - 1]; - }, - width: function width() { - return this.Current().width; - }, - height: function height() { - return this.Current().height; - }, - ComputeSize: function 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); - } - }; - }; - - svg.init(); // images loaded - - svg.ImagesLoaded = function () { - return svg.Images.every(function (img) { - return img.loaded; - }); - }; // trim - - - svg.trim = function (s) { - return s.replace(/^\s+|\s+$/g, ''); - }; // compress spaces - - - svg.compressSpaces = function (s) { - return s.replace(/\s+/gm, ' '); - }; // ajax - // Todo: Replace with `fetch` and polyfill - - - svg.ajax = function (url, asynch) { - var AJAX = window.XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP'); - - if (asynch) { - return new Promise(function (resolve, reject) { - // eslint-disable-line promise/avoid-new - var req = AJAX.open('GET', url, true); - req.addEventListener('load', function () { - resolve(AJAX.responseText); - }); - AJAX.send(null); - }); - } - - AJAX.open('GET', url, false); - AJAX.send(null); - return AJAX.responseText; - }; // parse xml - - - svg.parseXml = function (xml) { - if (window.DOMParser) { - var parser = new DOMParser(); - return parser.parseFromString(xml, 'text/xml'); - } - - xml = xml.replace(/]*>/, ''); - var xmlDoc = new window.ActiveXObject('Microsoft.XMLDOM'); - xmlDoc.async = 'false'; - xmlDoc.loadXML(xml); - return xmlDoc; - }; // text extensions - // get the text baseline - - - var textBaselineMapping = { - baseline: 'alphabetic', - 'before-edge': 'top', - 'text-before-edge': 'top', - middle: 'middle', - central: 'middle', - 'after-edge': 'bottom', - 'text-after-edge': 'bottom', - ideographic: 'ideographic', - alphabetic: 'alphabetic', - hanging: 'hanging', - mathematical: 'alphabetic' - }; - - svg.Property = /*#__PURE__*/function () { - function Property(name, value) { - _classCallCheck(this, Property); - - this.name = name; - this.value = value; - } - - _createClass(Property, [{ - key: "getValue", - value: function getValue() { - return this.value; - } - }, { - 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); - - if (String(this.value).endsWith('%')) { - n /= 100.0; - } - - return n; - } - }, { - key: "valueOrDefault", - value: function valueOrDefault(def) { - if (this.hasValue()) return this.value; - return def; - } - }, { - 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 (!isNullish(opacityProp.value) && opacityProp.value !== '' && typeof this.value === 'string') { - // can only add opacity to colors, not patterns - var color = new RGBColor(this.value); - - if (color.ok) { - newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')'; - } - } - - 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]; - } - }, { - 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 - - - if (!isNullish(def) && def.createPattern) { - if (def.getHrefAttribute().hasValue()) { - var pt = def.attribute('patternTransform'); - def = def.getHrefAttribute().getDefinition(); - - if (pt.hasValue()) { - def.attribute('patternTransform', true).value = pt.value; - } - } - - return def.createPattern(svg.ctx, e); - } - - 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 - - }, { - 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 - - }, { - 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 - - - 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); - return { - fontFamily: fontFamily || f.fontFamily, - fontSize: fontSize || f.fontSize, - fontStyle: fontStyle || f.fontStyle, - fontWeight: fontWeight || f.fontWeight, - fontVariant: fontVariant || f.fontVariant, - toString: function 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 = { - fontSize: false, - fontStyle: false, - fontWeight: false, - fontVariant: false - }; - var ff = ''; - ds.forEach(function (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)) { - if (d !== 'inherit') { - f.fontVariant = d; - } - - set.fontStyle = set.fontVariant = true; - } else if (!set.fontWeight && _this.Weights.includes(d)) { - if (d !== 'inherit') { - f.fontWeight = d; - } - - set.fontStyle = set.fontVariant = set.fontWeight = true; - } else if (!set.fontSize) { - if (d !== 'inherit') { - f.fontSize = d.split('/')[0]; - } - - set.fontStyle = set.fontVariant = set.fontWeight = set.fontSize = true; - } else if (d !== 'inherit') { - ff += d; - } - }); - - if (ff !== '') { - f.fontFamily = ff; - } - - 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); - }); - }; - - svg.Point = /*#__PURE__*/function () { - function _class(x, y) { - _classCallCheck(this, _class); - - 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; - } - }]); - - return _class; - }(); - - svg.CreatePoint = function (s) { - var a = svg.ToNumberArray(s); - return new svg.Point(a[0], a[1]); - }; - - svg.CreatePath = function (s) { - var a = svg.ToNumberArray(s); - var path = []; - - for (var i = 0; i < a.length; i += 2) { - path.push(new svg.Point(a[i], a[i + 1])); - } - - return path; - }; // bounding box - - - svg.BoundingBox = /*#__PURE__*/function () { - function _class2(x1, y1, x2, y2) { - _classCallCheck(this, _class2); - - // pass in initial points if you want - this.x1 = Number.NaN; - this.y1 = Number.NaN; - this.x2 = Number.NaN; - this.y2 = Number.NaN; - this.addPoint(x1, y1); - 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; - } - - if (x < this.x1) this.x1 = x; - if (x > this.x2) this.x2 = x; - } - - if (!isNullish(y)) { - if (isNaN(this.y1) || isNaN(this.y2)) { - this.y1 = y; - this.y2 = y; - } - - if (y < this.y1) this.y1 = y; - if (y > this.y2) 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); - } - }, { - 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], - p1 = [p1x, p1y], - p2 = [p2x, p2y], - p3 = [p3x, p3y]; - 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 (var i = 0; i <= 1; i++) { - var _ret = _loop(i); - - if (_ret === "continue") continue; - } - } - }, { - key: "isPointInBox", - value: function isPointInBox(x, y) { - return this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2; - } - }]); - - return _class2; - }(); // transforms - - - svg.Transform = /*#__PURE__*/function () { - function _class3(v) { - var _this6 = this; - - _classCallCheck(this, _class3); - - this.Type = { - translate: function translate(s) { - _classCallCheck(this, translate); - - this.p = svg.CreatePoint(s); - - 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.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); - - 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.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) { - 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]); - }; - }, - scale: function scale(s) { - _classCallCheck(this, scale); - - 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.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]); - }; - }, - matrix: function matrix(s) { - _classCallCheck(this, matrix); - - 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.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; - } - - 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; - } - - 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; - } - - 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); - 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); - }); - } - }]); - - return _class3; - }(); // 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 - - var scaleX = width / desiredWidth; - var scaleY = height / desiredHeight; - var scaleMin = Math.min(scaleX, scaleY); - var scaleMax = Math.max(scaleX, scaleY); - - if (meetOrSlice === 'meet') { - desiredWidth *= scaleMin; - desiredHeight *= scaleMin; - } - - if (meetOrSlice === 'slice') { - desiredWidth *= scaleMax; - desiredHeight *= scaleMax; - } - - refX = new svg.Property('refX', refX); - refY = new svg.Property('refY', refY); - - if (refX.hasValue() && refY.hasValue()) { - ctx.translate(-scaleMin * refX.toPixels('x'), -scaleMin * refY.toPixels('y')); - } else { - // align - if (align.startsWith('xMid') && (meetOrSlice === 'meet' && scaleMin === scaleY || meetOrSlice === 'slice' && scaleMax === scaleY)) { - ctx.translate(width / 2.0 - desiredWidth / 2.0, 0); - } - - if (align.endsWith('YMid') && (meetOrSlice === 'meet' && scaleMin === scaleX || meetOrSlice === 'slice' && scaleMax === scaleX)) { - ctx.translate(0, height / 2.0 - desiredHeight / 2.0); - } - - if (align.startsWith('xMax') && (meetOrSlice === 'meet' && scaleMin === scaleY || meetOrSlice === 'slice' && scaleMax === scaleY)) { - ctx.translate(width - desiredWidth, 0); - } - - if (align.endsWith('YMax') && (meetOrSlice === 'meet' && scaleMin === scaleX || meetOrSlice === 'slice' && scaleMax === scaleX)) { - ctx.translate(0, height - desiredHeight); - } - } // scale - - - if (align === 'none') ctx.scale(scaleX, scaleY);else if (meetOrSlice === 'meet') ctx.scale(scaleMin, scaleMin);else if (meetOrSlice === 'slice') ctx.scale(scaleMax, scaleMax); // translate - - ctx.translate(isNullish(minX) ? 0 : -minX, isNullish(minY) ? 0 : -minY); - }; // elements - - - svg.Element = {}; - svg.EmptyProperty = new svg.Property('EMPTY', ''); - - svg.Element.ElementBase = /*#__PURE__*/function () { - function _class4(node) { - var _this7 = this; - - _classCallCheck(this, _class4); - - // Argument from inheriting class - this.captureTextNodes = arguments[1]; // eslint-disable-line prefer-rest-params - - this.attributes = {}; - this.styles = {}; - this.children = []; - - if (!isNullish(node) && node.nodeType === 1) { - // ELEMENT_NODE - // add children - _toConsumableArray(node.childNodes).forEach(function (childNode) { - if (childNode.nodeType === 1) { - _this7.addChild(childNode, true); // ELEMENT_NODE - - } - - if (_this7.captureTextNodes && (childNode.nodeType === 3 || childNode.nodeType === 4)) { - var text = childNode.nodeValue || childNode.text || ''; - - if (svg.trim(svg.compressSpaces(text)) !== '') { - _this7.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); - }); // add tag styles - - - var 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; - }); - } // add class styles - - - if (this.attribute('class').hasValue()) { - var classes = svg.compressSpaces(this.attribute('class').value).split(' '); - classes.forEach(function (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; - }); - } - - 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; - }); - } - }); - } // add id styles - - - if (this.attribute('id').hasValue()) { - var _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; - }); - } - } // add inline styles - - - if (this.attribute('style').hasValue()) { - var _styles2 = this.attribute('style').value.split(';'); - - _styles2.forEach(function (style) { - if (svg.trim(style) !== '') { - var _style$split = style.split(':'), - name = _style$split.name, - value = _style$split.value; - - name = svg.trim(name); - value = svg.trim(value); - _this7.styles[name] = new svg.Property(name, value); - } - }); - } // add id - - - if (this.attribute('id').hasValue()) { - if (isNullish(svg.Definitions[this.attribute('id').value])) { - svg.Definitions[this.attribute('id').value] = this; - } - } - } - } // get or create attribute - - - _createClass(_class4, [{ - key: "attribute", - value: function attribute(name, createIfNotExists) { - var 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; - } - }, { - key: "getHrefAttribute", - value: function getHrefAttribute() { - for (var a in this.attributes) { - if (a.endsWith(':href')) { - return this.attributes[a]; - } - } - - return svg.EmptyProperty; - } // get or create style, crawls up node tree - - }, { - key: "style", - value: function style(name, createIfNotExists, skipAncestors) { - var s = this.styles[name]; - if (!isNullish(s)) return s; - var a = this.attribute(name); - - if (!isNullish(a) && a.hasValue()) { - this.styles[name] = a; // move up to me to cache - - return a; - } - - if (skipAncestors !== true) { - var p = this.parent; - - if (!isNullish(p)) { - var ps = p.style(name); - - if (!isNullish(ps) && ps.hasValue()) { - return ps; - } - } - } - - if (createIfNotExists === true) { - s = new svg.Property(name, ''); - this.styles[name] = s; - } - - return s || svg.EmptyProperty; - } // base render - - }, { - 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('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); - } 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); - } - } - }]); - - return _class4; - }(); - - 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 (this.style('fill-opacity').hasValue()) { - var _fillStyle = new svg.Property('fill', ctx.fillStyle); - - _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(); - } - } - - 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]); - } - } - } - }, { - 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); - } - - _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); - } - - _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(); - - 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); - } - - _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'); - - 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); - } - }]); - - 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)) { - ctx.beginPath(); - ctx.moveTo(x, y); - } - - 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])]); - } - - markers.push([this.points[this.points.length - 1], markers[markers.length - 1][1]]); - return markers; - } - }]); - - 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); - - if (!isNullish(ctx)) { - ctx.lineTo(this.points[0].x, this.points[0].y); - ctx.closePath(); - } - - return bb; - } - }]); - - return _class13; - }(svg.Element.polyline); // path element - - - svg.Element.path = /*#__PURE__*/function (_svg$Element$PathElem6) { - _inherits(_class14, _svg$Element$PathElem6); - - var _super13 = _createSuper(_class14); - - function _class14(node) { - var _this9; - - _classCallCheck(this, _class14); - - _this9 = _super13.call(this, node); - - var d = _this9.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 - .replace(/([MmZzLlHhVvCcSsQqTtAa])(\S)/gm, '$1 $2') // separate commands from points - .replace(/(\S)([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2') // separate commands from points - .replace(/(\d)([+-])/gm, '$1 $2') // separate digits when no comma - .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 = { - tokens: d.split(' '), - reset: function reset() { - this.i = -1; - this.command = ''; - this.previousCommand = ''; - this.start = new svg.Point(0, 0); - this.control = new svg.Point(0, 0); - this.current = new svg.Point(0, 0); - this.points = []; - this.angles = []; - }, - isEnd: function isEnd() { - return this.i >= this.tokens.length - 1; - }, - isCommandOrEnd: function isCommandOrEnd() { - if (this.isEnd()) return true; - return !isNullish(this.tokens[this.i + 1].match(/^[A-Za-z]$/)); - }, - isRelativeCommand: function isRelativeCommand() { - switch (this.command) { - case 'm': - case 'l': - case 'h': - case 'v': - case 'c': - case 's': - case 'q': - case 't': - case 'a': - case 'z': - return true; - } - - return false; - }, - getToken: function getToken() { - this.i++; - return this.tokens[this.i]; - }, - getScalar: function getScalar() { - return Number.parseFloat(this.getToken()); - }, - nextCommand: function nextCommand() { - this.previousCommand = this.command; - this.command = this.getToken(); - }, - getPoint: function getPoint() { - var p = new svg.Point(this.getScalar(), this.getScalar()); - return this.makeAbsolute(p); - }, - getAsControlPoint: function getAsControlPoint() { - var p = this.getPoint(); - this.control = p; - return p; - }, - getAsCurrentPoint: function getAsCurrentPoint() { - var p = this.getPoint(); - this.current = p; - return p; - }, - getReflectedControlPoint: function 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); - return p; - }, - makeAbsolute: function makeAbsolute(p) { - if (this.isRelativeCommand()) { - p.x += this.current.x; - p.y += this.current.y; - } - - return p; - }, - addMarker: function 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); - } - - this.addMarkerAngle(p, isNullish(from) ? null : from.angleTo(p)); - }, - addMarkerAngle: function addMarkerAngle(p, a) { - this.points.push(p); - this.angles.push(a); - }, - getMarkerPoints: function getMarkerPoints() { - return this.points; - }, - getMarkerAngles: function getMarkerAngles() { - for (var i = 0; i < this.angles.length; i++) { - if (isNullish(this.angles[i])) { - for (var j = i + 1; j < this.angles.length; j++) { - if (!isNullish(this.angles[j])) { - this.angles[i] = this.angles[j]; - break; - } - } - } - } - - 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(); - - 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; - - 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; - - var _p2 = pp.getAsCurrentPoint(); - - pp.addMarker(_p2, c); - bb.addPoint(_p2.x, _p2.y); - if (!isNullish(ctx)) ctx.lineTo(_p2.x, _p2.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); - } - - 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; - } - } - - 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); - } - - _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 - - 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'); - - 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(); - } - } - - 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); - } - - _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 - - 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); - } - }]); - - 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); - } - - _createClass(_class17, [{ - key: "render", - value: function render(ctx) {// NOOP - } - }]); - - return _class17; - }(svg.Element.ElementBase); // 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) { - if (child.type === 'stop') { - _this10.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); - } - - _createClass(_class19, [{ - key: "getGradient", - value: function getGradient(ctx, element) { - var useBB = this.gradientUnits === 'objectBoundingBox' && element.getBoundingBox; - var bb = useBB ? element.getBoundingBox() : null; - - 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; - } - - 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 _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); - } - - _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; - - if (this.attribute('fx').hasValue()) { - fx = useBB ? bb.x() + bb.width() * this.attribute('fx').numValue() : this.attribute('fx').toPixels('x'); - } - - 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')); - } - - _this11.color = stopColor.value; - return _this11; - } - - return _class21; - }(svg.Element.ElementBase); // animation base element - - - svg.Element.AnimateBase = /*#__PURE__*/function (_svg$Element$ElementB7) { - _inherits(_class22, _svg$Element$ElementB7); - - var _super21 = _createSuper(_class22); - - 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; - } - - _createClass(_class22, [{ - key: "getProperty", - value: function getProperty() { - var attributeType = this.attribute('attributeType').value; - var attributeName = this.attribute('attributeName').value; - - if (attributeType === 'CSS') { - return this.parent.style(attributeName, true); - } - - return this.parent.attribute(attributeName, true); - } - }, { - key: "calcValue", - value: function calcValue() { - // OVERRIDE ME! - return ''; - } - }, { - 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 - - - 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; - } - - this.duration += delta; // if we're past the begin time - - var updated = false; - - if (this.begin < this.duration) { - var newValue = this.calcValue(); // tween - - if (this.attribute('type').hasValue()) { - // for transform, etc. - var type = this.attribute('type').value; - newValue = type + '(' + newValue + ')'; - } - - this.getProperty().value = newValue; - updated = true; - } - - return updated; - } // fraction of duration we've covered - - }, { - key: "progress", - value: function progress() { - var ret = { - progress: (this.duration - this.begin) / (this.maxDuration - this.begin) - }; - - if (this.values.hasValue()) { - var p = ret.progress * (this.values.value.length - 1); - var 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; - } - }]); - - 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); - } - - _createClass(_class23, [{ - key: "calcValue", - value: function calcValue() { - var p = this.progress(); // tween value linearly - - var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; - return newValue + this.initialUnits; - } - }]); - - 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); - } - - _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); - - 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) + ')'; - } - - return this.attribute('from').value; - } - }]); - - 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); - } - - _createClass(_class25, [{ - key: "calcValue", - value: function calcValue() { - var p = this.progress(); // tween value linearly - - 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; - } - }]); - - return _class25; - }(svg.Element.animate); // 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) { - if (child.type === 'font-face') { - _this13.fontFace = child; - - if (child.style('font-family').hasValue()) { - svg.Definitions[child.style('font-family').value] = _assertThisInitialized(_this13); - } - } else if (child.type === 'missing-glyph') { - _this13.missingGlyph = child; - } else if (child.type === 'glyph') { - if (child.arabicForm !== '') { - _this13.isRTL = true; - _this13.isArabic = true; - - if (typeof _this13.glyphs[child.unicode] === 'undefined') { - _this13.glyphs[child.unicode] = []; - } - - _this13.glyphs[child.unicode][child.arabicForm] = child; - } else { - _this13.glyphs[child.unicode] = child; - } - } - }); - - return _this13; - } - - return _class26; - }(svg.Element.ElementBase); // 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; - } - - return _class27; - }(svg.Element.ElementBase); // 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; - } - - return _class28; - }(svg.Element.path); // 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; - } - - return _class29; - }(svg.Element.path); // 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); - } - - _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); - } - - _createClass(_class31, [{ - key: "getGlyph", - value: function getGlyph(font, text, i) { - var c = text[i]; - var glyph = null; - - 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'; - - 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]; - } - - if (isNullish(glyph)) glyph = font.missingGlyph; - return glyph; - } - }, { - key: "renderChildren", - value: function renderChildren(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 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 (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 _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; - } - - _createClass(_class32, [{ - key: "getText", - value: function getText() { - return this.text; - } - }]); - - return _class32; - }(svg.Element.TextElementBase); // tref - - - svg.Element.tref = /*#__PURE__*/function (_svg$Element$TextElem2) { - _inherits(_class33, _svg$Element$TextElem2); - - var _super32 = _createSuper(_class33); - - function _class33() { - _classCallCheck(this, _class33); - - return _super32.apply(this, arguments); - } - - _createClass(_class33, [{ - key: "getText", - value: function getText() { - var element = this.getHrefAttribute().getDefinition(); - if (!isNullish(element)) return element.children[0].getText(); - return undefined; - } - }]); - - return _class33; - }(svg.Element.TextElementBase); // a element - - - svg.Element.a = /*#__PURE__*/function (_svg$Element$TextElem3) { - _inherits(_class34, _svg$Element$TextElem3); - - var _super33 = _createSuper(_class34); - - function _class34(node) { - var _this19; - - _classCallCheck(this, _class34); - - _this19 = _super33.call(this, node); - _this19.hasText = true; - - _toConsumableArray(node.childNodes).forEach(function (childNode) { - if (childNode.nodeType !== 3) { - _this19.hasText = false; - } - }); // this might contain text - - - _this19.text = _this19.hasText ? node.childNodes[0].nodeValue : ''; - return _this19; - } - - _createClass(_class34, [{ - key: "getText", - value: function getText() { - return this.text; - } - }, { - 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'; - } - }]); - - return _class34; - }(svg.Element.TextElementBase); // 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; - - if (href === '') { - return _possibleConstructorReturn(_this20); - } - - _this20._isSvg = href.match(/\.svg$/); - svg.Images.push(_assertThisInitialized(_this20)); - _this20.loaded = false; - - if (!_this20._isSvg) { - _this20.img = document.createElement('img'); - - if (svg.opts.useCORS === true) { - _this20.img.crossOrigin = 'Anonymous'; - } - - _this20.img.addEventListener('load', function () { - _this20.loaded = true; - }); - - _this20.img.addEventListener('error', function () { - svg.log('ERROR: image "' + href + '" not found'); - _this20.loaded = true; - }); - - _this20.img.src = href; - } else { - svg.ajax(href, true).then(function (img) { - // eslint-disable-line promise/prefer-await-to-then, promise/always-return - _this20.img = img; - _this20.loaded = true; - })["catch"](function (err) { - // eslint-disable-line promise/prefer-await-to-callbacks - _this20.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(); - - 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(); - } - }, { - 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); - } - - _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); - } - - _createClass(_class37, [{ - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); - - return _class37; - }(svg.Element.RenderedElementBase); // style element - - - svg.Element.style = /*#__PURE__*/function (_svg$Element$ElementB10) { - _inherits(_class38, _svg$Element$ElementB10); - - var _super37 = _createSuper(_class38); - - function _class38(node) { - var _this21; - - _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; - 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) { - if (svg.trim(cssDef) !== '') { - var _cssDef$split = cssDef.split('{'), - _cssDef$split2 = _slicedToArray(_cssDef$split, 2), - cssClasses = _cssDef$split2[0], - cssProps = _cssDef$split2[1]; - - cssClasses = cssClasses.split(','); - cssProps = cssProps.split(';'); - cssClasses.forEach(function (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); - - if (!isNullish(name) && !isNullish(value)) { - props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value)); - } - }); - 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) { - 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? - - var doc = svg.parseXml(svg.ajax(url)); - var fonts = doc.getElementsByTagName('font'); - - _toConsumableArray(fonts).forEach(function (font) { - font = svg.CreateElement(font); - svg.Definitions[fontFamily] = font; - }); - } - }); - } - } - }); - } - }); - return _this21; - } - - return _class38; - }(svg.Element.ElementBase); // 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; - } - - _createClass(_class39, [{ - key: "setContext", - value: function setContext(ctx) { - _get(_getPrototypeOf(_class39.prototype), "setContext", this).call(this, 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')); - } - }, { - 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; - - if (!isNullish(element)) { - var tempSvg = element; - - 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); - } - } - - var 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'); - - 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 - - - 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 - - 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); - } - - _createClass(_class41, [{ - key: "apply", - value: function apply(ctx) { - this.children.forEach(function (child) { - if (typeof child.path !== 'undefined') { - var transform = null; - - if (child.attribute('transform').hasValue()) { - transform = new svg.Transform(child.attribute('transform').value); - transform.apply(ctx); - } - - child.path(ctx); - ctx.clip(); - - if (transform) { - transform.unapply(ctx); - } - } - }); - } - }, { - key: "render", - value: function render(ctx) {// NO RENDER - } - }]); - - return _class41; - }(svg.Element.ElementBase); // filters - - - 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); - } - - _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); - } - - _createClass(_class43, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) {// TODO: implement - } - }]); - - return _class43; - }(svg.Element.ElementBase); - - svg.Element.feComposite = /*#__PURE__*/function (_svg$Element$ElementB15) { - _inherits(_class44, _svg$Element$ElementB15); - - var _super43 = _createSuper(_class44); - - function _class44() { - _classCallCheck(this, _class44); - - return _super43.apply(this, arguments); - } - - _createClass(_class44, [{ - key: "apply", - value: function apply(ctx, x, y, width, height) {// TODO: implement - } - }]); - - return _class44; - }(svg.Element.ElementBase); - /** - * @param {Uint8ClampedArray} img - * @param {Integer} x - * @param {Integer} y - * @param {Float} width - * @param {Float} height - * @param {Integer} rgba - * @returns {Integer} - */ - - - function imGet(img, x, y, width, height, rgba) { - return img[y * width * 4 + x * 4 + rgba]; - } - /** - * @param {Uint8ClampedArray} img - * @param {Integer} x - * @param {Integer} y - * @param {Float} width - * @param {Float} height - * @param {Integer} rgba - * @param {Float} val - * @returns {void} - */ - - - function imSet(img, x, y, width, height, rgba, val) { - img[y * width * 4 + x * 4 + rgba] = val; - } - - svg.Element.feColorMatrix = /*#__PURE__*/function (_svg$Element$ElementB16) { - _inherits(_class45, _svg$Element$ElementB16); - - 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')) { - // https://www.w3.org/TR/SVG/filters.html#feColorMatrixElement - case 'saturate': - { - var 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; - - var c = function c(m1, m2, m3) { - return m1 + Math.cos(a) * m2 + Math.sin(a) * m3; - }; - - matrix = [c(0.213, 0.787, -0.213), c(0.715, -0.715, -0.715), c(0.072, -0.072, 0.928), 0, 0, c(0.213, -0.213, 0.143), c(0.715, 0.285, 0.140), c(0.072, -0.072, -0.283), 0, 0, c(0.213, -0.213, -0.787), c(0.715, -0.715, 0.715), c(0.072, 0.928, 0.072), 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]; - break; - } - - case 'luminanceToAlpha': - matrix = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.2125, 0.7154, 0.0721, 0, 0, 0, 0, 0, 0, 1]; - break; - } - - _this23.matrix = matrix; - - _this23._m = function (i, v) { - var 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 - - var 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)); - } - } - - 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; - } - - _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); - } - - 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); - } - - return _class48; - }(svg.Element.ElementBase); - - svg.Element.MISSING = /*#__PURE__*/function (_svg$Element$ElementB20) { - _inherits(_class49, _svg$Element$ElementB20); - - var _super48 = _createSuper(_class49); - - function _class49(node) { - var _this25; - - _classCallCheck(this, _class49); - - _this25 = _super48.call(this); - svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.'); - return _this25; - } - - return _class49; - }(svg.Element.ElementBase); // element factory - - - svg.CreateElement = function (node) { - var className = node.nodeName.replace(/^[^:]+:/, '') // remove namespace - .replace(/-/g, ''); // remove dashes - - var e; - - if (typeof svg.Element[className] !== 'undefined') { - e = new svg.Element[className](node); - } else { - e = new svg.Element.MISSING(node); - } - - e.type = node.nodeName; - return e; - }; // 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.loadXml = function (ctx, xml) { - return svg.loadXmlDoc(ctx, svg.parseXml(xml)); - }; - - svg.loadXmlDoc = function (ctx, dom) { - var res; - svg.init(ctx); - - var mapXY = function mapXY(p) { - var e = ctx.canvas; - - while (e) { - p.x -= e.offsetLeft; - p.y -= e.offsetTop; - e = e.offsetParent; - } - - if (window.scrollX) p.x += window.scrollX; - if (window.scrollY) p.y += window.scrollY; - return p; - }; // bind mouse - - - 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; - - 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; - - svg.Mouse.onmousemove(x, y); - }); - } - - var e = svg.CreateElement(dom.documentElement); - e.root = true; // render loop - - var isFirstRender = true; - - var draw = function draw(resolve) { - svg.ViewPort.Clear(); - - if (ctx.canvas.parentNode) { - svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight); - } - - if (svg.opts.ignoreDimensions !== true) { - // set canvas size - if (e.style('width').hasValue()) { - ctx.canvas.width = e.style('width').toPixels('x'); - ctx.canvas.style.width = ctx.canvas.width + 'px'; - } - - if (e.style('height').hasValue()) { - ctx.canvas.height = e.style('height').toPixels('y'); - ctx.canvas.style.height = ctx.canvas.height + 'px'; - } - } - - var cWidth = ctx.canvas.clientWidth || ctx.canvas.width; - var 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'); - cHeight = e.style('height').toPixels('y'); - } - - svg.ViewPort.SetCurrent(cWidth, cHeight); - - if (!isNullish(svg.opts.offsetX)) { - e.attribute('x', true).value = svg.opts.offsetX; - } - - if (!isNullish(svg.opts.offsetY)) { - e.attribute('y', true).value = svg.opts.offsetY; - } - - if (!isNullish(svg.opts.scaleWidth) || !isNullish(svg.opts.scaleHeight)) { - var viewBox = svg.ToNumberArray(e.attribute('viewBox').value); - var xRatio = null, - yRatio = null; - - if (!isNullish(svg.opts.scaleWidth)) { - if (e.attribute('width').hasValue()) { - xRatio = e.attribute('width').toPixels('x') / svg.opts.scaleWidth; - } else if (!isNaN(viewBox[2])) { - xRatio = viewBox[2] / svg.opts.scaleWidth; - } - } - - if (!isNullish(svg.opts.scaleHeight)) { - if (e.attribute('height').hasValue()) { - yRatio = e.attribute('height').toPixels('y') / svg.opts.scaleHeight; - } else if (!isNaN(viewBox[3])) { - yRatio = viewBox[3] / svg.opts.scaleHeight; - } - } - - if (isNullish(xRatio)) { - xRatio = yRatio; - } - - if (isNullish(yRatio)) { - yRatio = xRatio; - } - - e.attribute('width', true).value = svg.opts.scaleWidth; - e.attribute('height', true).value = svg.opts.scaleHeight; - e.attribute('viewBox', true).value = '0 0 ' + cWidth * xRatio + ' ' + cHeight * yRatio; - e.attribute('preserveAspectRatio', true).value = 'none'; - } // clear and render - - - if (svg.opts.ignoreClear !== true) { - ctx.clearRect(0, 0, cWidth, cHeight); - } - - e.render(ctx); - - if (isFirstRender) { - isFirstRender = false; - resolve(dom); - } - }; - - var waitingForImages = true; - svg.intervalID = setInterval(function () { - var needUpdate = false; - - if (waitingForImages && svg.ImagesLoaded()) { - waitingForImages = false; - needUpdate = true; - } // need update from mouse events? - - - if (svg.opts.ignoreMouse !== true) { - needUpdate = needUpdate || svg.Mouse.hasEvents(); - } // need update from animations? - - - if (svg.opts.ignoreAnimation !== true) { - svg.Animations.forEach(function (animation) { - var needAnimationUpdate = animation.update(1000 / svg.FRAMERATE); - needUpdate = needUpdate || needAnimationUpdate; - }); - } // need update from redraw? - - - if (typeof svg.opts.forceRedraw === 'function') { - if (svg.opts.forceRedraw() === true) { - needUpdate = true; - } - } // render if needed - - - if (needUpdate) { - draw(res); - svg.Mouse.runEvents(); // run and clear our events - } - }, 1000 / svg.FRAMERATE); // Todo: Replace with an image loading Promise utility? - // eslint-disable-next-line promise/avoid-new - - return new Promise(function (resolve, reject) { - if (svg.ImagesLoaded()) { - waitingForImages = false; - draw(resolve); - return; - } - - res = resolve; - }); - }; - - svg.stop = function () { - if (svg.intervalID) { - clearInterval(svg.intervalID); - } - }; - - svg.Mouse = { - events: [], - hasEvents: function hasEvents() { - return this.events.length !== 0; - }, - onclick: function onclick(x, y) { - this.events.push({ - type: 'onclick', - x: x, - y: y, - run: function run(e) { - if (e.onclick) e.onclick(); - } - }); - }, - onmousemove: function onmousemove(x, y) { - this.events.push({ - type: 'onmousemove', - x: x, - y: y, - run: function 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; - - if (ctx.isPointInPath && ctx.isPointInPath(x, y)) { - _this26.eventElements[i] = element; - } - }); - }, - checkBoundingBox: function checkBoundingBox(element, bb) { - var _this27 = this; - - this.events.forEach(function (_ref14, i) { - var x = _ref14.x, - y = _ref14.y; - - if (bb.isPointInBox(x, y)) { - _this27.eventElements[i] = element; - } - }); - }, - runEvents: function runEvents() { - var _this28 = this; - - svg.ctx.canvas.style.cursor = ''; - this.events.forEach(function (e, i) { - var element = _this28.eventElements[i]; - - while (element) { - e.run(element); - element = element.parent; - } - }); // done running, clear - - this.events = []; - this.eventElements = []; - } - }; - return svg; - } - - if (typeof CanvasRenderingContext2D !== 'undefined') { - CanvasRenderingContext2D.prototype.drawSvg = function (s, dx, dy, dw, dh) { - canvg(this.canvas, s, { - ignoreMouse: true, - ignoreAnimation: true, - ignoreDimensions: true, - ignoreClear: true, - offsetX: dx, - offsetY: dy, - scaleWidth: dw, - scaleHeight: dh - }); - }; - } - - exports.canvg = canvg; - - return exports; - -}({})); diff --git a/dist/dom-polyfill.js b/dist/dom-polyfill.js deleted file mode 100644 index bd2ec167..00000000 --- a/dist/dom-polyfill.js +++ /dev/null @@ -1,165 +0,0 @@ -(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 - - /** - * @module DOMPolyfill - */ - - /** - * - * @param {Node} o - * @param {module:DOMPolyfill~ParentNode|module:DOMPolyfill~ChildNode} ps - * @returns {void} - */ - function mixin(o, ps) { - if (!o) return; - Object.keys(ps).forEach(function (p) { - if (p in o || p in o.prototype) { - return; - } - - try { - Object.defineProperty(o.prototype, p, Object.getOwnPropertyDescriptor(ps, p)); - } catch (ex) { - // Throws in IE8; just copy it - o[p] = ps[p]; - } - }); - } - /** - * - * @param {Node[]} nodes - * @returns {Node} - */ - - - function convertNodesIntoANode(nodes) { - nodes = nodes.map(function (node) { - var isNode = node && _typeof(node) === 'object' && 'nodeType' in node; - return isNode ? node : document.createTextNode(node); - }); - - if (nodes.length === 1) { - return nodes[0]; - } - - var node = document.createDocumentFragment(); - nodes.forEach(function (n) { - // // eslint-disable-next-line unicorn/prefer-node-append - 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]; - } - - 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]; - } - - nodes = convertNodesIntoANode(nodes); // // eslint-disable-next-line unicorn/prefer-node-append - - this.appendChild(nodes); - } - }; - mixin(Document || HTMLDocument, ParentNode); // HTMLDocument for IE8 - - mixin(DocumentFragment, ParentNode); - mixin(Element, ParentNode); // Mixin ChildNode - // https://dom.spec.whatwg.org/#interface-childnode - - var ChildNode = { - before: function before() { - var 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]; - } - - while (nodes.includes(viablePreviousSibling)) { - viablePreviousSibling = viablePreviousSibling.previousSibling; - } - - var 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]; - } - - while (nodes.includes(viableNextSibling)) { - viableNextSibling = viableNextSibling.nextSibling; - } - - var 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]; - } - - while (nodes.includes(viableNextSibling)) { - viableNextSibling = viableNextSibling.nextSibling; - } - - var node = convertNodesIntoANode(nodes); - - if (this.parentNode === parent) { - parent.replaceChild(node, this); - } else { - // eslint-disable-next-line unicorn/prefer-modern-dom-apis - parent.insertBefore(node, viableNextSibling); - } - }, - remove: function remove() { - if (!this.parentNode) { - return; - } - - this.parentNode.removeChild(this); // eslint-disable-line unicorn/prefer-node-remove - } - }; - mixin(DocumentType, ChildNode); - mixin(Element, ChildNode); - mixin(CharacterData, ChildNode); - -}()); diff --git a/dist/extensions/closepath.png b/dist/extensions/closepath.png new file mode 100644 index 00000000..7364bfc3 Binary files /dev/null and b/dist/extensions/closepath.png differ diff --git a/dist/extensions/closepath_icons.svg b/dist/extensions/closepath_icons.svg new file mode 100644 index 00000000..b103a6ee --- /dev/null +++ b/dist/extensions/closepath_icons.svg @@ -0,0 +1,41 @@ + + + + + Layer 1 + + + + + + + + + + + + + + + + + Layer 1 + + + + + + + + + + + + + + + + + + + diff --git a/dist/extensions/ext-arrows.js b/dist/extensions/ext-arrows.js index 707ab068..878d53a4 100644 --- a/dist/extensions/ext-arrows.js +++ b/dist/extensions/ext-arrows.js @@ -1,398 +1,326 @@ -var svgEditorExtension_arrows = (function () { - 'use strict'; +/** + * @file ext-arrows.js + * + * @license MIT + * + * @copyright 2010 Alexis Deveria + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; +export default { + name: 'arrows', + 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} + */ + function setArrowNonce (win, n) { + randomizeIds = true; + arrowprefix = prefix + n + '_'; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; } - if (info.done) { - resolve(value); + /** + * @param {Window} win + * @returns {void} + */ + function unsetArrowNonce (win) { + randomizeIds = false; + arrowprefix = prefix; + pathdata.fw.id = arrowprefix + 'fw'; + pathdata.bk.id = arrowprefix + 'bk'; + } + + svgCanvas.bind('setnonce', setArrowNonce); + svgCanvas.bind('unsetnonce', unsetArrowNonce); + + if (randomizeIds) { + arrowprefix = prefix + nonce + '_'; } else { - Promise.resolve(value).then(_next, _throw); + arrowprefix = prefix; } - } - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + 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'} + }; - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + /** + * Gets linked element. + * @param {Element} elem + * @param {string} attr + * @returns {Element} + */ + function getLinked (elem, attr) { + const str = elem.getAttribute(attr); + if (!str) { return null; } + const 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); + } + + /** + * @param {boolean} on + * @returns {void} + */ + function showPanel (on) { + $('#arrow_panel').toggle(on); + 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 (mid.includes('bk')) { + val = 'mid_bk'; + } } - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + if (!start && !mid && !end) { + val = 'none'; } - _next(undefined); + $('#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; + } + }); + + 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; + $.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); + } + } }; } - - /** - * @file ext-arrows.js - * - * @license MIT - * - * @copyright 2010 Alexis Deveria - * - */ - 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); - - 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; - } - }); - - 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; - $.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 - - - var 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); - }; - - 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]; - - if (type === 'mid') { - data.refx = 5; - } - - var marker = svgCanvas.getElem(id); - - 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 - - } - }); - var arrow = addElem({ - element: 'path', - attr: { - d: data.d, - fill: '#000000' - } - }); - marker.append(arrow); - svgCanvas.findDefs().append(marker); - } - - marker.setAttribute('refX', data.refx); - return marker; - }; - - 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); - - 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 (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(); - } - } - }, _callee2); - }))(); - } - }; - - return extArrows; - -}()); +}; diff --git a/dist/extensions/ext-closepath.js b/dist/extensions/ext-closepath.js index c88b8af0..137ec2aa 100644 --- a/dist/extensions/ext-closepath.js +++ b/dist/extensions/ext-closepath.js @@ -1,2583 +1,101 @@ -var svgEditorExtension_closepath = (function () { - 'use strict'; +/** + * @file ext-closepath.js + * + * @license MIT + * + * @copyright 2010 Jeff Schiller + * + */ +import '../../common/svgpathseg.js'; - 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); - }); +// This extension adds a simple button to the contextual panel for paths +// The button toggles whether the path is open or closed +export default { + name: 'closepath', + async init ({importLocale, $}) { + const strings = await importLocale(); + const svgEditor = this; + let selElems; + 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(); }; - } - - 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 + const showPanel = function (on) { + $('#closepath_panel').toggle(on); + if (on) { + const path = selElems[0]; + if (path) { updateButton(path); } } - }); - 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 _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); + const toggleClosed = function () { + const path = selElems[0]; + if (path) { + const seglist = path.pathSegList, + last = seglist.numberOfItems - 1; + // is closed + if (seglist.getItem(last).pathSegType === 1) { + seglist.removeItem(last); + } else { + seglist.appendItem(path.createSVGPathSegClosePath()); + } + updateButton(path); } + }; - return _possibleConstructorReturn(this, result); + const buttons = [ + { + id: 'tool_openpath', + icon: svgEditor.curConfig.extIconsPath + 'openpath.png', + type: 'context', + panel: 'closepath_panel', + events: { + click () { + toggleClosed(); + } + } + }, + { + id: 'tool_closepath', + icon: svgEditor.curConfig.extIconsPath + 'closepath.png', + type: 'context', + panel: 'closepath_panel', + events: { + click () { + toggleClosed(); + } + } + } + ]; + + return { + name: strings.name, + svgicons: svgEditor.curConfig.extIconsPath + 'closepath_icons.svg', + buttons: strings.buttons.map((button, i) => { + return Object.assign(buttons[i], button); + }), + callback () { + $('#closepath_panel').hide(); + }, + 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); + } + } + } }; } - - /* eslint-disable import/unambiguous, max-len */ - - /* globals SVGPathSeg, SVGPathSegMovetoRel, SVGPathSegMovetoAbs, - SVGPathSegMovetoRel, SVGPathSegLinetoRel, SVGPathSegLinetoAbs, - SVGPathSegLinetoHorizontalRel, SVGPathSegLinetoHorizontalAbs, - SVGPathSegLinetoVerticalRel, SVGPathSegLinetoVerticalAbs, - SVGPathSegClosePath, SVGPathSegCurvetoCubicRel, - SVGPathSegCurvetoCubicAbs, SVGPathSegCurvetoCubicSmoothRel, - SVGPathSegCurvetoCubicSmoothAbs, SVGPathSegCurvetoQuadraticRel, - SVGPathSegCurvetoQuadraticAbs, SVGPathSegCurvetoQuadraticSmoothRel, - SVGPathSegCurvetoQuadraticSmoothAbs, SVGPathSegArcRel, SVGPathSegArcAbs */ - - /** - * 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. - */ - - /* 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 - (function () { - if (!('SVGPathSeg' in window)) { - // Spec: https://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg - var _SVGPathSeg = /*#__PURE__*/function () { - function _SVGPathSeg(type, typeAsLetter, owningPathSegList) { - _classCallCheck(this, _SVGPathSeg); - - 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. - - - _createClass(_SVGPathSeg, [{ - key: "_segmentChanged", - value: function _segmentChanged() { - if (this._owningPathSegList) { - this._owningPathSegList.segmentChanged(this); - } - } - }]); - - return _SVGPathSeg; - }(); - - _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; - - var _SVGPathSegClosePath = /*#__PURE__*/function (_SVGPathSeg2) { - _inherits(_SVGPathSegClosePath, _SVGPathSeg2); - - var _super = _createSuper(_SVGPathSegClosePath); - - function _SVGPathSegClosePath(owningPathSegList) { - _classCallCheck(this, _SVGPathSegClosePath); - - return _super.call(this, _SVGPathSeg.PATHSEG_CLOSEPATH, 'z', owningPathSegList); - } - - _createClass(_SVGPathSegClosePath, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegClosePath]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegClosePath(undefined); - } - }]); - - return _SVGPathSegClosePath; - }(_SVGPathSeg); - - var _SVGPathSegMovetoAbs = /*#__PURE__*/function (_SVGPathSeg3) { - _inherits(_SVGPathSegMovetoAbs, _SVGPathSeg3); - - var _super2 = _createSuper(_SVGPathSegMovetoAbs); - - function _SVGPathSegMovetoAbs(owningPathSegList, x, y) { - var _this; - - _classCallCheck(this, _SVGPathSegMovetoAbs); - - _this = _super2.call(this, _SVGPathSeg.PATHSEG_MOVETO_ABS, 'M', owningPathSegList); - _this._x = x; - _this._y = y; - return _this; - } - - _createClass(_SVGPathSegMovetoAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegMovetoAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegMovetoAbs(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegMovetoAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegMovetoAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegMovetoRel = /*#__PURE__*/function (_SVGPathSeg4) { - _inherits(_SVGPathSegMovetoRel, _SVGPathSeg4); - - var _super3 = _createSuper(_SVGPathSegMovetoRel); - - function _SVGPathSegMovetoRel(owningPathSegList, x, y) { - var _this2; - - _classCallCheck(this, _SVGPathSegMovetoRel); - - _this2 = _super3.call(this, _SVGPathSeg.PATHSEG_MOVETO_REL, 'm', owningPathSegList); - _this2._x = x; - _this2._y = y; - return _this2; - } - - _createClass(_SVGPathSegMovetoRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegMovetoRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegMovetoRel(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegMovetoRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegMovetoRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegLinetoAbs = /*#__PURE__*/function (_SVGPathSeg5) { - _inherits(_SVGPathSegLinetoAbs, _SVGPathSeg5); - - var _super4 = _createSuper(_SVGPathSegLinetoAbs); - - function _SVGPathSegLinetoAbs(owningPathSegList, x, y) { - var _this3; - - _classCallCheck(this, _SVGPathSegLinetoAbs); - - _this3 = _super4.call(this, _SVGPathSeg.PATHSEG_LINETO_ABS, 'L', owningPathSegList); - _this3._x = x; - _this3._y = y; - return _this3; - } - - _createClass(_SVGPathSegLinetoAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoAbs(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegLinetoAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegLinetoAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegLinetoRel = /*#__PURE__*/function (_SVGPathSeg6) { - _inherits(_SVGPathSegLinetoRel, _SVGPathSeg6); - - var _super5 = _createSuper(_SVGPathSegLinetoRel); - - function _SVGPathSegLinetoRel(owningPathSegList, x, y) { - var _this4; - - _classCallCheck(this, _SVGPathSegLinetoRel); - - _this4 = _super5.call(this, _SVGPathSeg.PATHSEG_LINETO_REL, 'l', owningPathSegList); - _this4._x = x; - _this4._y = y; - return _this4; - } - - _createClass(_SVGPathSegLinetoRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoRel(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegLinetoRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegLinetoRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoCubicAbs = /*#__PURE__*/function (_SVGPathSeg7) { - _inherits(_SVGPathSegCurvetoCubicAbs, _SVGPathSeg7); - - var _super6 = _createSuper(_SVGPathSegCurvetoCubicAbs); - - function _SVGPathSegCurvetoCubicAbs(owningPathSegList, x, y, x1, y1, x2, y2) { - var _this5; - - _classCallCheck(this, _SVGPathSegCurvetoCubicAbs); - - _this5 = _super6.call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS, 'C', owningPathSegList); - _this5._x = x; - _this5._y = y; - _this5._x1 = x1; - _this5._y1 = y1; - _this5._x2 = x2; - _this5._y2 = y2; - return _this5; - } - - _createClass(_SVGPathSegCurvetoCubicAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoCubicAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoCubicAbs(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); - } - }]); - - return _SVGPathSegCurvetoCubicAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoCubicAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x1: { - get: function get() { - return this._x1; - }, - set: function set(x1) { - this._x1 = x1; - - this._segmentChanged(); - }, - enumerable: true - }, - y1: { - get: function get() { - return this._y1; - }, - set: function set(y1) { - this._y1 = y1; - - this._segmentChanged(); - }, - enumerable: true - }, - x2: { - get: function get() { - return this._x2; - }, - set: function set(x2) { - this._x2 = x2; - - this._segmentChanged(); - }, - enumerable: true - }, - y2: { - get: function get() { - return this._y2; - }, - set: function set(y2) { - this._y2 = y2; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoCubicRel = /*#__PURE__*/function (_SVGPathSeg8) { - _inherits(_SVGPathSegCurvetoCubicRel, _SVGPathSeg8); - - var _super7 = _createSuper(_SVGPathSegCurvetoCubicRel); - - function _SVGPathSegCurvetoCubicRel(owningPathSegList, x, y, x1, y1, x2, y2) { - var _this6; - - _classCallCheck(this, _SVGPathSegCurvetoCubicRel); - - _this6 = _super7.call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, 'c', owningPathSegList); - _this6._x = x; - _this6._y = y; - _this6._x1 = x1; - _this6._y1 = y1; - _this6._x2 = x2; - _this6._y2 = y2; - return _this6; - } - - _createClass(_SVGPathSegCurvetoCubicRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoCubicRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoCubicRel(undefined, this._x, this._y, this._x1, this._y1, this._x2, this._y2); - } - }]); - - return _SVGPathSegCurvetoCubicRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoCubicRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x1: { - get: function get() { - return this._x1; - }, - set: function set(x1) { - this._x1 = x1; - - this._segmentChanged(); - }, - enumerable: true - }, - y1: { - get: function get() { - return this._y1; - }, - set: function set(y1) { - this._y1 = y1; - - this._segmentChanged(); - }, - enumerable: true - }, - x2: { - get: function get() { - return this._x2; - }, - set: function set(x2) { - this._x2 = x2; - - this._segmentChanged(); - }, - enumerable: true - }, - y2: { - get: function get() { - return this._y2; - }, - set: function set(y2) { - this._y2 = y2; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoQuadraticAbs = /*#__PURE__*/function (_SVGPathSeg9) { - _inherits(_SVGPathSegCurvetoQuadraticAbs, _SVGPathSeg9); - - var _super8 = _createSuper(_SVGPathSegCurvetoQuadraticAbs); - - function _SVGPathSegCurvetoQuadraticAbs(owningPathSegList, x, y, x1, y1) { - var _this7; - - _classCallCheck(this, _SVGPathSegCurvetoQuadraticAbs); - - _this7 = _super8.call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS, 'Q', owningPathSegList); - _this7._x = x; - _this7._y = y; - _this7._x1 = x1; - _this7._y1 = y1; - return _this7; - } - - _createClass(_SVGPathSegCurvetoQuadraticAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoQuadraticAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoQuadraticAbs(undefined, this._x, this._y, this._x1, this._y1); - } - }]); - - return _SVGPathSegCurvetoQuadraticAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoQuadraticAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x1: { - get: function get() { - return this._x1; - }, - set: function set(x1) { - this._x1 = x1; - - this._segmentChanged(); - }, - enumerable: true - }, - y1: { - get: function get() { - return this._y1; - }, - set: function set(y1) { - this._y1 = y1; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoQuadraticRel = /*#__PURE__*/function (_SVGPathSeg10) { - _inherits(_SVGPathSegCurvetoQuadraticRel, _SVGPathSeg10); - - var _super9 = _createSuper(_SVGPathSegCurvetoQuadraticRel); - - function _SVGPathSegCurvetoQuadraticRel(owningPathSegList, x, y, x1, y1) { - var _this8; - - _classCallCheck(this, _SVGPathSegCurvetoQuadraticRel); - - _this8 = _super9.call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL, 'q', owningPathSegList); - _this8._x = x; - _this8._y = y; - _this8._x1 = x1; - _this8._y1 = y1; - return _this8; - } - - _createClass(_SVGPathSegCurvetoQuadraticRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoQuadraticRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x1 + ' ' + this._y1 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoQuadraticRel(undefined, this._x, this._y, this._x1, this._y1); - } - }]); - - return _SVGPathSegCurvetoQuadraticRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoQuadraticRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x1: { - get: function get() { - return this._x1; - }, - set: function set(x1) { - this._x1 = x1; - - this._segmentChanged(); - }, - enumerable: true - }, - y1: { - get: function get() { - return this._y1; - }, - set: function set(y1) { - this._y1 = y1; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegArcAbs = /*#__PURE__*/function (_SVGPathSeg11) { - _inherits(_SVGPathSegArcAbs, _SVGPathSeg11); - - var _super10 = _createSuper(_SVGPathSegArcAbs); - - function _SVGPathSegArcAbs(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { - var _this9; - - _classCallCheck(this, _SVGPathSegArcAbs); - - _this9 = _super10.call(this, _SVGPathSeg.PATHSEG_ARC_ABS, 'A', owningPathSegList); - _this9._x = x; - _this9._y = y; - _this9._r1 = r1; - _this9._r2 = r2; - _this9._angle = angle; - _this9._largeArcFlag = largeArcFlag; - _this9._sweepFlag = sweepFlag; - return _this9; - } - - _createClass(_SVGPathSegArcAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegArcAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegArcAbs(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); - } - }]); - - return _SVGPathSegArcAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegArcAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - r1: { - get: function get() { - return this._r1; - }, - set: function set(r1) { - this._r1 = r1; - - this._segmentChanged(); - }, - enumerable: true - }, - r2: { - get: function get() { - return this._r2; - }, - set: function set(r2) { - this._r2 = r2; - - this._segmentChanged(); - }, - enumerable: true - }, - angle: { - get: function get() { - return this._angle; - }, - set: function set(angle) { - this._angle = angle; - - this._segmentChanged(); - }, - enumerable: true - }, - largeArcFlag: { - get: function get() { - return this._largeArcFlag; - }, - set: function set(largeArcFlag) { - this._largeArcFlag = largeArcFlag; - - this._segmentChanged(); - }, - enumerable: true - }, - sweepFlag: { - get: function get() { - return this._sweepFlag; - }, - set: function set(sweepFlag) { - this._sweepFlag = sweepFlag; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegArcRel = /*#__PURE__*/function (_SVGPathSeg12) { - _inherits(_SVGPathSegArcRel, _SVGPathSeg12); - - var _super11 = _createSuper(_SVGPathSegArcRel); - - function _SVGPathSegArcRel(owningPathSegList, x, y, r1, r2, angle, largeArcFlag, sweepFlag) { - var _this10; - - _classCallCheck(this, _SVGPathSegArcRel); - - _this10 = _super11.call(this, _SVGPathSeg.PATHSEG_ARC_REL, 'a', owningPathSegList); - _this10._x = x; - _this10._y = y; - _this10._r1 = r1; - _this10._r2 = r2; - _this10._angle = angle; - _this10._largeArcFlag = largeArcFlag; - _this10._sweepFlag = sweepFlag; - return _this10; - } - - _createClass(_SVGPathSegArcRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegArcRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._r1 + ' ' + this._r2 + ' ' + this._angle + ' ' + (this._largeArcFlag ? '1' : '0') + ' ' + (this._sweepFlag ? '1' : '0') + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegArcRel(undefined, this._x, this._y, this._r1, this._r2, this._angle, this._largeArcFlag, this._sweepFlag); - } - }]); - - return _SVGPathSegArcRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegArcRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - r1: { - get: function get() { - return this._r1; - }, - set: function set(r1) { - this._r1 = r1; - - this._segmentChanged(); - }, - enumerable: true - }, - r2: { - get: function get() { - return this._r2; - }, - set: function set(r2) { - this._r2 = r2; - - this._segmentChanged(); - }, - enumerable: true - }, - angle: { - get: function get() { - return this._angle; - }, - set: function set(angle) { - this._angle = angle; - - this._segmentChanged(); - }, - enumerable: true - }, - largeArcFlag: { - get: function get() { - return this._largeArcFlag; - }, - set: function set(largeArcFlag) { - this._largeArcFlag = largeArcFlag; - - this._segmentChanged(); - }, - enumerable: true - }, - sweepFlag: { - get: function get() { - return this._sweepFlag; - }, - set: function set(sweepFlag) { - this._sweepFlag = sweepFlag; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegLinetoHorizontalAbs = /*#__PURE__*/function (_SVGPathSeg13) { - _inherits(_SVGPathSegLinetoHorizontalAbs, _SVGPathSeg13); - - var _super12 = _createSuper(_SVGPathSegLinetoHorizontalAbs); - - function _SVGPathSegLinetoHorizontalAbs(owningPathSegList, x) { - var _this11; - - _classCallCheck(this, _SVGPathSegLinetoHorizontalAbs); - - _this11 = _super12.call(this, _SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS, 'H', owningPathSegList); - _this11._x = x; - return _this11; - } - - _createClass(_SVGPathSegLinetoHorizontalAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoHorizontalAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoHorizontalAbs(undefined, this._x); - } - }]); - - return _SVGPathSegLinetoHorizontalAbs; - }(_SVGPathSeg); - - Object.defineProperty(_SVGPathSegLinetoHorizontalAbs.prototype, 'x', { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }); - - var _SVGPathSegLinetoHorizontalRel = /*#__PURE__*/function (_SVGPathSeg14) { - _inherits(_SVGPathSegLinetoHorizontalRel, _SVGPathSeg14); - - var _super13 = _createSuper(_SVGPathSegLinetoHorizontalRel); - - function _SVGPathSegLinetoHorizontalRel(owningPathSegList, x) { - var _this12; - - _classCallCheck(this, _SVGPathSegLinetoHorizontalRel); - - _this12 = _super13.call(this, _SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL, 'h', owningPathSegList); - _this12._x = x; - return _this12; - } - - _createClass(_SVGPathSegLinetoHorizontalRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoHorizontalRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoHorizontalRel(undefined, this._x); - } - }]); - - return _SVGPathSegLinetoHorizontalRel; - }(_SVGPathSeg); - - Object.defineProperty(_SVGPathSegLinetoHorizontalRel.prototype, 'x', { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }); - - var _SVGPathSegLinetoVerticalAbs = /*#__PURE__*/function (_SVGPathSeg15) { - _inherits(_SVGPathSegLinetoVerticalAbs, _SVGPathSeg15); - - var _super14 = _createSuper(_SVGPathSegLinetoVerticalAbs); - - function _SVGPathSegLinetoVerticalAbs(owningPathSegList, y) { - var _this13; - - _classCallCheck(this, _SVGPathSegLinetoVerticalAbs); - - _this13 = _super14.call(this, _SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS, 'V', owningPathSegList); - _this13._y = y; - return _this13; - } - - _createClass(_SVGPathSegLinetoVerticalAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoVerticalAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoVerticalAbs(undefined, this._y); - } - }]); - - return _SVGPathSegLinetoVerticalAbs; - }(_SVGPathSeg); - - Object.defineProperty(_SVGPathSegLinetoVerticalAbs.prototype, 'y', { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }); - - var _SVGPathSegLinetoVerticalRel = /*#__PURE__*/function (_SVGPathSeg16) { - _inherits(_SVGPathSegLinetoVerticalRel, _SVGPathSeg16); - - var _super15 = _createSuper(_SVGPathSegLinetoVerticalRel); - - function _SVGPathSegLinetoVerticalRel(owningPathSegList, y) { - var _this14; - - _classCallCheck(this, _SVGPathSegLinetoVerticalRel); - - _this14 = _super15.call(this, _SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL, 'v', owningPathSegList); - _this14._y = y; - return _this14; - } - - _createClass(_SVGPathSegLinetoVerticalRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegLinetoVerticalRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegLinetoVerticalRel(undefined, this._y); - } - }]); - - return _SVGPathSegLinetoVerticalRel; - }(_SVGPathSeg); - - Object.defineProperty(_SVGPathSegLinetoVerticalRel.prototype, 'y', { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }); - - var _SVGPathSegCurvetoCubicSmoothAbs = /*#__PURE__*/function (_SVGPathSeg17) { - _inherits(_SVGPathSegCurvetoCubicSmoothAbs, _SVGPathSeg17); - - var _super16 = _createSuper(_SVGPathSegCurvetoCubicSmoothAbs); - - function _SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, x, y, x2, y2) { - var _this15; - - _classCallCheck(this, _SVGPathSegCurvetoCubicSmoothAbs); - - _this15 = _super16.call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS, 'S', owningPathSegList); - _this15._x = x; - _this15._y = y; - _this15._x2 = x2; - _this15._y2 = y2; - return _this15; - } - - _createClass(_SVGPathSegCurvetoCubicSmoothAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoCubicSmoothAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoCubicSmoothAbs(undefined, this._x, this._y, this._x2, this._y2); - } - }]); - - return _SVGPathSegCurvetoCubicSmoothAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoCubicSmoothAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x2: { - get: function get() { - return this._x2; - }, - set: function set(x2) { - this._x2 = x2; - - this._segmentChanged(); - }, - enumerable: true - }, - y2: { - get: function get() { - return this._y2; - }, - set: function set(y2) { - this._y2 = y2; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoCubicSmoothRel = /*#__PURE__*/function (_SVGPathSeg18) { - _inherits(_SVGPathSegCurvetoCubicSmoothRel, _SVGPathSeg18); - - var _super17 = _createSuper(_SVGPathSegCurvetoCubicSmoothRel); - - function _SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, x, y, x2, y2) { - var _this16; - - _classCallCheck(this, _SVGPathSegCurvetoCubicSmoothRel); - - _this16 = _super17.call(this, _SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL, 's', owningPathSegList); - _this16._x = x; - _this16._y = y; - _this16._x2 = x2; - _this16._y2 = y2; - return _this16; - } - - _createClass(_SVGPathSegCurvetoCubicSmoothRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoCubicSmoothRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x2 + ' ' + this._y2 + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoCubicSmoothRel(undefined, this._x, this._y, this._x2, this._y2); - } - }]); - - return _SVGPathSegCurvetoCubicSmoothRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoCubicSmoothRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - }, - x2: { - get: function get() { - return this._x2; - }, - set: function set(x2) { - this._x2 = x2; - - this._segmentChanged(); - }, - enumerable: true - }, - y2: { - get: function get() { - return this._y2; - }, - set: function set(y2) { - this._y2 = y2; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoQuadraticSmoothAbs = /*#__PURE__*/function (_SVGPathSeg19) { - _inherits(_SVGPathSegCurvetoQuadraticSmoothAbs, _SVGPathSeg19); - - var _super18 = _createSuper(_SVGPathSegCurvetoQuadraticSmoothAbs); - - function _SVGPathSegCurvetoQuadraticSmoothAbs(owningPathSegList, x, y) { - var _this17; - - _classCallCheck(this, _SVGPathSegCurvetoQuadraticSmoothAbs); - - _this17 = _super18.call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS, 'T', owningPathSegList); - _this17._x = x; - _this17._y = y; - return _this17; - } - - _createClass(_SVGPathSegCurvetoQuadraticSmoothAbs, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoQuadraticSmoothAbs]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoQuadraticSmoothAbs(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegCurvetoQuadraticSmoothAbs; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoQuadraticSmoothAbs.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function set(y) { - this._y = y; - - this._segmentChanged(); - }, - enumerable: true - } - }); - - var _SVGPathSegCurvetoQuadraticSmoothRel = /*#__PURE__*/function (_SVGPathSeg20) { - _inherits(_SVGPathSegCurvetoQuadraticSmoothRel, _SVGPathSeg20); - - var _super19 = _createSuper(_SVGPathSegCurvetoQuadraticSmoothRel); - - function _SVGPathSegCurvetoQuadraticSmoothRel(owningPathSegList, x, y) { - var _this18; - - _classCallCheck(this, _SVGPathSegCurvetoQuadraticSmoothRel); - - _this18 = _super19.call(this, _SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL, 't', owningPathSegList); - _this18._x = x; - _this18._y = y; - return _this18; - } - - _createClass(_SVGPathSegCurvetoQuadraticSmoothRel, [{ - key: "toString", - value: function toString() { - return '[object SVGPathSegCurvetoQuadraticSmoothRel]'; - } - }, { - key: "_asPathString", - value: function _asPathString() { - return this.pathSegTypeAsLetter + ' ' + this._x + ' ' + this._y; - } - }, { - key: "clone", - value: function clone() { - return new _SVGPathSegCurvetoQuadraticSmoothRel(undefined, this._x, this._y); - } - }]); - - return _SVGPathSegCurvetoQuadraticSmoothRel; - }(_SVGPathSeg); - - Object.defineProperties(_SVGPathSegCurvetoQuadraticSmoothRel.prototype, { - x: { - get: function get() { - return this._x; - }, - set: function set(x) { - this._x = x; - - this._segmentChanged(); - }, - enumerable: true - }, - y: { - get: function get() { - return this._y; - }, - set: function 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.'); - } - - var measurementElement = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - measurementElement.setAttribute('d', this.getAttribute('d')); - var 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 - var SVGPathSegList = /*#__PURE__*/function () { - function SVGPathSegList(pathElement) { - _classCallCheck(this, SVGPathSegList); - - 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. - - - _createClass(SVGPathSegList, [{ - key: "_checkPathSynchronizedToList", - value: function _checkPathSynchronizedToList() { - this._updateListFromPathMutations(this._pathElementMutationObserver.takeRecords()); - } - }, { - key: "_updateListFromPathMutations", - value: function _updateListFromPathMutations(mutationRecords) { - if (!this._pathElement) { - return; - } - - var hasPathMutations = false; - mutationRecords.forEach(function (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. - - }, { - key: "_writeListToPath", - value: function _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. - - }, { - key: "segmentChanged", - value: function segmentChanged(pathSeg) { - this._writeListToPath(); - } - }, { - key: "clear", - value: function clear() { - this._checkPathSynchronizedToList(); - - this._list.forEach(function (pathSeg) { - pathSeg._owningPathSegList = null; - }); - - this._list = []; - - this._writeListToPath(); - } - }, { - key: "initialize", - value: function initialize(newItem) { - this._checkPathSynchronizedToList(); - - this._list = [newItem]; - newItem._owningPathSegList = this; - - this._writeListToPath(); - - return newItem; - } - }, { - key: "_checkValidIndex", - value: function _checkValidIndex(index) { - if (isNaN(index) || index < 0 || index >= this.numberOfItems) { - throw new Error('INDEX_SIZE_ERR'); - } - } - }, { - key: "getItem", - value: function getItem(index) { - this._checkPathSynchronizedToList(); - - this._checkValidIndex(index); - - return this._list[index]; - } - }, { - key: "insertItemBefore", - value: function 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; - } - }, { - key: "replaceItem", - value: function 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; - } - }, { - key: "removeItem", - value: function removeItem(index) { - this._checkPathSynchronizedToList(); - - this._checkValidIndex(index); - - var item = this._list[index]; - - this._list.splice(index, 1); - - this._writeListToPath(); - - return item; - } - }, { - key: "appendItem", - value: function 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. - - }, { - key: "_parsePath", - value: function _parsePath(string) { - if (!string || !string.length) { - return []; - } - - var owningPathSegList = this; - - var Builder = /*#__PURE__*/function () { - function Builder() { - _classCallCheck(this, Builder); - - this.pathSegList = []; - } - - _createClass(Builder, [{ - key: "appendSegment", - value: function appendSegment(pathSeg) { - this.pathSegList.push(pathSeg); - } - }]); - - return Builder; - }(); - - var Source = /*#__PURE__*/function () { - function Source(string) { - _classCallCheck(this, Source); - - this._string = string; - this._currentIndex = 0; - this._endIndex = this._string.length; - this._previousCommand = SVGPathSeg.PATHSEG_UNKNOWN; - - this._skipOptionalSpaces(); - } - - _createClass(Source, [{ - key: "_isCurrentSpace", - value: function _isCurrentSpace() { - var character = this._string[this._currentIndex]; - return character <= ' ' && (character === ' ' || character === '\n' || character === '\t' || character === '\r' || character === '\f'); - } - }, { - key: "_skipOptionalSpaces", - value: function _skipOptionalSpaces() { - while (this._currentIndex < this._endIndex && this._isCurrentSpace()) { - this._currentIndex++; - } - - return this._currentIndex < this._endIndex; - } - }, { - key: "_skipOptionalSpacesOrDelimiter", - value: function _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; - } - }, { - key: "hasMoreData", - value: function hasMoreData() { - return this._currentIndex < this._endIndex; - } - }, { - key: "peekSegmentType", - value: function peekSegmentType() { - var lookahead = this._string[this._currentIndex]; - return this._pathSegTypeFromChar(lookahead); - } - }, { - key: "_pathSegTypeFromChar", - value: function _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; - } - } - }, { - key: "_nextCommandHelper", - value: function _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; - } - }, { - key: "initialCommandIsMoveTo", - value: function initialCommandIsMoveTo() { - // If the path is empty it is still valid, so return true. - if (!this.hasMoreData()) { - return true; - } - - var 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 - - }, { - key: "_parseNumber", - value: function _parseNumber() { - var exponent = 0; - var integer = 0; - var frac = 1; - var decimal = 0; - var sign = 1; - var expsign = 1; - var 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. - - - var 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) { - var scanIntPartIndex = this._currentIndex - 1; - var 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++; - } - } - - var number = integer + decimal; - number *= sign; - - if (exponent) { - number *= Math.pow(10, expsign * exponent); - } - - if (startIndex === this._currentIndex) { - return undefined; - } - - this._skipOptionalSpacesOrDelimiter(); - - return number; - } - }, { - key: "_parseArcFlag", - value: function _parseArcFlag() { - if (this._currentIndex >= this._endIndex) { - return undefined; - } - - var flag = false; - - var flagChar = this._string.charAt(this._currentIndex++); - - if (flagChar === '0') { - flag = false; - } else if (flagChar === '1') { - flag = true; - } else { - return undefined; - } - - this._skipOptionalSpacesOrDelimiter(); - - return flag; - } - }, { - key: "parseSegment", - value: function parseSegment() { - var lookahead = this._string[this._currentIndex]; - - var 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: - { - var 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: - { - var _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: - { - var _points2 = { - x2: this._parseNumber(), - y2: this._parseNumber(), - x: this._parseNumber(), - y: this._parseNumber() - }; - return new SVGPathSegCurvetoCubicSmoothRel(owningPathSegList, _points2.x, _points2.y, _points2.x2, _points2.y2); - } - - case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS: - { - var _points3 = { - x2: this._parseNumber(), - y2: this._parseNumber(), - x: this._parseNumber(), - y: this._parseNumber() - }; - return new SVGPathSegCurvetoCubicSmoothAbs(owningPathSegList, _points3.x, _points3.y, _points3.x2, _points3.y2); - } - - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL: - { - var _points4 = { - x1: this._parseNumber(), - y1: this._parseNumber(), - x: this._parseNumber(), - y: this._parseNumber() - }; - return new SVGPathSegCurvetoQuadraticRel(owningPathSegList, _points4.x, _points4.y, _points4.x1, _points4.y1); - } - - case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS: - { - var _points5 = { - x1: this._parseNumber(), - y1: this._parseNumber(), - x: this._parseNumber(), - y: this._parseNumber() - }; - return new SVGPathSegCurvetoQuadraticAbs(owningPathSegList, _points5.x, _points5.y, _points5.x1, _points5.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: - { - var _points6 = { - 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, _points6.x, _points6.y, _points6.x1, _points6.y1, _points6.arcAngle, _points6.arcLarge, _points6.arcSweep); - } - - case SVGPathSeg.PATHSEG_ARC_ABS: - { - var _points7 = { - 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, _points7.x, _points7.y, _points7.x1, _points7.y1, _points7.arcAngle, _points7.arcLarge, _points7.arcSweep); - } - - default: - throw new Error('Unknown path seg type.'); - } - } - }]); - - return Source; - }(); - - var builder = new Builder(); - var source = new Source(string); - - if (!source.initialCommandIsMoveTo()) { - return []; - } - - while (source.hasMoreData()) { - var pathSeg = source.parseSegment(); - - if (!pathSeg) { - return []; - } - - builder.appendSegment(pathSeg); - } - - return builder.pathSegList; - } // STATIC - - }], [{ - key: "_pathSegArrayAsString", - value: function _pathSegArrayAsString(pathSegArray) { - var string = ''; - var first = true; - pathSegArray.forEach(function (pathSeg) { - if (first) { - first = false; - string += pathSeg._asPathString(); - } else { - string += ' ' + pathSeg._asPathString(); - } - }); - return string; - } - }]); - - return SVGPathSegList; - }(); - - SVGPathSegList.prototype.classname = 'SVGPathSegList'; - Object.defineProperty(SVGPathSegList.prototype, 'numberOfItems', { - get: function 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: function 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: function get() { - return this.pathSegList; - }, - enumerable: true - }, - animatedPathSegList: { - get: function get() { - return this.pathSegList; - }, - enumerable: true - }, - animatedNormalizedPathSegList: { - get: function get() { - return this.pathSegList; - }, - enumerable: true - } - }); - window.SVGPathSegList = SVGPathSegList; - } - })(); - - // 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(); - - case 3: - strings = _context.sent; - svgEditor = _this; - - 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(); - }; - - showPanel = function showPanel(on) { - $('#closepath_panel').toggle(on); - - if (on) { - var path = selElems[0]; - - if (path) { - updateButton(path); - } - } - }; - - toggleClosed = function toggleClosed() { - var path = selElems[0]; - - 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()); - } - - updateButton(path); - } - }; - - 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; - - while (i--) { - var elem = selElems[i]; - - if (elem && elem.tagName === 'path') { - if (opts.selectedElement && !opts.multiselected) { - showPanel(true); - } else { - showPanel(false); - } - } else { - showPanel(false); - } - } - } - }); - - case 10: - case "end": - return _context.stop(); - } - } - }, _callee); - }))(); - } - }; - - return extClosepath; - -}()); +}; diff --git a/dist/extensions/ext-connector.js b/dist/extensions/ext-connector.js index ddca221c..13629d48 100644 --- a/dist/extensions/ext-connector.js +++ b/dist/extensions/ext-connector.js @@ -1,692 +1,659 @@ -var svgEditorExtension_connector = (function () { - 'use strict'; +/** + * @file ext-connector.js + * + * @license MIT + * + * @copyright 2010 Alexis Deveria + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; +export default { + name: 'connector', + 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 + }; } - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); + /** + * @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; } - } - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + /** + * @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); + } - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + /** + * @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; + } + } + 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; + } } - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } + // 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); - _next(undefined); + 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 + }); + } + } }); - }; - } - - /** - * @file ext-connector.js - * - * @license MIT - * - * @copyright 2010 Alexis Deveria - * - */ - 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(); + } + + /** + * @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(); } } - }, _callee); - }))(); - } - }; + 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; - return extConnector; + 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); + } + }; + } +}; diff --git a/dist/extensions/ext-eyedropper.js b/dist/extensions/ext-eyedropper.js index ec8eb9dc..49a23e8a 100644 --- a/dist/extensions/ext-eyedropper.js +++ b/dist/extensions/ext-eyedropper.js @@ -1,202 +1,115 @@ -var svgEditorExtension_eyedropper = (function () { - 'use strict'; +/** + * @file ext-eyedropper.js + * + * @license MIT + * + * @copyright 2010 Jeff Schiller + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; +export default { + name: 'eyedropper', + async init (S) { + const strings = await S.importLocale(); + const svgEditor = this; + 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} + */ + function getStyle (opts) { + // if we are in eyedropper mode, we don't want to disable the eye-dropper tool + const mode = svgCanvas.getMode(); + if (mode === 'eyedropper') { return; } + + const tool = $('#tool_eyedropper'); + // enable-eye-dropper if one element is selected + let elem = null; + 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 + 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 (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); + const buttons = [ + { + id: 'tool_eyedropper', + icon: svgEditor.curConfig.extIconsPath + 'eyedropper.png', + type: 'mode', + events: { + click () { + svgCanvas.setMode('eyedropper'); + } } + } + ]; - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + 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, + + mouseDown (opts) { + const mode = svgCanvas.getMode(); + if (mode === 'eyedropper') { + const e = opts.event; + const {target} = e; + if (!['svg', 'g', 'use'].includes(target.nodeName)) { + const changes = {}; + + const change = function (elem, attrname, newvalue) { + changes[attrname] = elem.getAttribute(attrname); + elem.setAttribute(attrname, newvalue); + }; + + if (currentStyle.fillPaint) { change(target, 'fill', currentStyle.fillPaint); } + if (currentStyle.fillOpacity) { change(target, 'fill-opacity', currentStyle.fillOpacity); } + if (currentStyle.strokePaint) { change(target, 'stroke', currentStyle.strokePaint); } + if (currentStyle.strokeOpacity) { change(target, 'stroke-opacity', currentStyle.strokeOpacity); } + if (currentStyle.strokeWidth) { change(target, 'stroke-width', currentStyle.strokeWidth); } + if (currentStyle.strokeDashArray) { change(target, 'stroke-dasharray', currentStyle.strokeDashArray); } + if (currentStyle.opacity) { change(target, 'opacity', currentStyle.opacity); } + if (currentStyle.strokeLinecap) { change(target, 'stroke-linecap', currentStyle.strokeLinecap); } + if (currentStyle.strokeLinejoin) { change(target, 'stroke-linejoin', currentStyle.strokeLinejoin); } + + addToHistory(new ChangeElementCommand(target, changes)); + } } - - _next(undefined); - }); + } }; } - - /** - * @file ext-eyedropper.js - * - * @license MIT - * - * @copyright 2010 Jeff Schiller - * - */ - 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(); - - if (mode === 'eyedropper') { - return; - } - - var tool = $('#tool_eyedropper'); // enable-eye-dropper if one element is selected - - var elem = null; - - 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 - - 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'); - } - }; - - _context.next = 3; - return S.importLocale(); - - 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} - */ - - 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(); - - if (mode === 'eyedropper') { - var e = opts.event; - var target = e.target; - - if (!['svg', 'g', 'use'].includes(target.nodeName)) { - var changes = {}; - - var change = function change(elem, attrname, newvalue) { - changes[attrname] = elem.getAttribute(attrname); - elem.setAttribute(attrname, newvalue); - }; - - if (currentStyle.fillPaint) { - change(target, 'fill', currentStyle.fillPaint); - } - - if (currentStyle.fillOpacity) { - change(target, 'fill-opacity', currentStyle.fillOpacity); - } - - if (currentStyle.strokePaint) { - change(target, 'stroke', currentStyle.strokePaint); - } - - if (currentStyle.strokeOpacity) { - change(target, 'stroke-opacity', currentStyle.strokeOpacity); - } - - if (currentStyle.strokeWidth) { - change(target, 'stroke-width', currentStyle.strokeWidth); - } - - if (currentStyle.strokeDashArray) { - change(target, 'stroke-dasharray', currentStyle.strokeDashArray); - } - - if (currentStyle.opacity) { - change(target, 'opacity', currentStyle.opacity); - } - - if (currentStyle.strokeLinecap) { - change(target, 'stroke-linecap', currentStyle.strokeLinecap); - } - - if (currentStyle.strokeLinejoin) { - change(target, 'stroke-linejoin', currentStyle.strokeLinejoin); - } - - addToHistory(new ChangeElementCommand(target, changes)); - } - } - } - }); - - case 8: - case "end": - return _context.stop(); - } - } - }, _callee); - }))(); - } - }; - - return extEyedropper; - -}()); +}; diff --git a/dist/extensions/ext-foreignobject.js b/dist/extensions/ext-foreignobject.js index e98d6a4c..31a83693 100644 --- a/dist/extensions/ext-foreignobject.js +++ b/dist/extensions/ext-foreignobject.js @@ -1,363 +1,280 @@ -var svgEditorExtension_foreignobject = (function () { - 'use strict'; +/** + * @file ext-foreignobject.js + * + * @license Apache-2.0 + * + * @copyright 2010 Jacques Distler, 2010 Alexis Deveria + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; +export default { + name: 'foreignobject', + 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(); + + 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} + */ + function showPanel (on) { + let fcRules = $('#fc_rules'); + if (!fcRules.length) { + fcRules = $('').appendTo('head'); + } + fcRules.text(!on ? '' : ' #tool_topath { display: none !important; }'); + $('#foreignObject_panel').toggle(on); } - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); + /** + * @param {boolean} on + * @returns {void} + */ + function toggleSourceButtons (on) { + $('#tool_source_save, #tool_source_cancel').toggle(!on); + $('#foreign_save, #foreign_cancel').toggle(on); } - } - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + let selElems, + started, + newFO, + editingforeign = false; - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + /** + * 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 setForeignString (xmlString) { + const elt = selElems[0]; // The parent `Element` to append to + try { + // convert string into XML document + const 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; + } + + /** + * + * @returns {void} + */ + function showForeignEditor () { + const elt = selElems[0]; + if (!elt || editingforeign) { return; } + 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} + */ + function setAttr (attr, val) { + svgCanvas.changeSelectedAttribute(attr, val); + svgCanvas.call('changed', selElems); + } + + const buttons = [{ + id: 'tool_foreign', + icon: svgEditor.curConfig.extIconsPath + 'foreignobject-tool.png', + type: 'mode', + events: { + click () { + svgCanvas.setMode('foreign'); } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + } + }, { + id: 'edit_foreign', + icon: svgEditor.curConfig.extIconsPath + 'foreignobject-edit.png', + type: 'context', + panel: 'foreignObject_panel', + events: { + click () { + showForeignEditor(); } + } + }]; - _next(undefined); - }); + const contextTools = [ + { + type: 'input', + panel: 'foreignObject_panel', + id: 'foreign_width', + size: 3, + events: { + change () { + setAttr('width', this.value); + } + } + }, { + 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); + } + } + }, + elementChanged (opts) { + // const elem = opts.elems[0]; + } }; } - - /** - * @file ext-foreignobject.js - * - * @license Apache-2.0 - * - * @copyright 2010 Jacques Distler, 2010 Alexis Deveria - * - */ - 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); - }; - - 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} - */ - - - 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. - */ - - 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(); - - 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 - - - setTimeout(function () { - // Create source save/cancel buttons - - /* 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; - } - - return _context.abrupt("return"); - - case 2: - if (setForeignString($('#svg_source_textarea').val())) { - _context.next = 11; - break; - } - - _context.next = 5; - return $.confirm('Errors found. Revert to original?'); - - case 5: - ok = _context.sent; - - if (ok) { - _context.next = 8; - break; - } - - return _context.abrupt("return"); - - case 8: - endChanges(); - _context.next = 12; - break; - - case 11: - endChanges(); - - case 12: - case "end": - return _context.stop(); - } - } - }, _callee); - }))); - /* const cancel = */ - - $('#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; - } - - 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; - - while (i--) { - var 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); - } - } - }, - elementChanged: function elementChanged(opts) {// const elem = opts.elems[0]; - } - }); - - case 17: - case "end": - return _context2.stop(); - } - } - }, _callee2); - }))(); - } - }; - - return extForeignobject; - -}()); +}; diff --git a/dist/extensions/ext-grid.js b/dist/extensions/ext-grid.js index 420ddccb..cba3eb91 100644 --- a/dist/extensions/ext-grid.js +++ b/dist/extensions/ext-grid.js @@ -1,222 +1,168 @@ -var svgEditorExtension_grid = (function () { - 'use strict'; +/** + * @file ext-grid.js + * + * @license Apache-2.0 + * + * @copyright 2010 Redou Mine, 2010 Alexis Deveria + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } +export default { + name: 'grid', + 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; - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } + $(hcanvas).hide().appendTo('body'); - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + 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 + 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 + }); - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); - } + 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); - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } + // grid-box + 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); - _next(undefined); + /** + * + * @param {Float} zoom + * @returns {void} + */ + function updateGrid (zoom) { + // TODO: Try this with elements, then compare performance difference + const unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px + const uMulti = unit * zoom; + // Calculate the main number interval + 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 + 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; + for (let i = 1; i < 10; i++) { + const subD = Math.round(part * i) + 0.5; + // const lineNum = (i % 2)?12:10; + const lineNum = 0; + ctx.moveTo(subD, bigInt); + ctx.lineTo(subD, lineNum); + ctx.moveTo(bigInt, subD); + ctx.lineTo(lineNum, subD); + } + 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} + */ + function gridUpdate () { + if (showGrid) { + updateGrid(svgCanvas.getZoom()); + } + $('#canvasGrid').toggle(showGrid); + $('#view_grid').toggleClass('push_button_pressed tool_button'); + } + const buttons = [{ + id: 'view_grid', + icon: svgEditor.curConfig.extIconsPath + 'grid.png', + type: 'context', + panel: 'editor_panel', + events: { + click () { + svgEditor.curConfig.showGrid = showGrid = !showGrid; + gridUpdate(); + } + } + }]; + 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); + }) }; } - - /** - * @file ext-grid.js - * - * @license Apache-2.0 - * - * @copyright 2010 Redou Mine, 2010 Alexis Deveria - * - */ - 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()); - } - - $('#canvasGrid').toggle(showGrid); - $('#view_grid').toggleClass('push_button_pressed tool_button'); - }; - - updateGrid = function _updateGrid(zoom) { - // TODO: Try this with elements, then compare performance difference - var unit = units[svgEditor.curConfig.baseUnit]; // 1 = 1px - - var uMulti = unit * zoom; // Calculate the main number interval - - 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 - - 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; - - for (var i = 1; i < 10; i++) { - var subD = Math.round(part * i) + 0.5; // const lineNum = (i % 2)?12:10; - - var lineNum = 0; - ctx.moveTo(subD, bigInt); - ctx.lineTo(subD, lineNum); - ctx.moveTo(bigInt, subD); - ctx.lineTo(lineNum, subD); - } - - 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); - }; - - $ = _ref.$, NS = _ref.NS, getTypeMap = _ref.getTypeMap, importLocale = _ref.importLocale; - _context.next = 5; - return importLocale(); - - 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 - - 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} - */ - - 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(); - } - } - }, _callee); - }))(); - } - }; - - return extGrid; - -}()); +}; diff --git a/dist/extensions/ext-helloworld.js b/dist/extensions/ext-helloworld.js index dffb1c3c..fbe2dfa4 100644 --- a/dist/extensions/ext-helloworld.js +++ b/dist/extensions/ext-helloworld.js @@ -1,205 +1,91 @@ -var svgEditorExtension_helloworld = (function () { - 'use strict'; +/** + * @file ext-helloworld.js + * + * @license MIT + * + * @copyright 2010 Alexis Deveria + * + */ - function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { - try { - var info = gen[key](arg); - var value = info.value; - } catch (error) { - reject(error); - return; - } +/** +* This is a very basic SVG-Edit extension. It adds a "Hello World" button in +* the left ("mode") panel. Clicking on the button, and then the canvas +* will show the user the point on the canvas that was clicked on. +*/ +export default { + name: 'helloworld', + 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', - if (info.done) { - resolve(value); - } else { - Promise.resolve(value).then(_next, _throw); - } - } + // Multiple buttons can be added in this array + buttons: [{ + // Must match the icon ID in helloworld-icon.xml + id: 'hello_world', - function _asyncToGenerator(fn) { - return function () { - var self = this, - args = arguments; - return new Promise(function (resolve, reject) { - var gen = fn.apply(self, args); + // Fallback, e.g., for `file:///` access + icon: svgEditor.curConfig.extIconsPath + 'helloworld.png', - function _next(value) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); + // 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'); + } } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); + }], + // 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; + }, - _next(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); + } + } }; } - - 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 - * - * @license MIT - * - * @copyright 2010 Alexis Deveria - * - */ - - /** - * This is a very basic SVG-Edit extension. It adds a "Hello World" button in - * the left ("mode") panel. Clicking on the button, and then the canvas - * will show the user the point on the canvas that was clicked on. - */ - 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(); - } - } - }, _callee); - }))(); - } - }; - - return extHelloworld; - -}()); +}; diff --git a/dist/extensions/ext-imagelib.js b/dist/extensions/ext-imagelib.js index 43bd2513..6ee0c2a7 100644 --- a/dist/extensions/ext-imagelib.js +++ b/dist/extensions/ext-imagelib.js @@ -1,584 +1,557 @@ -var svgEditorExtension_imagelib = (function () { - 'use strict'; +/** + * @file ext-imagelib.js + * + * @license MIT + * + * @copyright 2010 Alexis Deveria + * + */ +export default { + name: 'imagelib', + async init ({$, decode64, importLocale, dropXMLInternalSubset}) { + const imagelibStrings = await importLocale(); - function _typeof(obj) { - "@babel/helpers - typeof"; + const modularVersion = !('svgEditor' in window) || + !window.svgEditor || + window.svgEditor.modules !== false; - 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; - }; + const svgEditor = this; + + const {uiStrings, canvas: svgCanvas, curConfig: {extIconsPath}} = svgEditor; + + imagelibStrings.imgLibs = imagelibStrings.imgLibs.map(({name, url, description}) => { + // Todo: Adopt some standard formatting library like `fluent.js` instead + url = url + // Keep these regexes as is in prep. for switching to `u` flag + // which will require escaping + // eslint-disable-next-line unicorn/better-regex + .replace(/\{path\}/g, extIconsPath) + .replace( + // eslint-disable-next-line unicorn/better-regex + /\{modularVersion\}/g, + modularVersion + ? (imagelibStrings.moduleEnding || '-es') + : '' + ); + return {name, url, description}; + }); + const allowedImageLibOrigins = imagelibStrings.imgLibs.map(({url}) => { + try { + return new URL(url).origin; + } catch (err) { + return location.origin; + } + }); + + /** + * + * @returns {void} + */ + function closeBrowser () { + $('#imgbrowse_holder').hide(); + document.activeElement.blur(); // make sure focus is the body to correct issue #417 } - 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); + /** + * @param {string} url + * @returns {void} + */ + function importImage (url) { + const newImage = svgCanvas.addSVGElementFromJson({ + element: 'image', + attr: { + x: 0, + y: 0, + width: 0, + height: 0, + id: svgCanvas.getNextId(), + style: 'pointer-events:inherit' } - - function _throw(err) { - asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); - } - - _next(undefined); }); + svgCanvas.clearSelection(); + svgCanvas.addToSelection([newImage]); + svgCanvas.setImageURL(url); + } + + const pending = {}; + + let mode = 's'; + let multiArr = []; + let transferStopped = false; + let preview, submit; + + /** + * Contains the SVG to insert. + * @typedef {PlainObject} ImageLibMessage + * @property {"imagelib"} namespace Required to distinguish from any other messages of app. + * @property {string} href Set to same value as previous `ImageLibMetaMessage` `id`. + * @property {string} data The response (as an SVG string or URL) + */ + + /** + * Used for setting meta-data before images are retrieved. + * @typedef {PlainObject} ImageLibMetaMessage + * @property {"imagelib"} namespace Required to distinguish from any other messages of app. + * @property {string} name If the subsequent response is an SVG string or if `preview_url` + * is present, will be used as the title for the preview image. When an + * SVG string is present, will default to the first ``'s contents or + * "(SVG #)" if none is present. Otherwise, if `preview_url` + * is present, will default to the empty string. Though `name` may be falsy, + * it is always expected to be present for meta messages. + * @property {string} id Identifier (the expected `href` for a subsequent response message); + * used for ensuring the subsequent response can be tied to this `ImageLibMetaMessage` object. + * @property {string} [preview_url] When import mode is multiple, used to set an image + * source along with the name/title. If the subsequent response is an SVG string + * and there is no `preview_url`, the default will just be to show the + * name/title. If the response is not an SVG string, the default will be to + * show that response (i.e., the URL). + * @property {string} entry Set automatically with div holding retrieving + * message (until ready to delete) + * @todo Should use a separate Map instead of `entry` + */ + + /** + * @param {PlainObject} cfg + * @param {string} cfg.origin + * @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage` + * @returns {void} + */ + async function onMessage ({origin, data: response}) { // eslint-disable-line no-shadow + if (!response || !['string', 'object'].includes(typeof response)) { + // Do nothing + return; + } + let id; + let type; + try { + // Todo: This block can be removed (and the above check changed to + // insist on an object) if embedAPI moves away from a string to + // an object (if IE9 support not needed) + response = typeof response === 'object' ? response : JSON.parse(response); + if (response.namespace !== 'imagelib') { + return; + } + if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) { + // Todo: Surface this error to user? + console.log(`Origin ${origin} not whitelisted for posting to ${window.origin}`); // eslint-disable-line no-console + return; + } + const hasName = 'name' in response; + const hasHref = 'href' in response; + + if (!hasName && transferStopped) { + transferStopped = false; + return; + } + + if (hasHref) { + id = response.href; + response = response.data; + } + + // Hide possible transfer dialog box + $('#dialog_box').hide(); + type = hasName + ? 'meta' + : response.charAt(0); + } catch (e) { + // This block is for backward compatibility (for IAN and Openclipart); + // should otherwise return + if (typeof response === 'string') { + const char1 = response.charAt(0); + + if (char1 !== '{' && transferStopped) { + transferStopped = false; + return; + } + + if (char1 === '|') { + const secondpos = response.indexOf('|', 1); + id = response.substr(1, secondpos - 1); + response = response.substr(secondpos + 1); + type = response.charAt(0); + } + } + } + + let entry, curMeta, svgStr, imgStr; + switch (type) { + case 'meta': { + // Metadata + transferStopped = false; + curMeta = response; + + // Should be safe to add dynamic property as passed metadata + pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection] + + const name = (curMeta.name || 'file'); + + const message = uiStrings.notification.retrieving.replace('%s', name); + + if (mode !== 'm') { + await $.process_cancel(message); + transferStopped = true; + // Should a message be sent back to the frame? + + $('#dialog_box').hide(); + } else { + entry = $('
').text(message).data('id', curMeta.id); + preview.append(entry); + curMeta.entry = entry; + } + + return; + } + case '<': + svgStr = true; + break; + case 'd': { + if (response.startsWith('data:image/svg+xml')) { + const pre = 'data:image/svg+xml;base64,'; + const src = response.substring(pre.length); + response = decode64(src); + svgStr = true; + break; + } else if (response.startsWith('data:image/')) { + imgStr = true; + break; + } + } + // Else fall through + default: + // TODO: See if there's a way to base64 encode the binary data stream + // const str = 'data:;base64,' + svgedit.utilities.encode64(response, true); + + // Assume it's raw image data + // importImage(str); + + // Don't give warning as postMessage may have been used by something else + if (mode !== 'm') { + closeBrowser(); + } else { + pending[id].entry.remove(); + } + // await $.alert('Unexpected data was returned: ' + response, function() { + // if (mode !== 'm') { + // closeBrowser(); + // } else { + // pending[id].entry.remove(); + // } + // }); + return; + } + + switch (mode) { + case 's': + // Import one + if (svgStr) { + svgCanvas.importSvgString(response); + } else if (imgStr) { + importImage(response); + } + closeBrowser(); + break; + case 'm': { + // Import multiple + multiArr.push([(svgStr ? 'svg' : 'img'), response]); + curMeta = pending[id]; + let title; + if (svgStr) { + if (curMeta && curMeta.name) { + title = curMeta.name; + } else { + // Try to find a title + // `dropXMLInternalSubset` is to help prevent the billion laughs attack + const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb] + title = $(xml).children('title').first().text() || '(SVG #' + response.length + ')'; + } + if (curMeta) { + preview.children().each(function () { + if ($(this).data('id') === id) { + if (curMeta.preview_url) { + $(this).html( + $('').append( + $('').attr('src', curMeta.preview_url), + title + ) + ); + } else { + $(this).text(title); + } + submit.removeAttr('disabled'); + } + }); + } else { + preview.append( + $('
').text(title) + ); + submit.removeAttr('disabled'); + } + } else { + if (curMeta && curMeta.preview_url) { + title = curMeta.name || ''; + entry = $('').append( + $('').attr('src', curMeta.preview_url), + title + ); + } else { + entry = $('').attr('src', response); + } + + if (curMeta) { + preview.children().each(function () { + if ($(this).data('id') === id) { + $(this).html(entry); + submit.removeAttr('disabled'); + } + }); + } else { + preview.append($('
').append(entry)); + submit.removeAttr('disabled'); + } + } + break; + } case 'o': { + // Open + if (!svgStr) { break; } + closeBrowser(); + const ok = await svgEditor.openPrep(); + if (!ok) { return; } + svgCanvas.clear(); + svgCanvas.setSvgString(response); + // updateCanvas(); + break; + } + } + } + + // Receive `postMessage` data + window.addEventListener('message', onMessage, true); + + /** + * @param {boolean} show + * @returns {void} + */ + function toggleMulti (show) { + $('#lib_framewrap, #imglib_opts').css({right: (show ? 200 : 10)}); + if (!preview) { + preview = $('
').css({ + position: 'absolute', + top: 45, + right: 10, + width: 180, + bottom: 45, + background: '#fff', + overflow: 'auto' + }).insertAfter('#lib_framewrap'); + + submit = $('') + .appendTo('#imgbrowse') + .on('click touchend', function () { + $.each(multiArr, function (i) { + const type = this[0]; + const data = this[1]; + if (type === 'svg') { + svgCanvas.importSvgString(data); + } else { + importImage(data); + } + svgCanvas.moveSelectedElements(i * 20, i * 20, false); + }); + preview.empty(); + multiArr = []; + $('#imgbrowse_holder').hide(); + }).css({ + position: 'absolute', + bottom: 10, + right: -10 + }); + } + + preview.toggle(show); + submit.toggle(show); + } + + /** + * + * @returns {void} + */ + function showBrowser () { + let browser = $('#imgbrowse'); + if (!browser.length) { + $('
' + + '
').insertAfter('#svg_docprops'); + browser = $('#imgbrowse'); + + const allLibs = imagelibStrings.select_lib; + + const libOpts = $('
    ').appendTo(browser); + const frame = $('