\";\n document.getElementsByTagName(\"Body\")[0].appendChild(ovr);\n document.getElementById(\"cadesplugin_close_install\").addEventListener('click', function () {\n plugin_loaded_error(\"Плагин недоступен\");\n document.getElementById(\"cadesplugin_ovr\").style.visibility = 'hidden';\n });\n ovr.addEventListener('click', function () {\n plugin_loaded_error(\"Плагин недоступен\");\n document.getElementById(\"cadesplugin_ovr\").style.visibility = 'hidden';\n });\n ovr.style.visibility = \"visible\";\n }\n } //Выводим окно поверх других с предложением установить расширение для Opera.\n //Если установленна переменная cadesplugin_skip_extension_install - не предлагаем установить расширение\n\n\n function install_opera_extension() {\n if (!window.cadesplugin_skip_extension_install) {\n document.addEventListener('DOMContentLoaded', function () {\n var ovr = document.createElement('div');\n ovr.id = \"cadesplugin_ovr\";\n ovr.style = \"visibility: hidden; position: fixed; left: 0px; top: 0px; width:100%; height:100%; background-color: rgba(0,0,0,0.7)\";\n ovr.innerHTML = \"
\" + \"\" + \"
Для работы КриптоПро ЭЦП Browser plugin на данном сайте необходимо установить расширение из каталога дополнений Opera.\" + \"
\" + \"
\";\n document.getElementsByTagName(\"Body\")[0].appendChild(ovr);\n var btn_install = document.getElementById(\"cadesplugin_install\");\n btn_install.addEventListener('click', function (event) {\n opr.addons.installExtension(\"epebfcehmdedogndhlcacafjaacknbcm\", function () {\n document.getElementById(\"cadesplugin_ovr\").style.visibility = 'hidden';\n location.reload();\n }, function () {});\n });\n document.getElementById(\"cadesplugin_close_install\").addEventListener('click', function () {\n plugin_loaded_error(\"Плагин недоступен\");\n document.getElementById(\"cadesplugin_ovr\").style.visibility = 'hidden';\n });\n ovr.addEventListener('click', function () {\n plugin_loaded_error(\"Плагин недоступен\");\n document.getElementById(\"cadesplugin_ovr\").style.visibility = 'hidden';\n });\n ovr.style.visibility = \"visible\";\n document.getElementById(\"cadesplugin_ovr_item\").addEventListener('click', function (e) {\n e.stopPropagation();\n });\n });\n } else {\n plugin_loaded_error(\"Плагин недоступен\");\n }\n }\n\n function firefox_or_edge_nmcades_onload() {\n cpcsp_chrome_nmcades.check_chrome_plugin(plugin_loaded, plugin_loaded_error);\n }\n\n function nmcades_api_onload() {\n window.postMessage(\"cadesplugin_echo_request\", \"*\");\n window.addEventListener(\"message\", function (event) {\n if (typeof event.data !== \"string\" || !event.data.match(\"cadesplugin_loaded\")) return;\n\n if (isFireFox || isEdge || isSafari) {\n // Для Firefox, Сафари, Edge вместе с сообщением cadesplugin_loaded прилетает url для загрузки nmcades_plugin_api.js\n var url = event.data.substring(event.data.indexOf(\"url:\") + 4);\n var fileref = document.createElement('script');\n fileref.setAttribute(\"type\", \"text/javascript\");\n fileref.setAttribute(\"src\", url);\n fileref.onerror = plugin_loaded_error;\n fileref.onload = firefox_or_edge_nmcades_onload;\n document.getElementsByTagName(\"head\")[0].appendChild(fileref); // Для Firefox, Safari и Edge у нас только по одному расширению.\n\n failed_extensions++;\n } else {\n cpcsp_chrome_nmcades.check_chrome_plugin(plugin_loaded, plugin_loaded_error);\n }\n }, false);\n } //Загружаем расширения для Chrome, Opera, YaBrowser, FireFox, Edge, Safari\n\n\n function load_extension() {\n if (isFireFox || isEdge || isSafari) {\n // вызываем callback руками т.к. нам нужно узнать ID расширения. Он уникальный для браузера.\n nmcades_api_onload();\n } else {\n // в асинхронном варианте для chrome и opera подключаем оба расширения\n var fileref = document.createElement('script');\n fileref.setAttribute(\"type\", \"text/javascript\");\n fileref.setAttribute(\"src\", \"chrome-extension://iifchhfnnmpdbibifmljnfjhpififfog/nmcades_plugin_api.js\");\n fileref.onerror = plugin_loaded_error;\n fileref.onload = nmcades_api_onload;\n document.getElementsByTagName(\"head\")[0].appendChild(fileref);\n fileref = document.createElement('script');\n fileref.setAttribute(\"type\", \"text/javascript\");\n fileref.setAttribute(\"src\", \"chrome-extension://epebfcehmdedogndhlcacafjaacknbcm/nmcades_plugin_api.js\");\n fileref.onerror = plugin_loaded_error;\n fileref.onload = nmcades_api_onload;\n document.getElementsByTagName(\"head\")[0].appendChild(fileref);\n }\n } //Загружаем плагин для NPAPI\n\n\n function load_npapi_plugin() {\n var elem = document.createElement('object');\n elem.setAttribute(\"id\", \"cadesplugin_object\");\n elem.setAttribute(\"type\", \"application/x-cades\");\n elem.setAttribute(\"style\", \"visibility: hidden\");\n document.getElementsByTagName(\"body\")[0].appendChild(elem);\n pluginObject = document.getElementById(\"cadesplugin_object\");\n\n if (isIE()) {\n var elem1 = document.createElement('object');\n elem1.setAttribute(\"id\", \"certEnrollClassFactory\");\n elem1.setAttribute(\"classid\", \"clsid:884e2049-217d-11da-b2a4-000e7bbb2b09\");\n elem1.setAttribute(\"style\", \"visibility: hidden\");\n document.getElementsByTagName(\"body\")[0].appendChild(elem1);\n var elem2 = document.createElement('object');\n elem2.setAttribute(\"id\", \"webClassFactory\");\n elem2.setAttribute(\"classid\", \"clsid:B04C8637-10BD-484E-B0DA-B8A039F60024\");\n elem2.setAttribute(\"style\", \"visibility: hidden\");\n document.getElementsByTagName(\"body\")[0].appendChild(elem2);\n }\n } //Отправляем событие что все ок.\n\n\n function plugin_loaded() {\n plugin_resolved = 1;\n\n if (canPromise) {\n plugin_resolve();\n } else {\n window.postMessage(\"cadesplugin_loaded\", \"*\");\n }\n } //Отправляем событие что сломались.\n\n\n function plugin_loaded_error(msg) {\n if (isNativeMessageSupported()) {\n //в асинхронном варианте подключаем оба расширения, если сломались оба пробуем установить для Opera\n failed_extensions++;\n if (failed_extensions < 2) return;\n\n if (isOpera && (typeof msg === 'undefined' || typeof msg === 'object')) {\n install_opera_extension();\n return;\n }\n }\n\n if (typeof msg === 'undefined' || typeof msg === 'object') msg = \"Плагин недоступен\";\n plugin_resolved = 1;\n\n if (canPromise) {\n plugin_reject(msg);\n } else {\n window.postMessage(\"cadesplugin_load_error\", \"*\");\n }\n } //проверяем что у нас хоть какое то событие ушло, и если не уходило кидаем еще раз ошибку\n\n\n function check_load_timeout() {\n if (plugin_resolved === 1) return;\n\n if (isFireFox) {\n show_firefox_missing_extension_dialog();\n }\n\n plugin_resolved = 1;\n\n if (canPromise) {\n plugin_reject(\"Истекло время ожидания загрузки плагина\");\n } else {\n window.postMessage(\"cadesplugin_load_error\", \"*\");\n }\n } //Вспомогательная функция для NPAPI\n\n\n function createPromise(arg) {\n return new Promise(arg);\n }\n\n function check_npapi_plugin() {\n try {\n var oAbout = CreateObject(\"CAdESCOM.About\");\n plugin_loaded();\n } catch (err) {\n document.getElementById(\"cadesplugin_object\").style.display = 'none'; // Объект создать не удалось, проверим, установлен ли\n // вообще плагин. Такая возможность есть не во всех браузерах\n\n var mimetype = navigator.mimeTypes[\"application/x-cades\"];\n\n if (mimetype) {\n var plugin = mimetype.enabledPlugin;\n\n if (plugin) {\n plugin_loaded_error(\"Плагин загружен, но не создаются обьекты\");\n } else {\n plugin_loaded_error(\"Ошибка при загрузке плагина\");\n }\n } else {\n plugin_loaded_error(\"Плагин недоступен\");\n }\n }\n } //Проверяем работает ли плагин\n\n\n function check_plugin_working() {\n var div = document.createElement(\"div\");\n div.innerHTML = \"\";\n var isIeLessThan9 = div.getElementsByTagName(\"i\").length === 1;\n\n if (isIeLessThan9) {\n plugin_loaded_error(\"Internet Explorer версии 8 и ниже не поддерживается\");\n return;\n }\n\n if (isNativeMessageSupported()) {\n load_extension();\n } else if (!canPromise) {\n window.addEventListener(\"message\", function (event) {\n if (event.data !== \"cadesplugin_echo_request\") return;\n load_npapi_plugin();\n check_npapi_plugin();\n }, false);\n } else {\n if (document.readyState === \"complete\") {\n load_npapi_plugin();\n check_npapi_plugin();\n } else {\n window.addEventListener(\"load\", function (event) {\n load_npapi_plugin();\n check_npapi_plugin();\n }, false);\n }\n }\n }\n\n function set_pluginObject(obj) {\n pluginObject = obj;\n }\n\n function is_capilite_enabled() {\n if (typeof cadesplugin.EnableInternalCSP !== 'undefined' && cadesplugin.EnableInternalCSP) return true;\n return false;\n }\n\n ; //Export\n\n cadesplugin.JSModuleVersion = \"2.1.2\";\n cadesplugin.async_spawn = async_spawn;\n cadesplugin.set = set_pluginObject;\n cadesplugin.set_log_level = set_log_level;\n cadesplugin.getLastError = getLastError;\n cadesplugin.is_capilite_enabled = is_capilite_enabled;\n\n if (isNativeMessageSupported()) {\n cadesplugin.CreateObjectAsync = CreateObjectAsync;\n cadesplugin.ReleasePluginObjects = ReleasePluginObjects;\n }\n\n if (!isNativeMessageSupported()) {\n cadesplugin.CreateObject = CreateObject;\n }\n\n if (window.cadesplugin_load_timeout) {\n setTimeout(check_load_timeout, window.cadesplugin_load_timeout);\n } else {\n setTimeout(check_load_timeout, 20000);\n }\n\n set_constantValues();\n cadesplugin.current_log_level = cadesplugin.LOG_LEVEL_ERROR;\n window.cadesplugin = cadesplugin;\n check_plugin_working();\n })();\n /***/\n\n }\n /******/\n\n })\n );\n});","var baseIsNative = require('./_baseIsNative'),\n getValue = require('./_getValue');\n/**\n * Gets the native function at `key` of `object`.\n *\n * @private\n * @param {Object} object The object to query.\n * @param {string} key The key of the method to get.\n * @returns {*} Returns the function if it's native, else `undefined`.\n */\n\n\nfunction getNative(object, key) {\n var value = getValue(object, key);\n return baseIsNative(value) ? value : undefined;\n}\n\nmodule.exports = getNative;","var root = require('./_root');\n/** Built-in value references. */\n\n\nvar Symbol = root.Symbol;\nmodule.exports = Symbol;","var DataView = require('./_DataView'),\n Map = require('./_Map'),\n Promise = require('./_Promise'),\n Set = require('./_Set'),\n WeakMap = require('./_WeakMap'),\n baseGetTag = require('./_baseGetTag'),\n toSource = require('./_toSource');\n/** `Object#toString` result references. */\n\n\nvar mapTag = '[object Map]',\n objectTag = '[object Object]',\n promiseTag = '[object Promise]',\n setTag = '[object Set]',\n weakMapTag = '[object WeakMap]';\nvar dataViewTag = '[object DataView]';\n/** Used to detect maps, sets, and weakmaps. */\n\nvar dataViewCtorString = toSource(DataView),\n mapCtorString = toSource(Map),\n promiseCtorString = toSource(Promise),\n setCtorString = toSource(Set),\n weakMapCtorString = toSource(WeakMap);\n/**\n * Gets the `toStringTag` of `value`.\n *\n * @private\n * @param {*} value The value to query.\n * @returns {string} Returns the `toStringTag`.\n */\n\nvar getTag = baseGetTag; // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.\n\nif (DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag || Map && getTag(new Map()) != mapTag || Promise && getTag(Promise.resolve()) != promiseTag || Set && getTag(new Set()) != setTag || WeakMap && getTag(new WeakMap()) != weakMapTag) {\n getTag = function getTag(value) {\n var result = baseGetTag(value),\n Ctor = result == objectTag ? value.constructor : undefined,\n ctorString = Ctor ? toSource(Ctor) : '';\n\n if (ctorString) {\n switch (ctorString) {\n case dataViewCtorString:\n return dataViewTag;\n\n case mapCtorString:\n return mapTag;\n\n case promiseCtorString:\n return promiseTag;\n\n case setCtorString:\n return setTag;\n\n case weakMapCtorString:\n return weakMapTag;\n }\n }\n\n return result;\n };\n}\n\nmodule.exports = getTag;","var baseToString = require('./_baseToString');\n/**\n * Converts `value` to a string. An empty string is returned for `null`\n * and `undefined` values. The sign of `-0` is preserved.\n *\n * @static\n * @memberOf _\n * @since 4.0.0\n * @category Lang\n * @param {*} value The value to convert.\n * @returns {string} Returns the converted string.\n * @example\n *\n * _.toString(null);\n * // => ''\n *\n * _.toString(-0);\n * // => '-0'\n *\n * _.toString([1, 2, 3]);\n * // => '1,2,3'\n */\n\n\nfunction toString(value) {\n return value == null ? '' : baseToString(value);\n}\n\nmodule.exports = toString;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = SchemaType;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nvar _has = _interopRequireDefault(require(\"lodash/has\"));\n\nvar _cloneDeepWith = _interopRequireDefault(require(\"lodash/cloneDeepWith\"));\n\nvar _toArray2 = _interopRequireDefault(require(\"lodash/toArray\"));\n\nvar _locale = require(\"./locale\");\n\nvar _Condition = _interopRequireDefault(require(\"./Condition\"));\n\nvar _runValidations = _interopRequireDefault(require(\"./util/runValidations\"));\n\nvar _prependDeep = _interopRequireDefault(require(\"./util/prependDeep\"));\n\nvar _isSchema = _interopRequireDefault(require(\"./util/isSchema\"));\n\nvar _createValidation = _interopRequireDefault(require(\"./util/createValidation\"));\n\nvar _printValue = _interopRequireDefault(require(\"./util/printValue\"));\n\nvar _Reference = _interopRequireDefault(require(\"./Reference\"));\n\nvar _reach = require(\"./util/reach\");\n\nvar RefSet = /*#__PURE__*/function () {\n function RefSet() {\n this.list = new Set();\n this.refs = new Map();\n }\n\n var _proto = RefSet.prototype;\n\n _proto.toArray = function toArray() {\n return (0, _toArray2.default)(this.list).concat((0, _toArray2.default)(this.refs.values()));\n };\n\n _proto.add = function add(value) {\n _Reference.default.isRef(value) ? this.refs.set(value.key, value) : this.list.add(value);\n };\n\n _proto.delete = function _delete(value) {\n _Reference.default.isRef(value) ? this.refs.delete(value.key, value) : this.list.delete(value);\n };\n\n _proto.has = function has(value, resolve) {\n if (this.list.has(value)) return true;\n var item,\n values = this.refs.values();\n\n while (item = values.next(), !item.done) {\n if (resolve(item.value) === value) return true;\n }\n\n return false;\n };\n\n return RefSet;\n}();\n\nfunction SchemaType(options) {\n var _this = this;\n\n if (options === void 0) {\n options = {};\n }\n\n if (!(this instanceof SchemaType)) return new SchemaType();\n this._deps = [];\n this._conditions = [];\n this._options = {\n abortEarly: true,\n recursive: true\n };\n this._exclusive = Object.create(null);\n this._whitelist = new RefSet();\n this._blacklist = new RefSet();\n this.tests = [];\n this.transforms = [];\n this.withMutation(function () {\n _this.typeError(_locale.mixed.notType);\n });\n if ((0, _has.default)(options, 'default')) this._defaultDefault = options.default;\n this._type = options.type || 'mixed';\n}\n\nvar proto = SchemaType.prototype = {\n __isYupSchema__: true,\n constructor: SchemaType,\n clone: function clone() {\n var _this2 = this;\n\n if (this._mutate) return this; // if the nested value is a schema we can skip cloning, since\n // they are already immutable\n\n return (0, _cloneDeepWith.default)(this, function (value) {\n if ((0, _isSchema.default)(value) && value !== _this2) return value;\n });\n },\n label: function label(_label) {\n var next = this.clone();\n next._label = _label;\n return next;\n },\n meta: function meta(obj) {\n if (arguments.length === 0) return this._meta;\n var next = this.clone();\n next._meta = (0, _extends2.default)(next._meta || {}, obj);\n return next;\n },\n withMutation: function withMutation(fn) {\n var before = this._mutate;\n this._mutate = true;\n var result = fn(this);\n this._mutate = before;\n return result;\n },\n concat: function concat(schema) {\n if (!schema || schema === this) return this;\n if (schema._type !== this._type && this._type !== 'mixed') throw new TypeError(\"You cannot `concat()` schema's of different types: \" + this._type + \" and \" + schema._type);\n var next = (0, _prependDeep.default)(schema.clone(), this); // new undefined default is overriden by old non-undefined one, revert\n\n if ((0, _has.default)(schema, '_default')) next._default = schema._default;\n next.tests = this.tests;\n next._exclusive = this._exclusive; // manually add the new tests to ensure\n // the deduping logic is consistent\n\n next.withMutation(function (next) {\n schema.tests.forEach(function (fn) {\n next.test(fn.OPTIONS);\n });\n });\n return next;\n },\n isType: function isType(v) {\n if (this._nullable && v === null) return true;\n return !this._typeCheck || this._typeCheck(v);\n },\n resolve: function resolve(options) {\n var schema = this;\n\n if (schema._conditions.length) {\n var conditions = schema._conditions;\n schema = schema.clone();\n schema._conditions = [];\n schema = conditions.reduce(function (schema, condition) {\n return condition.resolve(schema, options);\n }, schema);\n schema = schema.resolve(options);\n }\n\n return schema;\n },\n cast: function cast(value, options) {\n if (options === void 0) {\n options = {};\n }\n\n var resolvedSchema = this.resolve((0, _extends2.default)({}, options, {\n value: value\n }));\n\n var result = resolvedSchema._cast(value, options);\n\n if (value !== undefined && options.assert !== false && resolvedSchema.isType(result) !== true) {\n var formattedValue = (0, _printValue.default)(value);\n var formattedResult = (0, _printValue.default)(result);\n throw new TypeError(\"The value of \" + (options.path || 'field') + \" could not be cast to a value \" + (\"that satisfies the schema type: \\\"\" + resolvedSchema._type + \"\\\". \\n\\n\") + (\"attempted value: \" + formattedValue + \" \\n\") + (formattedResult !== formattedValue ? \"result of cast: \" + formattedResult : ''));\n }\n\n return result;\n },\n _cast: function _cast(rawValue) {\n var _this3 = this;\n\n var value = rawValue === undefined ? rawValue : this.transforms.reduce(function (value, fn) {\n return fn.call(_this3, value, rawValue);\n }, rawValue);\n\n if (value === undefined && (0, _has.default)(this, '_default')) {\n value = this.default();\n }\n\n return value;\n },\n _validate: function _validate(_value, options) {\n var _this4 = this;\n\n if (options === void 0) {\n options = {};\n }\n\n var value = _value;\n var originalValue = options.originalValue != null ? options.originalValue : _value;\n\n var isStrict = this._option('strict', options);\n\n var endEarly = this._option('abortEarly', options);\n\n var sync = options.sync;\n var path = options.path;\n var label = this._label;\n\n if (!isStrict) {\n value = this._cast(value, (0, _extends2.default)({\n assert: false\n }, options));\n } // value is cast, we can check if it meets type requirements\n\n\n var validationParams = {\n value: value,\n path: path,\n schema: this,\n options: options,\n label: label,\n originalValue: originalValue,\n sync: sync\n };\n var initialTests = [];\n if (this._typeError) initialTests.push(this._typeError(validationParams));\n if (this._whitelistError) initialTests.push(this._whitelistError(validationParams));\n if (this._blacklistError) initialTests.push(this._blacklistError(validationParams));\n return (0, _runValidations.default)({\n validations: initialTests,\n endEarly: endEarly,\n value: value,\n path: path,\n sync: sync\n }).then(function (value) {\n return (0, _runValidations.default)({\n path: path,\n sync: sync,\n value: value,\n endEarly: endEarly,\n validations: _this4.tests.map(function (fn) {\n return fn(validationParams);\n })\n });\n });\n },\n validate: function validate(value, options) {\n if (options === void 0) {\n options = {};\n }\n\n var schema = this.resolve((0, _extends2.default)({}, options, {\n value: value\n }));\n return schema._validate(value, options);\n },\n validateSync: function validateSync(value, options) {\n if (options === void 0) {\n options = {};\n }\n\n var schema = this.resolve((0, _extends2.default)({}, options, {\n value: value\n }));\n var result, err;\n\n schema._validate(value, (0, _extends2.default)({}, options, {\n sync: true\n })).then(function (r) {\n return result = r;\n }).catch(function (e) {\n return err = e;\n });\n\n if (err) throw err;\n return result;\n },\n isValid: function isValid(value, options) {\n return this.validate(value, options).then(function () {\n return true;\n }).catch(function (err) {\n if (err.name === 'ValidationError') return false;\n throw err;\n });\n },\n isValidSync: function isValidSync(value, options) {\n try {\n this.validateSync(value, options);\n return true;\n } catch (err) {\n if (err.name === 'ValidationError') return false;\n throw err;\n }\n },\n getDefault: function getDefault(options) {\n if (options === void 0) {\n options = {};\n }\n\n var schema = this.resolve(options);\n return schema.default();\n },\n default: function _default(def) {\n if (arguments.length === 0) {\n var defaultValue = (0, _has.default)(this, '_default') ? this._default : this._defaultDefault;\n return typeof defaultValue === 'function' ? defaultValue.call(this) : (0, _cloneDeepWith.default)(defaultValue);\n }\n\n var next = this.clone();\n next._default = def;\n return next;\n },\n strict: function strict(isStrict) {\n if (isStrict === void 0) {\n isStrict = true;\n }\n\n var next = this.clone();\n next._options.strict = isStrict;\n return next;\n },\n _isPresent: function _isPresent(value) {\n return value != null;\n },\n required: function required(message) {\n if (message === void 0) {\n message = _locale.mixed.required;\n }\n\n return this.test({\n message: message,\n name: 'required',\n exclusive: true,\n test: function test(value) {\n return this.schema._isPresent(value);\n }\n });\n },\n notRequired: function notRequired() {\n var next = this.clone();\n next.tests = next.tests.filter(function (test) {\n return test.OPTIONS.name !== 'required';\n });\n return next;\n },\n nullable: function nullable(isNullable) {\n if (isNullable === void 0) {\n isNullable = true;\n }\n\n var next = this.clone();\n next._nullable = isNullable;\n return next;\n },\n transform: function transform(fn) {\n var next = this.clone();\n next.transforms.push(fn);\n return next;\n },\n\n /**\n * Adds a test function to the schema's queue of tests.\n * tests can be exclusive or non-exclusive.\n *\n * - exclusive tests, will replace any existing tests of the same name.\n * - non-exclusive: can be stacked\n *\n * If a non-exclusive test is added to a schema with an exclusive test of the same name\n * the exclusive test is removed and further tests of the same name will be stacked.\n *\n * If an exclusive test is added to a schema with non-exclusive tests of the same name\n * the previous tests are removed and further tests of the same name will replace each other.\n */\n test: function test() {\n var opts;\n\n if (arguments.length === 1) {\n if (typeof (arguments.length <= 0 ? undefined : arguments[0]) === 'function') {\n opts = {\n test: arguments.length <= 0 ? undefined : arguments[0]\n };\n } else {\n opts = arguments.length <= 0 ? undefined : arguments[0];\n }\n } else if (arguments.length === 2) {\n opts = {\n name: arguments.length <= 0 ? undefined : arguments[0],\n test: arguments.length <= 1 ? undefined : arguments[1]\n };\n } else {\n opts = {\n name: arguments.length <= 0 ? undefined : arguments[0],\n message: arguments.length <= 1 ? undefined : arguments[1],\n test: arguments.length <= 2 ? undefined : arguments[2]\n };\n }\n\n if (opts.message === undefined) opts.message = _locale.mixed.default;\n if (typeof opts.test !== 'function') throw new TypeError('`test` is a required parameters');\n var next = this.clone();\n var validate = (0, _createValidation.default)(opts);\n var isExclusive = opts.exclusive || opts.name && next._exclusive[opts.name] === true;\n\n if (opts.exclusive && !opts.name) {\n throw new TypeError('Exclusive tests must provide a unique `name` identifying the test');\n }\n\n next._exclusive[opts.name] = !!opts.exclusive;\n next.tests = next.tests.filter(function (fn) {\n if (fn.OPTIONS.name === opts.name) {\n if (isExclusive) return false;\n if (fn.OPTIONS.test === validate.OPTIONS.test) return false;\n }\n\n return true;\n });\n next.tests.push(validate);\n return next;\n },\n when: function when(keys, options) {\n if (arguments.length === 1) {\n options = keys;\n keys = '.';\n }\n\n var next = this.clone(),\n deps = [].concat(keys).map(function (key) {\n return new _Reference.default(key);\n });\n deps.forEach(function (dep) {\n if (dep.isSibling) next._deps.push(dep.key);\n });\n\n next._conditions.push(new _Condition.default(deps, options));\n\n return next;\n },\n typeError: function typeError(message) {\n var next = this.clone();\n next._typeError = (0, _createValidation.default)({\n message: message,\n name: 'typeError',\n test: function test(value) {\n if (value !== undefined && !this.schema.isType(value)) return this.createError({\n params: {\n type: this.schema._type\n }\n });\n return true;\n }\n });\n return next;\n },\n oneOf: function oneOf(enums, message) {\n if (message === void 0) {\n message = _locale.mixed.oneOf;\n }\n\n var next = this.clone();\n enums.forEach(function (val) {\n next._whitelist.add(val);\n\n next._blacklist.delete(val);\n });\n next._whitelistError = (0, _createValidation.default)({\n message: message,\n name: 'oneOf',\n test: function test(value) {\n if (value === undefined) return true;\n var valids = this.schema._whitelist;\n return valids.has(value, this.resolve) ? true : this.createError({\n params: {\n values: valids.toArray().join(', ')\n }\n });\n }\n });\n return next;\n },\n notOneOf: function notOneOf(enums, message) {\n if (message === void 0) {\n message = _locale.mixed.notOneOf;\n }\n\n var next = this.clone();\n enums.forEach(function (val) {\n next._blacklist.add(val);\n\n next._whitelist.delete(val);\n });\n next._blacklistError = (0, _createValidation.default)({\n message: message,\n name: 'notOneOf',\n test: function test(value) {\n var invalids = this.schema._blacklist;\n if (invalids.has(value, this.resolve)) return this.createError({\n params: {\n values: invalids.toArray().join(', ')\n }\n });\n return true;\n }\n });\n return next;\n },\n strip: function strip(_strip) {\n if (_strip === void 0) {\n _strip = true;\n }\n\n var next = this.clone();\n next._strip = _strip;\n return next;\n },\n _option: function _option(key, overrides) {\n return (0, _has.default)(overrides, key) ? overrides[key] : this._options[key];\n },\n describe: function describe() {\n var next = this.clone();\n return {\n type: next._type,\n meta: next._meta,\n label: next._label,\n tests: next.tests.map(function (fn) {\n return {\n name: fn.OPTIONS.name,\n params: fn.OPTIONS.params\n };\n }).filter(function (n, idx, list) {\n return list.findIndex(function (c) {\n return c.name === n.name;\n }) === idx;\n })\n };\n }\n};\nvar _arr = ['validate', 'validateSync'];\n\nvar _loop = function _loop() {\n var method = _arr[_i];\n\n proto[method + \"At\"] = function (path, value, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _getIn = (0, _reach.getIn)(this, path, value, options.context),\n parent = _getIn.parent,\n parentPath = _getIn.parentPath,\n schema = _getIn.schema;\n\n return schema[method](parent && parent[parentPath], (0, _extends2.default)({}, options, {\n parent: parent,\n path: path\n }));\n };\n};\n\nfor (var _i = 0; _i < _arr.length; _i++) {\n _loop();\n}\n\nvar _arr2 = ['equals', 'is'];\n\nfor (var _i2 = 0; _i2 < _arr2.length; _i2++) {\n var alias = _arr2[_i2];\n proto[alias] = proto.oneOf;\n}\n\nvar _arr3 = ['not', 'nope'];\n\nfor (var _i3 = 0; _i3 < _arr3.length; _i3++) {\n var _alias = _arr3[_i3];\n proto[_alias] = proto.notOneOf;\n}\n\nproto.optional = proto.notRequired;\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = exports.array = exports.object = exports.boolean = exports.date = exports.number = exports.string = exports.mixed = void 0;\n\nvar _printValue = _interopRequireDefault(require(\"./util/printValue\"));\n\nvar mixed = {\n default: '${path} is invalid',\n required: '${path} is a required field',\n oneOf: '${path} must be one of the following values: ${values}',\n notOneOf: '${path} must not be one of the following values: ${values}',\n notType: function notType(_ref) {\n var path = _ref.path,\n type = _ref.type,\n value = _ref.value,\n originalValue = _ref.originalValue;\n var isCast = originalValue != null && originalValue !== value;\n var msg = path + \" must be a `\" + type + \"` type, \" + (\"but the final value was: `\" + (0, _printValue.default)(value, true) + \"`\") + (isCast ? \" (cast from the value `\" + (0, _printValue.default)(originalValue, true) + \"`).\" : '.');\n\n if (value === null) {\n msg += \"\\n If \\\"null\\\" is intended as an empty value be sure to mark the schema as `.nullable()`\";\n }\n\n return msg;\n }\n};\nexports.mixed = mixed;\nvar string = {\n length: '${path} must be exactly ${length} characters',\n min: '${path} must be at least ${min} characters',\n max: '${path} must be at most ${max} characters',\n matches: '${path} must match the following: \"${regex}\"',\n email: '${path} must be a valid email',\n url: '${path} must be a valid URL',\n trim: '${path} must be a trimmed string',\n lowercase: '${path} must be a lowercase string',\n uppercase: '${path} must be a upper case string'\n};\nexports.string = string;\nvar number = {\n min: '${path} must be greater than or equal to ${min}',\n max: '${path} must be less than or equal to ${max}',\n lessThan: '${path} must be less than ${less}',\n moreThan: '${path} must be greater than ${more}',\n notEqual: '${path} must be not equal to ${notEqual}',\n positive: '${path} must be a positive number',\n negative: '${path} must be a negative number',\n integer: '${path} must be an integer'\n};\nexports.number = number;\nvar date = {\n min: '${path} field must be later than ${min}',\n max: '${path} field must be at earlier than ${max}'\n};\nexports.date = date;\nvar boolean = {};\nexports.boolean = boolean;\nvar object = {\n noUnknown: '${path} field cannot have keys not specified in the object shape'\n};\nexports.object = object;\nvar array = {\n min: '${path} field must have at least ${min} items',\n max: '${path} field must have less than or equal to ${max} items'\n};\nexports.array = array;\nvar _default = {\n mixed: mixed,\n string: string,\n number: number,\n date: date,\n object: object,\n array: array,\n boolean: boolean\n};\nexports.default = _default;","\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _default = function _default(obj) {\n return obj && obj.__isYupSchema__;\n};\n\nexports.default = _default;\nmodule.exports = exports[\"default\"];","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar FormControlContext = React.createContext();\n\nif (process.env.NODE_ENV !== 'production') {\n FormControlContext.displayName = 'FormControlContext';\n}\n\nexport function useFormControl() {\n return React.useContext(FormControlContext);\n}\nexport default FormControlContext;","// Supports determination of isControlled().\n// Controlled input accepts its current value as a prop.\n//\n// @see https://facebook.github.io/react/docs/forms.html#controlled-components\n// @param value\n// @returns {boolean} true if string (including '') or number (including zero)\nexport function hasValue(value) {\n return value != null && !(Array.isArray(value) && value.length === 0);\n} // Determine if field is empty or filled.\n// Response determines if label is presented above field or as placeholder.\n//\n// @param obj\n// @param SSR\n// @returns {boolean} False when not present or empty string.\n// True when any number or string with length.\n\nexport function isFilled(obj) {\n var SSR = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');\n} // Determine if an Input is adorned on start.\n// It's corresponding to the left with LTR.\n//\n// @param obj\n// @returns {boolean} False when no adornments.\n// True when adorned at the start.\n\nexport function isAdornedStart(obj) {\n return obj.startAdornment;\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\n\nexport default function startOfDay(dirtyDate) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate);\n date.setHours(0, 0, 0, 0);\n return date;\n}","var arrayLikeKeys = require('./_arrayLikeKeys'),\n baseKeys = require('./_baseKeys'),\n isArrayLike = require('./isArrayLike');\n/**\n * Creates an array of the own enumerable property names of `object`.\n *\n * **Note:** Non-object values are coerced to objects. See the\n * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)\n * for more details.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @returns {Array} Returns the array of property names.\n * @example\n *\n * function Foo() {\n * this.a = 1;\n * this.b = 2;\n * }\n *\n * Foo.prototype.c = 3;\n *\n * _.keys(new Foo);\n * // => ['a', 'b'] (iteration order is not guaranteed)\n *\n * _.keys('hi');\n * // => ['0', '1']\n */\n\n\nfunction keys(object) {\n return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);\n}\n\nmodule.exports = keys;","var isSymbol = require('./isSymbol');\n/** Used as references for various `Number` constants. */\n\n\nvar INFINITY = 1 / 0;\n/**\n * Converts `value` to a string key if it's not a string or symbol.\n *\n * @private\n * @param {*} value The value to inspect.\n * @returns {string|symbol} Returns the key.\n */\n\nfunction toKey(value) {\n if (typeof value == 'string' || isSymbol(value)) {\n return value;\n }\n\n var result = value + '';\n return result == '0' && 1 / value == -INFINITY ? '-0' : result;\n}\n\nmodule.exports = toKey;","var baseHas = require('./_baseHas'),\n hasPath = require('./_hasPath');\n/**\n * Checks if `path` is a direct property of `object`.\n *\n * @static\n * @since 0.1.0\n * @memberOf _\n * @category Object\n * @param {Object} object The object to query.\n * @param {Array|string} path The path to check.\n * @returns {boolean} Returns `true` if `path` exists, else `false`.\n * @example\n *\n * var object = { 'a': { 'b': 2 } };\n * var other = _.create({ 'a': _.create({ 'b': 2 }) });\n *\n * _.has(object, 'a');\n * // => true\n *\n * _.has(object, 'a.b');\n * // => true\n *\n * _.has(object, ['a', 'b']);\n * // => true\n *\n * _.has(other, 'a');\n * // => false\n */\n\n\nfunction has(object, path) {\n return object != null && hasPath(object, path, baseHas);\n}\n\nmodule.exports = has;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = inherits;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/extends\"));\n\nfunction inherits(ctor, superCtor, spec) {\n ctor.prototype = Object.create(superCtor.prototype, {\n constructor: {\n value: ctor,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n (0, _extends2.default)(ctor.prototype, spec);\n}\n\nmodule.exports = exports[\"default\"];","// based on https://github.com/WICG/focus-visible/blob/v4.1.5/src/focus-visible.js\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nvar hadKeyboardEvent = true;\nvar hadFocusVisibleRecently = false;\nvar hadFocusVisibleRecentlyTimeout = null;\nvar inputTypesWhitelist = {\n text: true,\n search: true,\n url: true,\n tel: true,\n email: true,\n password: true,\n number: true,\n date: true,\n month: true,\n week: true,\n time: true,\n datetime: true,\n 'datetime-local': true\n};\n/**\n * Computes whether the given element should automatically trigger the\n * `focus-visible` class being added, i.e. whether it should always match\n * `:focus-visible` when focused.\n * @param {Element} node\n * @return {boolean}\n */\n\nfunction focusTriggersKeyboardModality(node) {\n var type = node.type,\n tagName = node.tagName;\n\n if (tagName === 'INPUT' && inputTypesWhitelist[type] && !node.readOnly) {\n return true;\n }\n\n if (tagName === 'TEXTAREA' && !node.readOnly) {\n return true;\n }\n\n if (node.isContentEditable) {\n return true;\n }\n\n return false;\n}\n/**\n * Keep track of our keyboard modality state with `hadKeyboardEvent`.\n * If the most recent user interaction was via the keyboard;\n * and the key press did not include a meta, alt/option, or control key;\n * then the modality is keyboard. Otherwise, the modality is not keyboard.\n * @param {KeyboardEvent} event\n */\n\n\nfunction handleKeyDown(event) {\n if (event.metaKey || event.altKey || event.ctrlKey) {\n return;\n }\n\n hadKeyboardEvent = true;\n}\n/**\n * If at any point a user clicks with a pointing device, ensure that we change\n * the modality away from keyboard.\n * This avoids the situation where a user presses a key on an already focused\n * element, and then clicks on a different element, focusing it with a\n * pointing device, while we still think we're in keyboard modality.\n */\n\n\nfunction handlePointerDown() {\n hadKeyboardEvent = false;\n}\n\nfunction handleVisibilityChange() {\n if (this.visibilityState === 'hidden') {\n // If the tab becomes active again, the browser will handle calling focus\n // on the element (Safari actually calls it twice).\n // If this tab change caused a blur on an element with focus-visible,\n // re-apply the class when the user switches back to the tab.\n if (hadFocusVisibleRecently) {\n hadKeyboardEvent = true;\n }\n }\n}\n\nfunction prepare(doc) {\n doc.addEventListener('keydown', handleKeyDown, true);\n doc.addEventListener('mousedown', handlePointerDown, true);\n doc.addEventListener('pointerdown', handlePointerDown, true);\n doc.addEventListener('touchstart', handlePointerDown, true);\n doc.addEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nexport function teardown(doc) {\n doc.removeEventListener('keydown', handleKeyDown, true);\n doc.removeEventListener('mousedown', handlePointerDown, true);\n doc.removeEventListener('pointerdown', handlePointerDown, true);\n doc.removeEventListener('touchstart', handlePointerDown, true);\n doc.removeEventListener('visibilitychange', handleVisibilityChange, true);\n}\n\nfunction isFocusVisible(event) {\n var target = event.target;\n\n try {\n return target.matches(':focus-visible');\n } catch (error) {} // browsers not implementing :focus-visible will throw a SyntaxError\n // we use our own heuristic for those browsers\n // rethrow might be better if it's not the expected error but do we really\n // want to crash if focus-visible malfunctioned?\n // no need for validFocusTarget check. the user does that by attaching it to\n // focusable events only\n\n\n return hadKeyboardEvent || focusTriggersKeyboardModality(target);\n}\n/**\n * Should be called if a blur event is fired on a focus-visible element\n */\n\n\nfunction handleBlurVisible() {\n // To detect a tab/window switch, we look for a blur event followed\n // rapidly by a visibility change.\n // If we don't see a visibility change within 100ms, it's probably a\n // regular focus change.\n hadFocusVisibleRecently = true;\n window.clearTimeout(hadFocusVisibleRecentlyTimeout);\n hadFocusVisibleRecentlyTimeout = window.setTimeout(function () {\n hadFocusVisibleRecently = false;\n }, 100);\n}\n\nexport default function useIsFocusVisible() {\n var ref = React.useCallback(function (instance) {\n var node = ReactDOM.findDOMNode(instance);\n\n if (node != null) {\n prepare(node.ownerDocument);\n }\n }, []);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useDebugValue(isFocusVisible);\n }\n\n return {\n isFocusVisible: isFocusVisible,\n onBlurVisible: handleBlurVisible,\n ref: ref\n };\n}","import * as React from 'react';\n/**\n * Private module reserved for @material-ui/x packages.\n */\n\nexport default function useId(idOverride) {\n var _React$useState = React.useState(idOverride),\n defaultId = _React$useState[0],\n setDefaultId = _React$useState[1];\n\n var id = idOverride || defaultId;\n React.useEffect(function () {\n if (defaultId == null) {\n // Fallback to this default id when possible.\n // Use the random value for client-side rendering only.\n // We can't use it server-side.\n setDefaultId(\"mui-\".concat(Math.round(Math.random() * 1e5)));\n }\n }, [defaultId]);\n return id;\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name addMilliseconds\n * @category Millisecond Helpers\n * @summary Add the specified number of milliseconds to the given date.\n *\n * @description\n * Add the specified number of milliseconds to the given date.\n *\n * ### v2.0.0 breaking changes:\n *\n * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes).\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} the new date with the milliseconds added\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Add 750 milliseconds to 10 July 2014 12:45:30.000:\n * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750)\n * //=> Thu Jul 10 2014 12:45:30.750\n */\n\nexport default function addMilliseconds(dirtyDate, dirtyAmount) {\n requiredArgs(2, arguments);\n var timestamp = toDate(dirtyDate).getTime();\n var amount = toInteger(dirtyAmount);\n return new Date(timestamp + amount);\n}","import toInteger from \"../toInteger/index.js\";\nimport toDate from \"../../toDate/index.js\";\nimport startOfUTCWeek from \"../startOfUTCWeek/index.js\";\nimport requiredArgs from \"../requiredArgs/index.js\"; // This function will be a part of public API when UTC function will be implemented.\n// See issue: https://github.com/date-fns/date-fns/issues/376\n\nexport default function getUTCWeekYear(dirtyDate, dirtyOptions) {\n requiredArgs(1, arguments);\n var date = toDate(dirtyDate, dirtyOptions);\n var year = date.getUTCFullYear();\n var options = dirtyOptions || {};\n var locale = options.locale;\n var localeFirstWeekContainsDate = locale && locale.options && locale.options.firstWeekContainsDate;\n var defaultFirstWeekContainsDate = localeFirstWeekContainsDate == null ? 1 : toInteger(localeFirstWeekContainsDate);\n var firstWeekContainsDate = options.firstWeekContainsDate == null ? defaultFirstWeekContainsDate : toInteger(options.firstWeekContainsDate); // Test if weekStartsOn is between 1 and 7 _and_ is not NaN\n\n if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) {\n throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively');\n }\n\n var firstWeekOfNextYear = new Date(0);\n firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate);\n firstWeekOfNextYear.setUTCHours(0, 0, 0, 0);\n var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, dirtyOptions);\n var firstWeekOfThisYear = new Date(0);\n firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate);\n firstWeekOfThisYear.setUTCHours(0, 0, 0, 0);\n var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, dirtyOptions);\n\n if (date.getTime() >= startOfNextYear.getTime()) {\n return year + 1;\n } else if (date.getTime() >= startOfThisYear.getTime()) {\n return year;\n } else {\n return year - 1;\n }\n}","var setPrototypeOf = require(\"./setPrototypeOf.js\");\n\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n setPrototypeOf(subClass, superClass);\n}\n\nmodule.exports = _inheritsLoose;\nmodule.exports[\"default\"] = module.exports, module.exports.__esModule = true;","import arrayLikeToArray from \"./arrayLikeToArray\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(n);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","import React from 'react';\nexport default React.createContext(null);","import * as React from 'react';\n/**\n * @ignore - internal component.\n */\n\nvar ListContext = React.createContext({});\n\nif (process.env.NODE_ENV !== 'production') {\n ListContext.displayName = 'ListContext';\n}\n\nexport default ListContext;","/* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */\n\n/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */\nvar fabric = fabric || {\n version: '5.2.1'\n};\n\nif (typeof exports !== 'undefined') {\n exports.fabric = fabric;\n}\n/* _AMD_START_ */\nelse if (typeof define === 'function' && define.amd) {\n define([], function () {\n return fabric;\n });\n}\n/* _AMD_END_ */\n\n\nif (typeof document !== 'undefined' && typeof window !== 'undefined') {\n if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) {\n fabric.document = document;\n } else {\n fabric.document = document.implementation.createHTMLDocument('');\n }\n\n fabric.window = window;\n} else {\n // assume we're running under node.js when document/window are not present\n var jsdom = require('jsdom');\n\n var virtualWindow = new jsdom.JSDOM(decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), {\n features: {\n FetchExternalResources: ['img']\n },\n resources: 'usable'\n }).window;\n fabric.document = virtualWindow.document;\n fabric.jsdomImplForWrapper = require('jsdom/lib/jsdom/living/generated/utils').implForWrapper;\n fabric.nodeCanvas = require('jsdom/lib/jsdom/utils').Canvas;\n fabric.window = virtualWindow;\n DOMParser = fabric.window.DOMParser;\n}\n/**\n * True when in environment that supports touch events\n * @type boolean\n */\n\n\nfabric.isTouchSupported = 'ontouchstart' in fabric.window || 'ontouchstart' in fabric.document || fabric.window && fabric.window.navigator && fabric.window.navigator.maxTouchPoints > 0;\n/**\n * True when in environment that's probably Node.js\n * @type boolean\n */\n\nfabric.isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined';\n/* _FROM_SVG_START_ */\n\n/**\n * Attributes parsed from all SVG elements\n * @type array\n */\n\nfabric.SHARED_ATTRIBUTES = ['display', 'transform', 'fill', 'fill-opacity', 'fill-rule', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'id', 'paint-order', 'vector-effect', 'instantiated_by_use', 'clip-path'];\n/* _FROM_SVG_END_ */\n\n/**\n * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion.\n */\n\nfabric.DPI = 96;\nfabric.reNum = '(?:[-+]?(?:\\\\d+|\\\\d*\\\\.\\\\d+)(?:[eE][-+]?\\\\d+)?)';\nfabric.commaWsp = '(?:\\\\s+,?\\\\s*|,\\\\s*)';\nfabric.rePathCommand = /([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:[eE][-+]?\\d+)?)/ig;\nfabric.reNonWord = /[ \\n\\.,;!\\?\\-]/;\nfabric.fontPaths = {};\nfabric.iMatrix = [1, 0, 0, 1, 0, 0];\nfabric.svgNS = 'http://www.w3.org/2000/svg';\n/**\n * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine.\n * @since 1.7.14\n * @type Number\n * @default\n */\n\nfabric.perfLimitSizeTotal = 2097152;\n/**\n * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000\n * @since 1.7.14\n * @type Number\n * @default\n */\n\nfabric.maxCacheSideLimit = 4096;\n/**\n * Lowest pixel limit for cache canvases, set at 256PX\n * @since 1.7.14\n * @type Number\n * @default\n */\n\nfabric.minCacheSideLimit = 256;\n/**\n * Cache Object for widths of chars in text rendering.\n */\n\nfabric.charWidthsCache = {};\n/**\n * if webgl is enabled and available, textureSize will determine the size\n * of the canvas backend\n * @since 2.0.0\n * @type Number\n * @default\n */\n\nfabric.textureSize = 2048;\n/**\n * When 'true', style information is not retained when copy/pasting text, making\n * pasted text use destination style.\n * Defaults to 'false'.\n * @type Boolean\n * @default\n */\n\nfabric.disableStyleCopyPaste = false;\n/**\n * Enable webgl for filtering picture is available\n * A filtering backend will be initialized, this will both take memory and\n * time since a default 2048x2048 canvas will be created for the gl context\n * @since 2.0.0\n * @type Boolean\n * @default\n */\n\nfabric.enableGLFiltering = true;\n/**\n * Device Pixel Ratio\n * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html\n */\n\nfabric.devicePixelRatio = fabric.window.devicePixelRatio || fabric.window.webkitDevicePixelRatio || fabric.window.mozDevicePixelRatio || 1;\n/**\n * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value,\n * which is unitless and not rendered equally across browsers.\n *\n * Values that work quite well (as of October 2017) are:\n * - Chrome: 1.5\n * - Edge: 1.75\n * - Firefox: 0.9\n * - Safari: 0.95\n *\n * @since 2.0.0\n * @type Number\n * @default 1\n */\n\nfabric.browserShadowBlurConstant = 1;\n/**\n * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again.\n * It was an internal variable, is accessible since version 2.3.4\n */\n\nfabric.arcToSegmentsCache = {};\n/**\n * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it.\n * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing\n * you do not get any speed benefit and you get a big object in memory.\n * The object was a private variable before, while now is appended to the lib so that you have access to it and you\n * can eventually clear it.\n * It was an internal variable, is accessible since version 2.3.4\n */\n\nfabric.boundsOfCurveCache = {};\n/**\n * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better\n * @default true\n */\n\nfabric.cachesBoundsOfCurve = true;\n/**\n * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on\n * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true\n * this has to be set before instantiating the filtering backend ( before filtering the first image )\n * @type Boolean\n * @default false\n */\n\nfabric.forceGLPutImageData = false;\n\nfabric.initFilterBackend = function () {\n if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) {\n console.log('max texture size: ' + fabric.maxTextureSize);\n return new fabric.WebglFilterBackend({\n tileSize: fabric.textureSize\n });\n } else if (fabric.Canvas2dFilterBackend) {\n return new fabric.Canvas2dFilterBackend();\n }\n};\n\nif (typeof document !== 'undefined' && typeof window !== 'undefined') {\n // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system)\n window.fabric = fabric;\n}\n\n(function () {\n /**\n * @private\n * @param {String} eventName\n * @param {Function} handler\n */\n function _removeEventListener(eventName, handler) {\n if (!this.__eventListeners[eventName]) {\n return;\n }\n\n var eventListener = this.__eventListeners[eventName];\n\n if (handler) {\n eventListener[eventListener.indexOf(handler)] = false;\n } else {\n fabric.util.array.fill(eventListener, false);\n }\n }\n /**\n * Observes specified event\n * @memberOf fabric.Observable\n * @alias on\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function that receives a notification when an event of the specified type occurs\n * @return {Self} thisArg\n * @chainable\n */\n\n\n function on(eventName, handler) {\n if (!this.__eventListeners) {\n this.__eventListeners = {};\n } // one object with key/value pairs was passed\n\n\n if (arguments.length === 1) {\n for (var prop in eventName) {\n this.on(prop, eventName[prop]);\n }\n } else {\n if (!this.__eventListeners[eventName]) {\n this.__eventListeners[eventName] = [];\n }\n\n this.__eventListeners[eventName].push(handler);\n }\n\n return this;\n }\n\n function _once(eventName, handler) {\n var _handler = function () {\n handler.apply(this, arguments);\n this.off(eventName, _handler);\n }.bind(this);\n\n this.on(eventName, _handler);\n }\n\n function once(eventName, handler) {\n // one object with key/value pairs was passed\n if (arguments.length === 1) {\n for (var prop in eventName) {\n _once.call(this, prop, eventName[prop]);\n }\n } else {\n _once.call(this, eventName, handler);\n }\n\n return this;\n }\n /**\n * Stops event observing for a particular event handler. Calling this method\n * without arguments removes all handlers for all events\n * @memberOf fabric.Observable\n * @alias off\n * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler})\n * @param {Function} handler Function to be deleted from EventListeners\n * @return {Self} thisArg\n * @chainable\n */\n\n\n function off(eventName, handler) {\n if (!this.__eventListeners) {\n return this;\n } // remove all key/value pairs (event name -> event handler)\n\n\n if (arguments.length === 0) {\n for (eventName in this.__eventListeners) {\n _removeEventListener.call(this, eventName);\n }\n } // one object with key/value pairs was passed\n else if (arguments.length === 1 && typeof arguments[0] === 'object') {\n for (var prop in eventName) {\n _removeEventListener.call(this, prop, eventName[prop]);\n }\n } else {\n _removeEventListener.call(this, eventName, handler);\n }\n\n return this;\n }\n /**\n * Fires event with an optional options object\n * @memberOf fabric.Observable\n * @param {String} eventName Event name to fire\n * @param {Object} [options] Options object\n * @return {Self} thisArg\n * @chainable\n */\n\n\n function fire(eventName, options) {\n if (!this.__eventListeners) {\n return this;\n }\n\n var listenersForEvent = this.__eventListeners[eventName];\n\n if (!listenersForEvent) {\n return this;\n }\n\n for (var i = 0, len = listenersForEvent.length; i < len; i++) {\n listenersForEvent[i] && listenersForEvent[i].call(this, options || {});\n }\n\n this.__eventListeners[eventName] = listenersForEvent.filter(function (value) {\n return value !== false;\n });\n return this;\n }\n /**\n * @namespace fabric.Observable\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events}\n * @see {@link http://fabricjs.com/events|Events demo}\n */\n\n\n fabric.Observable = {\n fire: fire,\n on: on,\n once: once,\n off: off\n };\n})();\n/**\n * @namespace fabric.Collection\n */\n\n\nfabric.Collection = {\n _objects: [],\n\n /**\n * Adds objects to collection, Canvas or Group, then renders canvas\n * (if `renderOnAddRemove` is not `false`).\n * in case of Group no changes to bounding box are made.\n * Objects should be instances of (or inherit from) fabric.Object\n * Use of this function is highly discouraged for groups.\n * you can add a bunch of objects with the add method but then you NEED\n * to run a addWithUpdate call for the Group class or position/bbox will be wrong.\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n * @chainable\n */\n add: function add() {\n this._objects.push.apply(this._objects, arguments);\n\n if (this._onObjectAdded) {\n for (var i = 0, length = arguments.length; i < length; i++) {\n this._onObjectAdded(arguments[i]);\n }\n }\n\n this.renderOnAddRemove && this.requestRenderAll();\n return this;\n },\n\n /**\n * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`)\n * An object should be an instance of (or inherit from) fabric.Object\n * Use of this function is highly discouraged for groups.\n * you can add a bunch of objects with the insertAt method but then you NEED\n * to run a addWithUpdate call for the Group class or position/bbox will be wrong.\n * @param {Object} object Object to insert\n * @param {Number} index Index to insert object at\n * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs\n * @return {Self} thisArg\n * @chainable\n */\n insertAt: function insertAt(object, index, nonSplicing) {\n var objects = this._objects;\n\n if (nonSplicing) {\n objects[index] = object;\n } else {\n objects.splice(index, 0, object);\n }\n\n this._onObjectAdded && this._onObjectAdded(object);\n this.renderOnAddRemove && this.requestRenderAll();\n return this;\n },\n\n /**\n * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`)\n * @param {...fabric.Object} object Zero or more fabric instances\n * @return {Self} thisArg\n * @chainable\n */\n remove: function remove() {\n var objects = this._objects,\n index,\n somethingRemoved = false;\n\n for (var i = 0, length = arguments.length; i < length; i++) {\n index = objects.indexOf(arguments[i]); // only call onObjectRemoved if an object was actually removed\n\n if (index !== -1) {\n somethingRemoved = true;\n objects.splice(index, 1);\n this._onObjectRemoved && this._onObjectRemoved(arguments[i]);\n }\n }\n\n this.renderOnAddRemove && somethingRemoved && this.requestRenderAll();\n return this;\n },\n\n /**\n * Executes given function for each object in this group\n * @param {Function} callback\n * Callback invoked with current object as first argument,\n * index - as second and an array of all objects - as third.\n * Callback is invoked in a context of Global Object (e.g. `window`)\n * when no `context` argument is given\n *\n * @param {Object} context Context (aka thisObject)\n * @return {Self} thisArg\n * @chainable\n */\n forEachObject: function forEachObject(callback, context) {\n var objects = this.getObjects();\n\n for (var i = 0, len = objects.length; i < len; i++) {\n callback.call(context, objects[i], i, objects);\n }\n\n return this;\n },\n\n /**\n * Returns an array of children objects of this instance\n * Type parameter introduced in 1.3.10\n * since 2.3.5 this method return always a COPY of the array;\n * @param {String} [type] When specified, only objects of this type are returned\n * @return {Array}\n */\n getObjects: function getObjects(type) {\n if (typeof type === 'undefined') {\n return this._objects.concat();\n }\n\n return this._objects.filter(function (o) {\n return o.type === type;\n });\n },\n\n /**\n * Returns object at specified index\n * @param {Number} index\n * @return {Self} thisArg\n */\n item: function item(index) {\n return this._objects[index];\n },\n\n /**\n * Returns true if collection contains no objects\n * @return {Boolean} true if collection is empty\n */\n isEmpty: function isEmpty() {\n return this._objects.length === 0;\n },\n\n /**\n * Returns a size of a collection (i.e: length of an array containing its objects)\n * @return {Number} Collection size\n */\n size: function size() {\n return this._objects.length;\n },\n\n /**\n * Returns true if collection contains an object\n * @param {Object} object Object to check against\n * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects`\n * @return {Boolean} `true` if collection contains an object\n */\n contains: function contains(object, deep) {\n if (this._objects.indexOf(object) > -1) {\n return true;\n } else if (deep) {\n return this._objects.some(function (obj) {\n return typeof obj.contains === 'function' && obj.contains(object, true);\n });\n }\n\n return false;\n },\n\n /**\n * Returns number representation of a collection complexity\n * @return {Number} complexity\n */\n complexity: function complexity() {\n return this._objects.reduce(function (memo, current) {\n memo += current.complexity ? current.complexity() : 0;\n return memo;\n }, 0);\n }\n};\n/**\n * @namespace fabric.CommonMethods\n */\n\nfabric.CommonMethods = {\n /**\n * Sets object's properties from options\n * @param {Object} [options] Options object\n */\n _setOptions: function _setOptions(options) {\n for (var prop in options) {\n this.set(prop, options[prop]);\n }\n },\n\n /**\n * @private\n * @param {Object} [filler] Options object\n * @param {String} [property] property to set the Gradient to\n */\n _initGradient: function _initGradient(filler, property) {\n if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) {\n this.set(property, new fabric.Gradient(filler));\n }\n },\n\n /**\n * @private\n * @param {Object} [filler] Options object\n * @param {String} [property] property to set the Pattern to\n * @param {Function} [callback] callback to invoke after pattern load\n */\n _initPattern: function _initPattern(filler, property, callback) {\n if (filler && filler.source && !(filler instanceof fabric.Pattern)) {\n this.set(property, new fabric.Pattern(filler, callback));\n } else {\n callback && callback();\n }\n },\n\n /**\n * @private\n */\n _setObject: function _setObject(obj) {\n for (var prop in obj) {\n this._set(prop, obj[prop]);\n }\n },\n\n /**\n * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`.\n * @param {String|Object} key Property name or object (if object, iterate over the object properties)\n * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one)\n * @return {fabric.Object} thisArg\n * @chainable\n */\n set: function set(key, value) {\n if (typeof key === 'object') {\n this._setObject(key);\n } else {\n this._set(key, value);\n }\n\n return this;\n },\n _set: function _set(key, value) {\n this[key] = value;\n },\n\n /**\n * Toggles specified property from `true` to `false` or from `false` to `true`\n * @param {String} property Property to toggle\n * @return {fabric.Object} thisArg\n * @chainable\n */\n toggle: function toggle(property) {\n var value = this.get(property);\n\n if (typeof value === 'boolean') {\n this.set(property, !value);\n }\n\n return this;\n },\n\n /**\n * Basic getter\n * @param {String} property Property name\n * @return {*} value of a property\n */\n get: function get(property) {\n return this[property];\n }\n};\n\n(function (global) {\n var sqrt = Math.sqrt,\n atan2 = Math.atan2,\n pow = Math.pow,\n PiBy180 = Math.PI / 180,\n PiBy2 = Math.PI / 2;\n /**\n * @namespace fabric.util\n */\n\n fabric.util = {\n /**\n * Calculate the cos of an angle, avoiding returning floats for known results\n * @static\n * @memberOf fabric.util\n * @param {Number} angle the angle in radians or in degree\n * @return {Number}\n */\n cos: function cos(angle) {\n if (angle === 0) {\n return 1;\n }\n\n if (angle < 0) {\n // cos(a) = cos(-a)\n angle = -angle;\n }\n\n var angleSlice = angle / PiBy2;\n\n switch (angleSlice) {\n case 1:\n case 3:\n return 0;\n\n case 2:\n return -1;\n }\n\n return Math.cos(angle);\n },\n\n /**\n * Calculate the sin of an angle, avoiding returning floats for known results\n * @static\n * @memberOf fabric.util\n * @param {Number} angle the angle in radians or in degree\n * @return {Number}\n */\n sin: function sin(angle) {\n if (angle === 0) {\n return 0;\n }\n\n var angleSlice = angle / PiBy2,\n sign = 1;\n\n if (angle < 0) {\n // sin(-a) = -sin(a)\n sign = -1;\n }\n\n switch (angleSlice) {\n case 1:\n return sign;\n\n case 2:\n return 0;\n\n case 3:\n return -sign;\n }\n\n return Math.sin(angle);\n },\n\n /**\n * Removes value from an array.\n * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf`\n * @static\n * @memberOf fabric.util\n * @param {Array} array\n * @param {*} value\n * @return {Array} original array\n */\n removeFromArray: function removeFromArray(array, value) {\n var idx = array.indexOf(value);\n\n if (idx !== -1) {\n array.splice(idx, 1);\n }\n\n return array;\n },\n\n /**\n * Returns random number between 2 specified ones.\n * @static\n * @memberOf fabric.util\n * @param {Number} min lower limit\n * @param {Number} max upper limit\n * @return {Number} random value (between min and max)\n */\n getRandomInt: function getRandomInt(min, max) {\n return Math.floor(Math.random() * (max - min + 1)) + min;\n },\n\n /**\n * Transforms degrees to radians.\n * @static\n * @memberOf fabric.util\n * @param {Number} degrees value in degrees\n * @return {Number} value in radians\n */\n degreesToRadians: function degreesToRadians(degrees) {\n return degrees * PiBy180;\n },\n\n /**\n * Transforms radians to degrees.\n * @static\n * @memberOf fabric.util\n * @param {Number} radians value in radians\n * @return {Number} value in degrees\n */\n radiansToDegrees: function radiansToDegrees(radians) {\n return radians / PiBy180;\n },\n\n /**\n * Rotates `point` around `origin` with `radians`\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} point The point to rotate\n * @param {fabric.Point} origin The origin of the rotation\n * @param {Number} radians The radians of the angle for the rotation\n * @return {fabric.Point} The new rotated point\n */\n rotatePoint: function rotatePoint(point, origin, radians) {\n var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y),\n v = fabric.util.rotateVector(newPoint, radians);\n return new fabric.Point(v.x, v.y).addEquals(origin);\n },\n\n /**\n * Rotates `vector` with `radians`\n * @static\n * @memberOf fabric.util\n * @param {Object} vector The vector to rotate (x and y)\n * @param {Number} radians The radians of the angle for the rotation\n * @return {Object} The new rotated point\n */\n rotateVector: function rotateVector(vector, radians) {\n var sin = fabric.util.sin(radians),\n cos = fabric.util.cos(radians),\n rx = vector.x * cos - vector.y * sin,\n ry = vector.x * sin + vector.y * cos;\n return {\n x: rx,\n y: ry\n };\n },\n\n /**\n * Creates a vetor from points represented as a point\n * @static\n * @memberOf fabric.util\n *\n * @typedef {Object} Point\n * @property {number} x\n * @property {number} y\n *\n * @param {Point} from\n * @param {Point} to\n * @returns {Point} vector\n */\n createVector: function createVector(from, to) {\n return new fabric.Point(to.x - from.x, to.y - from.y);\n },\n\n /**\n * Calculates angle between 2 vectors using dot product\n * @static\n * @memberOf fabric.util\n * @param {Point} a\n * @param {Point} b\n * @returns the angle in radian between the vectors\n */\n calcAngleBetweenVectors: function calcAngleBetweenVectors(a, b) {\n return Math.acos((a.x * b.x + a.y * b.y) / (Math.hypot(a.x, a.y) * Math.hypot(b.x, b.y)));\n },\n\n /**\n * @static\n * @memberOf fabric.util\n * @param {Point} v\n * @returns {Point} vector representing the unit vector of pointing to the direction of `v`\n */\n getHatVector: function getHatVector(v) {\n return new fabric.Point(v.x, v.y).multiply(1 / Math.hypot(v.x, v.y));\n },\n\n /**\n * @static\n * @memberOf fabric.util\n * @param {Point} A\n * @param {Point} B\n * @param {Point} C\n * @returns {{ vector: Point, angle: number }} vector representing the bisector of A and A's angle\n */\n getBisector: function getBisector(A, B, C) {\n var AB = fabric.util.createVector(A, B),\n AC = fabric.util.createVector(A, C);\n var alpha = fabric.util.calcAngleBetweenVectors(AB, AC); // check if alpha is relative to AB->BC\n\n var ro = fabric.util.calcAngleBetweenVectors(fabric.util.rotateVector(AB, alpha), AC);\n var phi = alpha * (ro === 0 ? 1 : -1) / 2;\n return {\n vector: fabric.util.getHatVector(fabric.util.rotateVector(AB, phi)),\n angle: alpha\n };\n },\n\n /**\n * Project stroke width on points returning 2 projections for each point as follows:\n * - `miter`: 2 points corresponding to the outer boundary and the inner boundary of stroke.\n * - `bevel`: 2 points corresponding to the bevel boundaries, tangent to the bisector.\n * - `round`: same as `bevel`\n * Used to calculate object's bounding box\n * @static\n * @memberOf fabric.util\n * @param {Point[]} points\n * @param {Object} options\n * @param {number} options.strokeWidth\n * @param {'miter'|'bevel'|'round'} options.strokeLineJoin\n * @param {number} options.strokeMiterLimit https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit\n * @param {boolean} options.strokeUniform\n * @param {number} options.scaleX\n * @param {number} options.scaleY\n * @param {boolean} [openPath] whether the shape is open or not, affects the calculations of the first and last points\n * @returns {fabric.Point[]} array of size 2n/4n of all suspected points\n */\n projectStrokeOnPoints: function projectStrokeOnPoints(points, options, openPath) {\n var coords = [],\n s = options.strokeWidth / 2,\n strokeUniformScalar = options.strokeUniform ? new fabric.Point(1 / options.scaleX, 1 / options.scaleY) : new fabric.Point(1, 1),\n getStrokeHatVector = function getStrokeHatVector(v) {\n var scalar = s / Math.hypot(v.x, v.y);\n return new fabric.Point(v.x * scalar * strokeUniformScalar.x, v.y * scalar * strokeUniformScalar.y);\n };\n\n if (points.length <= 1) {\n return coords;\n }\n\n points.forEach(function (p, index) {\n var A = new fabric.Point(p.x, p.y),\n B,\n C;\n\n if (index === 0) {\n C = points[index + 1];\n B = openPath ? getStrokeHatVector(fabric.util.createVector(C, A)).addEquals(A) : points[points.length - 1];\n } else if (index === points.length - 1) {\n B = points[index - 1];\n C = openPath ? getStrokeHatVector(fabric.util.createVector(B, A)).addEquals(A) : points[0];\n } else {\n B = points[index - 1];\n C = points[index + 1];\n }\n\n var bisector = fabric.util.getBisector(A, B, C),\n bisectorVector = bisector.vector,\n alpha = bisector.angle,\n scalar,\n miterVector;\n\n if (options.strokeLineJoin === 'miter') {\n scalar = -s / Math.sin(alpha / 2);\n miterVector = new fabric.Point(bisectorVector.x * scalar * strokeUniformScalar.x, bisectorVector.y * scalar * strokeUniformScalar.y);\n\n if (Math.hypot(miterVector.x, miterVector.y) / s <= options.strokeMiterLimit) {\n coords.push(A.add(miterVector));\n coords.push(A.subtract(miterVector));\n return;\n }\n }\n\n scalar = -s * Math.SQRT2;\n miterVector = new fabric.Point(bisectorVector.x * scalar * strokeUniformScalar.x, bisectorVector.y * scalar * strokeUniformScalar.y);\n coords.push(A.add(miterVector));\n coords.push(A.subtract(miterVector));\n });\n return coords;\n },\n\n /**\n * Apply transform t to point p\n * @static\n * @memberOf fabric.util\n * @param {fabric.Point} p The point to transform\n * @param {Array} t The transform\n * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied\n * @return {fabric.Point} The transformed point\n */\n transformPoint: function transformPoint(p, t, ignoreOffset) {\n if (ignoreOffset) {\n return new fabric.Point(t[0] * p.x + t[2] * p.y, t[1] * p.x + t[3] * p.y);\n }\n\n return new fabric.Point(t[0] * p.x + t[2] * p.y + t[4], t[1] * p.x + t[3] * p.y + t[5]);\n },\n\n /**\n * Returns coordinates of points's bounding rectangle (left, top, width, height)\n * @param {Array} points 4 points array\n * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix\n * @return {Object} Object with left, top, width, height properties\n */\n makeBoundingBoxFromPoints: function makeBoundingBoxFromPoints(points, transform) {\n if (transform) {\n for (var i = 0; i < points.length; i++) {\n points[i] = fabric.util.transformPoint(points[i], transform);\n }\n }\n\n var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x],\n minX = fabric.util.array.min(xPoints),\n maxX = fabric.util.array.max(xPoints),\n width = maxX - minX,\n yPoints = [points[0].y, points[1].y, points[2].y, points[3].y],\n minY = fabric.util.array.min(yPoints),\n maxY = fabric.util.array.max(yPoints),\n height = maxY - minY;\n return {\n left: minX,\n top: minY,\n width: width,\n height: height\n };\n },\n\n /**\n * Invert transformation t\n * @static\n * @memberOf fabric.util\n * @param {Array} t The transform\n * @return {Array} The inverted transform\n */\n invertTransform: function invertTransform(t) {\n var a = 1 / (t[0] * t[3] - t[1] * t[2]),\n r = [a * t[3], -a * t[1], -a * t[2], a * t[0]],\n o = fabric.util.transformPoint({\n x: t[4],\n y: t[5]\n }, r, true);\n r[4] = -o.x;\n r[5] = -o.y;\n return r;\n },\n\n /**\n * A wrapper around Number#toFixed, which contrary to native method returns number, not string.\n * @static\n * @memberOf fabric.util\n * @param {Number|String} number number to operate on\n * @param {Number} fractionDigits number of fraction digits to \"leave\"\n * @return {Number}\n */\n toFixed: function toFixed(number, fractionDigits) {\n return parseFloat(Number(number).toFixed(fractionDigits));\n },\n\n /**\n * Converts from attribute value to pixel value if applicable.\n * Returns converted pixels or original value not converted.\n * @param {Number|String} value number to operate on\n * @param {Number} fontSize\n * @return {Number|String}\n */\n parseUnit: function parseUnit(value, fontSize) {\n var unit = /\\D{0,2}$/.exec(value),\n number = parseFloat(value);\n\n if (!fontSize) {\n fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;\n }\n\n switch (unit[0]) {\n case 'mm':\n return number * fabric.DPI / 25.4;\n\n case 'cm':\n return number * fabric.DPI / 2.54;\n\n case 'in':\n return number * fabric.DPI;\n\n case 'pt':\n return number * fabric.DPI / 72;\n // or * 4 / 3\n\n case 'pc':\n return number * fabric.DPI / 72 * 12;\n // or * 16\n\n case 'em':\n return number * fontSize;\n\n default:\n return number;\n }\n },\n\n /**\n * Function which always returns `false`.\n * @static\n * @memberOf fabric.util\n * @return {Boolean}\n */\n falseFunction: function falseFunction() {\n return false;\n },\n\n /**\n * Returns klass \"Class\" object of given namespace\n * @memberOf fabric.util\n * @param {String} type Type of object (eg. 'circle')\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @return {Object} klass \"Class\"\n */\n getKlass: function getKlass(type, namespace) {\n // capitalize first letter only\n type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1));\n return fabric.util.resolveNamespace(namespace)[type];\n },\n\n /**\n * Returns array of attributes for given svg that fabric parses\n * @memberOf fabric.util\n * @param {String} type Type of svg element (eg. 'circle')\n * @return {Array} string names of supported attributes\n */\n getSvgAttributes: function getSvgAttributes(type) {\n var attributes = ['instantiated_by_use', 'style', 'id', 'class'];\n\n switch (type) {\n case 'linearGradient':\n attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']);\n break;\n\n case 'radialGradient':\n attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']);\n break;\n\n case 'stop':\n attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']);\n break;\n }\n\n return attributes;\n },\n\n /**\n * Returns object of given namespace\n * @memberOf fabric.util\n * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric'\n * @return {Object} Object for given namespace (default fabric)\n */\n resolveNamespace: function resolveNamespace(namespace) {\n if (!namespace) {\n return fabric;\n }\n\n var parts = namespace.split('.'),\n len = parts.length,\n i,\n obj = global || fabric.window;\n\n for (i = 0; i < len; ++i) {\n obj = obj[parts[i]];\n }\n\n return obj;\n },\n\n /**\n * Loads image element from given url and passes it to a callback\n * @memberOf fabric.util\n * @param {String} url URL representing an image\n * @param {Function} callback Callback; invoked with loaded image\n * @param {*} [context] Context to invoke callback in\n * @param {Object} [crossOrigin] crossOrigin value to set image element to\n */\n loadImage: function loadImage(url, callback, context, crossOrigin) {\n if (!url) {\n callback && callback.call(context, url);\n return;\n }\n\n var img = fabric.util.createImage();\n /** @ignore */\n\n var onLoadCallback = function onLoadCallback() {\n callback && callback.call(context, img, false);\n img = img.onload = img.onerror = null;\n };\n\n img.onload = onLoadCallback;\n /** @ignore */\n\n img.onerror = function () {\n fabric.log('Error loading ' + img.src);\n callback && callback.call(context, null, true);\n img = img.onload = img.onerror = null;\n }; // data-urls appear to be buggy with crossOrigin\n // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767\n // see https://code.google.com/p/chromium/issues/detail?id=315152\n // https://bugzilla.mozilla.org/show_bug.cgi?id=935069\n // crossOrigin null is the same as not set.\n\n\n if (url.indexOf('data') !== 0 && crossOrigin !== undefined && crossOrigin !== null) {\n img.crossOrigin = crossOrigin;\n } // IE10 / IE11-Fix: SVG contents from data: URI\n // will only be available if the IMG is present\n // in the DOM (and visible)\n\n\n if (url.substring(0, 14) === 'data:image/svg') {\n img.onload = null;\n fabric.util.loadImageInDom(img, onLoadCallback);\n }\n\n img.src = url;\n },\n\n /**\n * Attaches SVG image with data: URL to the dom\n * @memberOf fabric.util\n * @param {Object} img Image object with data:image/svg src\n * @param {Function} callback Callback; invoked with loaded image\n * @return {Object} DOM element (div containing the SVG image)\n */\n loadImageInDom: function loadImageInDom(img, onLoadCallback) {\n var div = fabric.document.createElement('div');\n div.style.width = div.style.height = '1px';\n div.style.left = div.style.top = '-100%';\n div.style.position = 'absolute';\n div.appendChild(img);\n fabric.document.querySelector('body').appendChild(div);\n /**\n * Wrap in function to:\n * 1. Call existing callback\n * 2. Cleanup DOM\n */\n\n img.onload = function () {\n onLoadCallback();\n div.parentNode.removeChild(div);\n div = null;\n };\n },\n\n /**\n * Creates corresponding fabric instances from their object representations\n * @static\n * @memberOf fabric.util\n * @param {Array} objects Objects to enliven\n * @param {Function} callback Callback to invoke when all objects are created\n * @param {String} namespace Namespace to get klass \"Class\" object from\n * @param {Function} reviver Method for further parsing of object elements,\n * called after each fabric object created.\n */\n enlivenObjects: function enlivenObjects(objects, callback, namespace, reviver) {\n objects = objects || [];\n var enlivenedObjects = [],\n numLoadedObjects = 0,\n numTotalObjects = objects.length;\n\n function onLoaded() {\n if (++numLoadedObjects === numTotalObjects) {\n callback && callback(enlivenedObjects.filter(function (obj) {\n // filter out undefined objects (objects that gave error)\n return obj;\n }));\n }\n }\n\n if (!numTotalObjects) {\n callback && callback(enlivenedObjects);\n return;\n }\n\n objects.forEach(function (o, index) {\n // if sparse array\n if (!o || !o.type) {\n onLoaded();\n return;\n }\n\n var klass = fabric.util.getKlass(o.type, namespace);\n klass.fromObject(o, function (obj, error) {\n error || (enlivenedObjects[index] = obj);\n reviver && reviver(o, obj, error);\n onLoaded();\n });\n });\n },\n\n /**\n * Creates corresponding fabric instances residing in an object, e.g. `clipPath`\n * @see {@link fabric.Object.ENLIVEN_PROPS}\n * @param {Object} object\n * @param {Object} [context] assign enlived props to this object (pass null to skip this)\n * @param {(objects:fabric.Object[]) => void} callback\n */\n enlivenObjectEnlivables: function enlivenObjectEnlivables(object, context, callback) {\n var enlivenProps = fabric.Object.ENLIVEN_PROPS.filter(function (key) {\n return !!object[key];\n });\n fabric.util.enlivenObjects(enlivenProps.map(function (key) {\n return object[key];\n }), function (enlivedProps) {\n var objects = {};\n enlivenProps.forEach(function (key, index) {\n objects[key] = enlivedProps[index];\n context && (context[key] = enlivedProps[index]);\n });\n callback && callback(objects);\n });\n },\n\n /**\n * Create and wait for loading of patterns\n * @static\n * @memberOf fabric.util\n * @param {Array} patterns Objects to enliven\n * @param {Function} callback Callback to invoke when all objects are created\n * called after each fabric object created.\n */\n enlivenPatterns: function enlivenPatterns(patterns, callback) {\n patterns = patterns || [];\n\n function onLoaded() {\n if (++numLoadedPatterns === numPatterns) {\n callback && callback(enlivenedPatterns);\n }\n }\n\n var enlivenedPatterns = [],\n numLoadedPatterns = 0,\n numPatterns = patterns.length;\n\n if (!numPatterns) {\n callback && callback(enlivenedPatterns);\n return;\n }\n\n patterns.forEach(function (p, index) {\n if (p && p.source) {\n new fabric.Pattern(p, function (pattern) {\n enlivenedPatterns[index] = pattern;\n onLoaded();\n });\n } else {\n enlivenedPatterns[index] = p;\n onLoaded();\n }\n });\n },\n\n /**\n * Groups SVG elements (usually those retrieved from SVG document)\n * @static\n * @memberOf fabric.util\n * @param {Array} elements SVG elements to group\n * @param {Object} [options] Options object\n * @param {String} path Value to set sourcePath to\n * @return {fabric.Object|fabric.Group}\n */\n groupSVGElements: function groupSVGElements(elements, options, path) {\n var object;\n\n if (elements && elements.length === 1) {\n return elements[0];\n }\n\n if (options) {\n if (options.width && options.height) {\n options.centerPoint = {\n x: options.width / 2,\n y: options.height / 2\n };\n } else {\n delete options.width;\n delete options.height;\n }\n }\n\n object = new fabric.Group(elements, options);\n\n if (typeof path !== 'undefined') {\n object.sourcePath = path;\n }\n\n return object;\n },\n\n /**\n * Populates an object with properties of another object\n * @static\n * @memberOf fabric.util\n * @param {Object} source Source object\n * @param {Object} destination Destination object\n * @return {Array} properties Properties names to include\n */\n populateWithProperties: function populateWithProperties(source, destination, properties) {\n if (properties && Array.isArray(properties)) {\n for (var i = 0, len = properties.length; i < len; i++) {\n if (properties[i] in source) {\n destination[properties[i]] = source[properties[i]];\n }\n }\n }\n },\n\n /**\n * Creates canvas element\n * @static\n * @memberOf fabric.util\n * @return {CanvasElement} initialized canvas element\n */\n createCanvasElement: function createCanvasElement() {\n return fabric.document.createElement('canvas');\n },\n\n /**\n * Creates a canvas element that is a copy of another and is also painted\n * @param {CanvasElement} canvas to copy size and content of\n * @static\n * @memberOf fabric.util\n * @return {CanvasElement} initialized canvas element\n */\n copyCanvasElement: function copyCanvasElement(canvas) {\n var newCanvas = fabric.util.createCanvasElement();\n newCanvas.width = canvas.width;\n newCanvas.height = canvas.height;\n newCanvas.getContext('2d').drawImage(canvas, 0, 0);\n return newCanvas;\n },\n\n /**\n * since 2.6.0 moved from canvas instance to utility.\n * @param {CanvasElement} canvasEl to copy size and content of\n * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too\n * @param {Number} quality <= 1 and > 0\n * @static\n * @memberOf fabric.util\n * @return {String} data url\n */\n toDataURL: function toDataURL(canvasEl, format, quality) {\n return canvasEl.toDataURL('image/' + format, quality);\n },\n\n /**\n * Creates image element (works on client and node)\n * @static\n * @memberOf fabric.util\n * @return {HTMLImageElement} HTML image element\n */\n createImage: function createImage() {\n return fabric.document.createElement('img');\n },\n\n /**\n * Multiply matrix A by matrix B to nest transformations\n * @static\n * @memberOf fabric.util\n * @param {Array} a First transformMatrix\n * @param {Array} b Second transformMatrix\n * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices\n * @return {Array} The product of the two transform matrices\n */\n multiplyTransformMatrices: function multiplyTransformMatrices(a, b, is2x2) {\n // Matrix multiply a * b\n return [a[0] * b[0] + a[2] * b[1], a[1] * b[0] + a[3] * b[1], a[0] * b[2] + a[2] * b[3], a[1] * b[2] + a[3] * b[3], is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5]];\n },\n\n /**\n * Decomposes standard 2x3 matrix into transform components\n * @static\n * @memberOf fabric.util\n * @param {Array} a transformMatrix\n * @return {Object} Components of transform\n */\n qrDecompose: function qrDecompose(a) {\n var angle = atan2(a[1], a[0]),\n denom = pow(a[0], 2) + pow(a[1], 2),\n scaleX = sqrt(denom),\n scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX,\n skewX = atan2(a[0] * a[2] + a[1] * a[3], denom);\n return {\n angle: angle / PiBy180,\n scaleX: scaleX,\n scaleY: scaleY,\n skewX: skewX / PiBy180,\n skewY: 0,\n translateX: a[4],\n translateY: a[5]\n };\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.angle] angle in degrees\n * @return {Number[]} transform matrix\n */\n calcRotateMatrix: function calcRotateMatrix(options) {\n if (!options.angle) {\n return fabric.iMatrix.concat();\n }\n\n var theta = fabric.util.degreesToRadians(options.angle),\n cos = fabric.util.cos(theta),\n sin = fabric.util.sin(theta);\n return [cos, sin, -sin, cos, 0, 0];\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet.\n * is called DimensionsTransformMatrix because those properties are the one that influence\n * the size of the resulting box of the object.\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewY]\n * @return {Number[]} transform matrix\n */\n calcDimensionsMatrix: function calcDimensionsMatrix(options) {\n var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX,\n scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY,\n scaleMatrix = [options.flipX ? -scaleX : scaleX, 0, 0, options.flipY ? -scaleY : scaleY, 0, 0],\n multiply = fabric.util.multiplyTransformMatrices,\n degreesToRadians = fabric.util.degreesToRadians;\n\n if (options.skewX) {\n scaleMatrix = multiply(scaleMatrix, [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], true);\n }\n\n if (options.skewY) {\n scaleMatrix = multiply(scaleMatrix, [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], true);\n }\n\n return scaleMatrix;\n },\n\n /**\n * Returns a transform matrix starting from an object of the same kind of\n * the one returned from qrDecompose, useful also if you want to calculate some\n * transformations from an object that is not enlived yet\n * @static\n * @memberOf fabric.util\n * @param {Object} options\n * @param {Number} [options.angle]\n * @param {Number} [options.scaleX]\n * @param {Number} [options.scaleY]\n * @param {Boolean} [options.flipX]\n * @param {Boolean} [options.flipY]\n * @param {Number} [options.skewX]\n * @param {Number} [options.skewX]\n * @param {Number} [options.translateX]\n * @param {Number} [options.translateY]\n * @return {Number[]} transform matrix\n */\n composeMatrix: function composeMatrix(options) {\n var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0],\n multiply = fabric.util.multiplyTransformMatrices;\n\n if (options.angle) {\n matrix = multiply(matrix, fabric.util.calcRotateMatrix(options));\n }\n\n if (options.scaleX !== 1 || options.scaleY !== 1 || options.skewX || options.skewY || options.flipX || options.flipY) {\n matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options));\n }\n\n return matrix;\n },\n\n /**\n * reset an object transform state to neutral. Top and left are not accounted for\n * @static\n * @memberOf fabric.util\n * @param {fabric.Object} target object to transform\n */\n resetObjectTransform: function resetObjectTransform(target) {\n target.scaleX = 1;\n target.scaleY = 1;\n target.skewX = 0;\n target.skewY = 0;\n target.flipX = false;\n target.flipY = false;\n target.rotate(0);\n },\n\n /**\n * Extract Object transform values\n * @static\n * @memberOf fabric.util\n * @param {fabric.Object} target object to read from\n * @return {Object} Components of transform\n */\n saveObjectTransform: function saveObjectTransform(target) {\n return {\n scaleX: target.scaleX,\n scaleY: target.scaleY,\n skewX: target.skewX,\n skewY: target.skewY,\n angle: target.angle,\n left: target.left,\n flipX: target.flipX,\n flipY: target.flipY,\n top: target.top\n };\n },\n\n /**\n * Returns true if context has transparent pixel\n * at specified location (taking tolerance into account)\n * @param {CanvasRenderingContext2D} ctx context\n * @param {Number} x x coordinate\n * @param {Number} y y coordinate\n * @param {Number} tolerance Tolerance\n */\n isTransparent: function isTransparent(ctx, x, y, tolerance) {\n // If tolerance is > 0 adjust start coords to take into account.\n // If moves off Canvas fix to 0\n if (tolerance > 0) {\n if (x > tolerance) {\n x -= tolerance;\n } else {\n x = 0;\n }\n\n if (y > tolerance) {\n y -= tolerance;\n } else {\n y = 0;\n }\n }\n\n var _isTransparent = true,\n i,\n temp,\n imageData = ctx.getImageData(x, y, tolerance * 2 || 1, tolerance * 2 || 1),\n l = imageData.data.length; // Split image data - for tolerance > 1, pixelDataSize = 4;\n\n for (i = 3; i < l; i += 4) {\n temp = imageData.data[i];\n _isTransparent = temp <= 0;\n\n if (_isTransparent === false) {\n break; // Stop if colour found\n }\n }\n\n imageData = null;\n return _isTransparent;\n },\n\n /**\n * Parse preserveAspectRatio attribute from element\n * @param {string} attribute to be parsed\n * @return {Object} an object containing align and meetOrSlice attribute\n */\n parsePreserveAspectRatioAttribute: function parsePreserveAspectRatioAttribute(attribute) {\n var meetOrSlice = 'meet',\n alignX = 'Mid',\n alignY = 'Mid',\n aspectRatioAttrs = attribute.split(' '),\n align;\n\n if (aspectRatioAttrs && aspectRatioAttrs.length) {\n meetOrSlice = aspectRatioAttrs.pop();\n\n if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') {\n align = meetOrSlice;\n meetOrSlice = 'meet';\n } else if (aspectRatioAttrs.length) {\n align = aspectRatioAttrs.pop();\n }\n } //divide align in alignX and alignY\n\n\n alignX = align !== 'none' ? align.slice(1, 4) : 'none';\n alignY = align !== 'none' ? align.slice(5, 8) : 'none';\n return {\n meetOrSlice: meetOrSlice,\n alignX: alignX,\n alignY: alignY\n };\n },\n\n /**\n * Clear char widths cache for the given font family or all the cache if no\n * fontFamily is specified.\n * Use it if you know you are loading fonts in a lazy way and you are not waiting\n * for custom fonts to load properly when adding text objects to the canvas.\n * If a text object is added when its own font is not loaded yet, you will get wrong\n * measurement and so wrong bounding boxes.\n * After the font cache is cleared, either change the textObject text content or call\n * initDimensions() to trigger a recalculation\n * @memberOf fabric.util\n * @param {String} [fontFamily] font family to clear\n */\n clearFabricFontCache: function clearFabricFontCache(fontFamily) {\n fontFamily = (fontFamily || '').toLowerCase();\n\n if (!fontFamily) {\n fabric.charWidthsCache = {};\n } else if (fabric.charWidthsCache[fontFamily]) {\n delete fabric.charWidthsCache[fontFamily];\n }\n },\n\n /**\n * Given current aspect ratio, determines the max width and height that can\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Number} ar aspect ratio\n * @param {Number} maximumArea Maximum area you want to achieve\n * @return {Object.x} Limited dimensions by X\n * @return {Object.y} Limited dimensions by Y\n */\n limitDimsByArea: function limitDimsByArea(ar, maximumArea) {\n var roughWidth = Math.sqrt(maximumArea * ar),\n perfLimitSizeY = Math.floor(maximumArea / roughWidth);\n return {\n x: Math.floor(roughWidth),\n y: perfLimitSizeY\n };\n },\n capValue: function capValue(min, value, max) {\n return Math.max(min, Math.min(value, max));\n },\n\n /**\n * Finds the scale for the object source to fit inside the object destination,\n * keeping aspect ratio intact.\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Object | fabric.Object} source\n * @param {Number} source.height natural unscaled height of the object\n * @param {Number} source.width natural unscaled width of the object\n * @param {Object | fabric.Object} destination\n * @param {Number} destination.height natural unscaled height of the object\n * @param {Number} destination.width natural unscaled width of the object\n * @return {Number} scale factor to apply to source to fit into destination\n */\n findScaleToFit: function findScaleToFit(source, destination) {\n return Math.min(destination.width / source.width, destination.height / source.height);\n },\n\n /**\n * Finds the scale for the object source to cover entirely the object destination,\n * keeping aspect ratio intact.\n * respect the total allowed area for the cache.\n * @memberOf fabric.util\n * @param {Object | fabric.Object} source\n * @param {Number} source.height natural unscaled height of the object\n * @param {Number} source.width natural unscaled width of the object\n * @param {Object | fabric.Object} destination\n * @param {Number} destination.height natural unscaled height of the object\n * @param {Number} destination.width natural unscaled width of the object\n * @return {Number} scale factor to apply to source to cover destination\n */\n findScaleToCover: function findScaleToCover(source, destination) {\n return Math.max(destination.width / source.width, destination.height / source.height);\n },\n\n /**\n * given an array of 6 number returns something like `\"matrix(...numbers)\"`\n * @memberOf fabric.util\n * @param {Array} transform an array with 6 numbers\n * @return {String} transform matrix for svg\n * @return {Object.y} Limited dimensions by Y\n */\n matrixToSVG: function matrixToSVG(transform) {\n return 'matrix(' + transform.map(function (value) {\n return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS);\n }).join(' ') + ')';\n },\n\n /**\n * given an object and a transform, apply the inverse transform to the object,\n * this is equivalent to remove from that object that transformation, so that\n * added in a space with the removed transform, the object will be the same as before.\n * Removing from an object a transform that scale by 2 is like scaling it by 1/2.\n * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg\n * in the opposite direction.\n * This util is used to add objects inside transformed groups or nested groups.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n removeTransformFromObject: function removeTransformFromObject(object, transform) {\n var inverted = fabric.util.invertTransform(transform),\n finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix());\n fabric.util.applyTransformToObject(object, finalTransform);\n },\n\n /**\n * given an object and a transform, apply the transform to the object.\n * this is equivalent to change the space where the object is drawn.\n * Adding to an object a transform that scale by 2 is like scaling it by 2.\n * This is used when removing an object from an active selection for example.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n addTransformToObject: function addTransformToObject(object, transform) {\n fabric.util.applyTransformToObject(object, fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()));\n },\n\n /**\n * discard an object transform state and apply the one from the matrix.\n * @memberOf fabric.util\n * @param {fabric.Object} object the object you want to transform\n * @param {Array} transform the destination transform\n */\n applyTransformToObject: function applyTransformToObject(object, transform) {\n var options = fabric.util.qrDecompose(transform),\n center = new fabric.Point(options.translateX, options.translateY);\n object.flipX = false;\n object.flipY = false;\n object.set('scaleX', options.scaleX);\n object.set('scaleY', options.scaleY);\n object.skewX = options.skewX;\n object.skewY = options.skewY;\n object.angle = options.angle;\n object.setPositionByOrigin(center, 'center', 'center');\n },\n\n /**\n * given a width and height, return the size of the bounding box\n * that can contains the box with width/height with applied transform\n * described in options.\n * Use to calculate the boxes around objects for controls.\n * @memberOf fabric.util\n * @param {Number} width\n * @param {Number} height\n * @param {Object} options\n * @param {Number} options.scaleX\n * @param {Number} options.scaleY\n * @param {Number} options.skewX\n * @param {Number} options.skewY\n * @return {Object.x} width of containing\n * @return {Object.y} height of containing\n */\n sizeAfterTransform: function sizeAfterTransform(width, height, options) {\n var dimX = width / 2,\n dimY = height / 2,\n points = [{\n x: -dimX,\n y: -dimY\n }, {\n x: dimX,\n y: -dimY\n }, {\n x: -dimX,\n y: dimY\n }, {\n x: dimX,\n y: dimY\n }],\n transformMatrix = fabric.util.calcDimensionsMatrix(options),\n bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix);\n return {\n x: bbox.width,\n y: bbox.height\n };\n },\n\n /**\n * Merges 2 clip paths into one visually equal clip path\n *\n * **IMPORTANT**:\\\n * Does **NOT** clone the arguments, clone them proir if necessary.\n *\n * Creates a wrapper (group) that contains one clip path and is clipped by the other so content is kept where both overlap.\n * Use this method if both the clip paths may have nested clip paths of their own, so assigning one to the other's clip path property is not possible.\n *\n * In order to handle the `inverted` property we follow logic described in the following cases:\\\n * **(1)** both clip paths are inverted - the clip paths pass the inverted prop to the wrapper and loose it themselves.\\\n * **(2)** one is inverted and the other isn't - the wrapper shouldn't become inverted and the inverted clip path must clip the non inverted one to produce an identical visual effect.\\\n * **(3)** both clip paths are not inverted - wrapper and clip paths remain unchanged.\n *\n * @memberOf fabric.util\n * @param {fabric.Object} c1\n * @param {fabric.Object} c2\n * @returns {fabric.Object} merged clip path\n */\n mergeClipPaths: function mergeClipPaths(c1, c2) {\n var a = c1,\n b = c2;\n\n if (a.inverted && !b.inverted) {\n // case (2)\n a = c2;\n b = c1;\n } // `b` becomes `a`'s clip path so we transform `b` to `a` coordinate plane\n\n\n fabric.util.applyTransformToObject(b, fabric.util.multiplyTransformMatrices(fabric.util.invertTransform(a.calcTransformMatrix()), b.calcTransformMatrix())); // assign the `inverted` prop to the wrapping group\n\n var inverted = a.inverted && b.inverted;\n\n if (inverted) {\n // case (1)\n a.inverted = b.inverted = false;\n }\n\n return new fabric.Group([a], {\n clipPath: b,\n inverted: inverted\n });\n }\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function () {\n var _join = Array.prototype.join,\n commandLengths = {\n m: 2,\n l: 2,\n h: 1,\n v: 1,\n c: 6,\n s: 4,\n q: 4,\n t: 2,\n a: 7\n },\n repeatedCommands = {\n m: 'l',\n M: 'L'\n };\n\n function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) {\n var costh2 = fabric.util.cos(th2),\n sinth2 = fabric.util.sin(th2),\n costh3 = fabric.util.cos(th3),\n sinth3 = fabric.util.sin(th3),\n toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1,\n toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1,\n cp1X = fromX + mT * (-cosTh * rx * sinth2 - sinTh * ry * costh2),\n cp1Y = fromY + mT * (-sinTh * rx * sinth2 + cosTh * ry * costh2),\n cp2X = toX + mT * (cosTh * rx * sinth3 + sinTh * ry * costh3),\n cp2Y = toY + mT * (sinTh * rx * sinth3 - cosTh * ry * costh3);\n return ['C', cp1X, cp1Y, cp2X, cp2Y, toX, toY];\n }\n /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp\n * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here\n * http://mozilla.org/MPL/2.0/\n */\n\n\n function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) {\n var PI = Math.PI,\n th = rotateX * PI / 180,\n sinTh = fabric.util.sin(th),\n cosTh = fabric.util.cos(th),\n fromX = 0,\n fromY = 0;\n rx = Math.abs(rx);\n ry = Math.abs(ry);\n var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5,\n py = -cosTh * toY * 0.5 + sinTh * toX * 0.5,\n rx2 = rx * rx,\n ry2 = ry * ry,\n py2 = py * py,\n px2 = px * px,\n pl = rx2 * ry2 - rx2 * py2 - ry2 * px2,\n root = 0;\n\n if (pl < 0) {\n var s = Math.sqrt(1 - pl / (rx2 * ry2));\n rx *= s;\n ry *= s;\n } else {\n root = (large === sweep ? -1.0 : 1.0) * Math.sqrt(pl / (rx2 * py2 + ry2 * px2));\n }\n\n var cx = root * rx * py / ry,\n cy = -root * ry * px / rx,\n cx1 = cosTh * cx - sinTh * cy + toX * 0.5,\n cy1 = sinTh * cx + cosTh * cy + toY * 0.5,\n mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry),\n dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry);\n\n if (sweep === 0 && dtheta > 0) {\n dtheta -= 2 * PI;\n } else if (sweep === 1 && dtheta < 0) {\n dtheta += 2 * PI;\n } // Convert into cubic bezier segments <= 90deg\n\n\n var segments = Math.ceil(Math.abs(dtheta / PI * 2)),\n result = [],\n mDelta = dtheta / segments,\n mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2),\n th3 = mTheta + mDelta;\n\n for (var i = 0; i < segments; i++) {\n result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY);\n fromX = result[i][5];\n fromY = result[i][6];\n mTheta = th3;\n th3 += mDelta;\n }\n\n return result;\n }\n /*\n * Private\n */\n\n\n function calcVectorAngle(ux, uy, vx, vy) {\n var ta = Math.atan2(uy, ux),\n tb = Math.atan2(vy, vx);\n\n if (tb >= ta) {\n return tb - ta;\n } else {\n return 2 * Math.PI - (ta - tb);\n }\n }\n /**\n * Calculate bounding box of a beziercurve\n * @param {Number} x0 starting point\n * @param {Number} y0\n * @param {Number} x1 first control point\n * @param {Number} y1\n * @param {Number} x2 secondo control point\n * @param {Number} y2\n * @param {Number} x3 end of bezier\n * @param {Number} y3\n */\n // taken from http://jsbin.com/ivomiq/56/edit no credits available for that.\n // TODO: can we normalize this with the starting points set at 0 and then translated the bbox?\n\n\n function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) {\n var argsString;\n\n if (fabric.cachesBoundsOfCurve) {\n argsString = _join.call(arguments);\n\n if (fabric.boundsOfCurveCache[argsString]) {\n return fabric.boundsOfCurveCache[argsString];\n }\n }\n\n var sqrt = Math.sqrt,\n min = Math.min,\n max = Math.max,\n abs = Math.abs,\n tvalues = [],\n bounds = [[], []],\n a,\n b,\n c,\n t,\n t1,\n t2,\n b2ac,\n sqrtb2ac;\n b = 6 * x0 - 12 * x1 + 6 * x2;\n a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;\n c = 3 * x1 - 3 * x0;\n\n for (var i = 0; i < 2; ++i) {\n if (i > 0) {\n b = 6 * y0 - 12 * y1 + 6 * y2;\n a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;\n c = 3 * y1 - 3 * y0;\n }\n\n if (abs(a) < 1e-12) {\n if (abs(b) < 1e-12) {\n continue;\n }\n\n t = -c / b;\n\n if (0 < t && t < 1) {\n tvalues.push(t);\n }\n\n continue;\n }\n\n b2ac = b * b - 4 * c * a;\n\n if (b2ac < 0) {\n continue;\n }\n\n sqrtb2ac = sqrt(b2ac);\n t1 = (-b + sqrtb2ac) / (2 * a);\n\n if (0 < t1 && t1 < 1) {\n tvalues.push(t1);\n }\n\n t2 = (-b - sqrtb2ac) / (2 * a);\n\n if (0 < t2 && t2 < 1) {\n tvalues.push(t2);\n }\n }\n\n var x,\n y,\n j = tvalues.length,\n jlen = j,\n mt;\n\n while (j--) {\n t = tvalues[j];\n mt = 1 - t;\n x = mt * mt * mt * x0 + 3 * mt * mt * t * x1 + 3 * mt * t * t * x2 + t * t * t * x3;\n bounds[0][j] = x;\n y = mt * mt * mt * y0 + 3 * mt * mt * t * y1 + 3 * mt * t * t * y2 + t * t * t * y3;\n bounds[1][j] = y;\n }\n\n bounds[0][jlen] = x0;\n bounds[1][jlen] = y0;\n bounds[0][jlen + 1] = x3;\n bounds[1][jlen + 1] = y3;\n var result = [{\n x: min.apply(null, bounds[0]),\n y: min.apply(null, bounds[1])\n }, {\n x: max.apply(null, bounds[0]),\n y: max.apply(null, bounds[1])\n }];\n\n if (fabric.cachesBoundsOfCurve) {\n fabric.boundsOfCurveCache[argsString] = result;\n }\n\n return result;\n }\n /**\n * Converts arc to a bunch of bezier curves\n * @param {Number} fx starting point x\n * @param {Number} fy starting point y\n * @param {Array} coords Arc command\n */\n\n\n function fromArcToBeziers(fx, fy, coords) {\n var rx = coords[1],\n ry = coords[2],\n rot = coords[3],\n large = coords[4],\n sweep = coords[5],\n tx = coords[6],\n ty = coords[7],\n segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot);\n\n for (var i = 0, len = segsNorm.length; i < len; i++) {\n segsNorm[i][1] += fx;\n segsNorm[i][2] += fy;\n segsNorm[i][3] += fx;\n segsNorm[i][4] += fy;\n segsNorm[i][5] += fx;\n segsNorm[i][6] += fy;\n }\n\n return segsNorm;\n }\n\n ;\n /**\n * This function take a parsed SVG path and make it simpler for fabricJS logic.\n * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute )\n * S converted in C, T converted in Q, A converted in C.\n * @param {Array} path the array of commands of a parsed svg path for fabric.Path\n * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path\n */\n\n function makePathSimpler(path) {\n // x and y represent the last point of the path. the previous command point.\n // we add them to each relative command to make it an absolute comment.\n // we also swap the v V h H with L, because are easier to transform.\n var x = 0,\n y = 0,\n len = path.length,\n // x1 and y1 represent the last point of the subpath. the subpath is started with\n // m or M command. When a z or Z command is drawn, x and y need to be resetted to\n // the last x1 and y1.\n x1 = 0,\n y1 = 0,\n current,\n i,\n converted,\n // previous will host the letter of the previous command, to handle S and T.\n // controlX and controlY will host the previous reflected control point\n destinationPath = [],\n previous,\n controlX,\n controlY;\n\n for (i = 0; i < len; ++i) {\n converted = false;\n current = path[i].slice(0);\n\n switch (current[0]) {\n // first letter\n case 'l':\n // lineto, relative\n current[0] = 'L';\n current[1] += x;\n current[2] += y;\n // falls through\n\n case 'L':\n x = current[1];\n y = current[2];\n break;\n\n case 'h':\n // horizontal lineto, relative\n current[1] += x;\n // falls through\n\n case 'H':\n current[0] = 'L';\n current[2] = y;\n x = current[1];\n break;\n\n case 'v':\n // vertical lineto, relative\n current[1] += y;\n // falls through\n\n case 'V':\n current[0] = 'L';\n y = current[1];\n current[1] = x;\n current[2] = y;\n break;\n\n case 'm':\n // moveTo, relative\n current[0] = 'M';\n current[1] += x;\n current[2] += y;\n // falls through\n\n case 'M':\n x = current[1];\n y = current[2];\n x1 = current[1];\n y1 = current[2];\n break;\n\n case 'c':\n // bezierCurveTo, relative\n current[0] = 'C';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n current[5] += x;\n current[6] += y;\n // falls through\n\n case 'C':\n controlX = current[3];\n controlY = current[4];\n x = current[5];\n y = current[6];\n break;\n\n case 's':\n // shorthand cubic bezierCurveTo, relative\n current[0] = 'S';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n // falls through\n\n case 'S':\n // would be sScC but since we are swapping sSc for C, we check just that.\n if (previous === 'C') {\n // calculate reflection of previous control points\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n } else {\n // If there is no previous command or if the previous command was not a C, c, S, or s,\n // the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n\n x = current[3];\n y = current[4];\n current[0] = 'C';\n current[5] = current[3];\n current[6] = current[4];\n current[3] = current[1];\n current[4] = current[2];\n current[1] = controlX;\n current[2] = controlY; // current[3] and current[4] are NOW the second control point.\n // we keep it for the next reflection.\n\n controlX = current[3];\n controlY = current[4];\n break;\n\n case 'q':\n // quadraticCurveTo, relative\n current[0] = 'Q';\n current[1] += x;\n current[2] += y;\n current[3] += x;\n current[4] += y;\n // falls through\n\n case 'Q':\n controlX = current[1];\n controlY = current[2];\n x = current[3];\n y = current[4];\n break;\n\n case 't':\n // shorthand quadraticCurveTo, relative\n current[0] = 'T';\n current[1] += x;\n current[2] += y;\n // falls through\n\n case 'T':\n if (previous === 'Q') {\n // calculate reflection of previous control point\n controlX = 2 * x - controlX;\n controlY = 2 * y - controlY;\n } else {\n // If there is no previous command or if the previous command was not a Q, q, T or t,\n // assume the control point is coincident with the current point\n controlX = x;\n controlY = y;\n }\n\n current[0] = 'Q';\n x = current[1];\n y = current[2];\n current[1] = controlX;\n current[2] = controlY;\n current[3] = x;\n current[4] = y;\n break;\n\n case 'a':\n current[0] = 'A';\n current[6] += x;\n current[7] += y;\n // falls through\n\n case 'A':\n converted = true;\n destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current));\n x = current[6];\n y = current[7];\n break;\n\n case 'z':\n case 'Z':\n x = x1;\n y = y1;\n break;\n\n default:\n }\n\n if (!converted) {\n destinationPath.push(current);\n }\n\n previous = current[0];\n }\n\n return destinationPath;\n }\n\n ;\n /**\n * Calc length from point x1,y1 to x2,y2\n * @param {Number} x1 starting point x\n * @param {Number} y1 starting point y\n * @param {Number} x2 starting point x\n * @param {Number} y2 starting point y\n * @return {Number} length of segment\n */\n\n function calcLineLength(x1, y1, x2, y2) {\n return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));\n } // functions for the Cubic beizer\n // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350\n\n\n function CB1(t) {\n return t * t * t;\n }\n\n function CB2(t) {\n return 3 * t * t * (1 - t);\n }\n\n function CB3(t) {\n return 3 * t * (1 - t) * (1 - t);\n }\n\n function CB4(t) {\n return (1 - t) * (1 - t) * (1 - t);\n }\n\n function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) {\n return function (pct) {\n var c1 = CB1(pct),\n c2 = CB2(pct),\n c3 = CB3(pct),\n c4 = CB4(pct);\n return {\n x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4,\n y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4\n };\n };\n }\n\n function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) {\n return function (pct) {\n var invT = 1 - pct,\n tangentX = 3 * invT * invT * (p2x - p1x) + 6 * invT * pct * (p3x - p2x) + 3 * pct * pct * (p4x - p3x),\n tangentY = 3 * invT * invT * (p2y - p1y) + 6 * invT * pct * (p3y - p2y) + 3 * pct * pct * (p4y - p3y);\n return Math.atan2(tangentY, tangentX);\n };\n }\n\n function QB1(t) {\n return t * t;\n }\n\n function QB2(t) {\n return 2 * t * (1 - t);\n }\n\n function QB3(t) {\n return (1 - t) * (1 - t);\n }\n\n function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) {\n return function (pct) {\n var c1 = QB1(pct),\n c2 = QB2(pct),\n c3 = QB3(pct);\n return {\n x: p3x * c1 + p2x * c2 + p1x * c3,\n y: p3y * c1 + p2y * c2 + p1y * c3\n };\n };\n }\n\n function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) {\n return function (pct) {\n var invT = 1 - pct,\n tangentX = 2 * invT * (p2x - p1x) + 2 * pct * (p3x - p2x),\n tangentY = 2 * invT * (p2y - p1y) + 2 * pct * (p3y - p2y);\n return Math.atan2(tangentY, tangentX);\n };\n } // this will run over a path segment ( a cubic or quadratic segment) and approximate it\n // with 100 segemnts. This will good enough to calculate the length of the curve\n\n\n function pathIterator(iterator, x1, y1) {\n var tempP = {\n x: x1,\n y: y1\n },\n p,\n tmpLen = 0,\n perc;\n\n for (perc = 1; perc <= 100; perc += 1) {\n p = iterator(perc / 100);\n tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y);\n tempP = p;\n }\n\n return tmpLen;\n }\n /**\n * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1\n * that correspond to that pixels run over the path.\n * The percentage will be then used to find the correct point on the canvas for the path.\n * @param {Array} segInfo fabricJS collection of information on a parsed path\n * @param {Number} distance from starting point, in pixels.\n * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point;\n */\n\n\n function findPercentageForDistance(segInfo, distance) {\n var perc = 0,\n tmpLen = 0,\n iterator = segInfo.iterator,\n tempP = {\n x: segInfo.x,\n y: segInfo.y\n },\n p,\n nextLen,\n nextStep = 0.01,\n angleFinder = segInfo.angleFinder,\n lastPerc; // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100\n // the path\n\n while (tmpLen < distance && nextStep > 0.0001) {\n p = iterator(perc);\n lastPerc = perc;\n nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); // compare tmpLen each cycle with distance, decide next perc to test.\n\n if (nextLen + tmpLen > distance) {\n // we discard this step and we make smaller steps.\n perc -= nextStep;\n nextStep /= 2;\n } else {\n tempP = p;\n perc += nextStep;\n tmpLen += nextLen;\n }\n }\n\n p.angle = angleFinder(lastPerc);\n return p;\n }\n /**\n * Run over a parsed and simplifed path and extrac some informations.\n * informations are length of each command and starting point\n * @param {Array} path fabricJS parsed path commands\n * @return {Array} path commands informations\n */\n\n\n function getPathSegmentsInfo(path) {\n var totalLength = 0,\n len = path.length,\n current,\n //x2 and y2 are the coords of segment start\n //x1 and y1 are the coords of the current point\n x1 = 0,\n y1 = 0,\n x2 = 0,\n y2 = 0,\n info = [],\n iterator,\n tempInfo,\n angleFinder;\n\n for (var i = 0; i < len; i++) {\n current = path[i];\n tempInfo = {\n x: x1,\n y: y1,\n command: current[0]\n };\n\n switch (current[0]) {\n //first letter\n case 'M':\n tempInfo.length = 0;\n x2 = x1 = current[1];\n y2 = y1 = current[2];\n break;\n\n case 'L':\n tempInfo.length = calcLineLength(x1, y1, current[1], current[2]);\n x1 = current[1];\n y1 = current[2];\n break;\n\n case 'C':\n iterator = getPointOnCubicBezierIterator(x1, y1, current[1], current[2], current[3], current[4], current[5], current[6]);\n angleFinder = getTangentCubicIterator(x1, y1, current[1], current[2], current[3], current[4], current[5], current[6]);\n tempInfo.iterator = iterator;\n tempInfo.angleFinder = angleFinder;\n tempInfo.length = pathIterator(iterator, x1, y1);\n x1 = current[5];\n y1 = current[6];\n break;\n\n case 'Q':\n iterator = getPointOnQuadraticBezierIterator(x1, y1, current[1], current[2], current[3], current[4]);\n angleFinder = getTangentQuadraticIterator(x1, y1, current[1], current[2], current[3], current[4]);\n tempInfo.iterator = iterator;\n tempInfo.angleFinder = angleFinder;\n tempInfo.length = pathIterator(iterator, x1, y1);\n x1 = current[3];\n y1 = current[4];\n break;\n\n case 'Z':\n case 'z':\n // we add those in order to ease calculations later\n tempInfo.destX = x2;\n tempInfo.destY = y2;\n tempInfo.length = calcLineLength(x1, y1, x2, y2);\n x1 = x2;\n y1 = y2;\n break;\n }\n\n totalLength += tempInfo.length;\n info.push(tempInfo);\n }\n\n info.push({\n length: totalLength,\n x: x1,\n y: y1\n });\n return info;\n }\n\n function getPointOnPath(path, distance, infos) {\n if (!infos) {\n infos = getPathSegmentsInfo(path);\n }\n\n var i = 0;\n\n while (distance - infos[i].length > 0 && i < infos.length - 2) {\n distance -= infos[i].length;\n i++;\n } // var distance = infos[infos.length - 1] * perc;\n\n\n var segInfo = infos[i],\n segPercent = distance / segInfo.length,\n command = segInfo.command,\n segment = path[i],\n info;\n\n switch (command) {\n case 'M':\n return {\n x: segInfo.x,\n y: segInfo.y,\n angle: 0\n };\n\n case 'Z':\n case 'z':\n info = new fabric.Point(segInfo.x, segInfo.y).lerp(new fabric.Point(segInfo.destX, segInfo.destY), segPercent);\n info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x);\n return info;\n\n case 'L':\n info = new fabric.Point(segInfo.x, segInfo.y).lerp(new fabric.Point(segment[1], segment[2]), segPercent);\n info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x);\n return info;\n\n case 'C':\n return findPercentageForDistance(segInfo, distance);\n\n case 'Q':\n return findPercentageForDistance(segInfo, distance);\n }\n }\n /**\n *\n * @param {string} pathString\n * @return {(string|number)[][]} An array of SVG path commands\n * @example
Usage
\n * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [\n * ['M', 3, 4],\n * ['Q', 3, 5, 2, 1, 4, 0],\n * ['Q', 9, 12, 2, 1, 4, 0],\n * ];\n *\n */\n\n\n function parsePath(pathString) {\n var result = [],\n coords = [],\n currentPath,\n parsed,\n re = fabric.rePathCommand,\n rNumber = '[-+]?(?:\\\\d*\\\\.\\\\d+|\\\\d+\\\\.?)(?:[eE][-+]?\\\\d+)?\\\\s*',\n rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp,\n rFlagCommaWsp = '([01])' + fabric.commaWsp + '?',\n rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + rNumberCommaWsp + '?(' + rNumber + ')',\n regArcArgumentSequence = new RegExp(rArcSeq, 'g'),\n match,\n coordsStr,\n // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values)\n path;\n\n if (!pathString || !pathString.match) {\n return result;\n }\n\n path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi);\n\n for (var i = 0, coordsParsed, len = path.length; i < len; i++) {\n currentPath = path[i];\n coordsStr = currentPath.slice(1).trim();\n coords.length = 0;\n var command = currentPath.charAt(0);\n coordsParsed = [command];\n\n if (command.toLowerCase() === 'a') {\n // arcs have special flags that apparently don't require spaces so handle special\n for (var args; args = regArcArgumentSequence.exec(coordsStr);) {\n for (var j = 1; j < args.length; j++) {\n coords.push(args[j]);\n }\n }\n } else {\n while (match = re.exec(coordsStr)) {\n coords.push(match[0]);\n }\n }\n\n for (var j = 0, jlen = coords.length; j < jlen; j++) {\n parsed = parseFloat(coords[j]);\n\n if (!isNaN(parsed)) {\n coordsParsed.push(parsed);\n }\n }\n\n var commandLength = commandLengths[command.toLowerCase()],\n repeatedCommand = repeatedCommands[command] || command;\n\n if (coordsParsed.length - 1 > commandLength) {\n for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) {\n result.push([command].concat(coordsParsed.slice(k, k + commandLength)));\n command = repeatedCommand;\n }\n } else {\n result.push(coordsParsed);\n }\n }\n\n return result;\n }\n\n ;\n /**\n *\n * Converts points to a smooth SVG path\n * @param {{ x: number,y: number }[]} points Array of points\n * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value.\n * @return {(string|number)[][]} An array of SVG path commands\n */\n\n function getSmoothPathFromPoints(points, correction) {\n var path = [],\n i,\n p1 = new fabric.Point(points[0].x, points[0].y),\n p2 = new fabric.Point(points[1].x, points[1].y),\n len = points.length,\n multSignX = 1,\n multSignY = 0,\n manyPoints = len > 2;\n correction = correction || 0;\n\n if (manyPoints) {\n multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1;\n multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1;\n }\n\n path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]);\n\n for (i = 1; i < len; i++) {\n if (!p1.eq(p2)) {\n var midPoint = p1.midPointFrom(p2); // p1 is our bezier control point\n // midpoint is our endpoint\n // start point is p(i-1) value.\n\n path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]);\n }\n\n p1 = points[i];\n\n if (i + 1 < points.length) {\n p2 = points[i + 1];\n }\n }\n\n if (manyPoints) {\n multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1;\n multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1;\n }\n\n path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]);\n return path;\n }\n /**\n * Transform a path by transforming each segment.\n * it has to be a simplified path or it won't work.\n * WARNING: this depends from pathOffset for correct operation\n * @param {Array} path fabricJS parsed and simplified path commands\n * @param {Array} transform matrix that represent the transformation\n * @param {Object} [pathOffset] the fabric.Path pathOffset\n * @param {Number} pathOffset.x\n * @param {Number} pathOffset.y\n * @returns {Array} the transformed path\n */\n\n\n function transformPath(path, transform, pathOffset) {\n if (pathOffset) {\n transform = fabric.util.multiplyTransformMatrices(transform, [1, 0, 0, 1, -pathOffset.x, -pathOffset.y]);\n }\n\n return path.map(function (pathSegment) {\n var newSegment = pathSegment.slice(0),\n point = {};\n\n for (var i = 1; i < pathSegment.length - 1; i += 2) {\n point.x = pathSegment[i];\n point.y = pathSegment[i + 1];\n point = fabric.util.transformPoint(point, transform);\n newSegment[i] = point.x;\n newSegment[i + 1] = point.y;\n }\n\n return newSegment;\n });\n }\n /**\n * Join path commands to go back to svg format\n * @param {Array} pathData fabricJS parsed path commands\n * @return {String} joined path 'M 0 0 L 20 30'\n */\n\n\n fabric.util.joinPath = function (pathData) {\n return pathData.map(function (segment) {\n return segment.join(' ');\n }).join(' ');\n };\n\n fabric.util.parsePath = parsePath;\n fabric.util.makePathSimpler = makePathSimpler;\n fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints;\n fabric.util.getPathSegmentsInfo = getPathSegmentsInfo;\n fabric.util.getBoundsOfCurve = getBoundsOfCurve;\n fabric.util.getPointOnPath = getPointOnPath;\n fabric.util.transformPath = transformPath;\n})();\n\n(function () {\n var slice = Array.prototype.slice;\n /**\n * Invokes method on all items in a given array\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} method Name of a method to invoke\n * @return {Array}\n */\n\n function invoke(array, method) {\n var args = slice.call(arguments, 2),\n result = [];\n\n for (var i = 0, len = array.length; i < len; i++) {\n result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]);\n }\n\n return result;\n }\n /**\n * Finds maximum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {*}\n */\n\n\n function max(array, byProperty) {\n return find(array, byProperty, function (value1, value2) {\n return value1 >= value2;\n });\n }\n /**\n * Finds minimum value in array (not necessarily \"first\" one)\n * @memberOf fabric.util.array\n * @param {Array} array Array to iterate over\n * @param {String} byProperty\n * @return {*}\n */\n\n\n function min(array, byProperty) {\n return find(array, byProperty, function (value1, value2) {\n return value1 < value2;\n });\n }\n /**\n * @private\n */\n\n\n function fill(array, value) {\n var k = array.length;\n\n while (k--) {\n array[k] = value;\n }\n\n return array;\n }\n /**\n * @private\n */\n\n\n function find(array, byProperty, condition) {\n if (!array || array.length === 0) {\n return;\n }\n\n var i = array.length - 1,\n result = byProperty ? array[i][byProperty] : array[i];\n\n if (byProperty) {\n while (i--) {\n if (condition(array[i][byProperty], result)) {\n result = array[i][byProperty];\n }\n }\n } else {\n while (i--) {\n if (condition(array[i], result)) {\n result = array[i];\n }\n }\n }\n\n return result;\n }\n /**\n * @namespace fabric.util.array\n */\n\n\n fabric.util.array = {\n fill: fill,\n invoke: invoke,\n min: min,\n max: max\n };\n})();\n\n(function () {\n /**\n * Copies all enumerable properties of one js object to another\n * this does not and cannot compete with generic utils.\n * Does not clone or extend fabric.Object subclasses.\n * This is mostly for internal use and has extra handling for fabricJS objects\n * it skips the canvas and group properties in deep cloning.\n * @memberOf fabric.util.object\n * @param {Object} destination Where to copy to\n * @param {Object} source Where to copy from\n * @param {Boolean} [deep] Whether to extend nested objects\n * @return {Object}\n */\n function extend(destination, source, deep) {\n // JScript DontEnum bug is not taken care of\n // the deep clone is for internal use, is not meant to avoid\n // javascript traps or cloning html element or self referenced objects.\n if (deep) {\n if (!fabric.isLikelyNode && source instanceof Element) {\n // avoid cloning deep images, canvases,\n destination = source;\n } else if (source instanceof Array) {\n destination = [];\n\n for (var i = 0, len = source.length; i < len; i++) {\n destination[i] = extend({}, source[i], deep);\n }\n } else if (source && typeof source === 'object') {\n for (var property in source) {\n if (property === 'canvas' || property === 'group') {\n // we do not want to clone this props at all.\n // we want to keep the keys in the copy\n destination[property] = null;\n } else if (source.hasOwnProperty(property)) {\n destination[property] = extend({}, source[property], deep);\n }\n }\n } else {\n // this sounds odd for an extend but is ok for recursive use\n destination = source;\n }\n } else {\n for (var property in source) {\n destination[property] = source[property];\n }\n }\n\n return destination;\n }\n /**\n * Creates an empty object and copies all enumerable properties of another object to it\n * This method is mostly for internal use, and not intended for duplicating shapes in canvas. \n * @memberOf fabric.util.object\n * @param {Object} object Object to clone\n * @param {Boolean} [deep] Whether to clone nested objects\n * @return {Object}\n */\n //TODO: this function return an empty object if you try to clone null\n\n\n function clone(object, deep) {\n return extend({}, object, deep);\n }\n /** @namespace fabric.util.object */\n\n\n fabric.util.object = {\n extend: extend,\n clone: clone\n };\n fabric.util.object.extend(fabric.util, fabric.Observable);\n})();\n\n(function () {\n /**\n * Camelizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to camelize\n * @return {String} Camelized version of a string\n */\n function camelize(string) {\n return string.replace(/-+(.)?/g, function (match, character) {\n return character ? character.toUpperCase() : '';\n });\n }\n /**\n * Capitalizes a string\n * @memberOf fabric.util.string\n * @param {String} string String to capitalize\n * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized\n * and other letters stay untouched, if false first letter is capitalized\n * and other letters are converted to lowercase.\n * @return {String} Capitalized version of a string\n */\n\n\n function capitalize(string, firstLetterOnly) {\n return string.charAt(0).toUpperCase() + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase());\n }\n /**\n * Escapes XML in a string\n * @memberOf fabric.util.string\n * @param {String} string String to escape\n * @return {String} Escaped version of a string\n */\n\n\n function escapeXml(string) {\n return string.replace(/&/g, '&').replace(/\"/g, '"').replace(/'/g, ''').replace(//g, '>');\n }\n /**\n * Divide a string in the user perceived single units\n * @memberOf fabric.util.string\n * @param {String} textstring String to escape\n * @return {Array} array containing the graphemes\n */\n\n\n function graphemeSplit(textstring) {\n var i = 0,\n chr,\n graphemes = [];\n\n for (i = 0, chr; i < textstring.length; i++) {\n if ((chr = getWholeChar(textstring, i)) === false) {\n continue;\n }\n\n graphemes.push(chr);\n }\n\n return graphemes;\n } // taken from mdn in the charAt doc page.\n\n\n function getWholeChar(str, i) {\n var code = str.charCodeAt(i);\n\n if (isNaN(code)) {\n return ''; // Position not found\n }\n\n if (code < 0xD800 || code > 0xDFFF) {\n return str.charAt(i);\n } // High surrogate (could change last hex to 0xDB7F to treat high private\n // surrogates as single characters)\n\n\n if (0xD800 <= code && code <= 0xDBFF) {\n if (str.length <= i + 1) {\n throw 'High surrogate without following low surrogate';\n }\n\n var next = str.charCodeAt(i + 1);\n\n if (0xDC00 > next || next > 0xDFFF) {\n throw 'High surrogate without following low surrogate';\n }\n\n return str.charAt(i) + str.charAt(i + 1);\n } // Low surrogate (0xDC00 <= code && code <= 0xDFFF)\n\n\n if (i === 0) {\n throw 'Low surrogate without preceding high surrogate';\n }\n\n var prev = str.charCodeAt(i - 1); // (could change last hex to 0xDB7F to treat high private\n // surrogates as single characters)\n\n if (0xD800 > prev || prev > 0xDBFF) {\n throw 'Low surrogate without preceding high surrogate';\n } // We can pass over low surrogates now as the second component\n // in a pair which we have already processed\n\n\n return false;\n }\n /**\n * String utilities\n * @namespace fabric.util.string\n */\n\n\n fabric.util.string = {\n camelize: camelize,\n capitalize: capitalize,\n escapeXml: escapeXml,\n graphemeSplit: graphemeSplit\n };\n})();\n\n(function () {\n var slice = Array.prototype.slice,\n emptyFunction = function emptyFunction() {},\n IS_DONTENUM_BUGGY = function () {\n for (var p in {\n toString: 1\n }) {\n if (p === 'toString') {\n return false;\n }\n }\n\n return true;\n }(),\n\n /** @ignore */\n addMethods = function addMethods(klass, source, parent) {\n for (var property in source) {\n if (property in klass.prototype && typeof klass.prototype[property] === 'function' && (source[property] + '').indexOf('callSuper') > -1) {\n klass.prototype[property] = function (property) {\n return function () {\n var superclass = this.constructor.superclass;\n this.constructor.superclass = parent;\n var returnValue = source[property].apply(this, arguments);\n this.constructor.superclass = superclass;\n\n if (property !== 'initialize') {\n return returnValue;\n }\n };\n }(property);\n } else {\n klass.prototype[property] = source[property];\n }\n\n if (IS_DONTENUM_BUGGY) {\n if (source.toString !== Object.prototype.toString) {\n klass.prototype.toString = source.toString;\n }\n\n if (source.valueOf !== Object.prototype.valueOf) {\n klass.prototype.valueOf = source.valueOf;\n }\n }\n }\n };\n\n function Subclass() {}\n\n function callSuper(methodName) {\n var parentMethod = null,\n _this = this; // climb prototype chain to find method not equal to callee's method\n\n\n while (_this.constructor.superclass) {\n var superClassMethod = _this.constructor.superclass.prototype[methodName];\n\n if (_this[methodName] !== superClassMethod) {\n parentMethod = superClassMethod;\n break;\n } // eslint-disable-next-line\n\n\n _this = _this.constructor.superclass.prototype;\n }\n\n if (!parentMethod) {\n return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this);\n }\n\n return arguments.length > 1 ? parentMethod.apply(this, slice.call(arguments, 1)) : parentMethod.call(this);\n }\n /**\n * Helper for creation of \"classes\".\n * @memberOf fabric.util\n * @param {Function} [parent] optional \"Class\" to inherit from\n * @param {Object} [properties] Properties shared by all instances of this class\n * (be careful modifying objects defined here as this would affect all instances)\n */\n\n\n function createClass() {\n var parent = null,\n properties = slice.call(arguments, 0);\n\n if (typeof properties[0] === 'function') {\n parent = properties.shift();\n }\n\n function klass() {\n this.initialize.apply(this, arguments);\n }\n\n klass.superclass = parent;\n klass.subclasses = [];\n\n if (parent) {\n Subclass.prototype = parent.prototype;\n klass.prototype = new Subclass();\n parent.subclasses.push(klass);\n }\n\n for (var i = 0, length = properties.length; i < length; i++) {\n addMethods(klass, properties[i], parent);\n }\n\n if (!klass.prototype.initialize) {\n klass.prototype.initialize = emptyFunction;\n }\n\n klass.prototype.constructor = klass;\n klass.prototype.callSuper = callSuper;\n return klass;\n }\n\n fabric.util.createClass = createClass;\n})();\n\n(function () {\n // since ie11 can use addEventListener but they do not support options, i need to check\n var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent,\n touchEvents = ['touchstart', 'touchmove', 'touchend'];\n /**\n * Adds an event listener to an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n\n fabric.util.addListener = function (element, eventName, handler, options) {\n element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options);\n };\n /**\n * Removes an event listener from an element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {String} eventName\n * @param {Function} handler\n */\n\n\n fabric.util.removeListener = function (element, eventName, handler, options) {\n element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options);\n };\n\n function getTouchInfo(event) {\n var touchProp = event.changedTouches;\n\n if (touchProp && touchProp[0]) {\n return touchProp[0];\n }\n\n return event;\n }\n\n fabric.util.getPointer = function (event) {\n var element = event.target,\n scroll = fabric.util.getScrollLeftTop(element),\n _evt = getTouchInfo(event);\n\n return {\n x: _evt.clientX + scroll.left,\n y: _evt.clientY + scroll.top\n };\n };\n\n fabric.util.isTouchEvent = function (event) {\n return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch';\n };\n})();\n\n(function () {\n /**\n * Cross-browser wrapper for setting element's style\n * @memberOf fabric.util\n * @param {HTMLElement} element\n * @param {Object} styles\n * @return {HTMLElement} Element that was passed as a first argument\n */\n function setStyle(element, styles) {\n var elementStyle = element.style;\n\n if (!elementStyle) {\n return element;\n }\n\n if (typeof styles === 'string') {\n element.style.cssText += ';' + styles;\n return styles.indexOf('opacity') > -1 ? setOpacity(element, styles.match(/opacity:\\s*(\\d?\\.?\\d*)/)[1]) : element;\n }\n\n for (var property in styles) {\n if (property === 'opacity') {\n setOpacity(element, styles[property]);\n } else {\n var normalizedProperty = property === 'float' || property === 'cssFloat' ? typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat' : property;\n elementStyle[normalizedProperty] = styles[property];\n }\n }\n\n return element;\n }\n\n var parseEl = fabric.document.createElement('div'),\n supportsOpacity = typeof parseEl.style.opacity === 'string',\n supportsFilters = typeof parseEl.style.filter === 'string',\n reOpacity = /alpha\\s*\\(\\s*opacity\\s*=\\s*([^\\)]+)\\)/,\n\n /** @ignore */\n setOpacity = function setOpacity(element) {\n return element;\n };\n\n if (supportsOpacity) {\n /** @ignore */\n setOpacity = function setOpacity(element, value) {\n element.style.opacity = value;\n return element;\n };\n } else if (supportsFilters) {\n /** @ignore */\n setOpacity = function setOpacity(element, value) {\n var es = element.style;\n\n if (element.currentStyle && !element.currentStyle.hasLayout) {\n es.zoom = 1;\n }\n\n if (reOpacity.test(es.filter)) {\n value = value >= 0.9999 ? '' : 'alpha(opacity=' + value * 100 + ')';\n es.filter = es.filter.replace(reOpacity, value);\n } else {\n es.filter += ' alpha(opacity=' + value * 100 + ')';\n }\n\n return element;\n };\n }\n\n fabric.util.setStyle = setStyle;\n})();\n\n(function () {\n var _slice = Array.prototype.slice;\n /**\n * Takes id and returns an element with that id (if one exists in a document)\n * @memberOf fabric.util\n * @param {String|HTMLElement} id\n * @return {HTMLElement|null}\n */\n\n function getById(id) {\n return typeof id === 'string' ? fabric.document.getElementById(id) : id;\n }\n\n var sliceCanConvertNodelists,\n\n /**\n * Converts an array-like object (e.g. arguments or NodeList) to an array\n * @memberOf fabric.util\n * @param {Object} arrayLike\n * @return {Array}\n */\n toArray = function toArray(arrayLike) {\n return _slice.call(arrayLike, 0);\n };\n\n try {\n sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array;\n } catch (err) {}\n\n if (!sliceCanConvertNodelists) {\n toArray = function toArray(arrayLike) {\n var arr = new Array(arrayLike.length),\n i = arrayLike.length;\n\n while (i--) {\n arr[i] = arrayLike[i];\n }\n\n return arr;\n };\n }\n /**\n * Creates specified element with specified attributes\n * @memberOf fabric.util\n * @param {String} tagName Type of an element to create\n * @param {Object} [attributes] Attributes to set on an element\n * @return {HTMLElement} Newly created element\n */\n\n\n function makeElement(tagName, attributes) {\n var el = fabric.document.createElement(tagName);\n\n for (var prop in attributes) {\n if (prop === 'class') {\n el.className = attributes[prop];\n } else if (prop === 'for') {\n el.htmlFor = attributes[prop];\n } else {\n el.setAttribute(prop, attributes[prop]);\n }\n }\n\n return el;\n }\n /**\n * Adds class to an element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to add class to\n * @param {String} className Class to add to an element\n */\n\n\n function addClass(element, className) {\n if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) {\n element.className += (element.className ? ' ' : '') + className;\n }\n }\n /**\n * Wraps element with another element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to wrap\n * @param {HTMLElement|String} wrapper Element to wrap with\n * @param {Object} [attributes] Attributes to set on a wrapper\n * @return {HTMLElement} wrapper\n */\n\n\n function wrapElement(element, wrapper, attributes) {\n if (typeof wrapper === 'string') {\n wrapper = makeElement(wrapper, attributes);\n }\n\n if (element.parentNode) {\n element.parentNode.replaceChild(wrapper, element);\n }\n\n wrapper.appendChild(element);\n return wrapper;\n }\n /**\n * Returns element scroll offsets\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to operate on\n * @return {Object} Object with left/top values\n */\n\n\n function getScrollLeftTop(element) {\n var left = 0,\n top = 0,\n docElement = fabric.document.documentElement,\n body = fabric.document.body || {\n scrollLeft: 0,\n scrollTop: 0\n }; // While loop checks (and then sets element to) .parentNode OR .host\n // to account for ShadowDOM. We still want to traverse up out of ShadowDOM,\n // but the .parentNode of a root ShadowDOM node will always be null, instead\n // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938\n\n while (element && (element.parentNode || element.host)) {\n // Set element to element parent, or 'host' in case of ShadowDOM\n element = element.parentNode || element.host;\n\n if (element === fabric.document) {\n left = body.scrollLeft || docElement.scrollLeft || 0;\n top = body.scrollTop || docElement.scrollTop || 0;\n } else {\n left += element.scrollLeft || 0;\n top += element.scrollTop || 0;\n }\n\n if (element.nodeType === 1 && element.style.position === 'fixed') {\n break;\n }\n }\n\n return {\n left: left,\n top: top\n };\n }\n /**\n * Returns offset for a given element\n * @function\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get offset for\n * @return {Object} Object with \"left\" and \"top\" properties\n */\n\n\n function getElementOffset(element) {\n var docElem,\n doc = element && element.ownerDocument,\n box = {\n left: 0,\n top: 0\n },\n offset = {\n left: 0,\n top: 0\n },\n scrollLeftTop,\n offsetAttributes = {\n borderLeftWidth: 'left',\n borderTopWidth: 'top',\n paddingLeft: 'left',\n paddingTop: 'top'\n };\n\n if (!doc) {\n return offset;\n }\n\n for (var attr in offsetAttributes) {\n offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0;\n }\n\n docElem = doc.documentElement;\n\n if (typeof element.getBoundingClientRect !== 'undefined') {\n box = element.getBoundingClientRect();\n }\n\n scrollLeftTop = getScrollLeftTop(element);\n return {\n left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left,\n top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top\n };\n }\n /**\n * Returns style attribute value of a given element\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to get style attribute for\n * @param {String} attr Style attribute to get for element\n * @return {String} Style attribute value of the given element.\n */\n\n\n var getElementStyle;\n\n if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) {\n getElementStyle = function getElementStyle(element, attr) {\n var style = fabric.document.defaultView.getComputedStyle(element, null);\n return style ? style[attr] : undefined;\n };\n } else {\n getElementStyle = function getElementStyle(element, attr) {\n var value = element.style[attr];\n\n if (!value && element.currentStyle) {\n value = element.currentStyle[attr];\n }\n\n return value;\n };\n }\n\n (function () {\n var style = fabric.document.documentElement.style,\n selectProp = 'userSelect' in style ? 'userSelect' : 'MozUserSelect' in style ? 'MozUserSelect' : 'WebkitUserSelect' in style ? 'WebkitUserSelect' : 'KhtmlUserSelect' in style ? 'KhtmlUserSelect' : '';\n /**\n * Makes element unselectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make unselectable\n * @return {HTMLElement} Element that was passed in\n */\n\n function makeElementUnselectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = fabric.util.falseFunction;\n }\n\n if (selectProp) {\n element.style[selectProp] = 'none';\n } else if (typeof element.unselectable === 'string') {\n element.unselectable = 'on';\n }\n\n return element;\n }\n /**\n * Makes element selectable\n * @memberOf fabric.util\n * @param {HTMLElement} element Element to make selectable\n * @return {HTMLElement} Element that was passed in\n */\n\n\n function makeElementSelectable(element) {\n if (typeof element.onselectstart !== 'undefined') {\n element.onselectstart = null;\n }\n\n if (selectProp) {\n element.style[selectProp] = '';\n } else if (typeof element.unselectable === 'string') {\n element.unselectable = '';\n }\n\n return element;\n }\n\n fabric.util.makeElementUnselectable = makeElementUnselectable;\n fabric.util.makeElementSelectable = makeElementSelectable;\n })();\n\n function getNodeCanvas(element) {\n var impl = fabric.jsdomImplForWrapper(element);\n return impl._canvas || impl._image;\n }\n\n ;\n\n function cleanUpJsdomNode(element) {\n if (!fabric.isLikelyNode) {\n return;\n }\n\n var impl = fabric.jsdomImplForWrapper(element);\n\n if (impl) {\n impl._image = null;\n impl._canvas = null; // unsure if necessary\n\n impl._currentSrc = null;\n impl._attributes = null;\n impl._classList = null;\n }\n }\n\n function setImageSmoothing(ctx, value) {\n ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled;\n ctx.imageSmoothingEnabled = value;\n }\n /**\n * setImageSmoothing sets the context imageSmoothingEnabled property.\n * Used by canvas and by ImageObject.\n * @memberOf fabric.util\n * @since 4.0.0\n * @param {HTMLRenderingContext2D} ctx to set on\n * @param {Boolean} value true or false\n */\n\n\n fabric.util.setImageSmoothing = setImageSmoothing;\n fabric.util.getById = getById;\n fabric.util.toArray = toArray;\n fabric.util.addClass = addClass;\n fabric.util.makeElement = makeElement;\n fabric.util.wrapElement = wrapElement;\n fabric.util.getScrollLeftTop = getScrollLeftTop;\n fabric.util.getElementOffset = getElementOffset;\n fabric.util.getNodeCanvas = getNodeCanvas;\n fabric.util.cleanUpJsdomNode = cleanUpJsdomNode;\n})();\n\n(function () {\n function addParamToUrl(url, param) {\n return url + (/\\?/.test(url) ? '&' : '?') + param;\n }\n\n function emptyFn() {}\n /**\n * Cross-browser abstraction for sending XMLHttpRequest\n * @memberOf fabric.util\n * @param {String} url URL to send XMLHttpRequest to\n * @param {Object} [options] Options object\n * @param {String} [options.method=\"GET\"]\n * @param {String} [options.parameters] parameters to append to url in GET or in body\n * @param {String} [options.body] body to send with POST or PUT request\n * @param {Function} options.onComplete Callback to invoke when request is completed\n * @return {XMLHttpRequest} request\n */\n\n\n function request(url, options) {\n options || (options = {});\n\n var method = options.method ? options.method.toUpperCase() : 'GET',\n onComplete = options.onComplete || function () {},\n xhr = new fabric.window.XMLHttpRequest(),\n body = options.body || options.parameters;\n /** @ignore */\n\n\n xhr.onreadystatechange = function () {\n if (xhr.readyState === 4) {\n onComplete(xhr);\n xhr.onreadystatechange = emptyFn;\n }\n };\n\n if (method === 'GET') {\n body = null;\n\n if (typeof options.parameters === 'string') {\n url = addParamToUrl(url, options.parameters);\n }\n }\n\n xhr.open(method, url, true);\n\n if (method === 'POST' || method === 'PUT') {\n xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\n }\n\n xhr.send(body);\n return xhr;\n }\n\n fabric.util.request = request;\n})();\n/**\n * Wrapper around `console.log` (when available)\n * @param {*} [values] Values to log\n */\n\n\nfabric.log = console.log;\n/**\n * Wrapper around `console.warn` (when available)\n * @param {*} [values] Values to log as a warning\n */\n\nfabric.warn = console.warn;\n\n(function () {\n var extend = fabric.util.object.extend,\n clone = fabric.util.object.clone;\n /**\n * @typedef {Object} AnimationOptions\n * Animation of a value or list of values.\n * When using lists, think of something like this:\n * fabric.util.animate({\n * startValue: [1, 2, 3],\n * endValue: [2, 4, 6],\n * onChange: function([a, b, c]) {\n * canvas.zoomToPoint({x: b, y: c}, a)\n * canvas.renderAll()\n * }\n * });\n * @example\n * @property {Function} [onChange] Callback; invoked on every value change\n * @property {Function} [onComplete] Callback; invoked when value change is completed\n * @example\n * // Note: startValue, endValue, and byValue must match the type\n * var animationOptions = { startValue: 0, endValue: 1, byValue: 0.25 }\n * var animationOptions = { startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] }\n * @property {number | number[]} [startValue=0] Starting value\n * @property {number | number[]} [endValue=100] Ending value\n * @property {number | number[]} [byValue=100] Value to modify the property by\n * @property {Function} [easing] Easing function\n * @property {Number} [duration=500] Duration of change (in ms)\n * @property {Function} [abort] Additional function with logic. If returns true, animation aborts.\n *\n * @typedef {() => void} CancelFunction\n *\n * @typedef {Object} AnimationCurrentState\n * @property {number | number[]} currentValue value in range [`startValue`, `endValue`]\n * @property {number} completionRate value in range [0, 1]\n * @property {number} durationRate value in range [0, 1]\n *\n * @typedef {(AnimationOptions & AnimationCurrentState & { cancel: CancelFunction }} AnimationContext\n */\n\n /**\n * Array holding all running animations\n * @memberof fabric\n * @type {AnimationContext[]}\n */\n\n var RUNNING_ANIMATIONS = [];\n fabric.util.object.extend(RUNNING_ANIMATIONS, {\n /**\n * cancel all running animations at the next requestAnimFrame\n * @returns {AnimationContext[]}\n */\n cancelAll: function cancelAll() {\n var animations = this.splice(0);\n animations.forEach(function (animation) {\n animation.cancel();\n });\n return animations;\n },\n\n /**\n * cancel all running animations attached to canvas at the next requestAnimFrame\n * @param {fabric.Canvas} canvas\n * @returns {AnimationContext[]}\n */\n cancelByCanvas: function cancelByCanvas(canvas) {\n if (!canvas) {\n return [];\n }\n\n var cancelled = this.filter(function (animation) {\n return typeof animation.target === 'object' && animation.target.canvas === canvas;\n });\n cancelled.forEach(function (animation) {\n animation.cancel();\n });\n return cancelled;\n },\n\n /**\n * cancel all running animations for target at the next requestAnimFrame\n * @param {*} target\n * @returns {AnimationContext[]}\n */\n cancelByTarget: function cancelByTarget(target) {\n var cancelled = this.findAnimationsByTarget(target);\n cancelled.forEach(function (animation) {\n animation.cancel();\n });\n return cancelled;\n },\n\n /**\n *\n * @param {CancelFunction} cancelFunc the function returned by animate\n * @returns {number}\n */\n findAnimationIndex: function findAnimationIndex(cancelFunc) {\n return this.indexOf(this.findAnimation(cancelFunc));\n },\n\n /**\n *\n * @param {CancelFunction} cancelFunc the function returned by animate\n * @returns {AnimationContext | undefined} animation's options object\n */\n findAnimation: function findAnimation(cancelFunc) {\n return this.find(function (animation) {\n return animation.cancel === cancelFunc;\n });\n },\n\n /**\n *\n * @param {*} target the object that is assigned to the target property of the animation context\n * @returns {AnimationContext[]} array of animation options object associated with target\n */\n findAnimationsByTarget: function findAnimationsByTarget(target) {\n if (!target) {\n return [];\n }\n\n return this.filter(function (animation) {\n return animation.target === target;\n });\n }\n });\n\n function noop() {\n return false;\n }\n\n function defaultEasing(t, b, c, d) {\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n }\n /**\n * Changes value from one to another within certain period of time, invoking callbacks as value is being changed.\n * @memberOf fabric.util\n * @param {AnimationOptions} [options] Animation options\n * @example\n * // Note: startValue, endValue, and byValue must match the type\n * fabric.util.animate({ startValue: 0, endValue: 1, byValue: 0.25 })\n * fabric.util.animate({ startValue: [0, 1], endValue: [1, 2], byValue: [0.25, 0.25] })\n * @returns {CancelFunction} cancel function\n */\n\n\n function animate(options) {\n options || (options = {});\n\n var _cancel = false,\n context,\n removeFromRegistry = function removeFromRegistry() {\n var index = fabric.runningAnimations.indexOf(context);\n return index > -1 && fabric.runningAnimations.splice(index, 1)[0];\n };\n\n context = extend(clone(options), {\n cancel: function cancel() {\n _cancel = true;\n return removeFromRegistry();\n },\n currentValue: 'startValue' in options ? options.startValue : 0,\n completionRate: 0,\n durationRate: 0\n });\n fabric.runningAnimations.push(context);\n requestAnimFrame(function (timestamp) {\n var start = timestamp || +new Date(),\n duration = options.duration || 500,\n finish = start + duration,\n time,\n onChange = options.onChange || noop,\n abort = options.abort || noop,\n onComplete = options.onComplete || noop,\n easing = options.easing || defaultEasing,\n isMany = 'startValue' in options ? options.startValue.length > 0 : false,\n startValue = 'startValue' in options ? options.startValue : 0,\n endValue = 'endValue' in options ? options.endValue : 100,\n byValue = options.byValue || (isMany ? startValue.map(function (value, i) {\n return endValue[i] - startValue[i];\n }) : endValue - startValue);\n options.onStart && options.onStart();\n\n (function tick(ticktime) {\n time = ticktime || +new Date();\n var currentTime = time > finish ? duration : time - start,\n timePerc = currentTime / duration,\n current = isMany ? startValue.map(function (_value, i) {\n return easing(currentTime, startValue[i], byValue[i], duration);\n }) : easing(currentTime, startValue, byValue, duration),\n valuePerc = isMany ? Math.abs((current[0] - startValue[0]) / byValue[0]) : Math.abs((current - startValue) / byValue); // update context\n\n context.currentValue = isMany ? current.slice() : current;\n context.completionRate = valuePerc;\n context.durationRate = timePerc;\n\n if (_cancel) {\n return;\n }\n\n if (abort(current, valuePerc, timePerc)) {\n removeFromRegistry();\n return;\n }\n\n if (time > finish) {\n // update context\n context.currentValue = isMany ? endValue.slice() : endValue;\n context.completionRate = 1;\n context.durationRate = 1; // execute callbacks\n\n onChange(isMany ? endValue.slice() : endValue, 1, 1);\n onComplete(endValue, 1, 1);\n removeFromRegistry();\n return;\n } else {\n onChange(current, valuePerc, timePerc);\n requestAnimFrame(tick);\n }\n })(start);\n });\n return context.cancel;\n }\n\n var _requestAnimFrame = fabric.window.requestAnimationFrame || fabric.window.webkitRequestAnimationFrame || fabric.window.mozRequestAnimationFrame || fabric.window.oRequestAnimationFrame || fabric.window.msRequestAnimationFrame || function (callback) {\n return fabric.window.setTimeout(callback, 1000 / 60);\n };\n\n var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout;\n /**\n * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/\n * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method\n * @memberOf fabric.util\n * @param {Function} callback Callback to invoke\n * @param {DOMElement} element optional Element to associate with animation\n */\n\n\n function requestAnimFrame() {\n return _requestAnimFrame.apply(fabric.window, arguments);\n }\n\n function cancelAnimFrame() {\n return _cancelAnimFrame.apply(fabric.window, arguments);\n }\n\n fabric.util.animate = animate;\n fabric.util.requestAnimFrame = requestAnimFrame;\n fabric.util.cancelAnimFrame = cancelAnimFrame;\n fabric.runningAnimations = RUNNING_ANIMATIONS;\n})();\n\n(function () {\n // Calculate an in-between color. Returns a \"rgba()\" string.\n // Credit: Edwin Martin \n // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js\n function calculateColor(begin, end, pos) {\n var color = 'rgba(' + parseInt(begin[0] + pos * (end[0] - begin[0]), 10) + ',' + parseInt(begin[1] + pos * (end[1] - begin[1]), 10) + ',' + parseInt(begin[2] + pos * (end[2] - begin[2]), 10);\n color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1);\n color += ')';\n return color;\n }\n /**\n * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed.\n * @memberOf fabric.util\n * @param {String} fromColor The starting color in hex or rgb(a) format.\n * @param {String} toColor The starting color in hex or rgb(a) format.\n * @param {Number} [duration] Duration of change (in ms).\n * @param {Object} [options] Animation options\n * @param {Function} [options.onChange] Callback; invoked on every value change\n * @param {Function} [options.onComplete] Callback; invoked when value change is completed\n * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used.\n * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called.\n * @returns {Function} abort function\n */\n\n\n function animateColor(fromColor, toColor, duration, options) {\n var startColor = new fabric.Color(fromColor).getSource(),\n endColor = new fabric.Color(toColor).getSource(),\n originalOnComplete = options.onComplete,\n originalOnChange = options.onChange;\n options = options || {};\n return fabric.util.animate(fabric.util.object.extend(options, {\n duration: duration || 500,\n startValue: startColor,\n endValue: endColor,\n byValue: endColor,\n easing: function easing(currentTime, startValue, byValue, duration) {\n var posValue = options.colorEasing ? options.colorEasing(currentTime, duration) : 1 - Math.cos(currentTime / duration * (Math.PI / 2));\n return calculateColor(startValue, byValue, posValue);\n },\n // has to take in account for color restoring;\n onComplete: function onComplete(current, valuePerc, timePerc) {\n if (originalOnComplete) {\n return originalOnComplete(calculateColor(endColor, endColor, 0), valuePerc, timePerc);\n }\n },\n onChange: function onChange(current, valuePerc, timePerc) {\n if (originalOnChange) {\n if (Array.isArray(current)) {\n return originalOnChange(calculateColor(current, current, 0), valuePerc, timePerc);\n }\n\n originalOnChange(current, valuePerc, timePerc);\n }\n }\n }));\n }\n\n fabric.util.animateColor = animateColor;\n})();\n\n(function () {\n function normalize(a, c, p, s) {\n if (a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n //handle the 0/0 case:\n if (c === 0 && a === 0) {\n s = p / (2 * Math.PI) * Math.asin(1);\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n }\n\n return {\n a: a,\n c: c,\n p: p,\n s: s\n };\n }\n\n function elastic(opts, t, d) {\n return opts.a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p);\n }\n /**\n * Cubic easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutCubic(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t + 1) + b;\n }\n /**\n * Cubic easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutCubic(t, b, c, d) {\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * t * t * t + b;\n }\n\n return c / 2 * ((t -= 2) * t * t + 2) + b;\n }\n /**\n * Quartic easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInQuart(t, b, c, d) {\n return c * (t /= d) * t * t * t + b;\n }\n /**\n * Quartic easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutQuart(t, b, c, d) {\n return -c * ((t = t / d - 1) * t * t * t - 1) + b;\n }\n /**\n * Quartic easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutQuart(t, b, c, d) {\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * t * t * t * t + b;\n }\n\n return -c / 2 * ((t -= 2) * t * t * t - 2) + b;\n }\n /**\n * Quintic easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInQuint(t, b, c, d) {\n return c * (t /= d) * t * t * t * t + b;\n }\n /**\n * Quintic easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutQuint(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t * t * t + 1) + b;\n }\n /**\n * Quintic easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutQuint(t, b, c, d) {\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * t * t * t * t * t + b;\n }\n\n return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;\n }\n /**\n * Sinusoidal easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInSine(t, b, c, d) {\n return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;\n }\n /**\n * Sinusoidal easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutSine(t, b, c, d) {\n return c * Math.sin(t / d * (Math.PI / 2)) + b;\n }\n /**\n * Sinusoidal easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutSine(t, b, c, d) {\n return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;\n }\n /**\n * Exponential easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInExpo(t, b, c, d) {\n return t === 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;\n }\n /**\n * Exponential easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutExpo(t, b, c, d) {\n return t === d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;\n }\n /**\n * Exponential easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutExpo(t, b, c, d) {\n if (t === 0) {\n return b;\n }\n\n if (t === d) {\n return b + c;\n }\n\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * Math.pow(2, 10 * (t - 1)) + b;\n }\n\n return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;\n }\n /**\n * Circular easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInCirc(t, b, c, d) {\n return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;\n }\n /**\n * Circular easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutCirc(t, b, c, d) {\n return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;\n }\n /**\n * Circular easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutCirc(t, b, c, d) {\n t /= d / 2;\n\n if (t < 1) {\n return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;\n }\n\n return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;\n }\n /**\n * Elastic easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInElastic(t, b, c, d) {\n var s = 1.70158,\n p = 0,\n a = c;\n\n if (t === 0) {\n return b;\n }\n\n t /= d;\n\n if (t === 1) {\n return b + c;\n }\n\n if (!p) {\n p = d * 0.3;\n }\n\n var opts = normalize(a, c, p, s);\n return -elastic(opts, t, d) + b;\n }\n /**\n * Elastic easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutElastic(t, b, c, d) {\n var s = 1.70158,\n p = 0,\n a = c;\n\n if (t === 0) {\n return b;\n }\n\n t /= d;\n\n if (t === 1) {\n return b + c;\n }\n\n if (!p) {\n p = d * 0.3;\n }\n\n var opts = normalize(a, c, p, s);\n return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p) + opts.c + b;\n }\n /**\n * Elastic easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutElastic(t, b, c, d) {\n var s = 1.70158,\n p = 0,\n a = c;\n\n if (t === 0) {\n return b;\n }\n\n t /= d / 2;\n\n if (t === 2) {\n return b + c;\n }\n\n if (!p) {\n p = d * (0.3 * 1.5);\n }\n\n var opts = normalize(a, c, p, s);\n\n if (t < 1) {\n return -0.5 * elastic(opts, t, d) + b;\n }\n\n return opts.a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p) * 0.5 + opts.c + b;\n }\n /**\n * Backwards easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n\n return c * (t /= d) * t * ((s + 1) * t - s) + b;\n }\n /**\n * Backwards easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n\n return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;\n }\n /**\n * Backwards easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutBack(t, b, c, d, s) {\n if (s === undefined) {\n s = 1.70158;\n }\n\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;\n }\n\n return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;\n }\n /**\n * Bouncing easing in\n * @memberOf fabric.util.ease\n */\n\n\n function easeInBounce(t, b, c, d) {\n return c - easeOutBounce(d - t, 0, c, d) + b;\n }\n /**\n * Bouncing easing out\n * @memberOf fabric.util.ease\n */\n\n\n function easeOutBounce(t, b, c, d) {\n if ((t /= d) < 1 / 2.75) {\n return c * (7.5625 * t * t) + b;\n } else if (t < 2 / 2.75) {\n return c * (7.5625 * (t -= 1.5 / 2.75) * t + 0.75) + b;\n } else if (t < 2.5 / 2.75) {\n return c * (7.5625 * (t -= 2.25 / 2.75) * t + 0.9375) + b;\n } else {\n return c * (7.5625 * (t -= 2.625 / 2.75) * t + 0.984375) + b;\n }\n }\n /**\n * Bouncing easing in and out\n * @memberOf fabric.util.ease\n */\n\n\n function easeInOutBounce(t, b, c, d) {\n if (t < d / 2) {\n return easeInBounce(t * 2, 0, c, d) * 0.5 + b;\n }\n\n return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;\n }\n /**\n * Easing functions\n * See Easing Equations by Robert Penner\n * @namespace fabric.util.ease\n */\n\n\n fabric.util.ease = {\n /**\n * Quadratic easing in\n * @memberOf fabric.util.ease\n */\n easeInQuad: function easeInQuad(t, b, c, d) {\n return c * (t /= d) * t + b;\n },\n\n /**\n * Quadratic easing out\n * @memberOf fabric.util.ease\n */\n easeOutQuad: function easeOutQuad(t, b, c, d) {\n return -c * (t /= d) * (t - 2) + b;\n },\n\n /**\n * Quadratic easing in and out\n * @memberOf fabric.util.ease\n */\n easeInOutQuad: function easeInOutQuad(t, b, c, d) {\n t /= d / 2;\n\n if (t < 1) {\n return c / 2 * t * t + b;\n }\n\n return -c / 2 * (--t * (t - 2) - 1) + b;\n },\n\n /**\n * Cubic easing in\n * @memberOf fabric.util.ease\n */\n easeInCubic: function easeInCubic(t, b, c, d) {\n return c * (t /= d) * t * t + b;\n },\n easeOutCubic: easeOutCubic,\n easeInOutCubic: easeInOutCubic,\n easeInQuart: easeInQuart,\n easeOutQuart: easeOutQuart,\n easeInOutQuart: easeInOutQuart,\n easeInQuint: easeInQuint,\n easeOutQuint: easeOutQuint,\n easeInOutQuint: easeInOutQuint,\n easeInSine: easeInSine,\n easeOutSine: easeOutSine,\n easeInOutSine: easeInOutSine,\n easeInExpo: easeInExpo,\n easeOutExpo: easeOutExpo,\n easeInOutExpo: easeInOutExpo,\n easeInCirc: easeInCirc,\n easeOutCirc: easeOutCirc,\n easeInOutCirc: easeInOutCirc,\n easeInElastic: easeInElastic,\n easeOutElastic: easeOutElastic,\n easeInOutElastic: easeInOutElastic,\n easeInBack: easeInBack,\n easeOutBack: easeOutBack,\n easeInOutBack: easeInOutBack,\n easeInBounce: easeInBounce,\n easeOutBounce: easeOutBounce,\n easeInOutBounce: easeInOutBounce\n };\n})();\n\n(function (global) {\n 'use strict';\n /**\n * @name fabric\n * @namespace\n */\n\n var fabric = global.fabric || (global.fabric = {}),\n extend = fabric.util.object.extend,\n clone = fabric.util.object.clone,\n toFixed = fabric.util.toFixed,\n parseUnit = fabric.util.parseUnit,\n multiplyTransformMatrices = fabric.util.multiplyTransformMatrices,\n svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', 'image', 'text'],\n svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'],\n svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'],\n svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'],\n attributesMap = {\n cx: 'left',\n x: 'left',\n r: 'radius',\n cy: 'top',\n y: 'top',\n display: 'visible',\n visibility: 'visible',\n transform: 'transformMatrix',\n 'fill-opacity': 'fillOpacity',\n 'fill-rule': 'fillRule',\n 'font-family': 'fontFamily',\n 'font-size': 'fontSize',\n 'font-style': 'fontStyle',\n 'font-weight': 'fontWeight',\n 'letter-spacing': 'charSpacing',\n 'paint-order': 'paintFirst',\n 'stroke-dasharray': 'strokeDashArray',\n 'stroke-dashoffset': 'strokeDashOffset',\n 'stroke-linecap': 'strokeLineCap',\n 'stroke-linejoin': 'strokeLineJoin',\n 'stroke-miterlimit': 'strokeMiterLimit',\n 'stroke-opacity': 'strokeOpacity',\n 'stroke-width': 'strokeWidth',\n 'text-decoration': 'textDecoration',\n 'text-anchor': 'textAnchor',\n opacity: 'opacity',\n 'clip-path': 'clipPath',\n 'clip-rule': 'clipRule',\n 'vector-effect': 'strokeUniform',\n 'image-rendering': 'imageSmoothing'\n },\n colorAttributes = {\n stroke: 'strokeOpacity',\n fill: 'fillOpacity'\n },\n fSize = 'font-size',\n cPath = 'clip-path';\n fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames);\n fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements);\n fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors);\n fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents);\n fabric.cssRules = {};\n fabric.gradientDefs = {};\n fabric.clipPaths = {};\n\n function normalizeAttr(attr) {\n // transform attribute names\n if (attr in attributesMap) {\n return attributesMap[attr];\n }\n\n return attr;\n }\n\n function normalizeValue(attr, value, parentAttributes, fontSize) {\n var isArray = Array.isArray(value),\n parsed;\n\n if ((attr === 'fill' || attr === 'stroke') && value === 'none') {\n value = '';\n } else if (attr === 'strokeUniform') {\n return value === 'non-scaling-stroke';\n } else if (attr === 'strokeDashArray') {\n if (value === 'none') {\n value = null;\n } else {\n value = value.replace(/,/g, ' ').split(/\\s+/).map(parseFloat);\n }\n } else if (attr === 'transformMatrix') {\n if (parentAttributes && parentAttributes.transformMatrix) {\n value = multiplyTransformMatrices(parentAttributes.transformMatrix, fabric.parseTransformAttribute(value));\n } else {\n value = fabric.parseTransformAttribute(value);\n }\n } else if (attr === 'visible') {\n value = value !== 'none' && value !== 'hidden'; // display=none on parent element always takes precedence over child element\n\n if (parentAttributes && parentAttributes.visible === false) {\n value = false;\n }\n } else if (attr === 'opacity') {\n value = parseFloat(value);\n\n if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') {\n value *= parentAttributes.opacity;\n }\n } else if (attr === 'textAnchor'\n /* text-anchor */\n ) {\n value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center';\n } else if (attr === 'charSpacing') {\n // parseUnit returns px and we convert it to em\n parsed = parseUnit(value, fontSize) / fontSize * 1000;\n } else if (attr === 'paintFirst') {\n var fillIndex = value.indexOf('fill');\n var strokeIndex = value.indexOf('stroke');\n var value = 'fill';\n\n if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) {\n value = 'stroke';\n } else if (fillIndex === -1 && strokeIndex > -1) {\n value = 'stroke';\n }\n } else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') {\n return value;\n } else if (attr === 'imageSmoothing') {\n return value === 'optimizeQuality';\n } else {\n parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize);\n }\n\n return !isArray && isNaN(parsed) ? value : parsed;\n }\n /**\n * @private\n */\n\n\n function getSvgRegex(arr) {\n return new RegExp('^(' + arr.join('|') + ')\\\\b', 'i');\n }\n /**\n * @private\n * @param {Object} attributes Array of attributes to parse\n */\n\n\n function _setStrokeFillOpacity(attributes) {\n for (var attr in colorAttributes) {\n if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') {\n continue;\n }\n\n if (typeof attributes[attr] === 'undefined') {\n if (!fabric.Object.prototype[attr]) {\n continue;\n }\n\n attributes[attr] = fabric.Object.prototype[attr];\n }\n\n if (attributes[attr].indexOf('url(') === 0) {\n continue;\n }\n\n var color = new fabric.Color(attributes[attr]);\n attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba();\n }\n\n return attributes;\n }\n /**\n * @private\n */\n\n\n function _getMultipleNodes(doc, nodeNames) {\n var nodeName,\n nodeArray = [],\n nodeList,\n i,\n len;\n\n for (i = 0, len = nodeNames.length; i < len; i++) {\n nodeName = nodeNames[i];\n nodeList = doc.getElementsByTagName(nodeName);\n nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList));\n }\n\n return nodeArray;\n }\n /**\n * Parses \"transform\" attribute, returning an array of values\n * @static\n * @function\n * @memberOf fabric\n * @param {String} attributeValue String containing attribute value\n * @return {Array} Array of 6 elements representing transformation matrix\n */\n\n\n fabric.parseTransformAttribute = function () {\n function rotateMatrix(matrix, args) {\n var cos = fabric.util.cos(args[0]),\n sin = fabric.util.sin(args[0]),\n x = 0,\n y = 0;\n\n if (args.length === 3) {\n x = args[1];\n y = args[2];\n }\n\n matrix[0] = cos;\n matrix[1] = sin;\n matrix[2] = -sin;\n matrix[3] = cos;\n matrix[4] = x - (cos * x - sin * y);\n matrix[5] = y - (sin * x + cos * y);\n }\n\n function scaleMatrix(matrix, args) {\n var multiplierX = args[0],\n multiplierY = args.length === 2 ? args[1] : args[0];\n matrix[0] = multiplierX;\n matrix[3] = multiplierY;\n }\n\n function skewMatrix(matrix, args, pos) {\n matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0]));\n }\n\n function translateMatrix(matrix, args) {\n matrix[4] = args[0];\n\n if (args.length === 2) {\n matrix[5] = args[1];\n }\n } // identity matrix\n\n\n var iMatrix = fabric.iMatrix,\n // == begin transform regexp\n number = fabric.reNum,\n commaWsp = fabric.commaWsp,\n skewX = '(?:(skewX)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n skewY = '(?:(skewY)\\\\s*\\\\(\\\\s*(' + number + ')\\\\s*\\\\))',\n rotate = '(?:(rotate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + '))?\\\\s*\\\\))',\n scale = '(?:(scale)\\\\s*\\\\(\\\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\\\s*\\\\))',\n translate = '(?:(translate)\\\\s*\\\\(\\\\s*(' + number + ')(?:' + commaWsp + '(' + number + '))?\\\\s*\\\\))',\n matrix = '(?:(matrix)\\\\s*\\\\(\\\\s*' + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + commaWsp + '(' + number + ')' + '\\\\s*\\\\))',\n transform = '(?:' + matrix + '|' + translate + '|' + scale + '|' + rotate + '|' + skewX + '|' + skewY + ')',\n transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')',\n transformList = '^\\\\s*(?:' + transforms + '?)\\\\s*$',\n // http://www.w3.org/TR/SVG/coords.html#TransformAttribute\n reTransformList = new RegExp(transformList),\n // == end transform regexp\n reTransform = new RegExp(transform, 'g');\n return function (attributeValue) {\n // start with identity matrix\n var matrix = iMatrix.concat(),\n matrices = []; // return if no argument was given or\n // an argument does not match transform attribute regexp\n\n if (!attributeValue || attributeValue && !reTransformList.test(attributeValue)) {\n return matrix;\n }\n\n attributeValue.replace(reTransform, function (match) {\n var m = new RegExp(transform).exec(match).filter(function (match) {\n // match !== '' && match != null\n return !!match;\n }),\n operation = m[1],\n args = m.slice(2).map(parseFloat);\n\n switch (operation) {\n case 'translate':\n translateMatrix(matrix, args);\n break;\n\n case 'rotate':\n args[0] = fabric.util.degreesToRadians(args[0]);\n rotateMatrix(matrix, args);\n break;\n\n case 'scale':\n scaleMatrix(matrix, args);\n break;\n\n case 'skewX':\n skewMatrix(matrix, args, 2);\n break;\n\n case 'skewY':\n skewMatrix(matrix, args, 1);\n break;\n\n case 'matrix':\n matrix = args;\n break;\n } // snapshot current matrix into matrices array\n\n\n matrices.push(matrix.concat()); // reset\n\n matrix = iMatrix.concat();\n });\n var combinedMatrix = matrices[0];\n\n while (matrices.length > 1) {\n matrices.shift();\n combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]);\n }\n\n return combinedMatrix;\n };\n }();\n /**\n * @private\n */\n\n\n function parseStyleString(style, oStyle) {\n var attr, value;\n style.replace(/;\\s*$/, '').split(';').forEach(function (chunk) {\n var pair = chunk.split(':');\n attr = pair[0].trim().toLowerCase();\n value = pair[1].trim();\n oStyle[attr] = value;\n });\n }\n /**\n * @private\n */\n\n\n function parseStyleObject(style, oStyle) {\n var attr, value;\n\n for (var prop in style) {\n if (typeof style[prop] === 'undefined') {\n continue;\n }\n\n attr = prop.toLowerCase();\n value = style[prop];\n oStyle[attr] = value;\n }\n }\n /**\n * @private\n */\n\n\n function getGlobalStylesForElement(element, svgUid) {\n var styles = {};\n\n for (var rule in fabric.cssRules[svgUid]) {\n if (elementMatchesRule(element, rule.split(' '))) {\n for (var property in fabric.cssRules[svgUid][rule]) {\n styles[property] = fabric.cssRules[svgUid][rule][property];\n }\n }\n }\n\n return styles;\n }\n /**\n * @private\n */\n\n\n function elementMatchesRule(element, selectors) {\n var firstMatching,\n parentMatching = true; //start from rightmost selector.\n\n firstMatching = selectorMatches(element, selectors.pop());\n\n if (firstMatching && selectors.length) {\n parentMatching = doesSomeParentMatch(element, selectors);\n }\n\n return firstMatching && parentMatching && selectors.length === 0;\n }\n\n function doesSomeParentMatch(element, selectors) {\n var selector,\n parentMatching = true;\n\n while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) {\n if (parentMatching) {\n selector = selectors.pop();\n }\n\n element = element.parentNode;\n parentMatching = selectorMatches(element, selector);\n }\n\n return selectors.length === 0;\n }\n /**\n * @private\n */\n\n\n function selectorMatches(element, selector) {\n var nodeName = element.nodeName,\n classNames = element.getAttribute('class'),\n id = element.getAttribute('id'),\n matcher,\n i; // i check if a selector matches slicing away part from it.\n // if i get empty string i should match\n\n matcher = new RegExp('^' + nodeName, 'i');\n selector = selector.replace(matcher, '');\n\n if (id && selector.length) {\n matcher = new RegExp('#' + id + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n\n if (classNames && selector.length) {\n classNames = classNames.split(' ');\n\n for (i = classNames.length; i--;) {\n matcher = new RegExp('\\\\.' + classNames[i] + '(?![a-zA-Z\\\\-]+)', 'i');\n selector = selector.replace(matcher, '');\n }\n }\n\n return selector.length === 0;\n }\n /**\n * @private\n * to support IE8 missing getElementById on SVGdocument and on node xmlDOM\n */\n\n\n function elementById(doc, id) {\n var el;\n doc.getElementById && (el = doc.getElementById(id));\n\n if (el) {\n return el;\n }\n\n var node,\n i,\n len,\n nodelist = doc.getElementsByTagName('*');\n\n for (i = 0, len = nodelist.length; i < len; i++) {\n node = nodelist[i];\n\n if (id === node.getAttribute('id')) {\n return node;\n }\n }\n }\n /**\n * @private\n */\n\n\n function parseUseDirectives(doc) {\n var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']),\n i = 0;\n\n while (nodelist.length && i < nodelist.length) {\n var el = nodelist[i],\n xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href');\n\n if (xlinkAttribute === null) {\n return;\n }\n\n var xlink = xlinkAttribute.slice(1),\n x = el.getAttribute('x') || 0,\n y = el.getAttribute('y') || 0,\n el2 = elementById(doc, xlink).cloneNode(true),\n currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')',\n parentNode,\n oldLength = nodelist.length,\n attr,\n j,\n attrs,\n len,\n namespace = fabric.svgNS;\n applyViewboxTransform(el2);\n\n if (/^svg$/i.test(el2.nodeName)) {\n var el3 = el2.ownerDocument.createElementNS(namespace, 'g');\n\n for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) {\n attr = attrs.item(j);\n el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue);\n } // el2.firstChild != null\n\n\n while (el2.firstChild) {\n el3.appendChild(el2.firstChild);\n }\n\n el2 = el3;\n }\n\n for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) {\n attr = attrs.item(j);\n\n if (attr.nodeName === 'x' || attr.nodeName === 'y' || attr.nodeName === 'xlink:href' || attr.nodeName === 'href') {\n continue;\n }\n\n if (attr.nodeName === 'transform') {\n currentTrans = attr.nodeValue + ' ' + currentTrans;\n } else {\n el2.setAttribute(attr.nodeName, attr.nodeValue);\n }\n }\n\n el2.setAttribute('transform', currentTrans);\n el2.setAttribute('instantiated_by_use', '1');\n el2.removeAttribute('id');\n parentNode = el.parentNode;\n parentNode.replaceChild(el2, el); // some browsers do not shorten nodelist after replaceChild (IE8)\n\n if (nodelist.length === oldLength) {\n i++;\n }\n }\n } // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute\n // matches, e.g.: +14.56e-12, etc.\n\n\n var reViewBoxAttrValue = new RegExp('^' + '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' + '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' + '\\\\s*(' + fabric.reNum + '+)\\\\s*,?' + '\\\\s*(' + fabric.reNum + '+)\\\\s*' + '$');\n /**\n * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements\n */\n\n function applyViewboxTransform(element) {\n if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) {\n return {};\n }\n\n var viewBoxAttr = element.getAttribute('viewBox'),\n scaleX = 1,\n scaleY = 1,\n minX = 0,\n minY = 0,\n viewBoxWidth,\n viewBoxHeight,\n matrix,\n el,\n widthAttr = element.getAttribute('width'),\n heightAttr = element.getAttribute('height'),\n x = element.getAttribute('x') || 0,\n y = element.getAttribute('y') || 0,\n preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '',\n missingViewBox = !viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue)),\n missingDimAttr = !widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%',\n toBeParsed = missingViewBox && missingDimAttr,\n parsedDim = {},\n translateMatrix = '',\n widthDiff = 0,\n heightDiff = 0;\n parsedDim.width = 0;\n parsedDim.height = 0;\n parsedDim.toBeParsed = toBeParsed;\n\n if (missingViewBox) {\n if ((x || y) && element.parentNode && element.parentNode.nodeName !== '#document') {\n translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';\n matrix = (element.getAttribute('transform') || '') + translateMatrix;\n element.setAttribute('transform', matrix);\n element.removeAttribute('x');\n element.removeAttribute('y');\n }\n }\n\n if (toBeParsed) {\n return parsedDim;\n }\n\n if (missingViewBox) {\n parsedDim.width = parseUnit(widthAttr);\n parsedDim.height = parseUnit(heightAttr); // set a transform for elements that have x y and are inner(only) SVGs\n\n return parsedDim;\n }\n\n minX = -parseFloat(viewBoxAttr[1]);\n minY = -parseFloat(viewBoxAttr[2]);\n viewBoxWidth = parseFloat(viewBoxAttr[3]);\n viewBoxHeight = parseFloat(viewBoxAttr[4]);\n parsedDim.minX = minX;\n parsedDim.minY = minY;\n parsedDim.viewBoxWidth = viewBoxWidth;\n parsedDim.viewBoxHeight = viewBoxHeight;\n\n if (!missingDimAttr) {\n parsedDim.width = parseUnit(widthAttr);\n parsedDim.height = parseUnit(heightAttr);\n scaleX = parsedDim.width / viewBoxWidth;\n scaleY = parsedDim.height / viewBoxHeight;\n } else {\n parsedDim.width = viewBoxWidth;\n parsedDim.height = viewBoxHeight;\n } // default is to preserve aspect ratio\n\n\n preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio);\n\n if (preserveAspectRatio.alignX !== 'none') {\n //translate all container for the effect of Mid, Min, Max\n if (preserveAspectRatio.meetOrSlice === 'meet') {\n scaleY = scaleX = scaleX > scaleY ? scaleY : scaleX; // calculate additional translation to move the viewbox\n }\n\n if (preserveAspectRatio.meetOrSlice === 'slice') {\n scaleY = scaleX = scaleX > scaleY ? scaleX : scaleY; // calculate additional translation to move the viewbox\n }\n\n widthDiff = parsedDim.width - viewBoxWidth * scaleX;\n heightDiff = parsedDim.height - viewBoxHeight * scaleX;\n\n if (preserveAspectRatio.alignX === 'Mid') {\n widthDiff /= 2;\n }\n\n if (preserveAspectRatio.alignY === 'Mid') {\n heightDiff /= 2;\n }\n\n if (preserveAspectRatio.alignX === 'Min') {\n widthDiff = 0;\n }\n\n if (preserveAspectRatio.alignY === 'Min') {\n heightDiff = 0;\n }\n }\n\n if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) {\n return parsedDim;\n }\n\n if ((x || y) && element.parentNode.nodeName !== '#document') {\n translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') ';\n }\n\n matrix = translateMatrix + ' matrix(' + scaleX + ' 0' + ' 0 ' + scaleY + ' ' + (minX * scaleX + widthDiff) + ' ' + (minY * scaleY + heightDiff) + ') '; // seems unused.\n // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix);\n\n if (element.nodeName === 'svg') {\n el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); // element.firstChild != null\n\n while (element.firstChild) {\n el.appendChild(element.firstChild);\n }\n\n element.appendChild(el);\n } else {\n el = element;\n el.removeAttribute('x');\n el.removeAttribute('y');\n matrix = el.getAttribute('transform') + matrix;\n }\n\n el.setAttribute('transform', matrix);\n return parsedDim;\n }\n\n function hasAncestorWithNodeName(element, nodeName) {\n while (element && (element = element.parentNode)) {\n if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) && !element.getAttribute('instantiated_by_use')) {\n return true;\n }\n }\n\n return false;\n }\n /**\n * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @param {Function} callback Callback to call when parsing is finished;\n * It's being passed an array of elements (parsed from a document).\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [parsingOptions] options for parsing document\n * @param {String} [parsingOptions.crossOrigin] crossOrigin settings\n */\n\n\n fabric.parseSVGDocument = function (doc, callback, reviver, parsingOptions) {\n if (!doc) {\n return;\n }\n\n parseUseDirectives(doc);\n var svgUid = fabric.Object.__uid++,\n i,\n len,\n options = applyViewboxTransform(doc),\n descendants = fabric.util.toArray(doc.getElementsByTagName('*'));\n options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;\n options.svgUid = svgUid;\n\n if (descendants.length === 0 && fabric.isLikelyNode) {\n // we're likely in node, where \"o3-xml\" library fails to gEBTN(\"*\")\n // https://github.com/ajaxorg/node-o3-xml/issues/21\n descendants = doc.selectNodes('//*[name(.)!=\"svg\"]');\n var arr = [];\n\n for (i = 0, len = descendants.length; i < len; i++) {\n arr[i] = descendants[i];\n }\n\n descendants = arr;\n }\n\n var elements = descendants.filter(function (el) {\n applyViewboxTransform(el);\n return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement\n });\n\n if (!elements || elements && !elements.length) {\n callback && callback([], {});\n return;\n }\n\n var clipPaths = {};\n descendants.filter(function (el) {\n return el.nodeName.replace('svg:', '') === 'clipPath';\n }).forEach(function (el) {\n var id = el.getAttribute('id');\n clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function (el) {\n return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));\n });\n });\n fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc);\n fabric.cssRules[svgUid] = fabric.getCSSRules(doc);\n fabric.clipPaths[svgUid] = clipPaths; // Precedence of rules: style > class > attribute\n\n fabric.parseElements(elements, function (instances, elements) {\n if (callback) {\n callback(instances, options, elements, descendants);\n delete fabric.gradientDefs[svgUid];\n delete fabric.cssRules[svgUid];\n delete fabric.clipPaths[svgUid];\n }\n }, clone(options), reviver, parsingOptions);\n };\n\n function recursivelyParseGradientsXlink(doc, gradient) {\n var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'],\n xlinkAttr = 'xlink:href',\n xLink = gradient.getAttribute(xlinkAttr).slice(1),\n referencedGradient = elementById(doc, xLink);\n\n if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) {\n recursivelyParseGradientsXlink(doc, referencedGradient);\n }\n\n gradientsAttrs.forEach(function (attr) {\n if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) {\n gradient.setAttribute(attr, referencedGradient.getAttribute(attr));\n }\n });\n\n if (!gradient.children.length) {\n var referenceClone = referencedGradient.cloneNode(true);\n\n while (referenceClone.firstChild) {\n gradient.appendChild(referenceClone.firstChild);\n }\n }\n\n gradient.removeAttribute(xlinkAttr);\n }\n\n var reFontDeclaration = new RegExp('(normal|italic)?\\\\s*(normal|small-caps)?\\\\s*' + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\\\s*(' + fabric.reNum + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\\\/(normal|' + fabric.reNum + '))?\\\\s+(.*)');\n extend(fabric, {\n /**\n * Parses a short font declaration, building adding its properties to a style object\n * @static\n * @function\n * @memberOf fabric\n * @param {String} value font declaration\n * @param {Object} oStyle definition\n */\n parseFontDeclaration: function parseFontDeclaration(value, oStyle) {\n var match = value.match(reFontDeclaration);\n\n if (!match) {\n return;\n }\n\n var fontStyle = match[1],\n // font variant is not used\n // fontVariant = match[2],\n fontWeight = match[3],\n fontSize = match[4],\n lineHeight = match[5],\n fontFamily = match[6];\n\n if (fontStyle) {\n oStyle.fontStyle = fontStyle;\n }\n\n if (fontWeight) {\n oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight);\n }\n\n if (fontSize) {\n oStyle.fontSize = parseUnit(fontSize);\n }\n\n if (fontFamily) {\n oStyle.fontFamily = fontFamily;\n }\n\n if (lineHeight) {\n oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight;\n }\n },\n\n /**\n * Parses an SVG document, returning all of the gradient declarations found in it\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element\n */\n getGradientDefs: function getGradientDefs(doc) {\n var tagArray = ['linearGradient', 'radialGradient', 'svg:linearGradient', 'svg:radialGradient'],\n elList = _getMultipleNodes(doc, tagArray),\n el,\n j = 0,\n gradientDefs = {};\n\n j = elList.length;\n\n while (j--) {\n el = elList[j];\n\n if (el.getAttribute('xlink:href')) {\n recursivelyParseGradientsXlink(doc, el);\n }\n\n gradientDefs[el.getAttribute('id')] = el;\n }\n\n return gradientDefs;\n },\n\n /**\n * Returns an object of attributes' name/value, given element and an array of attribute names;\n * Parses parent \"g\" nodes recursively upwards.\n * @static\n * @memberOf fabric\n * @param {DOMElement} element Element to parse\n * @param {Array} attributes Array of attributes to parse\n * @return {Object} object containing parsed attributes' names/values\n */\n parseAttributes: function parseAttributes(element, attributes, svgUid) {\n if (!element) {\n return;\n }\n\n var value,\n parentAttributes = {},\n fontSize,\n parentFontSize;\n\n if (typeof svgUid === 'undefined') {\n svgUid = element.getAttribute('svgUid');\n } // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards\n\n\n if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) {\n parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid);\n }\n\n var ownAttributes = attributes.reduce(function (memo, attr) {\n value = element.getAttribute(attr);\n\n if (value) {\n // eslint-disable-line\n memo[attr] = value;\n }\n\n return memo;\n }, {}); // add values parsed from style, which take precedence over attributes\n // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes)\n\n var cssAttrs = extend(getGlobalStylesForElement(element, svgUid), fabric.parseStyleAttribute(element));\n ownAttributes = extend(ownAttributes, cssAttrs);\n\n if (cssAttrs[cPath]) {\n element.setAttribute(cPath, cssAttrs[cPath]);\n }\n\n fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE;\n\n if (ownAttributes[fSize]) {\n // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers.\n ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize);\n }\n\n var normalizedAttr,\n normalizedValue,\n normalizedStyle = {};\n\n for (var attr in ownAttributes) {\n normalizedAttr = normalizeAttr(attr);\n normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize);\n normalizedStyle[normalizedAttr] = normalizedValue;\n }\n\n if (normalizedStyle && normalizedStyle.font) {\n fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle);\n }\n\n var mergedAttrs = extend(parentAttributes, normalizedStyle);\n return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs);\n },\n\n /**\n * Transforms an array of svg elements to corresponding fabric.* instances\n * @static\n * @memberOf fabric\n * @param {Array} elements Array of elements to parse\n * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements)\n * @param {Object} [options] Options object\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n */\n parseElements: function parseElements(elements, callback, options, reviver, parsingOptions) {\n new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse();\n },\n\n /**\n * Parses \"style\" attribute, retuning an object with values\n * @static\n * @memberOf fabric\n * @param {SVGElement} element Element to parse\n * @return {Object} Objects with values parsed from style attribute of an element\n */\n parseStyleAttribute: function parseStyleAttribute(element) {\n var oStyle = {},\n style = element.getAttribute('style');\n\n if (!style) {\n return oStyle;\n }\n\n if (typeof style === 'string') {\n parseStyleString(style, oStyle);\n } else {\n parseStyleObject(style, oStyle);\n }\n\n return oStyle;\n },\n\n /**\n * Parses \"points\" attribute, returning an array of values\n * @static\n * @memberOf fabric\n * @param {String} points points attribute string\n * @return {Array} array of points\n */\n parsePointsAttribute: function parsePointsAttribute(points) {\n // points attribute is required and must not be empty\n if (!points) {\n return null;\n } // replace commas with whitespace and remove bookending whitespace\n\n\n points = points.replace(/,/g, ' ').trim();\n points = points.split(/\\s+/);\n var parsedPoints = [],\n i,\n len;\n\n for (i = 0, len = points.length; i < len; i += 2) {\n parsedPoints.push({\n x: parseFloat(points[i]),\n y: parseFloat(points[i + 1])\n });\n } // odd number of points is an error\n // if (parsedPoints.length % 2 !== 0) {\n // return null;\n // }\n\n\n return parsedPoints;\n },\n\n /**\n * Returns CSS rules for a given SVG document\n * @static\n * @function\n * @memberOf fabric\n * @param {SVGDocument} doc SVG document to parse\n * @return {Object} CSS rules of this document\n */\n getCSSRules: function getCSSRules(doc) {\n var styles = doc.getElementsByTagName('style'),\n i,\n len,\n allRules = {},\n rules; // very crude parsing of style contents\n\n for (i = 0, len = styles.length; i < len; i++) {\n var styleContents = styles[i].textContent; // remove comments\n\n styleContents = styleContents.replace(/\\/\\*[\\s\\S]*?\\*\\//g, '');\n\n if (styleContents.trim() === '') {\n continue;\n } // recovers all the rule in this form `body { style code... }`\n // rules = styleContents.match(/[^{]*\\{[\\s\\S]*?\\}/g);\n\n\n rules = styleContents.split('}'); // remove empty rules.\n\n rules = rules.filter(function (rule) {\n return rule.trim();\n }); // at this point we have hopefully an array of rules `body { style code... `\n // eslint-disable-next-line no-loop-func\n\n rules.forEach(function (rule) {\n var match = rule.split('{'),\n ruleObj = {},\n declaration = match[1].trim(),\n propertyValuePairs = declaration.split(';').filter(function (pair) {\n return pair.trim();\n });\n\n for (i = 0, len = propertyValuePairs.length; i < len; i++) {\n var pair = propertyValuePairs[i].split(':'),\n property = pair[0].trim(),\n value = pair[1].trim();\n ruleObj[property] = value;\n }\n\n rule = match[0].trim();\n rule.split(',').forEach(function (_rule) {\n _rule = _rule.replace(/^svg/i, '').trim();\n\n if (_rule === '') {\n return;\n }\n\n if (allRules[_rule]) {\n fabric.util.object.extend(allRules[_rule], ruleObj);\n } else {\n allRules[_rule] = fabric.util.object.clone(ruleObj);\n }\n });\n });\n }\n\n return allRules;\n },\n\n /**\n * Takes url corresponding to an SVG document, and parses it into a set of fabric objects.\n * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy)\n * @memberOf fabric\n * @param {String} url\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [options] Object containing options for parsing\n * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources\n */\n loadSVGFromURL: function loadSVGFromURL(url, callback, reviver, options) {\n url = url.replace(/^\\n\\s*/, '').trim();\n new fabric.util.request(url, {\n method: 'get',\n onComplete: onComplete\n });\n\n function onComplete(r) {\n var xml = r.responseXML;\n\n if (!xml || !xml.documentElement) {\n callback && callback(null);\n return false;\n }\n\n fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) {\n callback && callback(results, _options, elements, allElements);\n }, reviver, options);\n }\n },\n\n /**\n * Takes string corresponding to an SVG document, and parses it into a set of fabric objects\n * @memberOf fabric\n * @param {String} string\n * @param {Function} callback\n * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created.\n * @param {Object} [options] Object containing options for parsing\n * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources\n */\n loadSVGFromString: function loadSVGFromString(string, callback, reviver, options) {\n var parser = new fabric.window.DOMParser(),\n doc = parser.parseFromString(string.trim(), 'text/xml');\n fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) {\n callback(results, _options, elements, allElements);\n }, reviver, options);\n }\n });\n})(typeof exports !== 'undefined' ? exports : this);\n\nfabric.ElementsParser = function (elements, callback, options, reviver, parsingOptions, doc) {\n this.elements = elements;\n this.callback = callback;\n this.options = options;\n this.reviver = reviver;\n this.svgUid = options && options.svgUid || 0;\n this.parsingOptions = parsingOptions;\n this.regexUrl = /^url\\(['\"]?#([^'\"]+)['\"]?\\)/g;\n this.doc = doc;\n};\n\n(function (proto) {\n proto.parse = function () {\n this.instances = new Array(this.elements.length);\n this.numElements = this.elements.length;\n this.createObjects();\n };\n\n proto.createObjects = function () {\n var _this = this;\n\n this.elements.forEach(function (element, i) {\n element.setAttribute('svgUid', _this.svgUid);\n\n _this.createObject(element, i);\n });\n };\n\n proto.findTag = function (el) {\n return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))];\n };\n\n proto.createObject = function (el, index) {\n var klass = this.findTag(el);\n\n if (klass && klass.fromElement) {\n try {\n klass.fromElement(el, this.createCallback(index, el), this.options);\n } catch (err) {\n fabric.log(err);\n }\n } else {\n this.checkIfDone();\n }\n };\n\n proto.createCallback = function (index, el) {\n var _this = this;\n\n return function (obj) {\n var _options;\n\n _this.resolveGradient(obj, el, 'fill');\n\n _this.resolveGradient(obj, el, 'stroke');\n\n if (obj instanceof fabric.Image && obj._originalElement) {\n _options = obj.parsePreserveAspectRatioAttribute(el);\n }\n\n obj._removeTransformMatrix(_options);\n\n _this.resolveClipPath(obj, el);\n\n _this.reviver && _this.reviver(el, obj);\n _this.instances[index] = obj;\n\n _this.checkIfDone();\n };\n };\n\n proto.extractPropertyDefinition = function (obj, property, storage) {\n var value = obj[property],\n regex = this.regexUrl;\n\n if (!regex.test(value)) {\n return;\n }\n\n regex.lastIndex = 0;\n var id = regex.exec(value)[1];\n regex.lastIndex = 0;\n return fabric[storage][this.svgUid][id];\n };\n\n proto.resolveGradient = function (obj, el, property) {\n var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs');\n\n if (gradientDef) {\n var opacityAttr = el.getAttribute(property + '-opacity');\n var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options);\n obj.set(property, gradient);\n }\n };\n\n proto.createClipPathCallback = function (obj, container) {\n return function (_newObj) {\n _newObj._removeTransformMatrix();\n\n _newObj.fillRule = _newObj.clipRule;\n container.push(_newObj);\n };\n };\n\n proto.resolveClipPath = function (obj, usingElement) {\n var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'),\n element,\n klass,\n objTransformInv,\n container,\n gTransform,\n options;\n\n if (clipPath) {\n container = [];\n objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); // move the clipPath tag as sibling to the real element that is using it\n\n var clipPathTag = clipPath[0].parentNode;\n var clipPathOwner = usingElement;\n\n while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) {\n clipPathOwner = clipPathOwner.parentNode;\n }\n\n clipPathOwner.parentNode.appendChild(clipPathTag);\n\n for (var i = 0; i < clipPath.length; i++) {\n element = clipPath[i];\n klass = this.findTag(element);\n klass.fromElement(element, this.createClipPathCallback(obj, container), this.options);\n }\n\n if (container.length === 1) {\n clipPath = container[0];\n } else {\n clipPath = new fabric.Group(container);\n }\n\n gTransform = fabric.util.multiplyTransformMatrices(objTransformInv, clipPath.calcTransformMatrix());\n\n if (clipPath.clipPath) {\n this.resolveClipPath(clipPath, clipPathOwner);\n }\n\n var options = fabric.util.qrDecompose(gTransform);\n clipPath.flipX = false;\n clipPath.flipY = false;\n clipPath.set('scaleX', options.scaleX);\n clipPath.set('scaleY', options.scaleY);\n clipPath.angle = options.angle;\n clipPath.skewX = options.skewX;\n clipPath.skewY = 0;\n clipPath.setPositionByOrigin({\n x: options.translateX,\n y: options.translateY\n }, 'center', 'center');\n obj.clipPath = clipPath;\n } else {\n // if clip-path does not resolve to any element, delete the property.\n delete obj.clipPath;\n }\n };\n\n proto.checkIfDone = function () {\n if (--this.numElements === 0) {\n this.instances = this.instances.filter(function (el) {\n // eslint-disable-next-line no-eq-null, eqeqeq\n return el != null;\n });\n this.callback(this.instances, this.elements);\n }\n };\n})(fabric.ElementsParser.prototype);\n\n(function (global) {\n 'use strict';\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n\n var fabric = global.fabric || (global.fabric = {});\n\n if (fabric.Point) {\n fabric.warn('fabric.Point is already defined');\n return;\n }\n\n fabric.Point = Point;\n /**\n * Point class\n * @class fabric.Point\n * @memberOf fabric\n * @constructor\n * @param {Number} x\n * @param {Number} y\n * @return {fabric.Point} thisArg\n */\n\n function Point(x, y) {\n this.x = x;\n this.y = y;\n }\n\n Point.prototype =\n /** @lends fabric.Point.prototype */\n {\n type: 'point',\n constructor: Point,\n\n /**\n * Adds another point to this one and returns another one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point instance with added values\n */\n add: function add(that) {\n return new Point(this.x + that.x, this.y + that.y);\n },\n\n /**\n * Adds another point to this one\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n * @chainable\n */\n addEquals: function addEquals(that) {\n this.x += that.x;\n this.y += that.y;\n return this;\n },\n\n /**\n * Adds value to this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point} new Point with added value\n */\n scalarAdd: function scalarAdd(scalar) {\n return new Point(this.x + scalar, this.y + scalar);\n },\n\n /**\n * Adds value to this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n scalarAddEquals: function scalarAddEquals(scalar) {\n this.x += scalar;\n this.y += scalar;\n return this;\n },\n\n /**\n * Subtracts another point from this point and returns a new one\n * @param {fabric.Point} that\n * @return {fabric.Point} new Point object with subtracted values\n */\n subtract: function subtract(that) {\n return new Point(this.x - that.x, this.y - that.y);\n },\n\n /**\n * Subtracts another point from this point\n * @param {fabric.Point} that\n * @return {fabric.Point} thisArg\n * @chainable\n */\n subtractEquals: function subtractEquals(that) {\n this.x -= that.x;\n this.y -= that.y;\n return this;\n },\n\n /**\n * Subtracts value from this point and returns a new one\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n scalarSubtract: function scalarSubtract(scalar) {\n return new Point(this.x - scalar, this.y - scalar);\n },\n\n /**\n * Subtracts value from this point\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n scalarSubtractEquals: function scalarSubtractEquals(scalar) {\n this.x -= scalar;\n this.y -= scalar;\n return this;\n },\n\n /**\n * Multiplies this point by a value and returns a new one\n * TODO: rename in scalarMultiply in 2.0\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n multiply: function multiply(scalar) {\n return new Point(this.x * scalar, this.y * scalar);\n },\n\n /**\n * Multiplies this point by a value\n * TODO: rename in scalarMultiplyEquals in 2.0\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n multiplyEquals: function multiplyEquals(scalar) {\n this.x *= scalar;\n this.y *= scalar;\n return this;\n },\n\n /**\n * Divides this point by a value and returns a new one\n * TODO: rename in scalarDivide in 2.0\n * @param {Number} scalar\n * @return {fabric.Point}\n */\n divide: function divide(scalar) {\n return new Point(this.x / scalar, this.y / scalar);\n },\n\n /**\n * Divides this point by a value\n * TODO: rename in scalarDivideEquals in 2.0\n * @param {Number} scalar\n * @return {fabric.Point} thisArg\n * @chainable\n */\n divideEquals: function divideEquals(scalar) {\n this.x /= scalar;\n this.y /= scalar;\n return this;\n },\n\n /**\n * Returns true if this point is equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n eq: function eq(that) {\n return this.x === that.x && this.y === that.y;\n },\n\n /**\n * Returns true if this point is less than another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lt: function lt(that) {\n return this.x < that.x && this.y < that.y;\n },\n\n /**\n * Returns true if this point is less than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n lte: function lte(that) {\n return this.x <= that.x && this.y <= that.y;\n },\n\n /**\n * Returns true if this point is greater another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gt: function gt(that) {\n return this.x > that.x && this.y > that.y;\n },\n\n /**\n * Returns true if this point is greater than or equal to another one\n * @param {fabric.Point} that\n * @return {Boolean}\n */\n gte: function gte(that) {\n return this.x >= that.x && this.y >= that.y;\n },\n\n /**\n * Returns new point which is the result of linear interpolation with this one and another one\n * @param {fabric.Point} that\n * @param {Number} t , position of interpolation, between 0 and 1 default 0.5\n * @return {fabric.Point}\n */\n lerp: function lerp(that, t) {\n if (typeof t === 'undefined') {\n t = 0.5;\n }\n\n t = Math.max(Math.min(1, t), 0);\n return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t);\n },\n\n /**\n * Returns distance from this point and another one\n * @param {fabric.Point} that\n * @return {Number}\n */\n distanceFrom: function distanceFrom(that) {\n var dx = this.x - that.x,\n dy = this.y - that.y;\n return Math.sqrt(dx * dx + dy * dy);\n },\n\n /**\n * Returns the point between this point and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n midPointFrom: function midPointFrom(that) {\n return this.lerp(that);\n },\n\n /**\n * Returns a new point which is the min of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n min: function min(that) {\n return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y));\n },\n\n /**\n * Returns a new point which is the max of this and another one\n * @param {fabric.Point} that\n * @return {fabric.Point}\n */\n max: function max(that) {\n return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y));\n },\n\n /**\n * Returns string representation of this point\n * @return {String}\n */\n toString: function toString() {\n return this.x + ',' + this.y;\n },\n\n /**\n * Sets x/y of this point\n * @param {Number} x\n * @param {Number} y\n * @chainable\n */\n setXY: function setXY(x, y) {\n this.x = x;\n this.y = y;\n return this;\n },\n\n /**\n * Sets x of this point\n * @param {Number} x\n * @chainable\n */\n setX: function setX(x) {\n this.x = x;\n return this;\n },\n\n /**\n * Sets y of this point\n * @param {Number} y\n * @chainable\n */\n setY: function setY(y) {\n this.y = y;\n return this;\n },\n\n /**\n * Sets x/y of this point from another point\n * @param {fabric.Point} that\n * @chainable\n */\n setFromPoint: function setFromPoint(that) {\n this.x = that.x;\n this.y = that.y;\n return this;\n },\n\n /**\n * Swaps x/y of this point and another point\n * @param {fabric.Point} that\n */\n swap: function swap(that) {\n var x = this.x,\n y = this.y;\n this.x = that.x;\n this.y = that.y;\n that.x = x;\n that.y = y;\n },\n\n /**\n * return a cloned instance of the point\n * @return {fabric.Point}\n */\n clone: function clone() {\n return new Point(this.x, this.y);\n }\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function (global) {\n 'use strict';\n /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */\n\n var fabric = global.fabric || (global.fabric = {});\n\n if (fabric.Intersection) {\n fabric.warn('fabric.Intersection is already defined');\n return;\n }\n /**\n * Intersection class\n * @class fabric.Intersection\n * @memberOf fabric\n * @constructor\n */\n\n\n function Intersection(status) {\n this.status = status;\n this.points = [];\n }\n\n fabric.Intersection = Intersection;\n fabric.Intersection.prototype =\n /** @lends fabric.Intersection.prototype */\n {\n constructor: Intersection,\n\n /**\n * Appends a point to intersection\n * @param {fabric.Point} point\n * @return {fabric.Intersection} thisArg\n * @chainable\n */\n appendPoint: function appendPoint(point) {\n this.points.push(point);\n return this;\n },\n\n /**\n * Appends points to intersection\n * @param {Array} points\n * @return {fabric.Intersection} thisArg\n * @chainable\n */\n appendPoints: function appendPoints(points) {\n this.points = this.points.concat(points);\n return this;\n }\n };\n /**\n * Checks if one line intersects another\n * TODO: rename in intersectSegmentSegment\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {fabric.Point} b1\n * @param {fabric.Point} b2\n * @return {fabric.Intersection}\n */\n\n fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) {\n var result,\n uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x),\n ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x),\n uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);\n\n if (uB !== 0) {\n var ua = uaT / uB,\n ub = ubT / uB;\n\n if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {\n result = new Intersection('Intersection');\n result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y)));\n } else {\n result = new Intersection();\n }\n } else {\n if (uaT === 0 || ubT === 0) {\n result = new Intersection('Coincident');\n } else {\n result = new Intersection('Parallel');\n }\n }\n\n return result;\n };\n /**\n * Checks if line intersects polygon\n * TODO: rename in intersectSegmentPolygon\n * fix detection of coincident\n * @static\n * @param {fabric.Point} a1\n * @param {fabric.Point} a2\n * @param {Array} points\n * @return {fabric.Intersection}\n */\n\n\n fabric.Intersection.intersectLinePolygon = function (a1, a2, points) {\n var result = new Intersection(),\n length = points.length,\n b1,\n b2,\n inter,\n i;\n\n for (i = 0; i < length; i++) {\n b1 = points[i];\n b2 = points[(i + 1) % length];\n inter = Intersection.intersectLineLine(a1, a2, b1, b2);\n result.appendPoints(inter.points);\n }\n\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n\n return result;\n };\n /**\n * Checks if polygon intersects another polygon\n * @static\n * @param {Array} points1\n * @param {Array} points2\n * @return {fabric.Intersection}\n */\n\n\n fabric.Intersection.intersectPolygonPolygon = function (points1, points2) {\n var result = new Intersection(),\n length = points1.length,\n i;\n\n for (i = 0; i < length; i++) {\n var a1 = points1[i],\n a2 = points1[(i + 1) % length],\n inter = Intersection.intersectLinePolygon(a1, a2, points2);\n result.appendPoints(inter.points);\n }\n\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n\n return result;\n };\n /**\n * Checks if polygon intersects rectangle\n * @static\n * @param {Array} points\n * @param {fabric.Point} r1\n * @param {fabric.Point} r2\n * @return {fabric.Intersection}\n */\n\n\n fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) {\n var min = r1.min(r2),\n max = r1.max(r2),\n topRight = new fabric.Point(max.x, min.y),\n bottomLeft = new fabric.Point(min.x, max.y),\n inter1 = Intersection.intersectLinePolygon(min, topRight, points),\n inter2 = Intersection.intersectLinePolygon(topRight, max, points),\n inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points),\n inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points),\n result = new Intersection();\n result.appendPoints(inter1.points);\n result.appendPoints(inter2.points);\n result.appendPoints(inter3.points);\n result.appendPoints(inter4.points);\n\n if (result.points.length > 0) {\n result.status = 'Intersection';\n }\n\n return result;\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function (global) {\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = {});\n\n if (fabric.Color) {\n fabric.warn('fabric.Color is already defined.');\n return;\n }\n /**\n * Color class\n * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations;\n * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects.\n *\n * @class fabric.Color\n * @param {String} color optional in hex or rgb(a) or hsl format or from known color list\n * @return {fabric.Color} thisArg\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors}\n */\n\n\n function Color(color) {\n if (!color) {\n this.setSource([0, 0, 0, 1]);\n } else {\n this._tryParsingColor(color);\n }\n }\n\n fabric.Color = Color;\n fabric.Color.prototype =\n /** @lends fabric.Color.prototype */\n {\n /**\n * @private\n * @param {String|Array} color Color value to parse\n */\n _tryParsingColor: function _tryParsingColor(color) {\n var source;\n\n if (color in Color.colorNameMap) {\n color = Color.colorNameMap[color];\n }\n\n if (color === 'transparent') {\n source = [255, 255, 255, 0];\n }\n\n if (!source) {\n source = Color.sourceFromHex(color);\n }\n\n if (!source) {\n source = Color.sourceFromRgb(color);\n }\n\n if (!source) {\n source = Color.sourceFromHsl(color);\n }\n\n if (!source) {\n //if color is not recognize let's make black as canvas does\n source = [0, 0, 0, 1];\n }\n\n if (source) {\n this.setSource(source);\n }\n },\n\n /**\n * Adapted from https://github.com/mjijackson\n * @private\n * @param {Number} r Red color value\n * @param {Number} g Green color value\n * @param {Number} b Blue color value\n * @return {Array} Hsl color\n */\n _rgbToHsl: function _rgbToHsl(r, g, b) {\n r /= 255;\n g /= 255;\n b /= 255;\n var h,\n s,\n l,\n max = fabric.util.array.max([r, g, b]),\n min = fabric.util.array.min([r, g, b]);\n l = (max + min) / 2;\n\n if (max === min) {\n h = s = 0; // achromatic\n } else {\n var d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n\n switch (max) {\n case r:\n h = (g - b) / d + (g < b ? 6 : 0);\n break;\n\n case g:\n h = (b - r) / d + 2;\n break;\n\n case b:\n h = (r - g) / d + 4;\n break;\n }\n\n h /= 6;\n }\n\n return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];\n },\n\n /**\n * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @return {Array}\n */\n getSource: function getSource() {\n return this._source;\n },\n\n /**\n * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1])\n * @param {Array} source\n */\n setSource: function setSource(source) {\n this._source = source;\n },\n\n /**\n * Returns color representation in RGB format\n * @return {String} ex: rgb(0-255,0-255,0-255)\n */\n toRgb: function toRgb() {\n var source = this.getSource();\n return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')';\n },\n\n /**\n * Returns color representation in RGBA format\n * @return {String} ex: rgba(0-255,0-255,0-255,0-1)\n */\n toRgba: function toRgba() {\n var source = this.getSource();\n return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')';\n },\n\n /**\n * Returns color representation in HSL format\n * @return {String} ex: hsl(0-360,0%-100%,0%-100%)\n */\n toHsl: function toHsl() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)';\n },\n\n /**\n * Returns color representation in HSLA format\n * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1)\n */\n toHsla: function toHsla() {\n var source = this.getSource(),\n hsl = this._rgbToHsl(source[0], source[1], source[2]);\n\n return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')';\n },\n\n /**\n * Returns color representation in HEX format\n * @return {String} ex: FF5555\n */\n toHex: function toHex() {\n var source = this.getSource(),\n r,\n g,\n b;\n r = source[0].toString(16);\n r = r.length === 1 ? '0' + r : r;\n g = source[1].toString(16);\n g = g.length === 1 ? '0' + g : g;\n b = source[2].toString(16);\n b = b.length === 1 ? '0' + b : b;\n return r.toUpperCase() + g.toUpperCase() + b.toUpperCase();\n },\n\n /**\n * Returns color representation in HEXA format\n * @return {String} ex: FF5555CC\n */\n toHexa: function toHexa() {\n var source = this.getSource(),\n a;\n a = Math.round(source[3] * 255);\n a = a.toString(16);\n a = a.length === 1 ? '0' + a : a;\n return this.toHex() + a.toUpperCase();\n },\n\n /**\n * Gets value of alpha channel for this color\n * @return {Number} 0-1\n */\n getAlpha: function getAlpha() {\n return this.getSource()[3];\n },\n\n /**\n * Sets value of alpha channel for this color\n * @param {Number} alpha Alpha value 0-1\n * @return {fabric.Color} thisArg\n */\n setAlpha: function setAlpha(alpha) {\n var source = this.getSource();\n source[3] = alpha;\n this.setSource(source);\n return this;\n },\n\n /**\n * Transforms color to its grayscale representation\n * @return {fabric.Color} thisArg\n */\n toGrayscale: function toGrayscale() {\n var source = this.getSource(),\n average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10),\n currentAlpha = source[3];\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Transforms color to its black and white representation\n * @param {Number} threshold\n * @return {fabric.Color} thisArg\n */\n toBlackWhite: function toBlackWhite(threshold) {\n var source = this.getSource(),\n average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0),\n currentAlpha = source[3];\n threshold = threshold || 127;\n average = Number(average) < Number(threshold) ? 0 : 255;\n this.setSource([average, average, average, currentAlpha]);\n return this;\n },\n\n /**\n * Overlays color with another color\n * @param {String|fabric.Color} otherColor\n * @return {fabric.Color} thisArg\n */\n overlayWith: function overlayWith(otherColor) {\n if (!(otherColor instanceof Color)) {\n otherColor = new Color(otherColor);\n }\n\n var result = [],\n alpha = this.getAlpha(),\n otherAlpha = 0.5,\n source = this.getSource(),\n otherSource = otherColor.getSource(),\n i;\n\n for (i = 0; i < 3; i++) {\n result.push(Math.round(source[i] * (1 - otherAlpha) + otherSource[i] * otherAlpha));\n }\n\n result[3] = alpha;\n this.setSource(result);\n return this;\n }\n };\n /**\n * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n // eslint-disable-next-line max-len\n\n fabric.Color.reRGBa = /^rgba?\\(\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*,\\s*(\\d{1,3}(?:\\.\\d+)?\\%?)\\s*(?:\\s*,\\s*((?:\\d*\\.?\\d+)?)\\s*)?\\)$/i;\n /**\n * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 ))\n * @static\n * @field\n * @memberOf fabric.Color\n */\n\n fabric.Color.reHSLa = /^hsla?\\(\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3}\\%)\\s*,\\s*(\\d{1,3}\\%)\\s*(?:\\s*,\\s*(\\d+(?:\\.\\d+)?)\\s*)?\\)$/i;\n /**\n * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff)\n * @static\n * @field\n * @memberOf fabric.Color\n */\n\n fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i;\n /**\n * Map of the 148 color names with HEX code\n * @static\n * @field\n * @memberOf fabric.Color\n * @see: https://www.w3.org/TR/css3-color/#svg-color\n */\n\n fabric.Color.colorNameMap = {\n aliceblue: '#F0F8FF',\n antiquewhite: '#FAEBD7',\n aqua: '#00FFFF',\n aquamarine: '#7FFFD4',\n azure: '#F0FFFF',\n beige: '#F5F5DC',\n bisque: '#FFE4C4',\n black: '#000000',\n blanchedalmond: '#FFEBCD',\n blue: '#0000FF',\n blueviolet: '#8A2BE2',\n brown: '#A52A2A',\n burlywood: '#DEB887',\n cadetblue: '#5F9EA0',\n chartreuse: '#7FFF00',\n chocolate: '#D2691E',\n coral: '#FF7F50',\n cornflowerblue: '#6495ED',\n cornsilk: '#FFF8DC',\n crimson: '#DC143C',\n cyan: '#00FFFF',\n darkblue: '#00008B',\n darkcyan: '#008B8B',\n darkgoldenrod: '#B8860B',\n darkgray: '#A9A9A9',\n darkgrey: '#A9A9A9',\n darkgreen: '#006400',\n darkkhaki: '#BDB76B',\n darkmagenta: '#8B008B',\n darkolivegreen: '#556B2F',\n darkorange: '#FF8C00',\n darkorchid: '#9932CC',\n darkred: '#8B0000',\n darksalmon: '#E9967A',\n darkseagreen: '#8FBC8F',\n darkslateblue: '#483D8B',\n darkslategray: '#2F4F4F',\n darkslategrey: '#2F4F4F',\n darkturquoise: '#00CED1',\n darkviolet: '#9400D3',\n deeppink: '#FF1493',\n deepskyblue: '#00BFFF',\n dimgray: '#696969',\n dimgrey: '#696969',\n dodgerblue: '#1E90FF',\n firebrick: '#B22222',\n floralwhite: '#FFFAF0',\n forestgreen: '#228B22',\n fuchsia: '#FF00FF',\n gainsboro: '#DCDCDC',\n ghostwhite: '#F8F8FF',\n gold: '#FFD700',\n goldenrod: '#DAA520',\n gray: '#808080',\n grey: '#808080',\n green: '#008000',\n greenyellow: '#ADFF2F',\n honeydew: '#F0FFF0',\n hotpink: '#FF69B4',\n indianred: '#CD5C5C',\n indigo: '#4B0082',\n ivory: '#FFFFF0',\n khaki: '#F0E68C',\n lavender: '#E6E6FA',\n lavenderblush: '#FFF0F5',\n lawngreen: '#7CFC00',\n lemonchiffon: '#FFFACD',\n lightblue: '#ADD8E6',\n lightcoral: '#F08080',\n lightcyan: '#E0FFFF',\n lightgoldenrodyellow: '#FAFAD2',\n lightgray: '#D3D3D3',\n lightgrey: '#D3D3D3',\n lightgreen: '#90EE90',\n lightpink: '#FFB6C1',\n lightsalmon: '#FFA07A',\n lightseagreen: '#20B2AA',\n lightskyblue: '#87CEFA',\n lightslategray: '#778899',\n lightslategrey: '#778899',\n lightsteelblue: '#B0C4DE',\n lightyellow: '#FFFFE0',\n lime: '#00FF00',\n limegreen: '#32CD32',\n linen: '#FAF0E6',\n magenta: '#FF00FF',\n maroon: '#800000',\n mediumaquamarine: '#66CDAA',\n mediumblue: '#0000CD',\n mediumorchid: '#BA55D3',\n mediumpurple: '#9370DB',\n mediumseagreen: '#3CB371',\n mediumslateblue: '#7B68EE',\n mediumspringgreen: '#00FA9A',\n mediumturquoise: '#48D1CC',\n mediumvioletred: '#C71585',\n midnightblue: '#191970',\n mintcream: '#F5FFFA',\n mistyrose: '#FFE4E1',\n moccasin: '#FFE4B5',\n navajowhite: '#FFDEAD',\n navy: '#000080',\n oldlace: '#FDF5E6',\n olive: '#808000',\n olivedrab: '#6B8E23',\n orange: '#FFA500',\n orangered: '#FF4500',\n orchid: '#DA70D6',\n palegoldenrod: '#EEE8AA',\n palegreen: '#98FB98',\n paleturquoise: '#AFEEEE',\n palevioletred: '#DB7093',\n papayawhip: '#FFEFD5',\n peachpuff: '#FFDAB9',\n peru: '#CD853F',\n pink: '#FFC0CB',\n plum: '#DDA0DD',\n powderblue: '#B0E0E6',\n purple: '#800080',\n rebeccapurple: '#663399',\n red: '#FF0000',\n rosybrown: '#BC8F8F',\n royalblue: '#4169E1',\n saddlebrown: '#8B4513',\n salmon: '#FA8072',\n sandybrown: '#F4A460',\n seagreen: '#2E8B57',\n seashell: '#FFF5EE',\n sienna: '#A0522D',\n silver: '#C0C0C0',\n skyblue: '#87CEEB',\n slateblue: '#6A5ACD',\n slategray: '#708090',\n slategrey: '#708090',\n snow: '#FFFAFA',\n springgreen: '#00FF7F',\n steelblue: '#4682B4',\n tan: '#D2B48C',\n teal: '#008080',\n thistle: '#D8BFD8',\n tomato: '#FF6347',\n turquoise: '#40E0D0',\n violet: '#EE82EE',\n wheat: '#F5DEB3',\n white: '#FFFFFF',\n whitesmoke: '#F5F5F5',\n yellow: '#FFFF00',\n yellowgreen: '#9ACD32'\n };\n /**\n * @private\n * @param {Number} p\n * @param {Number} q\n * @param {Number} t\n * @return {Number}\n */\n\n function hue2rgb(p, q, t) {\n if (t < 0) {\n t += 1;\n }\n\n if (t > 1) {\n t -= 1;\n }\n\n if (t < 1 / 6) {\n return p + (q - p) * 6 * t;\n }\n\n if (t < 1 / 2) {\n return q;\n }\n\n if (t < 2 / 3) {\n return p + (q - p) * (2 / 3 - t) * 6;\n }\n\n return p;\n }\n /**\n * Returns new color object, when given a color in RGB format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255)\n * @return {fabric.Color}\n */\n\n\n fabric.Color.fromRgb = function (color) {\n return Color.fromSource(Color.sourceFromRgb(color));\n };\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format\n * @memberOf fabric.Color\n * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%)\n * @return {Array} source\n */\n\n\n fabric.Color.sourceFromRgb = function (color) {\n var match = color.match(Color.reRGBa);\n\n if (match) {\n var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1),\n g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1),\n b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1);\n return [parseInt(r, 10), parseInt(g, 10), parseInt(b, 10), match[4] ? parseFloat(match[4]) : 1];\n }\n };\n /**\n * Returns new color object, when given a color in RGBA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n\n\n fabric.Color.fromRgba = Color.fromRgb;\n /**\n * Returns new color object, when given a color in HSL format\n * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%)\n * @memberOf fabric.Color\n * @return {fabric.Color}\n */\n\n fabric.Color.fromHsl = function (color) {\n return Color.fromSource(Color.sourceFromHsl(color));\n };\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format.\n * Adapted from https://github.com/mjijackson\n * @memberOf fabric.Color\n * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1)\n * @return {Array} source\n * @see http://http://www.w3.org/TR/css3-color/#hsl-color\n */\n\n\n fabric.Color.sourceFromHsl = function (color) {\n var match = color.match(Color.reHSLa);\n\n if (!match) {\n return;\n }\n\n var h = (parseFloat(match[1]) % 360 + 360) % 360 / 360,\n s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1),\n l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1),\n r,\n g,\n b;\n\n if (s === 0) {\n r = g = b = l;\n } else {\n var q = l <= 0.5 ? l * (s + 1) : l + s - l * s,\n p = l * 2 - q;\n r = hue2rgb(p, q, h + 1 / 3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1 / 3);\n }\n\n return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255), match[4] ? parseFloat(match[4]) : 1];\n };\n /**\n * Returns new color object, when given a color in HSLA format\n * @static\n * @function\n * @memberOf fabric.Color\n * @param {String} color\n * @return {fabric.Color}\n */\n\n\n fabric.Color.fromHsla = Color.fromHsl;\n /**\n * Returns new color object, when given a color in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color Color value ex: FF5555\n * @return {fabric.Color}\n */\n\n fabric.Color.fromHex = function (color) {\n return Color.fromSource(Color.sourceFromHex(color));\n };\n /**\n * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format\n * @static\n * @memberOf fabric.Color\n * @param {String} color ex: FF5555 or FF5544CC (RGBa)\n * @return {Array} source\n */\n\n\n fabric.Color.sourceFromHex = function (color) {\n if (color.match(Color.reHex)) {\n var value = color.slice(color.indexOf('#') + 1),\n isShortNotation = value.length === 3 || value.length === 4,\n isRGBa = value.length === 8 || value.length === 4,\n r = isShortNotation ? value.charAt(0) + value.charAt(0) : value.substring(0, 2),\n g = isShortNotation ? value.charAt(1) + value.charAt(1) : value.substring(2, 4),\n b = isShortNotation ? value.charAt(2) + value.charAt(2) : value.substring(4, 6),\n a = isRGBa ? isShortNotation ? value.charAt(3) + value.charAt(3) : value.substring(6, 8) : 'FF';\n return [parseInt(r, 16), parseInt(g, 16), parseInt(b, 16), parseFloat((parseInt(a, 16) / 255).toFixed(2))];\n }\n };\n /**\n * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5])\n * @static\n * @memberOf fabric.Color\n * @param {Array} source\n * @return {fabric.Color}\n */\n\n\n fabric.Color.fromSource = function (source) {\n var oColor = new Color();\n oColor.setSource(source);\n return oColor;\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function (global) {\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = {}),\n scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'],\n skewMap = ['ns', 'nesw', 'ew', 'nwse'],\n controls = {},\n LEFT = 'left',\n TOP = 'top',\n RIGHT = 'right',\n BOTTOM = 'bottom',\n CENTER = 'center',\n opposite = {\n top: BOTTOM,\n bottom: TOP,\n left: RIGHT,\n right: LEFT,\n center: CENTER\n },\n radiansToDegrees = fabric.util.radiansToDegrees,\n sign = Math.sign || function (x) {\n return (x > 0) - (x < 0) || +x;\n };\n /**\n * Combine control position and object angle to find the control direction compared\n * to the object center.\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n * @param {fabric.Control} control the control class\n * @return {Number} 0 - 7 a quadrant number\n */\n\n\n function findCornerQuadrant(fabricObject, control) {\n var cornerAngle = fabricObject.angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360;\n return Math.round(cornerAngle % 360 / 45);\n }\n\n function fireEvent(eventName, options) {\n var target = options.transform.target,\n canvas = target.canvas,\n canvasOptions = fabric.util.object.clone(options);\n canvasOptions.target = target;\n canvas && canvas.fire('object:' + eventName, canvasOptions);\n target.fire(eventName, options);\n }\n /**\n * Inspect event and fabricObject properties to understand if the scaling action\n * @param {Event} eventData from the user action\n * @param {fabric.Object} fabricObject the fabric object about to scale\n * @return {Boolean} true if scale is proportional\n */\n\n\n function scaleIsProportional(eventData, fabricObject) {\n var canvas = fabricObject.canvas,\n uniScaleKey = canvas.uniScaleKey,\n uniformIsToggled = eventData[uniScaleKey];\n return canvas.uniformScaling && !uniformIsToggled || !canvas.uniformScaling && uniformIsToggled;\n }\n /**\n * Checks if transform is centered\n * @param {Object} transform transform data\n * @return {Boolean} true if transform is centered\n */\n\n\n function isTransformCentered(transform) {\n return transform.originX === CENTER && transform.originY === CENTER;\n }\n /**\n * Inspect fabricObject to understand if the current scaling action is allowed\n * @param {fabric.Object} fabricObject the fabric object about to scale\n * @param {String} by 'x' or 'y' or ''\n * @param {Boolean} scaleProportionally true if we are trying to scale proportionally\n * @return {Boolean} true if scaling is not allowed at current conditions\n */\n\n\n function scalingIsForbidden(fabricObject, by, scaleProportionally) {\n var lockX = fabricObject.lockScalingX,\n lockY = fabricObject.lockScalingY;\n\n if (lockX && lockY) {\n return true;\n }\n\n if (!by && (lockX || lockY) && scaleProportionally) {\n return true;\n }\n\n if (lockX && by === 'x') {\n return true;\n }\n\n if (lockY && by === 'y') {\n return true;\n }\n\n return false;\n }\n /**\n * return the correct cursor style for the scale action\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n\n\n function scaleCursorStyleHandler(eventData, control, fabricObject) {\n var notAllowed = 'not-allowed',\n scaleProportionally = scaleIsProportional(eventData, fabricObject),\n by = '';\n\n if (control.x !== 0 && control.y === 0) {\n by = 'x';\n } else if (control.x === 0 && control.y !== 0) {\n by = 'y';\n }\n\n if (scalingIsForbidden(fabricObject, by, scaleProportionally)) {\n return notAllowed;\n }\n\n var n = findCornerQuadrant(fabricObject, control);\n return scaleMap[n] + '-resize';\n }\n /**\n * return the correct cursor style for the skew action\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n\n\n function skewCursorStyleHandler(eventData, control, fabricObject) {\n var notAllowed = 'not-allowed';\n\n if (control.x !== 0 && fabricObject.lockSkewingY) {\n return notAllowed;\n }\n\n if (control.y !== 0 && fabricObject.lockSkewingX) {\n return notAllowed;\n }\n\n var n = findCornerQuadrant(fabricObject, control) % 4;\n return skewMap[n] + '-resize';\n }\n /**\n * Combine skew and scale style handlers to cover fabric standard use case\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n\n\n function scaleSkewCursorStyleHandler(eventData, control, fabricObject) {\n if (eventData[fabricObject.canvas.altActionKey]) {\n return controls.skewCursorStyleHandler(eventData, control, fabricObject);\n }\n\n return controls.scaleCursorStyleHandler(eventData, control, fabricObject);\n }\n /**\n * Inspect event, control and fabricObject to return the correct action name\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} an action name\n */\n\n\n function scaleOrSkewActionName(eventData, control, fabricObject) {\n var isAlternative = eventData[fabricObject.canvas.altActionKey];\n\n if (control.x === 0) {\n // then is scaleY or skewX\n return isAlternative ? 'skewX' : 'scaleY';\n }\n\n if (control.y === 0) {\n // then is scaleY or skewX\n return isAlternative ? 'skewY' : 'scaleX';\n }\n }\n /**\n * Find the correct style for the control that is used for rotation.\n * this function is very simple and it just take care of not-allowed or standard cursor\n * @param {Event} eventData the javascript event that is causing the scale\n * @param {fabric.Control} control the control that is interested in the action\n * @param {fabric.Object} fabricObject the fabric object that is interested in the action\n * @return {String} a valid css string for the cursor\n */\n\n\n function rotationStyleHandler(eventData, control, fabricObject) {\n if (fabricObject.lockRotation) {\n return 'not-allowed';\n }\n\n return control.cursorStyle;\n }\n\n function commonEventInfo(eventData, transform, x, y) {\n return {\n e: eventData,\n transform: transform,\n pointer: {\n x: x,\n y: y\n }\n };\n }\n /**\n * Wrap an action handler with saving/restoring object position on the transform.\n * this is the code that permits to objects to keep their position while transforming.\n * @param {Function} actionHandler the function to wrap\n * @return {Function} a function with an action handler signature\n */\n\n\n function wrapWithFixedAnchor(actionHandler) {\n return function (eventData, transform, x, y) {\n var target = transform.target,\n centerPoint = target.getCenterPoint(),\n constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY),\n actionPerformed = actionHandler(eventData, transform, x, y);\n target.setPositionByOrigin(constraint, transform.originX, transform.originY);\n return actionPerformed;\n };\n }\n /**\n * Wrap an action handler with firing an event if the action is performed\n * @param {Function} actionHandler the function to wrap\n * @return {Function} a function with an action handler signature\n */\n\n\n function wrapWithFireEvent(eventName, actionHandler) {\n return function (eventData, transform, x, y) {\n var actionPerformed = actionHandler(eventData, transform, x, y);\n\n if (actionPerformed) {\n fireEvent(eventName, commonEventInfo(eventData, transform, x, y));\n }\n\n return actionPerformed;\n };\n }\n /**\n * Transforms a point described by x and y in a distance from the top left corner of the object\n * bounding box.\n * @param {Object} transform\n * @param {String} originX\n * @param {String} originY\n * @param {number} x\n * @param {number} y\n * @return {Fabric.Point} the normalized point\n */\n\n\n function getLocalPoint(transform, originX, originY, x, y) {\n var target = transform.target,\n control = target.controls[transform.corner],\n zoom = target.canvas.getZoom(),\n padding = target.padding / zoom,\n localPoint = target.toLocalPoint(new fabric.Point(x, y), originX, originY);\n\n if (localPoint.x >= padding) {\n localPoint.x -= padding;\n }\n\n if (localPoint.x <= -padding) {\n localPoint.x += padding;\n }\n\n if (localPoint.y >= padding) {\n localPoint.y -= padding;\n }\n\n if (localPoint.y <= padding) {\n localPoint.y += padding;\n }\n\n localPoint.x -= control.offsetX;\n localPoint.y -= control.offsetY;\n return localPoint;\n }\n /**\n * Detect if the fabric object is flipped on one side.\n * @param {fabric.Object} target\n * @return {Boolean} true if one flip, but not two.\n */\n\n\n function targetHasOneFlip(target) {\n return target.flipX !== target.flipY;\n }\n /**\n * Utility function to compensate the scale factor when skew is applied on both axes\n * @private\n */\n\n\n function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) {\n if (target[oppositeSkew] !== 0) {\n var newDim = target._getTransformedDimensions()[axis];\n\n var newValue = reference / newDim * target[scaleToCompensate];\n target.set(scaleToCompensate, newValue);\n }\n }\n /**\n * Action handler for skewing on the X axis\n * @private\n */\n\n\n function skewObjectX(eventData, transform, x, y) {\n var target = transform.target,\n // find how big the object would be, if there was no skewX. takes in account scaling\n dimNoSkew = target._getTransformedDimensions(0, target.skewY),\n localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n // the mouse is in the center of the object, and we want it to stay there.\n // so the object will grow twice as much as the mouse.\n // this makes the skew growth to localPoint * 2 - dimNoSkew.\n totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x,\n currentSkew = target.skewX,\n newSkew;\n\n if (totalSkewSize < 2) {\n // let's make it easy to go back to position 0.\n newSkew = 0;\n } else {\n newSkew = radiansToDegrees(Math.atan2(totalSkewSize / target.scaleX, dimNoSkew.y / target.scaleY)); // now we have to find the sign of the skew.\n // it mostly depend on the origin of transformation.\n\n if (transform.originX === LEFT && transform.originY === BOTTOM) {\n newSkew = -newSkew;\n }\n\n if (transform.originX === RIGHT && transform.originY === TOP) {\n newSkew = -newSkew;\n }\n\n if (targetHasOneFlip(target)) {\n newSkew = -newSkew;\n }\n }\n\n var hasSkewed = currentSkew !== newSkew;\n\n if (hasSkewed) {\n var dimBeforeSkewing = target._getTransformedDimensions().y;\n\n target.set('skewX', newSkew);\n compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing);\n }\n\n return hasSkewed;\n }\n /**\n * Action handler for skewing on the Y axis\n * @private\n */\n\n\n function skewObjectY(eventData, transform, x, y) {\n var target = transform.target,\n // find how big the object would be, if there was no skewX. takes in account scaling\n dimNoSkew = target._getTransformedDimensions(target.skewX, 0),\n localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n // the mouse is in the center of the object, and we want it to stay there.\n // so the object will grow twice as much as the mouse.\n // this makes the skew growth to localPoint * 2 - dimNoSkew.\n totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y,\n currentSkew = target.skewY,\n newSkew;\n\n if (totalSkewSize < 2) {\n // let's make it easy to go back to position 0.\n newSkew = 0;\n } else {\n newSkew = radiansToDegrees(Math.atan2(totalSkewSize / target.scaleY, dimNoSkew.x / target.scaleX)); // now we have to find the sign of the skew.\n // it mostly depend on the origin of transformation.\n\n if (transform.originX === LEFT && transform.originY === BOTTOM) {\n newSkew = -newSkew;\n }\n\n if (transform.originX === RIGHT && transform.originY === TOP) {\n newSkew = -newSkew;\n }\n\n if (targetHasOneFlip(target)) {\n newSkew = -newSkew;\n }\n }\n\n var hasSkewed = currentSkew !== newSkew;\n\n if (hasSkewed) {\n var dimBeforeSkewing = target._getTransformedDimensions().x;\n\n target.set('skewY', newSkew);\n compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing);\n }\n\n return hasSkewed;\n }\n /**\n * Wrapped Action handler for skewing on the Y axis, takes care of the\n * skew direction and determine the correct transform origin for the anchor point\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function skewHandlerX(eventData, transform, x, y) {\n // step1 figure out and change transform origin.\n // if skewX > 0 and originY bottom we anchor on right\n // if skewX > 0 and originY top we anchor on left\n // if skewX < 0 and originY bottom we anchor on left\n // if skewX < 0 and originY top we anchor on right\n // if skewX is 0, we look for mouse position to understand where are we going.\n var target = transform.target,\n currentSkew = target.skewX,\n originX,\n originY = transform.originY;\n\n if (target.lockSkewingX) {\n return false;\n }\n\n if (currentSkew === 0) {\n var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y);\n\n if (localPointFromCenter.x > 0) {\n // we are pulling right, anchor left;\n originX = LEFT;\n } else {\n // we are pulling right, anchor right\n originX = RIGHT;\n }\n } else {\n if (currentSkew > 0) {\n originX = originY === TOP ? LEFT : RIGHT;\n }\n\n if (currentSkew < 0) {\n originX = originY === TOP ? RIGHT : LEFT;\n } // is the object flipped on one side only? swap the origin.\n\n\n if (targetHasOneFlip(target)) {\n originX = originX === LEFT ? RIGHT : LEFT;\n }\n } // once we have the origin, we find the anchor point\n\n\n transform.originX = originX;\n var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX));\n return finalHandler(eventData, transform, x, y);\n }\n /**\n * Wrapped Action handler for skewing on the Y axis, takes care of the\n * skew direction and determine the correct transform origin for the anchor point\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function skewHandlerY(eventData, transform, x, y) {\n // step1 figure out and change transform origin.\n // if skewY > 0 and originX left we anchor on top\n // if skewY > 0 and originX right we anchor on bottom\n // if skewY < 0 and originX left we anchor on bottom\n // if skewY < 0 and originX right we anchor on top\n // if skewY is 0, we look for mouse position to understand where are we going.\n var target = transform.target,\n currentSkew = target.skewY,\n originY,\n originX = transform.originX;\n\n if (target.lockSkewingY) {\n return false;\n }\n\n if (currentSkew === 0) {\n var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y);\n\n if (localPointFromCenter.y > 0) {\n // we are pulling down, anchor up;\n originY = TOP;\n } else {\n // we are pulling up, anchor down\n originY = BOTTOM;\n }\n } else {\n if (currentSkew > 0) {\n originY = originX === LEFT ? TOP : BOTTOM;\n }\n\n if (currentSkew < 0) {\n originY = originX === LEFT ? BOTTOM : TOP;\n } // is the object flipped on one side only? swap the origin.\n\n\n if (targetHasOneFlip(target)) {\n originY = originY === TOP ? BOTTOM : TOP;\n }\n } // once we have the origin, we find the anchor point\n\n\n transform.originY = originY;\n var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY));\n return finalHandler(eventData, transform, x, y);\n }\n /**\n * Action handler for rotation and snapping, without anchor point.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n * @private\n */\n\n\n function rotationWithSnapping(eventData, transform, x, y) {\n var t = transform,\n target = t.target,\n pivotPoint = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY);\n\n if (target.lockRotation) {\n return false;\n }\n\n var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x),\n curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x),\n angle = radiansToDegrees(curAngle - lastAngle + t.theta),\n hasRotated = true;\n\n if (target.snapAngle > 0) {\n var snapAngle = target.snapAngle,\n snapThreshold = target.snapThreshold || snapAngle,\n rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle,\n leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle;\n\n if (Math.abs(angle - leftAngleLocked) < snapThreshold) {\n angle = leftAngleLocked;\n } else if (Math.abs(angle - rightAngleLocked) < snapThreshold) {\n angle = rightAngleLocked;\n }\n } // normalize angle to positive value\n\n\n if (angle < 0) {\n angle = 360 + angle;\n }\n\n angle %= 360;\n hasRotated = target.angle !== angle;\n target.angle = angle;\n return hasRotated;\n }\n /**\n * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @param {Object} options additional information for scaling\n * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling\n * @return {Boolean} true if some change happened\n * @private\n */\n\n\n function scaleObject(eventData, transform, x, y, options) {\n options = options || {};\n var target = transform.target,\n lockScalingX = target.lockScalingX,\n lockScalingY = target.lockScalingY,\n by = options.by,\n newPoint,\n scaleX,\n scaleY,\n dim,\n scaleProportionally = scaleIsProportional(eventData, target),\n forbidScaling = scalingIsForbidden(target, by, scaleProportionally),\n signX,\n signY,\n gestureScale = transform.gestureScale;\n\n if (forbidScaling) {\n return false;\n }\n\n if (gestureScale) {\n scaleX = transform.scaleX * gestureScale;\n scaleY = transform.scaleY * gestureScale;\n } else {\n newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); // use of sign: We use sign to detect change of direction of an action. sign usually change when\n // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling\n // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily\n // cross many time the origin point and flip the object. so we need a way to filter out the noise.\n // This ternary here should be ok to filter out X scaling when we want Y only and vice versa.\n\n signX = by !== 'y' ? sign(newPoint.x) : 1;\n signY = by !== 'x' ? sign(newPoint.y) : 1;\n\n if (!transform.signX) {\n transform.signX = signX;\n }\n\n if (!transform.signY) {\n transform.signY = signY;\n }\n\n if (target.lockScalingFlip && (transform.signX !== signX || transform.signY !== signY)) {\n return false;\n }\n\n dim = target._getTransformedDimensions(); // missing detection of flip and logic to switch the origin\n\n if (scaleProportionally && !by) {\n // uniform scaling\n var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y),\n original = transform.original,\n originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + Math.abs(dim.y * original.scaleY / target.scaleY),\n scale = distance / originalDistance;\n scaleX = original.scaleX * scale;\n scaleY = original.scaleY * scale;\n } else {\n scaleX = Math.abs(newPoint.x * target.scaleX / dim.x);\n scaleY = Math.abs(newPoint.y * target.scaleY / dim.y);\n } // if we are scaling by center, we need to double the scale\n\n\n if (isTransformCentered(transform)) {\n scaleX *= 2;\n scaleY *= 2;\n }\n\n if (transform.signX !== signX && by !== 'y') {\n transform.originX = opposite[transform.originX];\n scaleX *= -1;\n transform.signX = signX;\n }\n\n if (transform.signY !== signY && by !== 'x') {\n transform.originY = opposite[transform.originY];\n scaleY *= -1;\n transform.signY = signY;\n }\n } // minScale is taken are in the setter.\n\n\n var oldScaleX = target.scaleX,\n oldScaleY = target.scaleY;\n\n if (!by) {\n !lockScalingX && target.set('scaleX', scaleX);\n !lockScalingY && target.set('scaleY', scaleY);\n } else {\n // forbidden cases already handled on top here.\n by === 'x' && target.set('scaleX', scaleX);\n by === 'y' && target.set('scaleY', scaleY);\n }\n\n return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY;\n }\n /**\n * Generic scaling logic, to scale from corners either equally or freely.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function scaleObjectFromCorner(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y);\n }\n /**\n * Scaling logic for the X axis.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function scaleObjectX(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y, {\n by: 'x'\n });\n }\n /**\n * Scaling logic for the Y axis.\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function scaleObjectY(eventData, transform, x, y) {\n return scaleObject(eventData, transform, x, y, {\n by: 'y'\n });\n }\n /**\n * Composed action handler to either scale Y or skew X\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function scalingYOrSkewingX(eventData, transform, x, y) {\n // ok some safety needed here.\n if (eventData[transform.target.canvas.altActionKey]) {\n return controls.skewHandlerX(eventData, transform, x, y);\n }\n\n return controls.scalingY(eventData, transform, x, y);\n }\n /**\n * Composed action handler to either scale X or skew Y\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function scalingXOrSkewingY(eventData, transform, x, y) {\n // ok some safety needed here.\n if (eventData[transform.target.canvas.altActionKey]) {\n return controls.skewHandlerY(eventData, transform, x, y);\n }\n\n return controls.scalingX(eventData, transform, x, y);\n }\n /**\n * Action handler to change textbox width\n * Needs to be wrapped with `wrapWithFixedAnchor` to be effective\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if some change happened\n */\n\n\n function changeWidth(eventData, transform, x, y) {\n var target = transform.target,\n localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y),\n strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1),\n multiplier = isTransformCentered(transform) ? 2 : 1,\n oldWidth = target.width,\n newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding;\n target.set('width', Math.max(newWidth, 0));\n return oldWidth !== newWidth;\n }\n /**\n * Action handler\n * @private\n * @param {Event} eventData javascript event that is doing the transform\n * @param {Object} transform javascript object containing a series of information around the current transform\n * @param {number} x current mouse x position, canvas normalized\n * @param {number} y current mouse y position, canvas normalized\n * @return {Boolean} true if the translation occurred\n */\n\n\n function dragHandler(eventData, transform, x, y) {\n var target = transform.target,\n newLeft = x - transform.offsetX,\n newTop = y - transform.offsetY,\n moveX = !target.get('lockMovementX') && target.left !== newLeft,\n moveY = !target.get('lockMovementY') && target.top !== newTop;\n moveX && target.set('left', newLeft);\n moveY && target.set('top', newTop);\n\n if (moveX || moveY) {\n fireEvent('moving', commonEventInfo(eventData, transform, x, y));\n }\n\n return moveX || moveY;\n }\n\n controls.scaleCursorStyleHandler = scaleCursorStyleHandler;\n controls.skewCursorStyleHandler = skewCursorStyleHandler;\n controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler;\n controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping));\n controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectFromCorner));\n controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX));\n controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY));\n controls.scalingYOrSkewingX = scalingYOrSkewingX;\n controls.scalingXOrSkewingY = scalingXOrSkewingY;\n controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth));\n controls.skewHandlerX = skewHandlerX;\n controls.skewHandlerY = skewHandlerY;\n controls.dragHandler = dragHandler;\n controls.scaleOrSkewActionName = scaleOrSkewActionName;\n controls.rotationStyleHandler = rotationStyleHandler;\n controls.fireEvent = fireEvent;\n controls.wrapWithFixedAnchor = wrapWithFixedAnchor;\n controls.wrapWithFireEvent = wrapWithFireEvent;\n controls.getLocalPoint = getLocalPoint;\n fabric.controlsUtils = controls;\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function (global) {\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = {}),\n degreesToRadians = fabric.util.degreesToRadians,\n controls = fabric.controlsUtils;\n /**\n * Render a round control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for fabric.Object controls style\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n */\n\n function renderCircleControl(ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? styleOverride.transparentCorners : fabricObject.transparentCorners,\n methodName = transparentCorners ? 'stroke' : 'fill',\n stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\n myLeft = left,\n myTop = top,\n size;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;\n ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; // as soon as fabric react v5, remove ie11, use proper ellipse code.\n\n if (xSize > ySize) {\n size = xSize;\n ctx.scale(1.0, ySize / xSize);\n myTop = top * xSize / ySize;\n } else if (ySize > xSize) {\n size = ySize;\n ctx.scale(xSize / ySize, 1.0);\n myLeft = left * ySize / xSize;\n } else {\n size = xSize;\n } // this is still wrong\n\n\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false);\n ctx[methodName]();\n\n if (stroke) {\n ctx.stroke();\n }\n\n ctx.restore();\n }\n /**\n * Render a square control, as per fabric features.\n * This function is written to respect object properties like transparentCorners, cornerSize\n * cornerColor, cornerStrokeColor\n * plus the addition of offsetY and offsetX.\n * @param {CanvasRenderingContext2D} ctx context to render on\n * @param {Number} left x coordinate where the control center should be\n * @param {Number} top y coordinate where the control center should be\n * @param {Object} styleOverride override for fabric.Object controls style\n * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls\n */\n\n\n function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize,\n ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize,\n transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? styleOverride.transparentCorners : fabricObject.transparentCorners,\n methodName = transparentCorners ? 'stroke' : 'fill',\n stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor),\n xSizeBy2 = xSize / 2,\n ySizeBy2 = ySize / 2;\n ctx.save();\n ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;\n ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; // this is still wrong\n\n ctx.lineWidth = 1;\n ctx.translate(left, top);\n ctx.rotate(degreesToRadians(fabricObject.angle)); // this does not work, and fixed with ( && ) does not make sense.\n // to have real transparent corners we need the controls on upperCanvas\n // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n\n ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize);\n\n if (stroke) {\n ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize);\n }\n\n ctx.restore();\n }\n\n controls.renderCircleControl = renderCircleControl;\n controls.renderSquareControl = renderSquareControl;\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function (global) {\n 'use strict';\n\n var fabric = global.fabric || (global.fabric = {});\n\n function Control(options) {\n for (var i in options) {\n this[i] = options[i];\n }\n }\n\n fabric.Control = Control;\n fabric.Control.prototype =\n /** @lends fabric.Control.prototype */\n {\n /**\n * keep track of control visibility.\n * mainly for backward compatibility.\n * if you do not want to see a control, you can remove it\n * from the controlset.\n * @type {Boolean}\n * @default true\n */\n visible: true,\n\n /**\n * Name of the action that the control will likely execute.\n * This is optional. FabricJS uses to identify what the user is doing for some\n * extra optimizations. If you are writing a custom control and you want to know\n * somewhere else in the code what is going on, you can use this string here.\n * you can also provide a custom getActionName if your control run multiple actions\n * depending on some external state.\n * default to scale since is the most common, used on 4 corners by default\n * @type {String}\n * @default 'scale'\n */\n actionName: 'scale',\n\n /**\n * Drawing angle of the control.\n * NOT used for now, but name marked as needed for internal logic\n * example: to reuse the same drawing function for different rotated controls\n * @type {Number}\n * @default 0\n */\n angle: 0,\n\n /**\n * Relative position of the control. X\n * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n x: 0,\n\n /**\n * Relative position of the control. Y\n * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n y: 0,\n\n /**\n * Horizontal offset of the control from the defined position. In pixels\n * Positive offset moves the control to the right, negative to the left.\n * It used when you want to have position of control that does not scale with\n * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on\n * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will\n * stay 30 pixels no matter how the object is big. Another example is having 2\n * controls in the corner, that stay in the same position when the object scale.\n * of the bounding box.\n * @type {Number}\n * @default 0\n */\n offsetX: 0,\n\n /**\n * Vertical offset of the control from the defined position. In pixels\n * Positive offset moves the control to the bottom, negative to the top.\n * @type {Number}\n * @default 0\n */\n offsetY: 0,\n\n /**\n * Sets the length of the control. If null, defaults to object's cornerSize.\n * Expects both sizeX and sizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n sizeX: null,\n\n /**\n * Sets the height of the control. If null, defaults to object's cornerSize.\n * Expects both sizeX and sizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n sizeY: null,\n\n /**\n * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize.\n * Expects both touchSizeX and touchSizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n touchSizeX: null,\n\n /**\n * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize.\n * Expects both touchSizeX and touchSizeY to be set when set.\n * @type {?Number}\n * @default null\n */\n touchSizeY: null,\n\n /**\n * Css cursor style to display when the control is hovered.\n * if the method `cursorStyleHandler` is provided, this property is ignored.\n * @type {String}\n * @default 'crosshair'\n */\n cursorStyle: 'crosshair',\n\n /**\n * If controls has an offsetY or offsetX, draw a line that connects\n * the control to the bounding box\n * @type {Boolean}\n * @default false\n */\n withConnection: false,\n\n /**\n * The control actionHandler, provide one to handle action ( control being moved )\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n actionHandler: function actionHandler() {},\n\n /**\n * The control handler for mouse down, provide one to handle mouse down on control\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n mouseDownHandler: function mouseDownHandler() {},\n\n /**\n * The control mouseUpHandler, provide one to handle an effect on mouse up.\n * @param {Event} eventData the native mouse event\n * @param {Object} transformData properties of the current transform\n * @param {Number} x x position of the cursor\n * @param {Number} y y position of the cursor\n * @return {Boolean} true if the action/event modified the object\n */\n mouseUpHandler: function mouseUpHandler() {},\n\n /**\n * Returns control actionHandler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getActionHandler: function getActionHandler() {\n return this.actionHandler;\n },\n\n /**\n * Returns control mouseDown handler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getMouseDownHandler: function getMouseDownHandler() {\n return this.mouseDownHandler;\n },\n\n /**\n * Returns control mouseUp handler\n * @param {Event} eventData the native mouse event\n * @param {fabric.Object} fabricObject on which the control is displayed\n * @param {fabric.Control} control control for which the action handler is being asked\n * @return {Function} the action handler\n */\n getMouseUpHandler: function getMouseUpHandler() {\n return this.mouseUpHandler;\n },\n\n /**\n * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate\n * function you can pass one in the constructor\n * the cursorStyle property\n * @param {Event} eventData the native mouse event\n * @param {fabric.Control} control the current control ( likely this)\n * @param {fabric.Object} object on which the control is displayed\n * @return {String}\n */\n cursorStyleHandler: function cursorStyleHandler(eventData, control\n /* fabricObject */\n ) {\n return control.cursorStyle;\n },\n\n /**\n * Returns the action name. The basic implementation just return the actionName property.\n * @param {Event} eventData the native mouse event\n * @param {fabric.Control} control the current control ( likely this)\n * @param {fabric.Object} object on which the control is displayed\n * @return {String}\n */\n getActionName: function getActionName(eventData, control\n /* fabricObject */\n ) {\n return control.actionName;\n },\n\n /**\n * Returns controls visibility\n * @param {fabric.Object} object on which the control is displayed\n * @param {String} controlKey key where the control is memorized on the\n * @return {Boolean}\n */\n getVisibility: function getVisibility(fabricObject, controlKey) {\n var objectVisibility = fabricObject._controlsVisibility;\n\n if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') {\n return objectVisibility[controlKey];\n }\n\n return this.visible;\n },\n\n /**\n * Sets controls visibility\n * @param {Boolean} visibility for the object\n * @return {Void}\n */\n setVisibility: function setVisibility(visibility\n /* name, fabricObject */\n ) {\n this.visible = visibility;\n },\n positionHandler: function positionHandler(dim, finalMatrix\n /*, fabricObject, currentControl */\n ) {\n var point = fabric.util.transformPoint({\n x: this.x * dim.x + this.offsetX,\n y: this.y * dim.y + this.offsetY\n }, finalMatrix);\n return point;\n },\n\n /**\n * Returns the coords for this control based on object values.\n * @param {Number} objectAngle angle from the fabric object holding the control\n * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if\n * isTouch is true)\n * @param {Number} centerX x coordinate where the control center should be\n * @param {Number} centerY y coordinate where the control center should be\n * @param {boolean} isTouch true if touch corner, false if normal corner\n */\n calcCornerCoords: function calcCornerCoords(objectAngle, objectCornerSize, centerX, centerY, isTouch) {\n var cosHalfOffset,\n sinHalfOffset,\n cosHalfOffsetComp,\n sinHalfOffsetComp,\n xSize = isTouch ? this.touchSizeX : this.sizeX,\n ySize = isTouch ? this.touchSizeY : this.sizeY;\n\n if (xSize && ySize && xSize !== ySize) {\n // handle rectangular corners\n var controlTriangleAngle = Math.atan2(ySize, xSize);\n var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2;\n var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle);\n var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle);\n cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta);\n sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); // use complementary angle for two corners\n\n cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp);\n sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp);\n } else {\n // handle square corners\n // use default object corner size unless size is defined\n var cornerSize = xSize && ySize ? xSize : objectCornerSize;\n /* 0.7071067812 stands for sqrt(2)/2 */\n\n cornerHypotenuse = cornerSize * 0.7071067812; // complementary angles are equal since they're both 45 degrees\n\n var newTheta = fabric.util.degreesToRadians(45 - objectAngle);\n cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta);\n sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta);\n }\n\n return {\n tl: {\n x: centerX - sinHalfOffsetComp,\n y: centerY - cosHalfOffsetComp\n },\n tr: {\n x: centerX + cosHalfOffset,\n y: centerY - sinHalfOffset\n },\n bl: {\n x: centerX - cosHalfOffset,\n y: centerY + sinHalfOffset\n },\n br: {\n x: centerX + sinHalfOffsetComp,\n y: centerY + cosHalfOffsetComp\n }\n };\n },\n\n /**\n * Render function for the control.\n * When this function runs the context is unscaled. unrotate. Just retina scaled.\n * all the functions will have to translate to the point left,top before starting Drawing\n * if they want to draw a control where the position is detected.\n * left and top are the result of the positionHandler function\n * @param {RenderingContext2D} ctx the context where the control will be drawn\n * @param {Number} left position of the canvas where we are about to render the control.\n * @param {Number} top position of the canvas where we are about to render the control.\n * @param {Object} styleOverride\n * @param {fabric.Object} fabricObject the object where the control is about to be rendered\n */\n render: function render(ctx, left, top, styleOverride, fabricObject) {\n styleOverride = styleOverride || {};\n\n switch (styleOverride.cornerStyle || fabricObject.cornerStyle) {\n case 'circle':\n fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject);\n break;\n\n default:\n fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject);\n }\n }\n };\n})(typeof exports !== 'undefined' ? exports : this);\n\n(function () {\n /* _FROM_SVG_START_ */\n function getColorStop(el, multiplier) {\n var style = el.getAttribute('style'),\n offset = el.getAttribute('offset') || 0,\n color,\n colorAlpha,\n opacity,\n i; // convert percents to absolute values\n\n offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1);\n offset = offset < 0 ? 0 : offset > 1 ? 1 : offset;\n\n if (style) {\n var keyValuePairs = style.split(/\\s*;\\s*/);\n\n if (keyValuePairs[keyValuePairs.length - 1] === '') {\n keyValuePairs.pop();\n }\n\n for (i = keyValuePairs.length; i--;) {\n var split = keyValuePairs[i].split(/\\s*:\\s*/),\n key = split[0].trim(),\n value = split[1].trim();\n\n if (key === 'stop-color') {\n color = value;\n } else if (key === 'stop-opacity') {\n opacity = value;\n }\n }\n }\n\n if (!color) {\n color = el.getAttribute('stop-color') || 'rgb(0,0,0)';\n }\n\n if (!opacity) {\n opacity = el.getAttribute('stop-opacity');\n }\n\n color = new fabric.Color(color);\n colorAlpha = color.getAlpha();\n opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity);\n opacity *= colorAlpha * multiplier;\n return {\n offset: offset,\n color: color.toRgb(),\n opacity: opacity\n };\n }\n\n function getLinearCoords(el) {\n return {\n x1: el.getAttribute('x1') || 0,\n y1: el.getAttribute('y1') || 0,\n x2: el.getAttribute('x2') || '100%',\n y2: el.getAttribute('y2') || 0\n };\n }\n\n function getRadialCoords(el) {\n return {\n x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%',\n y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%',\n r1: 0,\n x2: el.getAttribute('cx') || '50%',\n y2: el.getAttribute('cy') || '50%',\n r2: el.getAttribute('r') || '50%'\n };\n }\n /* _FROM_SVG_END_ */\n\n\n var clone = fabric.util.object.clone;\n /**\n * Gradient class\n * @class fabric.Gradient\n * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients}\n * @see {@link fabric.Gradient#initialize} for constructor definition\n */\n\n fabric.Gradient = fabric.util.createClass(\n /** @lends fabric.Gradient.prototype */\n {\n /**\n * Horizontal offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetX: 0,\n\n /**\n * Vertical offset for aligning gradients coming from SVG when outside pathgroups\n * @type Number\n * @default 0\n */\n offsetY: 0,\n\n /**\n * A transform matrix to apply to the gradient before painting.\n * Imported from svg gradients, is not applied with the current transform in the center.\n * Before this transform is applied, the origin point is at the top left corner of the object\n * plus the addition of offsetY and offsetX.\n * @type Number[]\n * @default null\n */\n gradientTransform: null,\n\n /**\n * coordinates units for coords.\n * If `pixels`, the number of coords are in the same unit of width / height.\n * If set as `percentage` the coords are still a number, but 1 means 100% of width\n * for the X and 100% of the height for the y. It can be bigger than 1 and negative.\n * allowed values pixels or percentage.\n * @type String\n * @default 'pixels'\n */\n gradientUnits: 'pixels',\n\n /**\n * Gradient type linear or radial\n * @type String\n * @default 'pixels'\n */\n type: 'linear',\n\n /**\n * Constructor\n * @param {Object} options Options object with type, coords, gradientUnits and colorStops\n * @param {Object} [options.type] gradient type linear or radial\n * @param {Object} [options.gradientUnits] gradient units\n * @param {Object} [options.offsetX] SVG import compatibility\n * @param {Object} [options.offsetY] SVG import compatibility\n * @param {Object[]} options.colorStops contains the colorstops.\n * @param {Object} options.coords contains the coords of the gradient\n * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial\n * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial\n * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial\n * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial\n * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle\n * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle\n * @return {fabric.Gradient} thisArg\n */\n initialize: function initialize(options) {\n options || (options = {});\n options.coords || (options.coords = {});\n\n var coords,\n _this = this; // sets everything, then coords and colorstops get sets again\n\n\n Object.keys(options).forEach(function (option) {\n _this[option] = options[option];\n });\n\n if (this.id) {\n this.id += '_' + fabric.Object.__uid++;\n } else {\n this.id = fabric.Object.__uid++;\n }\n\n coords = {\n x1: options.coords.x1 || 0,\n y1: options.coords.y1 || 0,\n x2: options.coords.x2 || 0,\n y2: options.coords.y2 || 0\n };\n\n if (this.type === 'radial') {\n coords.r1 = options.coords.r1 || 0;\n coords.r2 = options.coords.r2 || 0;\n }\n\n this.coords = coords;\n this.colorStops = options.colorStops.slice();\n },\n\n /**\n * Adds another colorStop\n * @param {Object} colorStop Object with offset and color\n * @return {fabric.Gradient} thisArg\n */\n addColorStop: function addColorStop(colorStops) {\n for (var position in colorStops) {\n var color = new fabric.Color(colorStops[position]);\n this.colorStops.push({\n offset: parseFloat(position),\n color: color.toRgb(),\n opacity: color.getAlpha()\n });\n }\n\n return this;\n },\n\n /**\n * Returns object representation of a gradient\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object}\n */\n toObject: function toObject(propertiesToInclude) {\n var object = {\n type: this.type,\n coords: this.coords,\n colorStops: this.colorStops,\n offsetX: this.offsetX,\n offsetY: this.offsetY,\n gradientUnits: this.gradientUnits,\n gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform\n };\n fabric.util.populateWithProperties(this, object, propertiesToInclude);\n return object;\n },\n\n /* _TO_SVG_START_ */\n\n /**\n * Returns SVG representation of an gradient\n * @param {Object} object Object to create a gradient for\n * @return {String} SVG representation of an gradient (linear/radial)\n */\n toSVG: function toSVG(object, options) {\n var coords = clone(this.coords, true),\n i,\n len,\n options = options || {},\n markup,\n commonAttributes,\n colorStops = clone(this.colorStops, true),\n needsSwap = coords.r1 > coords.r2,\n transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(),\n offsetX = -this.offsetX,\n offsetY = -this.offsetY,\n withViewport = !!options.additionalTransform,\n gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; // colorStops must be sorted ascending\n\n colorStops.sort(function (a, b) {\n return a.offset - b.offset;\n });\n\n if (gradientUnits === 'objectBoundingBox') {\n offsetX /= object.width;\n offsetY /= object.height;\n } else {\n offsetX += object.width / 2;\n offsetY += object.height / 2;\n }\n\n if (object.type === 'path' && this.gradientUnits !== 'percentage') {\n offsetX -= object.pathOffset.x;\n offsetY -= object.pathOffset.y;\n }\n\n transform[4] -= offsetX;\n transform[5] -= offsetY;\n commonAttributes = 'id=\"SVGID_' + this.id + '\" gradientUnits=\"' + gradientUnits + '\"';\n commonAttributes += ' gradientTransform=\"' + (withViewport ? options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '\" ';\n\n if (this.type === 'linear') {\n markup = ['\\n'];\n } else if (this.type === 'radial') {\n // svg radial gradient has just 1 radius. the biggest.\n markup = ['\\n'];\n }\n\n if (this.type === 'radial') {\n if (needsSwap) {\n // svg goes from internal to external radius. if radius are inverted, swap color stops.\n colorStops = colorStops.concat();\n colorStops.reverse();\n\n for (i = 0, len = colorStops.length; i < len; i++) {\n colorStops[i].offset = 1 - colorStops[i].offset;\n }\n }\n\n var minRadius = Math.min(coords.r1, coords.r2);\n\n if (minRadius > 0) {\n // i have to shift all colorStops and add new one in 0.\n var maxRadius = Math.max(coords.r1, coords.r2),\n percentageShift = minRadius / maxRadius;\n\n for (i = 0, len = colorStops.length; i < len; i++) {\n colorStops[i].offset += percentageShift * (1 - colorStops[i].offset);\n }\n }\n }\n\n for (i = 0, len = colorStops.length; i < len; i++) {\n var colorStop = colorStops[i];\n markup.push('\\n');\n }\n\n markup.push(this.type === 'linear' ? '\\n' : '\\n');\n return markup.join('');\n },\n\n /* _TO_SVG_END_ */\n\n /**\n * Returns an instance of CanvasGradient\n * @param {CanvasRenderingContext2D} ctx Context to render on\n * @return {CanvasGradient}\n */\n toLive: function toLive(ctx) {\n var gradient,\n coords = fabric.util.object.clone(this.coords),\n i,\n len;\n\n if (!this.type) {\n return;\n }\n\n if (this.type === 'linear') {\n gradient = ctx.createLinearGradient(coords.x1, coords.y1, coords.x2, coords.y2);\n } else if (this.type === 'radial') {\n gradient = ctx.createRadialGradient(coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);\n }\n\n for (i = 0, len = this.colorStops.length; i < len; i++) {\n var color = this.colorStops[i].color,\n opacity = this.colorStops[i].opacity,\n offset = this.colorStops[i].offset;\n\n if (typeof opacity !== 'undefined') {\n color = new fabric.Color(color).setAlpha(opacity).toRgba();\n }\n\n gradient.addColorStop(offset, color);\n }\n\n return gradient;\n }\n });\n fabric.util.object.extend(fabric.Gradient, {\n /* _FROM_SVG_START_ */\n\n /**\n * Returns {@link fabric.Gradient} instance from an SVG element\n * @static\n * @memberOf fabric.Gradient\n * @param {SVGGradientElement} el SVG gradient element\n * @param {fabric.Object} instance\n * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity.\n * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients\n * that uses gradientUnits as 'userSpaceOnUse' and percentages.\n * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg\n * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg\n * @param {Object.number} width width part of the svg tag if viewBox is not specified\n * @param {Object.number} height height part of the svg tag if viewBox is not specified\n * @return {fabric.Gradient} Gradient instance\n * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement\n * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement\n */\n fromElement: function fromElement(el, instance, opacityAttr, svgOptions) {\n /**\n * @example:\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n * OR\n *\n * \n * \n * \n * \n * \n *\n */\n var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1);\n multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier;\n\n if (isNaN(multiplier)) {\n multiplier = 1;\n }\n\n var colorStopEls = el.getElementsByTagName('stop'),\n type,\n gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? 'pixels' : 'percentage',\n gradientTransform = el.getAttribute('gradientTransform') || '',\n colorStops = [],\n coords,\n i,\n offsetX = 0,\n offsetY = 0,\n transformMatrix;\n\n if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') {\n type = 'linear';\n coords = getLinearCoords(el);\n } else {\n type = 'radial';\n coords = getRadialCoords(el);\n }\n\n for (i = colorStopEls.length; i--;) {\n colorStops.push(getColorStop(colorStopEls[i], multiplier));\n }\n\n transformMatrix = fabric.parseTransformAttribute(gradientTransform);\n\n __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits);\n\n if (gradientUnits === 'pixels') {\n offsetX = -instance.left;\n offsetY = -instance.top;\n }\n\n var gradient = new fabric.Gradient({\n id: el.getAttribute('id'),\n type: type,\n coords: coords,\n colorStops: colorStops,\n gradientUnits: gradientUnits,\n gradientTransform: transformMatrix,\n offsetX: offsetX,\n offsetY: offsetY\n });\n return gradient;\n }\n /* _FROM_SVG_END_ */\n\n });\n /**\n * @private\n */\n\n function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) {\n var propValue, finalValue;\n Object.keys(options).forEach(function (prop) {\n propValue = options[prop];\n\n if (propValue === 'Infinity') {\n finalValue = 1;\n } else if (propValue === '-Infinity') {\n finalValue = 0;\n } else {\n finalValue = parseFloat(options[prop], 10);\n\n if (typeof propValue === 'string' && /^(\\d+\\.\\d+)%|(\\d+)%$/.test(propValue)) {\n finalValue *= 0.01;\n\n if (gradientUnits === 'pixels') {\n // then we need to fix those percentages here in svg parsing\n if (prop === 'x1' || prop === 'x2' || prop === 'r2') {\n finalValue *= svgOptions.viewBoxWidth || svgOptions.width;\n }\n\n if (prop === 'y1' || prop === 'y2') {\n finalValue *= svgOptions.viewBoxHeight || svgOptions.height;\n }\n }\n }\n }\n\n options[prop] = finalValue;\n });\n }\n})();\n\n(function () {\n 'use strict';\n\n var toFixed = fabric.util.toFixed;\n /**\n * Pattern class\n * @class fabric.Pattern\n * @see {@link http://fabricjs.com/patterns|Pattern demo}\n * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo}\n * @see {@link fabric.Pattern#initialize} for constructor definition\n */\n\n fabric.Pattern = fabric.util.createClass(\n /** @lends fabric.Pattern.prototype */\n {\n /**\n * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat)\n * @type String\n * @default\n */\n repeat: 'repeat',\n\n /**\n * Pattern horizontal offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetX: 0,\n\n /**\n * Pattern vertical offset from object's left/top corner\n * @type Number\n * @default\n */\n offsetY: 0,\n\n /**\n * crossOrigin value (one of \"\", \"anonymous\", \"use-credentials\")\n * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes\n * @type String\n * @default\n */\n crossOrigin: '',\n\n /**\n * transform matrix to change the pattern, imported from svgs.\n * @type Array\n * @default\n */\n patternTransform: null,\n\n /**\n * Constructor\n * @param {Object} [options] Options object\n * @param {Function} [callback] function to invoke after callback init.\n * @return {fabric.Pattern} thisArg\n */\n initialize: function initialize(options, callback) {\n options || (options = {});\n this.id = fabric.Object.__uid++;\n this.setOptions(options);\n\n if (!options.source || options.source && typeof options.source !== 'string') {\n callback && callback(this);\n return;\n } else {\n // img src string\n var _this = this;\n\n this.source = fabric.util.createImage();\n fabric.util.loadImage(options.source, function (img, isError) {\n _this.source = img;\n callback && callback(_this, isError);\n }, null, this.crossOrigin);\n }\n },\n\n /**\n * Returns object representation of a pattern\n * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output\n * @return {Object} Object representation of a pattern instance\n */\n toObject: function toObject(propertiesToInclude) {\n var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,\n source,\n object; // element\n\n if (typeof this.source.src === 'string') {\n source = this.source.src;\n } //