micro-editor
Version:
1. npm install
534 lines • 1.02 MB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["editor"] = factory();
else
root["editor"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/components/photo-editor.tsx");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js":
/*!*******************************************************************************!*\
!*** ./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js ***!
\*******************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _emotion_memoize__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @emotion/memoize */ \"./node_modules/@emotion/memoize/dist/memoize.browser.esm.js\");\n\n\nvar reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|default|defer|dir|disabled|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|itemProp|itemScope|itemType|itemID|itemRef|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar index = Object(_emotion_memoize__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(function (prop) {\n return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n /* o */\n && prop.charCodeAt(1) === 110\n /* n */\n && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (index);\n\n\n//# sourceURL=webpack://editor/./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js?");
/***/ }),
/***/ "./node_modules/@emotion/memoize/dist/memoize.browser.esm.js":
/*!*******************************************************************!*\
!*** ./node_modules/@emotion/memoize/dist/memoize.browser.esm.js ***!
\*******************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nfunction memoize(fn) {\n var cache = {};\n return function (arg) {\n if (cache[arg] === undefined) cache[arg] = fn(arg);\n return cache[arg];\n };\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (memoize);\n\n\n//# sourceURL=webpack://editor/./node_modules/@emotion/memoize/dist/memoize.browser.esm.js?");
/***/ }),
/***/ "./node_modules/@emotion/unitless/dist/unitless.browser.esm.js":
/*!*********************************************************************!*\
!*** ./node_modules/@emotion/unitless/dist/unitless.browser.esm.js ***!
\*********************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nvar unitlessKeys = {\n animationIterationCount: 1,\n borderImageOutset: 1,\n borderImageSlice: 1,\n borderImageWidth: 1,\n boxFlex: 1,\n boxFlexGroup: 1,\n boxOrdinalGroup: 1,\n columnCount: 1,\n columns: 1,\n flex: 1,\n flexGrow: 1,\n flexPositive: 1,\n flexShrink: 1,\n flexNegative: 1,\n flexOrder: 1,\n gridRow: 1,\n gridRowEnd: 1,\n gridRowSpan: 1,\n gridRowStart: 1,\n gridColumn: 1,\n gridColumnEnd: 1,\n gridColumnSpan: 1,\n gridColumnStart: 1,\n msGridRow: 1,\n msGridRowSpan: 1,\n msGridColumn: 1,\n msGridColumnSpan: 1,\n fontWeight: 1,\n lineHeight: 1,\n opacity: 1,\n order: 1,\n orphans: 1,\n tabSize: 1,\n widows: 1,\n zIndex: 1,\n zoom: 1,\n WebkitLineClamp: 1,\n // SVG-related properties\n fillOpacity: 1,\n floodOpacity: 1,\n stopOpacity: 1,\n strokeDasharray: 1,\n strokeDashoffset: 1,\n strokeMiterlimit: 1,\n strokeOpacity: 1,\n strokeWidth: 1\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (unitlessKeys);\n\n\n//# sourceURL=webpack://editor/./node_modules/@emotion/unitless/dist/unitless.browser.esm.js?");
/***/ }),
/***/ "./node_modules/konva/konva.js":
/*!*************************************!*\
!*** ./node_modules/konva/konva.js ***!
\*************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("/* WEBPACK VAR INJECTION */(function(global) {/*\n * Konva JavaScript Framework v2.6.0\n * http://konvajs.github.io/\n * Licensed under the MIT\n * Date: Fri Dec 14 2018\n *\n * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)\n * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)\n *\n * @license\n */\n\n// runtime check for already included Konva\n(function() {\n 'use strict';\n /**\n * @namespace Konva\n */\n\n var PI_OVER_180 = Math.PI / 180;\n\n var Konva = {\n // public\n version: '2.6.0',\n\n // private\n stages: [],\n idCounter: 0,\n ids: {},\n names: {},\n shapes: {},\n listenClickTap: false,\n inDblClickWindow: false,\n\n isBrowser:\n typeof window !== 'undefined' &&\n // browser case\n ({}.toString.call(window) === '[object Window]' ||\n // electron case\n {}.toString.call(window) === '[object global]'),\n\n isUnminified: /comment/.test(function() {\n /* comment */\n }),\n\n // configurations\n enableTrace: false,\n traceArrMax: 100,\n dblClickWindow: 400,\n /**\n * Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.\n * But you may override such property, if you want to use your value.\n * @property pixelRatio\n * @default undefined\n * @memberof Konva\n * @example\n * Konva.pixelRatio = 1;\n */\n pixelRatio: undefined,\n /**\n * Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,\n * only then start dragging. Default is 3px.\n * @property dragDistance\n * @default 0\n * @memberof Konva\n * @example\n * Konva.dragDistance = 10;\n */\n dragDistance: 3,\n /**\n * Use degree values for angle properties. You may set this property to false if you want to use radiant values.\n * @property angleDeg\n * @default true\n * @memberof Konva\n * @example\n * node.rotation(45); // 45 degrees\n * Konva.angleDeg = false;\n * node.rotation(Math.PI / 2); // PI/2 radian\n */\n angleDeg: true,\n /**\n * Show different warnings about errors or wrong API usage\n * @property showWarnings\n * @default true\n * @memberof Konva\n * @example\n * Konva.showWarnings = false;\n */\n showWarnings: true,\n\n /**\n * @namespace Filters\n * @memberof Konva\n */\n Filters: {},\n\n /**\n * returns whether or not drag and drop is currently active\n * @method\n * @memberof Konva\n */\n isDragging: function() {\n var dd = Konva.DD;\n\n // if DD is not included with the build, then\n // drag and drop is not even possible\n if (dd) {\n return dd.isDragging;\n }\n return false;\n },\n /**\n * returns whether or not a drag and drop operation is ready, but may\n * not necessarily have started\n * @method\n * @memberof Konva\n */\n isDragReady: function() {\n var dd = Konva.DD;\n\n // if DD is not included with the build, then\n // drag and drop is not even possible\n if (dd) {\n return !!dd.node;\n }\n return false;\n },\n _addId: function(node, id) {\n if (!id) {\n return;\n }\n // do we need this warning?\n // if (this.ids[id]) {\n // Konva.Util.warn(\n // 'Duplicate id \"' +\n // id +\n // '\". Please don not use same id several times. It may break find() method look up.'\n // );\n // }\n this.ids[id] = node;\n },\n _removeId: function(id) {\n if (id !== undefined) {\n delete this.ids[id];\n }\n },\n _addName: function(node, name) {\n if (name) {\n if (!this.names[name]) {\n this.names[name] = [];\n }\n this.names[name].push(node);\n }\n },\n _removeName: function(name, _id) {\n if (!name) {\n return;\n }\n var nodes = this.names[name];\n if (!nodes) {\n return;\n }\n for (var n = 0; n < nodes.length; n++) {\n var no = nodes[n];\n if (no._id === _id) {\n nodes.splice(n, 1);\n }\n }\n if (nodes.length === 0) {\n delete this.names[name];\n }\n },\n getAngle: function(angle) {\n return this.angleDeg ? angle * PI_OVER_180 : angle;\n },\n _detectIE: function(ua) {\n var msie = ua.indexOf('msie ');\n if (msie > 0) {\n // IE 10 or older => return version number\n return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);\n }\n\n var trident = ua.indexOf('trident/');\n if (trident > 0) {\n // IE 11 => return version number\n var rv = ua.indexOf('rv:');\n return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);\n }\n\n var edge = ua.indexOf('edge/');\n if (edge > 0) {\n // Edge (IE 12+) => return version number\n return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);\n }\n\n // other browser\n return false;\n },\n _parseUA: function(userAgent) {\n var ua = userAgent.toLowerCase(),\n // jQuery UA regex\n match =\n /(chrome)[ /]([\\w.]+)/.exec(ua) ||\n /(webkit)[ /]([\\w.]+)/.exec(ua) ||\n /(opera)(?:.*version|)[ /]([\\w.]+)/.exec(ua) ||\n /(msie) ([\\w.]+)/.exec(ua) ||\n (ua.indexOf('compatible') < 0 &&\n /(mozilla)(?:.*? rv:([\\w.]+)|)/.exec(ua)) ||\n [],\n // adding mobile flag as well\n mobile = !!userAgent.match(\n /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i\n ),\n ieMobile = !!userAgent.match(/IEMobile/i);\n\n return {\n browser: match[1] || '',\n version: match[2] || '0',\n isIE: Konva._detectIE(ua),\n // adding mobile flab\n mobile: mobile,\n ieMobile: ieMobile // If this is true (i.e., WP8), then Konva touch events are executed instead of equivalent Konva mouse events\n };\n },\n // user agent\n UA: undefined\n };\n\n var glob =\n typeof global !== 'undefined'\n ? global\n : typeof window !== 'undefined'\n ? window\n : typeof WorkerGlobalScope !== 'undefined'\n ? self\n : {};\n\n Konva.UA = Konva._parseUA((glob.navigator && glob.navigator.userAgent) || '');\n\n if (glob.Konva) {\n console.error(\n 'Konva instance is already exist in current eviroment. ' +\n 'Please use only one instance.'\n );\n }\n glob.Konva = Konva;\n Konva.global = glob;\n Konva.window = glob;\n Konva.document = glob.document;\n\n if (true) {\n module.exports = Konva;\n } else {}\n})();\n\n/*eslint-disable eqeqeq, no-cond-assign, no-empty*/\n(function() {\n 'use strict';\n /**\n * Collection constructor. Collection extends\n * Array. This class is used in conjunction with {@link Konva.Container#get}\n * @constructor\n * @memberof Konva\n */\n Konva.Collection = function() {\n var args = [].slice.call(arguments),\n length = args.length,\n i = 0;\n\n this.length = length;\n for (; i < length; i++) {\n this[i] = args[i];\n }\n return this;\n };\n Konva.Collection.prototype = [];\n /**\n * iterate through node array and run a function for each node.\n * The node and index is passed into the function\n * @method\n * @memberof Konva.Collection.prototype\n * @param {Function} func\n * @example\n * // get all nodes with name foo inside layer, and set x to 10 for each\n * layer.get('.foo').each(function(shape, n) {\n * shape.setX(10);\n * });\n */\n Konva.Collection.prototype.each = function(func) {\n for (var n = 0; n < this.length; n++) {\n func(this[n], n);\n }\n };\n /**\n * convert collection into an array\n * @method\n * @memberof Konva.Collection.prototype\n */\n Konva.Collection.prototype.toArray = function() {\n var arr = [],\n len = this.length,\n n;\n\n for (n = 0; n < len; n++) {\n arr.push(this[n]);\n }\n return arr;\n };\n /**\n * convert array into a collection\n * @method\n * @memberof Konva.Collection\n * @param {Array} arr\n */\n Konva.Collection.toCollection = function(arr) {\n var collection = new Konva.Collection(),\n len = arr.length,\n n;\n\n for (n = 0; n < len; n++) {\n collection.push(arr[n]);\n }\n return collection;\n };\n\n // map one method by it's name\n Konva.Collection._mapMethod = function(methodName) {\n Konva.Collection.prototype[methodName] = function() {\n var len = this.length,\n i;\n\n var args = [].slice.call(arguments);\n for (i = 0; i < len; i++) {\n this[i][methodName].apply(this[i], args);\n }\n\n return this;\n };\n };\n\n Konva.Collection.mapMethods = function(constructor) {\n var prot = constructor.prototype;\n for (var methodName in prot) {\n Konva.Collection._mapMethod(methodName);\n }\n };\n\n /*\n * Last updated November 2011\n * By Simon Sarris\n * www.simonsarris.com\n * sarris@acm.org\n *\n * Free to use and distribute at will\n * So long as you are nice to people, etc\n */\n\n /*\n * The usage of this class was inspired by some of the work done by a forked\n * project, KineticJS-Ext by Wappworks, which is based on Simon's Transform\n * class. Modified by Eric Rowell\n */\n\n /**\n * Transform constructor. Transform object is a private class of Konva framework.\n * In most of the cases you don't need to use it in your app.\n * But there is a documentation for that class in case you still want\n * to make some manual calculations.\n * @constructor\n * @param {Array} [m] Optional six-element matrix\n * @memberof Konva\n */\n Konva.Transform = function(m) {\n this.m = (m && m.slice()) || [1, 0, 0, 1, 0, 0];\n };\n\n Konva.Transform.prototype = {\n /**\n * Copy Konva.Transform object\n * @method\n * @memberof Konva.Transform.prototype\n * @returns {Konva.Transform}\n */\n copy: function() {\n return new Konva.Transform(this.m);\n },\n /**\n * Transform point\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Object} point 2D point(x, y)\n * @returns {Object} 2D point(x, y)\n */\n point: function(point) {\n var m = this.m;\n return {\n x: m[0] * point.x + m[2] * point.y + m[4],\n y: m[1] * point.x + m[3] * point.y + m[5]\n };\n },\n /**\n * Apply translation\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Number} x\n * @param {Number} y\n * @returns {Konva.Transform}\n */\n translate: function(x, y) {\n this.m[4] += this.m[0] * x + this.m[2] * y;\n this.m[5] += this.m[1] * x + this.m[3] * y;\n return this;\n },\n /**\n * Apply scale\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Number} sx\n * @param {Number} sy\n * @returns {Konva.Transform}\n */\n scale: function(sx, sy) {\n this.m[0] *= sx;\n this.m[1] *= sx;\n this.m[2] *= sy;\n this.m[3] *= sy;\n return this;\n },\n /**\n * Apply rotation\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Number} rad Angle in radians\n * @returns {Konva.Transform}\n */\n rotate: function(rad) {\n var c = Math.cos(rad);\n var s = Math.sin(rad);\n var m11 = this.m[0] * c + this.m[2] * s;\n var m12 = this.m[1] * c + this.m[3] * s;\n var m21 = this.m[0] * -s + this.m[2] * c;\n var m22 = this.m[1] * -s + this.m[3] * c;\n this.m[0] = m11;\n this.m[1] = m12;\n this.m[2] = m21;\n this.m[3] = m22;\n return this;\n },\n /**\n * Returns the translation\n * @method\n * @memberof Konva.Transform.prototype\n * @returns {Object} 2D point(x, y)\n */\n getTranslation: function() {\n return {\n x: this.m[4],\n y: this.m[5]\n };\n },\n /**\n * Apply skew\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Number} sx\n * @param {Number} sy\n * @returns {Konva.Transform}\n */\n skew: function(sx, sy) {\n var m11 = this.m[0] + this.m[2] * sy;\n var m12 = this.m[1] + this.m[3] * sy;\n var m21 = this.m[2] + this.m[0] * sx;\n var m22 = this.m[3] + this.m[1] * sx;\n this.m[0] = m11;\n this.m[1] = m12;\n this.m[2] = m21;\n this.m[3] = m22;\n return this;\n },\n /**\n * Transform multiplication\n * @method\n * @memberof Konva.Transform.prototype\n * @param {Konva.Transform} matrix\n * @returns {Konva.Transform}\n */\n multiply: function(matrix) {\n var m11 = this.m[0] * matrix.m[0] + this.m[2] * matrix.m[1];\n var m12 = this.m[1] * matrix.m[0] + this.m[3] * matrix.m[1];\n\n var m21 = this.m[0] * matrix.m[2] + this.m[2] * matrix.m[3];\n var m22 = this.m[1] * matrix.m[2] + this.m[3] * matrix.m[3];\n\n var dx = this.m[0] * matrix.m[4] + this.m[2] * matrix.m[5] + this.m[4];\n var dy = this.m[1] * matrix.m[4] + this.m[3] * matrix.m[5] + this.m[5];\n\n this.m[0] = m11;\n this.m[1] = m12;\n this.m[2] = m21;\n this.m[3] = m22;\n this.m[4] = dx;\n this.m[5] = dy;\n return this;\n },\n /**\n * Invert the matrix\n * @method\n * @memberof Konva.Transform.prototype\n * @returns {Konva.Transform}\n */\n invert: function() {\n var d = 1 / (this.m[0] * this.m[3] - this.m[1] * this.m[2]);\n var m0 = this.m[3] * d;\n var m1 = -this.m[1] * d;\n var m2 = -this.m[2] * d;\n var m3 = this.m[0] * d;\n var m4 = d * (this.m[2] * this.m[5] - this.m[3] * this.m[4]);\n var m5 = d * (this.m[1] * this.m[4] - this.m[0] * this.m[5]);\n this.m[0] = m0;\n this.m[1] = m1;\n this.m[2] = m2;\n this.m[3] = m3;\n this.m[4] = m4;\n this.m[5] = m5;\n return this;\n },\n /**\n * return matrix\n * @method\n * @memberof Konva.Transform.prototype\n */\n getMatrix: function() {\n return this.m;\n },\n /**\n * set to absolute position via translation\n * @method\n * @memberof Konva.Transform.prototype\n * @returns {Konva.Transform}\n * @author ericdrowell\n */\n setAbsolutePosition: function(x, y) {\n var m0 = this.m[0],\n m1 = this.m[1],\n m2 = this.m[2],\n m3 = this.m[3],\n m4 = this.m[4],\n m5 = this.m[5],\n yt = (m0 * (y - m5) - m1 * (x - m4)) / (m0 * m3 - m1 * m2),\n xt = (x - m4 - m2 * yt) / m0;\n\n return this.translate(xt, yt);\n }\n };\n\n // CONSTANTS\n var CONTEXT_2D = '2d',\n OBJECT_ARRAY = '[object Array]',\n OBJECT_NUMBER = '[object Number]',\n OBJECT_STRING = '[object String]',\n OBJECT_BOOLEAN = '[object Boolean]',\n PI_OVER_DEG180 = Math.PI / 180,\n DEG180_OVER_PI = 180 / Math.PI,\n HASH = '#',\n EMPTY_STRING = '',\n ZERO = '0',\n KONVA_WARNING = 'Konva warning: ',\n KONVA_ERROR = 'Konva error: ',\n RGB_PAREN = 'rgb(',\n COLORS = {\n aliceblue: [240, 248, 255],\n antiquewhite: [250, 235, 215],\n aqua: [0, 255, 255],\n aquamarine: [127, 255, 212],\n azure: [240, 255, 255],\n beige: [245, 245, 220],\n bisque: [255, 228, 196],\n black: [0, 0, 0],\n blanchedalmond: [255, 235, 205],\n blue: [0, 0, 255],\n blueviolet: [138, 43, 226],\n brown: [165, 42, 42],\n burlywood: [222, 184, 135],\n cadetblue: [95, 158, 160],\n chartreuse: [127, 255, 0],\n chocolate: [210, 105, 30],\n coral: [255, 127, 80],\n cornflowerblue: [100, 149, 237],\n cornsilk: [255, 248, 220],\n crimson: [220, 20, 60],\n cyan: [0, 255, 255],\n darkblue: [0, 0, 139],\n darkcyan: [0, 139, 139],\n darkgoldenrod: [184, 132, 11],\n darkgray: [169, 169, 169],\n darkgreen: [0, 100, 0],\n darkgrey: [169, 169, 169],\n darkkhaki: [189, 183, 107],\n darkmagenta: [139, 0, 139],\n darkolivegreen: [85, 107, 47],\n darkorange: [255, 140, 0],\n darkorchid: [153, 50, 204],\n darkred: [139, 0, 0],\n darksalmon: [233, 150, 122],\n darkseagreen: [143, 188, 143],\n darkslateblue: [72, 61, 139],\n darkslategray: [47, 79, 79],\n darkslategrey: [47, 79, 79],\n darkturquoise: [0, 206, 209],\n darkviolet: [148, 0, 211],\n deeppink: [255, 20, 147],\n deepskyblue: [0, 191, 255],\n dimgray: [105, 105, 105],\n dimgrey: [105, 105, 105],\n dodgerblue: [30, 144, 255],\n firebrick: [178, 34, 34],\n floralwhite: [255, 255, 240],\n forestgreen: [34, 139, 34],\n fuchsia: [255, 0, 255],\n gainsboro: [220, 220, 220],\n ghostwhite: [248, 248, 255],\n gold: [255, 215, 0],\n goldenrod: [218, 165, 32],\n gray: [128, 128, 128],\n green: [0, 128, 0],\n greenyellow: [173, 255, 47],\n grey: [128, 128, 128],\n honeydew: [240, 255, 240],\n hotpink: [255, 105, 180],\n indianred: [205, 92, 92],\n indigo: [75, 0, 130],\n ivory: [255, 255, 240],\n khaki: [240, 230, 140],\n lavender: [230, 230, 250],\n lavenderblush: [255, 240, 245],\n lawngreen: [124, 252, 0],\n lemonchiffon: [255, 250, 205],\n lightblue: [173, 216, 230],\n lightcoral: [240, 128, 128],\n lightcyan: [224, 255, 255],\n lightgoldenrodyellow: [250, 250, 210],\n lightgray: [211, 211, 211],\n lightgreen: [144, 238, 144],\n lightgrey: [211, 211, 211],\n lightpink: [255, 182, 193],\n lightsalmon: [255, 160, 122],\n lightseagreen: [32, 178, 170],\n lightskyblue: [135, 206, 250],\n lightslategray: [119, 136, 153],\n lightslategrey: [119, 136, 153],\n lightsteelblue: [176, 196, 222],\n lightyellow: [255, 255, 224],\n lime: [0, 255, 0],\n limegreen: [50, 205, 50],\n linen: [250, 240, 230],\n magenta: [255, 0, 255],\n maroon: [128, 0, 0],\n mediumaquamarine: [102, 205, 170],\n mediumblue: [0, 0, 205],\n mediumorchid: [186, 85, 211],\n mediumpurple: [147, 112, 219],\n mediumseagreen: [60, 179, 113],\n mediumslateblue: [123, 104, 238],\n mediumspringgreen: [0, 250, 154],\n mediumturquoise: [72, 209, 204],\n mediumvioletred: [199, 21, 133],\n midnightblue: [25, 25, 112],\n mintcream: [245, 255, 250],\n mistyrose: [255, 228, 225],\n moccasin: [255, 228, 181],\n navajowhite: [255, 222, 173],\n navy: [0, 0, 128],\n oldlace: [253, 245, 230],\n olive: [128, 128, 0],\n olivedrab: [107, 142, 35],\n orange: [255, 165, 0],\n orangered: [255, 69, 0],\n orchid: [218, 112, 214],\n palegoldenrod: [238, 232, 170],\n palegreen: [152, 251, 152],\n paleturquoise: [175, 238, 238],\n palevioletred: [219, 112, 147],\n papayawhip: [255, 239, 213],\n peachpuff: [255, 218, 185],\n peru: [205, 133, 63],\n pink: [255, 192, 203],\n plum: [221, 160, 203],\n powderblue: [176, 224, 230],\n purple: [128, 0, 128],\n rebeccapurple: [102, 51, 153],\n red: [255, 0, 0],\n rosybrown: [188, 143, 143],\n royalblue: [65, 105, 225],\n saddlebrown: [139, 69, 19],\n salmon: [250, 128, 114],\n sandybrown: [244, 164, 96],\n seagreen: [46, 139, 87],\n seashell: [255, 245, 238],\n sienna: [160, 82, 45],\n silver: [192, 192, 192],\n skyblue: [135, 206, 235],\n slateblue: [106, 90, 205],\n slategray: [119, 128, 144],\n slategrey: [119, 128, 144],\n snow: [255, 255, 250],\n springgreen: [0, 255, 127],\n steelblue: [70, 130, 180],\n tan: [210, 180, 140],\n teal: [0, 128, 128],\n thistle: [216, 191, 216],\n transparent: [255, 255, 255, 0],\n tomato: [255, 99, 71],\n turquoise: [64, 224, 208],\n violet: [238, 130, 238],\n wheat: [245, 222, 179],\n white: [255, 255, 255],\n whitesmoke: [245, 245, 245],\n yellow: [255, 255, 0],\n yellowgreen: [154, 205, 5]\n },\n RGB_REGEX = /rgb\\((\\d{1,3}),(\\d{1,3}),(\\d{1,3})\\)/;\n\n /**\n * @namespace Util\n * @memberof Konva\n */\n Konva.Util = {\n /*\n * cherry-picked utilities from underscore.js\n */\n _isElement: function(obj) {\n return !!(obj && obj.nodeType == 1);\n },\n _isFunction: function(obj) {\n return !!(obj && obj.constructor && obj.call && obj.apply);\n },\n _isObject: function(obj) {\n return !!obj && obj.constructor === Object;\n },\n _isArray: function(obj) {\n return Object.prototype.toString.call(obj) === OBJECT_ARRAY;\n },\n _isNumber: function(obj) {\n return (\n Object.prototype.toString.call(obj) === OBJECT_NUMBER &&\n !isNaN(obj) &&\n isFinite(obj)\n );\n },\n _isString: function(obj) {\n return Object.prototype.toString.call(obj) === OBJECT_STRING;\n },\n _isBoolean: function(obj) {\n return Object.prototype.toString.call(obj) === OBJECT_BOOLEAN;\n },\n // arrays are objects too\n isObject: function(val) {\n return val instanceof Object;\n },\n isValidSelector: function(selector) {\n if (typeof selector !== 'string') {\n return false;\n }\n var firstChar = selector[0];\n return (\n firstChar === '#' ||\n firstChar === '.' ||\n firstChar === firstChar.toUpperCase()\n );\n },\n _sign: function(number) {\n if (number === 0) {\n return 0;\n }\n if (number > 0) {\n return 1;\n } else {\n return -1;\n }\n },\n createCanvasElement: function() {\n var canvas = Konva.isBrowser\n ? Konva.document.createElement('canvas')\n : new Konva._nodeCanvas();\n // on some environments canvas.style is readonly\n try {\n canvas.style = canvas.style || {};\n } catch (e) {}\n return canvas;\n },\n _isInDocument: function(el) {\n while ((el = el.parentNode)) {\n if (el == Konva.document) {\n return true;\n }\n }\n return false;\n },\n _simplifyArray: function(arr) {\n var retArr = [],\n len = arr.length,\n util = Konva.Util,\n n,\n val;\n\n for (n = 0; n < len; n++) {\n val = arr[n];\n if (util._isNumber(val)) {\n val = Math.round(val * 1000) / 1000;\n } else if (!util._isString(val)) {\n val = val.toString();\n }\n\n retArr.push(val);\n }\n\n return retArr;\n },\n /*\n * arg can be an image object or image data\n */\n _getImage: function(arg, callback) {\n var imageObj, canvas;\n\n // if arg is null or undefined\n if (!arg) {\n callback(null);\n } else if (this._isElement(arg)) {\n // if arg is already an image object\n callback(arg);\n } else if (this._isString(arg)) {\n // if arg is a string, then it's a data url\n imageObj = new Konva.window.Image();\n imageObj.onload = function() {\n callback(imageObj);\n };\n imageObj.src = arg;\n } else if (arg.data) {\n //if arg is an object that contains the data property, it's an image object\n canvas = Konva.Util.createCanvasElement();\n canvas.width = arg.width;\n canvas.height = arg.height;\n var _context = canvas.getContext(CONTEXT_2D);\n _context.putImageData(arg, 0, 0);\n this._getImage(canvas.toDataURL(), callback);\n } else {\n callback(null);\n }\n },\n _getRGBAString: function(obj) {\n var red = obj.red || 0,\n green = obj.green || 0,\n blue = obj.blue || 0,\n alpha = obj.alpha || 1;\n\n return ['rgba(', red, ',', green, ',', blue, ',', alpha, ')'].join(\n EMPTY_STRING\n );\n },\n _rgbToHex: function(r, g, b) {\n return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n },\n _hexToRgb: function(hex) {\n hex = hex.replace(HASH, EMPTY_STRING);\n var bigint = parseInt(hex, 16);\n return {\n r: (bigint >> 16) & 255,\n g: (bigint >> 8) & 255,\n b: bigint & 255\n };\n },\n /**\n * return random hex color\n * @method\n * @memberof Konva.Util.prototype\n */\n getRandomColor: function() {\n var randColor = ((Math.random() * 0xffffff) << 0).toString(16);\n while (randColor.length < 6) {\n randColor = ZERO + randColor;\n }\n return HASH + randColor;\n },\n /**\n * return value with default fallback\n * @method\n * @memberof Konva.Util.prototype\n */\n get: function(val, def) {\n if (val === undefined) {\n return def;\n } else {\n return val;\n }\n },\n /**\n * get RGB components of a color\n * @method\n * @memberof Konva.Util.prototype\n * @param {String} color\n * @example\n * // each of the following examples return {r:0, g:0, b:255}\n * var rgb = Konva.Util.getRGB('blue');\n * var rgb = Konva.Util.getRGB('#0000ff');\n * var rgb = Konva.Util.getRGB('rgb(0,0,255)');\n */\n getRGB: function(color) {\n var rgb;\n // color string\n if (color in COLORS) {\n rgb = COLORS[color];\n return {\n r: rgb[0],\n g: rgb[1],\n b: rgb[2]\n };\n } else if (color[0] === HASH) {\n // hex\n return this._hexToRgb(color.substring(1));\n } else if (color.substr(0, 4) === RGB_PAREN) {\n // rgb string\n rgb = RGB_REGEX.exec(color.replace(/ /g, ''));\n return {\n r: parseInt(rgb[1], 10),\n g: parseInt(rgb[2], 10),\n b: parseInt(rgb[3], 10)\n };\n } else {\n // default\n return {\n r: 0,\n g: 0,\n b: 0\n };\n }\n },\n // convert any color string to RGBA object\n // from https://github.com/component/color-parser\n colorToRGBA: function(str) {\n str = str || 'black';\n return (\n Konva.Util._namedColorToRBA(str) ||\n Konva.Util._hex3ColorToRGBA(str) ||\n Konva.Util._hex6ColorToRGBA(str) ||\n Konva.Util._rgbColorToRGBA(str) ||\n Konva.Util._rgbaColorToRGBA(str)\n );\n },\n // Parse named css color. Like \"green\"\n _namedColorToRBA: function(str) {\n var c = COLORS[str.toLowerCase()];\n if (!c) {\n return null;\n }\n return {\n r: c[0],\n g: c[1],\n b: c[2],\n a: 1\n };\n },\n // Parse rgb(n, n, n)\n _rgbColorToRGBA: function(str) {\n if (str.indexOf('rgb(') === 0) {\n str = str.match(/rgb\\(([^)]+)\\)/)[1];\n var parts = str.split(/ *, */).map(Number);\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n a: 1\n };\n }\n },\n // Parse rgba(n, n, n, n)\n _rgbaColorToRGBA: function(str) {\n if (str.indexOf('rgba(') === 0) {\n str = str.match(/rgba\\(([^)]+)\\)/)[1];\n var parts = str.split(/ *, */).map(Number);\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n a: parts[3]\n };\n }\n },\n // Parse #nnnnnn\n _hex6ColorToRGBA: function(str) {\n if (str[0] === '#' && str.length === 7) {\n return {\n r: parseInt(str.slice(1, 3), 16),\n g: parseInt(str.slice(3, 5), 16),\n b: parseInt(str.slice(5, 7), 16),\n a: 1\n };\n }\n },\n // Parse #nnn\n _hex3ColorToRGBA: function(str) {\n if (str[0] === '#' && str.length === 4) {\n return {\n r: parseInt(str[1] + str[1], 16),\n g: parseInt(str[2] + str[2], 16),\n b: parseInt(str[3] + str[3], 16),\n a: 1\n };\n }\n },\n // o1 takes precedence over o2\n _merge: function(o1, o2) {\n var retObj = this._clone(o2);\n for (var key in o1) {\n if (this._isObject(o1[key])) {\n retObj[key] = this._merge(o1[key], retObj[key]);\n } else {\n retObj[key] = o1[key];\n }\n }\n return retObj;\n },\n trimRight: function(str) {\n return str.replace(/\\s+$/, '');\n },\n trimLeft: function(str) {\n return str.replace(/^\\s+/, '');\n },\n /**\n * check intersection of two client rectangles\n * @method\n * @memberof Konva.Util.prototype\n */\n haveIntersection: function(r1, r2) {\n return !(\n r2.x > r1.x + r1.width ||\n r2.x + r2.width < r1.x ||\n r2.y > r1.y + r1.height ||\n r2.y + r2.height < r1.y\n );\n },\n cloneObject: function(obj) {\n var retObj = {};\n for (var key in obj) {\n if (this._isObject(obj[key])) {\n retObj[key] = this.cloneObject(obj[key]);\n } else if (this._isArray(obj[key])) {\n retObj[key] = this.cloneArray(obj[key]);\n } else {\n retObj[key] = obj[key];\n }\n }\n return retObj;\n },\n cloneArray: function(arr) {\n return arr.slice(0);\n },\n _degToRad: function(deg) {\n return deg * PI_OVER_DEG180;\n },\n _radToDeg: function(rad) {\n return rad * DEG180_OVER_PI;\n },\n _capitalize: function(str) {\n return str.charAt(0).toUpperCase() + str.slice(1);\n },\n throw: function(str) {\n throw new Error(KONVA_ERROR + str);\n },\n error: function(str) {\n console.error(KONVA_ERROR + str);\n },\n warn: function(str) {\n /*\n * IE9 on Windows7 64bit will throw a JS error\n * if we don't use window.console in the conditional\n */\n if (Konva.global.console && console.warn && Konva.showWarnings) {\n console.warn(KONVA_WARNING + str);\n }\n },\n extend: function(child, parent) {\n function Ctor() {\n this.constructor = child;\n }\n Ctor.prototype = parent.prototype;\n var oldProto = child.prototype;\n child.prototype = new Ctor();\n for (var key in oldProto) {\n if (oldProto.hasOwnProperty(key)) {\n child.prototype[key] = oldProto[key];\n }\n }\n child.__super__ = parent.prototype;\n // create reference to parent\n child.super = parent;\n },\n /**\n * adds methods to a constructor prototype\n * @method\n * @memberof Konva.Util.prototype\n * @param {Function} constructor\n * @param {Object} methods\n */\n addMethods: function(constructor, methods) {\n var key;\n\n for (key in methods) {\n constructor.prototype[key] = methods[key];\n }\n },\n _getControlPoints: function(x0, y0, x1, y1, x2, y2, t) {\n var d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),\n d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),\n fa = t * d01 / (d01 + d12),\n fb = t * d12 / (d01 + d12),\n p1x = x1 - fa * (x2 - x0),\n p1y = y1 - fa * (y2 - y0),\n p2x = x1 + fb * (x2 - x0),\n p2y = y1 + fb * (y2 - y0);\n\n return [p1x, p1y, p2x, p2y];\n },\n _expandPoints: function(p, tension) {\n var len = p.length,\n allPoints = [],\n n,\n cp;\n\n for (n = 2; n < len - 2; n += 2) {\n cp = Konva.Util._getControlPoints(\n p[n - 2],\n p[n - 1],\n p[n],\n p[n + 1],\n p[n + 2],\n p[n + 3],\n tension\n );\n allPoints.push(cp[0]);\n allPoints.push(cp[1]);\n allPoints.push(p[n]);\n allPoints.push(p[n + 1]);\n allPoints.push(cp[2]);\n allPoints.push(cp[3]);\n }\n\n return allPoints;\n },\n _removeLastLetter: function(str) {\n return str.substring(0, str.length - 1);\n },\n each: function(obj, func) {\n for (var key in obj) {\n func(key, obj[key]);\n }\n },\n _inRange: function(val, left, right) {\n return left <= val && val < right;\n },\n _getProjectionToSegment: function(x1, y1, x2, y2, x3, y3) {\n var x, y, dist;\n\n var pd2 = (x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2);\n if (pd2 == 0) {\n x = x1;\n y = y1;\n dist = (x3 - x2) * (x3 - x2) + (y3 - y2) * (y3 - y2);\n } else {\n var u = ((x3 - x1) * (x2 - x1) + (y3 - y1) * (y2 - y1)) / pd2;\n if (u < 0) {\n x = x1;\n y = y1;\n dist = (x1 - x3) * (x1 - x3) + (y1 - y3) * (y1 - y3);\n } else if (u > 1.0) {\n x = x2;\n y = y2;\n dist = (x2 - x3) * (x2 - x3) + (y2 - y3) * (y2 - y3);\n } else {\n x = x1 + u * (x2 - x1);\n y = y1 + u * (y2 - y1);\n dist = (x - x3) * (x - x3) + (y - y3) * (y - y3);\n }\n }\n return [x, y, dist];\n },\n // line as array of points.\n // line might be closed\n _getProjectionToLine: function(pt, line, isClosed) {\n var pc = Konva.Util.cloneObject(pt);\n var dist = Number.MAX_VALUE;\n line.forEach(function(p1, i) {\n if (!isClosed && i === line.length - 1) {\n return;\n }\n var p2 = line[(i + 1) % line.length];\n var proj = Konva.Util._getProjectionToSegment(\n p1.x,\n p1.y,\n p2.x,\n p2.y,\n pt.x,\n pt.y\n );\n var px = proj[0],\n py = proj[1],\n pdist = proj[2];\n if (pdist < dist) {\n pc.x = px;\n pc.y = py;\n dist = pdist;\n }\n });\n return pc;\n },\n _prepareArrayForTween: function(startArray, endArray, isClosed) {\n var n,\n start = [],\n end = [];\n if (startArray.length > endArray.length) {\n var temp = endArray;\n endArray = startArray;\n startArray = temp;\n }\n for (n = 0; n < startArray.length; n += 2) {\n start.push({\n x: startArray[n],\n y: startArray[n + 1]\n });\n }\n for (n = 0; n < endArray.length; n += 2) {\n end.push({\n x: endArray[n],\n y: endArray[n + 1]\n });\n }\n\n var newStart = [];\n end.forEach(function(point) {\n var pr = Konva.Util._getProjectionToLine(point, start, isClosed);\n newStart.push(pr.x);\n newStart.push(pr.y);\n });\n return newStart;\n },\n _prepareToStringify: function(obj) {\n var desc;\n\n obj.visitedByCircularReferenceRemoval = true;\n\n for (var key in obj) {\n if (\n !(obj.hasOwnProperty(key) && obj[key] && typeof obj[key] == 'object')\n ) {\n continue;\n }\n desc = Object.getOwnPropertyDescriptor(obj, key);\n if (\n obj[key].visitedByCircularReferenceRemoval ||\n Konva.Util._isElement(obj[key])\n ) {\n if (desc.configurable) {\n delete obj[key];\n } else {\n return null;\n }\n } else if (Konva.Util._prepareToStringify(obj[key]) === null) {\n if (desc.configurable) {\n delete obj[key];\n } else {\n return null;\n }\n }\n }\n\n delete obj.visitedByCircularReferenceRemoval;\n\n return obj;\n }\n };\n})();\n\n(function() {\n 'use strict';\n // calculate pixel ratio\n\n var _pixelRatio;\n function getDevicePixelRatio() {\n if (_pixelRatio) {\n return _pixelRatio;\n }\n var canvas = Konva.Util.createCanvasElement();\n var context = canvas.getContext('2d');\n _pixelRatio = (function() {\n var devicePixelRatio = Konva.window.devicePixelRatio || 1,\n backingStoreRatio =\n context.webkitBackingStorePixelRatio ||\n context.mozBackingStorePixelRatio ||\n context.msBackingStorePixelRatio ||\n context.oBackingStorePixelRatio ||\n context.backingStorePixelRatio ||\n 1;\n return devicePixelRatio / backingStoreRatio;\n })();\n return _pixelRatio;\n }\n\n /**\n * Canvas Renderer constructor\n * @constructor\n * @abstract\n * @memberof Konva\n * @param {Object} config\n * @param {Number} config.width\n * @param {Number} config.height\n * @param {Number} config.pixelRatio KonvaJS automatically handles pixel ratio adjustments in order to render crisp drawings\n * on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios\n * of 1. Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio\n * of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel\n * ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise\n * specified, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel\n * ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.\n */\n Konva.Canvas = function(config) {\n this.init(config);\n };\n\n Konva.Canvas.prototype = {\n init: function(config) {\n var conf = config || {};\n\n var pixelRatio =\n conf.pixelRatio || Konva.pixelRatio || getDevicePixelRatio();\n\n this.pixelRatio = pixelRatio;\n this._canvas = Konva.Util.createCanvasElement();\n\n // set inline styles\n this._canvas.style.padding = 0;\n this._canvas.style.margin = 0;\n this._canvas.style.border = 0;\n this._canvas.style.background = 'transparent';\n this._canvas.style.position = 'absolute';\n this._canvas.style.top = 0;\n this._canvas.style.left = 0;\n },\n /**\n * get canvas context\n * @method\n * @memberof Konva.Canvas.prototype\n * @returns {CanvasContext} context\n */\n getContext: function() {\n return this.context;\n },\n /**\n * get pixel ratio\n * @method\n * @memberof Konva.Canvas.prototype\n * @returns {Number} pixel ratio\n */\n getPixelRatio: function() {\n return this.pixelRatio;\n },\n /**\n * get pixel ratio\n * @method\n * @memberof Konva.Canvas.prototype\n * @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings\n * on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios\n * of 1. Some high end tablets and phones, like iPhones and iPads have a device pixel ratio\n * of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel\n * ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise\n * specificed, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel\n * ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.\n */\n setPixelRatio: function(pixelRatio) {\n var previousRatio = this.pixelRatio;\n this.pixelRatio = pixelRatio;\n this.setSize(\n this.getWidth() / previousRatio,\n this.getHeight() / previousRatio\n );\n },\n /**\n * set width\n * @method\n * @memberof Konva.Canvas.prototype\n * @param {Number} width\n */\n setWidth: function(width) {\n // take into account pixel ratio\n this.width = this._canvas.width = width * this.pixelRatio;\n this._canvas.style.width = width + 'px';\n\n var pixelRatio = this.pixelRatio,\n _context = this.getContext()._context;\n _context.scale(pixelRatio, pixelRatio);\n },\n /**\n * set height\n * @method\n * @memberof Konva.Canvas.prototype\n * @param {Number} height\n */\n setHeight: function(height) {\n // take into account pixel ratio\n this.height = this._canvas.height = height * this.pixelRatio;\n this._canvas.style.height = height + 'px';\n var pixelRatio = this.pixelRatio,\n _context = this.getContext()._context;\n _context.scale(pixelRatio, pixelRatio);\n },\n /**\n * get width\n * @method\n * @memberof Konva.Canvas.prototype\n * @returns {Number} width\n */\n getWidth: function() {\n return this.width;\n },\n /**\n * get height\n * @method\n * @memberof Konva.Canvas.prototype\n * @returns {Number} height\n */\n getHeight: function() {\n return this.height;\n },\n /**\n * set size\n * @method\n * @memberof Konva.Canvas.prototype\n * @param {Number} width\n * @param {Number} height\n */\n setSize: function(width, height) {\n this.setWidth(width);\n this.setHeight(height);\n },\n /**\n * to data url\n * @method\n * @memberof Konva.Canvas.prototype\n * @param {String} mimeType\n * @param {Number} quality between 0 and 1 for jpg mime types\n * @returns {String} data url string\n */\n toDataURL: function(mimeType, quality) {\n try {\n // If this call fails (due to browser bug, like in Firefox 3.6),\n // then revert to previous no-parameter image/png behavior\n return this._canvas.toDataURL(mimeType, quality);\n } catch (e) {\n try {\n return this._canvas.toDataURL();\n } catch (err) {\n Konva.Util.warn('Unable to get data URL. ' + err.message);\n return '';\n }\n }\n }\n };\n\n Konva.SceneCanvas = function(config) {\n var conf = config || {};\n var width = conf.width || 0,\n height = conf.height || 0;\n\n Konva.Canvas.call(this, conf);\n this.context = new Konva.SceneContext(this);\n this.setSize(width, height);\n };\n\n Konva.Util.extend(Konva.SceneCanvas, Konva.Canvas);\n\n Konva.HitCanvas = function(config) {\n var conf = config || {};\n var width = conf.width || 0,\n height = conf.height || 0;\n\n Konva.Canvas.call(this, conf);\n this.context = new Konva.HitContext(this);\n this.setSize(width, height);\n this.hitCanvas = true;\n };\n Konva.Util.extend(Konva.HitCanvas, Konva.Canvas);\n})();\n\n(function() {\n 'use strict';\n var COMMA = ',',\n OPEN_PAREN = '(',\n CLOSE_PAREN = ')',\n OPEN_PAREN_BRACKET = '([',\n CLOSE_BRACKET_PAREN = '])',\n SEMICOLON = ';',\n DOUBLE_PAREN = '()',\n // EMPTY_STRING = '',\n EQUALS = '=',\n // SET = 'set',\n CONTEXT_METHODS = [\n 'arc',\n 'arcTo',\n 'beginPath',\n 'bezierCurveTo',\n 'clearRect',\n 'clip',\n 'closePath',\n 'createLinearGradient',\n 'createPattern',\n 'createRadialGradient',\n 'drawImage',\n 'fill',\n 'fillText',\n 'getImageData',\n 'createImageData',\n 'lineTo',\n 'moveTo',\n 'putImageData',\n 'quadraticCurveTo',\n 'rect',\n 'restore',\n 'rotate',\n 'save',\n 'scale',\n 'setLineDash',\n 'setTransform',\n 'stroke',\n 'strokeText',\n 'transform',\n 'translate'\n ];\n\n var CONTEXT_PROPERTIES = [\n 'fillStyle',\n 'strokeStyle',\n 'shadowColor',\n 'shadowBlur',\n 'shadowOffsetX',\n 'shadowOffsetY',\n 'lineCap',\n 'lineDashOffset',\n 'lineJoin',\n 'lineWidth',\n 'miterLimit',\n 'font',\n 'textAlign',\n 'textBaseline',\n 'globalAlpha',\n 'globalCompositeOperation'\n ];\n\n /**\n * Canvas Context constructor\n * @constructor\n * @abstract\n * @memberof Konva\n */\n Konva.Context = function(canvas) {\n this.init(canvas);\n };\n\n Konva.Context.prototype = {\n init: function(canvas) {\n this.canvas = canvas;\n this._context = canvas._canvas.getContext('2d');\n\n if (Konva.enableTrace) {\n this.traceArr = [];\n this._enableTrace();\n }\n },\n /**\n * fill shape\n * @method\n * @memberof Konva.Context.prototype\n * @param {Konva.Shape} shape\n */\n fillShape: function(shape) {\n if (shape.getFillEnabled()) {\n this._fill(shape);\n }\n },\n /**\n * stroke shape\n * @method\n * @memberof Konva.Context.prototype\n * @param {Konva.Shape} shape\n */\n strokeShape: function(shape) {\n if (shape.getStrokeEnabled()) {\n this._stroke(shape);\n }\n },\n /**\n * fill then stroke\n * @method\n * @memberof Konva.Context.prototype\n * @param {Konva.Shape} shape\n */\n fillStrokeShape: function(shape) {\n var fillEnabled = shape.getFillEnabled();\n if (fillEnabled) {\n this._fill(shape);\n }\n if (shape.getStrokeEnabled()) {\n this._stroke(shape);\n }\n },\n /**\n * get context trace if trace is enabled\n * @method\n * @memberof Konva.Context.prototype\n * @param {Boolean} relaxed if false, return strict context trace, which includes method names, method parameters\n * properties, and property values. If true, return relaxed context trace, which only returns method names and\n * properites.\n * @returns {String}\n */\n getTrace: function(relaxed) {\n var traceArr = this.traceArr,\n len = traceArr.length,\n str = '',\n n,\n trace,\n method,\n args;\n\n for (n = 0; n < len; n++) {\n trace = traceArr[n];\n method = trace.method;\n\n // methods\n if (method) {\n args = trace.args;\n str += method;\n if (relaxed) {\n str += DOUBLE_PAREN;\n } else {\n if (Konva.Util._isArray(args[0])) {\n str +=\n OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;\n } else {\n str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;\n }\n }\n } else {\n // properties\n str += trace.property;\n if (!relaxed) {\n str += EQUALS + trace.val;\n }\n }\n\n str += SEMICOLON;\n }\n\n return str;\n },\n /**\n * clear trace if trace is enabled\n * @method\n * @memberof Konva.Context.prototype\n */\n clearTrace: function() {\n this.traceArr = [];\n },\n _trace: function(str) {\n var traceArr = this.traceArr,\n len;\n\n traceArr.push(str);\n len = traceArr.length;\n\n if (len >= Konva.traceArrMax) {\n traceArr.shift();\n }\n },\n /**\n * reset canvas context transform\n * @method\n * @memberof Konva.Context.prototype\n */\n reset: function() {\n var pixelRatio = this.getCanvas().getPixelRatio();\n this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);\n },\n /**\n * get canvas\n * @method\n * @memberof Konva.Context.prototype\n * @returns {Konva.Canvas}\n */\n getCanvas: function() {\n return this.canvas;\n },\n /**\n * clear canvas\n * @method\n * @memberof Konva.Context.prototype\n * @param {Object} [bounds]\n * @param {Number} [bounds.x]\n * @param {Number} [bounds.y]\n * @param {Number} [bounds.width]\n * @param {Number} [bounds.height]\n */\n clear: function(bounds) {\n var canvas = this.getCanvas();\n\n if (bounds) {\n this.clearRect(\n bounds.x || 0,\n bounds.y || 0,\n bounds.width || 0,\n bounds.height || 0\n );\n } else {\n this.clearRect(\n 0,\n 0,\n canvas.getWidth() / canvas.pixelRatio,\n canvas.getHeight() / canvas.pixelRatio\n );\n }\n },\n _applyLineCap: function(shape) {\n var lineCap = shape.getLineCap();\n if (lineCap) {\n this.setAttr('lineCap', lineCap);\n }\n },\n _applyOpacity: function(shape) {\n var absOpacity = shape.getAbsoluteOpacity();\n if (absOpacity !== 1) {\n this.setAttr('globalAlpha', absOpacity);\n }\n },\n _applyLineJoin: function(shape) {\n var lineJoin = shape.getLineJoin();\n if (lineJoin) {\n this.setAttr('lineJoin', lineJoin);\n }\n },\n setAttr: function(attr, val) {\n this._context[attr] = val;\n },\n\n // context pass through methods\n arc: function() {\n var a = arguments;\n this._context.arc(a[0], a[1], a[2], a[3], a[4], a[5]);\n },\n beginPath: function() {\n this._context.beginPath();\n },\n bezierCurveTo: function() {\n var a = arguments;\n this._context.bezierCurveTo(a[0], a[1], a[2], a[3], a[4], a[5]);\n },\n clearRect: function() {\n var a = arguments;\n this._context.clearRect(a[0], a[1], a[2], a[3]);\n },\n clip: function() {\n this._context.clip();\n },\n closePath: function() {\n this._context.closePath();\n },\n createImageData: function() {\n var a = arguments;\n if (a.length === 2) {\n return this._context.createImageData(a[0], a[1]);\n } else if (a.length === 1) {\n return this._context.createImageData(a[0]);\n }\n },\n createLinearGradient: function() {\n var a = arguments;\n return this._context.createLinearGradient(a[0], a[1], a[2], a[3]);\n },\n createPattern: function() {\n var a = arguments;\n return this._context.createPattern(a[0], a[1]);\n },\n createRadialGradient: function() {\n var a = arguments;\n return this._context.createRadialGradient(\n a[0],\n a[1],\n a[2],\n a[3],\n a[4],\n a[5]\n );\n },\n drawImage: function() {\n var a = arguments,\n _context = this._context;\n\n if (a.length === 3) {\n _context.drawImage(a[0], a[1], a[2]);\n } else if (a.length === 5) {\n _context.drawImage(a[0], a[1], a[2], a[3], a[4]);\n } else if (a.length === 9) {\n _context.drawImage(\n a[0],\n a[1],\n a[2],\n a[3],\n a[4],\n a[5],\n a[6],\n a[7],\n a[8]\n );\n }\n },\n isPointInPath: function(x, y) {\n return this._context.isPointInPath(x, y);\n },\n fill: function() {\n this._context.fill();\n },\n fillRect: function(x, y, width, height) {\n this._context.fillRect(x, y, width, height);\n },\n strokeRect: function(x, y, width, height) {\n this._context.strokeRect(x, y, width, height);\n },\n fillText: function() {\n var a = arguments;\n this._context.fillText(a[0], a[1], a[2]);\n },\n measureText: function(text) {\n return this._context.measureText(text);\n },\n getImageData: function() {\n var a = arguments;\n return this._context.getImageData(a[0], a[1], a[2], a[3]);\n },\n lineTo: function() {\n var a = arguments;\n this._context.lineTo(a[0], a[1]);\n },\n moveTo: function() {\n var a = arguments;\n this._context.moveTo(a[0], a[1]);\n },\n rect: function() {\n var a = arguments;\n this._context.rect(a[0], a[1], a[2], a[3]);\n },\n putImageData: function() {\n var a = arguments;\n this._context.putImageData(a[0], a[1], a[2]);\n },\n quadraticCurveTo: function() {\n var a = arguments;\n this._context.quadraticCurveTo(a[0], a[1], a[2], a[3]);\n },\n restore: function() {\n this._context.restore();\n },\n rotate: function() {\n var a = arguments;\n this._context.rotate(a[0]);\n },\n save: function() {\n this._context.save();\n },\n scale: function() {\n var a = arguments;\n this._context.scale(a[0], a[1]);\n },\n setLineDash: function() {\n var a = arguments,\n _context = this._context;\n\n // works for Chrome and IE11\n if (this._context.setLineDash) {\n _context.setLineDash(a[0]);\n } else if ('mozDash' in _context) {\n // verified that this works in firefox\n _context.mozDash = a[0];\n } else if ('webkitLineDash' in _context) {\n // does not currently work for Safari\n _context.webkitLineDash = a[0];\n }\n\n // no support for IE9 and IE10\n },\n getLineDash: function() {\n return this._context.getLineDash();\n },\n setTransform: function() {\n var a = arguments;\n this._context.setTransform(a[0], a[1], a[2], a[3], a[4], a[5]);\n },\n stroke: function() {\n this._context.stroke();\n },\n strokeText: function() {\n var a = arguments;\n this._context.strokeText(a[0], a[1], a[2]);\n },\n transform: function() {\n var a = arguments;\n this._context.transform(a[0], a[1], a[2], a[3], a[4], a[5]);\n },\n translate: function() {\n var a = arguments;\n this._context.translate(a[0], a[1]);\n },\n _enableTrace: function() {\n var that = this,\n len = CONTEXT_METHODS.length,\n _simplifyArray = Konva.Util._simplifyArray,\n origSetter = this.setAttr,\n n,\n args;\n\n // to prevent creating scope function at each loop\n var func = function(methodName) {\n var origMethod = that[methodName],\n ret;\n\n that[methodName] = function() {\n args = _simplifyArray(Array.prototype.slice.call(arguments, 0));\n ret = origMethod.apply(that, arguments);\n\n that._trace({\n method: methodName,\n args: args\n });\n\n return ret;\n };\n };\n // methods\n for (n = 0; n < len; n++) {\n func(CONTEXT_METHODS[n]);\n }\n\n // attrs\n that.setAttr = function() {\n origSetter.apply(that, arguments);\n var prop = arguments[0];\n var val = arguments[1];\n if (\n prop === 'shadowOffsetX' ||\n prop === 'shadowOffsetY' ||\n prop === 'shadowBlur'\n ) {\n val = val / this.canvas.getPixelRatio();\n }\n that._trace({\n property: prop,\n val: val\n });\n };\n }\n };\n\n CONTEXT_PROPERTIES.forEach(function(prop) {\n Object.defineProperty(Konva.Context.prototype, prop, {\n get: function() {\n return this._context[prop];\n },\n set: function(val) {\n this._context[prop] = val;\n }\n });\n });\n\n Konva.SceneContext = function(canvas) {\n Konva.Context.call(this, canvas);\n };\n\n Konva.SceneContext.prototype = {\n _fillColor: function(shape) {\n var fill = shape.fill();\n\n this.setAttr('fillStyle', fill);\n shape._fillFunc(this);\n },\n _fillPattern: function(shape) {\n var fillPatternX = shape.getFillPatternX(),\n fillPatternY = shape.getFillPatternY(),\n fillPatternScale = shape.getFillPatternScale(),\n fillPatternRotation = Konva.getAngle(shape.getFillPatternRotation()),\n fillPatternOffset = shape.getFillPatternOffset();\n\n if (fillPatternX || fillPatternY) {\n this.translate(fillPatternX || 0, fillPatternY || 0);\n }\n if (fillPatternRotation) {\n this.rotate(fillPatternRotation);\n }\n if (fillPatternScale) {\n this.scale(fillPatternScale.x, fillPatternScale.y);\n }\n if (fillPatternOffset) {\n this.translate(-1 * fillPatternOffset.x, -1 * fillPatternOffset.y);\n }\n\n this.setAttr(\n 'fillStyle',\n this.createPattern(\n shape.getFillPatternImage(),\n shape.getFillPatternRepeat() || 'repeat'\n )\n );\n this.fill();\n },\n _fillLinearGradient: function(shape) {\n var start = shape.getFillLinearGradientStartPoint(),\n end = shape.getFillLinearGradientEndPoint(),\n colorStops = shape.getFillLinearGradientColorStops(),\n grd = this.createLinearGradient(start.x, start.y, end.x, end.y);\n\n if (colorStops) {\n // build color stops\n for (var n = 0; n < colorStops.length; n += 2) {\n grd.addColorStop(colorStops[n], colorStops[n + 1]);\n }\n this.setAttr('fillStyle', grd);\n shape._fillFunc(this);\n }\n },\n _fillRadialGradient: function(shape) {\n var start = shape.getFillRadialGradientStartPoint(),\n end = shape.getFillRadialGradientEndPoint(),\n startRadius = shape.getFillRadialGradientStartRadius(),\n endRadius = shape.getFillRadialGradientEndRadius(),\n colorStops = shape.getFillRadialGradientColorStops(),\n grd = this.createRadialGradient(\n start.x,\n start.y,\n startRadius,\n end.x,\n end.y,\n endRadius\n );\n\n // build color stops\n for (var n = 0; n < colorStops.length; n += 2) {\n grd.addColorStop(colorStops[n], colorStops[n + 1]);\n }\n this.setAttr('fillStyle', grd);\n this.fill();\n },\n _fill: function(shape) {\n var hasColor = shape.fill(),\n fillPriority = shape.getFillPriority();\n\n // priority fills\n if (hasColor && fillPriority === 'color') {\n this._fillColor(shape);\n return;\n }\n\n var hasPattern = shape.getFillPatternImage();\n if (hasPattern && fillPriority === 'pattern') {\n this._fillPattern(shape);\n return;\n }\n\n var hasLinearGradient = shape.getFillLinearGradientColorStops();\n if (hasLinearGradient && fillPriority === 'linear-gradient') {\n this._fillLinearGradient(shape);\n return;\n }\n\n var hasRadialGradient = shape.getFillRadialGradientColorStops();\n if (hasRadialGradient && fillPriority === 'radial-gradient') {\n this._fillRadialGradient(shape);\n return;\n }\n\n // now just try and fill with whatever is available\n if (hasColor) {\n this._fillColor(shape);\n } else if (hasPattern) {\n this._fillPattern(shape);\n } else if (hasLinearGradient) {\n this._fillLinearGradient(shape);\n } else if (hasRadialGradient) {\n this._fillRadialGradient(shape);\n }\n },\n _strokeLinearGradient: function(shape) {\n var start = shape.getStrokeLinearGradientStartPoint(),\n end = shape.getStrokeLinearGradientEndPoint(),\n colorStops = shape.getStrokeLinearGradientColorStops(),\n grd = this.createLinearGradient(start.x, start.y, end.x, end.y);\n\n if (colorStops) {\n // build color stops\n for (var n = 0; n < colorStops.length; n += 2) {\n grd.addColorStop(colorStops[n], colorStops[n + 1]);\n }\n this.setAttr('strokeStyle', grd);\n }\n },\n _stroke: function(shape) {\n var dash = shape.dash(),\n // ignore strokeScaleEnabled for Text\n strokeScaleEnabled =\n shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;\n\n if (shape.hasStroke()) {\n if (!strokeScaleEnabled) {\n this.save();\n var pixelRatio = this.getCanvas().getPixelRatio();\n this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);\n }\n\n this._applyLineCap(shape);\n if (dash && shape.dashEnabled()) {\n this.setLineDash(dash);\n this.setAttr('lineDashOffset', shape.dashOffset());\n }\n\n this.setAttr('lineWidth', shape.strokeWidth());\n\n if (!shape.getShadowForStrokeEnabled()) {\n this.setAttr('shadowColor', 'rgba(0,0,0,0)');\n }\n\n // TODO - do we need to make like a fill function?\n\n var hasLinearGradient = shape.getStrokeLinearGradientColorStops();\n if (hasLinearGradient) {\n this._strokeLinearGradient(shape);\n } else {\n this.setAttr('strokeStyle', shape.stroke());\n }\n\n shape._strokeFunc(this);\n\n if (!strokeScaleEnabled) {\n this.restore();\n }\n }\n },\n _applyShadow: function(shape) {\n var util = Konva.Util,\n color = util.get(shape.getShadowRGBA(), 'black'),\n blur = util.get(shape.getShadowBlur(), 5),\n offset = util.get(shape.getShadowOffset(), {\n x: 0,\n y: 0\n }),\n scale = shape.getAbsoluteScale(),\n ratio = this.canvas.getPixelRatio(),\n scaleX = scale.x * ratio,\n scaleY = scale.y * ratio;\n\n this.setAttr('shadowColor', color);\n this.setAttr(\n 'shadowBlur',\n blur * Math.min(Math.abs(scaleX), Math.abs(scaleY))\n );\n this.setAttr('shadowOffsetX', offset.x * scaleX);\n this.setAttr('shadowOffsetY', offset.y * scaleY);\n },\n _applyGlobalCompositeOperation: function(shape) {\n var globalCompositeOperation = shape.getGlobalCompositeOperation();\n if (globalCompositeOperation !== 'source-over') {\n this.setAttr('globalCompositeOperation', globalCompositeOperation);\n }\n }\n };\n Konva.Util.extend(Konva.SceneContext, Konva.Context);\n\n Konva.HitContext = function(canvas) {\n Konva.Context.call(this, canvas);\n };\n\n Konva.HitContext.prototype = {\n _fill: function(shape) {\n this.save();\n this.setAttr('fillStyle', shape.colorKey);\n shape._fillFuncHit(this);\n this.restore();\n },\n _stroke: function(shape) {\n if (shape.hasStroke() && shape.strokeHitEnabled()) {\n // ignore strokeScaleEnabled for Text\n var strokeScaleEnabled =\n shape.getStrokeScaleEnabled() || shape instanceof Konva.Text;\n if (!strokeScaleEnabled) {\n this.save();\n this.setTransform(1, 0, 0, 1, 0, 0);\n }\n this._applyLineCap(shape);\n this.setAttr('lineWidth', shape.strokeWidth());\n this.setAttr('strokeStyle', shape.colorKey);\n shape._strokeFuncHit(this);\n if (!strokeScaleEnabled) {\n this.restore();\n }\n }\n }\n };\n Konva.Util.extend(Konva.HitContext, Konva.Context);\n})();\n\n(function() {\n 'use strict';\n // CONSTANTS\n var GET = 'get',\n SET = 'set';\n\n Konva.Factory = {\n addGetterSetter: function(constructor, attr, def, validator, after) {\n this.addGetter(constructor, attr, def);\n this.addSetter(constructor, attr, validator, after);\n this.addOverloadedGetterSetter(constructor, attr);\n },\n addGetter: function(constructor, attr, def) {\n var method = GET + Konva.Util._capitalize(attr);\n\n constructor.prototype[method] = function() {\n var val = this.attrs[attr];\n return val === undefined ? def : val;\n };\n },\n addSetter: function(constructor, attr, validator, after) {\n // if (!validator && validator !== null) {\n // console.error(constructor, attr, 'has no validator.');\n // }\n var method = SET + Konva.Util._capitalize(attr);\n\n constructor.prototype[method] = function(val) {\n if (validator && val !== undefined && val !== null) {\n val = validator.call(this, val, attr);\n }\n\n this._setAttr(attr, val);\n\n if (after) {\n after.call(this);\n }\n\n return this;\n };\n },\n addComponentsGetterSetter: function(\n constructor,\n attr,\n components,\n validator,\n after\n ) {\n var len = components.length,\n capitalize = Konva.Util._capitalize,\n getter = GET + capitalize(attr),\n setter = SET + capitalize(attr),\n n,\n component;\n\n // getter\n constructor.prototype[getter] = function() {\n var ret = {};\n\n for (n = 0; n < len; n++) {\n component = components[n];\n ret[component] = this.getAttr(attr + capitalize(component));\n }\n\n return ret;\n };\n\n // setter\n constructor.prototype[setter] = function(val) {\n var oldVal = this.attrs[attr],\n key;\n\n if (validator) {\n val = validator.call(this, val);\n }\n\n for (key in val) {\n if (!val.hasOwnProperty(key)) {\n continue;\n }\n this._setAttr(attr + capitalize(key), val[key]);\n }\n\n this._fireChangeEvent(attr, oldVal, val);\n\n if (after) {\n after.call(this);\n }\n\n return this;\n };\n\n this.addOverloadedGetterSetter(constructor, attr);\n },\n addOverloadedGetterSetter: function(constructor, attr) {\n var capitalizedAttr = Konva.Util._capitalize(attr),\n setter = SET + capitalizedAttr,\n getter = GET + capitalizedAttr;\n\n constructor.prototype[attr] = function() {\n // setting\n if (arguments.length) {\n this[setter](arguments[0]);\n return this;\n }\n // getting\n return this[getter]();\n };\n },\n addDeprecatedGetterSetter: function(constructor, attr, def, validator) {\n Konva.Util.error('Adding deprecated ' + attr);\n\n var method = GET + Konva.Util._capitalize(attr);\n\n var message =\n attr +\n ' property is deprecated and will be removed soon. Look at Konva change log for more information.';\n constructor.prototype[method] = function() {\n Konva.Util.error(message);\n var val = this.attrs[attr];\n return val === undefined ? def : val;\n };\n this.addSetter(constructor, attr, validator, function() {\n Konva.Util.error(message);\n });\n this.addOverloadedGetterSetter(constructor, attr);\n },\n backCompat: function(constructor, methods) {\n Konva.Util.each(methods, function(oldMethodName, newMethodName) {\n var method = constructor.prototype[newMethodName];\n var oldGetter = GET + Konva.Util._capitalize(oldMethodName);\n var oldSetter = SET + Konva.Util._capitalize(oldMethodName);\n\n function deprecated() {\n method.apply(this, arguments);\n Konva.Util.error(\n '\"' +\n oldMethodName +\n '\" method is deprecated and will be removed soon. Use \"\"' +\n newMethodName +\n '\" instead.'\n );\n }\n\n constructor.prototype[oldMethodName] = deprecated;\n constructor.prototype[oldGetter] = deprecated;\n constructor.prototype[oldSetter] = deprecated;\n });\n },\n afterSetFilter: function() {\n this._filterUpToDate = false;\n }\n };\n\n Konva.Validators = {\n /**\n * @return {number}\n */\n RGBComponent: function(val) {\n if (val > 255) {\n return 255;\n } else if (val < 0) {\n return 0;\n }\n return Math.round(val);\n },\n alphaComponent: function(val) {\n if (val > 1) {\n return 1;\n } else if (val < 0.0001) {\n // chrome does not honor alpha values of 0\n return 0.0001;\n }\n\n return val;\n },\n _formatValue: function(val) {\n if (Konva.Util._isString(val)) {\n return '\"' + val + '\"';\n }\n if (Object.prototype.toString.call(val) === '[object Number]') {\n return val;\n }\n if (Konva.Util._isBoolean(val)) {\n return val;\n }\n return Object.prototype.toString.call(val);\n },\n getNumberValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n if (!Konva.Util._isNumber(val)) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a number.'\n );\n }\n return val;\n };\n }\n },\n getNumberOrAutoValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n var isNumber = Konva.Util._isNumber(val);\n var isAuto = val === 'auto';\n\n if (!(isNumber || isAuto)) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a number or \"auto\".'\n );\n }\n return val;\n };\n }\n },\n getStringValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n if (!Konva.Util._isString(val)) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a string.'\n );\n }\n return val;\n };\n }\n },\n getFunctionValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n if (!Konva.Util._isFunction(val)) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a function.'\n );\n }\n return val;\n };\n }\n },\n getNumberArrayValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n if (!Konva.Util._isArray(val)) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a array of numbers.'\n );\n } else {\n val.forEach(function(item) {\n if (!Konva.Util._isNumber(item)) {\n Konva.Util.warn(\n '\"' +\n attr +\n '\" attribute has non numeric element ' +\n item +\n '. Make sure that all elements are numbers.'\n );\n }\n });\n }\n return val;\n };\n }\n },\n getBooleanValidator: function() {\n if (Konva.isUnminified) {\n return function(val, attr) {\n var isBool = val === true || val === false;\n if (!isBool) {\n Konva.Util.warn(\n Konva.Validators._formatValue(val) +\n ' is a not valid value for \"' +\n attr +\n '\" attribute. The value should be a boolean.'\n );\n }\n return val;\n };\n }\n }\n };\n})();\n\n(function(Konva) {\n 'use strict';\n // CONSTANTS\n var ABSOLUTE_OPACITY = 'absoluteOpacity',\n ABSOLUTE_TRANSFORM = 'absoluteTransform',\n ABSOLUTE_SCALE = 'absoluteScale',\n CHANGE = 'Change',\n CHILDREN = 'children',\n DOT = '.',\n EMPTY_STRING = '',\n GET = 'get',\n ID = 'id',\n KONVA = 'konva',\n LISTENING = 'listening',\n MOUSEENTER = 'mouseenter',\n MOUSELEAVE = 'mouseleave',\n NAME = 'name',\n SET = 'set',\n SHAPE = 'Shape',\n SPACE = ' ',\n STAGE = 'stage',\n TRANSFORM = 'transform',\n UPPER_STAGE = 'Stage',\n VISIBLE = 'visible',\n CLONE_BLACK_LIST = ['id'],\n TRANSFORM_CHANGE_STR = [\n 'xChange.konva',\n 'yChange.konva',\n 'scaleXChange.konva',\n 'scaleYChange.konva',\n 'skewXChange.konva',\n 'skewYChange.konva',\n 'rotationChange.konva',\n 'offsetXChange.konva',\n 'offsetYChange.konva',\n 'transformsEnabledChange.konva'\n ].join(SPACE),\n SCALE_CHANGE_STR = ['scaleXChange.konva', 'scaleYChange.konva'].join(SPACE);\n\n /**\n * Node constructor. Nodes are entities that can be transformed, layered,\n * and have bound events. The stage, layers, groups, and shapes all extend Node.\n * @constructor\n * @memberof Konva\n * @abstract\n * @param {Object} config\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n */\n Konva.Node = function(config) {\n this._init(config);\n };\n\n Konva.Util.addMethods(Konva.Node, {\n _init: function(config) {\n this._id = Konva.idCounter++;\n this.eventListeners = {};\n this.attrs = {};\n this._cache = {};\n this._filterUpToDate = false;\n this._isUnderCache = false;\n this.setAttrs(config);\n\n // event bindings for cache handling\n this.on(TRANSFORM_CHANGE_STR, function() {\n this._clearCache(TRANSFORM);\n this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);\n });\n\n this.on(SCALE_CHANGE_STR, function() {\n this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);\n });\n\n this.on('visibleChange.konva', function() {\n this._clearSelfAndDescendantCache(VISIBLE);\n });\n this.on('listeningChange.konva', function() {\n this._clearSelfAndDescendantCache(LISTENING);\n });\n this.on('opacityChange.konva', function() {\n this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);\n });\n },\n _clearCache: function(attr) {\n if (attr) {\n delete this._cache[attr];\n } else {\n this._cache = {};\n }\n },\n _getCache: function(attr, privateGetter) {\n var cache = this._cache[attr];\n\n // if not cached, we need to set it using the private getter method.\n if (cache === undefined) {\n this._cache[attr] = privateGetter.call(this);\n }\n\n return this._cache[attr];\n },\n /*\n * when the logic for a cached result depends on ancestor propagation, use this\n * method to clear self and children cache\n */\n _clearSelfAndDescendantCache: function(attr) {\n this._clearCache(attr);\n\n // skip clearing of node is cached with canvas\n if (this._cache.canvas) {\n return;\n }\n if (this.children) {\n this.getChildren().each(function(node) {\n node._clearSelfAndDescendantCache(attr);\n });\n }\n },\n /**\n * clear cached canvas\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n * @example\n * node.clearCache();\n */\n clearCache: function() {\n delete this._cache.canvas;\n this._filterUpToDate = false;\n this._clearSelfAndDescendantCache();\n return this;\n },\n /**\n * cache node to improve drawing performance, apply filters, or create more accurate\n * hit regions. For all basic shapes size of cache canvas will be automatically detected.\n * If you need to cache your custom `Konva.Shape` instance you have to pass shape's bounding box\n * properties. Look at [https://konvajs.github.io/docs/performance/Shape_Caching.html](link to demo page) for more information.\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} [config]\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Number} [config.offset] increase canvas size by `offset` pixel in all directions.\n * @param {Boolean} [config.drawBorder] when set to true, a red border will be drawn around the cached\n * region for debugging purposes\n * @param {Number} [config.pixelRatio] change quality (or pixel ratio) of cached image. pixelRatio = 2 will produce 2x sized cache.\n * @returns {Konva.Node}\n * @example\n * // cache a shape with the x,y position of the bounding box at the center and\n * // the width and height of the bounding box equal to the width and height of\n * // the shape obtained from shape.width() and shape.height()\n * image.cache();\n *\n * // cache a node and define the bounding box position and size\n * node.cache({\n * x: -30,\n * y: -30,\n * width: 100,\n * height: 200\n * });\n *\n * // cache a node and draw a red border around the bounding box\n * // for debugging purposes\n * node.cache({\n * x: -30,\n * y: -30,\n * width: 100,\n * height: 200,\n * offset : 10,\n * drawBorder: true\n * });\n */\n cache: function(config) {\n var conf = config || {};\n var rect = {};\n\n // don't call getClientRect if we have all attributes\n // it means call it only if have one undefined\n if (\n conf.x === undefined ||\n conf.y === undefined ||\n conf.width === undefined ||\n conf.height === undefined\n ) {\n rect = this.getClientRect({\n skipTransform: true,\n relativeTo: this.getParent()\n });\n }\n var width = conf.width || rect.width,\n height = conf.height || rect.height,\n pixelRatio = conf.pixelRatio,\n x = conf.x === undefined ? rect.x : conf.x,\n y = conf.y === undefined ? rect.y : conf.y,\n offset = conf.offset || 0,\n drawBorder = conf.drawBorder || false;\n\n if (!width || !height) {\n Konva.Util.error(\n 'Can not cache the node. Width or height of the node equals 0. Caching is skipped.'\n );\n return;\n }\n\n width += offset * 2;\n height += offset * 2;\n\n x -= offset;\n y -= offset;\n\n var cachedSceneCanvas = new Konva.SceneCanvas({\n pixelRatio: pixelRatio,\n width: width,\n height: height\n }),\n cachedFilterCanvas = new Konva.SceneCanvas({\n pixelRatio: pixelRatio,\n width: width,\n height: height\n }),\n cachedHitCanvas = new Konva.HitCanvas({\n pixelRatio: 1,\n width: width,\n height: height\n }),\n sceneContext = cachedSceneCanvas.getContext(),\n hitContext = cachedHitCanvas.getContext();\n\n cachedHitCanvas.isCache = true;\n\n this.clearCache();\n\n sceneContext.save();\n hitContext.save();\n\n sceneContext.translate(-x, -y);\n hitContext.translate(-x, -y);\n\n // extra flag to skip on getAbsolute opacity calc\n this._isUnderCache = true;\n this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);\n this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);\n\n this.drawScene(cachedSceneCanvas, this, true);\n this.drawHit(cachedHitCanvas, this, true);\n this._isUnderCache = false;\n\n sceneContext.restore();\n hitContext.restore();\n\n // this will draw a red border around the cached box for\n // debugging purposes\n if (drawBorder) {\n sceneContext.save();\n sceneContext.beginPath();\n sceneContext.rect(0, 0, width, height);\n sceneContext.closePath();\n sceneContext.setAttr('strokeStyle', 'red');\n sceneContext.setAttr('lineWidth', 5);\n sceneContext.stroke();\n sceneContext.restore();\n }\n\n this._cache.canvas = {\n scene: cachedSceneCanvas,\n filter: cachedFilterCanvas,\n hit: cachedHitCanvas,\n x: x,\n y: y\n };\n\n return this;\n },\n /**\n * Return client rectangle {x, y, width, height} of node. This rectangle also include all styling (strokes, shadows, etc).\n * The rectangle position is relative to parent container.\n * The purpose of the method is similar to getBoundingClientRect API of the DOM.\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} config\n * @param {Boolean} [config.skipTransform] should we apply transform to node for calculating rect?\n * @param {Boolean} [config.skipShadow] should we apply shadow to the node for calculating bound box?\n * @param {Boolean} [config.skipStroke] should we apply stroke to the node for calculating bound box?\n * @param {Object} [config.relativeTo] calculate client rect relative to one of the parents\n * @returns {Object} rect with {x, y, width, height} properties\n * @example\n * var rect = new Konva.Rect({\n * width : 100,\n * height : 100,\n * x : 50,\n * y : 50,\n * strokeWidth : 4,\n * stroke : 'black',\n * offsetX : 50,\n * scaleY : 2\n * });\n *\n * // get client rect without think off transformations (position, rotation, scale, offset, etc)\n * rect.getClientRect({ skipTransform: true});\n * // returns {\n * // x : -2, // two pixels for stroke / 2\n * // y : -2,\n * // width : 104, // increased by 4 for stroke\n * // height : 104\n * //}\n *\n * // get client rect with transformation applied\n * rect.getClientRect();\n * // returns Object {x: -2, y: 46, width: 104, height: 208}\n */\n getClientRect: function() {\n // abstract method\n // redefine in Container and Shape\n throw new Error('abstract \"getClientRect\" method call');\n },\n _transformedRect: function(rect, top) {\n var points = [\n { x: rect.x, y: rect.y },\n { x: rect.x + rect.width, y: rect.y },\n { x: rect.x + rect.width, y: rect.y + rect.height },\n { x: rect.x, y: rect.y + rect.height }\n ];\n var minX, minY, maxX, maxY;\n var trans = this.getAbsoluteTransform(top);\n points.forEach(function(point) {\n var transformed = trans.point(point);\n if (minX === undefined) {\n minX = maxX = transformed.x;\n minY = maxY = transformed.y;\n }\n minX = Math.min(minX, transformed.x);\n minY = Math.min(minY, transformed.y);\n maxX = Math.max(maxX, transformed.x);\n maxY = Math.max(maxY, transformed.y);\n });\n return {\n x: minX,\n y: minY,\n width: maxX - minX,\n height: maxY - minY\n };\n },\n _drawCachedSceneCanvas: function(context) {\n context.save();\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n context.translate(this._cache.canvas.x, this._cache.canvas.y);\n\n var cacheCanvas = this._getCachedSceneCanvas();\n var ratio = cacheCanvas.pixelRatio;\n\n context.drawImage(\n cacheCanvas._canvas,\n 0,\n 0,\n cacheCanvas.width / ratio,\n cacheCanvas.height / ratio\n );\n context.restore();\n },\n _drawCachedHitCanvas: function(context) {\n var cachedCanvas = this._cache.canvas,\n hitCanvas = cachedCanvas.hit;\n context.save();\n context.translate(this._cache.canvas.x, this._cache.canvas.y);\n context.drawImage(hitCanvas._canvas, 0, 0);\n context.restore();\n },\n _getCachedSceneCanvas: function() {\n var filters = this.filters(),\n cachedCanvas = this._cache.canvas,\n sceneCanvas = cachedCanvas.scene,\n filterCanvas = cachedCanvas.filter,\n filterContext = filterCanvas.getContext(),\n len,\n imageData,\n n,\n filter;\n\n if (filters) {\n if (!this._filterUpToDate) {\n var ratio = sceneCanvas.pixelRatio;\n\n try {\n len = filters.length;\n filterContext.clear();\n\n // copy cached canvas onto filter context\n filterContext.drawImage(\n sceneCanvas._canvas,\n 0,\n 0,\n sceneCanvas.getWidth() / ratio,\n sceneCanvas.getHeight() / ratio\n );\n imageData = filterContext.getImageData(\n 0,\n 0,\n filterCanvas.getWidth(),\n filterCanvas.getHeight()\n );\n\n // apply filters to filter context\n for (n = 0; n < len; n++) {\n filter = filters[n];\n if (typeof filter !== 'function') {\n Konva.Util.error(\n 'Filter should be type of function, but got ' +\n typeof filter +\n ' insted. Please check correct filters'\n );\n continue;\n }\n filter.call(this, imageData);\n filterContext.putImageData(imageData, 0, 0);\n }\n } catch (e) {\n Konva.Util.error('Unable to apply filter. ' + e.message);\n }\n\n this._filterUpToDate = true;\n }\n\n return filterCanvas;\n }\n return sceneCanvas;\n },\n /**\n * bind events to the node. KonvaJS supports mouseover, mousemove,\n * mouseout, mouseenter, mouseleave, mousedown, mouseup, wheel, contextmenu, click, dblclick, touchstart, touchmove,\n * touchend, tap, dbltap, dragstart, dragmove, and dragend events. The Konva Stage supports\n * contentMouseover, contentMousemove, contentMouseout, contentMousedown, contentMouseup, contentWheel, contentContextmenu\n * contentClick, contentDblclick, contentTouchstart, contentTouchmove, contentTouchend, contentTap,\n * and contentDblTap. Pass in a string of events delimited by a space to bind multiple events at once\n * such as 'mousedown mouseup mousemove'. Include a namespace to bind an\n * event by name such as 'click.foobar'.\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} evtStr e.g. 'click', 'mousedown touchstart', 'mousedown.foo touchstart.foo'\n * @param {Function} handler The handler function is passed an event object\n * @returns {Konva.Node}\n * @example\n * // add click listener\n * node.on('click', function() {\n * console.log('you clicked me!');\n * });\n *\n * // get the target node\n * node.on('click', function(evt) {\n * console.log(evt.target);\n * });\n *\n * // stop event propagation\n * node.on('click', function(evt) {\n * evt.cancelBubble = true;\n * });\n *\n * // bind multiple listeners\n * node.on('click touchstart', function() {\n * console.log('you clicked/touched me!');\n * });\n *\n * // namespace listener\n * node.on('click.foo', function() {\n * console.log('you clicked/touched me!');\n * });\n *\n * // get the event type\n * node.on('click tap', function(evt) {\n * var eventType = evt.type;\n * });\n *\n * // get native event object\n * node.on('click tap', function(evt) {\n * var nativeEvent = evt.evt;\n * });\n *\n * // for change events, get the old and new val\n * node.on('xChange', function(evt) {\n * var oldVal = evt.oldVal;\n * var newVal = evt.newVal;\n * });\n *\n * // get event targets\n * // with event delegations\n * layer.on('click', 'Group', function(evt) {\n * var shape = evt.target;\n * var group = evtn.currentTarger;\n * });\n */\n on: function(evtStr, handler) {\n if (arguments.length === 3) {\n return this._delegate.apply(this, arguments);\n }\n var events = evtStr.split(SPACE),\n len = events.length,\n n,\n event,\n parts,\n baseEvent,\n name;\n\n /*\n * loop through types and attach event listeners to\n * each one. eg. 'click mouseover.namespace mouseout'\n * will create three event bindings\n */\n for (n = 0; n < len; n++) {\n event = events[n];\n parts = event.split(DOT);\n baseEvent = parts[0];\n name = parts[1] || EMPTY_STRING;\n\n // create events array if it doesn't exist\n if (!this.eventListeners[baseEvent]) {\n this.eventListeners[baseEvent] = [];\n }\n\n this.eventListeners[baseEvent].push({\n name: name,\n handler: handler\n });\n }\n\n return this;\n },\n /**\n * remove event bindings from the node. Pass in a string of\n * event types delimmited by a space to remove multiple event\n * bindings at once such as 'mousedown mouseup mousemove'.\n * include a namespace to remove an event binding by name\n * such as 'click.foobar'. If you only give a name like '.foobar',\n * all events in that namespace will be removed.\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} evtStr e.g. 'click', 'mousedown touchstart', '.foobar'\n * @returns {Konva.Node}\n * @example\n * // remove listener\n * node.off('click');\n *\n * // remove multiple listeners\n * node.off('click touchstart');\n *\n * // remove listener by name\n * node.off('click.foo');\n */\n off: function(evtStr, callback) {\n var events = (evtStr || '').split(SPACE),\n len = events.length,\n n,\n t,\n event,\n parts,\n baseEvent,\n name;\n\n if (!evtStr) {\n // remove all events\n for (t in this.eventListeners) {\n this._off(t);\n }\n }\n for (n = 0; n < len; n++) {\n event = events[n];\n parts = event.split(DOT);\n baseEvent = parts[0];\n name = parts[1];\n\n if (baseEvent) {\n if (this.eventListeners[baseEvent]) {\n this._off(baseEvent, name, callback);\n }\n } else {\n for (t in this.eventListeners) {\n this._off(t, name, callback);\n }\n }\n }\n return this;\n },\n // some event aliases for third party integration like HammerJS\n dispatchEvent: function(evt) {\n var e = {\n target: this,\n type: evt.type,\n evt: evt\n };\n this.fire(evt.type, e);\n return this;\n },\n addEventListener: function(type, handler) {\n // we have to pass native event to handler\n this.on(type, function(evt) {\n handler.call(this, evt.evt);\n });\n return this;\n },\n removeEventListener: function(type) {\n this.off(type);\n return this;\n },\n // like node.on\n _delegate: function(event, selector, handler) {\n var stopNode = this;\n this.on(event, function(evt) {\n var targets = evt.target.findAncestors(selector, true, stopNode);\n for (var i = 0; i < targets.length; i++) {\n evt = Konva.Util.cloneObject(evt);\n evt.currentTarget = targets[i];\n handler.call(targets[i], evt);\n }\n });\n },\n /**\n * remove self from parent, but don't destroy. You can reuse node later.\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n * @example\n * node.remove();\n */\n remove: function() {\n var parent = this.getParent();\n\n if (parent && parent.children) {\n parent.children.splice(this.index, 1);\n parent._setChildrenIndices();\n delete this.parent;\n }\n\n // every cached attr that is calculated via node tree\n // traversal must be cleared when removing a node\n this._clearSelfAndDescendantCache(STAGE);\n this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);\n this._clearSelfAndDescendantCache(VISIBLE);\n this._clearSelfAndDescendantCache(LISTENING);\n this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);\n\n return this;\n },\n /**\n * remove and destroy a node. Kill it and delete forever! You should not reuse node after destroy().\n * @method\n * @memberof Konva.Node.prototype\n * @example\n * node.destroy();\n */\n destroy: function() {\n // remove from ids and names hashes\n Konva._removeId(this.getId());\n\n // remove all names\n var names = (this.getName() || '').split(/\\s/g);\n for (var i = 0; i < names.length; i++) {\n var subname = names[i];\n Konva._removeName(subname, this._id);\n }\n\n this.remove();\n return this;\n },\n /**\n * get attr\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} attr\n * @returns {Integer|String|Object|Array}\n * @example\n * var x = node.getAttr('x');\n */\n getAttr: function(attr) {\n var method = GET + Konva.Util._capitalize(attr);\n if (Konva.Util._isFunction(this[method])) {\n return this[method]();\n }\n // otherwise get directly\n return this.attrs[attr];\n },\n /**\n * get ancestors\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Collection}\n * @example\n * shape.getAncestors().each(function(node) {\n * console.log(node.getId());\n * })\n */\n getAncestors: function() {\n var parent = this.getParent(),\n ancestors = new Konva.Collection();\n\n while (parent) {\n ancestors.push(parent);\n parent = parent.getParent();\n }\n\n return ancestors;\n },\n /**\n * get attrs object literal\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Object}\n */\n getAttrs: function() {\n return this.attrs || {};\n },\n /**\n * set multiple attrs at once using an object literal\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} config object containing key value pairs\n * @returns {Konva.Node}\n * @example\n * node.setAttrs({\n * x: 5,\n * fill: 'red'\n * });\n */\n setAttrs: function(config) {\n var key, method;\n\n if (!config) {\n return this;\n }\n for (key in config) {\n if (key === CHILDREN) {\n continue;\n }\n method = SET + Konva.Util._capitalize(key);\n // use setter if available\n if (Konva.Util._isFunction(this[method])) {\n this[method](config[key]);\n } else {\n // otherwise set directly\n this._setAttr(key, config[key]);\n }\n }\n return this;\n },\n /**\n * determine if node is listening for events by taking into account ancestors.\n *\n * Parent | Self | isListening\n * listening | listening |\n * ----------+-----------+------------\n * T | T | T\n * T | F | F\n * F | T | T\n * F | F | F\n * ----------+-----------+------------\n * T | I | T\n * F | I | F\n * I | I | T\n *\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n isListening: function() {\n return this._getCache(LISTENING, this._isListening);\n },\n _isListening: function() {\n var listening = this.getListening(),\n parent = this.getParent();\n\n // the following conditions are a simplification of the truth table above.\n // please modify carefully\n if (listening === 'inherit') {\n if (parent) {\n return parent.isListening();\n } else {\n return true;\n }\n } else {\n return listening;\n }\n },\n /**\n * determine if node is visible by taking into account ancestors.\n *\n * Parent | Self | isVisible\n * visible | visible |\n * ----------+-----------+------------\n * T | T | T\n * T | F | F\n * F | T | T\n * F | F | F\n * ----------+-----------+------------\n * T | I | T\n * F | I | F\n * I | I | T\n\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n isVisible: function() {\n return this._getCache(VISIBLE, this._isVisible);\n },\n _isVisible: function(relativeTo) {\n var visible = this.getVisible(),\n parent = this.getParent();\n\n if (relativeTo === parent && visible === 'inherit') {\n return true;\n } else if (relativeTo === parent) {\n return visible;\n }\n // the following conditions are a simplification of the truth table above.\n // please modify carefully\n if (visible === 'inherit') {\n if (parent) {\n return parent._isVisible(relativeTo);\n } else {\n return true;\n }\n } else {\n return visible;\n }\n },\n /**\n * determine if listening is enabled by taking into account descendants. If self or any children\n * have _isListeningEnabled set to true, then self also has listening enabled.\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n shouldDrawHit: function() {\n var layer = this.getLayer();\n\n return (\n (!layer && this.isListening() && this.isVisible()) ||\n (layer &&\n layer.hitGraphEnabled() &&\n this.isListening() &&\n this.isVisible())\n );\n },\n /**\n * show node\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n */\n show: function() {\n this.setVisible(true);\n return this;\n },\n /**\n * hide node. Hidden nodes are no longer detectable\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n */\n hide: function() {\n this.setVisible(false);\n return this;\n },\n /**\n * get zIndex relative to the node's siblings who share the same parent\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Integer}\n */\n getZIndex: function() {\n return this.index || 0;\n },\n /**\n * get absolute z-index which takes into account sibling\n * and ancestor indices\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Integer}\n */\n getAbsoluteZIndex: function() {\n var depth = this.getDepth(),\n that = this,\n index = 0,\n nodes,\n len,\n n,\n child;\n\n function addChildren(children) {\n nodes = [];\n len = children.length;\n for (n = 0; n < len; n++) {\n child = children[n];\n index++;\n\n if (child.nodeType !== SHAPE) {\n nodes = nodes.concat(child.getChildren().toArray());\n }\n\n if (child._id === that._id) {\n n = len;\n }\n }\n\n if (nodes.length > 0 && nodes[0].getDepth() <= depth) {\n addChildren(nodes);\n }\n }\n if (that.nodeType !== UPPER_STAGE) {\n addChildren(that.getStage().getChildren());\n }\n\n return index;\n },\n /**\n * get node depth in node tree. Returns an integer.\n * e.g. Stage depth will always be 0. Layers will always be 1. Groups and Shapes will always\n * be >= 2\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Integer}\n */\n getDepth: function() {\n var depth = 0,\n parent = this.parent;\n\n while (parent) {\n depth++;\n parent = parent.parent;\n }\n return depth;\n },\n setPosition: function(pos) {\n this.setX(pos.x);\n this.setY(pos.y);\n return this;\n },\n getPosition: function() {\n return {\n x: this.getX(),\n y: this.getY()\n };\n },\n /**\n * get absolute position relative to the top left corner of the stage container div\n * or relative to passed node\n * @method\n * @param {Object} [top] optional parent node\n * @memberof Konva.Node.prototype\n * @returns {Object}\n */\n getAbsolutePosition: function(top) {\n var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(),\n absoluteTransform = new Konva.Transform(),\n offset = this.offset();\n\n // clone the matrix array\n absoluteTransform.m = absoluteMatrix.slice();\n absoluteTransform.translate(offset.x, offset.y);\n\n return absoluteTransform.getTranslation();\n },\n /**\n * set absolute position\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} pos\n * @param {Number} pos.x\n * @param {Number} pos.y\n * @returns {Konva.Node}\n */\n setAbsolutePosition: function(pos) {\n var origTrans = this._clearTransform(),\n it;\n\n // don't clear translation\n this.attrs.x = origTrans.x;\n this.attrs.y = origTrans.y;\n delete origTrans.x;\n delete origTrans.y;\n\n // unravel transform\n it = this.getAbsoluteTransform();\n\n it.invert();\n it.translate(pos.x, pos.y);\n pos = {\n x: this.attrs.x + it.getTranslation().x,\n y: this.attrs.y + it.getTranslation().y\n };\n\n this.setPosition({ x: pos.x, y: pos.y });\n this._setTransform(origTrans);\n\n return this;\n },\n _setTransform: function(trans) {\n var key;\n\n for (key in trans) {\n this.attrs[key] = trans[key];\n }\n\n this._clearCache(TRANSFORM);\n this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);\n },\n _clearTransform: function() {\n var trans = {\n x: this.getX(),\n y: this.getY(),\n rotation: this.getRotation(),\n scaleX: this.getScaleX(),\n scaleY: this.getScaleY(),\n offsetX: this.getOffsetX(),\n offsetY: this.getOffsetY(),\n skewX: this.getSkewX(),\n skewY: this.getSkewY()\n };\n\n this.attrs.x = 0;\n this.attrs.y = 0;\n this.attrs.rotation = 0;\n this.attrs.scaleX = 1;\n this.attrs.scaleY = 1;\n this.attrs.offsetX = 0;\n this.attrs.offsetY = 0;\n this.attrs.skewX = 0;\n this.attrs.skewY = 0;\n\n this._clearCache(TRANSFORM);\n this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);\n\n // return original transform\n return trans;\n },\n /**\n * move node by an amount relative to its current position\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} change\n * @param {Number} change.x\n * @param {Number} change.y\n * @returns {Konva.Node}\n * @example\n * // move node in x direction by 1px and y direction by 2px\n * node.move({\n * x: 1,\n * y: 2)\n * });\n */\n move: function(change) {\n var changeX = change.x,\n changeY = change.y,\n x = this.getX(),\n y = this.getY();\n\n if (changeX !== undefined) {\n x += changeX;\n }\n\n if (changeY !== undefined) {\n y += changeY;\n }\n\n this.setPosition({ x: x, y: y });\n return this;\n },\n _eachAncestorReverse: function(func, top) {\n var family = [],\n parent = this.getParent(),\n len,\n n;\n\n // if top node is defined, and this node is top node,\n // there's no need to build a family tree. just execute\n // func with this because it will be the only node\n if (top && top._id === this._id) {\n func(this);\n return;\n }\n\n family.unshift(this);\n\n while (parent && (!top || parent._id !== top._id)) {\n family.unshift(parent);\n parent = parent.parent;\n }\n\n len = family.length;\n for (n = 0; n < len; n++) {\n func(family[n]);\n }\n },\n /**\n * rotate node by an amount in degrees relative to its current rotation\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} theta\n * @returns {Konva.Node}\n */\n rotate: function(theta) {\n this.setRotation(this.getRotation() + theta);\n return this;\n },\n /**\n * move node to the top of its siblings\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n moveToTop: function() {\n if (!this.parent) {\n Konva.Util.warn('Node has no parent. moveToTop function is ignored.');\n return false;\n }\n var index = this.index;\n this.parent.children.splice(index, 1);\n this.parent.children.push(this);\n this.parent._setChildrenIndices();\n return true;\n },\n /**\n * move node up\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean} flag is moved or not\n */\n moveUp: function() {\n if (!this.parent) {\n Konva.Util.warn('Node has no parent. moveUp function is ignored.');\n return false;\n }\n var index = this.index,\n len = this.parent.getChildren().length;\n if (index < len - 1) {\n this.parent.children.splice(index, 1);\n this.parent.children.splice(index + 1, 0, this);\n this.parent._setChildrenIndices();\n return true;\n }\n return false;\n },\n /**\n * move node down\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n moveDown: function() {\n if (!this.parent) {\n Konva.Util.warn('Node has no parent. moveDown function is ignored.');\n return false;\n }\n var index = this.index;\n if (index > 0) {\n this.parent.children.splice(index, 1);\n this.parent.children.splice(index - 1, 0, this);\n this.parent._setChildrenIndices();\n return true;\n }\n return false;\n },\n /**\n * move node to the bottom of its siblings\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Boolean}\n */\n moveToBottom: function() {\n if (!this.parent) {\n Konva.Util.warn(\n 'Node has no parent. moveToBottom function is ignored.'\n );\n return false;\n }\n var index = this.index;\n if (index > 0) {\n this.parent.children.splice(index, 1);\n this.parent.children.unshift(this);\n this.parent._setChildrenIndices();\n return true;\n }\n return false;\n },\n /**\n * set zIndex relative to siblings\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} zIndex\n * @returns {Konva.Node}\n */\n setZIndex: function(zIndex) {\n if (!this.parent) {\n Konva.Util.warn('Node has no parent. zIndex parameter is ignored.');\n return false;\n }\n var index = this.index;\n this.parent.children.splice(index, 1);\n this.parent.children.splice(zIndex, 0, this);\n this.parent._setChildrenIndices();\n return this;\n },\n /**\n * get absolute opacity\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Number}\n */\n getAbsoluteOpacity: function() {\n return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);\n },\n _getAbsoluteOpacity: function() {\n var absOpacity = this.getOpacity();\n var parent = this.getParent();\n if (parent && !parent._isUnderCache) {\n absOpacity *= this.getParent().getAbsoluteOpacity();\n }\n return absOpacity;\n },\n /**\n * move node to another container\n * @method\n * @memberof Konva.Node.prototype\n * @param {Container} newContainer\n * @returns {Konva.Node}\n * @example\n * // move node from current layer into layer2\n * node.moveTo(layer2);\n */\n moveTo: function(newContainer) {\n // do nothing if new container is already parent\n if (this.getParent() !== newContainer) {\n // this.remove my be overrided by drag and drop\n // buy we need original\n (this.__originalRemove || this.remove).call(this);\n newContainer.add(this);\n }\n return this;\n },\n /**\n * convert Node into an object for serialization. Returns an object.\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Object}\n */\n toObject: function() {\n var obj = {},\n attrs = this.getAttrs(),\n key,\n val,\n getter,\n defaultValue;\n\n obj.attrs = {};\n\n for (key in attrs) {\n val = attrs[key];\n getter = typeof this[key] === 'function' && this[key];\n // remove attr value so that we can extract the default value from the getter\n delete attrs[key];\n defaultValue = getter ? getter.call(this) : null;\n // restore attr value\n attrs[key] = val;\n if (defaultValue !== val) {\n obj.attrs[key] = val;\n }\n }\n\n obj.className = this.getClassName();\n return Konva.Util._prepareToStringify(obj);\n },\n /**\n * convert Node into a JSON string. Returns a JSON string.\n * @method\n * @memberof Konva.Node.prototype\n * @returns {String}}\n */\n toJSON: function() {\n return JSON.stringify(this.toObject());\n },\n /**\n * get parent container\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n */\n getParent: function() {\n return this.parent;\n },\n /**\n * get all ancestros (parent then parent of the parent, etc) of the node\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} [selector] selector for search\n * @param {Boolean} [includeSelf] show we think that node is ancestro itself?\n * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)\n * @returns {Array} [ancestors]\n * @example\n * // get one of the parent group\n * var parentGroups = node.findAncestors('Group');\n */\n findAncestors: function(selector, includeSelf, stopNode) {\n var res = [];\n\n if (includeSelf && this._isMatch(selector)) {\n res.push(this);\n }\n var ancestor = this.parent;\n while (ancestor) {\n if (ancestor === stopNode) {\n return res;\n }\n if (ancestor._isMatch(selector)) {\n res.push(ancestor);\n }\n ancestor = ancestor.parent;\n }\n return res;\n },\n /**\n * get ancestor (parent or parent of the parent, etc) of the node that match passed selector\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} [selector] selector for search\n * @param {Boolean} [includeSelf] show we think that node is ancestro itself?\n * @param {Konva.Node} [stopNode] optional node where we need to stop searching (one of ancestors)\n * @returns {Konva.Node} ancestor\n * @example\n * // get one of the parent group\n * var group = node.findAncestors('.mygroup');\n */\n findAncestor: function(selector, includeSelf, stopNode) {\n return this.findAncestors(selector, includeSelf, stopNode)[0];\n },\n // is current node match passed selector?\n _isMatch: function(selector) {\n if (!selector) {\n return false;\n }\n var selectorArr = selector.replace(/ /g, '').split(','),\n len = selectorArr.length,\n n,\n sel;\n\n for (n = 0; n < len; n++) {\n sel = selectorArr[n];\n if (!Konva.Util.isValidSelector(sel)) {\n Konva.Util.warn(\n 'Selector \"' +\n sel +\n '\" is invalid. Allowed selectors examples are \"#foo\", \".bar\" or \"Group\".'\n );\n Konva.Util.warn(\n 'If you have a custom shape with such className, please change it to start with upper letter like \"Triangle\".'\n );\n Konva.Util.warn('Konva is awesome, right?');\n }\n // id selector\n if (sel.charAt(0) === '#') {\n if (this.id() === sel.slice(1)) {\n return true;\n }\n } else if (sel.charAt(0) === '.') {\n // name selector\n if (this.hasName(sel.slice(1))) {\n return true;\n }\n } else if (this._get(sel).length !== 0) {\n return true;\n }\n }\n return false;\n },\n /**\n * get layer ancestor\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Layer}\n */\n getLayer: function() {\n var parent = this.getParent();\n return parent ? parent.getLayer() : null;\n },\n /**\n * get stage ancestor\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Stage}\n */\n getStage: function() {\n return this._getCache(STAGE, this._getStage);\n },\n _getStage: function() {\n var parent = this.getParent();\n if (parent) {\n return parent.getStage();\n } else {\n return undefined;\n }\n },\n /**\n * fire event\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} eventType event type. can be a regular event, like click, mouseover, or mouseout, or it can be a custom event, like myCustomEvent\n * @param {Event} [evt] event object\n * @param {Boolean} [bubble] setting the value to false, or leaving it undefined, will result in the event\n * not bubbling. Setting the value to true will result in the event bubbling.\n * @returns {Konva.Node}\n * @example\n * // manually fire click event\n * node.fire('click');\n *\n * // fire custom event\n * node.fire('foo');\n *\n * // fire custom event with custom event object\n * node.fire('foo', {\n * bar: 10\n * });\n *\n * // fire click event that bubbles\n * node.fire('click', null, true);\n */\n fire: function(eventType, evt, bubble) {\n evt = evt || {};\n evt.target = evt.target || this;\n // bubble\n if (bubble) {\n this._fireAndBubble(eventType, evt);\n } else {\n // no bubble\n this._fire(eventType, evt);\n }\n return this;\n },\n /**\n * get absolute transform of the node which takes into\n * account its ancestor transforms\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Transform}\n */\n getAbsoluteTransform: function(top) {\n // if using an argument, we can't cache the result.\n if (top) {\n return this._getAbsoluteTransform(top);\n } else {\n // if no argument, we can cache the result\n return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);\n }\n },\n _getAbsoluteTransform: function(top) {\n var at = new Konva.Transform();\n\n // start with stage and traverse downwards to self\n this._eachAncestorReverse(function(node) {\n var transformsEnabled = node.transformsEnabled();\n\n if (transformsEnabled === 'all') {\n at.multiply(node.getTransform());\n } else if (transformsEnabled === 'position') {\n at.translate(\n node.getX() - node.getOffsetX(),\n node.getY() - node.getOffsetY()\n );\n }\n }, top);\n return at;\n },\n /**\n * get absolute scale of the node which takes into\n * account its ancestor scales\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Transform}\n */\n getAbsoluteScale: function(top) {\n // if using an argument, we can't cache the result.\n if (top) {\n return this._getAbsoluteScale(top);\n } else {\n // if no argument, we can cache the result\n return this._getCache(ABSOLUTE_SCALE, this._getAbsoluteScale);\n }\n },\n _getAbsoluteScale: function(top) {\n // this is special logic for caching with some shapes with shadow\n var parent = this;\n while (parent) {\n if (parent._isUnderCache) {\n top = parent;\n }\n parent = parent.getParent();\n }\n\n var scaleX = 1,\n scaleY = 1;\n\n // start with stage and traverse downwards to self\n this._eachAncestorReverse(function(node) {\n scaleX *= node.scaleX();\n scaleY *= node.scaleY();\n }, top);\n return {\n x: scaleX,\n y: scaleY\n };\n },\n /**\n * get transform of the node\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Transform}\n */\n getTransform: function() {\n return this._getCache(TRANSFORM, this._getTransform);\n },\n _getTransform: function() {\n var m = new Konva.Transform(),\n x = this.getX(),\n y = this.getY(),\n rotation = Konva.getAngle(this.getRotation()),\n scaleX = this.getScaleX(),\n scaleY = this.getScaleY(),\n skewX = this.getSkewX(),\n skewY = this.getSkewY(),\n offsetX = this.getOffsetX(),\n offsetY = this.getOffsetY();\n\n if (x !== 0 || y !== 0) {\n m.translate(x, y);\n }\n if (rotation !== 0) {\n m.rotate(rotation);\n }\n if (skewX !== 0 || skewY !== 0) {\n m.skew(skewX, skewY);\n }\n if (scaleX !== 1 || scaleY !== 1) {\n m.scale(scaleX, scaleY);\n }\n if (offsetX !== 0 || offsetY !== 0) {\n m.translate(-1 * offsetX, -1 * offsetY);\n }\n\n return m;\n },\n /**\n * clone node. Returns a new Node instance with identical attributes. You can also override\n * the node properties with an object literal, enabling you to use an existing node as a template\n * for another node\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} obj override attrs\n * @returns {Konva.Node}\n * @example\n * // simple clone\n * var clone = node.clone();\n *\n * // clone a node and override the x position\n * var clone = rect.clone({\n * x: 5\n * });\n */\n clone: function(obj) {\n // instantiate new node\n var attrs = Konva.Util.cloneObject(this.attrs),\n key,\n allListeners,\n len,\n n,\n listener;\n // filter black attrs\n for (var i in CLONE_BLACK_LIST) {\n var blockAttr = CLONE_BLACK_LIST[i];\n delete attrs[blockAttr];\n }\n // apply attr overrides\n for (key in obj) {\n attrs[key] = obj[key];\n }\n\n var node = new this.constructor(attrs);\n // copy over listeners\n for (key in this.eventListeners) {\n allListeners = this.eventListeners[key];\n len = allListeners.length;\n for (n = 0; n < len; n++) {\n listener = allListeners[n];\n /*\n * don't include konva namespaced listeners because\n * these are generated by the constructors\n */\n if (listener.name.indexOf(KONVA) < 0) {\n // if listeners array doesn't exist, then create it\n if (!node.eventListeners[key]) {\n node.eventListeners[key] = [];\n }\n node.eventListeners[key].push(listener);\n }\n }\n }\n return node;\n },\n _toKonvaCanvas: function(config) {\n config = config || {};\n\n var box = this.getClientRect();\n\n var stage = this.getStage(),\n x = config.x !== undefined ? config.x : box.x,\n y = config.y !== undefined ? config.y : box.y,\n pixelRatio = config.pixelRatio || 1,\n canvas = new Konva.SceneCanvas({\n width: config.width || box.width || (stage ? stage.getWidth() : 0),\n height:\n config.height || box.height || (stage ? stage.getHeight() : 0),\n pixelRatio: pixelRatio\n }),\n context = canvas.getContext();\n\n context.save();\n\n if (x || y) {\n context.translate(-1 * x, -1 * y);\n }\n\n this.drawScene(canvas);\n context.restore();\n\n return canvas;\n },\n /**\n * converts node into an canvas element.\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} config\n * @param {Function} config.callback function executed when the composite has completed\n * @param {Number} [config.x] x position of canvas section\n * @param {Number} [config.y] y position of canvas section\n * @param {Number} [config.width] width of canvas section\n * @param {Number} [config.height] height of canvas section\n * @paremt {Number} [config.pixelRatio] pixelRatio of ouput image. Default is 1.\n * @example\n * var canvas = node.toCanvas();\n */\n toCanvas: function(config) {\n return this._toKonvaCanvas(config)._canvas;\n },\n /**\n * Creates a composite data URL (base64 string). If MIME type is not\n * specified, then \"image/png\" will result. For \"image/jpeg\", specify a quality\n * level as quality (range 0.0 - 1.0)\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} config\n * @param {String} [config.mimeType] can be \"image/png\" or \"image/jpeg\".\n * \"image/png\" is the default\n * @param {Number} [config.x] x position of canvas section\n * @param {Number} [config.y] y position of canvas section\n * @param {Number} [config.width] width of canvas section\n * @param {Number} [config.height] height of canvas section\n * @param {Number} [config.quality] jpeg quality. If using an \"image/jpeg\" mimeType,\n * you can specify the quality from 0 to 1, where 0 is very poor quality and 1\n * is very high quality\n * @param {Number} [config.pixelRatio] pixelRatio of output image url. Default is 1\n * @returns {String}\n */\n toDataURL: function(config) {\n config = config || {};\n var mimeType = config.mimeType || null,\n quality = config.quality || null;\n var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);\n if (config.callback) {\n config.callback(url);\n }\n return url;\n },\n /**\n * converts node into an image. Since the toImage\n * method is asynchronous, a callback is required. toImage is most commonly used\n * to cache complex drawings as an image so that they don't have to constantly be redrawn\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} config\n * @param {Function} config.callback function executed when the composite has completed\n * @param {String} [config.mimeType] can be \"image/png\" or \"image/jpeg\".\n * \"image/png\" is the default\n * @param {Number} [config.x] x position of canvas section\n * @param {Number} [config.y] y position of canvas section\n * @param {Number} [config.width] width of canvas section\n * @param {Number} [config.height] height of canvas section\n * @param {Number} [config.quality] jpeg quality. If using an \"image/jpeg\" mimeType,\n * you can specify the quality from 0 to 1, where 0 is very poor quality and 1\n * is very high quality\n * @paremt {Number} [config.pixelRatio] pixelRatio of ouput image. Default is 1.\n * @example\n * var image = node.toImage({\n * callback: function(img) {\n * // do stuff with img\n * }\n * });\n */\n toImage: function(config) {\n if (!config || !config.callback) {\n throw 'callback required for toImage method config argument';\n }\n var callback = config.callback;\n delete config.callback;\n Konva.Util._getImage(this.toDataURL(config), function(img) {\n callback(img);\n });\n },\n setSize: function(size) {\n this.setWidth(size.width);\n this.setHeight(size.height);\n return this;\n },\n getSize: function() {\n return {\n width: this.getWidth(),\n height: this.getHeight()\n };\n },\n getWidth: function() {\n return this.attrs.width || 0;\n },\n getHeight: function() {\n return this.attrs.height || 0;\n },\n /**\n * get class name, which may return Stage, Layer, Group, or shape class names like Rect, Circle, Text, etc.\n * @method\n * @memberof Konva.Node.prototype\n * @returns {String}\n */\n getClassName: function() {\n return this.className || this.nodeType;\n },\n /**\n * get the node type, which may return Stage, Layer, Group, or Node\n * @method\n * @memberof Konva.Node.prototype\n * @returns {String}\n */\n getType: function() {\n return this.nodeType;\n },\n getDragDistance: function() {\n // compare with undefined because we need to track 0 value\n if (this.attrs.dragDistance !== undefined) {\n return this.attrs.dragDistance;\n } else if (this.parent) {\n return this.parent.getDragDistance();\n } else {\n return Konva.dragDistance;\n }\n },\n _get: function(selector) {\n return this.className === selector || this.nodeType === selector\n ? [this]\n : [];\n },\n _off: function(type, name, callback) {\n var evtListeners = this.eventListeners[type],\n i,\n evtName,\n handler;\n\n for (i = 0; i < evtListeners.length; i++) {\n evtName = evtListeners[i].name;\n handler = evtListeners[i].handler;\n\n // the following two conditions must be true in order to remove a handler:\n // 1) the current event name cannot be konva unless the event name is konva\n // this enables developers to force remove a konva specific listener for whatever reason\n // 2) an event name is not specified, or if one is specified, it matches the current event name\n if (\n (evtName !== 'konva' || name === 'konva') &&\n (!name || evtName === name) &&\n (!callback || callback === handler)\n ) {\n evtListeners.splice(i, 1);\n if (evtListeners.length === 0) {\n delete this.eventListeners[type];\n break;\n }\n i--;\n }\n }\n },\n _fireChangeEvent: function(attr, oldVal, newVal) {\n this._fire(attr + CHANGE, {\n oldVal: oldVal,\n newVal: newVal\n });\n },\n setId: function(id) {\n var oldId = this.getId();\n\n Konva._removeId(oldId);\n Konva._addId(this, id);\n this._setAttr(ID, id);\n return this;\n },\n setName: function(name) {\n var oldNames = (this.getName() || '').split(/\\s/g);\n var newNames = (name || '').split(/\\s/g);\n var subname, i;\n // remove all subnames\n for (i = 0; i < oldNames.length; i++) {\n subname = oldNames[i];\n if (newNames.indexOf(subname) === -1 && subname) {\n Konva._removeName(subname, this._id);\n }\n }\n\n // add new names\n for (i = 0; i < newNames.length; i++) {\n subname = newNames[i];\n if (oldNames.indexOf(subname) === -1 && subname) {\n Konva._addName(this, subname);\n }\n }\n\n this._setAttr(NAME, name);\n return this;\n },\n // naming methods\n /**\n * add name to node\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} name\n * @returns {Konva.Node}\n * @example\n * node.name('red');\n * node.addName('selected');\n * node.name(); // return 'red selected'\n */\n addName: function(name) {\n if (!this.hasName(name)) {\n var oldName = this.name();\n var newName = oldName ? oldName + ' ' + name : name;\n this.setName(newName);\n }\n return this;\n },\n /**\n * check is node has name\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} name\n * @returns {Boolean}\n * @example\n * node.name('red');\n * node.hasName('red'); // return true\n * node.hasName('selected'); // return false\n */\n hasName: function(name) {\n var names = (this.name() || '').split(/\\s/g);\n return names.indexOf(name) !== -1;\n },\n /**\n * remove name from node\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} name\n * @returns {Konva.Node}\n * @example\n * node.name('red selected');\n * node.removeName('selected');\n * node.hasName('selected'); // return false\n * node.name(); // return 'red'\n */\n removeName: function(name) {\n var names = (this.name() || '').split(/\\s/g);\n var index = names.indexOf(name);\n if (index !== -1) {\n names.splice(index, 1);\n this.setName(names.join(' '));\n }\n return this;\n },\n /**\n * set attr\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} attr\n * @param {*} val\n * @returns {Konva.Node}\n * @example\n * node.setAttr('x', 5);\n */\n setAttr: function(attr, val) {\n var method = SET + Konva.Util._capitalize(attr),\n func = this[method];\n\n if (Konva.Util._isFunction(func)) {\n func.call(this, val);\n } else {\n // otherwise set directly\n this._setAttr(attr, val);\n }\n return this;\n },\n _setAttr: function(key, val) {\n var oldVal;\n oldVal = this.attrs[key];\n var same = oldVal === val;\n if (same && !Konva.Util.isObject(val)) {\n return;\n }\n if (val === undefined || val === null) {\n delete this.attrs[key];\n } else {\n this.attrs[key] = val;\n }\n this._fireChangeEvent(key, oldVal, val);\n },\n _setComponentAttr: function(key, component, val) {\n var oldVal;\n if (val !== undefined) {\n oldVal = this.attrs[key];\n\n if (!oldVal) {\n // set value to default value using getAttr\n this.attrs[key] = this.getAttr(key);\n }\n\n this.attrs[key][component] = val;\n this._fireChangeEvent(key, oldVal, val);\n }\n },\n _fireAndBubble: function(eventType, evt, compareShape) {\n var okayToRun = true;\n\n if (evt && this.nodeType === SHAPE) {\n evt.target = this;\n }\n\n if (\n eventType === MOUSEENTER &&\n compareShape &&\n (this._id === compareShape._id ||\n (this.isAncestorOf && this.isAncestorOf(compareShape)))\n ) {\n okayToRun = false;\n } else if (\n eventType === MOUSELEAVE &&\n compareShape &&\n (this._id === compareShape._id ||\n (this.isAncestorOf && this.isAncestorOf(compareShape)))\n ) {\n okayToRun = false;\n }\n if (okayToRun) {\n this._fire(eventType, evt);\n\n // simulate event bubbling\n var stopBubble =\n (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&\n (compareShape &&\n compareShape.isAncestorOf &&\n compareShape.isAncestorOf(this) &&\n !compareShape.isAncestorOf(this.parent));\n if (\n ((evt && !evt.cancelBubble) || !evt) &&\n this.parent &&\n this.parent.isListening() &&\n !stopBubble\n ) {\n if (compareShape && compareShape.parent) {\n this._fireAndBubble.call(\n this.parent,\n eventType,\n evt,\n compareShape.parent\n );\n } else {\n this._fireAndBubble.call(this.parent, eventType, evt);\n }\n }\n }\n },\n _fire: function(eventType, evt) {\n var events = this.eventListeners[eventType],\n i;\n\n evt = evt || {};\n evt.currentTarget = this;\n evt.type = eventType;\n\n if (events) {\n for (i = 0; i < events.length; i++) {\n events[i].handler.call(this, evt);\n }\n }\n },\n /**\n * draw both scene and hit graphs. If the node being drawn is the stage, all of the layers will be cleared and redrawn\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Konva.Node}\n */\n draw: function() {\n this.drawScene();\n this.drawHit();\n return this;\n }\n });\n\n /**\n * create node with JSON string or an Object. De-serializtion does not generate custom\n * shape drawing functions, images, or event handlers (this would make the\n * serialized object huge). If your app uses custom shapes, images, and\n * event handlers (it probably does), then you need to select the appropriate\n * shapes after loading the stage and set these properties via on(), setSceneFunc(),\n * and setImage() methods\n * @method\n * @memberof Konva.Node\n * @param {String|Object} json string or object\n * @param {Element} [container] optional container dom element used only if you're\n * creating a stage node\n */\n Konva.Node.create = function(data, container) {\n if (Konva.Util._isString(data)) {\n data = JSON.parse(data);\n }\n return this._createNode(data, container);\n };\n Konva.Node._createNode = function(obj, container) {\n var className = Konva.Node.prototype.getClassName.call(obj),\n children = obj.children,\n no,\n len,\n n;\n\n // if container was passed in, add it to attrs\n if (container) {\n obj.attrs.container = container;\n }\n\n no = new Konva[className](obj.attrs);\n if (children) {\n len = children.length;\n for (n = 0; n < len; n++) {\n no.add(this._createNode(children[n]));\n }\n }\n\n return no;\n };\n\n // =========================== add getters setters ===========================\n\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'position');\n /**\n * get/set node position relative to parent\n * @name position\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} pos\n * @param {Number} pos.x\n * @param {Number} pos.y\n * @returns {Object}\n * @example\n * // get position\n * var position = node.position();\n *\n * // set position\n * node.position({\n * x: 5\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'x',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set x position\n * @name x\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} x\n * @returns {Object}\n * @example\n * // get x\n * var x = node.x();\n *\n * // set x\n * node.x(5);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'y',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set y position\n * @name y\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} y\n * @returns {Integer}\n * @example\n * // get y\n * var y = node.y();\n *\n * // set y\n * node.y(5);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'globalCompositeOperation',\n 'source-over',\n Konva.Validators.getStringValidator()\n );\n\n /**\n * get/set globalCompositeOperation of a shape\n * @name globalCompositeOperation\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} type\n * @returns {String}\n * @example\n * // get globalCompositeOperation\n * var globalCompositeOperation = shape.globalCompositeOperation();\n *\n * // set globalCompositeOperation\n * shape.globalCompositeOperation('source-in');\n */\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'opacity',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set opacity. Opacity values range from 0 to 1.\n * A node with an opacity of 0 is fully transparent, and a node\n * with an opacity of 1 is fully opaque\n * @name opacity\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} opacity\n * @returns {Number}\n * @example\n * // get opacity\n * var opacity = node.opacity();\n *\n * // set opacity\n * node.opacity(0.5);\n */\n\n Konva.Factory.addGetter(Konva.Node, 'name');\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'name');\n\n /**\n * get/set name\n * @name name\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} name\n * @returns {String}\n * @example\n * // get name\n * var name = node.name();\n *\n * // set name\n * node.name('foo');\n *\n * // also node may have multiple names (as css classes)\n * node.name('foo bar');\n */\n\n Konva.Factory.addGetter(Konva.Node, 'id');\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'id');\n\n /**\n * get/set id. Id is global for whole page.\n * @name id\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} id\n * @returns {String}\n * @example\n * // get id\n * var name = node.id();\n *\n * // set id\n * node.id('foo');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'rotation',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set rotation in degrees\n * @name rotation\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} rotation\n * @returns {Number}\n * @example\n * // get rotation in degrees\n * var rotation = node.rotation();\n *\n * // set rotation in degrees\n * node.rotation(45);\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Node, 'scale', ['x', 'y']);\n\n /**\n * get/set scale\n * @name scale\n * @param {Object} scale\n * @param {Number} scale.x\n * @param {Number} scale.y\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Object}\n * @example\n * // get scale\n * var scale = node.scale();\n *\n * // set scale\n * shape.scale({\n * x: 2\n * y: 3\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'scaleX',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set scale x\n * @name scaleX\n * @param {Number} x\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Number}\n * @example\n * // get scale x\n * var scaleX = node.scaleX();\n *\n * // set scale x\n * node.scaleX(2);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'scaleY',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set scale y\n * @name scaleY\n * @param {Number} y\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Number}\n * @example\n * // get scale y\n * var scaleY = node.scaleY();\n *\n * // set scale y\n * node.scaleY(2);\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Node, 'skew', ['x', 'y']);\n\n /**\n * get/set skew\n * @name skew\n * @param {Object} skew\n * @param {Number} skew.x\n * @param {Number} skew.y\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Object}\n * @example\n * // get skew\n * var skew = node.skew();\n *\n * // set skew\n * node.skew({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'skewX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set skew x\n * @name skewX\n * @param {Number} x\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Number}\n * @example\n * // get skew x\n * var skewX = node.skewX();\n *\n * // set skew x\n * node.skewX(3);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'skewY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set skew y\n * @name skewY\n * @param {Number} y\n * @method\n * @memberof Konva.Node.prototype\n * @returns {Number}\n * @example\n * // get skew y\n * var skewY = node.skewY();\n *\n * // set skew y\n * node.skewY(3);\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Node, 'offset', ['x', 'y']);\n\n /**\n * get/set offset. Offsets the default position and rotation point\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} offset\n * @param {Number} offset.x\n * @param {Number} offset.y\n * @returns {Object}\n * @example\n * // get offset\n * var offset = node.offset();\n *\n * // set offset\n * node.offset({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'offsetX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set offset x\n * @name offsetX\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get offset x\n * var offsetX = node.offsetX();\n *\n * // set offset x\n * node.offsetX(3);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'offsetY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set offset y\n * @name offsetY\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get offset y\n * var offsetY = node.offsetY();\n *\n * // set offset y\n * node.offsetY(3);\n */\n\n Konva.Factory.addSetter(\n Konva.Node,\n 'dragDistance',\n Konva.Validators.getNumberValidator()\n );\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'dragDistance');\n\n /**\n * get/set drag distance\n * @name dragDistance\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} distance\n * @returns {Number}\n * @example\n * // get drag distance\n * var dragDistance = node.dragDistance();\n *\n * // set distance\n * // node starts dragging only if pointer moved more then 3 pixels\n * node.dragDistance(3);\n * // or set globally\n * Konva.dragDistance = 3;\n */\n\n Konva.Factory.addSetter(\n Konva.Node,\n 'width',\n Konva.Validators.getNumberValidator()\n );\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'width');\n /**\n * get/set width\n * @name width\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} width\n * @returns {Number}\n * @example\n * // get width\n * var width = node.width();\n *\n * // set width\n * node.width(100);\n */\n\n Konva.Factory.addSetter(\n Konva.Node,\n 'height',\n Konva.Validators.getNumberValidator()\n );\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'height');\n /**\n * get/set height\n * @name height\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} height\n * @returns {Number}\n * @example\n * // get height\n * var height = node.height();\n *\n * // set height\n * node.height(100);\n */\n\n Konva.Factory.addGetterSetter(Konva.Node, 'listening', 'inherit', function(\n val\n ) {\n var isValid = val === true || val === false || val === 'inherit';\n if (!isValid) {\n Konva.Util.warn(\n val +\n ' is a not valid value for \"listening\" attribute. The value may be true, false or \"inherit\".'\n );\n }\n return val;\n });\n /**\n * get/set listenig attr. If you need to determine if a node is listening or not\n * by taking into account its parents, use the isListening() method\n * @name listening\n * @method\n * @memberof Konva.Node.prototype\n * @param {Boolean|String} listening Can be \"inherit\", true, or false. The default is \"inherit\".\n * @returns {Boolean|String}\n * @example\n * // get listening attr\n * var listening = node.listening();\n *\n * // stop listening for events\n * node.listening(false);\n *\n * // listen for events\n * node.listening(true);\n *\n * // listen to events according to the parent\n * node.listening('inherit');\n */\n\n /**\n * get/set preventDefault\n * By default all shapes will prevent default behaviour\n * of a browser on a pointer move or tap.\n * that will prevent native scrolling when you are trying to drag&drop a node\n * but sometimes you may need to enable default actions\n * in that case you can set the property to false\n * @name preventDefault\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} preventDefault\n * @returns {Number}\n * @example\n * // get preventDefault\n * var shouldPrevent = shape.preventDefault();\n *\n * // set preventDefault\n * shape.preventDefault(false);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'preventDefault',\n true,\n Konva.Validators.getBooleanValidator()\n );\n\n Konva.Factory.addGetterSetter(Konva.Node, 'filters', null, function(val) {\n this._filterUpToDate = false;\n return val;\n });\n /**\n * get/set filters. Filters are applied to cached canvases\n * @name filters\n * @method\n * @memberof Konva.Node.prototype\n * @param {Array} filters array of filters\n * @returns {Array}\n * @example\n * // get filters\n * var filters = node.filters();\n *\n * // set a single filter\n * node.cache();\n * node.filters([Konva.Filters.Blur]);\n *\n * // set multiple filters\n * node.cache();\n * node.filters([\n * Konva.Filters.Blur,\n * Konva.Filters.Sepia,\n * Konva.Filters.Invert\n * ]);\n */\n\n Konva.Factory.addGetterSetter(Konva.Node, 'visible', 'inherit', function(\n val\n ) {\n var isValid = val === true || val === false || val === 'inherit';\n if (!isValid) {\n Konva.Util.warn(\n val +\n ' is a not valid value for \"visible\" attribute. The value may be true, false or \"inherit\".'\n );\n }\n return val;\n });\n /**\n * get/set visible attr. Can be \"inherit\", true, or false. The default is \"inherit\".\n * If you need to determine if a node is visible or not\n * by taking into account its parents, use the isVisible() method\n * @name visible\n * @method\n * @memberof Konva.Node.prototype\n * @param {Boolean|String} visible\n * @returns {Boolean|String}\n * @example\n * // get visible attr\n * var visible = node.visible();\n *\n * // make invisible\n * node.visible(false);\n *\n * // make visible\n * node.visible(true);\n *\n * // make visible according to the parent\n * node.visible('inherit');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'transformsEnabled',\n 'all',\n Konva.Validators.getStringValidator()\n );\n\n /**\n * get/set transforms that are enabled. Can be \"all\", \"none\", or \"position\". The default\n * is \"all\"\n * @name transformsEnabled\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} enabled\n * @returns {String}\n * @example\n * // enable position transform only to improve draw performance\n * node.transformsEnabled('position');\n *\n * // enable all transforms\n * node.transformsEnabled('all');\n */\n\n /**\n * get/set node size\n * @name size\n * @method\n * @memberof Konva.Node.prototype\n * @param {Object} size\n * @param {Number} size.width\n * @param {Number} size.height\n * @returns {Object}\n * @example\n * // get node size\n * var size = node.size();\n * var x = size.x;\n * var y = size.y;\n *\n * // set size\n * node.size({\n * width: 100,\n * height: 200\n * });\n */\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'size');\n\n Konva.Factory.backCompat(Konva.Node, {\n rotateDeg: 'rotate',\n setRotationDeg: 'setRotation',\n getRotationDeg: 'getRotation'\n });\n\n Konva.Collection.mapMethods(Konva.Node);\n})(Konva);\n\n(function() {\n 'use strict';\n /**\n * Grayscale Filter\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Grayscale]);\n */\n Konva.Filters.Grayscale = function(imageData) {\n var data = imageData.data,\n len = data.length,\n i,\n brightness;\n\n for (i = 0; i < len; i += 4) {\n brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];\n // red\n data[i] = brightness;\n // green\n data[i + 1] = brightness;\n // blue\n data[i + 2] = brightness;\n }\n };\n})();\n\n(function(Konva) {\n 'use strict';\n /**\n * Brighten Filter.\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Brighten]);\n * node.brightness(0.8);\n */\n Konva.Filters.Brighten = function(imageData) {\n var brightness = this.brightness() * 255,\n data = imageData.data,\n len = data.length,\n i;\n\n for (i = 0; i < len; i += 4) {\n // red\n data[i] += brightness;\n // green\n data[i + 1] += brightness;\n // blue\n data[i + 2] += brightness;\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'brightness',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set filter brightness. The brightness is a number between -1 and 1. Positive values\n * brighten the pixels and negative values darken them. Use with {@link Konva.Filters.Brighten} filter.\n * @name brightness\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} brightness value between -1 and 1\n * @returns {Number}\n */\n})(Konva);\n\n(function() {\n 'use strict';\n /**\n * Invert Filter\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Invert]);\n */\n Konva.Filters.Invert = function(imageData) {\n var data = imageData.data,\n len = data.length,\n i;\n\n for (i = 0; i < len; i += 4) {\n // red\n data[i] = 255 - data[i];\n // green\n data[i + 1] = 255 - data[i + 1];\n // blue\n data[i + 2] = 255 - data[i + 2];\n }\n };\n})();\n\n/*\n the Gauss filter\n master repo: https://github.com/pavelpower/kineticjsGaussFilter\n*/\n(function(Konva) {\n 'use strict';\n /*\n\n StackBlur - a fast almost Gaussian Blur For Canvas\n\n Version: 0.5\n Author: Mario Klingemann\n Contact: mario@quasimondo.com\n Website: http://www.quasimondo.com/StackBlurForCanvas\n Twitter: @quasimondo\n\n In case you find this class useful - especially in commercial projects -\n I am not totally unhappy for a small donation to my PayPal account\n mario@quasimondo.de\n\n Or support me on flattr:\n https://flattr.com/thing/72791/StackBlur-a-fast-almost-Gaussian-Blur-Effect-for-CanvasJavascript\n\n Copyright (c) 2010 Mario Klingemann\n\n Permission is hereby granted, free of charge, to any person\n obtaining a copy of this software and associated documentation\n files (the \"Software\"), to deal in the Software without\n restriction, including without limitation the rights to use,\n copy, modify, merge, publish, distribute, sublicense, and/or sell\n copies of the Software, and to permit persons to whom the\n Software is furnished to do so, subject to the following\n conditions:\n\n The above copyright notice and this permission notice shall be\n included in all copies or substantial portions of the Software.\n\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES\n OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT\n HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,\n WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING\n FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n OTHER DEALINGS IN THE SOFTWARE.\n */\n\n function BlurStack() {\n this.r = 0;\n this.g = 0;\n this.b = 0;\n this.a = 0;\n this.next = null;\n }\n\n var mul_table = [\n 512,\n 512,\n 456,\n 512,\n 328,\n 456,\n 335,\n 512,\n 405,\n 328,\n 271,\n 456,\n 388,\n 335,\n 292,\n 512,\n 454,\n 405,\n 364,\n 328,\n 298,\n 271,\n 496,\n 456,\n 420,\n 388,\n 360,\n 335,\n 312,\n 292,\n 273,\n 512,\n 482,\n 454,\n 428,\n 405,\n 383,\n 364,\n 345,\n 328,\n 312,\n 298,\n 284,\n 271,\n 259,\n 496,\n 475,\n 456,\n 437,\n 420,\n 404,\n 388,\n 374,\n 360,\n 347,\n 335,\n 323,\n 312,\n 302,\n 292,\n 282,\n 273,\n 265,\n 512,\n 497,\n 482,\n 468,\n 454,\n 441,\n 428,\n 417,\n 405,\n 394,\n 383,\n 373,\n 364,\n 354,\n 345,\n 337,\n 328,\n 320,\n 312,\n 305,\n 298,\n 291,\n 284,\n 278,\n 271,\n 265,\n 259,\n 507,\n 496,\n 485,\n 475,\n 465,\n 456,\n 446,\n 437,\n 428,\n 420,\n 412,\n 404,\n 396,\n 388,\n 381,\n 374,\n 367,\n 360,\n 354,\n 347,\n 341,\n 335,\n 329,\n 323,\n 318,\n 312,\n 307,\n 302,\n 297,\n 292,\n 287,\n 282,\n 278,\n 273,\n 269,\n 265,\n 261,\n 512,\n 505,\n 497,\n 489,\n 482,\n 475,\n 468,\n 461,\n 454,\n 447,\n 441,\n 435,\n 428,\n 422,\n 417,\n 411,\n 405,\n 399,\n 394,\n 389,\n 383,\n 378,\n 373,\n 368,\n 364,\n 359,\n 354,\n 350,\n 345,\n 341,\n 337,\n 332,\n 328,\n 324,\n 320,\n 316,\n 312,\n 309,\n 305,\n 301,\n 298,\n 294,\n 291,\n 287,\n 284,\n 281,\n 278,\n 274,\n 271,\n 268,\n 265,\n 262,\n 259,\n 257,\n 507,\n 501,\n 496,\n 491,\n 485,\n 480,\n 475,\n 470,\n 465,\n 460,\n 456,\n 451,\n 446,\n 442,\n 437,\n 433,\n 428,\n 424,\n 420,\n 416,\n 412,\n 408,\n 404,\n 400,\n 396,\n 392,\n 388,\n 385,\n 381,\n 377,\n 374,\n 370,\n 367,\n 363,\n 360,\n 357,\n 354,\n 350,\n 347,\n 344,\n 341,\n 338,\n 335,\n 332,\n 329,\n 326,\n 323,\n 320,\n 318,\n 315,\n 312,\n 310,\n 307,\n 304,\n 302,\n 299,\n 297,\n 294,\n 292,\n 289,\n 287,\n 285,\n 282,\n 280,\n 278,\n 275,\n 273,\n 271,\n 269,\n 267,\n 265,\n 263,\n 261,\n 259\n ];\n\n var shg_table = [\n 9,\n 11,\n 12,\n 13,\n 13,\n 14,\n 14,\n 15,\n 15,\n 15,\n 15,\n 16,\n 16,\n 16,\n 16,\n 17,\n 17,\n 17,\n 17,\n 17,\n 17,\n 17,\n 18,\n 18,\n 18,\n 18,\n 18,\n 18,\n 18,\n 18,\n 18,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 19,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 20,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 21,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 22,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 23,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24,\n 24\n ];\n\n function filterGaussBlurRGBA(imageData, radius) {\n var pixels = imageData.data,\n width = imageData.width,\n height = imageData.height;\n\n var x,\n y,\n i,\n p,\n yp,\n yi,\n yw,\n r_sum,\n g_sum,\n b_sum,\n a_sum,\n r_out_sum,\n g_out_sum,\n b_out_sum,\n a_out_sum,\n r_in_sum,\n g_in_sum,\n b_in_sum,\n a_in_sum,\n pr,\n pg,\n pb,\n pa,\n rbs;\n\n var div = radius + radius + 1,\n widthMinus1 = width - 1,\n heightMinus1 = height - 1,\n radiusPlus1 = radius + 1,\n sumFactor = radiusPlus1 * (radiusPlus1 + 1) / 2,\n stackStart = new BlurStack(),\n stackEnd = null,\n stack = stackStart,\n stackIn = null,\n stackOut = null,\n mul_sum = mul_table[radius],\n shg_sum = shg_table[radius];\n\n for (i = 1; i < div; i++) {\n stack = stack.next = new BlurStack();\n if (i === radiusPlus1) {\n stackEnd = stack;\n }\n }\n\n stack.next = stackStart;\n\n yw = yi = 0;\n\n for (y = 0; y < height; y++) {\n r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;\n\n r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);\n\n r_sum += sumFactor * pr;\n g_sum += sumFactor * pg;\n b_sum += sumFactor * pb;\n a_sum += sumFactor * pa;\n\n stack = stackStart;\n\n for (i = 0; i < radiusPlus1; i++) {\n stack.r = pr;\n stack.g = pg;\n stack.b = pb;\n stack.a = pa;\n stack = stack.next;\n }\n\n for (i = 1; i < radiusPlus1; i++) {\n p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);\n r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);\n g_sum += (stack.g = pg = pixels[p + 1]) * rbs;\n b_sum += (stack.b = pb = pixels[p + 2]) * rbs;\n a_sum += (stack.a = pa = pixels[p + 3]) * rbs;\n\n r_in_sum += pr;\n g_in_sum += pg;\n b_in_sum += pb;\n a_in_sum += pa;\n\n stack = stack.next;\n }\n\n stackIn = stackStart;\n stackOut = stackEnd;\n for (x = 0; x < width; x++) {\n pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;\n if (pa !== 0) {\n pa = 255 / pa;\n pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;\n pixels[yi + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;\n pixels[yi + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;\n } else {\n pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;\n }\n\n r_sum -= r_out_sum;\n g_sum -= g_out_sum;\n b_sum -= b_out_sum;\n a_sum -= a_out_sum;\n\n r_out_sum -= stackIn.r;\n g_out_sum -= stackIn.g;\n b_out_sum -= stackIn.b;\n a_out_sum -= stackIn.a;\n\n p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;\n\n r_in_sum += stackIn.r = pixels[p];\n g_in_sum += stackIn.g = pixels[p + 1];\n b_in_sum += stackIn.b = pixels[p + 2];\n a_in_sum += stackIn.a = pixels[p + 3];\n\n r_sum += r_in_sum;\n g_sum += g_in_sum;\n b_sum += b_in_sum;\n a_sum += a_in_sum;\n\n stackIn = stackIn.next;\n\n r_out_sum += pr = stackOut.r;\n g_out_sum += pg = stackOut.g;\n b_out_sum += pb = stackOut.b;\n a_out_sum += pa = stackOut.a;\n\n r_in_sum -= pr;\n g_in_sum -= pg;\n b_in_sum -= pb;\n a_in_sum -= pa;\n\n stackOut = stackOut.next;\n\n yi += 4;\n }\n yw += width;\n }\n\n for (x = 0; x < width; x++) {\n g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;\n\n yi = x << 2;\n r_out_sum = radiusPlus1 * (pr = pixels[yi]);\n g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);\n b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);\n a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);\n\n r_sum += sumFactor * pr;\n g_sum += sumFactor * pg;\n b_sum += sumFactor * pb;\n a_sum += sumFactor * pa;\n\n stack = stackStart;\n\n for (i = 0; i < radiusPlus1; i++) {\n stack.r = pr;\n stack.g = pg;\n stack.b = pb;\n stack.a = pa;\n stack = stack.next;\n }\n\n yp = width;\n\n for (i = 1; i <= radius; i++) {\n yi = (yp + x) << 2;\n\n r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);\n g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;\n b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;\n a_sum += (stack.a = pa = pixels[yi + 3]) * rbs;\n\n r_in_sum += pr;\n g_in_sum += pg;\n b_in_sum += pb;\n a_in_sum += pa;\n\n stack = stack.next;\n\n if (i < heightMinus1) {\n yp += width;\n }\n }\n\n yi = x;\n stackIn = stackStart;\n stackOut = stackEnd;\n for (y = 0; y < height; y++) {\n p = yi << 2;\n pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;\n if (pa > 0) {\n pa = 255 / pa;\n pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;\n pixels[p + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;\n pixels[p + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;\n } else {\n pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;\n }\n\n r_sum -= r_out_sum;\n g_sum -= g_out_sum;\n b_sum -= b_out_sum;\n a_sum -= a_out_sum;\n\n r_out_sum -= stackIn.r;\n g_out_sum -= stackIn.g;\n b_out_sum -= stackIn.b;\n a_out_sum -= stackIn.a;\n\n p =\n (x +\n ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) *\n width) <<\n 2;\n\n r_sum += r_in_sum += stackIn.r = pixels[p];\n g_sum += g_in_sum += stackIn.g = pixels[p + 1];\n b_sum += b_in_sum += stackIn.b = pixels[p + 2];\n a_sum += a_in_sum += stackIn.a = pixels[p + 3];\n\n stackIn = stackIn.next;\n\n r_out_sum += pr = stackOut.r;\n g_out_sum += pg = stackOut.g;\n b_out_sum += pb = stackOut.b;\n a_out_sum += pa = stackOut.a;\n\n r_in_sum -= pr;\n g_in_sum -= pg;\n b_in_sum -= pb;\n a_in_sum -= pa;\n\n stackOut = stackOut.next;\n\n yi += width;\n }\n }\n }\n\n /**\n * Blur Filter\n * @function\n * @name Blur\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Blur]);\n * node.blurRadius(10);\n */\n Konva.Filters.Blur = function Blur(imageData) {\n var radius = Math.round(this.blurRadius());\n\n if (radius > 0) {\n filterGaussBlurRGBA(imageData, radius);\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'blurRadius',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n\n /**\n * get/set blur radius. Use with {@link Konva.Filters.Blur} filter\n * @name blurRadius\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} radius\n * @returns {Integer}\n */\n})(Konva);\n\n/*eslint-disable max-depth */\n(function() {\n 'use strict';\n function pixelAt(idata, x, y) {\n var idx = (y * idata.width + x) * 4;\n var d = [];\n d.push(\n idata.data[idx++],\n idata.data[idx++],\n idata.data[idx++],\n idata.data[idx++]\n );\n return d;\n }\n\n function rgbDistance(p1, p2) {\n return Math.sqrt(\n Math.pow(p1[0] - p2[0], 2) +\n Math.pow(p1[1] - p2[1], 2) +\n Math.pow(p1[2] - p2[2], 2)\n );\n }\n\n function rgbMean(pTab) {\n var m = [0, 0, 0];\n\n for (var i = 0; i < pTab.length; i++) {\n m[0] += pTab[i][0];\n m[1] += pTab[i][1];\n m[2] += pTab[i][2];\n }\n\n m[0] /= pTab.length;\n m[1] /= pTab.length;\n m[2] /= pTab.length;\n\n return m;\n }\n\n function backgroundMask(idata, threshold) {\n var rgbv_no = pixelAt(idata, 0, 0);\n var rgbv_ne = pixelAt(idata, idata.width - 1, 0);\n var rgbv_so = pixelAt(idata, 0, idata.height - 1);\n var rgbv_se = pixelAt(idata, idata.width - 1, idata.height - 1);\n\n var thres = threshold || 10;\n if (\n rgbDistance(rgbv_no, rgbv_ne) < thres &&\n rgbDistance(rgbv_ne, rgbv_se) < thres &&\n rgbDistance(rgbv_se, rgbv_so) < thres &&\n rgbDistance(rgbv_so, rgbv_no) < thres\n ) {\n // Mean color\n var mean = rgbMean([rgbv_ne, rgbv_no, rgbv_se, rgbv_so]);\n\n // Mask based on color distance\n var mask = [];\n for (var i = 0; i < idata.width * idata.height; i++) {\n var d = rgbDistance(mean, [\n idata.data[i * 4],\n idata.data[i * 4 + 1],\n idata.data[i * 4 + 2]\n ]);\n mask[i] = d < thres ? 0 : 255;\n }\n\n return mask;\n }\n }\n\n function applyMask(idata, mask) {\n for (var i = 0; i < idata.width * idata.height; i++) {\n idata.data[4 * i + 3] = mask[i];\n }\n }\n\n function erodeMask(mask, sw, sh) {\n var weights = [1, 1, 1, 1, 0, 1, 1, 1, 1];\n var side = Math.round(Math.sqrt(weights.length));\n var halfSide = Math.floor(side / 2);\n\n var maskResult = [];\n for (var y = 0; y < sh; y++) {\n for (var x = 0; x < sw; x++) {\n var so = y * sw + x;\n var a = 0;\n for (var cy = 0; cy < side; cy++) {\n for (var cx = 0; cx < side; cx++) {\n var scy = y + cy - halfSide;\n var scx = x + cx - halfSide;\n\n if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {\n var srcOff = scy * sw + scx;\n var wt = weights[cy * side + cx];\n\n a += mask[srcOff] * wt;\n }\n }\n }\n\n maskResult[so] = a === 255 * 8 ? 255 : 0;\n }\n }\n\n return maskResult;\n }\n\n function dilateMask(mask, sw, sh) {\n var weights = [1, 1, 1, 1, 1, 1, 1, 1, 1];\n var side = Math.round(Math.sqrt(weights.length));\n var halfSide = Math.floor(side / 2);\n\n var maskResult = [];\n for (var y = 0; y < sh; y++) {\n for (var x = 0; x < sw; x++) {\n var so = y * sw + x;\n var a = 0;\n for (var cy = 0; cy < side; cy++) {\n for (var cx = 0; cx < side; cx++) {\n var scy = y + cy - halfSide;\n var scx = x + cx - halfSide;\n\n if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {\n var srcOff = scy * sw + scx;\n var wt = weights[cy * side + cx];\n\n a += mask[srcOff] * wt;\n }\n }\n }\n\n maskResult[so] = a >= 255 * 4 ? 255 : 0;\n }\n }\n\n return maskResult;\n }\n\n function smoothEdgeMask(mask, sw, sh) {\n var weights = [\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9,\n 1 / 9\n ];\n var side = Math.round(Math.sqrt(weights.length));\n var halfSide = Math.floor(side / 2);\n\n var maskResult = [];\n for (var y = 0; y < sh; y++) {\n for (var x = 0; x < sw; x++) {\n var so = y * sw + x;\n var a = 0;\n for (var cy = 0; cy < side; cy++) {\n for (var cx = 0; cx < side; cx++) {\n var scy = y + cy - halfSide;\n var scx = x + cx - halfSide;\n\n if (scy >= 0 && scy < sh && scx >= 0 && scx < sw) {\n var srcOff = scy * sw + scx;\n var wt = weights[cy * side + cx];\n\n a += mask[srcOff] * wt;\n }\n }\n }\n\n maskResult[so] = a;\n }\n }\n\n return maskResult;\n }\n\n /**\n * Mask Filter\n * @function\n * @name Mask\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Mask]);\n * node.threshold(200);\n */\n Konva.Filters.Mask = function(imageData) {\n // Detect pixels close to the background color\n var threshold = this.threshold(),\n mask = backgroundMask(imageData, threshold);\n if (mask) {\n // Erode\n mask = erodeMask(mask, imageData.width, imageData.height);\n\n // Dilate\n mask = dilateMask(mask, imageData.width, imageData.height);\n\n // Gradient\n mask = smoothEdgeMask(mask, imageData.width, imageData.height);\n\n // Apply mask\n applyMask(imageData, mask);\n\n // todo : Update hit region function according to mask\n }\n\n return imageData;\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'threshold',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n})();\n\n(function() {\n 'use strict';\n /**\n * RGB Filter\n * @function\n * @name RGB\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * node.cache();\n * node.filters([Konva.Filters.RGB]);\n * node.blue(120);\n * node.green(200);\n */\n Konva.Filters.RGB = function(imageData) {\n var data = imageData.data,\n nPixels = data.length,\n red = this.red(),\n green = this.green(),\n blue = this.blue(),\n i,\n brightness;\n\n for (i = 0; i < nPixels; i += 4) {\n brightness =\n (0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;\n data[i] = brightness * red; // r\n data[i + 1] = brightness * green; // g\n data[i + 2] = brightness * blue; // b\n data[i + 3] = data[i + 3]; // alpha\n }\n };\n\n Konva.Factory.addGetterSetter(Konva.Node, 'red', 0, function(val) {\n this._filterUpToDate = false;\n if (val > 255) {\n return 255;\n } else if (val < 0) {\n return 0;\n } else {\n return Math.round(val);\n }\n });\n /**\n * get/set filter red value. Use with {@link Konva.Filters.RGB} filter.\n * @name red\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} red value between 0 and 255\n * @returns {Integer}\n */\n\n Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) {\n this._filterUpToDate = false;\n if (val > 255) {\n return 255;\n } else if (val < 0) {\n return 0;\n } else {\n return Math.round(val);\n }\n });\n /**\n * get/set filter green value. Use with {@link Konva.Filters.RGB} filter.\n * @name green\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} green value between 0 and 255\n * @returns {Integer}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'blue',\n 0,\n Konva.Validators.RGBComponent,\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set filter blue value. Use with {@link Konva.Filters.RGB} filter.\n * @name blue\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} blue value between 0 and 255\n * @returns {Integer}\n */\n})();\n\n(function() {\n 'use strict';\n /**\n * RGBA Filter\n * @function\n * @name RGBA\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author codefo\n * @example\n * node.cache();\n * node.filters([Konva.Filters.RGBA]);\n * node.blue(120);\n * node.green(200);\n * node.alpha(0.3);\n */\n Konva.Filters.RGBA = function(imageData) {\n var data = imageData.data,\n nPixels = data.length,\n red = this.red(),\n green = this.green(),\n blue = this.blue(),\n alpha = this.alpha(),\n i,\n ia;\n\n for (i = 0; i < nPixels; i += 4) {\n ia = 1 - alpha;\n\n data[i] = red * alpha + data[i] * ia; // r\n data[i + 1] = green * alpha + data[i + 1] * ia; // g\n data[i + 2] = blue * alpha + data[i + 2] * ia; // b\n }\n };\n\n Konva.Factory.addGetterSetter(Konva.Node, 'red', 0, function(val) {\n this._filterUpToDate = false;\n if (val > 255) {\n return 255;\n } else if (val < 0) {\n return 0;\n } else {\n return Math.round(val);\n }\n });\n /**\n * get/set filter red value. Use with {@link Konva.Filters.RGBA} filter.\n * @name red\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} red value between 0 and 255\n * @returns {Integer}\n */\n\n Konva.Factory.addGetterSetter(Konva.Node, 'green', 0, function(val) {\n this._filterUpToDate = false;\n if (val > 255) {\n return 255;\n } else if (val < 0) {\n return 0;\n } else {\n return Math.round(val);\n }\n });\n /**\n * get/set filter green value. Use with {@link Konva.Filters.RGBA} filter.\n * @name green\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} green value between 0 and 255\n * @returns {Integer}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'blue',\n 0,\n Konva.Validators.RGBComponent,\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set filter blue value. Use with {@link Konva.Filters.RGBA} filter.\n * @name blue\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} blue value between 0 and 255\n * @returns {Integer}\n */\n\n Konva.Factory.addGetterSetter(Konva.Node, 'alpha', 1, function(val) {\n this._filterUpToDate = false;\n if (val > 1) {\n return 1;\n } else if (val < 0) {\n return 0;\n } else {\n return val;\n }\n });\n /**\n * get/set filter alpha value. Use with {@link Konva.Filters.RGBA} filter.\n * @name alpha\n * @method\n * @memberof Konva.Node.prototype\n * @param {Float} alpha value between 0 and 1\n * @returns {Float}\n */\n})();\n\n(function() {\n 'use strict';\n /**\n * HSV Filter. Adjusts the hue, saturation and value\n * @function\n * @name HSV\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * image.filters([Konva.Filters.HSV]);\n * image.value(200);\n */\n\n Konva.Filters.HSV = function(imageData) {\n var data = imageData.data,\n nPixels = data.length,\n v = Math.pow(2, this.value()),\n s = Math.pow(2, this.saturation()),\n h = Math.abs(this.hue() + 360) % 360,\n i;\n\n // Basis for the technique used:\n // http://beesbuzz.biz/code/hsv_color_transforms.php\n // V is the value multiplier (1 for none, 2 for double, 0.5 for half)\n // S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)\n // H is the hue shift in degrees (0 to 360)\n // vsu = V*S*cos(H*PI/180);\n // vsw = V*S*sin(H*PI/180);\n //[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]\n //[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]\n //[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]\n\n // Precompute the values in the matrix:\n var vsu = v * s * Math.cos(h * Math.PI / 180),\n vsw = v * s * Math.sin(h * Math.PI / 180);\n // (result spot)(source spot)\n var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,\n rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,\n rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;\n var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,\n gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,\n gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;\n var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,\n bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,\n bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;\n\n var r, g, b, a;\n\n for (i = 0; i < nPixels; i += 4) {\n r = data[i + 0];\n g = data[i + 1];\n b = data[i + 2];\n a = data[i + 3];\n\n data[i + 0] = rr * r + rg * g + rb * b;\n data[i + 1] = gr * r + gg * g + gb * b;\n data[i + 2] = br * r + bg * g + bb * b;\n data[i + 3] = a; // alpha\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'hue',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.\n * @name hue\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} hue value between 0 and 359\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'saturation',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.\n * @name saturation\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'value',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsv value. Use with {@link Konva.Filters.HSV} filter.\n * @name value\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} value 0 is no change, -1.0 halves the value, 1.0 doubles, etc..\n * @returns {Number}\n */\n})();\n\n(function() {\n 'use strict';\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'hue',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsv hue in degrees. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.\n * @name hue\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} hue value between 0 and 359\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'saturation',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsv saturation. Use with {@link Konva.Filters.HSV} or {@link Konva.Filters.HSL} filter.\n * @name saturation\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} saturation 0 is no change, -1.0 halves the saturation, 1.0 doubles, etc..\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'luminance',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.\n * @name luminance\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} value from -1 to 1\n * @returns {Number}\n */\n\n /**\n * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * image.filters([Konva.Filters.HSL]);\n * image.luminance(0.2);\n */\n\n Konva.Filters.HSL = function(imageData) {\n var data = imageData.data,\n nPixels = data.length,\n v = 1,\n s = Math.pow(2, this.saturation()),\n h = Math.abs(this.hue() + 360) % 360,\n l = this.luminance() * 127,\n i;\n\n // Basis for the technique used:\n // http://beesbuzz.biz/code/hsv_color_transforms.php\n // V is the value multiplier (1 for none, 2 for double, 0.5 for half)\n // S is the saturation multiplier (1 for none, 2 for double, 0.5 for half)\n // H is the hue shift in degrees (0 to 360)\n // vsu = V*S*cos(H*PI/180);\n // vsw = V*S*sin(H*PI/180);\n //[ .299V+.701vsu+.168vsw .587V-.587vsu+.330vsw .114V-.114vsu-.497vsw ] [R]\n //[ .299V-.299vsu-.328vsw .587V+.413vsu+.035vsw .114V-.114vsu+.292vsw ]*[G]\n //[ .299V-.300vsu+1.25vsw .587V-.588vsu-1.05vsw .114V+.886vsu-.203vsw ] [B]\n\n // Precompute the values in the matrix:\n var vsu = v * s * Math.cos((h * Math.PI) / 180),\n vsw = v * s * Math.sin((h * Math.PI) / 180);\n // (result spot)(source spot)\n var rr = 0.299 * v + 0.701 * vsu + 0.167 * vsw,\n rg = 0.587 * v - 0.587 * vsu + 0.33 * vsw,\n rb = 0.114 * v - 0.114 * vsu - 0.497 * vsw;\n var gr = 0.299 * v - 0.299 * vsu - 0.328 * vsw,\n gg = 0.587 * v + 0.413 * vsu + 0.035 * vsw,\n gb = 0.114 * v - 0.114 * vsu + 0.293 * vsw;\n var br = 0.299 * v - 0.3 * vsu + 1.25 * vsw,\n bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,\n bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;\n\n var r, g, b, a;\n\n for (i = 0; i < nPixels; i += 4) {\n r = data[i + 0];\n g = data[i + 1];\n b = data[i + 2];\n a = data[i + 3];\n\n data[i + 0] = rr * r + rg * g + rb * b + l;\n data[i + 1] = gr * r + gg * g + gb * b + l;\n data[i + 2] = br * r + bg * g + bb * b + l;\n data[i + 3] = a; // alpha\n }\n };\n})();\n\n(function() {\n 'use strict';\n /**\n * Emboss Filter.\n * Pixastic Lib - Emboss filter - v0.1.0\n * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/\n * License: [http://www.pixastic.com/lib/license.txt]\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Emboss]);\n * node.embossStrength(0.8);\n * node.embossWhiteLevel(0.3);\n * node.embossDirection('right');\n * node.embossBlend(true);\n */\n Konva.Filters.Emboss = function(imageData) {\n // pixastic strength is between 0 and 10. I want it between 0 and 1\n // pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,\n // a max value of greyLevel yields a white emboss, and the min value yields a black\n // emboss. Therefore, I changed greyLevel to whiteLevel\n var strength = this.embossStrength() * 10,\n greyLevel = this.embossWhiteLevel() * 255,\n direction = this.embossDirection(),\n blend = this.embossBlend(),\n dirY = 0,\n dirX = 0,\n data = imageData.data,\n w = imageData.width,\n h = imageData.height,\n w4 = w * 4,\n y = h;\n\n switch (direction) {\n case 'top-left':\n dirY = -1;\n dirX = -1;\n break;\n case 'top':\n dirY = -1;\n dirX = 0;\n break;\n case 'top-right':\n dirY = -1;\n dirX = 1;\n break;\n case 'right':\n dirY = 0;\n dirX = 1;\n break;\n case 'bottom-right':\n dirY = 1;\n dirX = 1;\n break;\n case 'bottom':\n dirY = 1;\n dirX = 0;\n break;\n case 'bottom-left':\n dirY = 1;\n dirX = -1;\n break;\n case 'left':\n dirY = 0;\n dirX = -1;\n break;\n default:\n Konva.Util.error('Unknown emboss direction: ' + direction);\n }\n\n do {\n var offsetY = (y - 1) * w4;\n\n var otherY = dirY;\n if (y + otherY < 1) {\n otherY = 0;\n }\n if (y + otherY > h) {\n otherY = 0;\n }\n\n var offsetYOther = (y - 1 + otherY) * w * 4;\n\n var x = w;\n do {\n var offset = offsetY + (x - 1) * 4;\n\n var otherX = dirX;\n if (x + otherX < 1) {\n otherX = 0;\n }\n if (x + otherX > w) {\n otherX = 0;\n }\n\n var offsetOther = offsetYOther + (x - 1 + otherX) * 4;\n\n var dR = data[offset] - data[offsetOther];\n var dG = data[offset + 1] - data[offsetOther + 1];\n var dB = data[offset + 2] - data[offsetOther + 2];\n\n var dif = dR;\n var absDif = dif > 0 ? dif : -dif;\n\n var absG = dG > 0 ? dG : -dG;\n var absB = dB > 0 ? dB : -dB;\n\n if (absG > absDif) {\n dif = dG;\n }\n if (absB > absDif) {\n dif = dB;\n }\n\n dif *= strength;\n\n if (blend) {\n var r = data[offset] + dif;\n var g = data[offset + 1] + dif;\n var b = data[offset + 2] + dif;\n\n data[offset] = r > 255 ? 255 : r < 0 ? 0 : r;\n data[offset + 1] = g > 255 ? 255 : g < 0 ? 0 : g;\n data[offset + 2] = b > 255 ? 255 : b < 0 ? 0 : b;\n } else {\n var grey = greyLevel - dif;\n if (grey < 0) {\n grey = 0;\n } else if (grey > 255) {\n grey = 255;\n }\n\n data[offset] = data[offset + 1] = data[offset + 2] = grey;\n }\n } while (--x);\n } while (--y);\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'embossStrength',\n 0.5,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set emboss strength. Use with {@link Konva.Filters.Emboss} filter.\n * @name embossStrength\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} level between 0 and 1. Default is 0.5\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'embossWhiteLevel',\n 0.5,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set emboss white level. Use with {@link Konva.Filters.Emboss} filter.\n * @name embossWhiteLevel\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} embossWhiteLevel between 0 and 1. Default is 0.5\n * @returns {Number}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'embossDirection',\n 'top-left',\n null,\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set emboss direction. Use with {@link Konva.Filters.Emboss} filter.\n * @name embossDirection\n * @method\n * @memberof Konva.Node.prototype\n * @param {String} embossDirection can be top-left, top, top-right, right, bottom-right, bottom, bottom-left or left\n * The default is top-left\n * @returns {String}\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'embossBlend',\n false,\n null,\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set emboss blend. Use with {@link Konva.Filters.Emboss} filter.\n * @name embossBlend\n * @method\n * @memberof Konva.Node.prototype\n * @param {Boolean} embossBlend\n * @returns {Boolean}\n */\n})();\n\n(function() {\n 'use strict';\n function remap(fromValue, fromMin, fromMax, toMin, toMax) {\n // Compute the range of the data\n var fromRange = fromMax - fromMin,\n toRange = toMax - toMin,\n toValue;\n\n // If either range is 0, then the value can only be mapped to 1 value\n if (fromRange === 0) {\n return toMin + toRange / 2;\n }\n if (toRange === 0) {\n return toMin;\n }\n\n // (1) untranslate, (2) unscale, (3) rescale, (4) retranslate\n toValue = (fromValue - fromMin) / fromRange;\n toValue = toRange * toValue + toMin;\n\n return toValue;\n }\n\n /**\n * Enhance Filter. Adjusts the colors so that they span the widest\n * possible range (ie 0-255). Performs w*h pixel reads and w*h pixel\n * writes.\n * @function\n * @name Enhance\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Enhance]);\n * node.enhance(0.4);\n */\n Konva.Filters.Enhance = function(imageData) {\n var data = imageData.data,\n nSubPixels = data.length,\n rMin = data[0],\n rMax = rMin,\n r,\n gMin = data[1],\n gMax = gMin,\n g,\n bMin = data[2],\n bMax = bMin,\n b,\n i;\n\n // If we are not enhancing anything - don't do any computation\n var enhanceAmount = this.enhance();\n if (enhanceAmount === 0) {\n return;\n }\n\n // 1st Pass - find the min and max for each channel:\n for (i = 0; i < nSubPixels; i += 4) {\n r = data[i + 0];\n if (r < rMin) {\n rMin = r;\n } else if (r > rMax) {\n rMax = r;\n }\n g = data[i + 1];\n if (g < gMin) {\n gMin = g;\n } else if (g > gMax) {\n gMax = g;\n }\n b = data[i + 2];\n if (b < bMin) {\n bMin = b;\n } else if (b > bMax) {\n bMax = b;\n }\n //a = data[i + 3];\n //if (a < aMin) { aMin = a; } else\n //if (a > aMax) { aMax = a; }\n }\n\n // If there is only 1 level - don't remap\n if (rMax === rMin) {\n rMax = 255;\n rMin = 0;\n }\n if (gMax === gMin) {\n gMax = 255;\n gMin = 0;\n }\n if (bMax === bMin) {\n bMax = 255;\n bMin = 0;\n }\n\n var rMid,\n rGoalMax,\n rGoalMin,\n gMid,\n gGoalMax,\n gGoalMin,\n bMid,\n bGoalMax,\n bGoalMin;\n\n // If the enhancement is positive - stretch the histogram\n if (enhanceAmount > 0) {\n rGoalMax = rMax + enhanceAmount * (255 - rMax);\n rGoalMin = rMin - enhanceAmount * (rMin - 0);\n gGoalMax = gMax + enhanceAmount * (255 - gMax);\n gGoalMin = gMin - enhanceAmount * (gMin - 0);\n bGoalMax = bMax + enhanceAmount * (255 - bMax);\n bGoalMin = bMin - enhanceAmount * (bMin - 0);\n // If the enhancement is negative - compress the histogram\n } else {\n rMid = (rMax + rMin) * 0.5;\n rGoalMax = rMax + enhanceAmount * (rMax - rMid);\n rGoalMin = rMin + enhanceAmount * (rMin - rMid);\n gMid = (gMax + gMin) * 0.5;\n gGoalMax = gMax + enhanceAmount * (gMax - gMid);\n gGoalMin = gMin + enhanceAmount * (gMin - gMid);\n bMid = (bMax + bMin) * 0.5;\n bGoalMax = bMax + enhanceAmount * (bMax - bMid);\n bGoalMin = bMin + enhanceAmount * (bMin - bMid);\n }\n\n // Pass 2 - remap everything, except the alpha\n for (i = 0; i < nSubPixels; i += 4) {\n data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);\n data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);\n data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);\n //data[i + 3] = remap(data[i + 3], aMin, aMax, aGoalMin, aGoalMax);\n }\n };\n\n /**\n * get/set enhance. Use with {@link Konva.Filters.Enhance} filter. -1 to 1 values\n * @name enhance\n * @method\n * @memberof Konva.Node.prototype\n * @param {Float} amount\n * @returns {Float}\n */\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'enhance',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n})();\n\n(function() {\n 'use strict';\n /**\n * Posterize Filter. Adjusts the channels so that there are no more\n * than n different values for that channel. This is also applied\n * to the alpha channel.\n * @function\n * @name Posterize\n * @author ippo615\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Posterize]);\n * node.levels(0.8); // between 0 and 1\n */\n\n Konva.Filters.Posterize = function(imageData) {\n // level must be between 1 and 255\n var levels = Math.round(this.levels() * 254) + 1,\n data = imageData.data,\n len = data.length,\n scale = 255 / levels,\n i;\n\n for (i = 0; i < len; i += 1) {\n data[i] = Math.floor(data[i] / scale) * scale;\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'levels',\n 0.5,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n\n /**\n * get/set levels. Must be a number between 0 and 1. Use with {@link Konva.Filters.Posterize} filter.\n * @name levels\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} level between 0 and 1\n * @returns {Number}\n */\n})();\n\n(function() {\n 'use strict';\n /**\n * Noise Filter. Randomly adds or substracts to the color channels\n * @function\n * @name Noise\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Noise]);\n * node.noise(0.8);\n */\n Konva.Filters.Noise = function(imageData) {\n var amount = this.noise() * 255,\n data = imageData.data,\n nPixels = data.length,\n half = amount / 2,\n i;\n\n for (i = 0; i < nPixels; i += 4) {\n data[i + 0] += half - 2 * half * Math.random();\n data[i + 1] += half - 2 * half * Math.random();\n data[i + 2] += half - 2 * half * Math.random();\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'noise',\n 0.2,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.\n * @name noise\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} noise\n * @returns {Number}\n */\n})();\n\n/*eslint-disable max-depth */\n(function() {\n 'use strict';\n /**\n * Pixelate Filter. Averages groups of pixels and redraws\n * them as larger pixels\n * @function\n * @name Pixelate\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Pixelate]);\n * node.pixelSize(10);\n */\n\n Konva.Filters.Pixelate = function(imageData) {\n var pixelSize = Math.ceil(this.pixelSize()),\n width = imageData.width,\n height = imageData.height,\n x,\n y,\n i,\n //pixelsPerBin = pixelSize * pixelSize,\n red,\n green,\n blue,\n alpha,\n nBinsX = Math.ceil(width / pixelSize),\n nBinsY = Math.ceil(height / pixelSize),\n xBinStart,\n xBinEnd,\n yBinStart,\n yBinEnd,\n xBin,\n yBin,\n pixelsInBin;\n imageData = imageData.data;\n\n if (pixelSize <= 0) {\n Konva.Util.error('pixelSize value can not be <= 0');\n return;\n }\n\n for (xBin = 0; xBin < nBinsX; xBin += 1) {\n for (yBin = 0; yBin < nBinsY; yBin += 1) {\n // Initialize the color accumlators to 0\n red = 0;\n green = 0;\n blue = 0;\n alpha = 0;\n\n // Determine which pixels are included in this bin\n xBinStart = xBin * pixelSize;\n xBinEnd = xBinStart + pixelSize;\n yBinStart = yBin * pixelSize;\n yBinEnd = yBinStart + pixelSize;\n\n // Add all of the pixels to this bin!\n pixelsInBin = 0;\n for (x = xBinStart; x < xBinEnd; x += 1) {\n if (x >= width) {\n continue;\n }\n for (y = yBinStart; y < yBinEnd; y += 1) {\n if (y >= height) {\n continue;\n }\n i = (width * y + x) * 4;\n red += imageData[i + 0];\n green += imageData[i + 1];\n blue += imageData[i + 2];\n alpha += imageData[i + 3];\n pixelsInBin += 1;\n }\n }\n\n // Make sure the channels are between 0-255\n red = red / pixelsInBin;\n green = green / pixelsInBin;\n blue = blue / pixelsInBin;\n alpha = alpha / pixelsInBin;\n\n // Draw this bin\n for (x = xBinStart; x < xBinEnd; x += 1) {\n if (x >= width) {\n continue;\n }\n for (y = yBinStart; y < yBinEnd; y += 1) {\n if (y >= height) {\n continue;\n }\n i = (width * y + x) * 4;\n imageData[i + 0] = red;\n imageData[i + 1] = green;\n imageData[i + 2] = blue;\n imageData[i + 3] = alpha;\n }\n }\n }\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'pixelSize',\n 8,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.\n * @name pixelSize\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} pixelSize\n * @returns {Integer}\n */\n})();\n\n(function() {\n 'use strict';\n /**\n * Threshold Filter. Pushes any value above the mid point to\n * the max and any value below the mid point to the min.\n * This affects the alpha channel.\n * @function\n * @name Threshold\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author ippo615\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Threshold]);\n * node.threshold(0.1);\n */\n\n Konva.Filters.Threshold = function(imageData) {\n var level = this.threshold() * 255,\n data = imageData.data,\n len = data.length,\n i;\n\n for (i = 0; i < len; i += 1) {\n data[i] = data[i] < level ? 0 : 255;\n }\n };\n\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'threshold',\n 0.5,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.\n * @name threshold\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} threshold\n * @returns {Number}\n */\n})();\n\n(function() {\n 'use strict';\n /**\n * Sepia Filter\n * Based on: Pixastic Lib - Sepia filter - v0.1.0\n * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/\n * @function\n * @name Sepia\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @author Jacob Seidelin <jseidelin@nihilogic.dk>\n * @license MPL v1.1 [http://www.pixastic.com/lib/license.txt]\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Sepia]);\n */\n Konva.Filters.Sepia = function(imageData) {\n var data = imageData.data,\n w = imageData.width,\n y = imageData.height,\n w4 = w * 4,\n offsetY,\n x,\n offset,\n or,\n og,\n ob,\n r,\n g,\n b;\n\n do {\n offsetY = (y - 1) * w4;\n x = w;\n do {\n offset = offsetY + (x - 1) * 4;\n\n or = data[offset];\n og = data[offset + 1];\n ob = data[offset + 2];\n\n r = or * 0.393 + og * 0.769 + ob * 0.189;\n g = or * 0.349 + og * 0.686 + ob * 0.168;\n b = or * 0.272 + og * 0.534 + ob * 0.131;\n\n data[offset] = r > 255 ? 255 : r;\n data[offset + 1] = g > 255 ? 255 : g;\n data[offset + 2] = b > 255 ? 255 : b;\n data[offset + 3] = data[offset + 3];\n } while (--x);\n } while (--y);\n };\n})();\n\n(function() {\n 'use strict';\n /**\n * Solarize Filter\n * Pixastic Lib - Solarize filter - v0.1.0\n * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/\n * License: [http://www.pixastic.com/lib/license.txt]\n * @function\n * @name Solarize\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Solarize]);\n */\n Konva.Filters.Solarize = function(imageData) {\n var data = imageData.data,\n w = imageData.width,\n h = imageData.height,\n w4 = w * 4,\n y = h;\n\n do {\n var offsetY = (y - 1) * w4;\n var x = w;\n do {\n var offset = offsetY + (x - 1) * 4;\n var r = data[offset];\n var g = data[offset + 1];\n var b = data[offset + 2];\n\n if (r > 127) {\n r = 255 - r;\n }\n if (g > 127) {\n g = 255 - g;\n }\n if (b > 127) {\n b = 255 - b;\n }\n\n data[offset] = r;\n data[offset + 1] = g;\n data[offset + 2] = b;\n } while (--x);\n } while (--y);\n };\n})();\n\n(function() {\n 'use strict';\n /*\n * ToPolar Filter. Converts image data to polar coordinates. Performs\n * w*h*4 pixel reads and w*h pixel writes. The r axis is placed along\n * what would be the y axis and the theta axis along the x axis.\n * @function\n * @author ippo615\n * @memberof Konva.Filters\n * @param {ImageData} src, the source image data (what will be transformed)\n * @param {ImageData} dst, the destination image data (where it will be saved)\n * @param {Object} opt\n * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,\n * default is in the middle\n * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,\n * default is in the middle\n */\n\n var ToPolar = function(src, dst, opt) {\n var srcPixels = src.data,\n dstPixels = dst.data,\n xSize = src.width,\n ySize = src.height,\n xMid = opt.polarCenterX || xSize / 2,\n yMid = opt.polarCenterY || ySize / 2,\n i,\n x,\n y,\n r = 0,\n g = 0,\n b = 0,\n a = 0;\n\n // Find the largest radius\n var rad,\n rMax = Math.sqrt(xMid * xMid + yMid * yMid);\n x = xSize - xMid;\n y = ySize - yMid;\n rad = Math.sqrt(x * x + y * y);\n rMax = rad > rMax ? rad : rMax;\n\n // We'll be uisng y as the radius, and x as the angle (theta=t)\n var rSize = ySize,\n tSize = xSize,\n radius,\n theta;\n\n // We want to cover all angles (0-360) and we need to convert to\n // radians (*PI/180)\n var conversion = 360 / tSize * Math.PI / 180,\n sin,\n cos;\n\n // var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;\n\n for (theta = 0; theta < tSize; theta += 1) {\n sin = Math.sin(theta * conversion);\n cos = Math.cos(theta * conversion);\n for (radius = 0; radius < rSize; radius += 1) {\n x = Math.floor(xMid + rMax * radius / rSize * cos);\n y = Math.floor(yMid + rMax * radius / rSize * sin);\n i = (y * xSize + x) * 4;\n r = srcPixels[i + 0];\n g = srcPixels[i + 1];\n b = srcPixels[i + 2];\n a = srcPixels[i + 3];\n\n // Store it\n //i = (theta * xSize + radius) * 4;\n i = (theta + radius * xSize) * 4;\n dstPixels[i + 0] = r;\n dstPixels[i + 1] = g;\n dstPixels[i + 2] = b;\n dstPixels[i + 3] = a;\n }\n }\n };\n\n /*\n * FromPolar Filter. Converts image data from polar coordinates back to rectangular.\n * Performs w*h*4 pixel reads and w*h pixel writes.\n * @function\n * @author ippo615\n * @memberof Konva.Filters\n * @param {ImageData} src, the source image data (what will be transformed)\n * @param {ImageData} dst, the destination image data (where it will be saved)\n * @param {Object} opt\n * @param {Number} [opt.polarCenterX] horizontal location for the center of the circle,\n * default is in the middle\n * @param {Number} [opt.polarCenterY] vertical location for the center of the circle,\n * default is in the middle\n * @param {Number} [opt.polarRotation] amount to rotate the image counterclockwis,\n * 0 is no rotation, 360 degrees is a full rotation\n */\n\n var FromPolar = function(src, dst, opt) {\n var srcPixels = src.data,\n dstPixels = dst.data,\n xSize = src.width,\n ySize = src.height,\n xMid = opt.polarCenterX || xSize / 2,\n yMid = opt.polarCenterY || ySize / 2,\n i,\n x,\n y,\n dx,\n dy,\n r = 0,\n g = 0,\n b = 0,\n a = 0;\n\n // Find the largest radius\n var rad,\n rMax = Math.sqrt(xMid * xMid + yMid * yMid);\n x = xSize - xMid;\n y = ySize - yMid;\n rad = Math.sqrt(x * x + y * y);\n rMax = rad > rMax ? rad : rMax;\n\n // We'll be uisng x as the radius, and y as the angle (theta=t)\n var rSize = ySize,\n tSize = xSize,\n radius,\n theta,\n phaseShift = opt.polarRotation || 0;\n\n // We need to convert to degrees and we need to make sure\n // it's between (0-360)\n // var conversion = tSize/360*180/Math.PI;\n //var conversion = tSize/360*180/Math.PI;\n\n var x1, y1;\n\n for (x = 0; x < xSize; x += 1) {\n for (y = 0; y < ySize; y += 1) {\n dx = x - xMid;\n dy = y - yMid;\n radius = Math.sqrt(dx * dx + dy * dy) * rSize / rMax;\n theta = (Math.atan2(dy, dx) * 180 / Math.PI + 360 + phaseShift) % 360;\n theta = theta * tSize / 360;\n x1 = Math.floor(theta);\n y1 = Math.floor(radius);\n i = (y1 * xSize + x1) * 4;\n r = srcPixels[i + 0];\n g = srcPixels[i + 1];\n b = srcPixels[i + 2];\n a = srcPixels[i + 3];\n\n // Store it\n i = (y * xSize + x) * 4;\n dstPixels[i + 0] = r;\n dstPixels[i + 1] = g;\n dstPixels[i + 2] = b;\n dstPixels[i + 3] = a;\n }\n }\n };\n\n //Konva.Filters.ToPolar = Konva.Util._FilterWrapDoubleBuffer(ToPolar);\n //Konva.Filters.FromPolar = Konva.Util._FilterWrapDoubleBuffer(FromPolar);\n\n // create a temporary canvas for working - shared between multiple calls\n\n /*\n * Kaleidoscope Filter.\n * @function\n * @name Kaleidoscope\n * @author ippo615\n * @memberof Konva.Filters\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Kaleidoscope]);\n * node.kaleidoscopePower(3);\n * node.kaleidoscopeAngle(45);\n */\n Konva.Filters.Kaleidoscope = function(imageData) {\n var xSize = imageData.width,\n ySize = imageData.height;\n\n var x, y, xoff, i, r, g, b, a, srcPos, dstPos;\n var power = Math.round(this.kaleidoscopePower());\n var angle = Math.round(this.kaleidoscopeAngle());\n var offset = Math.floor(xSize * (angle % 360) / 360);\n\n if (power < 1) {\n return;\n }\n\n // Work with our shared buffer canvas\n var tempCanvas = Konva.Util.createCanvasElement();\n tempCanvas.width = xSize;\n tempCanvas.height = ySize;\n var scratchData = tempCanvas\n .getContext('2d')\n .getImageData(0, 0, xSize, ySize);\n\n // Convert thhe original to polar coordinates\n ToPolar(imageData, scratchData, {\n polarCenterX: xSize / 2,\n polarCenterY: ySize / 2\n });\n\n // Determine how big each section will be, if it's too small\n // make it bigger\n var minSectionSize = xSize / Math.pow(2, power);\n while (minSectionSize <= 8) {\n minSectionSize = minSectionSize * 2;\n power -= 1;\n }\n minSectionSize = Math.ceil(minSectionSize);\n var sectionSize = minSectionSize;\n\n // Copy the offset region to 0\n // Depending on the size of filter and location of the offset we may need\n // to copy the section backwards to prevent it from rewriting itself\n var xStart = 0,\n xEnd = sectionSize,\n xDelta = 1;\n if (offset + minSectionSize > xSize) {\n xStart = sectionSize;\n xEnd = 0;\n xDelta = -1;\n }\n for (y = 0; y < ySize; y += 1) {\n for (x = xStart; x !== xEnd; x += xDelta) {\n xoff = Math.round(x + offset) % xSize;\n srcPos = (xSize * y + xoff) * 4;\n r = scratchData.data[srcPos + 0];\n g = scratchData.data[srcPos + 1];\n b = scratchData.data[srcPos + 2];\n a = scratchData.data[srcPos + 3];\n dstPos = (xSize * y + x) * 4;\n scratchData.data[dstPos + 0] = r;\n scratchData.data[dstPos + 1] = g;\n scratchData.data[dstPos + 2] = b;\n scratchData.data[dstPos + 3] = a;\n }\n }\n\n // Perform the actual effect\n for (y = 0; y < ySize; y += 1) {\n sectionSize = Math.floor(minSectionSize);\n for (i = 0; i < power; i += 1) {\n for (x = 0; x < sectionSize + 1; x += 1) {\n srcPos = (xSize * y + x) * 4;\n r = scratchData.data[srcPos + 0];\n g = scratchData.data[srcPos + 1];\n b = scratchData.data[srcPos + 2];\n a = scratchData.data[srcPos + 3];\n dstPos = (xSize * y + sectionSize * 2 - x - 1) * 4;\n scratchData.data[dstPos + 0] = r;\n scratchData.data[dstPos + 1] = g;\n scratchData.data[dstPos + 2] = b;\n scratchData.data[dstPos + 3] = a;\n }\n sectionSize *= 2;\n }\n }\n\n // Convert back from polar coordinates\n FromPolar(scratchData, imageData, { polarRotation: 0 });\n };\n\n /**\n * get/set kaleidoscope power. Use with {@link Konva.Filters.Kaleidoscope} filter.\n * @name kaleidoscopePower\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} power of kaleidoscope\n * @returns {Integer}\n */\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'kaleidoscopePower',\n 2,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n\n /**\n * get/set kaleidoscope angle. Use with {@link Konva.Filters.Kaleidoscope} filter.\n * @name kaleidoscopeAngle\n * @method\n * @memberof Konva.Node.prototype\n * @param {Integer} degrees\n * @returns {Integer}\n */\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'kaleidoscopeAngle',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n})();\n\n(function(Konva) {\n 'use strict';\n /**\n * Contrast Filter.\n * @function\n * @memberof Konva.Filters\n * @param {Object} imageData\n * @example\n * node.cache();\n * node.filters([Konva.Filters.Contrast]);\n * node.contrast(10);\n */\n\n Konva.Filters.Contrast = function(imageData) {\n var adjust = Math.pow((parseInt(this.contrast()) + 100) / 100, 2);\n\n var data = imageData.data,\n nPixels = data.length,\n red = 150,\n green = 150,\n blue = 150,\n i;\n\n for (i = 0; i < nPixels; i += 4) {\n red = data[i];\n green = data[i + 1];\n blue = data[i + 2];\n\n //Red channel\n red /= 255;\n red -= 0.5;\n red *= adjust;\n red += 0.5;\n red *= 255;\n\n //Green channel\n green /= 255;\n green -= 0.5;\n green *= adjust;\n green += 0.5;\n green *= 255;\n\n //Blue channel\n blue /= 255;\n blue -= 0.5;\n blue *= adjust;\n blue += 0.5;\n blue *= 255;\n\n red = red < 0 ? 0 : red > 255 ? 255 : red;\n green = green < 0 ? 0 : green > 255 ? 255 : green;\n blue = blue < 0 ? 0 : blue > 255 ? 255 : blue;\n\n data[i] = red;\n data[i + 1] = green;\n data[i + 2] = blue;\n }\n };\n\n /**\n * get/set filter contrast. The contrast is a number between -100 and 100.\n * Use with {@link Konva.Filters.Contrast} filter.\n * @name contrast\n * @method\n * @memberof Konva.Node.prototype\n * @param {Number} contrast value between -100 and 100\n * @returns {Number}\n */\n Konva.Factory.addGetterSetter(\n Konva.Node,\n 'contrast',\n 0,\n Konva.Validators.getNumberValidator(),\n Konva.Factory.afterSetFilter\n );\n})(Konva);\n\n(function() {\n 'use strict';\n /**\n * Container constructor. Containers are used to contain nodes or other containers\n * @constructor\n * @memberof Konva\n * @augments Konva.Node\n * @abstract\n * @param {Object} config\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * * @param {Object} [config.clip] set clip\n * @param {Number} [config.clipX] set clip x\n * @param {Number} [config.clipY] set clip y\n * @param {Number} [config.clipWidth] set clip width\n * @param {Number} [config.clipHeight] set clip height\n * @param {Function} [config.clipFunc] set clip func\n\n */\n Konva.Container = function(config) {\n this.__init(config);\n };\n\n Konva.Util.addMethods(Konva.Container, {\n __init: function(config) {\n this.children = new Konva.Collection();\n Konva.Node.call(this, config);\n },\n /**\n * returns a {@link Konva.Collection} of direct descendant nodes\n * @method\n * @memberof Konva.Container.prototype\n * @param {Function} [filterFunc] filter function\n * @returns {Konva.Collection}\n * @example\n * // get all children\n * var children = layer.getChildren();\n *\n * // get only circles\n * var circles = layer.getChildren(function(node){\n * return node.getClassName() === 'Circle';\n * });\n */\n getChildren: function(filterFunc) {\n if (!filterFunc) {\n return this.children;\n }\n\n var results = new Konva.Collection();\n this.children.each(function(child) {\n if (filterFunc(child)) {\n results.push(child);\n }\n });\n return results;\n },\n /**\n * determine if node has children\n * @method\n * @memberof Konva.Container.prototype\n * @returns {Boolean}\n */\n hasChildren: function() {\n return this.getChildren().length > 0;\n },\n /**\n * remove all children\n * @method\n * @memberof Konva.Container.prototype\n */\n removeChildren: function() {\n var children = Konva.Collection.toCollection(this.children);\n var child;\n for (var i = 0; i < children.length; i++) {\n child = children[i];\n // reset parent to prevent many _setChildrenIndices calls\n delete child.parent;\n child.index = 0;\n child.remove();\n }\n children = null;\n this.children = new Konva.Collection();\n return this;\n },\n /**\n * destroy all children\n * @method\n * @memberof Konva.Container.prototype\n */\n destroyChildren: function() {\n var children = Konva.Collection.toCollection(this.children);\n var child;\n for (var i = 0; i < children.length; i++) {\n child = children[i];\n // reset parent to prevent many _setChildrenIndices calls\n delete child.parent;\n child.index = 0;\n child.destroy();\n }\n children = null;\n this.children = new Konva.Collection();\n return this;\n },\n /**\n * Add node or nodes to container.\n * @method\n * @memberof Konva.Container.prototype\n * @param {...Konva.Node} child\n * @returns {Container}\n * @example\n * layer.add(shape1, shape2, shape3);\n */\n add: function(child) {\n if (arguments.length > 1) {\n for (var i = 0; i < arguments.length; i++) {\n this.add(arguments[i]);\n }\n return this;\n }\n if (child.getParent()) {\n child.moveTo(this);\n return this;\n }\n var children = this.children;\n this._validateAdd(child);\n child.index = children.length;\n child.parent = this;\n children.push(child);\n this._fire('add', {\n child: child\n });\n\n // if node under drag we need to update drag animation\n if (Konva.DD && child.isDragging()) {\n Konva.DD.anim.setLayers(child.getLayer());\n }\n\n // chainable\n return this;\n },\n destroy: function() {\n // destroy children\n if (this.hasChildren()) {\n this.destroyChildren();\n }\n // then destroy self\n Konva.Node.prototype.destroy.call(this);\n return this;\n },\n /**\n * return a {@link Konva.Collection} of nodes that match the selector.\n * You can provide a string with '#' for id selections and '.' for name selections.\n * Or a function that will return true/false when a node is passed through. See example below.\n * With strings you can also select by type or class name. Pass multiple selectors\n * separated by a space.\n * @method\n * @memberof Konva.Container.prototype\n * @param {String | Function} selector\n * @returns {Collection}\n * @example\n *\n * Passing a string as a selector\n * // select node with id foo\n * var node = stage.find('#foo');\n *\n * // select nodes with name bar inside layer\n * var nodes = layer.find('.bar');\n *\n * // select all groups inside layer\n * var nodes = layer.find('Group');\n *\n * // select all rectangles inside layer\n * var nodes = layer.find('Rect');\n *\n * // select node with an id of foo or a name of bar inside layer\n * var nodes = layer.find('#foo, .bar');\n *\n * Passing a function as a selector\n *\n * // get all Groups\n * var groups = stage.find(node => {\n * return node.getType() === 'Group';\n * });\n *\n * // get only Nodes with partial opacity\n * var alphaNodes = layer.find(node => {\n * return node.getType() === 'Node' && node.getAbsoluteOpacity() < 1;\n * });\n */\n find: function(selector) {\n // protecting _generalFind to prevent user from accidentally adding\n // second argument and getting unexpected `findOne` result\n return this._generalFind(selector, false);\n },\n /**\n * return a first node from `find` method\n * @method\n * @memberof Konva.Container.prototype\n * @param {String | Function} selector\n * @returns {Konva.Node | Undefined}\n * @example\n * // select node with id foo\n * var node = stage.findOne('#foo');\n *\n * // select node with name bar inside layer\n * var nodes = layer.findOne('.bar');\n *\n * // select the first node to return true in a function\n * var node = stage.findOne(node => {\n * return node.getType() === 'Shape'\n * })\n */\n findOne: function(selector) {\n var result = this._generalFind(selector, true);\n return result.length > 0 ? result[0] : undefined;\n },\n _generalFind: function(selector, findOne) {\n var retArr = [];\n\n if (typeof selector === 'string') {\n retArr = this._findByString(selector, findOne);\n } else if (typeof selector === 'function') {\n retArr = this._findByFunction(selector, findOne);\n }\n\n return Konva.Collection.toCollection(retArr);\n },\n _findByString: function(selector) {\n var retArr = [],\n selectorArr = selector.replace(/ /g, '').split(','),\n len = selectorArr.length,\n n,\n i,\n sel,\n arr,\n node,\n children,\n clen;\n\n for (n = 0; n < len; n++) {\n sel = selectorArr[n];\n if (!Konva.Util.isValidSelector(sel)) {\n var message =\n 'Selector \"' +\n sel +\n '\" is invalid. Allowed selectors examples are \"#foo\", \".bar\" or \"Group\".\\n' +\n 'If you have a custom shape with such className, please change it to start with upper letter like \"Triangle\".\\n' +\n 'Konva is awesome, right?';\n Konva.Util.warn(message);\n }\n // id selector\n if (sel.charAt(0) === '#') {\n node = this._getNodeById(sel.slice(1));\n if (node) {\n retArr.push(node);\n }\n } else if (sel.charAt(0) === '.') {\n // name selector\n arr = this._getNodesByName(sel.slice(1));\n retArr = retArr.concat(arr);\n } else {\n // unrecognized selector, pass to children\n children = this.getChildren();\n clen = children.length;\n for (i = 0; i < clen; i++) {\n retArr = retArr.concat(children[i]._get(sel));\n }\n }\n }\n\n return retArr;\n },\n // (fn: ((Node) => boolean, findOne?: boolean)\n _findByFunction: function(fn, findOne) {\n var retArr = [];\n\n var addItems = function(el) {\n // escape function if we've already found one.\n if (findOne && retArr.length > 0) {\n return;\n }\n\n var children = el.getChildren();\n var clen = children.length;\n\n if (fn(el)) {\n retArr = retArr.concat(el);\n }\n\n for (var i = 0; i < clen; i++) {\n addItems(children[i]);\n }\n };\n\n addItems(this);\n\n return retArr;\n },\n _getNodeById: function(key) {\n var node = Konva.ids[key];\n\n if (node !== undefined && this.isAncestorOf(node)) {\n return node;\n }\n return null;\n },\n _getNodesByName: function(key) {\n var arr = Konva.names[key] || [];\n return this._getDescendants(arr);\n },\n _get: function(selector) {\n var retArr = Konva.Node.prototype._get.call(this, selector);\n var children = this.getChildren();\n var len = children.length;\n for (var n = 0; n < len; n++) {\n retArr = retArr.concat(children[n]._get(selector));\n }\n return retArr;\n },\n // extenders\n toObject: function() {\n var obj = Konva.Node.prototype.toObject.call(this);\n\n obj.children = [];\n\n var children = this.getChildren();\n var len = children.length;\n for (var n = 0; n < len; n++) {\n var child = children[n];\n obj.children.push(child.toObject());\n }\n\n return obj;\n },\n _getDescendants: function(arr) {\n var retArr = [];\n var len = arr.length;\n for (var n = 0; n < len; n++) {\n var node = arr[n];\n if (this.isAncestorOf(node)) {\n retArr.push(node);\n }\n }\n\n return retArr;\n },\n /**\n * determine if node is an ancestor\n * of descendant\n * @method\n * @memberof Konva.Container.prototype\n * @param {Konva.Node} node\n */\n isAncestorOf: function(node) {\n var parent = node.getParent();\n while (parent) {\n if (parent._id === this._id) {\n return true;\n }\n parent = parent.getParent();\n }\n\n return false;\n },\n clone: function(obj) {\n // call super method\n var node = Konva.Node.prototype.clone.call(this, obj);\n\n this.getChildren().each(function(no) {\n node.add(no.clone());\n });\n return node;\n },\n /**\n * get all shapes that intersect a point. Note: because this method must clear a temporary\n * canvas and redraw every shape inside the container, it should only be used for special sitations\n * because it performs very poorly. Please use the {@link Konva.Stage#getIntersection} method if at all possible\n * because it performs much better\n * @method\n * @memberof Konva.Container.prototype\n * @param {Object} pos\n * @param {Number} pos.x\n * @param {Number} pos.y\n * @returns {Array} array of shapes\n */\n getAllIntersections: function(pos) {\n var arr = [];\n\n this.find('Shape').each(function(shape) {\n if (shape.isVisible() && shape.intersects(pos)) {\n arr.push(shape);\n }\n });\n\n return arr;\n },\n _setChildrenIndices: function() {\n this.children.each(function(child, n) {\n child.index = n;\n });\n },\n drawScene: function(can, top, caching) {\n var layer = this.getLayer(),\n canvas = can || (layer && layer.getCanvas()),\n context = canvas && canvas.getContext(),\n cachedCanvas = this._cache.canvas,\n cachedSceneCanvas = cachedCanvas && cachedCanvas.scene;\n\n if (this.isVisible() || caching) {\n if (!caching && cachedSceneCanvas) {\n context.save();\n layer._applyTransform(this, context, top);\n this._drawCachedSceneCanvas(context);\n context.restore();\n } else {\n this._drawChildren(canvas, 'drawScene', top, false, caching);\n }\n }\n return this;\n },\n drawHit: function(can, top, caching) {\n var layer = this.getLayer(),\n canvas = can || (layer && layer.hitCanvas),\n context = canvas && canvas.getContext(),\n cachedCanvas = this._cache.canvas,\n cachedHitCanvas = cachedCanvas && cachedCanvas.hit;\n\n if (this.shouldDrawHit(canvas) || caching) {\n if (layer) {\n layer.clearHitCache();\n }\n if (!caching && cachedHitCanvas) {\n context.save();\n layer._applyTransform(this, context, top);\n this._drawCachedHitCanvas(context);\n context.restore();\n } else {\n this._drawChildren(canvas, 'drawHit', top);\n }\n }\n return this;\n },\n _drawChildren: function(canvas, drawMethod, top, caching, skipBuffer) {\n var layer = this.getLayer(),\n context = canvas && canvas.getContext(),\n clipWidth = this.getClipWidth(),\n clipHeight = this.getClipHeight(),\n clipFunc = this.getClipFunc(),\n hasClip = (clipWidth && clipHeight) || clipFunc,\n clipX,\n clipY;\n\n if (hasClip && layer) {\n context.save();\n var transform = this.getAbsoluteTransform(top);\n var m = transform.getMatrix();\n context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\n context.beginPath();\n if (clipFunc) {\n clipFunc.call(this, context, this);\n } else {\n clipX = this.getClipX();\n clipY = this.getClipY();\n context.rect(clipX, clipY, clipWidth, clipHeight);\n }\n context.clip();\n m = transform\n .copy()\n .invert()\n .getMatrix();\n context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\n }\n\n this.children.each(function(child) {\n child[drawMethod](canvas, top, caching, skipBuffer);\n });\n\n if (hasClip) {\n context.restore();\n }\n },\n shouldDrawHit: function(canvas) {\n var layer = this.getLayer();\n var dd = Konva.DD;\n var layerUnderDrag =\n dd &&\n Konva.isDragging() &&\n Konva.DD.anim.getLayers().indexOf(layer) !== -1;\n return (\n (canvas && canvas.isCache) ||\n (layer &&\n layer.hitGraphEnabled() &&\n this.isVisible() &&\n !layerUnderDrag)\n );\n },\n getClientRect: function(attrs) {\n attrs = attrs || {};\n var skipTransform = attrs.skipTransform;\n var relativeTo = attrs.relativeTo;\n\n var minX, minY, maxX, maxY;\n var selfRect = {\n x: Infinity,\n y: Infinity,\n width: 0,\n height: 0\n };\n var that = this;\n this.children.each(function(child) {\n // skip invisible children\n if (!child.getVisible()) {\n return;\n }\n\n var rect = child.getClientRect({\n relativeTo: that,\n skipShadow: attrs.skipShadow,\n skipStroke: attrs.skipStroke\n });\n\n // skip invisible children (like empty groups)\n if (rect.width === 0 && rect.height === 0) {\n return;\n }\n\n if (minX === undefined) {\n // initial value for first child\n minX = rect.x;\n minY = rect.y;\n maxX = rect.x + rect.width;\n maxY = rect.y + rect.height;\n } else {\n minX = Math.min(minX, rect.x);\n minY = Math.min(minY, rect.y);\n maxX = Math.max(maxX, rect.x + rect.width);\n maxY = Math.max(maxY, rect.y + rect.height);\n }\n });\n\n // if child is group we need to make sure it has visible shapes inside\n var shapes = this.find('Shape');\n var hasVisible = false;\n for (var i = 0; i < shapes.length; i++) {\n var shape = shapes[i];\n if (shape._isVisible(this)) {\n hasVisible = true;\n break;\n }\n }\n\n if (hasVisible) {\n selfRect = {\n x: minX,\n y: minY,\n width: maxX - minX,\n height: maxY - minY\n };\n } else {\n selfRect = {\n x: 0,\n y: 0,\n width: 0,\n height: 0\n };\n }\n\n if (!skipTransform) {\n return this._transformedRect(selfRect, relativeTo);\n }\n return selfRect;\n }\n });\n\n Konva.Util.extend(Konva.Container, Konva.Node);\n // deprecated methods\n Konva.Container.prototype.get = Konva.Container.prototype.find;\n\n // add getters setters\n Konva.Factory.addComponentsGetterSetter(Konva.Container, 'clip', [\n 'x',\n 'y',\n 'width',\n 'height'\n ]);\n /**\n * get/set clip\n * @method\n * @name clip\n * @memberof Konva.Container.prototype\n * @param {Object} clip\n * @param {Number} clip.x\n * @param {Number} clip.y\n * @param {Number} clip.width\n * @param {Number} clip.height\n * @returns {Object}\n * @example\n * // get clip\n * var clip = container.clip();\n *\n * // set clip\n * container.setClip({\n * x: 20,\n * y: 20,\n * width: 20,\n * height: 20\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Container,\n 'clipX',\n undefined,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set clip x\n * @name clipX\n * @method\n * @memberof Konva.Container.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get clip x\n * var clipX = container.clipX();\n *\n * // set clip x\n * container.clipX(10);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Container,\n 'clipY',\n undefined,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set clip y\n * @name clipY\n * @method\n * @memberof Konva.Container.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get clip y\n * var clipY = container.clipY();\n *\n * // set clip y\n * container.clipY(10);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Container,\n 'clipWidth',\n undefined,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set clip width\n * @name clipWidth\n * @method\n * @memberof Konva.Container.prototype\n * @param {Number} width\n * @returns {Number}\n * @example\n * // get clip width\n * var clipWidth = container.clipWidth();\n *\n * // set clip width\n * container.clipWidth(100);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Container,\n 'clipHeight',\n undefined,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set clip height\n * @name clipHeight\n * @method\n * @memberof Konva.Container.prototype\n * @param {Number} height\n * @returns {Number}\n * @example\n * // get clip height\n * var clipHeight = container.clipHeight();\n *\n * // set clip height\n * container.clipHeight(100);\n */\n\n Konva.Factory.addGetterSetter(Konva.Container, 'clipFunc');\n /**\n * get/set clip function\n * @name clipFunc\n * @method\n * @memberof Konva.Container.prototype\n * @param {Function} function\n * @returns {Function}\n * @example\n * // get clip function\n * var clipFunction = container.clipFunc();\n *\n * // set clip height\n * container.clipFunc(function(ctx) {\n * ctx.rect(0, 0, 100, 100);\n * });\n */\n\n Konva.Collection.mapMethods(Konva.Container);\n})();\n\n(function(Konva) {\n 'use strict';\n var HAS_SHADOW = 'hasShadow';\n var SHADOW_RGBA = 'shadowRGBA';\n\n function _fillFunc(context) {\n context.fill();\n }\n function _strokeFunc(context) {\n context.stroke();\n }\n function _fillFuncHit(context) {\n context.fill();\n }\n function _strokeFuncHit(context) {\n context.stroke();\n }\n\n function _clearHasShadowCache() {\n this._clearCache(HAS_SHADOW);\n }\n\n function _clearGetShadowRGBACache() {\n this._clearCache(SHADOW_RGBA);\n }\n\n /**\n * Shape constructor. Shapes are primitive objects such as rectangles,\n * circles, text, lines, etc.\n * @constructor\n * @memberof Konva\n * @augments Konva.Node\n * @param {Object} config\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var customShape = new Konva.Shape({\n * x: 5,\n * y: 10,\n * fill: 'red',\n * // a Konva.Canvas renderer is passed into the sceneFunc function\n * sceneFunc: function(context, shape) {\n * context.beginPath();\n * context.moveTo(200, 50);\n * context.lineTo(420, 80);\n * context.quadraticCurveTo(300, 100, 260, 170);\n * context.closePath();\n * // Konva specific method\n * context.fillStrokeShape(shape);\n * }\n *});\n */\n Konva.Shape = function(config) {\n this.__init(config);\n };\n\n Konva.Util.addMethods(Konva.Shape, {\n __init: function(config) {\n this.nodeType = 'Shape';\n this._fillFunc = _fillFunc;\n this._strokeFunc = _strokeFunc;\n this._fillFuncHit = _fillFuncHit;\n this._strokeFuncHit = _strokeFuncHit;\n\n // set colorKey\n var shapes = Konva.shapes;\n var key;\n\n while (true) {\n key = Konva.Util.getRandomColor();\n if (key && !(key in shapes)) {\n break;\n }\n }\n\n this.colorKey = key;\n shapes[key] = this;\n\n // call super constructor\n Konva.Node.call(this, config);\n\n this.on(\n 'shadowColorChange.konva shadowBlurChange.konva shadowOffsetChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',\n _clearHasShadowCache\n );\n\n this.on(\n 'shadowColorChange.konva shadowOpacityChange.konva shadowEnabledChange.konva',\n _clearGetShadowRGBACache\n );\n },\n hasChildren: function() {\n return false;\n },\n getChildren: function() {\n return [];\n },\n /**\n * get canvas context tied to the layer\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Konva.Context}\n */\n getContext: function() {\n return this.getLayer().getContext();\n },\n /**\n * get canvas renderer tied to the layer. Note that this returns a canvas renderer, not a canvas element\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Konva.Canvas}\n */\n getCanvas: function() {\n return this.getLayer().getCanvas();\n },\n /**\n * returns whether or not a shadow will be rendered\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Boolean}\n */\n hasShadow: function() {\n return this._getCache(HAS_SHADOW, this._hasShadow);\n },\n _hasShadow: function() {\n return (\n this.getShadowEnabled() &&\n (this.getShadowOpacity() !== 0 &&\n !!(\n this.getShadowColor() ||\n this.getShadowBlur() ||\n this.getShadowOffsetX() ||\n this.getShadowOffsetY()\n ))\n );\n },\n getShadowRGBA: function() {\n return this._getCache(SHADOW_RGBA, this._getShadowRGBA);\n },\n _getShadowRGBA: function() {\n if (this.hasShadow()) {\n var rgba = Konva.Util.colorToRGBA(this.shadowColor());\n return (\n 'rgba(' +\n rgba.r +\n ',' +\n rgba.g +\n ',' +\n rgba.b +\n ',' +\n rgba.a * (this.getShadowOpacity() || 1) +\n ')'\n );\n }\n },\n /**\n * returns whether or not the shape will be filled\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Boolean}\n */\n hasFill: function() {\n return !!(\n this.getFill() ||\n this.getFillPatternImage() ||\n this.getFillLinearGradientColorStops() ||\n this.getFillRadialGradientColorStops()\n );\n },\n /**\n * returns whether or not the shape will be stroked\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Boolean}\n */\n hasStroke: function() {\n return (\n this.strokeEnabled() &&\n !!(this.stroke() || this.getStrokeLinearGradientColorStops())\n // TODO: do we need radial gradient\n // this.getStrokeRadialGradientColorStops()\n );\n },\n /**\n * determines if point is in the shape, regardless if other shapes are on top of it. Note: because\n * this method clears a temporary canvas and then redraws the shape, it performs very poorly if executed many times\n * consecutively. Please use the {@link Konva.Stage#getIntersection} method if at all possible\n * because it performs much better\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} point\n * @param {Number} point.x\n * @param {Number} point.y\n * @returns {Boolean}\n */\n intersects: function(point) {\n var stage = this.getStage(),\n bufferHitCanvas = stage.bufferHitCanvas,\n p;\n\n bufferHitCanvas.getContext().clear();\n this.drawHit(bufferHitCanvas);\n p = bufferHitCanvas.context.getImageData(\n Math.round(point.x),\n Math.round(point.y),\n 1,\n 1\n ).data;\n return p[3] > 0;\n },\n // extends Node.prototype.destroy\n destroy: function() {\n Konva.Node.prototype.destroy.call(this);\n delete Konva.shapes[this.colorKey];\n return this;\n },\n _useBufferCanvas: function(caching) {\n return (\n (!caching &&\n (this.perfectDrawEnabled() &&\n this.getAbsoluteOpacity() !== 1 &&\n this.hasFill() &&\n this.hasStroke() &&\n this.getStage())) ||\n (this.perfectDrawEnabled() &&\n this.hasShadow() &&\n this.getAbsoluteOpacity() !== 1 &&\n this.hasFill() &&\n this.hasStroke() &&\n this.getStage())\n );\n },\n /**\n * return self rectangle (x, y, width, height) of shape.\n * This method are not taken into account transformation and styles.\n * @method\n * @memberof Konva.Shape.prototype\n * @returns {Object} rect with {x, y, width, height} properties\n * @example\n *\n * rect.getSelfRect(); // return {x:0, y:0, width:rect.width(), height:rect.height()}\n * circle.getSelfRect(); // return {x: - circle.width() / 2, y: - circle.height() / 2, width:circle.width(), height:circle.height()}\n *\n */\n getSelfRect: function() {\n var size = this.getSize();\n return {\n x: this._centroid ? Math.round(-size.width / 2) : 0,\n y: this._centroid ? Math.round(-size.height / 2) : 0,\n width: size.width,\n height: size.height\n };\n },\n getClientRect: function(attrs) {\n attrs = attrs || {};\n var skipTransform = attrs.skipTransform;\n\n var relativeTo = attrs.relativeTo;\n\n var fillRect = this.getSelfRect();\n\n var applyStroke = !attrs.skipStroke && this.hasStroke();\n var strokeWidth = (applyStroke && this.strokeWidth()) || 0;\n\n // var scale = {\n // x: 1,\n // y: 1\n // };\n // if (!this.strokeScaleEnabled()) {\n // var scale = this.getAbsoluteScale();\n // // scale = {\n // // x: Math.abs(scale.x)\n // // }\n // }\n\n var fillAndStrokeWidth = fillRect.width + strokeWidth;\n var fillAndStrokeHeight = fillRect.height + strokeWidth;\n\n var applyShadow = !attrs.skipShadow && this.hasShadow();\n var shadowOffsetX = applyShadow ? this.shadowOffsetX() : 0;\n var shadowOffsetY = applyShadow ? this.shadowOffsetY() : 0;\n\n var preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX);\n var preHeight = fillAndStrokeHeight + Math.abs(shadowOffsetY);\n\n var blurRadius = (applyShadow && this.shadowBlur()) || 0;\n\n var width = preWidth + blurRadius * 2;\n var height = preHeight + blurRadius * 2;\n\n // if stroke, for example = 3\n // we need to set x to 1.5, but after Math.round it will be 2\n // as we have additional offset we need to increase width and height by 1 pixel\n var roundingOffset = 0;\n if (Math.round(strokeWidth / 2) !== strokeWidth / 2) {\n roundingOffset = 1;\n }\n var rect = {\n width: width + roundingOffset,\n height: height + roundingOffset,\n x:\n -Math.round(strokeWidth / 2 + blurRadius) +\n Math.min(shadowOffsetX, 0) +\n fillRect.x,\n y:\n -Math.round(strokeWidth / 2 + blurRadius) +\n Math.min(shadowOffsetY, 0) +\n fillRect.y\n };\n if (!skipTransform) {\n return this._transformedRect(rect, relativeTo);\n }\n return rect;\n },\n drawScene: function(can, top, caching, skipBuffer) {\n var layer = this.getLayer(),\n canvas = can || layer.getCanvas(),\n context = canvas.getContext(),\n cachedCanvas = this._cache.canvas,\n drawFunc = this.sceneFunc(),\n hasShadow = this.hasShadow(),\n hasStroke = this.hasStroke(),\n stage,\n bufferCanvas,\n bufferContext;\n\n if (!this.isVisible() && !caching) {\n return this;\n }\n if (cachedCanvas) {\n context.save();\n layer._applyTransform(this, context, top);\n this._drawCachedSceneCanvas(context);\n context.restore();\n return this;\n }\n if (!drawFunc) {\n return this;\n }\n context.save();\n // if buffer canvas is needed\n if (this._useBufferCanvas(caching) && !skipBuffer) {\n stage = this.getStage();\n bufferCanvas = stage.bufferCanvas;\n bufferContext = bufferCanvas.getContext();\n bufferContext.clear();\n bufferContext.save();\n bufferContext._applyLineJoin(this);\n // layer might be undefined if we are using cache before adding to layer\n if (!caching) {\n if (layer) {\n layer._applyTransform(this, bufferContext, top);\n } else {\n var m = this.getAbsoluteTransform(top).getMatrix();\n context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\n }\n }\n\n drawFunc.call(this, bufferContext, this);\n bufferContext.restore();\n\n var ratio = bufferCanvas.pixelRatio;\n if (hasShadow && !canvas.hitCanvas) {\n context.save();\n\n context._applyShadow(this);\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n context.drawImage(\n bufferCanvas._canvas,\n 0,\n 0,\n bufferCanvas.width / ratio,\n bufferCanvas.height / ratio\n );\n context.restore();\n } else {\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n context.drawImage(\n bufferCanvas._canvas,\n 0,\n 0,\n bufferCanvas.width / ratio,\n bufferCanvas.height / ratio\n );\n }\n } else {\n // if buffer canvas is not needed\n context._applyLineJoin(this);\n // layer might be undefined if we are using cache before adding to layer\n if (!caching) {\n if (layer) {\n layer._applyTransform(this, context, top);\n } else {\n var o = this.getAbsoluteTransform(top).getMatrix();\n context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);\n }\n }\n\n if (hasShadow && hasStroke && !canvas.hitCanvas) {\n context.save();\n // apply shadow\n if (!caching) {\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n }\n context._applyShadow(this);\n\n drawFunc.call(this, context, this);\n context.restore();\n // if shape has stroke we need to redraw shape\n // otherwise we will see a shadow under stroke (and over fill)\n // but I think this is unexpected behavior\n if (this.hasFill() && this.getShadowForStrokeEnabled()) {\n drawFunc.call(this, context, this);\n }\n } else if (hasShadow && !canvas.hitCanvas) {\n context.save();\n if (!caching) {\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n }\n context._applyShadow(this);\n drawFunc.call(this, context, this);\n context.restore();\n } else {\n if (!caching) {\n context._applyOpacity(this);\n context._applyGlobalCompositeOperation(this);\n }\n drawFunc.call(this, context, this);\n }\n }\n context.restore();\n return this;\n },\n drawHit: function(can, top, caching) {\n var layer = this.getLayer(),\n canvas = can || layer.hitCanvas,\n context = canvas.getContext(),\n drawFunc = this.hitFunc() || this.sceneFunc(),\n cachedCanvas = this._cache.canvas,\n cachedHitCanvas = cachedCanvas && cachedCanvas.hit;\n\n if (!this.shouldDrawHit(canvas) && !caching) {\n return this;\n }\n if (layer) {\n layer.clearHitCache();\n }\n if (cachedHitCanvas) {\n context.save();\n layer._applyTransform(this, context, top);\n this._drawCachedHitCanvas(context);\n context.restore();\n return this;\n }\n if (!drawFunc) {\n return this;\n }\n context.save();\n context._applyLineJoin(this);\n if (!caching) {\n if (layer) {\n layer._applyTransform(this, context, top);\n } else {\n var o = this.getAbsoluteTransform(top).getMatrix();\n context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);\n }\n }\n drawFunc.call(this, context, this);\n context.restore();\n return this;\n },\n /**\n * draw hit graph using the cached scene canvas\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Integer} alphaThreshold alpha channel threshold that determines whether or not\n * a pixel should be drawn onto the hit graph. Must be a value between 0 and 255.\n * The default is 0\n * @returns {Konva.Shape}\n * @example\n * shape.cache();\n * shape.drawHitFromCache();\n */\n drawHitFromCache: function(alphaThreshold) {\n var threshold = alphaThreshold || 0,\n cachedCanvas = this._cache.canvas,\n sceneCanvas = this._getCachedSceneCanvas(),\n hitCanvas = cachedCanvas.hit,\n hitContext = hitCanvas.getContext(),\n hitWidth = hitCanvas.getWidth(),\n hitHeight = hitCanvas.getHeight(),\n hitImageData,\n hitData,\n len,\n rgbColorKey,\n i,\n alpha;\n\n hitContext.clear();\n hitContext.drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);\n\n try {\n hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);\n hitData = hitImageData.data;\n len = hitData.length;\n rgbColorKey = Konva.Util._hexToRgb(this.colorKey);\n\n // replace non transparent pixels with color key\n for (i = 0; i < len; i += 4) {\n alpha = hitData[i + 3];\n if (alpha > threshold) {\n hitData[i] = rgbColorKey.r;\n hitData[i + 1] = rgbColorKey.g;\n hitData[i + 2] = rgbColorKey.b;\n hitData[i + 3] = 255;\n } else {\n hitData[i + 3] = 0;\n }\n }\n hitContext.putImageData(hitImageData, 0, 0);\n } catch (e) {\n Konva.Util.error(\n 'Unable to draw hit graph from cached scene canvas. ' + e.message\n );\n }\n\n return this;\n }\n });\n Konva.Util.extend(Konva.Shape, Konva.Node);\n\n // add getters and setters\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'stroke',\n undefined,\n Konva.Validators.getStringValidator()\n );\n\n /**\n * get/set stroke color\n * @name stroke\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} color\n * @returns {String}\n * @example\n * // get stroke color\n * var stroke = shape.stroke();\n *\n * // set stroke color with color string\n * shape.stroke('green');\n *\n * // set stroke color with hex\n * shape.stroke('#00ff00');\n *\n * // set stroke color with rgb\n * shape.stroke('rgb(0,255,0)');\n *\n * // set stroke color with rgba and make it 50% opaque\n * shape.stroke('rgba(0,255,0,0.5');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeWidth',\n 2,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set stroke width\n * @name strokeWidth\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} strokeWidth\n * @returns {Number}\n * @example\n * // get stroke width\n * var strokeWidth = shape.strokeWidth();\n *\n * // set stroke width\n * shape.strokeWidth();\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeHitEnabled',\n true,\n Konva.Validators.getBooleanValidator()\n );\n\n /**\n * get/set strokeHitEnabled property. Useful for performance optimization.\n * You may set `shape.strokeHitEnabled(false)`. In this case stroke will be no draw on hit canvas, so hit area\n * of shape will be decreased (by lineWidth / 2). Remember that non closed line with `strokeHitEnabled = false`\n * will be not drawn on hit canvas, that is mean line will no trigger pointer events (like mouseover)\n * Default value is true\n * @name strokeHitEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} strokeHitEnabled\n * @returns {Boolean}\n * @example\n * // get strokeHitEnabled\n * var strokeHitEnabled = shape.strokeHitEnabled();\n *\n * // set strokeHitEnabled\n * shape.strokeHitEnabled();\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'perfectDrawEnabled',\n true,\n Konva.Validators.getBooleanValidator()\n );\n\n /**\n * get/set perfectDrawEnabled. If a shape has fill, stroke and opacity you may set `perfectDrawEnabled` to false to improve performance.\n * See http://konvajs.github.io/docs/performance/Disable_Perfect_Draw.html for more information.\n * Default value is true\n * @name perfectDrawEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} perfectDrawEnabled\n * @returns {Boolean}\n * @example\n * // get perfectDrawEnabled\n * var perfectDrawEnabled = shape.perfectDrawEnabled();\n *\n * // set perfectDrawEnabled\n * shape.perfectDrawEnabled();\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowForStrokeEnabled',\n true,\n Konva.Validators.getBooleanValidator()\n );\n\n /**\n * get/set shadowForStrokeEnabled. Useful for performance optimization.\n * You may set `shape.shadowForStrokeEnabled(false)`. In this case stroke will be no draw shadow for stroke.\n * Remember if you set `shadowForStrokeEnabled = false` for non closed line - that line with have no shadow!.\n * Default value is true\n * @name shadowForStrokeEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} shadowForStrokeEnabled\n * @returns {Boolean}\n * @example\n * // get shadowForStrokeEnabled\n * var shadowForStrokeEnabled = shape.shadowForStrokeEnabled();\n *\n * // set shadowForStrokeEnabled\n * shape.shadowForStrokeEnabled();\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'lineJoin');\n\n /**\n * get/set line join. Can be miter, round, or bevel. The\n * default is miter\n * @name lineJoin\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} lineJoin\n * @returns {String}\n * @example\n * // get line join\n * var lineJoin = shape.lineJoin();\n *\n * // set line join\n * shape.lineJoin('round');\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'lineCap');\n\n /**\n * get/set line cap. Can be butt, round, or square\n * @name lineCap\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} lineCap\n * @returns {String}\n * @example\n * // get line cap\n * var lineCap = shape.lineCap();\n *\n * // set line cap\n * shape.lineCap('round');\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'sceneFunc');\n\n /**\n * get/set scene draw function\n * @name sceneFunc\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Function} drawFunc drawing function\n * @returns {Function}\n * @example\n * // get scene draw function\n * var sceneFunc = shape.sceneFunc();\n *\n * // set scene draw function\n * shape.sceneFunc(function(context) {\n * context.beginPath();\n * context.rect(0, 0, this.width(), this.height());\n * context.closePath();\n * context.fillStrokeShape(this);\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'hitFunc');\n\n /**\n * get/set hit draw function\n * @name hitFunc\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Function} drawFunc drawing function\n * @returns {Function}\n * @example\n * // get hit draw function\n * var hitFunc = shape.hitFunc();\n *\n * // set hit draw function\n * shape.hitFunc(function(context) {\n * context.beginPath();\n * context.rect(0, 0, this.width(), this.height());\n * context.closePath();\n * context.fillStrokeShape(this);\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'dash');\n\n /**\n * get/set dash array for stroke.\n * @name dash\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Array} dash\n * @returns {Array}\n * @example\n * // apply dashed stroke that is 10px long and 5 pixels apart\n * line.dash([10, 5]);\n * // apply dashed stroke that is made up of alternating dashed\n * // lines that are 10px long and 20px apart, and dots that have\n * // a radius of 5px and are 20px apart\n * line.dash([10, 20, 0.001, 20]);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'dashOffset',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set dash offset for stroke.\n * @name dash\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} dash offset\n * @returns {Number}\n * @example\n * // apply dashed stroke that is 10px long and 5 pixels apart with an offset of 5px\n * line.dash([10, 5]);\n * line.dashOffset(5);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowColor',\n undefined,\n Konva.Validators.getStringValidator()\n );\n\n /**\n * get/set shadow color\n * @name shadowColor\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} color\n * @returns {String}\n * @example\n * // get shadow color\n * var shadow = shape.shadowColor();\n *\n * // set shadow color with color string\n * shape.shadowColor('green');\n *\n * // set shadow color with hex\n * shape.shadowColor('#00ff00');\n *\n * // set shadow color with rgb\n * shape.shadowColor('rgb(0,255,0)');\n *\n * // set shadow color with rgba and make it 50% opaque\n * shape.shadowColor('rgba(0,255,0,0.5');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowBlur',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set shadow blur\n * @name shadowBlur\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} blur\n * @returns {Number}\n * @example\n * // get shadow blur\n * var shadowBlur = shape.shadowBlur();\n *\n * // set shadow blur\n * shape.shadowBlur(10);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowOpacity',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set shadow opacity. must be a value between 0 and 1\n * @name shadowOpacity\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} opacity\n * @returns {Number}\n * @example\n * // get shadow opacity\n * var shadowOpacity = shape.shadowOpacity();\n *\n * // set shadow opacity\n * shape.shadowOpacity(0.5);\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'shadowOffset', [\n 'x',\n 'y'\n ]);\n\n /**\n * get/set shadow offset\n * @name shadowOffset\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} offset\n * @param {Number} offset.x\n * @param {Number} offset.y\n * @returns {Object}\n * @example\n * // get shadow offset\n * var shadowOffset = shape.shadowOffset();\n *\n * // set shadow offset\n * shape.shadowOffset({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowOffsetX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set shadow offset x\n * @name shadowOffsetX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get shadow offset x\n * var shadowOffsetX = shape.shadowOffsetX();\n *\n * // set shadow offset x\n * shape.shadowOffsetX(5);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'shadowOffsetY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set shadow offset y\n * @name shadowOffsetY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get shadow offset y\n * var shadowOffsetY = shape.shadowOffsetY();\n *\n * // set shadow offset y\n * shape.shadowOffsetY(5);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternImage');\n\n /**\n * get/set fill pattern image\n * @name fillPatternImage\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Image} image object\n * @returns {Image}\n * @example\n * // get fill pattern image\n * var fillPatternImage = shape.fillPatternImage();\n *\n * // set fill pattern image\n * var imageObj = new Image();\n * imageObj.onload = function() {\n * shape.fillPatternImage(imageObj);\n * };\n * imageObj.src = 'path/to/image/jpg';\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fill',\n undefined,\n Konva.Validators.getStringValidator()\n );\n\n /**\n * get/set fill color\n * @name fill\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} color\n * @returns {String}\n * @example\n * // get fill color\n * var fill = shape.fill();\n *\n * // set fill color with color string\n * shape.fill('green');\n *\n * // set fill color with hex\n * shape.fill('#00ff00');\n *\n * // set fill color with rgb\n * shape.fill('rgb(0,255,0)');\n *\n * // set fill color with rgba and make it 50% opaque\n * shape.fill('rgba(0,255,0,0.5');\n *\n * // shape without fill\n * shape.fill(null);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern x\n * @name fillPatternX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill pattern x\n * var fillPatternX = shape.fillPatternX();\n * // set fill pattern x\n * shape.fillPatternX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern y\n * @name fillPatternY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill pattern y\n * var fillPatternY = shape.fillPatternY();\n * // set fill pattern y\n * shape.fillPatternY(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientColorStops');\n\n /**\n * get/set fill linear gradient color stops\n * @name fillLinearGradientColorStops\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Array} colorStops\n * @returns {Array} colorStops\n * @example\n * // get fill linear gradient color stops\n * var colorStops = shape.fillLinearGradientColorStops();\n *\n * // create a linear gradient that starts with red, changes to blue\n * // halfway through, and then changes to green\n * shape.fillLinearGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'strokeLinearGradientColorStops');\n\n /**\n * get/set stroke linear gradient color stops\n * @name strokeLinearGradientColorStops\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Array} colorStops\n * @returns {Array} colorStops\n * @example\n * // get stroke linear gradient color stops\n * var colorStops = shape.strokeLinearGradientColorStops();\n *\n * // create a linear gradient that starts with red, changes to blue\n * // halfway through, and then changes to green\n * shape.strokeLinearGradientColorStops([0, 'red', 0.5, 'blue', 1, 'green']);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillRadialGradientStartRadius',\n 0\n );\n\n /**\n * get/set fill radial gradient start radius\n * @name fillRadialGradientStartRadius\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} radius\n * @returns {Number}\n * @example\n * // get radial gradient start radius\n * var startRadius = shape.fillRadialGradientStartRadius();\n *\n * // set radial gradient start radius\n * shape.fillRadialGradientStartRadius(0);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndRadius', 0);\n\n /**\n * get/set fill radial gradient end radius\n * @name fillRadialGradientEndRadius\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} radius\n * @returns {Number}\n * @example\n * // get radial gradient end radius\n * var endRadius = shape.fillRadialGradientEndRadius();\n *\n * // set radial gradient end radius\n * shape.fillRadialGradientEndRadius(100);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientColorStops');\n\n /**\n * get/set fill radial gradient color stops\n * @name fillRadialGradientColorStops\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} colorStops\n * @returns {Array}\n * @example\n * // get fill radial gradient color stops\n * var colorStops = shape.fillRadialGradientColorStops();\n *\n * // create a radial gradient that starts with red, changes to blue\n * // halfway through, and then changes to green\n * shape.fillRadialGradientColorStops(0, 'red', 0.5, 'blue', 1, 'green');\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRepeat', 'repeat');\n\n /**\n * get/set fill pattern repeat. Can be 'repeat', 'repeat-x', 'repeat-y', or 'no-repeat'. The default is 'repeat'\n * @name fillPatternRepeat\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} repeat\n * @returns {String}\n * @example\n * // get fill pattern repeat\n * var repeat = shape.fillPatternRepeat();\n *\n * // repeat pattern in x direction only\n * shape.fillPatternRepeat('repeat-x');\n *\n * // do not repeat the pattern\n * shape.fillPatternRepeat('no repeat');\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillEnabled', true);\n\n /**\n * get/set fill enabled flag\n * @name fillEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get fill enabled flag\n * var fillEnabled = shape.fillEnabled();\n *\n * // disable fill\n * shape.fillEnabled(false);\n *\n * // enable fill\n * shape.fillEnabled(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'strokeEnabled', true);\n\n /**\n * get/set stroke enabled flag\n * @name strokeEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get stroke enabled flag\n * var strokeEnabled = shape.strokeEnabled();\n *\n * // disable stroke\n * shape.strokeEnabled(false);\n *\n * // enable stroke\n * shape.strokeEnabled(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'shadowEnabled', true);\n\n /**\n * get/set shadow enabled flag\n * @name shadowEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get shadow enabled flag\n * var shadowEnabled = shape.shadowEnabled();\n *\n * // disable shadow\n * shape.shadowEnabled(false);\n *\n * // enable shadow\n * shape.shadowEnabled(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'dashEnabled', true);\n\n /**\n * get/set dash enabled flag\n * @name dashEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get dash enabled flag\n * var dashEnabled = shape.dashEnabled();\n *\n * // disable dash\n * shape.dashEnabled(false);\n *\n * // enable dash\n * shape.dashEnabled(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'strokeScaleEnabled', true);\n\n /**\n * get/set strokeScale enabled flag\n * @name strokeScaleEnabled\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get stroke scale enabled flag\n * var strokeScaleEnabled = shape.strokeScaleEnabled();\n *\n * // disable stroke scale\n * shape.strokeScaleEnabled(false);\n *\n * // enable stroke scale\n * shape.strokeScaleEnabled(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillPriority', 'color');\n\n /**\n * get/set fill priority. can be color, pattern, linear-gradient, or radial-gradient. The default is color.\n * This is handy if you want to toggle between different fill types.\n * @name fillPriority\n * @method\n * @memberof Konva.Shape.prototype\n * @param {String} priority\n * @returns {String}\n * @example\n * // get fill priority\n * var fillPriority = shape.fillPriority();\n *\n * // set fill priority\n * shape.fillPriority('linear-gradient');\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternOffset', [\n 'x',\n 'y'\n ]);\n\n /**\n * get/set fill pattern offset\n * @name fillPatternOffset\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} offset\n * @param {Number} offset.x\n * @param {Number} offset.y\n * @returns {Object}\n * @example\n * // get fill pattern offset\n * var patternOffset = shape.fillPatternOffset();\n *\n * // set fill pattern offset\n * shape.fillPatternOffset({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternOffsetX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern offset x\n * @name fillPatternOffsetX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill pattern offset x\n * var patternOffsetX = shape.fillPatternOffsetX();\n *\n * // set fill pattern offset x\n * shape.fillPatternOffsetX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternOffsetY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern offset y\n * @name fillPatternOffsetY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill pattern offset y\n * var patternOffsetY = shape.fillPatternOffsetY();\n *\n * // set fill pattern offset y\n * shape.fillPatternOffsetY(10);\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Shape, 'fillPatternScale', [\n 'x',\n 'y'\n ]);\n\n /**\n * get/set fill pattern scale\n * @name fillPatternScale\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} scale\n * @param {Number} scale.x\n * @param {Number} scale.y\n * @returns {Object}\n * @example\n * // get fill pattern scale\n * var patternScale = shape.fillPatternScale();\n *\n * // set fill pattern scale\n * shape.fillPatternScale({\n * x: 2\n * y: 2\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternScaleX',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern scale x\n * @name fillPatternScaleX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill pattern scale x\n * var patternScaleX = shape.fillPatternScaleX();\n *\n * // set fill pattern scale x\n * shape.fillPatternScaleX(2);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillPatternScaleY',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set fill pattern scale y\n * @name fillPatternScaleY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill pattern scale y\n * var patternScaleY = shape.fillPatternScaleY();\n *\n * // set fill pattern scale y\n * shape.fillPatternScaleY(2);\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'fillLinearGradientStartPoint',\n ['x', 'y']\n );\n\n /**\n * get/set fill linear gradient start point\n * @name fillLinearGradientStartPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} startPoint\n * @param {Number} startPoint.x\n * @param {Number} startPoint.y\n * @returns {Object}\n * @example\n * // get fill linear gradient start point\n * var startPoint = shape.fillLinearGradientStartPoint();\n *\n * // set fill linear gradient start point\n * shape.fillLinearGradientStartPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientStartPoint',\n ['x', 'y']\n );\n\n /**\n * get/set stroke linear gradient start point\n * @name strokeLinearGradientStartPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} startPoint\n * @param {Number} startPoint.x\n * @param {Number} startPoint.y\n * @returns {Object}\n * @example\n * // get stroke linear gradient start point\n * var startPoint = shape.strokeLinearGradientStartPoint();\n *\n * // set stroke linear gradient start point\n * shape.strokeLinearGradientStartPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillLinearGradientStartPointX',\n 0\n );\n\n /**\n * get/set fill linear gradient start point x\n * @name fillLinearGradientStartPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill linear gradient start point x\n * var startPointX = shape.fillLinearGradientStartPointX();\n *\n * // set fill linear gradient start point x\n * shape.fillLinearGradientStartPointX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientStartPointX',\n 0\n );\n\n /**\n * get/set stroke linear gradient start point x\n * @name linearLinearGradientStartPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get stroke linear gradient start point x\n * var startPointX = shape.strokeLinearGradientStartPointX();\n *\n * // set stroke linear gradient start point x\n * shape.strokeLinearGradientStartPointX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillLinearGradientStartPointY',\n 0\n );\n\n /**\n * get/set fill linear gradient start point y\n * @name fillLinearGradientStartPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill linear gradient start point y\n * var startPointY = shape.fillLinearGradientStartPointY();\n *\n * // set fill linear gradient start point y\n * shape.fillLinearGradientStartPointY(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientStartPointY',\n 0\n );\n /**\n * get/set stroke linear gradient start point y\n * @name strokeLinearGradientStartPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get stroke linear gradient start point y\n * var startPointY = shape.strokeLinearGradientStartPointY();\n *\n * // set stroke linear gradient start point y\n * shape.strokeLinearGradientStartPointY(20);\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'fillLinearGradientEndPoint',\n ['x', 'y']\n );\n\n /**\n * get/set fill linear gradient end point\n * @name fillLinearGradientEndPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} endPoint\n * @param {Number} endPoint.x\n * @param {Number} endPoint.y\n * @returns {Object}\n * @example\n * // get fill linear gradient end point\n * var endPoint = shape.fillLinearGradientEndPoint();\n *\n * // set fill linear gradient end point\n * shape.fillLinearGradientEndPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientEndPoint',\n ['x', 'y']\n );\n\n /**\n * get/set stroke linear gradient end point\n * @name strokeLinearGradientEndPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} endPoint\n * @param {Number} endPoint.x\n * @param {Number} endPoint.y\n * @returns {Object}\n * @example\n * // get stroke linear gradient end point\n * var endPoint = shape.strokeLinearGradientEndPoint();\n *\n * // set stroke linear gradient end point\n * shape.strokeLinearGradientEndPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointX', 0);\n /**\n * get/set fill linear gradient end point x\n * @name fillLinearGradientEndPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill linear gradient end point x\n * var endPointX = shape.fillLinearGradientEndPointX();\n *\n * // set fill linear gradient end point x\n * shape.fillLinearGradientEndPointX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientEndPointX',\n 0\n );\n /**\n * get/set fill linear gradient end point x\n * @name strokeLinearGradientEndPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get stroke linear gradient end point x\n * var endPointX = shape.strokeLinearGradientEndPointX();\n *\n * // set stroke linear gradient end point x\n * shape.strokeLinearGradientEndPointX(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillLinearGradientEndPointY', 0);\n /**\n * get/set fill linear gradient end point y\n * @name fillLinearGradientEndPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill linear gradient end point y\n * var endPointY = shape.fillLinearGradientEndPointY();\n *\n * // set fill linear gradient end point y\n * shape.fillLinearGradientEndPointY(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'strokeLinearGradientEndPointY',\n 0\n );\n /**\n * get/set stroke linear gradient end point y\n * @name strokeLinearGradientEndPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get stroke linear gradient end point y\n * var endPointY = shape.strokeLinearGradientEndPointY();\n *\n * // set stroke linear gradient end point y\n * shape.strokeLinearGradientEndPointY(20);\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'fillRadialGradientStartPoint',\n ['x', 'y']\n );\n\n /**\n * get/set fill radial gradient start point\n * @name fillRadialGradientStartPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} startPoint\n * @param {Number} startPoint.x\n * @param {Number} startPoint.y\n * @returns {Object}\n * @example\n * // get fill radial gradient start point\n * var startPoint = shape.fillRadialGradientStartPoint();\n *\n * // set fill radial gradient start point\n * shape.fillRadialGradientStartPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillRadialGradientStartPointX',\n 0\n );\n /**\n * get/set fill radial gradient start point x\n * @name fillRadialGradientStartPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill radial gradient start point x\n * var startPointX = shape.fillRadialGradientStartPointX();\n *\n * // set fill radial gradient start point x\n * shape.fillRadialGradientStartPointX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Shape,\n 'fillRadialGradientStartPointY',\n 0\n );\n /**\n * get/set fill radial gradient start point y\n * @name fillRadialGradientStartPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill radial gradient start point y\n * var startPointY = shape.fillRadialGradientStartPointY();\n *\n * // set fill radial gradient start point y\n * shape.fillRadialGradientStartPointY(20);\n */\n\n Konva.Factory.addComponentsGetterSetter(\n Konva.Shape,\n 'fillRadialGradientEndPoint',\n ['x', 'y']\n );\n\n /**\n * get/set fill radial gradient end point\n * @name fillRadialGradientEndPoint\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Object} endPoint\n * @param {Number} endPoint.x\n * @param {Number} endPoint.y\n * @returns {Object}\n * @example\n * // get fill radial gradient end point\n * var endPoint = shape.fillRadialGradientEndPoint();\n *\n * // set fill radial gradient end point\n * shape.fillRadialGradientEndPoint({\n * x: 20\n * y: 10\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointX', 0);\n /**\n * get/set fill radial gradient end point x\n * @name fillRadialGradientEndPointX\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get fill radial gradient end point x\n * var endPointX = shape.fillRadialGradientEndPointX();\n *\n * // set fill radial gradient end point x\n * shape.fillRadialGradientEndPointX(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillRadialGradientEndPointY', 0);\n /**\n * get/set fill radial gradient end point y\n * @name fillRadialGradientEndPointY\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get fill radial gradient end point y\n * var endPointY = shape.fillRadialGradientEndPointY();\n *\n * // set fill radial gradient end point y\n * shape.fillRadialGradientEndPointY(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Shape, 'fillPatternRotation', 0);\n\n /**\n * get/set fill pattern rotation in degrees\n * @name fillPatternRotation\n * @method\n * @memberof Konva.Shape.prototype\n * @param {Number} rotation\n * @returns {Konva.Shape}\n * @example\n * // get fill pattern rotation\n * var patternRotation = shape.fillPatternRotation();\n *\n * // set fill pattern rotation\n * shape.fillPatternRotation(20);\n */\n\n Konva.Factory.backCompat(Konva.Shape, {\n dashArray: 'dash',\n getDashArray: 'getDash',\n setDashArray: 'getDash',\n\n drawFunc: 'sceneFunc',\n getDrawFunc: 'getSceneFunc',\n setDrawFunc: 'setSceneFunc',\n\n drawHitFunc: 'hitFunc',\n getDrawHitFunc: 'getHitFunc',\n setDrawHitFunc: 'setHitFunc'\n });\n\n Konva.Collection.mapMethods(Konva.Shape);\n})(Konva);\n\n(function() {\n 'use strict';\n // CONSTANTS\n var STAGE = 'Stage',\n STRING = 'string',\n PX = 'px',\n MOUSEOUT = 'mouseout',\n MOUSELEAVE = 'mouseleave',\n MOUSEOVER = 'mouseover',\n MOUSEENTER = 'mouseenter',\n MOUSEMOVE = 'mousemove',\n MOUSEDOWN = 'mousedown',\n MOUSEUP = 'mouseup',\n CONTEXTMENU = 'contextmenu',\n CLICK = 'click',\n DBL_CLICK = 'dblclick',\n TOUCHSTART = 'touchstart',\n TOUCHEND = 'touchend',\n TAP = 'tap',\n DBL_TAP = 'dbltap',\n TOUCHMOVE = 'touchmove',\n WHEEL = 'wheel',\n CONTENT_MOUSEOUT = 'contentMouseout',\n CONTENT_MOUSEOVER = 'contentMouseover',\n CONTENT_MOUSEMOVE = 'contentMousemove',\n CONTENT_MOUSEDOWN = 'contentMousedown',\n CONTENT_MOUSEUP = 'contentMouseup',\n CONTENT_CONTEXTMENU = 'contentContextmenu',\n CONTENT_CLICK = 'contentClick',\n CONTENT_DBL_CLICK = 'contentDblclick',\n CONTENT_TOUCHSTART = 'contentTouchstart',\n CONTENT_TOUCHEND = 'contentTouchend',\n CONTENT_DBL_TAP = 'contentDbltap',\n CONTENT_TAP = 'contentTap',\n CONTENT_TOUCHMOVE = 'contentTouchmove',\n CONTENT_WHEEL = 'contentWheel',\n DIV = 'div',\n RELATIVE = 'relative',\n KONVA_CONTENT = 'konvajs-content',\n SPACE = ' ',\n UNDERSCORE = '_',\n CONTAINER = 'container',\n EMPTY_STRING = '',\n EVENTS = [\n MOUSEDOWN,\n MOUSEMOVE,\n MOUSEUP,\n MOUSEOUT,\n TOUCHSTART,\n TOUCHMOVE,\n TOUCHEND,\n MOUSEOVER,\n WHEEL,\n CONTEXTMENU\n ],\n // cached variables\n eventsLength = EVENTS.length;\n\n function addEvent(ctx, eventName) {\n ctx.content.addEventListener(\n eventName,\n function(evt) {\n ctx[UNDERSCORE + eventName](evt);\n },\n false\n );\n }\n\n /**\n * Stage constructor. A stage is used to contain multiple layers\n * @constructor\n * @memberof Konva\n * @augments Konva.Container\n * @param {Object} config\n * @param {String|Element} config.container Container selector or DOM element\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var stage = new Konva.Stage({\n * width: 500,\n * height: 800,\n * container: 'containerId' // or \"#containerId\" or \".containerClass\"\n * });\n */\n Konva.Stage = function(config) {\n this.___init(config);\n };\n\n Konva.Util.addMethods(Konva.Stage, {\n ___init: function(config) {\n this.nodeType = STAGE;\n // call super constructor\n Konva.Container.call(this, config);\n this._id = Konva.idCounter++;\n this._buildDOM();\n this._bindContentEvents();\n this._enableNestedTransforms = false;\n Konva.stages.push(this);\n },\n _validateAdd: function(child) {\n if (child.getType() !== 'Layer') {\n Konva.Util.throw('You may only add layers to the stage.');\n }\n },\n /**\n * set container dom element which contains the stage wrapper div element\n * @method\n * @memberof Konva.Stage.prototype\n * @param {DomElement} container can pass in a dom element or id string\n */\n setContainer: function(container) {\n if (typeof container === STRING) {\n if (container.charAt(0) === '.') {\n var className = container.slice(1);\n container = Konva.document.getElementsByClassName(className)[0];\n } else {\n var id;\n if (container.charAt(0) !== '#') {\n id = container;\n } else {\n id = container.slice(1);\n }\n container = Konva.document.getElementById(id);\n }\n if (!container) {\n throw 'Can not find container in document with id ' + id;\n }\n }\n this._setAttr(CONTAINER, container);\n return this;\n },\n shouldDrawHit: function() {\n return true;\n },\n draw: function() {\n Konva.Node.prototype.draw.call(this);\n return this;\n },\n /**\n * draw layer scene graphs\n * @name draw\n * @method\n * @memberof Konva.Stage.prototype\n */\n\n /**\n * draw layer hit graphs\n * @name drawHit\n * @method\n * @memberof Konva.Stage.prototype\n */\n\n /**\n * set height\n * @method\n * @memberof Konva.Stage.prototype\n * @param {Number} height\n */\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n this._resizeDOM();\n return this;\n },\n /**\n * set width\n * @method\n * @memberof Konva.Stage.prototype\n * @param {Number} width\n */\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n this._resizeDOM();\n return this;\n },\n /**\n * clear all layers\n * @method\n * @memberof Konva.Stage.prototype\n */\n clear: function() {\n var layers = this.children,\n len = layers.length,\n n;\n\n for (n = 0; n < len; n++) {\n layers[n].clear();\n }\n return this;\n },\n clone: function(obj) {\n if (!obj) {\n obj = {};\n }\n obj.container = Konva.document.createElement(DIV);\n return Konva.Container.prototype.clone.call(this, obj);\n },\n /**\n * destroy stage\n * @method\n * @memberof Konva.Stage.prototype\n */\n destroy: function() {\n var content = this.content;\n Konva.Container.prototype.destroy.call(this);\n\n if (content && Konva.Util._isInDocument(content)) {\n this.getContainer().removeChild(content);\n }\n var index = Konva.stages.indexOf(this);\n if (index > -1) {\n Konva.stages.splice(index, 1);\n }\n return this;\n },\n /**\n * get pointer position which can be a touch position or mouse position\n * @method\n * @memberof Konva.Stage.prototype\n * @returns {Object}\n */\n getPointerPosition: function() {\n return this.pointerPos;\n },\n getStage: function() {\n return this;\n },\n /**\n * get stage content div element which has the\n * the class name \"konvajs-content\"\n * @method\n * @memberof Konva.Stage.prototype\n */\n getContent: function() {\n return this.content;\n },\n _toKonvaCanvas: function(config) {\n config = config || {};\n\n var x = config.x || 0,\n y = config.y || 0,\n canvas = new Konva.SceneCanvas({\n width: config.width || this.getWidth(),\n height: config.height || this.getHeight(),\n pixelRatio: config.pixelRatio || 1\n }),\n _context = canvas.getContext()._context,\n layers = this.children;\n\n if (x || y) {\n _context.translate(-1 * x, -1 * y);\n }\n\n layers.each(function(layer) {\n if (!layer.isVisible()) {\n return;\n }\n var layerCanvas = layer._toKonvaCanvas(config);\n _context.drawImage(\n layerCanvas._canvas,\n x,\n y,\n layerCanvas.getWidth() / layerCanvas.getPixelRatio(),\n layerCanvas.getHeight() / layerCanvas.getPixelRatio()\n );\n });\n return canvas;\n },\n /**\n * converts stage into an image.\n * @method\n * @memberof Konva.Stage.prototype\n * @param {Object} config\n * @param {Function} config.callback function executed when the composite has completed\n * @param {String} [config.mimeType] can be \"image/png\" or \"image/jpeg\".\n * \"image/png\" is the default\n * @param {Number} [config.x] x position of canvas section\n * @param {Number} [config.y] y position of canvas section\n * @param {Number} [config.width] width of canvas section\n * @param {Number} [config.height] height of canvas section\n * @param {Number} [config.quality] jpeg quality. If using an \"image/jpeg\" mimeType,\n * you can specify the quality from 0 to 1, where 0 is very poor quality and 1\n * is very high quality\n */\n toImage: function(config) {\n var cb = config.callback;\n\n config.callback = function(dataUrl) {\n Konva.Util._getImage(dataUrl, function(img) {\n cb(img);\n });\n };\n this.toDataURL(config);\n },\n /**\n * get visible intersection shape. This is the preferred\n * method for determining if a point intersects a shape or not\n * @method\n * @memberof Konva.Stage.prototype\n * @param {Object} pos\n * @param {Number} pos.x\n * @param {Number} pos.y\n * @param {String} [selector]\n * @returns {Konva.Node}\n * @example\n * var shape = stage.getIntersection({x: 50, y: 50});\n * // or if you interested in shape parent:\n * var group = stage.getIntersection({x: 50, y: 50}, 'Group');\n */\n getIntersection: function(pos, selector) {\n var layers = this.getChildren(),\n len = layers.length,\n end = len - 1,\n n,\n shape;\n\n for (n = end; n >= 0; n--) {\n shape = layers[n].getIntersection(pos, selector);\n if (shape) {\n return shape;\n }\n }\n\n return null;\n },\n _resizeDOM: function() {\n if (this.content) {\n var width = this.getWidth(),\n height = this.getHeight(),\n layers = this.getChildren(),\n len = layers.length,\n n,\n layer;\n\n // set content dimensions\n this.content.style.width = width + PX;\n this.content.style.height = height + PX;\n\n this.bufferCanvas.setSize(width, height);\n this.bufferHitCanvas.setSize(width, height);\n\n // set layer dimensions\n for (n = 0; n < len; n++) {\n layer = layers[n];\n layer.setSize(width, height);\n layer.draw();\n }\n }\n },\n /**\n * add layer or layers to stage\n * @method\n * @memberof Konva.Stage.prototype\n * @param {...Konva.Layer} layer\n * @example\n * stage.add(layer1, layer2, layer3);\n */\n add: function(layer) {\n if (arguments.length > 1) {\n for (var i = 0; i < arguments.length; i++) {\n this.add(arguments[i]);\n }\n return this;\n }\n Konva.Container.prototype.add.call(this, layer);\n layer._setCanvasSize(this.width(), this.height());\n\n // draw layer and append canvas to container\n layer.draw();\n\n if (Konva.isBrowser) {\n this.content.appendChild(layer.canvas._canvas);\n }\n\n // chainable\n return this;\n },\n getParent: function() {\n return null;\n },\n getLayer: function() {\n return null;\n },\n /**\n * returns a {@link Konva.Collection} of layers\n * @method\n * @memberof Konva.Stage.prototype\n */\n getLayers: function() {\n return this.getChildren();\n },\n _bindContentEvents: function() {\n if (!Konva.isBrowser) {\n return;\n }\n for (var n = 0; n < eventsLength; n++) {\n addEvent(this, EVENTS[n]);\n }\n },\n _mouseover: function(evt) {\n if (!Konva.UA.mobile) {\n this._setPointerPosition(evt);\n this._fire(CONTENT_MOUSEOVER, { evt: evt });\n }\n },\n _mouseout: function(evt) {\n if (!Konva.UA.mobile) {\n this._setPointerPosition(evt);\n var targetShape = this.targetShape;\n\n if (targetShape && !Konva.isDragging()) {\n targetShape._fireAndBubble(MOUSEOUT, { evt: evt });\n targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });\n this.targetShape = null;\n }\n this.pointerPos = undefined;\n\n this._fire(CONTENT_MOUSEOUT, { evt: evt });\n }\n },\n _mousemove: function(evt) {\n // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event\n if (Konva.UA.ieMobile) {\n return this._touchmove(evt);\n }\n // workaround fake mousemove event in chrome browser https://code.google.com/p/chromium/issues/detail?id=161464\n if (\n (typeof evt.movementX !== 'undefined' ||\n typeof evt.movementY !== 'undefined') &&\n evt.movementY === 0 &&\n evt.movementX === 0\n ) {\n return null;\n }\n if (Konva.UA.mobile) {\n return null;\n }\n this._setPointerPosition(evt);\n var shape;\n\n if (!Konva.isDragging()) {\n shape = this.getIntersection(this.getPointerPosition());\n if (shape && shape.isListening()) {\n if (\n !Konva.isDragging() &&\n (!this.targetShape || this.targetShape._id !== shape._id)\n ) {\n if (this.targetShape) {\n this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt }, shape);\n this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt }, shape);\n }\n shape._fireAndBubble(MOUSEOVER, { evt: evt }, this.targetShape);\n shape._fireAndBubble(MOUSEENTER, { evt: evt }, this.targetShape);\n this.targetShape = shape;\n } else {\n shape._fireAndBubble(MOUSEMOVE, { evt: evt });\n }\n } else {\n /*\n * if no shape was detected, clear target shape and try\n * to run mouseout from previous target shape\n */\n if (this.targetShape && !Konva.isDragging()) {\n this.targetShape._fireAndBubble(MOUSEOUT, { evt: evt });\n this.targetShape._fireAndBubble(MOUSELEAVE, { evt: evt });\n this.targetShape = null;\n }\n this._fire(MOUSEMOVE, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n\n // content event\n this._fire(CONTENT_MOUSEMOVE, { evt: evt });\n }\n\n // always call preventDefault for desktop events because some browsers\n // try to drag and drop the canvas element\n if (evt.cancelable) {\n evt.preventDefault();\n }\n },\n _mousedown: function(evt) {\n // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event\n if (Konva.UA.ieMobile) {\n return this._touchstart(evt);\n }\n if (!Konva.UA.mobile) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition());\n\n Konva.listenClickTap = true;\n\n if (shape && shape.isListening()) {\n this.clickStartShape = shape;\n shape._fireAndBubble(MOUSEDOWN, { evt: evt });\n } else {\n this._fire(MOUSEDOWN, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n\n // content event\n this._fire(CONTENT_MOUSEDOWN, { evt: evt });\n }\n\n // always call preventDefault for desktop events because some browsers\n // try to drag and drop the canvas element\n // TODO: if we preventDefault() it will cancel event detection outside of window inside iframe\n // but we need it for better drag&drop\n // can we disable native drag&drop somehow differently?\n // if (evt.cancelable) {\n // evt.preventDefault();\n // }\n },\n _mouseup: function(evt) {\n // workaround for mobile IE to force touch event when unhandled pointer event elevates into a mouse event\n if (Konva.UA.ieMobile) {\n return this._touchend(evt);\n }\n if (!Konva.UA.mobile) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition()),\n clickStartShape = this.clickStartShape,\n clickEndShape = this.clickEndShape,\n fireDblClick = false,\n dd = Konva.DD;\n\n if (Konva.inDblClickWindow) {\n fireDblClick = true;\n clearTimeout(this.dblTimeout);\n // Konva.inDblClickWindow = false;\n } else if (!dd || !dd.justDragged) {\n // don't set inDblClickWindow after dragging\n Konva.inDblClickWindow = true;\n clearTimeout(this.dblTimeout);\n } else if (dd) {\n dd.justDragged = false;\n }\n\n this.dblTimeout = setTimeout(function() {\n Konva.inDblClickWindow = false;\n }, Konva.dblClickWindow);\n\n if (shape && shape.isListening()) {\n this.clickEndShape = shape;\n shape._fireAndBubble(MOUSEUP, { evt: evt });\n\n // detect if click or double click occurred\n if (\n Konva.listenClickTap &&\n clickStartShape &&\n clickStartShape._id === shape._id\n ) {\n shape._fireAndBubble(CLICK, { evt: evt });\n\n if (\n fireDblClick &&\n clickEndShape &&\n clickEndShape._id === shape._id\n ) {\n shape._fireAndBubble(DBL_CLICK, { evt: evt });\n }\n }\n } else {\n this._fire(MOUSEUP, { evt: evt, target: this, currentTarget: this });\n if (Konva.listenClickTap) {\n this._fire(CLICK, { evt: evt, target: this, currentTarget: this });\n }\n\n if (fireDblClick) {\n this._fire(DBL_CLICK, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n }\n // content events\n this._fire(CONTENT_MOUSEUP, { evt: evt });\n if (Konva.listenClickTap) {\n this._fire(CONTENT_CLICK, { evt: evt });\n if (fireDblClick) {\n this._fire(CONTENT_DBL_CLICK, { evt: evt });\n }\n }\n\n Konva.listenClickTap = false;\n }\n\n // always call preventDefault for desktop events because some browsers\n // try to drag and drop the canvas element\n if (evt.cancelable) {\n evt.preventDefault();\n }\n },\n _contextmenu: function(evt) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition());\n\n if (shape && shape.isListening()) {\n shape._fireAndBubble(CONTEXTMENU, { evt: evt });\n } else {\n this._fire(CONTEXTMENU, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n this._fire(CONTENT_CONTEXTMENU, { evt: evt });\n },\n _touchstart: function(evt) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition());\n\n Konva.listenClickTap = true;\n\n if (shape && shape.isListening()) {\n this.tapStartShape = shape;\n shape._fireAndBubble(TOUCHSTART, { evt: evt });\n\n // only call preventDefault if the shape is listening for events\n if (shape.isListening() && shape.preventDefault() && evt.cancelable) {\n evt.preventDefault();\n }\n } else {\n this._fire(TOUCHSTART, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n // content event\n this._fire(CONTENT_TOUCHSTART, { evt: evt });\n },\n _touchend: function(evt) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition()),\n fireDblClick = false;\n\n if (Konva.inDblClickWindow) {\n fireDblClick = true;\n clearTimeout(this.dblTimeout);\n // Konva.inDblClickWindow = false;\n } else {\n Konva.inDblClickWindow = true;\n clearTimeout(this.dblTimeout);\n }\n\n this.dblTimeout = setTimeout(function() {\n Konva.inDblClickWindow = false;\n }, Konva.dblClickWindow);\n\n if (shape && shape.isListening()) {\n shape._fireAndBubble(TOUCHEND, { evt: evt });\n\n // detect if tap or double tap occurred\n if (\n Konva.listenClickTap &&\n this.tapStartShape &&\n shape._id === this.tapStartShape._id\n ) {\n shape._fireAndBubble(TAP, { evt: evt });\n\n if (fireDblClick) {\n shape._fireAndBubble(DBL_TAP, { evt: evt });\n }\n }\n // only call preventDefault if the shape is listening for events\n if (shape.isListening() && shape.preventDefault() && evt.cancelable) {\n evt.preventDefault();\n }\n } else {\n this._fire(TOUCHEND, { evt: evt, target: this, currentTarget: this });\n if (Konva.listenClickTap) {\n this._fire(TAP, { evt: evt, target: this, currentTarget: this });\n }\n if (fireDblClick) {\n this._fire(DBL_TAP, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n }\n // content events\n this._fire(CONTENT_TOUCHEND, { evt: evt });\n if (Konva.listenClickTap) {\n this._fire(CONTENT_TAP, { evt: evt });\n if (fireDblClick) {\n this._fire(CONTENT_DBL_TAP, { evt: evt });\n }\n }\n\n Konva.listenClickTap = false;\n },\n _touchmove: function(evt) {\n this._setPointerPosition(evt);\n var dd = Konva.DD,\n shape;\n if (!Konva.isDragging()) {\n shape = this.getIntersection(this.getPointerPosition());\n if (shape && shape.isListening()) {\n shape._fireAndBubble(TOUCHMOVE, { evt: evt });\n // only call preventDefault if the shape is listening for events\n if (shape.isListening() && shape.preventDefault() && evt.cancelable) {\n evt.preventDefault();\n }\n } else {\n this._fire(TOUCHMOVE, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n this._fire(CONTENT_TOUCHMOVE, { evt: evt });\n }\n if (dd) {\n if (\n Konva.isDragging() &&\n Konva.DD.node.preventDefault() &&\n evt.cancelable\n ) {\n evt.preventDefault();\n }\n }\n },\n _wheel: function(evt) {\n this._setPointerPosition(evt);\n var shape = this.getIntersection(this.getPointerPosition());\n\n if (shape && shape.isListening()) {\n shape._fireAndBubble(WHEEL, { evt: evt });\n } else {\n this._fire(WHEEL, {\n evt: evt,\n target: this,\n currentTarget: this\n });\n }\n this._fire(CONTENT_WHEEL, { evt: evt });\n },\n _setPointerPosition: function(evt) {\n var contentPosition = this._getContentPosition(),\n x = null,\n y = null;\n evt = evt ? evt : window.event;\n\n // touch events\n if (evt.touches !== undefined) {\n // currently, only handle one finger\n if (evt.touches.length > 0) {\n var touch = evt.touches[0];\n // get the information for finger #1\n x = touch.clientX - contentPosition.left;\n y = touch.clientY - contentPosition.top;\n }\n } else {\n // mouse events\n x = evt.clientX - contentPosition.left;\n y = evt.clientY - contentPosition.top;\n }\n if (x !== null && y !== null) {\n this.pointerPos = {\n x: x,\n y: y\n };\n }\n },\n _getContentPosition: function() {\n var rect = this.content.getBoundingClientRect\n ? this.content.getBoundingClientRect()\n : { top: 0, left: 0 };\n return {\n top: rect.top,\n left: rect.left\n };\n },\n _buildDOM: function() {\n // the buffer canvas pixel ratio must be 1 because it is used as an\n // intermediate canvas before copying the result onto a scene canvas.\n // not setting it to 1 will result in an over compensation\n this.bufferCanvas = new Konva.SceneCanvas();\n this.bufferHitCanvas = new Konva.HitCanvas({ pixelRatio: 1 });\n\n if (!Konva.isBrowser) {\n return;\n }\n var container = this.getContainer();\n if (!container) {\n throw 'Stage has no container. A container is required.';\n }\n // clear content inside container\n container.innerHTML = EMPTY_STRING;\n\n // content\n this.content = Konva.document.createElement(DIV);\n this.content.style.position = RELATIVE;\n this.content.style.userSelect = 'none';\n this.content.className = KONVA_CONTENT;\n\n this.content.setAttribute('role', 'presentation');\n\n container.appendChild(this.content);\n\n this._resizeDOM();\n },\n _onContent: function(typesStr, handler) {\n var types = typesStr.split(SPACE),\n len = types.length,\n n,\n baseEvent;\n\n for (n = 0; n < len; n++) {\n baseEvent = types[n];\n this.content.addEventListener(baseEvent, handler, false);\n }\n },\n // currently cache function is now working for stage, because stage has no its own canvas element\n // TODO: may be it is better to cache all children layers?\n cache: function() {\n Konva.Util.warn(\n 'Cache function is not allowed for stage. You may use cache only for layers, groups and shapes.'\n );\n },\n clearCache: function() {}\n });\n Konva.Util.extend(Konva.Stage, Konva.Container);\n\n // add getters and setters\n Konva.Factory.addGetter(Konva.Stage, 'container');\n Konva.Factory.addOverloadedGetterSetter(Konva.Stage, 'container');\n\n /**\n * get container DOM element\n * @name container\n * @method\n * @memberof Konva.Stage.prototype\n * @returns {DomElement} container\n * @example\n * // get container\n * var container = stage.container();\n * // set container\n * var container = document.createElement('div');\n * body.appendChild(container);\n * stage.container(container);\n */\n})();\n\n(function(Konva) {\n 'use strict';\n /**\n * BaseLayer constructor.\n * @constructor\n * @memberof Konva\n * @augments Konva.Container\n * @param {Object} config\n * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want\n * to clear the canvas before each layer draw. The default value is true.\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * * @param {Object} [config.clip] set clip\n * @param {Number} [config.clipX] set clip x\n * @param {Number} [config.clipY] set clip y\n * @param {Number} [config.clipWidth] set clip width\n * @param {Number} [config.clipHeight] set clip height\n * @param {Function} [config.clipFunc] set clip func\n\n */\n Konva.BaseLayer = function(config) {\n this.___init(config);\n };\n\n Konva.Util.addMethods(Konva.BaseLayer, {\n ___init: function(config) {\n this.nodeType = 'Layer';\n Konva.Container.call(this, config);\n },\n createPNGStream: function() {\n return this.canvas._canvas.createPNGStream();\n },\n /**\n * get layer canvas\n * @method\n * @memberof Konva.BaseLayer.prototype\n */\n getCanvas: function() {\n return this.canvas;\n },\n /**\n * get layer hit canvas\n * @method\n * @memberof Konva.BaseLayer.prototype\n */\n getHitCanvas: function() {\n return this.hitCanvas;\n },\n /**\n * get layer canvas context\n * @method\n * @memberof Konva.BaseLayer.prototype\n */\n getContext: function() {\n return this.getCanvas().getContext();\n },\n /**\n * clear scene and hit canvas contexts tied to the layer\n * @method\n * @memberof Konva.BaseLayer.prototype\n * @param {Object} [bounds]\n * @param {Number} [bounds.x]\n * @param {Number} [bounds.y]\n * @param {Number} [bounds.width]\n * @param {Number} [bounds.height]\n * @example\n * layer.clear();\n * layer.clear({\n * x : 0,\n * y : 0,\n * width : 100,\n * height : 100\n * });\n */\n clear: function(bounds) {\n this.getContext().clear(bounds);\n return this;\n },\n clearHitCache: function() {\n this._hitImageData = undefined;\n },\n // extend Node.prototype.setZIndex\n setZIndex: function(index) {\n Konva.Node.prototype.setZIndex.call(this, index);\n var stage = this.getStage();\n if (stage) {\n stage.content.removeChild(this.getCanvas()._canvas);\n\n if (index < stage.getChildren().length - 1) {\n stage.content.insertBefore(\n this.getCanvas()._canvas,\n stage.getChildren()[index + 1].getCanvas()._canvas\n );\n } else {\n stage.content.appendChild(this.getCanvas()._canvas);\n }\n }\n return this;\n },\n // extend Node.prototype.moveToTop\n moveToTop: function() {\n Konva.Node.prototype.moveToTop.call(this);\n var stage = this.getStage();\n if (stage) {\n stage.content.removeChild(this.getCanvas()._canvas);\n stage.content.appendChild(this.getCanvas()._canvas);\n }\n return this;\n },\n // extend Node.prototype.moveUp\n moveUp: function() {\n var moved = Konva.Node.prototype.moveUp.call(this);\n if (!moved) {\n return this;\n }\n var stage = this.getStage();\n if (!stage) {\n return this;\n }\n stage.content.removeChild(this.getCanvas()._canvas);\n\n if (this.index < stage.getChildren().length - 1) {\n stage.content.insertBefore(\n this.getCanvas()._canvas,\n stage.getChildren()[this.index + 1].getCanvas()._canvas\n );\n } else {\n stage.content.appendChild(this.getCanvas()._canvas);\n }\n return this;\n },\n // extend Node.prototype.moveDown\n moveDown: function() {\n if (Konva.Node.prototype.moveDown.call(this)) {\n var stage = this.getStage();\n if (stage) {\n var children = stage.getChildren();\n stage.content.removeChild(this.getCanvas()._canvas);\n stage.content.insertBefore(\n this.getCanvas()._canvas,\n children[this.index + 1].getCanvas()._canvas\n );\n }\n }\n return this;\n },\n // extend Node.prototype.moveToBottom\n moveToBottom: function() {\n if (Konva.Node.prototype.moveToBottom.call(this)) {\n var stage = this.getStage();\n if (stage) {\n var children = stage.getChildren();\n stage.content.removeChild(this.getCanvas()._canvas);\n stage.content.insertBefore(\n this.getCanvas()._canvas,\n children[1].getCanvas()._canvas\n );\n }\n }\n return this;\n },\n getLayer: function() {\n return this;\n },\n remove: function() {\n var _canvas = this.getCanvas()._canvas;\n\n Konva.Node.prototype.remove.call(this);\n\n if (_canvas && _canvas.parentNode && Konva.Util._isInDocument(_canvas)) {\n _canvas.parentNode.removeChild(_canvas);\n }\n return this;\n },\n getStage: function() {\n return this.parent;\n },\n setSize: function(width, height) {\n this.canvas.setSize(width, height);\n return this;\n },\n _toKonvaCanvas: function(config) {\n config = config || {};\n config.width = config.width || this.getWidth();\n config.height = config.height || this.getHeight();\n config.x = config.x !== undefined ? config.x : this.getX();\n config.y = config.y !== undefined ? config.y : this.getY();\n\n return Konva.Node.prototype._toKonvaCanvas.call(this, config);\n },\n /**\n * get/set width of layer.getter return width of stage. setter doing nothing.\n * if you want change width use `stage.width(value);`\n * @name width\n * @method\n * @memberof Konva.BaseLayer.prototype\n * @returns {Number}\n * @example\n * var width = layer.width();\n */\n getWidth: function() {\n if (this.parent) {\n return this.parent.getWidth();\n }\n },\n setWidth: function() {\n Konva.Util.warn(\n 'Can not change width of layer. Use \"stage.width(value)\" function instead.'\n );\n },\n /**\n * get/set height of layer.getter return height of stage. setter doing nothing.\n * if you want change height use `stage.height(value);`\n * @name height\n * @method\n * @memberof Konva.BaseLayer.prototype\n * @returns {Number}\n * @example\n * var height = layer.height();\n */\n getHeight: function() {\n if (this.parent) {\n return this.parent.getHeight();\n }\n },\n setHeight: function() {\n Konva.Util.warn(\n 'Can not change height of layer. Use \"stage.height(value)\" function instead.'\n );\n },\n // the apply transform method is handled by the Layer and FastLayer class\n // because it is up to the layer to decide if an absolute or relative transform\n // should be used\n _applyTransform: function(shape, context, top) {\n var m = shape.getAbsoluteTransform(top).getMatrix();\n context.transform(m[0], m[1], m[2], m[3], m[4], m[5]);\n }\n });\n Konva.Util.extend(Konva.BaseLayer, Konva.Container);\n\n // add getters and setters\n Konva.Factory.addGetterSetter(Konva.BaseLayer, 'clearBeforeDraw', true);\n /**\n * get/set clearBeforeDraw flag which determines if the layer is cleared or not\n * before drawing\n * @name clearBeforeDraw\n * @method\n * @memberof Konva.BaseLayer.prototype\n * @param {Boolean} clearBeforeDraw\n * @returns {Boolean}\n * @example\n * // get clearBeforeDraw flag\n * var clearBeforeDraw = layer.clearBeforeDraw();\n *\n * // disable clear before draw\n * layer.clearBeforeDraw(false);\n *\n * // enable clear before draw\n * layer.clearBeforeDraw(true);\n */\n\n Konva.Collection.mapMethods(Konva.BaseLayer);\n})(Konva);\n\n(function() {\n 'use strict';\n // constants\n var HASH = '#',\n BEFORE_DRAW = 'beforeDraw',\n DRAW = 'draw',\n /*\n * 2 - 3 - 4\n * | |\n * 1 - 0 5\n * |\n * 8 - 7 - 6\n */\n INTERSECTION_OFFSETS = [\n { x: 0, y: 0 }, // 0\n { x: -1, y: -1 }, // 2\n { x: 1, y: -1 }, // 4\n { x: 1, y: 1 }, // 6\n { x: -1, y: 1 } // 8\n ],\n INTERSECTION_OFFSETS_LEN = INTERSECTION_OFFSETS.length;\n\n /**\n * Layer constructor. Layers are tied to their own canvas element and are used\n * to contain groups or shapes.\n * @constructor\n * @memberof Konva\n * @augments Konva.BaseLayer\n * @param {Object} config\n * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want\n * to clear the canvas before each layer draw. The default value is true.\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * * @param {Object} [config.clip] set clip\n * @param {Number} [config.clipX] set clip x\n * @param {Number} [config.clipY] set clip y\n * @param {Number} [config.clipWidth] set clip width\n * @param {Number} [config.clipHeight] set clip height\n * @param {Function} [config.clipFunc] set clip func\n\n * @example\n * var layer = new Konva.Layer();\n */\n Konva.Layer = function(config) {\n this.____init(config);\n };\n\n Konva.Util.addMethods(Konva.Layer, {\n ____init: function(config) {\n this.nodeType = 'Layer';\n this.canvas = new Konva.SceneCanvas();\n this.hitCanvas = new Konva.HitCanvas({\n pixelRatio: 1\n });\n // call super constructor\n Konva.BaseLayer.call(this, config);\n },\n _setCanvasSize: function(width, height) {\n this.canvas.setSize(width, height);\n this.hitCanvas.setSize(width, height);\n },\n _validateAdd: function(child) {\n var type = child.getType();\n if (type !== 'Group' && type !== 'Shape') {\n Konva.Util.throw('You may only add groups and shapes to a layer.');\n }\n },\n /**\n * get visible intersection shape. This is the preferred\n * method for determining if a point intersects a shape or not\n * also you may pass optional selector parametr to return ancestor of intersected shape\n * @method\n * @memberof Konva.Layer.prototype\n * @param {Object} pos\n * @param {Number} pos.x\n * @param {Number} pos.y\n * @param {String} [selector]\n * @returns {Konva.Node}\n * @example\n * var shape = layer.getIntersection({x: 50, y: 50});\n * // or if you interested in shape parent:\n * var group = layer.getIntersection({x: 50, y: 50}, 'Group');\n */\n getIntersection: function(pos, selector) {\n var obj, i, intersectionOffset, shape;\n\n if (!this.hitGraphEnabled() || !this.isVisible()) {\n return null;\n }\n // in some cases antialiased area may be bigger than 1px\n // it is possible if we will cache node, then scale it a lot\n // TODO: check { 0; 0 } point before loop, and remove it from INTERSECTION_OFFSETS.\n var spiralSearchDistance = 1;\n var continueSearch = false;\n while (true) {\n for (i = 0; i < INTERSECTION_OFFSETS_LEN; i++) {\n intersectionOffset = INTERSECTION_OFFSETS[i];\n obj = this._getIntersection({\n x: pos.x + intersectionOffset.x * spiralSearchDistance,\n y: pos.y + intersectionOffset.y * spiralSearchDistance\n });\n shape = obj.shape;\n if (shape && selector) {\n return shape.findAncestor(selector, true);\n } else if (shape) {\n return shape;\n }\n // we should continue search if we found antialiased pixel\n // that means our node somewhere very close\n continueSearch = !!obj.antialiased;\n // stop search if found empty pixel\n if (!obj.antialiased) {\n break;\n }\n }\n // if no shape, and no antialiased pixel, we should end searching\n if (continueSearch) {\n spiralSearchDistance += 1;\n } else {\n return null;\n }\n }\n },\n _getImageData: function(x, y) {\n var width = this.hitCanvas.width || 1,\n height = this.hitCanvas.height || 1,\n index = Math.round(y) * width + Math.round(x);\n\n if (!this._hitImageData) {\n this._hitImageData = this.hitCanvas.context.getImageData(\n 0,\n 0,\n width,\n height\n );\n }\n\n return [\n this._hitImageData.data[4 * index + 0], // Red\n this._hitImageData.data[4 * index + 1], // Green\n this._hitImageData.data[4 * index + 2], // Blue\n this._hitImageData.data[4 * index + 3] // Alpha\n ];\n },\n _getIntersection: function(pos) {\n var ratio = this.hitCanvas.pixelRatio;\n var p = this.hitCanvas.context.getImageData(\n Math.round(pos.x * ratio),\n Math.round(pos.y * ratio),\n 1,\n 1\n ).data,\n p3 = p[3],\n colorKey,\n shape;\n // fully opaque pixel\n if (p3 === 255) {\n colorKey = Konva.Util._rgbToHex(p[0], p[1], p[2]);\n shape = Konva.shapes[HASH + colorKey];\n if (shape) {\n return {\n shape: shape\n };\n }\n return {\n antialiased: true\n };\n } else if (p3 > 0) {\n // antialiased pixel\n return {\n antialiased: true\n };\n }\n // empty pixel\n return {};\n },\n drawScene: function(can, top) {\n var layer = this.getLayer(),\n canvas = can || (layer && layer.getCanvas());\n\n this._fire(BEFORE_DRAW, {\n node: this\n });\n\n if (this.getClearBeforeDraw()) {\n canvas.getContext().clear();\n }\n\n Konva.Container.prototype.drawScene.call(this, canvas, top);\n\n this._fire(DRAW, {\n node: this\n });\n\n return this;\n },\n drawHit: function(can, top) {\n var layer = this.getLayer(),\n canvas = can || (layer && layer.hitCanvas);\n\n if (layer && layer.getClearBeforeDraw()) {\n layer\n .getHitCanvas()\n .getContext()\n .clear();\n }\n\n Konva.Container.prototype.drawHit.call(this, canvas, top);\n this.imageData = null; // Clear imageData cache\n return this;\n },\n clear: function(bounds) {\n Konva.BaseLayer.prototype.clear.call(this, bounds);\n this.getHitCanvas()\n .getContext()\n .clear(bounds);\n this.imageData = null; // Clear getImageData cache\n return this;\n },\n // extend Node.prototype.setVisible\n setVisible: function(visible) {\n Konva.Node.prototype.setVisible.call(this, visible);\n if (visible) {\n this.getCanvas()._canvas.style.display = 'block';\n this.hitCanvas._canvas.style.display = 'block';\n } else {\n this.getCanvas()._canvas.style.display = 'none';\n this.hitCanvas._canvas.style.display = 'none';\n }\n return this;\n },\n /**\n * enable hit graph\n * @name enableHitGraph\n * @method\n * @memberof Konva.Layer.prototype\n * @returns {Layer}\n */\n enableHitGraph: function() {\n this.setHitGraphEnabled(true);\n return this;\n },\n /**\n * disable hit graph\n * @name disableHitGraph\n * @method\n * @memberof Konva.Layer.prototype\n * @returns {Layer}\n */\n disableHitGraph: function() {\n this.setHitGraphEnabled(false);\n return this;\n },\n setSize: function(width, height) {\n Konva.BaseLayer.prototype.setSize.call(this, width, height);\n this.hitCanvas.setSize(width, height);\n return this;\n }\n });\n Konva.Util.extend(Konva.Layer, Konva.BaseLayer);\n\n Konva.Factory.addGetterSetter(Konva.Layer, 'hitGraphEnabled', true);\n /**\n * get/set hitGraphEnabled flag. Disabling the hit graph will greatly increase\n * draw performance because the hit graph will not be redrawn each time the layer is\n * drawn. This, however, also disables mouse/touch event detection\n * @name hitGraphEnabled\n * @method\n * @memberof Konva.Layer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get hitGraphEnabled flag\n * var hitGraphEnabled = layer.hitGraphEnabled();\n *\n * // disable hit graph\n * layer.hitGraphEnabled(false);\n *\n * // enable hit graph\n * layer.hitGraphEnabled(true);\n */\n Konva.Collection.mapMethods(Konva.Layer);\n})();\n\n(function() {\n 'use strict';\n /**\n * FastLayer constructor. Layers are tied to their own canvas element and are used\n * to contain shapes only. If you don't need node nesting, mouse and touch interactions,\n * or event pub/sub, you should use FastLayer instead of Layer to create your layers.\n * It renders about 2x faster than normal layers.\n * @constructor\n * @memberof Konva\n * @augments Konva.BaseLayer\n * @param {Object} config\n * @param {Boolean} [config.clearBeforeDraw] set this property to false if you don't want\n * to clear the canvas before each layer draw. The default value is true.\n * @param {Boolean} [config.visible]\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * * @param {Object} [config.clip] set clip\n * @param {Number} [config.clipX] set clip x\n * @param {Number} [config.clipY] set clip y\n * @param {Number} [config.clipWidth] set clip width\n * @param {Number} [config.clipHeight] set clip height\n * @param {Function} [config.clipFunc] set clip func\n\n * @example\n * var layer = new Konva.FastLayer();\n */\n Konva.FastLayer = function(config) {\n this.____init(config);\n };\n\n Konva.Util.addMethods(Konva.FastLayer, {\n ____init: function(config) {\n this.nodeType = 'Layer';\n this.canvas = new Konva.SceneCanvas();\n // call super constructor\n Konva.BaseLayer.call(this, config);\n },\n _validateAdd: function(child) {\n var type = child.getType();\n if (type !== 'Shape') {\n Konva.Util.throw('You may only add shapes to a fast layer.');\n }\n },\n _setCanvasSize: function(width, height) {\n this.canvas.setSize(width, height);\n },\n hitGraphEnabled: function() {\n return false;\n },\n getIntersection: function() {\n return null;\n },\n drawScene: function(can) {\n var layer = this.getLayer(),\n canvas = can || (layer && layer.getCanvas());\n\n if (this.getClearBeforeDraw()) {\n canvas.getContext().clear();\n }\n\n Konva.Container.prototype.drawScene.call(this, canvas);\n\n return this;\n },\n draw: function() {\n this.drawScene();\n return this;\n },\n // extend Node.prototype.setVisible\n setVisible: function(visible) {\n Konva.Node.prototype.setVisible.call(this, visible);\n if (visible) {\n this.getCanvas()._canvas.style.display = 'block';\n } else {\n this.getCanvas()._canvas.style.display = 'none';\n }\n return this;\n }\n });\n Konva.Util.extend(Konva.FastLayer, Konva.BaseLayer);\n\n Konva.Collection.mapMethods(Konva.FastLayer);\n})();\n\n(function() {\n 'use strict';\n /**\n * Group constructor. Groups are used to contain shapes or other groups.\n * @constructor\n * @memberof Konva\n * @augments Konva.Container\n * @param {Object} config\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * * @param {Object} [config.clip] set clip\n * @param {Number} [config.clipX] set clip x\n * @param {Number} [config.clipY] set clip y\n * @param {Number} [config.clipWidth] set clip width\n * @param {Number} [config.clipHeight] set clip height\n * @param {Function} [config.clipFunc] set clip func\n\n * @example\n * var group = new Konva.Group();\n */\n Konva.Group = function(config) {\n this.___init(config);\n };\n\n Konva.Util.addMethods(Konva.Group, {\n ___init: function(config) {\n this.nodeType = 'Group';\n // call super constructor\n Konva.Container.call(this, config);\n },\n _validateAdd: function(child) {\n var type = child.getType();\n if (type !== 'Group' && type !== 'Shape') {\n Konva.Util.throw('You may only add groups and shapes to groups.');\n }\n }\n });\n Konva.Util.extend(Konva.Group, Konva.Container);\n\n Konva.Collection.mapMethods(Konva.Group);\n})();\n\n(function(Konva) {\n 'use strict';\n var now = (function() {\n if (Konva.global.performance && Konva.global.performance.now) {\n return function() {\n return Konva.global.performance.now();\n };\n }\n\n return function() {\n return new Date().getTime();\n };\n })();\n\n function FRAF(callback) {\n setTimeout(callback, 1000 / 60);\n }\n\n var RAF = (function() {\n return (\n Konva.global.requestAnimationFrame ||\n Konva.global.webkitRequestAnimationFrame ||\n Konva.global.mozRequestAnimationFrame ||\n Konva.global.oRequestAnimationFrame ||\n Konva.global.msRequestAnimationFrame ||\n FRAF\n );\n })();\n\n function requestAnimFrame() {\n return RAF.apply(Konva.global, arguments);\n }\n\n /**\n * Animation constructor. A stage is used to contain multiple layers and handle\n * @constructor\n * @memberof Konva\n * @param {Function} func function executed on each animation frame. The function is passed a frame object, which contains\n * timeDiff, lastTime, time, and frameRate properties. The timeDiff property is the number of milliseconds that have passed\n * since the last animation frame. The lastTime property is time in milliseconds that elapsed from the moment the animation started\n * to the last animation frame. The time property is the time in milliseconds that ellapsed from the moment the animation started\n * to the current animation frame. The frameRate property is the current frame rate in frames / second. Return false from function,\n * if you don't need to redraw layer/layers on some frames.\n * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn on each animation frame. Can be a layer, an array of layers, or null.\n * Not specifying a node will result in no redraw.\n * @example\n * // move a node to the right at 50 pixels / second\n * var velocity = 50;\n *\n * var anim = new Konva.Animation(function(frame) {\n * var dist = velocity * (frame.timeDiff / 1000);\n * node.move(dist, 0);\n * }, layer);\n *\n * anim.start();\n */\n Konva.Animation = function(func, layers) {\n var Anim = Konva.Animation;\n this.func = func;\n this.setLayers(layers);\n this.id = Anim.animIdCounter++;\n this.frame = {\n time: 0,\n timeDiff: 0,\n lastTime: now()\n };\n };\n /*\n * Animation methods\n */\n Konva.Animation.prototype = {\n /**\n * set layers to be redrawn on each animation frame\n * @method\n * @memberof Konva.Animation.prototype\n * @param {Konva.Layer|Array} [layers] layer(s) to be redrawn. Can be a layer, an array of layers, or null. Not specifying a node will result in no redraw.\n * @return {Konva.Animation} this\n */\n setLayers: function(layers) {\n var lays = [];\n // if passing in no layers\n if (!layers) {\n lays = [];\n } else if (layers.length > 0) {\n // if passing in an array of Layers\n // NOTE: layers could be an array or Konva.Collection. for simplicity, I'm just inspecting\n // the length property to check for both cases\n lays = layers;\n } else {\n // if passing in a Layer\n lays = [layers];\n }\n\n this.layers = lays;\n return this;\n },\n /**\n * get layers\n * @method\n * @memberof Konva.Animation.prototype\n * @return {Array} Array of Konva.Layer\n */\n getLayers: function() {\n return this.layers;\n },\n /**\n * add layer. Returns true if the layer was added, and false if it was not\n * @method\n * @memberof Konva.Animation.prototype\n * @param {Konva.Layer} layer to add\n * @return {Bool} true if layer is added to animation, otherwise false\n */\n addLayer: function(layer) {\n var layers = this.layers,\n len = layers.length,\n n;\n\n // don't add the layer if it already exists\n for (n = 0; n < len; n++) {\n if (layers[n]._id === layer._id) {\n return false;\n }\n }\n\n this.layers.push(layer);\n return true;\n },\n /**\n * determine if animation is running or not. returns true or false\n * @method\n * @memberof Konva.Animation.prototype\n * @return {Bool} is animation running?\n */\n isRunning: function() {\n var a = Konva.Animation,\n animations = a.animations,\n len = animations.length,\n n;\n\n for (n = 0; n < len; n++) {\n if (animations[n].id === this.id) {\n return true;\n }\n }\n return false;\n },\n /**\n * start animation\n * @method\n * @memberof Konva.Animation.prototype\n * @return {Konva.Animation} this\n */\n start: function() {\n var Anim = Konva.Animation;\n this.stop();\n this.frame.timeDiff = 0;\n this.frame.lastTime = now();\n Anim._addAnimation(this);\n return this;\n },\n /**\n * stop animation\n * @method\n * @memberof Konva.Animation.prototype\n * @return {Konva.Animation} this\n */\n stop: function() {\n Konva.Animation._removeAnimation(this);\n return this;\n },\n _updateFrameObject: function(time) {\n this.frame.timeDiff = time - this.frame.lastTime;\n this.frame.lastTime = time;\n this.frame.time += this.frame.timeDiff;\n this.frame.frameRate = 1000 / this.frame.timeDiff;\n }\n };\n Konva.Animation.animations = [];\n Konva.Animation.animIdCounter = 0;\n Konva.Animation.animRunning = false;\n\n Konva.Animation._addAnimation = function(anim) {\n this.animations.push(anim);\n this._handleAnimation();\n };\n Konva.Animation._removeAnimation = function(anim) {\n var id = anim.id,\n animations = this.animations,\n len = animations.length,\n n;\n\n for (n = 0; n < len; n++) {\n if (animations[n].id === id) {\n this.animations.splice(n, 1);\n break;\n }\n }\n };\n\n Konva.Animation._runFrames = function() {\n var layerHash = {},\n animations = this.animations,\n anim,\n layers,\n func,\n n,\n i,\n layersLen,\n layer,\n key,\n needRedraw;\n /*\n * loop through all animations and execute animation\n * function. if the animation object has specified node,\n * we can add the node to the nodes hash to eliminate\n * drawing the same node multiple times. The node property\n * can be the stage itself or a layer\n */\n /*\n * WARNING: don't cache animations.length because it could change while\n * the for loop is running, causing a JS error\n */\n\n for (n = 0; n < animations.length; n++) {\n anim = animations[n];\n layers = anim.layers;\n func = anim.func;\n\n anim._updateFrameObject(now());\n layersLen = layers.length;\n\n // if animation object has a function, execute it\n if (func) {\n // allow anim bypassing drawing\n needRedraw = func.call(anim, anim.frame) !== false;\n } else {\n needRedraw = true;\n }\n if (!needRedraw) {\n continue;\n }\n for (i = 0; i < layersLen; i++) {\n layer = layers[i];\n\n if (layer._id !== undefined) {\n layerHash[layer._id] = layer;\n }\n }\n }\n\n for (key in layerHash) {\n if (!layerHash.hasOwnProperty(key)) {\n continue;\n }\n layerHash[key].draw();\n }\n };\n Konva.Animation._animationLoop = function() {\n var Anim = Konva.Animation;\n if (Anim.animations.length) {\n Anim._runFrames();\n requestAnimFrame(Anim._animationLoop);\n } else {\n Anim.animRunning = false;\n }\n };\n Konva.Animation._handleAnimation = function() {\n if (!this.animRunning) {\n this.animRunning = true;\n requestAnimFrame(this._animationLoop);\n }\n };\n\n /**\n * batch draw. this function will not do immediate draw\n * but it will schedule drawing to next tick (requestAnimFrame)\n * @method\n * @name batchDraw\n * @return {Konva.Layer} this\n * @memberof Konva.BaseLayer.prototype\n */\n Konva.BaseLayer.prototype.batchDraw = function() {\n var that = this,\n Anim = Konva.Animation;\n\n if (!this.batchAnim) {\n this.batchAnim = new Anim(function() {\n // stop animation after first tick\n that.batchAnim.stop();\n }, this);\n }\n\n if (!this.batchAnim.isRunning()) {\n this.batchAnim.start();\n }\n return this;\n };\n\n /**\n * batch draw\n * @method\n * @name batchDraw\n * @return {Konva.Stage} this\n * @memberof Konva.Stage.prototype\n */\n Konva.Stage.prototype.batchDraw = function() {\n this.getChildren().each(function(layer) {\n layer.batchDraw();\n });\n return this;\n };\n})(Konva);\n\n(function() {\n 'use strict';\n var blacklist = {\n node: 1,\n duration: 1,\n easing: 1,\n onFinish: 1,\n yoyo: 1\n },\n PAUSED = 1,\n PLAYING = 2,\n REVERSING = 3,\n idCounter = 0,\n colorAttrs = ['fill', 'stroke', 'shadowColor'];\n\n var Tween = function(prop, propFunc, func, begin, finish, duration, yoyo) {\n this.prop = prop;\n this.propFunc = propFunc;\n this.begin = begin;\n this._pos = begin;\n this.duration = duration;\n this._change = 0;\n this.prevPos = 0;\n this.yoyo = yoyo;\n this._time = 0;\n this._position = 0;\n this._startTime = 0;\n this._finish = 0;\n this.func = func;\n this._change = finish - this.begin;\n this.pause();\n };\n /*\n * Tween methods\n */\n Tween.prototype = {\n fire: function(str) {\n var handler = this[str];\n if (handler) {\n handler();\n }\n },\n setTime: function(t) {\n if (t > this.duration) {\n if (this.yoyo) {\n this._time = this.duration;\n this.reverse();\n } else {\n this.finish();\n }\n } else if (t < 0) {\n if (this.yoyo) {\n this._time = 0;\n this.play();\n } else {\n this.reset();\n }\n } else {\n this._time = t;\n this.update();\n }\n },\n getTime: function() {\n return this._time;\n },\n setPosition: function(p) {\n this.prevPos = this._pos;\n this.propFunc(p);\n this._pos = p;\n },\n getPosition: function(t) {\n if (t === undefined) {\n t = this._time;\n }\n return this.func(t, this.begin, this._change, this.duration);\n },\n play: function() {\n this.state = PLAYING;\n this._startTime = this.getTimer() - this._time;\n this.onEnterFrame();\n this.fire('onPlay');\n },\n reverse: function() {\n this.state = REVERSING;\n this._time = this.duration - this._time;\n this._startTime = this.getTimer() - this._time;\n this.onEnterFrame();\n this.fire('onReverse');\n },\n seek: function(t) {\n this.pause();\n this._time = t;\n this.update();\n this.fire('onSeek');\n },\n reset: function() {\n this.pause();\n this._time = 0;\n this.update();\n this.fire('onReset');\n },\n finish: function() {\n this.pause();\n this._time = this.duration;\n this.update();\n this.fire('onFinish');\n },\n update: function() {\n this.setPosition(this.getPosition(this._time));\n },\n onEnterFrame: function() {\n var t = this.getTimer() - this._startTime;\n if (this.state === PLAYING) {\n this.setTime(t);\n } else if (this.state === REVERSING) {\n this.setTime(this.duration - t);\n }\n },\n pause: function() {\n this.state = PAUSED;\n this.fire('onPause');\n },\n getTimer: function() {\n return new Date().getTime();\n }\n };\n\n /**\n * Tween constructor. Tweens enable you to animate a node between the current state and a new state.\n * You can play, pause, reverse, seek, reset, and finish tweens. By default, tweens are animated using\n * a linear easing. For more tweening options, check out {@link Konva.Easings}\n * @constructor\n * @memberof Konva\n * @example\n * // instantiate new tween which fully rotates a node in 1 second\n * var tween = new Konva.Tween({\n * node: node,\n * rotationDeg: 360,\n * duration: 1,\n * easing: Konva.Easings.EaseInOut\n * });\n *\n * // play tween\n * tween.play();\n *\n * // pause tween\n * tween.pause();\n */\n Konva.Tween = function(config) {\n var that = this,\n node = config.node,\n nodeId = node._id,\n duration,\n easing = config.easing || Konva.Easings.Linear,\n yoyo = !!config.yoyo,\n key;\n\n if (typeof config.duration === 'undefined') {\n duration = 0.3;\n } else if (config.duration === 0) {\n // zero is bad value for duration\n duration = 0.001;\n } else {\n duration = config.duration;\n }\n this.node = node;\n this._id = idCounter++;\n\n var layers =\n node.getLayer() ||\n (node instanceof Konva.Stage ? node.getLayers() : null);\n if (!layers) {\n Konva.Util.error(\n 'Tween constructor have `node` that is not in a layer. Please add node into layer first.'\n );\n }\n this.anim = new Konva.Animation(function() {\n that.tween.onEnterFrame();\n }, layers);\n\n this.tween = new Tween(\n key,\n function(i) {\n that._tweenFunc(i);\n },\n easing,\n 0,\n 1,\n duration * 1000,\n yoyo\n );\n\n this._addListeners();\n\n // init attrs map\n if (!Konva.Tween.attrs[nodeId]) {\n Konva.Tween.attrs[nodeId] = {};\n }\n if (!Konva.Tween.attrs[nodeId][this._id]) {\n Konva.Tween.attrs[nodeId][this._id] = {};\n }\n // init tweens map\n if (!Konva.Tween.tweens[nodeId]) {\n Konva.Tween.tweens[nodeId] = {};\n }\n\n for (key in config) {\n if (blacklist[key] === undefined) {\n this._addAttr(key, config[key]);\n }\n }\n\n this.reset();\n\n // callbacks\n this.onFinish = config.onFinish;\n this.onReset = config.onReset;\n };\n\n // start/diff object = attrs.nodeId.tweenId.attr\n Konva.Tween.attrs = {};\n // tweenId = tweens.nodeId.attr\n Konva.Tween.tweens = {};\n\n Konva.Tween.prototype = {\n _addAttr: function(key, end) {\n var node = this.node,\n nodeId = node._id,\n start,\n diff,\n tweenId,\n n,\n len,\n trueEnd,\n trueStart,\n endRGBA;\n\n // remove conflict from tween map if it exists\n tweenId = Konva.Tween.tweens[nodeId][key];\n\n if (tweenId) {\n delete Konva.Tween.attrs[nodeId][tweenId][key];\n }\n\n // add to tween map\n start = node.getAttr(key);\n\n if (Konva.Util._isArray(end)) {\n diff = [];\n len = Math.max(end.length, start.length);\n\n if (key === 'points' && end.length !== start.length) {\n // before tweening points we need to make sure that start.length === end.length\n // Konva.Util._prepareArrayForTween thinking that end.length > start.length\n\n if (end.length > start.length) {\n // so in this case we will increase number of starting points\n trueStart = start;\n start = Konva.Util._prepareArrayForTween(start, end, node.closed());\n } else {\n // in this case we will increase number of eding points\n trueEnd = end;\n end = Konva.Util._prepareArrayForTween(end, start, node.closed());\n }\n }\n\n if (key.indexOf('fill') === 0) {\n for (n = 0; n < len; n++) {\n if (n % 2 === 0) {\n diff.push(end[n] - start[n]);\n } else {\n var startRGBA = Konva.Util.colorToRGBA(start[n]);\n endRGBA = Konva.Util.colorToRGBA(end[n]);\n start[n] = startRGBA;\n diff.push({\n r: endRGBA.r - startRGBA.r,\n g: endRGBA.g - startRGBA.g,\n b: endRGBA.b - startRGBA.b,\n a: endRGBA.a - startRGBA.a\n });\n }\n }\n } else {\n for (n = 0; n < len; n++) {\n diff.push(end[n] - start[n]);\n }\n }\n } else if (colorAttrs.indexOf(key) !== -1) {\n start = Konva.Util.colorToRGBA(start);\n endRGBA = Konva.Util.colorToRGBA(end);\n diff = {\n r: endRGBA.r - start.r,\n g: endRGBA.g - start.g,\n b: endRGBA.b - start.b,\n a: endRGBA.a - start.a\n };\n } else {\n diff = end - start;\n }\n\n Konva.Tween.attrs[nodeId][this._id][key] = {\n start: start,\n diff: diff,\n end: end,\n trueEnd: trueEnd,\n trueStart: trueStart\n };\n Konva.Tween.tweens[nodeId][key] = this._id;\n },\n _tweenFunc: function(i) {\n var node = this.node,\n attrs = Konva.Tween.attrs[node._id][this._id],\n key,\n attr,\n start,\n diff,\n newVal,\n n,\n len,\n end;\n\n for (key in attrs) {\n attr = attrs[key];\n start = attr.start;\n diff = attr.diff;\n end = attr.end;\n\n if (Konva.Util._isArray(start)) {\n newVal = [];\n len = Math.max(start.length, end.length);\n if (key.indexOf('fill') === 0) {\n for (n = 0; n < len; n++) {\n if (n % 2 === 0) {\n newVal.push((start[n] || 0) + diff[n] * i);\n } else {\n newVal.push(\n 'rgba(' +\n Math.round(start[n].r + diff[n].r * i) +\n ',' +\n Math.round(start[n].g + diff[n].g * i) +\n ',' +\n Math.round(start[n].b + diff[n].b * i) +\n ',' +\n (start[n].a + diff[n].a * i) +\n ')'\n );\n }\n }\n } else {\n for (n = 0; n < len; n++) {\n newVal.push((start[n] || 0) + diff[n] * i);\n }\n }\n } else if (colorAttrs.indexOf(key) !== -1) {\n newVal =\n 'rgba(' +\n Math.round(start.r + diff.r * i) +\n ',' +\n Math.round(start.g + diff.g * i) +\n ',' +\n Math.round(start.b + diff.b * i) +\n ',' +\n (start.a + diff.a * i) +\n ')';\n } else {\n newVal = start + diff * i;\n }\n\n node.setAttr(key, newVal);\n }\n },\n _addListeners: function() {\n var that = this;\n\n // start listeners\n this.tween.onPlay = function() {\n that.anim.start();\n };\n this.tween.onReverse = function() {\n that.anim.start();\n };\n\n // stop listeners\n this.tween.onPause = function() {\n that.anim.stop();\n };\n this.tween.onFinish = function() {\n var node = that.node;\n\n // after tweening points of line we need to set original end\n var attrs = Konva.Tween.attrs[node._id][that._id];\n if (attrs.points && attrs.points.trueEnd) {\n node.points(attrs.points.trueEnd);\n }\n\n if (that.onFinish) {\n that.onFinish.call(that);\n }\n };\n this.tween.onReset = function() {\n var node = that.node;\n // after tweening points of line we need to set original start\n var attrs = Konva.Tween.attrs[node._id][that._id];\n if (attrs.points && attrs.points.trueStart) {\n node.points(attrs.points.trueStart);\n }\n\n if (that.onReset) {\n that.onReset();\n }\n };\n },\n /**\n * play\n * @method\n * @memberof Konva.Tween.prototype\n * @returns {Tween}\n */\n play: function() {\n this.tween.play();\n return this;\n },\n /**\n * reverse\n * @method\n * @memberof Konva.Tween.prototype\n * @returns {Tween}\n */\n reverse: function() {\n this.tween.reverse();\n return this;\n },\n /**\n * reset\n * @method\n * @memberof Konva.Tween.prototype\n * @returns {Tween}\n */\n reset: function() {\n this.tween.reset();\n return this;\n },\n /**\n * seek\n * @method\n * @memberof Konva.Tween.prototype\n * @param {Integer} t time in seconds between 0 and the duration\n * @returns {Tween}\n */\n seek: function(t) {\n this.tween.seek(t * 1000);\n return this;\n },\n /**\n * pause\n * @method\n * @memberof Konva.Tween.prototype\n * @returns {Tween}\n */\n pause: function() {\n this.tween.pause();\n return this;\n },\n /**\n * finish\n * @method\n * @memberof Konva.Tween.prototype\n * @returns {Tween}\n */\n finish: function() {\n this.tween.finish();\n return this;\n },\n /**\n * destroy\n * @method\n * @memberof Konva.Tween.prototype\n */\n destroy: function() {\n var nodeId = this.node._id,\n thisId = this._id,\n attrs = Konva.Tween.tweens[nodeId],\n key;\n\n this.pause();\n\n for (key in attrs) {\n delete Konva.Tween.tweens[nodeId][key];\n }\n\n delete Konva.Tween.attrs[nodeId][thisId];\n }\n };\n\n /**\n * Tween node properties. Shorter usage of {@link Konva.Tween} object.\n *\n * @method Konva.Node#to\n * @memberof Konva.Node\n * @param {Object} [params] tween params\n * @example\n *\n * circle.to({\n * x : 50,\n * duration : 0.5\n * });\n */\n Konva.Node.prototype.to = function(params) {\n var onFinish = params.onFinish;\n params.node = this;\n params.onFinish = function() {\n this.destroy();\n if (onFinish) {\n onFinish();\n }\n };\n var tween = new Konva.Tween(params);\n tween.play();\n };\n\n /*\n * These eases were ported from an Adobe Flash tweening library to JavaScript\n * by Xaric\n */\n\n /**\n * @namespace Easings\n * @memberof Konva\n */\n Konva.Easings = {\n /**\n * back ease in\n * @function\n * @memberof Konva.Easings\n */\n BackEaseIn: function(t, b, c, d) {\n var s = 1.70158;\n return c * (t /= d) * t * ((s + 1) * t - s) + b;\n },\n /**\n * back ease out\n * @function\n * @memberof Konva.Easings\n */\n BackEaseOut: function(t, b, c, d) {\n var s = 1.70158;\n return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;\n },\n /**\n * back ease in out\n * @function\n * @memberof Konva.Easings\n */\n BackEaseInOut: function(t, b, c, d) {\n var s = 1.70158;\n if ((t /= d / 2) < 1) {\n return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;\n }\n return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;\n },\n /**\n * elastic ease in\n * @function\n * @memberof Konva.Easings\n */\n ElasticEaseIn: function(t, b, c, d, a, p) {\n // added s = 0\n var s = 0;\n if (t === 0) {\n return b;\n }\n if ((t /= d) === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n if (!a || a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n return (\n -(\n a *\n Math.pow(2, 10 * (t -= 1)) *\n Math.sin((t * d - s) * (2 * Math.PI) / p)\n ) + b\n );\n },\n /**\n * elastic ease out\n * @function\n * @memberof Konva.Easings\n */\n ElasticEaseOut: function(t, b, c, d, a, p) {\n // added s = 0\n var s = 0;\n if (t === 0) {\n return b;\n }\n if ((t /= d) === 1) {\n return b + c;\n }\n if (!p) {\n p = d * 0.3;\n }\n if (!a || a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n return (\n a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) +\n c +\n b\n );\n },\n /**\n * elastic ease in out\n * @function\n * @memberof Konva.Easings\n */\n ElasticEaseInOut: function(t, b, c, d, a, p) {\n // added s = 0\n var s = 0;\n if (t === 0) {\n return b;\n }\n if ((t /= d / 2) === 2) {\n return b + c;\n }\n if (!p) {\n p = d * (0.3 * 1.5);\n }\n if (!a || a < Math.abs(c)) {\n a = c;\n s = p / 4;\n } else {\n s = p / (2 * Math.PI) * Math.asin(c / a);\n }\n if (t < 1) {\n return (\n -0.5 *\n (a *\n Math.pow(2, 10 * (t -= 1)) *\n Math.sin((t * d - s) * (2 * Math.PI) / p)) +\n b\n );\n }\n return (\n a *\n Math.pow(2, -10 * (t -= 1)) *\n Math.sin((t * d - s) * (2 * Math.PI) / p) *\n 0.5 +\n c +\n b\n );\n },\n /**\n * bounce ease out\n * @function\n * @memberof Konva.Easings\n */\n BounceEaseOut: function(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 * bounce ease in\n * @function\n * @memberof Konva.Easings\n */\n BounceEaseIn: function(t, b, c, d) {\n return c - Konva.Easings.BounceEaseOut(d - t, 0, c, d) + b;\n },\n /**\n * bounce ease in out\n * @function\n * @memberof Konva.Easings\n */\n BounceEaseInOut: function(t, b, c, d) {\n if (t < d / 2) {\n return Konva.Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;\n } else {\n return (\n Konva.Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b\n );\n }\n },\n /**\n * ease in\n * @function\n * @memberof Konva.Easings\n */\n EaseIn: function(t, b, c, d) {\n return c * (t /= d) * t + b;\n },\n /**\n * ease out\n * @function\n * @memberof Konva.Easings\n */\n EaseOut: function(t, b, c, d) {\n return -c * (t /= d) * (t - 2) + b;\n },\n /**\n * ease in out\n * @function\n * @memberof Konva.Easings\n */\n EaseInOut: function(t, b, c, d) {\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t + b;\n }\n return -c / 2 * (--t * (t - 2) - 1) + b;\n },\n /**\n * strong ease in\n * @function\n * @memberof Konva.Easings\n */\n StrongEaseIn: function(t, b, c, d) {\n return c * (t /= d) * t * t * t * t + b;\n },\n /**\n * strong ease out\n * @function\n * @memberof Konva.Easings\n */\n StrongEaseOut: function(t, b, c, d) {\n return c * ((t = t / d - 1) * t * t * t * t + 1) + b;\n },\n /**\n * strong ease in out\n * @function\n * @memberof Konva.Easings\n */\n StrongEaseInOut: function(t, b, c, d) {\n if ((t /= d / 2) < 1) {\n return c / 2 * t * t * t * t * t + b;\n }\n return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;\n },\n /**\n * linear\n * @function\n * @memberof Konva.Easings\n */\n Linear: function(t, b, c, d) {\n return c * t / d + b;\n }\n };\n})();\n\n(function() {\n 'use strict';\n Konva.DD = {\n // properties\n anim: new Konva.Animation(function() {\n var b = this.dirty;\n this.dirty = false;\n return b;\n }),\n isDragging: false,\n justDragged: false,\n offset: {\n x: 0,\n y: 0\n },\n node: null,\n\n // methods\n _drag: function(evt) {\n var dd = Konva.DD,\n node = dd.node;\n if (node) {\n if (!dd.isDragging) {\n var pos = node.getStage().getPointerPosition();\n // it is possible that pos is undefined\n // reattach it\n if (!pos) {\n node.getStage()._setPointerPosition(evt);\n pos = node.getStage().getPointerPosition();\n }\n var dragDistance = node.dragDistance();\n var distance = Math.max(\n Math.abs(pos.x - dd.startPointerPos.x),\n Math.abs(pos.y - dd.startPointerPos.y)\n );\n if (distance < dragDistance) {\n return;\n }\n }\n\n node.getStage()._setPointerPosition(evt);\n if (!dd.isDragging) {\n dd.isDragging = true;\n node.fire(\n 'dragstart',\n {\n type: 'dragstart',\n target: node,\n evt: evt\n },\n true\n );\n // a user can stop dragging inside `dragstart`\n if (!node.isDragging()) {\n return;\n }\n }\n node._setDragPosition(evt);\n\n // execute ondragmove if defined\n node.fire(\n 'dragmove',\n {\n type: 'dragmove',\n target: node,\n evt: evt\n },\n true\n );\n }\n },\n _endDragBefore: function(evt) {\n var dd = Konva.DD,\n node = dd.node,\n layer;\n\n if (node) {\n layer = node.getLayer();\n dd.anim.stop();\n\n // only fire dragend event if the drag and drop\n // operation actually started.\n if (dd.isDragging) {\n dd.isDragging = false;\n dd.justDragged = true;\n Konva.listenClickTap = false;\n\n if (evt) {\n evt.dragEndNode = node;\n }\n }\n\n delete dd.node;\n\n if (node.getLayer() || layer || node instanceof Konva.Stage) {\n (layer || node).draw();\n }\n }\n },\n _endDragAfter: function(evt) {\n evt = evt || {};\n var dragEndNode = evt.dragEndNode;\n\n if (evt && dragEndNode) {\n dragEndNode.fire(\n 'dragend',\n {\n type: 'dragend',\n target: dragEndNode,\n evt: evt\n },\n true\n );\n }\n }\n };\n\n // Node extenders\n\n /**\n * initiate drag and drop\n * @method\n * @memberof Konva.Node.prototype\n */\n Konva.Node.prototype.startDrag = function() {\n var dd = Konva.DD,\n stage = this.getStage(),\n layer = this.getLayer(),\n pos = stage.getPointerPosition(),\n ap = this.getAbsolutePosition();\n\n if (pos) {\n if (dd.node) {\n dd.node.stopDrag();\n }\n\n dd.node = this;\n dd.startPointerPos = pos;\n dd.offset.x = pos.x - ap.x;\n dd.offset.y = pos.y - ap.y;\n dd.anim.setLayers(layer || this.getLayers());\n dd.anim.start();\n\n this._setDragPosition();\n }\n };\n\n Konva.Node.prototype._setDragPosition = function(evt) {\n var dd = Konva.DD,\n pos = this.getStage().getPointerPosition(),\n dbf = this.getDragBoundFunc();\n if (!pos) {\n return;\n }\n var newNodePos = {\n x: pos.x - dd.offset.x,\n y: pos.y - dd.offset.y\n };\n\n if (dbf !== undefined) {\n newNodePos = dbf.call(this, newNodePos, evt);\n }\n this.setAbsolutePosition(newNodePos);\n\n if (\n !this._lastPos ||\n this._lastPos.x !== newNodePos.x ||\n this._lastPos.y !== newNodePos.y\n ) {\n dd.anim.dirty = true;\n }\n\n this._lastPos = newNodePos;\n };\n\n /**\n * stop drag and drop\n * @method\n * @memberof Konva.Node.prototype\n */\n Konva.Node.prototype.stopDrag = function() {\n var dd = Konva.DD,\n evt = {};\n dd._endDragBefore(evt);\n dd._endDragAfter(evt);\n };\n\n Konva.Node.prototype.setDraggable = function(draggable) {\n this._setAttr('draggable', draggable);\n this._dragChange();\n };\n\n var origRemove = Konva.Node.prototype.remove;\n\n Konva.Node.prototype.__originalRemove = origRemove;\n Konva.Node.prototype.remove = function() {\n var dd = Konva.DD;\n\n // stop DD\n if (dd.node && dd.node._id === this._id) {\n this.stopDrag();\n }\n\n origRemove.call(this);\n };\n\n /**\n * determine if node is currently in drag and drop mode\n * @method\n * @memberof Konva.Node.prototype\n */\n Konva.Node.prototype.isDragging = function() {\n var dd = Konva.DD;\n return !!(dd.node && dd.node._id === this._id && dd.isDragging);\n };\n\n Konva.Node.prototype._listenDrag = function() {\n var that = this;\n\n this._dragCleanup();\n\n if (this.getClassName() === 'Stage') {\n this.on('contentMousedown.konva contentTouchstart.konva', function(evt) {\n if (!Konva.DD.node) {\n that.startDrag(evt);\n }\n });\n } else {\n this.on('mousedown.konva touchstart.konva', function(evt) {\n // ignore right and middle buttons\n if (evt.evt.button === 1 || evt.evt.button === 2) {\n return;\n }\n if (!Konva.DD.node) {\n that.startDrag(evt);\n }\n });\n }\n\n // listening is required for drag and drop\n /*\n this._listeningEnabled = true;\n this._clearSelfAndAncestorCache('listeningEnabled');\n */\n };\n\n Konva.Node.prototype._dragChange = function() {\n if (this.attrs.draggable) {\n this._listenDrag();\n } else {\n // remove event listeners\n this._dragCleanup();\n\n /*\n * force drag and drop to end\n * if this node is currently in\n * drag and drop mode\n */\n var stage = this.getStage();\n var dd = Konva.DD;\n if (stage && dd.node && dd.node._id === this._id) {\n dd.node.stopDrag();\n }\n }\n };\n\n Konva.Node.prototype._dragCleanup = function() {\n if (this.getClassName() === 'Stage') {\n this.off('contentMousedown.konva');\n this.off('contentTouchstart.konva');\n } else {\n this.off('mousedown.konva');\n this.off('touchstart.konva');\n }\n };\n\n Konva.Factory.addGetterSetter(Konva.Node, 'dragBoundFunc');\n\n /**\n * get/set drag bound function. This is used to override the default\n * drag and drop position.\n * @name dragBoundFunc\n * @method\n * @memberof Konva.Node.prototype\n * @param {Function} dragBoundFunc\n * @returns {Function}\n * @example\n * // get drag bound function\n * var dragBoundFunc = node.dragBoundFunc();\n *\n * // create vertical drag and drop\n * node.dragBoundFunc(function(pos){\n * // important pos - is absolute position of the node\n * // you should return absolute position too\n * return {\n * x: this.getAbsolutePosition().x,\n * y: pos.y\n * };\n * });\n */\n\n Konva.Factory.addGetter(Konva.Node, 'draggable', false);\n Konva.Factory.addOverloadedGetterSetter(Konva.Node, 'draggable');\n\n /**\n * get/set draggable flag\n * @name draggable\n * @method\n * @memberof Konva.Node.prototype\n * @param {Boolean} draggable\n * @returns {Boolean}\n * @example\n * // get draggable flag\n * var draggable = node.draggable();\n *\n * // enable drag and drop\n * node.draggable(true);\n *\n * // disable drag and drop\n * node.draggable(false);\n */\n\n if (Konva.isBrowser) {\n window.addEventListener('mouseup', Konva.DD._endDragBefore, true);\n window.addEventListener('touchend', Konva.DD._endDragBefore, true);\n\n window.addEventListener('mousemove', Konva.DD._drag);\n window.addEventListener('touchmove', Konva.DD._drag);\n\n window.addEventListener('mouseup', Konva.DD._endDragAfter, false);\n window.addEventListener('touchend', Konva.DD._endDragAfter, false);\n }\n})();\n\n(function() {\n 'use strict';\n /**\n * Rect constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} [config.cornerRadius]\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var rect = new Konva.Rect({\n * width: 100,\n * height: 50,\n * fill: 'red',\n * stroke: 'black',\n * strokeWidth: 5\n * });\n */\n Konva.Rect = function(config) {\n this.___init(config);\n };\n\n Konva.Rect.prototype = {\n ___init: function(config) {\n Konva.Shape.call(this, config);\n this.className = 'Rect';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var cornerRadius = this.getCornerRadius(),\n width = this.getWidth(),\n height = this.getHeight();\n\n context.beginPath();\n\n if (!cornerRadius) {\n // simple rect - don't bother doing all that complicated maths stuff.\n context.rect(0, 0, width, height);\n } else {\n // arcTo would be nicer, but browser support is patchy (Opera)\n cornerRadius = Math.min(cornerRadius, width / 2, height / 2);\n context.moveTo(cornerRadius, 0);\n context.lineTo(width - cornerRadius, 0);\n context.arc(\n width - cornerRadius,\n cornerRadius,\n cornerRadius,\n Math.PI * 3 / 2,\n 0,\n false\n );\n context.lineTo(width, height - cornerRadius);\n context.arc(\n width - cornerRadius,\n height - cornerRadius,\n cornerRadius,\n 0,\n Math.PI / 2,\n false\n );\n context.lineTo(cornerRadius, height);\n context.arc(\n cornerRadius,\n height - cornerRadius,\n cornerRadius,\n Math.PI / 2,\n Math.PI,\n false\n );\n context.lineTo(0, cornerRadius);\n context.arc(\n cornerRadius,\n cornerRadius,\n cornerRadius,\n Math.PI,\n Math.PI * 3 / 2,\n false\n );\n }\n context.closePath();\n context.fillStrokeShape(this);\n }\n };\n\n Konva.Util.extend(Konva.Rect, Konva.Shape);\n\n Konva.Factory.addGetterSetter(\n Konva.Rect,\n 'cornerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set corner radius\n * @name cornerRadius\n * @method\n * @memberof Konva.Rect.prototype\n * @param {Number} cornerRadius\n * @returns {Number}\n * @example\n * // get corner radius\n * var cornerRadius = rect.cornerRadius();\n *\n * // set corner radius\n * rect.cornerRadius(10);\n */\n\n Konva.Collection.mapMethods(Konva.Rect);\n})();\n\n(function(Konva) {\n 'use strict';\n // the 0.0001 offset fixes a bug in Chrome 27\n var PIx2 = Math.PI * 2 - 0.0001,\n CIRCLE = 'Circle';\n\n /**\n * Circle constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} config.radius\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * // create circle\n * var circle = new Konva.Circle({\n * radius: 40,\n * fill: 'red',\n * stroke: 'black'\n * strokeWidth: 5\n * });\n */\n Konva.Circle = function(config) {\n this.___init(config);\n };\n\n Konva.Circle.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = CIRCLE;\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n context.beginPath();\n context.arc(0, 0, this.getRadius(), 0, PIx2, false);\n context.closePath();\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.radius() !== width / 2) {\n this.setRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.radius() !== height / 2) {\n this.setRadius(height / 2);\n }\n }\n };\n Konva.Util.extend(Konva.Circle, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.Circle,\n 'radius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n Konva.Factory.addOverloadedGetterSetter(Konva.Circle, 'radius');\n\n /**\n * get/set radius\n * @name radius\n * @method\n * @memberof Konva.Circle.prototype\n * @param {Number} radius\n * @returns {Number}\n * @example\n * // get radius\n * var radius = circle.radius();\n *\n * // set radius\n * circle.radius(10);\n */\n\n Konva.Collection.mapMethods(Konva.Circle);\n})(Konva);\n\n(function() {\n 'use strict';\n // the 0.0001 offset fixes a bug in Chrome 27\n var PIx2 = Math.PI * 2 - 0.0001,\n ELLIPSE = 'Ellipse';\n\n /**\n * Ellipse constructor\n * @constructor\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Object} config.radius defines x and y radius\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var ellipse = new Konva.Ellipse({\n * radius : {\n * x : 50,\n * y : 50\n * },\n * fill: 'red'\n * });\n */\n Konva.Ellipse = function(config) {\n this.___init(config);\n };\n\n Konva.Ellipse.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = ELLIPSE;\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var rx = this.getRadiusX(),\n ry = this.getRadiusY();\n\n context.beginPath();\n context.save();\n if (rx !== ry) {\n context.scale(1, ry / rx);\n }\n context.arc(0, 0, rx, 0, PIx2, false);\n context.restore();\n context.closePath();\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getRadiusX() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getRadiusY() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n this.setRadius({\n x: width / 2\n });\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n this.setRadius({\n y: height / 2\n });\n }\n };\n Konva.Util.extend(Konva.Ellipse, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addComponentsGetterSetter(Konva.Ellipse, 'radius', ['x', 'y']);\n\n /**\n * get/set radius\n * @name radius\n * @method\n * @memberof Konva.Ellipse.prototype\n * @param {Object} radius\n * @param {Number} radius.x\n * @param {Number} radius.y\n * @returns {Object}\n * @example\n * // get radius\n * var radius = ellipse.radius();\n *\n * // set radius\n * ellipse.radius({\n * x: 200,\n * y: 100\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Ellipse,\n 'radiusX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set radius x\n * @name radiusX\n * @method\n * @memberof Konva.Ellipse.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get radius x\n * var radiusX = ellipse.radiusX();\n *\n * // set radius x\n * ellipse.radiusX(200);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Ellipse,\n 'radiusY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set radius y\n * @name radiusY\n * @method\n * @memberof Konva.Ellipse.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get radius y\n * var radiusY = ellipse.radiusY();\n *\n * // set radius y\n * ellipse.radiusY(200);\n */\n\n Konva.Collection.mapMethods(Konva.Ellipse);\n})();\n\n(function() {\n 'use strict';\n // the 0.0001 offset fixes a bug in Chrome 27\n var PIx2 = Math.PI * 2 - 0.0001;\n /**\n * Ring constructor\n * @constructor\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} config.innerRadius\n * @param {Number} config.outerRadius\n * @param {Boolean} [config.clockwise]\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var ring = new Konva.Ring({\n * innerRadius: 40,\n * outerRadius: 80,\n * fill: 'red',\n * stroke: 'black',\n * strokeWidth: 5\n * });\n */\n Konva.Ring = function(config) {\n this.___init(config);\n };\n\n Konva.Ring.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Ring';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n context.beginPath();\n context.arc(0, 0, this.getInnerRadius(), 0, PIx2, false);\n context.moveTo(this.getOuterRadius(), 0);\n context.arc(0, 0, this.getOuterRadius(), PIx2, 0, true);\n context.closePath();\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.outerRadius() !== width / 2) {\n this.setOuterRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.outerRadius() !== height / 2) {\n this.setOuterRadius(height / 2);\n }\n },\n setOuterRadius: function(val) {\n this._setAttr('outerRadius', val);\n this.setWidth(val * 2);\n this.setHeight(val * 2);\n }\n };\n Konva.Util.extend(Konva.Ring, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.Ring,\n 'innerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set innerRadius\n * @name innerRadius\n * @method\n * @memberof Konva.Ring.prototype\n * @param {Number} innerRadius\n * @returns {Number}\n * @example\n * // get inner radius\n * var innerRadius = ring.innerRadius();\n *\n * // set inner radius\n * ring.innerRadius(20);\n */\n Konva.Factory.addGetter(\n Konva.Ring,\n 'outerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n Konva.Factory.addOverloadedGetterSetter(Konva.Ring, 'outerRadius');\n\n /**\n * get/set outerRadius\n * @name outerRadius\n * @method\n * @memberof Konva.Ring.prototype\n * @param {Number} outerRadius\n * @returns {Number}\n * @example\n * // get outer radius\n * var outerRadius = ring.outerRadius();\n *\n * // set outer radius\n * ring.outerRadius(20);\n */\n\n Konva.Collection.mapMethods(Konva.Ring);\n})();\n\n(function() {\n 'use strict';\n /**\n * Wedge constructor\n * @constructor\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} config.angle in degrees\n * @param {Number} config.radius\n * @param {Boolean} [config.clockwise]\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * // draw a wedge that's pointing downwards\n * var wedge = new Konva.Wedge({\n * radius: 40,\n * fill: 'red',\n * stroke: 'black'\n * strokeWidth: 5,\n * angleDeg: 60,\n * rotationDeg: -120\n * });\n */\n Konva.Wedge = function(config) {\n this.___init(config);\n };\n\n Konva.Wedge.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Wedge';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n context.beginPath();\n context.arc(\n 0,\n 0,\n this.getRadius(),\n 0,\n Konva.getAngle(this.getAngle()),\n this.getClockwise()\n );\n context.lineTo(0, 0);\n context.closePath();\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.radius() !== width / 2) {\n this.setRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.radius() !== height / 2) {\n this.setRadius(height / 2);\n }\n }\n };\n Konva.Util.extend(Konva.Wedge, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.Wedge,\n 'radius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set radius\n * @name radius\n * @method\n * @memberof Konva.Wedge.prototype\n * @param {Number} radius\n * @returns {Number}\n * @example\n * // get radius\n * var radius = wedge.radius();\n *\n * // set radius\n * wedge.radius(10);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Wedge,\n 'angle',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set angle in degrees\n * @name angle\n * @method\n * @memberof Konva.Wedge.prototype\n * @param {Number} angle\n * @returns {Number}\n * @example\n * // get angle\n * var angle = wedge.angle();\n *\n * // set angle\n * wedge.angle(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Wedge, 'clockwise', false);\n\n /**\n * get/set clockwise flag\n * @name clockwise\n * @method\n * @memberof Konva.Wedge.prototype\n * @param {Number} clockwise\n * @returns {Number}\n * @example\n * // get clockwise flag\n * var clockwise = wedge.clockwise();\n *\n * // draw wedge counter-clockwise\n * wedge.clockwise(false);\n *\n * // draw wedge clockwise\n * wedge.clockwise(true);\n */\n\n Konva.Factory.backCompat(Konva.Wedge, {\n angleDeg: 'angle',\n getAngleDeg: 'getAngle',\n setAngleDeg: 'setAngle'\n });\n\n Konva.Collection.mapMethods(Konva.Wedge);\n})();\n\n(function(Konva) {\n 'use strict';\n /**\n * Arc constructor\n * @constructor\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} config.angle in degrees\n * @param {Number} config.innerRadius\n * @param {Number} config.outerRadius\n * @param {Boolean} [config.clockwise]\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * // draw a Arc that's pointing downwards\n * var arc = new Konva.Arc({\n * innerRadius: 40,\n * outerRadius: 80,\n * fill: 'red',\n * stroke: 'black'\n * strokeWidth: 5,\n * angle: 60,\n * rotationDeg: -120\n * });\n */\n Konva.Arc = function(config) {\n this.___init(config);\n };\n\n Konva.Arc.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Arc';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var angle = Konva.getAngle(this.angle()),\n clockwise = this.clockwise();\n\n context.beginPath();\n context.arc(0, 0, this.getOuterRadius(), 0, angle, clockwise);\n context.arc(0, 0, this.getInnerRadius(), angle, 0, !clockwise);\n context.closePath();\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.getOuterRadius() !== width / 2) {\n this.setOuterRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.getOuterRadius() !== height / 2) {\n this.setOuterRadius(height / 2);\n }\n }\n };\n Konva.Util.extend(Konva.Arc, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.Arc,\n 'innerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set innerRadius\n * @name innerRadius\n * @method\n * @memberof Konva.Arc.prototype\n * @param {Number} innerRadius\n * @returns {Number}\n * @example\n * // get inner radius\n * var innerRadius = arc.innerRadius();\n *\n * // set inner radius\n * arc.innerRadius(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Arc,\n 'outerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set outerRadius\n * @name outerRadius\n * @method\n * @memberof Konva.Arc.prototype\n * @param {Number} outerRadius\n * @returns {Number}\n * @example\n * // get outer radius\n * var outerRadius = arc.outerRadius();\n *\n * // set outer radius\n * arc.outerRadius(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Arc,\n 'angle',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set angle in degrees\n * @name angle\n * @method\n * @memberof Konva.Arc.prototype\n * @param {Number} angle\n * @returns {Number}\n * @example\n * // get angle\n * var angle = arc.angle();\n *\n * // set angle\n * arc.angle(20);\n */\n\n Konva.Factory.addGetterSetter(Konva.Arc, 'clockwise', false);\n\n /**\n * get/set clockwise flag\n * @name clockwise\n * @method\n * @memberof Konva.Arc.prototype\n * @param {Boolean} clockwise\n * @returns {Boolean}\n * @example\n * // get clockwise flag\n * var clockwise = arc.clockwise();\n *\n * // draw arc counter-clockwise\n * arc.clockwise(false);\n *\n * // draw arc clockwise\n * arc.clockwise(true);\n */\n\n Konva.Collection.mapMethods(Konva.Arc);\n})(Konva);\n\n(function() {\n 'use strict';\n // CONSTANTS\n var IMAGE = 'Image';\n\n /**\n * Image constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Image} config.image\n * @param {Object} [config.crop]\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var imageObj = new Image();\n * imageObj.onload = function() {\n * var image = new Konva.Image({\n * x: 200,\n * y: 50,\n * image: imageObj,\n * width: 100,\n * height: 100\n * });\n * };\n * imageObj.src = '/path/to/image.jpg'\n */\n Konva.Image = function(config) {\n this.___init(config);\n };\n\n Konva.Image.prototype = {\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = IMAGE;\n this.sceneFunc(this._sceneFunc);\n this.hitFunc(this._hitFunc);\n },\n _useBufferCanvas: function() {\n return (\n (this.hasShadow() || this.getAbsoluteOpacity() !== 1) &&\n this.hasStroke() &&\n this.getStage()\n );\n },\n _sceneFunc: function(context) {\n var width = this.getWidth(),\n height = this.getHeight(),\n image = this.getImage(),\n cropWidth,\n cropHeight,\n params;\n\n if (image) {\n cropWidth = this.getCropWidth();\n cropHeight = this.getCropHeight();\n if (cropWidth && cropHeight) {\n params = [\n image,\n this.getCropX(),\n this.getCropY(),\n cropWidth,\n cropHeight,\n 0,\n 0,\n width,\n height\n ];\n } else {\n params = [image, 0, 0, width, height];\n }\n }\n\n if (this.hasFill() || this.hasStroke()) {\n context.beginPath();\n context.rect(0, 0, width, height);\n context.closePath();\n context.fillStrokeShape(this);\n }\n\n if (image) {\n context.drawImage.apply(context, params);\n }\n },\n _hitFunc: function(context) {\n var width = this.getWidth(),\n height = this.getHeight();\n\n context.beginPath();\n context.rect(0, 0, width, height);\n context.closePath();\n context.fillStrokeShape(this);\n },\n getWidth: function() {\n var image = this.getImage();\n return this.attrs.width || (image ? image.width : 0);\n },\n getHeight: function() {\n var image = this.getImage();\n return this.attrs.height || (image ? image.height : 0);\n }\n };\n Konva.Util.extend(Konva.Image, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(Konva.Image, 'image');\n\n /**\n * set image\n * @name setImage\n * @method\n * @memberof Konva.Image.prototype\n * @param {Image} image\n */\n\n /**\n * get image\n * @name getImage\n * @method\n * @memberof Konva.Image.prototype\n * @returns {Image}\n */\n\n Konva.Factory.addComponentsGetterSetter(Konva.Image, 'crop', [\n 'x',\n 'y',\n 'width',\n 'height'\n ]);\n /**\n * get/set crop\n * @method\n * @name crop\n * @memberof Konva.Image.prototype\n * @param {Object} crop\n * @param {Number} crop.x\n * @param {Number} crop.y\n * @param {Number} crop.width\n * @param {Number} crop.height\n * @returns {Object}\n * @example\n * // get crop\n * var crop = image.crop();\n *\n * // set crop\n * image.crop({\n * x: 20,\n * y: 20,\n * width: 20,\n * height: 20\n * });\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Image,\n 'cropX',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set crop x\n * @method\n * @name cropX\n * @memberof Konva.Image.prototype\n * @param {Number} x\n * @returns {Number}\n * @example\n * // get crop x\n * var cropX = image.cropX();\n *\n * // set crop x\n * image.cropX(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Image,\n 'cropY',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set crop y\n * @name cropY\n * @method\n * @memberof Konva.Image.prototype\n * @param {Number} y\n * @returns {Number}\n * @example\n * // get crop y\n * var cropY = image.cropY();\n *\n * // set crop y\n * image.cropY(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Image,\n 'cropWidth',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set crop width\n * @name cropWidth\n * @method\n * @memberof Konva.Image.prototype\n * @param {Number} width\n * @returns {Number}\n * @example\n * // get crop width\n * var cropWidth = image.cropWidth();\n *\n * // set crop width\n * image.cropWidth(20);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Image,\n 'cropHeight',\n 0,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set crop height\n * @name cropHeight\n * @method\n * @memberof Konva.Image.prototype\n * @param {Number} height\n * @returns {Number}\n * @example\n * // get crop height\n * var cropHeight = image.cropHeight();\n *\n * // set crop height\n * image.cropHeight(20);\n */\n\n Konva.Collection.mapMethods(Konva.Image);\n\n /**\n * load image from given url and create `Konva.Image` instance\n * @method\n * @memberof Konva.Image\n * @param {String} url image source\n * @param {Function} callback with Konva.Image instance as first argument\n * @example\n * Konva.Image.fromURL(imageURL, function(image){\n * // image is Konva.Image instance\n * layer.add(image);\n * layer.draw();\n * });\n */\n Konva.Image.fromURL = function(url, callback) {\n var img = new Image();\n img.onload = function() {\n var image = new Konva.Image({\n image: img\n });\n callback(image);\n };\n img.crossOrigin = 'Anonymous';\n img.src = url;\n };\n})();\n\n/*eslint-disable max-depth */\n(function() {\n 'use strict';\n // var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n // constants\n var AUTO = 'auto',\n //CANVAS = 'canvas',\n CENTER = 'center',\n JUSTIFY = 'justify',\n CHANGE_KONVA = 'Change.konva',\n CONTEXT_2D = '2d',\n DASH = '-',\n EMPTY_STRING = '',\n LEFT = 'left',\n TEXT = 'text',\n TEXT_UPPER = 'Text',\n TOP = 'top',\n BOTTOM = 'bottom',\n MIDDLE = 'middle',\n NORMAL = 'normal',\n PX_SPACE = 'px ',\n SPACE = ' ',\n RIGHT = 'right',\n WORD = 'word',\n CHAR = 'char',\n NONE = 'none',\n ELLIPSIS = '…',\n ATTR_CHANGE_LIST = [\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontVariant',\n 'padding',\n 'align',\n 'verticalAlign',\n 'lineHeight',\n 'text',\n 'width',\n 'height',\n 'wrap',\n 'ellipsis',\n 'letterSpacing'\n ],\n // cached variables\n attrChangeListLen = ATTR_CHANGE_LIST.length;\n var dummyContext;\n function getDummyContext() {\n if (dummyContext) {\n return dummyContext;\n }\n dummyContext = Konva.Util.createCanvasElement().getContext(CONTEXT_2D);\n return dummyContext;\n }\n\n /**\n * Text constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {String} [config.fontFamily] default is Arial\n * @param {Number} [config.fontSize] in pixels. Default is 12\n * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal\n * @param {String} [config.fontVariant] can be normal or small-caps. Default is normal\n * @param {String} config.text\n * @param {String} [config.align] can be left, center, or right\n * @param {String} [config.verticalAlign] can be top, middle or bottom\n * @param {Number} [config.padding]\n * @param {Number} [config.lineHeight] default is 1\n * @param {String} [config.wrap] can be word, char, or none. Default is word\n * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap=\"none\" and ellipsis=true, then it will add \"...\" to the end\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var text = new Konva.Text({\n * x: 10,\n * y: 15,\n * text: 'Simple Text',\n * fontSize: 30,\n * fontFamily: 'Calibri',\n * fill: 'green'\n * });\n */\n Konva.Text = function(config) {\n this.___init(config);\n };\n function _fillFunc(context) {\n context.fillText(this.partialText, 0, 0);\n }\n function _strokeFunc(context) {\n context.strokeText(this.partialText, 0, 0);\n }\n\n Konva.Text.prototype = {\n ___init: function(config) {\n config = config || {};\n\n // set default color to black\n if (\n !config.fillLinearGradientColorStops &&\n !config.fillRadialGradientColorStops\n ) {\n config.fill = config.fill || 'black';\n }\n //\n // if (config.width === undefined) {\n // config.width = AUTO;\n // }\n // if (config.height === undefined) {\n // config.height = AUTO;\n // }\n\n // call super constructor\n Konva.Shape.call(this, config);\n\n this._fillFunc = _fillFunc;\n this._strokeFunc = _strokeFunc;\n this.className = TEXT_UPPER;\n\n // update text data for certain attr changes\n for (var n = 0; n < attrChangeListLen; n++) {\n this.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, this._setTextData);\n }\n\n this._setTextData();\n this.sceneFunc(this._sceneFunc);\n this.hitFunc(this._hitFunc);\n },\n _sceneFunc: function(context) {\n var padding = this.getPadding(),\n textHeight = this.getTextHeight(),\n lineHeightPx = this.getLineHeight() * textHeight,\n textArr = this.textArr,\n textArrLen = textArr.length,\n verticalAlign = this.getVerticalAlign(),\n alignY = 0,\n align = this.getAlign(),\n totalWidth = this.getWidth(),\n letterSpacing = this.getLetterSpacing(),\n textDecoration = this.textDecoration(),\n fill = this.fill(),\n fontSize = this.fontSize(),\n n;\n\n context.setAttr('font', this._getContextFont());\n\n context.setAttr('textBaseline', MIDDLE);\n context.setAttr('textAlign', LEFT);\n\n // handle vertical alignment\n if (verticalAlign === MIDDLE) {\n alignY =\n (this.getHeight() - textArrLen * lineHeightPx - padding * 2) / 2;\n } else if (verticalAlign === BOTTOM) {\n alignY = this.getHeight() - textArrLen * lineHeightPx - padding * 2;\n }\n\n if (padding) {\n context.translate(padding, 0);\n context.translate(0, alignY + padding + lineHeightPx / 2);\n } else {\n context.translate(0, alignY + lineHeightPx / 2);\n }\n\n // draw text lines\n for (n = 0; n < textArrLen; n++) {\n var obj = textArr[n],\n text = obj.text,\n width = obj.width,\n lastLine = n !== textArrLen - 1,\n spacesNumber,\n oneWord,\n lineWidth;\n\n // horizontal alignment\n context.save();\n if (align === RIGHT) {\n context.translate(totalWidth - width - padding * 2, 0);\n } else if (align === CENTER) {\n context.translate((totalWidth - width - padding * 2) / 2, 0);\n }\n\n if (textDecoration.indexOf('underline') !== -1) {\n context.save();\n context.beginPath();\n\n context.moveTo(0, Math.round(lineHeightPx / 2));\n spacesNumber = text.split(' ').length - 1;\n oneWord = spacesNumber === 0;\n lineWidth =\n align === JUSTIFY && lastLine && !oneWord\n ? totalWidth - padding * 2\n : width;\n context.lineTo(Math.round(lineWidth), Math.round(lineHeightPx / 2));\n // TODO: I have no idea what is real ratio\n // just /15 looks good enough\n context.lineWidth = fontSize / 15;\n context.strokeStyle = fill;\n context.stroke();\n context.restore();\n }\n if (textDecoration.indexOf('line-through') !== -1) {\n context.save();\n context.beginPath();\n context.moveTo(0, 0);\n spacesNumber = text.split(' ').length - 1;\n oneWord = spacesNumber === 0;\n lineWidth =\n align === JUSTIFY && lastLine && !oneWord\n ? totalWidth - padding * 2\n : width;\n context.lineTo(Math.round(lineWidth), 0);\n context.lineWidth = fontSize / 15;\n context.strokeStyle = fill;\n context.stroke();\n context.restore();\n }\n if (letterSpacing !== 0 || align === JUSTIFY) {\n // var words = text.split(' ');\n spacesNumber = text.split(' ').length - 1;\n for (var li = 0; li < text.length; li++) {\n var letter = text[li];\n // skip justify for the last line\n if (letter === ' ' && n !== textArrLen - 1 && align === JUSTIFY) {\n context.translate(\n Math.floor((totalWidth - padding * 2 - width) / spacesNumber),\n 0\n );\n }\n this.partialText = letter;\n context.fillStrokeShape(this);\n context.translate(\n Math.round(this._getTextSize(letter).width) + letterSpacing,\n 0\n );\n }\n } else {\n this.partialText = text;\n\n context.fillStrokeShape(this);\n }\n context.restore();\n if (textArrLen > 1) {\n context.translate(0, lineHeightPx);\n }\n }\n },\n _hitFunc: function(context) {\n var width = this.getWidth(),\n height = this.getHeight();\n\n context.beginPath();\n context.rect(0, 0, width, height);\n context.closePath();\n context.fillStrokeShape(this);\n },\n setText: function(text) {\n var str = Konva.Util._isString(text) ? text : (text || '').toString();\n this._setAttr(TEXT, str);\n return this;\n },\n /**\n * get width of text area, which includes padding\n * @method\n * @memberof Konva.Text.prototype\n * @returns {Number}\n */\n getWidth: function() {\n var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;\n return isAuto\n ? this.getTextWidth() + this.getPadding() * 2\n : this.attrs.width;\n },\n /**\n * get the height of the text area, which takes into account multi-line text, line heights, and padding\n * @method\n * @memberof Konva.Text.prototype\n * @returns {Number}\n */\n getHeight: function() {\n var isAuto =\n this.attrs.height === AUTO || this.attrs.height === undefined;\n return isAuto\n ? this.getTextHeight() * this.textArr.length * this.getLineHeight() +\n this.getPadding() * 2\n : this.attrs.height;\n },\n /**\n * get text width\n * @method\n * @memberof Konva.Text.prototype\n * @returns {Number}\n */\n getTextWidth: function() {\n return this.textWidth;\n },\n /**\n * get height of one line text\n * @method\n * @memberof Konva.Text.prototype\n * @returns {Number}\n */\n getTextHeight: function() {\n return this.textHeight;\n },\n _getTextSize: function(text) {\n var _context = getDummyContext(),\n fontSize = this.getFontSize(),\n metrics;\n\n _context.save();\n _context.font = this._getContextFont();\n\n metrics = _context.measureText(text);\n _context.restore();\n return {\n width: metrics.width,\n height: parseInt(fontSize, 10)\n };\n },\n _getContextFont: function() {\n // IE don't want to work with usual font style\n // bold was not working\n // removing font variant will solve\n // fix for: https://github.com/konvajs/konva/issues/94\n if (Konva.UA.isIE) {\n return (\n this.getFontStyle() +\n SPACE +\n this.getFontSize() +\n PX_SPACE +\n this.getFontFamily()\n );\n }\n return (\n this.getFontStyle() +\n SPACE +\n this.getFontVariant() +\n SPACE +\n this.getFontSize() +\n PX_SPACE +\n this.getFontFamily()\n );\n },\n _addTextLine: function(line) {\n if (this.align() === JUSTIFY) {\n line = line.trim();\n }\n var width = this._getTextWidth(line);\n return this.textArr.push({ text: line, width: width });\n },\n _getTextWidth: function(text) {\n var latterSpacing = this.getLetterSpacing();\n var length = text.length;\n return (\n getDummyContext().measureText(text).width +\n (length ? latterSpacing * (length - 1) : 0)\n );\n },\n _setTextData: function() {\n var lines = this.getText().split('\\n'),\n fontSize = +this.getFontSize(),\n textWidth = 0,\n lineHeightPx = this.getLineHeight() * fontSize,\n width = this.attrs.width,\n height = this.attrs.height,\n fixedWidth = width !== AUTO,\n fixedHeight = height !== AUTO,\n padding = this.getPadding(),\n maxWidth = width - padding * 2,\n maxHeightPx = height - padding * 2,\n currentHeightPx = 0,\n wrap = this.getWrap(),\n // align = this.getAlign(),\n shouldWrap = wrap !== NONE,\n wrapAtWord = wrap !== CHAR && shouldWrap,\n shouldAddEllipsis = this.getEllipsis() && !shouldWrap;\n\n this.textArr = [];\n getDummyContext().font = this._getContextFont();\n for (var i = 0, max = lines.length; i < max; ++i) {\n var line = lines[i];\n var additionalWidth = shouldAddEllipsis\n ? this._getTextWidth(ELLIPSIS)\n : 0;\n\n var lineWidth = this._getTextWidth(line);\n if (fixedWidth && lineWidth > maxWidth) {\n /*\n * if width is fixed and line does not fit entirely\n * break the line into multiple fitting lines\n */\n while (line.length > 0) {\n /*\n * use binary search to find the longest substring that\n * that would fit in the specified width\n */\n var low = 0,\n high = line.length,\n match = '',\n matchWidth = 0;\n while (low < high) {\n var mid = (low + high) >>> 1,\n substr = line.slice(0, mid + 1),\n substrWidth = this._getTextWidth(substr) + additionalWidth;\n if (substrWidth <= maxWidth) {\n low = mid + 1;\n match = substr + (shouldAddEllipsis ? ELLIPSIS : '');\n matchWidth = substrWidth;\n } else {\n high = mid;\n }\n }\n /*\n * 'low' is now the index of the substring end\n * 'match' is the substring\n * 'matchWidth' is the substring width in px\n */\n if (match) {\n // a fitting substring was found\n if (wrapAtWord) {\n // try to find a space or dash where wrapping could be done\n var wrapIndex;\n var nextChar = line[match.length];\n var nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;\n if (nextIsSpaceOrDash && matchWidth <= maxWidth) {\n wrapIndex = match.length;\n } else {\n wrapIndex =\n Math.max(\n match.lastIndexOf(SPACE),\n match.lastIndexOf(DASH)\n ) + 1;\n }\n if (wrapIndex > 0) {\n // re-cut the substring found at the space/dash position\n low = wrapIndex;\n match = match.slice(0, low);\n matchWidth = this._getTextWidth(match);\n }\n }\n // if (align === 'right') {\n match = Konva.Util.trimRight(match);\n // }\n this._addTextLine(match);\n textWidth = Math.max(textWidth, matchWidth);\n currentHeightPx += lineHeightPx;\n if (\n !shouldWrap ||\n (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx)\n ) {\n /*\n * stop wrapping if wrapping is disabled or if adding\n * one more line would overflow the fixed height\n */\n break;\n }\n line = line.slice(low);\n line = Konva.Util.trimLeft(line);\n if (line.length > 0) {\n // Check if the remaining text would fit on one line\n lineWidth = this._getTextWidth(line);\n if (lineWidth <= maxWidth) {\n // if it does, add the line and break out of the loop\n this._addTextLine(line);\n currentHeightPx += lineHeightPx;\n textWidth = Math.max(textWidth, lineWidth);\n break;\n }\n }\n } else {\n // not even one character could fit in the element, abort\n break;\n }\n }\n } else {\n // element width is automatically adjusted to max line width\n this._addTextLine(line);\n currentHeightPx += lineHeightPx;\n textWidth = Math.max(textWidth, lineWidth);\n }\n // if element height is fixed, abort if adding one more line would overflow\n if (fixedHeight && currentHeightPx + lineHeightPx > maxHeightPx) {\n break;\n }\n }\n this.textHeight = fontSize;\n // var maxTextWidth = 0;\n // for(var j = 0; j < this.textArr.length; j++) {\n // maxTextWidth = Math.max(maxTextWidth, this.textArr[j].width);\n // }\n this.textWidth = textWidth;\n }\n };\n Konva.Util.extend(Konva.Text, Konva.Shape);\n\n Konva.Factory.addSetter(\n Konva.Node,\n 'width',\n Konva.Validators.getNumberOrAutoValidator()\n );\n\n Konva.Factory.addSetter(\n Konva.Node,\n 'height',\n Konva.Validators.getNumberOrAutoValidator()\n );\n\n // add getters setters\n Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial');\n\n /**\n * get/set font family\n * @name fontFamily\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} fontFamily\n * @returns {String}\n * @example\n * // get font family\n * var fontFamily = text.fontFamily();\n *\n * // set font family\n * text.fontFamily('Arial');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Text,\n 'fontSize',\n 12,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set font size in pixels\n * @name fontSize\n * @method\n * @memberof Konva.Text.prototype\n * @param {Number} fontSize\n * @returns {Number}\n * @example\n * // get font size\n * var fontSize = text.fontSize();\n *\n * // set font size to 22px\n * text.fontSize(22);\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL);\n\n /**\n * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.\n * @name fontStyle\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} fontStyle\n * @returns {String}\n * @example\n * // get font style\n * var fontStyle = text.fontStyle();\n *\n * // set font style\n * text.fontStyle('bold');\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL);\n\n /**\n * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.\n * @name fontVariant\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} fontVariant\n * @returns {String}\n * @example\n * // get font variant\n * var fontVariant = text.fontVariant();\n *\n * // set font variant\n * text.fontVariant('small-caps');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Text,\n 'padding',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set padding\n * @name padding\n * @method\n * @memberof Konva.Text.prototype\n * @param {Number} padding\n * @returns {Number}\n * @example\n * // get padding\n * var padding = text.padding();\n *\n * // set padding to 10 pixels\n * text.padding(10);\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT);\n\n /**\n * get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'\n * @name align\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} align\n * @returns {String}\n * @example\n * // get text align\n * var align = text.align();\n *\n * // center text\n * text.align('center');\n *\n * // align text to right\n * text.align('right');\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'verticalAlign', TOP);\n\n /**\n * get/set vertical align of text. Can be 'top', 'middle', 'bottom'.\n * @name verticalAlign\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} verticalAlign\n * @returns {String}\n * @example\n * // get text vertical align\n * var verticalAlign = text.verticalAlign();\n *\n * // center text\n * text.verticalAlign('middle');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Text,\n 'lineHeight',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set line height. The default is 1.\n * @name lineHeight\n * @method\n * @memberof Konva.Text.prototype\n * @param {Number} lineHeight\n * @returns {Number}\n * @example\n * // get line height\n * var lineHeight = text.lineHeight();\n *\n * // set the line height\n * text.lineHeight(2);\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD);\n\n /**\n * get/set wrap. Can be word, char, or none. Default is word.\n * @name wrap\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} wrap\n * @returns {String}\n * @example\n * // get wrap\n * var wrap = text.wrap();\n *\n * // set wrap\n * text.wrap('word');\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);\n\n /**\n * get/set ellipsis. Can be true or false. Default is false.\n * if Konva.Text config is set to wrap=\"none\" and ellipsis=true, then it will add \"...\" to the end\n * @name ellipsis\n * @method\n * @memberof Konva.Text.prototype\n * @param {Boolean} ellipsis\n * @returns {Boolean}\n * @example\n * // get ellipsis\n * var ellipsis = text.ellipsis();\n *\n * // set ellipsis\n * text.ellipsis(true);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Text,\n 'letterSpacing',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set letter spacing property. Default value is 0.\n * @name letterSpacing\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {Number} letterSpacing\n */\n\n Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);\n Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');\n\n /**\n * get/set text\n * @name getText\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} text\n * @returns {String}\n * @example\n * // get text\n * var text = text.text();\n *\n * // set text\n * text.text('Hello world!');\n */\n\n Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);\n\n /**\n * get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space\n * @name textDecoration\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} textDecoration\n * @returns {String}\n * @example\n * // get text decoration\n * var textDecoration = text.textDecoration();\n *\n * // underline text\n * text.textDecoration('underline');\n *\n * // strike text\n * text.textDecoration('line-through');\n *\n * // underline and strike text\n * text.textDecoration('underline line-through');\n */\n\n Konva.Collection.mapMethods(Konva.Text);\n})();\n\n(function() {\n 'use strict';\n /**\n * Line constructor. Lines are defined by an array of points and\n * a tension\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].\n * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation.\n * The default is 0\n * @param {Boolean} [config.closed] defines whether or not the line shape is closed, creating a polygon or blob\n * @param {Boolean} [config.bezier] if no tension is provided but bezier=true, we draw the line as a bezier using the passed points\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var line = new Konva.Line({\n * x: 100,\n * y: 50,\n * points: [73, 70, 340, 23, 450, 60, 500, 20],\n * stroke: 'red',\n * tension: 1\n * });\n */\n Konva.Line = function(config) {\n this.___init(config);\n };\n\n Konva.Line.prototype = {\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Line';\n\n this.on(\n 'pointsChange.konva tensionChange.konva closedChange.konva bezierChange.konva',\n function() {\n this._clearCache('tensionPoints');\n }\n );\n\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var points = this.getPoints(),\n length = points.length,\n tension = this.getTension(),\n closed = this.getClosed(),\n bezier = this.getBezier(),\n tp,\n len,\n n;\n\n if (!length) {\n return;\n }\n\n context.beginPath();\n context.moveTo(points[0], points[1]);\n\n // tension\n if (tension !== 0 && length > 4) {\n tp = this.getTensionPoints();\n len = tp.length;\n n = closed ? 0 : 4;\n\n if (!closed) {\n context.quadraticCurveTo(tp[0], tp[1], tp[2], tp[3]);\n }\n\n while (n < len - 2) {\n context.bezierCurveTo(\n tp[n++],\n tp[n++],\n tp[n++],\n tp[n++],\n tp[n++],\n tp[n++]\n );\n }\n\n if (!closed) {\n context.quadraticCurveTo(\n tp[len - 2],\n tp[len - 1],\n points[length - 2],\n points[length - 1]\n );\n }\n } else if (bezier) {\n // no tension but bezier\n n = 2;\n\n while (n < length) {\n context.bezierCurveTo(\n points[n++],\n points[n++],\n points[n++],\n points[n++],\n points[n++],\n points[n++]\n );\n }\n } else {\n // no tension\n for (n = 2; n < length; n += 2) {\n context.lineTo(points[n], points[n + 1]);\n }\n }\n\n // closed e.g. polygons and blobs\n if (closed) {\n context.closePath();\n context.fillStrokeShape(this);\n } else {\n // open e.g. lines and splines\n context.strokeShape(this);\n }\n },\n getTensionPoints: function() {\n return this._getCache('tensionPoints', this._getTensionPoints);\n },\n _getTensionPoints: function() {\n if (this.getClosed()) {\n return this._getTensionPointsClosed();\n } else {\n return Konva.Util._expandPoints(this.getPoints(), this.getTension());\n }\n },\n _getTensionPointsClosed: function() {\n var p = this.getPoints(),\n len = p.length,\n tension = this.getTension(),\n util = Konva.Util,\n firstControlPoints = util._getControlPoints(\n p[len - 2],\n p[len - 1],\n p[0],\n p[1],\n p[2],\n p[3],\n tension\n ),\n lastControlPoints = util._getControlPoints(\n p[len - 4],\n p[len - 3],\n p[len - 2],\n p[len - 1],\n p[0],\n p[1],\n tension\n ),\n middle = Konva.Util._expandPoints(p, tension),\n tp = [firstControlPoints[2], firstControlPoints[3]]\n .concat(middle)\n .concat([\n lastControlPoints[0],\n lastControlPoints[1],\n p[len - 2],\n p[len - 1],\n lastControlPoints[2],\n lastControlPoints[3],\n firstControlPoints[0],\n firstControlPoints[1],\n p[0],\n p[1]\n ]);\n\n return tp;\n },\n getWidth: function() {\n return this.getSelfRect().width;\n },\n getHeight: function() {\n return this.getSelfRect().height;\n },\n // overload size detection\n getSelfRect: function() {\n var points;\n if (this.getTension() !== 0) {\n points = this._getTensionPoints();\n } else {\n points = this.getPoints();\n }\n var minX = points[0];\n var maxX = points[0];\n var minY = points[1];\n var maxY = points[1];\n var x, y;\n for (var i = 0; i < points.length / 2; i++) {\n x = points[i * 2];\n y = points[i * 2 + 1];\n minX = Math.min(minX, x);\n maxX = Math.max(maxX, x);\n minY = Math.min(minY, y);\n maxY = Math.max(maxY, y);\n }\n return {\n x: Math.round(minX),\n y: Math.round(minY),\n width: Math.round(maxX - minX),\n height: Math.round(maxY - minY)\n };\n }\n };\n Konva.Util.extend(Konva.Line, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(Konva.Line, 'closed', false);\n\n /**\n * get/set closed flag. The default is false\n * @name closed\n * @method\n * @memberof Konva.Line.prototype\n * @param {Boolean} closed\n * @returns {Boolean}\n * @example\n * // get closed flag\n * var closed = line.closed();\n *\n * // close the shape\n * line.closed(true);\n *\n * // open the shape\n * line.closed(false);\n */\n\n Konva.Factory.addGetterSetter(Konva.Line, 'bezier', false);\n\n /**\n * get/set bezier flag. The default is false\n * @name bezier\n * @method\n * @memberof Konva.Line.prototype\n * @param {Boolean} bezier\n * @returns {Boolean}\n * @example\n * // get whether the line is a bezier\n * var isBezier = line.bezier();\n *\n * // set whether the line is a bezier\n * line.bezier(true);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Line,\n 'tension',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set tension\n * @name tension\n * @method\n * @memberof Konva.Line.prototype\n * @param {Number} Higher values will result in a more curvy line. A value of 0 will result in no interpolation.\n * The default is 0\n * @returns {Number}\n * @example\n * // get tension\n * var tension = line.tension();\n *\n * // set tension\n * line.tension(3);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Line,\n 'points',\n [],\n Konva.Validators.getNumberArrayValidator()\n );\n /**\n * get/set points array\n * @name points\n * @method\n * @memberof Konva.Line.prototype\n * @param {Array} points\n * @returns {Array}\n * @example\n * // get points\n * var points = line.points();\n *\n * // set points\n * line.points([10, 20, 30, 40, 50, 60]);\n *\n * // push a new point\n * line.points(line.points().concat([70, 80]));\n */\n\n Konva.Collection.mapMethods(Konva.Line);\n})();\n\n(function() {\n 'use strict';\n /**\n * Sprite constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {String} config.animation animation key\n * @param {Object} config.animations animation map\n * @param {Integer} [config.frameIndex] animation frame index\n * @param {Image} config.image image object\n * @param {Integer} [config.frameRate] animation frame rate\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var imageObj = new Image();\n * imageObj.onload = function() {\n * var sprite = new Konva.Sprite({\n * x: 200,\n * y: 100,\n * image: imageObj,\n * animation: 'standing',\n * animations: {\n * standing: [\n * // x, y, width, height (6 frames)\n * 0, 0, 49, 109,\n * 52, 0, 49, 109,\n * 105, 0, 49, 109,\n * 158, 0, 49, 109,\n * 210, 0, 49, 109,\n * 262, 0, 49, 109\n * ],\n * kicking: [\n * // x, y, width, height (6 frames)\n * 0, 109, 45, 98,\n * 45, 109, 45, 98,\n * 95, 109, 63, 98,\n * 156, 109, 70, 98,\n * 229, 109, 60, 98,\n * 287, 109, 41, 98\n * ]\n * },\n * frameRate: 7,\n * frameIndex: 0\n * });\n * };\n * imageObj.src = '/path/to/image.jpg'\n */\n Konva.Sprite = function(config) {\n this.___init(config);\n };\n\n Konva.Sprite.prototype = {\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Sprite';\n\n this._updated = true;\n var that = this;\n this.anim = new Konva.Animation(function() {\n // if we don't need to redraw layer we should return false\n var updated = that._updated;\n that._updated = false;\n return updated;\n });\n this.on('animationChange.konva', function() {\n // reset index when animation changes\n this.frameIndex(0);\n });\n this.on('frameIndexChange.konva', function() {\n this._updated = true;\n });\n // smooth change for frameRate\n this.on('frameRateChange.konva', function() {\n if (!this.anim.isRunning()) {\n return;\n }\n clearInterval(this.interval);\n this._setInterval();\n });\n\n this.sceneFunc(this._sceneFunc);\n this.hitFunc(this._hitFunc);\n },\n _sceneFunc: function(context) {\n var anim = this.getAnimation(),\n index = this.frameIndex(),\n ix4 = index * 4,\n set = this.getAnimations()[anim],\n offsets = this.frameOffsets(),\n x = set[ix4 + 0],\n y = set[ix4 + 1],\n width = set[ix4 + 2],\n height = set[ix4 + 3],\n image = this.getImage();\n\n if (this.hasFill() || this.hasStroke()) {\n context.beginPath();\n context.rect(0, 0, width, height);\n context.closePath();\n context.fillStrokeShape(this);\n }\n\n if (image) {\n if (offsets) {\n var offset = offsets[anim],\n ix2 = index * 2;\n context.drawImage(\n image,\n x,\n y,\n width,\n height,\n offset[ix2 + 0],\n offset[ix2 + 1],\n width,\n height\n );\n } else {\n context.drawImage(image, x, y, width, height, 0, 0, width, height);\n }\n }\n },\n _hitFunc: function(context) {\n var anim = this.getAnimation(),\n index = this.frameIndex(),\n ix4 = index * 4,\n set = this.getAnimations()[anim],\n offsets = this.frameOffsets(),\n width = set[ix4 + 2],\n height = set[ix4 + 3];\n\n context.beginPath();\n if (offsets) {\n var offset = offsets[anim];\n var ix2 = index * 2;\n context.rect(offset[ix2 + 0], offset[ix2 + 1], width, height);\n } else {\n context.rect(0, 0, width, height);\n }\n context.closePath();\n context.fillShape(this);\n },\n _useBufferCanvas: function() {\n return (\n (this.hasShadow() || this.getAbsoluteOpacity() !== 1) &&\n this.hasStroke()\n );\n },\n _setInterval: function() {\n var that = this;\n this.interval = setInterval(function() {\n that._updateIndex();\n }, 1000 / this.getFrameRate());\n },\n /**\n * start sprite animation\n * @method\n * @memberof Konva.Sprite.prototype\n */\n start: function() {\n if (this.isRunning()) {\n return;\n }\n var layer = this.getLayer();\n\n /*\n * animation object has no executable function because\n * the updates are done with a fixed FPS with the setInterval\n * below. The anim object only needs the layer reference for\n * redraw\n */\n this.anim.setLayers(layer);\n this._setInterval();\n this.anim.start();\n },\n /**\n * stop sprite animation\n * @method\n * @memberof Konva.Sprite.prototype\n */\n stop: function() {\n this.anim.stop();\n clearInterval(this.interval);\n },\n /**\n * determine if animation of sprite is running or not. returns true or false\n * @method\n * @memberof Konva.Sprite.prototype\n * @returns {Boolean}\n */\n isRunning: function() {\n return this.anim.isRunning();\n },\n _updateIndex: function() {\n var index = this.frameIndex(),\n animation = this.getAnimation(),\n animations = this.getAnimations(),\n anim = animations[animation],\n len = anim.length / 4;\n\n if (index < len - 1) {\n this.frameIndex(index + 1);\n } else {\n this.frameIndex(0);\n }\n }\n };\n Konva.Util.extend(Konva.Sprite, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(Konva.Sprite, 'animation');\n\n /**\n * get/set animation key\n * @name animation\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {String} anim animation key\n * @returns {String}\n * @example\n * // get animation key\n * var animation = sprite.animation();\n *\n * // set animation key\n * sprite.animation('kicking');\n */\n\n Konva.Factory.addGetterSetter(Konva.Sprite, 'animations');\n\n /**\n * get/set animations map\n * @name animations\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {Object} animations\n * @returns {Object}\n * @example\n * // get animations map\n * var animations = sprite.animations();\n *\n * // set animations map\n * sprite.animations({\n * standing: [\n * // x, y, width, height (6 frames)\n * 0, 0, 49, 109,\n * 52, 0, 49, 109,\n * 105, 0, 49, 109,\n * 158, 0, 49, 109,\n * 210, 0, 49, 109,\n * 262, 0, 49, 109\n * ],\n * kicking: [\n * // x, y, width, height (6 frames)\n * 0, 109, 45, 98,\n * 45, 109, 45, 98,\n * 95, 109, 63, 98,\n * 156, 109, 70, 98,\n * 229, 109, 60, 98,\n * 287, 109, 41, 98\n * ]\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Sprite, 'frameOffsets');\n\n /**\n * get/set offsets map\n * @name offsets\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {Object} offsets\n * @returns {Object}\n * @example\n * // get offsets map\n * var offsets = sprite.offsets();\n *\n * // set offsets map\n * sprite.offsets({\n * standing: [\n * // x, y (6 frames)\n * 0, 0,\n * 0, 0,\n * 5, 0,\n * 0, 0,\n * 0, 3,\n * 2, 0\n * ],\n * kicking: [\n * // x, y (6 frames)\n * 0, 5,\n * 5, 0,\n * 10, 0,\n * 0, 0,\n * 2, 1,\n * 0, 0\n * ]\n * });\n */\n\n Konva.Factory.addGetterSetter(Konva.Sprite, 'image');\n\n /**\n * get/set image\n * @name image\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {Image} image\n * @returns {Image}\n * @example\n * // get image\n * var image = sprite.image();\n *\n * // set image\n * sprite.image(imageObj);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Sprite,\n 'frameIndex',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set/set animation frame index\n * @name frameIndex\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {Integer} frameIndex\n * @returns {Integer}\n * @example\n * // get animation frame index\n * var frameIndex = sprite.frameIndex();\n *\n * // set animation frame index\n * sprite.frameIndex(3);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Sprite,\n 'frameRate',\n 17,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set frame rate in frames per second. Increase this number to make the sprite\n * animation run faster, and decrease the number to make the sprite animation run slower\n * The default is 17 frames per second\n * @name frameRate\n * @method\n * @memberof Konva.Sprite.prototype\n * @param {Integer} frameRate\n * @returns {Integer}\n * @example\n * // get frame rate\n * var frameRate = sprite.frameRate();\n *\n * // set frame rate to 2 frames per second\n * sprite.frameRate(2);\n */\n\n Konva.Factory.backCompat(Konva.Sprite, {\n index: 'frameIndex',\n getIndex: 'getFrameIndex',\n setIndex: 'setFrameIndex'\n });\n\n Konva.Collection.mapMethods(Konva.Sprite);\n})();\n\n/*eslint-disable no-shadow, max-len, max-depth */\n(function() {\n 'use strict';\n /**\n * Path constructor.\n * @author Jason Follas\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {String} config.data SVG data string\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var path = new Konva.Path({\n * x: 240,\n * y: 40,\n * data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',\n * fill: 'green',\n * scale: 2\n * });\n */\n Konva.Path = function(config) {\n this.___init(config);\n };\n\n Konva.Path.prototype = {\n ___init: function(config) {\n this.dataArray = [];\n var that = this;\n\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Path';\n\n this.dataArray = Konva.Path.parsePathData(this.getData());\n this.pathLength = 0;\n for (var i = 0; i < this.dataArray.length; ++i) {\n this.pathLength += this.dataArray[i].pathLength;\n }\n this.on('dataChange.konva', function() {\n that.dataArray = Konva.Path.parsePathData(this.getData());\n this.pathLength = 0;\n for (var i = 0; i < this.dataArray.length; ++i) {\n this.pathLength += this.dataArray[i].pathLength;\n }\n });\n\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var ca = this.dataArray;\n\n // context position\n context.beginPath();\n for (var n = 0; n < ca.length; n++) {\n var c = ca[n].command;\n var p = ca[n].points;\n switch (c) {\n case 'L':\n context.lineTo(p[0], p[1]);\n break;\n case 'M':\n context.moveTo(p[0], p[1]);\n break;\n case 'C':\n context.bezierCurveTo(p[0], p[1], p[2], p[3], p[4], p[5]);\n break;\n case 'Q':\n context.quadraticCurveTo(p[0], p[1], p[2], p[3]);\n break;\n case 'A':\n var cx = p[0],\n cy = p[1],\n rx = p[2],\n ry = p[3],\n theta = p[4],\n dTheta = p[5],\n psi = p[6],\n fs = p[7];\n\n var r = rx > ry ? rx : ry;\n var scaleX = rx > ry ? 1 : rx / ry;\n var scaleY = rx > ry ? ry / rx : 1;\n\n context.translate(cx, cy);\n context.rotate(psi);\n context.scale(scaleX, scaleY);\n context.arc(0, 0, r, theta, theta + dTheta, 1 - fs);\n context.scale(1 / scaleX, 1 / scaleY);\n context.rotate(-psi);\n context.translate(-cx, -cy);\n\n break;\n case 'z':\n context.closePath();\n break;\n }\n }\n\n context.fillStrokeShape(this);\n },\n getSelfRect: function() {\n var points = [];\n this.dataArray.forEach(function(data) {\n points = points.concat(data.points);\n });\n var minX = points[0];\n var maxX = points[0];\n var minY = points[1];\n var maxY = points[1];\n var x, y;\n for (var i = 0; i < points.length / 2; i++) {\n x = points[i * 2];\n y = points[i * 2 + 1];\n\n // skip bad values\n // TODO: prevent them from parsing function\n if (!isNaN(x)) {\n minX = Math.min(minX, x);\n maxX = Math.max(maxX, x);\n }\n if (!isNaN(y)) {\n minY = Math.min(minY, y);\n maxY = Math.max(maxY, y);\n }\n }\n return {\n x: Math.round(minX),\n y: Math.round(minY),\n width: Math.round(maxX - minX),\n height: Math.round(maxY - minY)\n };\n },\n /**\n * Return length of the path.\n * @method\n * @memberof Konva.Path.prototype\n * @returns {Number} length\n * @example\n * var length = path.getLength();\n */\n getLength: function() {\n return this.pathLength;\n },\n /**\n * Get point on path at specific length of the path\n * @method\n * @memberof Konva.Path.prototype\n * @param {Number} length length\n * @returns {Object} point {x,y} point\n * @example\n * var point = path.getPointAtLength(10);\n */\n getPointAtLength: function(length) {\n var point,\n i = 0,\n ii = this.dataArray.length;\n\n if (!ii) {\n return null;\n }\n\n while (i < ii && length > this.dataArray[i].pathLength) {\n length -= this.dataArray[i].pathLength;\n ++i;\n }\n\n if (i === ii) {\n point = this.dataArray[i - 1].points.slice(-2);\n return {\n x: point[0],\n y: point[1]\n };\n }\n\n if (length < 0.01) {\n point = this.dataArray[i].points.slice(0, 2);\n return {\n x: point[0],\n y: point[1]\n };\n }\n\n var cp = this.dataArray[i];\n var p = cp.points;\n switch (cp.command) {\n case 'L':\n return Konva.Path.getPointOnLine(\n length,\n cp.start.x,\n cp.start.y,\n p[0],\n p[1]\n );\n case 'C':\n return Konva.Path.getPointOnCubicBezier(\n length / cp.pathLength,\n cp.start.x,\n cp.start.y,\n p[0],\n p[1],\n p[2],\n p[3],\n p[4],\n p[5]\n );\n case 'Q':\n return Konva.Path.getPointOnQuadraticBezier(\n length / cp.pathLength,\n cp.start.x,\n cp.start.y,\n p[0],\n p[1],\n p[2],\n p[3]\n );\n case 'A':\n var cx = p[0],\n cy = p[1],\n rx = p[2],\n ry = p[3],\n theta = p[4],\n dTheta = p[5],\n psi = p[6];\n theta += dTheta * length / cp.pathLength;\n return Konva.Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);\n }\n\n return null;\n }\n };\n Konva.Util.extend(Konva.Path, Konva.Shape);\n\n Konva.Path.getLineLength = function(x1, y1, x2, y2) {\n return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));\n };\n Konva.Path.getPointOnLine = function(dist, P1x, P1y, P2x, P2y, fromX, fromY) {\n if (fromX === undefined) {\n fromX = P1x;\n }\n if (fromY === undefined) {\n fromY = P1y;\n }\n\n var m = (P2y - P1y) / (P2x - P1x + 0.00000001);\n var run = Math.sqrt(dist * dist / (1 + m * m));\n if (P2x < P1x) {\n run *= -1;\n }\n var rise = m * run;\n var pt;\n\n if (P2x === P1x) {\n // vertical line\n pt = {\n x: fromX,\n y: fromY + rise\n };\n } else if ((fromY - P1y) / (fromX - P1x + 0.00000001) === m) {\n pt = {\n x: fromX + run,\n y: fromY + rise\n };\n } else {\n var ix, iy;\n\n var len = this.getLineLength(P1x, P1y, P2x, P2y);\n if (len < 0.00000001) {\n return undefined;\n }\n var u = (fromX - P1x) * (P2x - P1x) + (fromY - P1y) * (P2y - P1y);\n u = u / (len * len);\n ix = P1x + u * (P2x - P1x);\n iy = P1y + u * (P2y - P1y);\n\n var pRise = this.getLineLength(fromX, fromY, ix, iy);\n var pRun = Math.sqrt(dist * dist - pRise * pRise);\n run = Math.sqrt(pRun * pRun / (1 + m * m));\n if (P2x < P1x) {\n run *= -1;\n }\n rise = m * run;\n pt = {\n x: ix + run,\n y: iy + rise\n };\n }\n\n return pt;\n };\n\n Konva.Path.getPointOnCubicBezier = function(\n pct,\n P1x,\n P1y,\n P2x,\n P2y,\n P3x,\n P3y,\n P4x,\n P4y\n ) {\n function CB1(t) {\n return t * t * t;\n }\n function CB2(t) {\n return 3 * t * t * (1 - t);\n }\n function CB3(t) {\n return 3 * t * (1 - t) * (1 - t);\n }\n function CB4(t) {\n return (1 - t) * (1 - t) * (1 - t);\n }\n var x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);\n var y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);\n\n return {\n x: x,\n y: y\n };\n };\n Konva.Path.getPointOnQuadraticBezier = function(\n pct,\n P1x,\n P1y,\n P2x,\n P2y,\n P3x,\n P3y\n ) {\n function QB1(t) {\n return t * t;\n }\n function QB2(t) {\n return 2 * t * (1 - t);\n }\n function QB3(t) {\n return (1 - t) * (1 - t);\n }\n var x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);\n var y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);\n\n return {\n x: x,\n y: y\n };\n };\n Konva.Path.getPointOnEllipticalArc = function(cx, cy, rx, ry, theta, psi) {\n var cosPsi = Math.cos(psi),\n sinPsi = Math.sin(psi);\n var pt = {\n x: rx * Math.cos(theta),\n y: ry * Math.sin(theta)\n };\n return {\n x: cx + (pt.x * cosPsi - pt.y * sinPsi),\n y: cy + (pt.x * sinPsi + pt.y * cosPsi)\n };\n };\n /*\n * get parsed data array from the data\n * string. V, v, H, h, and l data are converted to\n * L data for the purpose of high performance Path\n * rendering\n */\n Konva.Path.parsePathData = function(data) {\n // Path Data Segment must begin with a moveTo\n //m (x y)+ Relative moveTo (subsequent points are treated as lineTo)\n //M (x y)+ Absolute moveTo (subsequent points are treated as lineTo)\n //l (x y)+ Relative lineTo\n //L (x y)+ Absolute LineTo\n //h (x)+ Relative horizontal lineTo\n //H (x)+ Absolute horizontal lineTo\n //v (y)+ Relative vertical lineTo\n //V (y)+ Absolute vertical lineTo\n //z (closepath)\n //Z (closepath)\n //c (x1 y1 x2 y2 x y)+ Relative Bezier curve\n //C (x1 y1 x2 y2 x y)+ Absolute Bezier curve\n //q (x1 y1 x y)+ Relative Quadratic Bezier\n //Q (x1 y1 x y)+ Absolute Quadratic Bezier\n //t (x y)+ Shorthand/Smooth Relative Quadratic Bezier\n //T (x y)+ Shorthand/Smooth Absolute Quadratic Bezier\n //s (x2 y2 x y)+ Shorthand/Smooth Relative Bezier curve\n //S (x2 y2 x y)+ Shorthand/Smooth Absolute Bezier curve\n //a (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Relative Elliptical Arc\n //A (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Absolute Elliptical Arc\n\n // return early if data is not defined\n if (!data) {\n return [];\n }\n\n // command string\n var cs = data;\n\n // command chars\n var cc = [\n 'm',\n 'M',\n 'l',\n 'L',\n 'v',\n 'V',\n 'h',\n 'H',\n 'z',\n 'Z',\n 'c',\n 'C',\n 'q',\n 'Q',\n 't',\n 'T',\n 's',\n 'S',\n 'a',\n 'A'\n ];\n // convert white spaces to commas\n cs = cs.replace(new RegExp(' ', 'g'), ',');\n // create pipes so that we can split the data\n for (var n = 0; n < cc.length; n++) {\n cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);\n }\n // create array\n var arr = cs.split('|');\n var ca = [];\n var coords = [];\n // init context point\n var cpx = 0;\n var cpy = 0;\n\n var re = /([-+]?((\\d+\\.\\d+)|((\\d+)|(\\.\\d+)))(?:e[-+]?\\d+)?)/gi;\n var match;\n for (n = 1; n < arr.length; n++) {\n var str = arr[n];\n var c = str.charAt(0);\n str = str.slice(1);\n\n coords.length = 0;\n while ((match = re.exec(str))) {\n coords.push(match[0]);\n }\n\n // while ((match = re.exec(str))) {\n // coords.push(match[0]);\n // }\n var p = [];\n\n for (var j = 0, jlen = coords.length; j < jlen; j++) {\n var parsed = parseFloat(coords[j]);\n if (!isNaN(parsed)) {\n p.push(parsed);\n } else {\n p.push(0);\n }\n }\n\n while (p.length > 0) {\n if (isNaN(p[0])) {\n // case for a trailing comma before next command\n break;\n }\n\n var cmd = null;\n var points = [];\n var startX = cpx,\n startY = cpy;\n // Move var from within the switch to up here (jshint)\n var prevCmd, ctlPtx, ctlPty; // Ss, Tt\n var rx, ry, psi, fa, fs, x1, y1; // Aa\n\n // convert l, H, h, V, and v to L\n switch (c) {\n // Note: Keep the lineTo's above the moveTo's in this switch\n case 'l':\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'L';\n points.push(cpx, cpy);\n break;\n case 'L':\n cpx = p.shift();\n cpy = p.shift();\n points.push(cpx, cpy);\n break;\n // Note: lineTo handlers need to be above this point\n case 'm':\n var dx = p.shift();\n var dy = p.shift();\n cpx += dx;\n cpy += dy;\n cmd = 'M';\n // After closing the path move the current position\n // to the the first point of the path (if any).\n if (ca.length > 2 && ca[ca.length - 1].command === 'z') {\n for (var idx = ca.length - 2; idx >= 0; idx--) {\n if (ca[idx].command === 'M') {\n cpx = ca[idx].points[0] + dx;\n cpy = ca[idx].points[1] + dy;\n break;\n }\n }\n }\n points.push(cpx, cpy);\n c = 'l';\n // subsequent points are treated as relative lineTo\n break;\n case 'M':\n cpx = p.shift();\n cpy = p.shift();\n cmd = 'M';\n points.push(cpx, cpy);\n c = 'L';\n // subsequent points are treated as absolute lineTo\n break;\n\n case 'h':\n cpx += p.shift();\n cmd = 'L';\n points.push(cpx, cpy);\n break;\n case 'H':\n cpx = p.shift();\n cmd = 'L';\n points.push(cpx, cpy);\n break;\n case 'v':\n cpy += p.shift();\n cmd = 'L';\n points.push(cpx, cpy);\n break;\n case 'V':\n cpy = p.shift();\n cmd = 'L';\n points.push(cpx, cpy);\n break;\n case 'C':\n points.push(p.shift(), p.shift(), p.shift(), p.shift());\n cpx = p.shift();\n cpy = p.shift();\n points.push(cpx, cpy);\n break;\n case 'c':\n points.push(\n cpx + p.shift(),\n cpy + p.shift(),\n cpx + p.shift(),\n cpy + p.shift()\n );\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'C';\n points.push(cpx, cpy);\n break;\n case 'S':\n ctlPtx = cpx;\n ctlPty = cpy;\n prevCmd = ca[ca.length - 1];\n if (prevCmd.command === 'C') {\n ctlPtx = cpx + (cpx - prevCmd.points[2]);\n ctlPty = cpy + (cpy - prevCmd.points[3]);\n }\n points.push(ctlPtx, ctlPty, p.shift(), p.shift());\n cpx = p.shift();\n cpy = p.shift();\n cmd = 'C';\n points.push(cpx, cpy);\n break;\n case 's':\n ctlPtx = cpx;\n ctlPty = cpy;\n prevCmd = ca[ca.length - 1];\n if (prevCmd.command === 'C') {\n ctlPtx = cpx + (cpx - prevCmd.points[2]);\n ctlPty = cpy + (cpy - prevCmd.points[3]);\n }\n points.push(ctlPtx, ctlPty, cpx + p.shift(), cpy + p.shift());\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'C';\n points.push(cpx, cpy);\n break;\n case 'Q':\n points.push(p.shift(), p.shift());\n cpx = p.shift();\n cpy = p.shift();\n points.push(cpx, cpy);\n break;\n case 'q':\n points.push(cpx + p.shift(), cpy + p.shift());\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'Q';\n points.push(cpx, cpy);\n break;\n case 'T':\n ctlPtx = cpx;\n ctlPty = cpy;\n prevCmd = ca[ca.length - 1];\n if (prevCmd.command === 'Q') {\n ctlPtx = cpx + (cpx - prevCmd.points[0]);\n ctlPty = cpy + (cpy - prevCmd.points[1]);\n }\n cpx = p.shift();\n cpy = p.shift();\n cmd = 'Q';\n points.push(ctlPtx, ctlPty, cpx, cpy);\n break;\n case 't':\n ctlPtx = cpx;\n ctlPty = cpy;\n prevCmd = ca[ca.length - 1];\n if (prevCmd.command === 'Q') {\n ctlPtx = cpx + (cpx - prevCmd.points[0]);\n ctlPty = cpy + (cpy - prevCmd.points[1]);\n }\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'Q';\n points.push(ctlPtx, ctlPty, cpx, cpy);\n break;\n case 'A':\n rx = p.shift();\n ry = p.shift();\n psi = p.shift();\n fa = p.shift();\n fs = p.shift();\n x1 = cpx;\n y1 = cpy;\n cpx = p.shift();\n cpy = p.shift();\n cmd = 'A';\n points = this.convertEndpointToCenterParameterization(\n x1,\n y1,\n cpx,\n cpy,\n fa,\n fs,\n rx,\n ry,\n psi\n );\n break;\n case 'a':\n rx = p.shift();\n ry = p.shift();\n psi = p.shift();\n fa = p.shift();\n fs = p.shift();\n x1 = cpx;\n y1 = cpy;\n cpx += p.shift();\n cpy += p.shift();\n cmd = 'A';\n points = this.convertEndpointToCenterParameterization(\n x1,\n y1,\n cpx,\n cpy,\n fa,\n fs,\n rx,\n ry,\n psi\n );\n break;\n }\n\n ca.push({\n command: cmd || c,\n points: points,\n start: {\n x: startX,\n y: startY\n },\n pathLength: this.calcLength(startX, startY, cmd || c, points)\n });\n }\n\n if (c === 'z' || c === 'Z') {\n ca.push({\n command: 'z',\n points: [],\n start: undefined,\n pathLength: 0\n });\n }\n }\n\n return ca;\n };\n Konva.Path.calcLength = function(x, y, cmd, points) {\n var len, p1, p2, t;\n var path = Konva.Path;\n\n switch (cmd) {\n case 'L':\n return path.getLineLength(x, y, points[0], points[1]);\n case 'C':\n // Approximates by breaking curve into 100 line segments\n len = 0.0;\n p1 = path.getPointOnCubicBezier(\n 0,\n x,\n y,\n points[0],\n points[1],\n points[2],\n points[3],\n points[4],\n points[5]\n );\n for (t = 0.01; t <= 1; t += 0.01) {\n p2 = path.getPointOnCubicBezier(\n t,\n x,\n y,\n points[0],\n points[1],\n points[2],\n points[3],\n points[4],\n points[5]\n );\n len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);\n p1 = p2;\n }\n return len;\n case 'Q':\n // Approximates by breaking curve into 100 line segments\n len = 0.0;\n p1 = path.getPointOnQuadraticBezier(\n 0,\n x,\n y,\n points[0],\n points[1],\n points[2],\n points[3]\n );\n for (t = 0.01; t <= 1; t += 0.01) {\n p2 = path.getPointOnQuadraticBezier(\n t,\n x,\n y,\n points[0],\n points[1],\n points[2],\n points[3]\n );\n len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);\n p1 = p2;\n }\n return len;\n case 'A':\n // Approximates by breaking curve into line segments\n len = 0.0;\n var start = points[4];\n // 4 = theta\n var dTheta = points[5];\n // 5 = dTheta\n var end = points[4] + dTheta;\n var inc = Math.PI / 180.0;\n // 1 degree resolution\n if (Math.abs(start - end) < inc) {\n inc = Math.abs(start - end);\n }\n // Note: for purpose of calculating arc length, not going to worry about rotating X-axis by angle psi\n p1 = path.getPointOnEllipticalArc(\n points[0],\n points[1],\n points[2],\n points[3],\n start,\n 0\n );\n if (dTheta < 0) {\n // clockwise\n for (t = start - inc; t > end; t -= inc) {\n p2 = path.getPointOnEllipticalArc(\n points[0],\n points[1],\n points[2],\n points[3],\n t,\n 0\n );\n len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);\n p1 = p2;\n }\n } else {\n // counter-clockwise\n for (t = start + inc; t < end; t += inc) {\n p2 = path.getPointOnEllipticalArc(\n points[0],\n points[1],\n points[2],\n points[3],\n t,\n 0\n );\n len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);\n p1 = p2;\n }\n }\n p2 = path.getPointOnEllipticalArc(\n points[0],\n points[1],\n points[2],\n points[3],\n end,\n 0\n );\n len += path.getLineLength(p1.x, p1.y, p2.x, p2.y);\n\n return len;\n }\n\n return 0;\n };\n Konva.Path.convertEndpointToCenterParameterization = function(\n x1,\n y1,\n x2,\n y2,\n fa,\n fs,\n rx,\n ry,\n psiDeg\n ) {\n // Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes\n var psi = psiDeg * (Math.PI / 180.0);\n var xp = Math.cos(psi) * (x1 - x2) / 2.0 + Math.sin(psi) * (y1 - y2) / 2.0;\n var yp =\n -1 * Math.sin(psi) * (x1 - x2) / 2.0 + Math.cos(psi) * (y1 - y2) / 2.0;\n\n var lambda = xp * xp / (rx * rx) + yp * yp / (ry * ry);\n\n if (lambda > 1) {\n rx *= Math.sqrt(lambda);\n ry *= Math.sqrt(lambda);\n }\n\n var f = Math.sqrt(\n (rx * rx * (ry * ry) - rx * rx * (yp * yp) - ry * ry * (xp * xp)) /\n (rx * rx * (yp * yp) + ry * ry * (xp * xp))\n );\n\n if (fa === fs) {\n f *= -1;\n }\n if (isNaN(f)) {\n f = 0;\n }\n\n var cxp = f * rx * yp / ry;\n var cyp = f * -ry * xp / rx;\n\n var cx = (x1 + x2) / 2.0 + Math.cos(psi) * cxp - Math.sin(psi) * cyp;\n var cy = (y1 + y2) / 2.0 + Math.sin(psi) * cxp + Math.cos(psi) * cyp;\n\n var vMag = function(v) {\n return Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n };\n var vRatio = function(u, v) {\n return (u[0] * v[0] + u[1] * v[1]) / (vMag(u) * vMag(v));\n };\n var vAngle = function(u, v) {\n return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(vRatio(u, v));\n };\n var theta = vAngle([1, 0], [(xp - cxp) / rx, (yp - cyp) / ry]);\n var u = [(xp - cxp) / rx, (yp - cyp) / ry];\n var v = [(-1 * xp - cxp) / rx, (-1 * yp - cyp) / ry];\n var dTheta = vAngle(u, v);\n\n if (vRatio(u, v) <= -1) {\n dTheta = Math.PI;\n }\n if (vRatio(u, v) >= 1) {\n dTheta = 0;\n }\n if (fs === 0 && dTheta > 0) {\n dTheta = dTheta - 2 * Math.PI;\n }\n if (fs === 1 && dTheta < 0) {\n dTheta = dTheta + 2 * Math.PI;\n }\n return [cx, cy, rx, ry, theta, dTheta, psi, fs];\n };\n // add getters setters\n Konva.Factory.addGetterSetter(Konva.Path, 'data');\n\n /**\n * set SVG path data string. This method\n * also automatically parses the data string\n * into a data array. Currently supported SVG data:\n * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z\n * @name setData\n * @method\n * @memberof Konva.Path.prototype\n * @param {String} SVG path command string\n */\n\n /**\n * get SVG path data string\n * @name getData\n * @method\n * @memberof Konva.Path.prototype\n */\n\n Konva.Collection.mapMethods(Konva.Path);\n})();\n\n(function() {\n 'use strict';\n var EMPTY_STRING = '',\n //CALIBRI = 'Calibri',\n NORMAL = 'normal';\n\n /**\n * Path constructor.\n * @author Jason Follas\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {String} [config.fontFamily] default is Calibri\n * @param {Number} [config.fontSize] default is 12\n * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal\n * @param {String} [config.fontVariant] can be normal or small-caps. Default is normal\n * @param {String} config.text\n * @param {String} config.data SVG data string\n * @param {Function} config.getKerning a getter for kerning values for the specified characters\n * @param {Function} config.kerningFunc a getter for kerning values for the specified characters\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var kerningPairs = {\n * 'A': {\n * ' ': -0.05517578125,\n * 'T': -0.07421875,\n * 'V': -0.07421875,\n * },\n * 'V': {\n * ',': -0.091796875,\n * \":\": -0.037109375,\n * \";\": -0.037109375,\n * \"A\": -0.07421875,\n * }\n * }\n * var textpath = new Konva.TextPath({\n * x: 100,\n * y: 50,\n * fill: '#333',\n * fontSize: '24',\n * fontFamily: 'Arial',\n * text: 'All the world\\'s a stage, and all the men and women merely players.',\n * data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',\n * kerningFunc: function(leftChar, rightChar) {\n * return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0\n * }\n * });\n */\n Konva.TextPath = function(config) {\n this.___init(config);\n };\n\n function _fillFunc(context) {\n context.fillText(this.partialText, 0, 0);\n }\n function _strokeFunc(context) {\n context.strokeText(this.partialText, 0, 0);\n }\n\n Konva.TextPath.prototype = {\n ___init: function(config) {\n var that = this;\n this.dummyCanvas = Konva.Util.createCanvasElement();\n this.dataArray = [];\n\n // call super constructor\n Konva.Shape.call(this, config);\n\n // overrides\n // TODO: shouldn't this be on the prototype?\n this._fillFunc = _fillFunc;\n this._strokeFunc = _strokeFunc;\n this._fillFuncHit = _fillFunc;\n this._strokeFuncHit = _strokeFunc;\n\n this.className = 'TextPath';\n\n this.dataArray = Konva.Path.parsePathData(this.attrs.data);\n this.on('dataChange.konva', function() {\n that.dataArray = Konva.Path.parsePathData(this.attrs.data);\n that._setTextData();\n });\n\n // update text data for certain attr changes\n this.on(\n 'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva',\n that._setTextData\n );\n\n if (config && config.getKerning) {\n Konva.Util.warn(\n 'getKerning TextPath API is deprecated. Please use \"kerningFunc\" instead.'\n );\n this.setKerningFunc(config.getKerning);\n }\n\n that._setTextData();\n this.sceneFunc(this._sceneFunc);\n this.hitFunc(this._hitFunc);\n },\n _sceneFunc: function(context) {\n context.setAttr('font', this._getContextFont());\n context.setAttr('textBaseline', this.getTextBaseline());\n context.setAttr('textAlign', 'left');\n context.save();\n\n var textDecoration = this.textDecoration();\n var fill = this.fill();\n var fontSize = this.fontSize();\n\n var glyphInfo = this.glyphInfo;\n if (textDecoration === 'underline') {\n context.beginPath();\n }\n for (var i = 0; i < glyphInfo.length; i++) {\n context.save();\n\n var p0 = glyphInfo[i].p0;\n\n context.translate(p0.x, p0.y);\n context.rotate(glyphInfo[i].rotation);\n this.partialText = glyphInfo[i].text;\n\n context.fillStrokeShape(this);\n if (textDecoration === 'underline') {\n if (i === 0) {\n context.moveTo(0, fontSize / 2 + 1);\n }\n\n context.lineTo(fontSize, fontSize / 2 + 1);\n }\n context.restore();\n\n //// To assist with debugging visually, uncomment following\n //\n // if (i % 2)\n // context.strokeStyle = 'cyan';\n // else\n // context.strokeStyle = 'green';\n // var p1 = glyphInfo[i].p1;\n // context.moveTo(p0.x, p0.y);\n // context.lineTo(p1.x, p1.y);\n // context.stroke();\n }\n if (textDecoration === 'underline') {\n context.strokeStyle = fill;\n context.lineWidth = fontSize / 20;\n context.stroke();\n }\n\n context.restore();\n },\n _hitFunc: function(context) {\n context.beginPath();\n\n var glyphInfo = this.glyphInfo;\n if (glyphInfo.length >= 1) {\n var p0 = glyphInfo[0].p0;\n context.moveTo(p0.x, p0.y);\n }\n for (var i = 0; i < glyphInfo.length; i++) {\n var p1 = glyphInfo[i].p1;\n context.lineTo(p1.x, p1.y);\n }\n context.setAttr('lineWidth', this.getFontSize());\n context.setAttr('strokeStyle', this.colorKey);\n context.stroke();\n },\n /**\n * get text width in pixels\n * @method\n * @memberof Konva.TextPath.prototype\n */\n getTextWidth: function() {\n return this.textWidth;\n },\n /**\n * get text height in pixels\n * @method\n * @memberof Konva.TextPath.prototype\n */\n getTextHeight: function() {\n return this.textHeight;\n },\n /**\n * set text\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {String} text\n */\n setText: function(text) {\n Konva.Text.prototype.setText.call(this, text);\n },\n _getTextSize: function(text) {\n var dummyCanvas = this.dummyCanvas;\n var _context = dummyCanvas.getContext('2d');\n\n _context.save();\n\n _context.font = this._getContextFont();\n var metrics = _context.measureText(text);\n\n _context.restore();\n\n return {\n width: metrics.width,\n height: parseInt(this.attrs.fontSize, 10)\n };\n },\n _setTextData: function() {\n var that = this;\n var size = this._getTextSize(this.attrs.text);\n var letterSpacing = this.getLetterSpacing();\n var align = this.align();\n var kerningFunc = this.getKerningFunc();\n\n this.textWidth = size.width;\n this.textHeight = size.height;\n\n var textFullWidth = Math.max(\n this.textWidth + ((this.attrs.text || '').length - 1) * letterSpacing,\n 0\n );\n\n this.glyphInfo = [];\n\n var fullPathWidth = 0;\n for (var l = 0; l < that.dataArray.length; l++) {\n if (that.dataArray[l].pathLength > 0) {\n fullPathWidth += that.dataArray[l].pathLength;\n }\n }\n\n var offset = 0;\n if (align === 'center') {\n offset = Math.max(0, fullPathWidth / 2 - textFullWidth / 2);\n }\n if (align === 'right') {\n offset = Math.max(0, fullPathWidth - textFullWidth);\n }\n\n var charArr = this.getText().split('');\n var spacesNumber = this.getText().split(' ').length - 1;\n\n var p0, p1, pathCmd;\n\n var pIndex = -1;\n var currentT = 0;\n // var sumLength = 0;\n // for(var j = 0; j < that.dataArray.length; j++) {\n // if(that.dataArray[j].pathLength > 0) {\n //\n // if (sumLength + that.dataArray[j].pathLength > offset) {}\n // fullPathWidth += that.dataArray[j].pathLength;\n // }\n // }\n\n var getNextPathSegment = function() {\n currentT = 0;\n var pathData = that.dataArray;\n\n for (var j = pIndex + 1; j < pathData.length; j++) {\n if (pathData[j].pathLength > 0) {\n pIndex = j;\n\n return pathData[j];\n } else if (pathData[j].command === 'M') {\n p0 = {\n x: pathData[j].points[0],\n y: pathData[j].points[1]\n };\n }\n }\n\n return {};\n };\n\n var findSegmentToFitCharacter = function(c) {\n var glyphWidth = that._getTextSize(c).width + letterSpacing;\n\n if (c === ' ' && align === 'justify') {\n glyphWidth += (fullPathWidth - textFullWidth) / spacesNumber;\n }\n\n var currLen = 0;\n var attempts = 0;\n\n p1 = undefined;\n while (\n Math.abs(glyphWidth - currLen) / glyphWidth > 0.01 &&\n attempts < 25\n ) {\n attempts++;\n var cumulativePathLength = currLen;\n while (pathCmd === undefined) {\n pathCmd = getNextPathSegment();\n\n if (\n pathCmd &&\n cumulativePathLength + pathCmd.pathLength < glyphWidth\n ) {\n cumulativePathLength += pathCmd.pathLength;\n pathCmd = undefined;\n }\n }\n\n if (pathCmd === {} || p0 === undefined) {\n return undefined;\n }\n\n var needNewSegment = false;\n\n switch (pathCmd.command) {\n case 'L':\n if (\n Konva.Path.getLineLength(\n p0.x,\n p0.y,\n pathCmd.points[0],\n pathCmd.points[1]\n ) > glyphWidth\n ) {\n p1 = Konva.Path.getPointOnLine(\n glyphWidth,\n p0.x,\n p0.y,\n pathCmd.points[0],\n pathCmd.points[1],\n p0.x,\n p0.y\n );\n } else {\n pathCmd = undefined;\n }\n break;\n case 'A':\n var start = pathCmd.points[4];\n // 4 = theta\n var dTheta = pathCmd.points[5];\n // 5 = dTheta\n var end = pathCmd.points[4] + dTheta;\n\n if (currentT === 0) {\n currentT = start + 0.00000001;\n } else if (glyphWidth > currLen) {\n // Just in case start is 0\n currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);\n } else {\n currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);\n }\n\n // Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249\n // Old code failed to render text along arc of this path: \"M 50 50 a 150 50 0 0 1 250 50 l 50 0\"\n if (\n (dTheta < 0 && currentT < end) ||\n (dTheta >= 0 && currentT > end)\n ) {\n currentT = end;\n needNewSegment = true;\n }\n p1 = Konva.Path.getPointOnEllipticalArc(\n pathCmd.points[0],\n pathCmd.points[1],\n pathCmd.points[2],\n pathCmd.points[3],\n currentT,\n pathCmd.points[6]\n );\n break;\n case 'C':\n if (currentT === 0) {\n if (glyphWidth > pathCmd.pathLength) {\n currentT = 0.00000001;\n } else {\n currentT = glyphWidth / pathCmd.pathLength;\n }\n } else if (glyphWidth > currLen) {\n currentT += (glyphWidth - currLen) / pathCmd.pathLength;\n } else {\n currentT -= (currLen - glyphWidth) / pathCmd.pathLength;\n }\n\n if (currentT > 1.0) {\n currentT = 1.0;\n needNewSegment = true;\n }\n p1 = Konva.Path.getPointOnCubicBezier(\n currentT,\n pathCmd.start.x,\n pathCmd.start.y,\n pathCmd.points[0],\n pathCmd.points[1],\n pathCmd.points[2],\n pathCmd.points[3],\n pathCmd.points[4],\n pathCmd.points[5]\n );\n break;\n case 'Q':\n if (currentT === 0) {\n currentT = glyphWidth / pathCmd.pathLength;\n } else if (glyphWidth > currLen) {\n currentT += (glyphWidth - currLen) / pathCmd.pathLength;\n } else {\n currentT -= (currLen - glyphWidth) / pathCmd.pathLength;\n }\n\n if (currentT > 1.0) {\n currentT = 1.0;\n needNewSegment = true;\n }\n p1 = Konva.Path.getPointOnQuadraticBezier(\n currentT,\n pathCmd.start.x,\n pathCmd.start.y,\n pathCmd.points[0],\n pathCmd.points[1],\n pathCmd.points[2],\n pathCmd.points[3]\n );\n break;\n }\n\n if (p1 !== undefined) {\n currLen = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);\n }\n\n if (needNewSegment) {\n needNewSegment = false;\n pathCmd = undefined;\n }\n }\n };\n\n // fake search for offset, this is very bad approach\n // TODO: find other way to add offset from start (for align)\n var testChar = 'C';\n var glyphWidth = that._getTextSize(testChar).width + letterSpacing;\n for (var k = 0; k < offset / glyphWidth; k++) {\n findSegmentToFitCharacter(testChar);\n if (p0 === undefined || p1 === undefined) {\n break;\n }\n p0 = p1;\n }\n\n for (var i = 0; i < charArr.length; i++) {\n // Find p1 such that line segment between p0 and p1 is approx. width of glyph\n findSegmentToFitCharacter(charArr[i]);\n\n if (p0 === undefined || p1 === undefined) {\n break;\n }\n\n var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);\n\n var kern = 0;\n if (kerningFunc) {\n try {\n // getKerning is a user provided getter. Make sure it never breaks our logic\n kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();\n } catch (e) {\n kern = 0;\n }\n }\n\n p0.x += kern;\n p1.x += kern;\n this.textWidth += kern;\n\n var midpoint = Konva.Path.getPointOnLine(\n kern + width / 2.0,\n p0.x,\n p0.y,\n p1.x,\n p1.y\n );\n\n var rotation = Math.atan2(p1.y - p0.y, p1.x - p0.x);\n this.glyphInfo.push({\n transposeX: midpoint.x,\n transposeY: midpoint.y,\n text: charArr[i],\n rotation: rotation,\n p0: p0,\n p1: p1\n });\n p0 = p1;\n }\n },\n getSelfRect: function() {\n var points = [];\n\n this.glyphInfo.forEach(function(info) {\n points.push(info.p0.x);\n points.push(info.p0.y);\n points.push(info.p1.x);\n points.push(info.p1.y);\n });\n var minX = points[0];\n var maxX = points[0];\n var minY = points[0];\n var maxY = points[0];\n var x, y;\n for (var i = 0; i < points.length / 2; i++) {\n x = points[i * 2];\n y = points[i * 2 + 1];\n minX = Math.min(minX, x);\n maxX = Math.max(maxX, x);\n minY = Math.min(minY, y);\n maxY = Math.max(maxY, y);\n }\n var fontSize = this.fontSize();\n return {\n x: Math.round(minX) - fontSize / 2,\n y: Math.round(minY) - fontSize / 2,\n width: Math.round(maxX - minX) + fontSize,\n height: Math.round(maxY - minY) + fontSize\n };\n }\n };\n\n // map TextPath methods to Text\n Konva.TextPath.prototype._getContextFont =\n Konva.Text.prototype._getContextFont;\n\n Konva.Util.extend(Konva.TextPath, Konva.Shape);\n\n // add setters and getters\n Konva.Factory.addGetterSetter(Konva.TextPath, 'data');\n\n /**\n * set SVG path data string. This method\n * also automatically parses the data string\n * into a data array. Currently supported SVG data:\n * M, m, L, l, H, h, V, v, Q, q, T, t, C, c, S, s, A, a, Z, z\n * @name setData\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {String} SVG path command string\n */\n\n /**\n * get SVG path data string\n * @name getData\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'fontFamily', 'Arial');\n\n /**\n * set font family\n * @name setFontFamily\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {String} fontFamily\n */\n\n /**\n * get font family\n * @name getFontFamily\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.TextPath,\n 'fontSize',\n 12,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set font size\n * @name setFontSize\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {int} fontSize\n */\n\n /**\n * get font size\n * @name getFontSize\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'fontStyle', NORMAL);\n\n /**\n * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.\n * @name setFontStyle\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {String} fontStyle\n */\n Konva.Factory.addGetterSetter(Konva.TextPath, 'align', 'left');\n\n /**\n * get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'\n * @name align\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} align\n * @returns {String}\n * @example\n * // get text align\n * var align = text.align();\n *\n * // center text\n * text.align('center');\n *\n * // align text to right\n * text.align('right');\n */\n\n Konva.Factory.addGetterSetter(\n Konva.TextPath,\n 'letterSpacing',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set letter spacing property. Default value is 0.\n * @name letterSpacing\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {Number} letterSpacing\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'textBaseline', 'middle');\n\n /**\n * set textBaseline property. Default value is 'middle'.\n * Can be 'top', 'bottom', 'middle', 'alphabetic', 'hanging'\n * @name textBaseline\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {Number} textBaseline\n */\n\n /**\n * get font style\n * @name getFontStyle\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'fontVariant', NORMAL);\n\n /**\n * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.\n * @name setFontVariant\n * @method\n * @memberof Konva.TextPath.prototype\n * @param {String} fontVariant\n */\n\n /**\n * @get font variant\n * @name getFontVariant\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetter(Konva.TextPath, 'text', EMPTY_STRING);\n\n /**\n * get text\n * @name getText\n * @method\n * @memberof Konva.TextPath.prototype\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'textDecoration', null);\n\n /**\n * get/set text decoration of a text. Can be '' or 'underline'\n * @name textDecoration\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} textDecoration\n * @returns {String}\n * @example\n * // get text decoration\n * var textDecoration = text.textDecoration();\n *\n * // center text\n * text.textDecoration('underline');\n */\n\n Konva.Factory.addGetterSetter(Konva.TextPath, 'kerningFunc', null);\n\n /**\n * get/set kerning function.\n * @name kerningFunc\n * @method\n * @memberof Konva.Text.prototype\n * @param {String} kerningFunc\n * @returns {String}\n * @example\n * // get text decoration\n * var kerningFunc = text.kerningFunc();\n *\n * // center text\n * text.kerningFunc(function(leftChar, rightChar) {\n * return 1;\n * });\n */\n\n Konva.Collection.mapMethods(Konva.TextPath);\n})();\n\n(function() {\n 'use strict';\n /**\n * RegularPolygon constructor. Examples include triangles, squares, pentagons, hexagons, etc.\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Number} config.sides\n * @param {Number} config.radius\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var hexagon = new Konva.RegularPolygon({\n * x: 100,\n * y: 200,\n * sides: 6,\n * radius: 70,\n * fill: 'red',\n * stroke: 'black',\n * strokeWidth: 4\n * });\n */\n Konva.RegularPolygon = function(config) {\n this.___init(config);\n };\n\n Konva.RegularPolygon.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'RegularPolygon';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var sides = this.attrs.sides,\n radius = this.attrs.radius,\n n,\n x,\n y;\n\n context.beginPath();\n context.moveTo(0, 0 - radius);\n\n for (n = 1; n < sides; n++) {\n x = radius * Math.sin(n * 2 * Math.PI / sides);\n y = -1 * radius * Math.cos(n * 2 * Math.PI / sides);\n context.lineTo(x, y);\n }\n context.closePath();\n context.fillStrokeShape(this);\n },\n getWidth: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.radius() !== width / 2) {\n this.setRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.radius() !== height / 2) {\n this.setRadius(height / 2);\n }\n }\n };\n Konva.Util.extend(Konva.RegularPolygon, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.RegularPolygon,\n 'radius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set radius\n * @name setRadius\n * @method\n * @memberof Konva.RegularPolygon.prototype\n * @param {Number} radius\n */\n\n /**\n * get radius\n * @name getRadius\n * @method\n * @memberof Konva.RegularPolygon.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.RegularPolygon,\n 'sides',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set number of sides\n * @name setSides\n * @method\n * @memberof Konva.RegularPolygon.prototype\n * @param {int} sides\n */\n\n /**\n * get number of sides\n * @name getSides\n * @method\n * @memberof Konva.RegularPolygon.prototype\n */\n\n Konva.Collection.mapMethods(Konva.RegularPolygon);\n})();\n\n(function() {\n 'use strict';\n /**\n * Star constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Integer} config.numPoints\n * @param {Number} config.innerRadius\n * @param {Number} config.outerRadius\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var star = new Konva.Star({\n * x: 100,\n * y: 200,\n * numPoints: 5,\n * innerRadius: 70,\n * outerRadius: 70,\n * fill: 'red',\n * stroke: 'black',\n * strokeWidth: 4\n * });\n */\n Konva.Star = function(config) {\n this.___init(config);\n };\n\n Konva.Star.prototype = {\n _centroid: true,\n ___init: function(config) {\n // call super constructor\n Konva.Shape.call(this, config);\n this.className = 'Star';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var innerRadius = this.innerRadius(),\n outerRadius = this.outerRadius(),\n numPoints = this.numPoints();\n\n context.beginPath();\n context.moveTo(0, 0 - outerRadius);\n\n for (var n = 1; n < numPoints * 2; n++) {\n var radius = n % 2 === 0 ? outerRadius : innerRadius;\n var x = radius * Math.sin(n * Math.PI / numPoints);\n var y = -1 * radius * Math.cos(n * Math.PI / numPoints);\n context.lineTo(x, y);\n }\n context.closePath();\n\n context.fillStrokeShape(this);\n },\n // implements Shape.prototype.getWidth()\n getWidth: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.getHeight()\n getHeight: function() {\n return this.getOuterRadius() * 2;\n },\n // implements Shape.prototype.setWidth()\n setWidth: function(width) {\n Konva.Node.prototype.setWidth.call(this, width);\n if (this.outerRadius() !== width / 2) {\n this.setOuterRadius(width / 2);\n }\n },\n // implements Shape.prototype.setHeight()\n setHeight: function(height) {\n Konva.Node.prototype.setHeight.call(this, height);\n if (this.outerRadius() !== height / 2) {\n this.setOuterRadius(height / 2);\n }\n }\n };\n Konva.Util.extend(Konva.Star, Konva.Shape);\n\n // add getters setters\n Konva.Factory.addGetterSetter(\n Konva.Star,\n 'numPoints',\n 5,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set number of points\n * @name setNumPoints\n * @method\n * @memberof Konva.Star.prototype\n * @param {Integer} points\n */\n\n /**\n * get number of points\n * @name getNumPoints\n * @method\n * @memberof Konva.Star.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Star,\n 'innerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set inner radius\n * @name setInnerRadius\n * @method\n * @memberof Konva.Star.prototype\n * @param {Number} radius\n */\n\n /**\n * get inner radius\n * @name getInnerRadius\n * @method\n * @memberof Konva.Star.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Star,\n 'outerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set outer radius\n * @name setOuterRadius\n * @method\n * @memberof Konva.Star.prototype\n * @param {Number} radius\n */\n\n /**\n * get outer radius\n * @name getOuterRadius\n * @method\n * @memberof Konva.Star.prototype\n */\n\n Konva.Collection.mapMethods(Konva.Star);\n})();\n\n(function() {\n 'use strict';\n // constants\n var ATTR_CHANGE_LIST = [\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'padding',\n 'lineHeight',\n 'text',\n 'width'\n ],\n CHANGE_KONVA = 'Change.konva',\n NONE = 'none',\n UP = 'up',\n RIGHT = 'right',\n DOWN = 'down',\n LEFT = 'left',\n LABEL = 'Label',\n // cached variables\n attrChangeListLen = ATTR_CHANGE_LIST.length;\n\n /**\n * Label constructor. Labels are groups that contain a Text and Tag shape\n * @constructor\n * @memberof Konva\n * @param {Object} config\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * // create label\n * var label = new Konva.Label({\n * x: 100,\n * y: 100,\n * draggable: true\n * });\n *\n * // add a tag to the label\n * label.add(new Konva.Tag({\n * fill: '#bbb',\n * stroke: '#333',\n * shadowColor: 'black',\n * shadowBlur: 10,\n * shadowOffset: [10, 10],\n * shadowOpacity: 0.2,\n * lineJoin: 'round',\n * pointerDirection: 'up',\n * pointerWidth: 20,\n * pointerHeight: 20,\n * cornerRadius: 5\n * }));\n *\n * // add text to the label\n * label.add(new Konva.Text({\n * text: 'Hello World!',\n * fontSize: 50,\n * lineHeight: 1.2,\n * padding: 10,\n * fill: 'green'\n * }));\n */\n Konva.Label = function(config) {\n this.____init(config);\n };\n\n Konva.Label.prototype = {\n ____init: function(config) {\n var that = this;\n\n Konva.Group.call(this, config);\n this.className = LABEL;\n\n this.on('add.konva', function(evt) {\n that._addListeners(evt.child);\n that._sync();\n });\n },\n /**\n * get Text shape for the label. You need to access the Text shape in order to update\n * the text properties\n * @name getText\n * @method\n * @memberof Konva.Label.prototype\n */\n getText: function() {\n return this.find('Text')[0];\n },\n /**\n * get Tag shape for the label. You need to access the Tag shape in order to update\n * the pointer properties and the corner radius\n * @name getTag\n * @method\n * @memberof Konva.Label.prototype\n */\n getTag: function() {\n return this.find('Tag')[0];\n },\n _addListeners: function(text) {\n var that = this,\n n;\n var func = function() {\n that._sync();\n };\n\n // update text data for certain attr changes\n for (n = 0; n < attrChangeListLen; n++) {\n text.on(ATTR_CHANGE_LIST[n] + CHANGE_KONVA, func);\n }\n },\n getWidth: function() {\n return this.getText().getWidth();\n },\n getHeight: function() {\n return this.getText().getHeight();\n },\n _sync: function() {\n var text = this.getText(),\n tag = this.getTag(),\n width,\n height,\n pointerDirection,\n pointerWidth,\n x,\n y,\n pointerHeight;\n\n if (text && tag) {\n width = text.getWidth();\n height = text.getHeight();\n pointerDirection = tag.getPointerDirection();\n pointerWidth = tag.getPointerWidth();\n pointerHeight = tag.getPointerHeight();\n x = 0;\n y = 0;\n\n switch (pointerDirection) {\n case UP:\n x = width / 2;\n y = -1 * pointerHeight;\n break;\n case RIGHT:\n x = width + pointerWidth;\n y = height / 2;\n break;\n case DOWN:\n x = width / 2;\n y = height + pointerHeight;\n break;\n case LEFT:\n x = -1 * pointerWidth;\n y = height / 2;\n break;\n }\n\n tag.setAttrs({\n x: -1 * x,\n y: -1 * y,\n width: width,\n height: height\n });\n\n text.setAttrs({\n x: -1 * x,\n y: -1 * y\n });\n }\n }\n };\n\n Konva.Util.extend(Konva.Label, Konva.Group);\n\n Konva.Collection.mapMethods(Konva.Label);\n\n /**\n * Tag constructor. A Tag can be configured\n * to have a pointer element that points up, right, down, or left\n * @constructor\n * @memberof Konva\n * @param {Object} config\n * @param {String} [config.pointerDirection] can be up, right, down, left, or none; the default\n * is none. When a pointer is present, the positioning of the label is relative to the tip of the pointer.\n * @param {Number} [config.pointerWidth]\n * @param {Number} [config.pointerHeight]\n * @param {Number} [config.cornerRadius]\n */\n Konva.Tag = function(config) {\n this.___init(config);\n };\n\n Konva.Tag.prototype = {\n ___init: function(config) {\n Konva.Shape.call(this, config);\n this.className = 'Tag';\n this.sceneFunc(this._sceneFunc);\n },\n _sceneFunc: function(context) {\n var width = this.getWidth(),\n height = this.getHeight(),\n pointerDirection = this.getPointerDirection(),\n pointerWidth = this.getPointerWidth(),\n pointerHeight = this.getPointerHeight(),\n cornerRadius = Math.min(this.getCornerRadius(), width / 2, height / 2);\n\n context.beginPath();\n if (!cornerRadius) {\n context.moveTo(0, 0);\n } else {\n context.moveTo(cornerRadius, 0);\n }\n\n if (pointerDirection === UP) {\n context.lineTo((width - pointerWidth) / 2, 0);\n context.lineTo(width / 2, -1 * pointerHeight);\n context.lineTo((width + pointerWidth) / 2, 0);\n }\n\n if (!cornerRadius) {\n context.lineTo(width, 0);\n } else {\n context.lineTo(width - cornerRadius, 0);\n context.arc(\n width - cornerRadius,\n cornerRadius,\n cornerRadius,\n Math.PI * 3 / 2,\n 0,\n false\n );\n }\n\n if (pointerDirection === RIGHT) {\n context.lineTo(width, (height - pointerHeight) / 2);\n context.lineTo(width + pointerWidth, height / 2);\n context.lineTo(width, (height + pointerHeight) / 2);\n }\n\n if (!cornerRadius) {\n context.lineTo(width, height);\n } else {\n context.lineTo(width, height - cornerRadius);\n context.arc(\n width - cornerRadius,\n height - cornerRadius,\n cornerRadius,\n 0,\n Math.PI / 2,\n false\n );\n }\n\n if (pointerDirection === DOWN) {\n context.lineTo((width + pointerWidth) / 2, height);\n context.lineTo(width / 2, height + pointerHeight);\n context.lineTo((width - pointerWidth) / 2, height);\n }\n\n if (!cornerRadius) {\n context.lineTo(0, height);\n } else {\n context.lineTo(cornerRadius, height);\n context.arc(\n cornerRadius,\n height - cornerRadius,\n cornerRadius,\n Math.PI / 2,\n Math.PI,\n false\n );\n }\n\n if (pointerDirection === LEFT) {\n context.lineTo(0, (height + pointerHeight) / 2);\n context.lineTo(-1 * pointerWidth, height / 2);\n context.lineTo(0, (height - pointerHeight) / 2);\n }\n\n if (cornerRadius) {\n context.lineTo(0, cornerRadius);\n context.arc(\n cornerRadius,\n cornerRadius,\n cornerRadius,\n Math.PI,\n Math.PI * 3 / 2,\n false\n );\n }\n\n context.closePath();\n context.fillStrokeShape(this);\n },\n getSelfRect: function() {\n var x = 0,\n y = 0,\n pointerWidth = this.getPointerWidth(),\n pointerHeight = this.getPointerHeight(),\n direction = this.pointerDirection(),\n width = this.getWidth(),\n height = this.getHeight();\n\n if (direction === UP) {\n y -= pointerHeight;\n height += pointerHeight;\n } else if (direction === DOWN) {\n height += pointerHeight;\n } else if (direction === LEFT) {\n // ARGH!!! I have no idea why should I used magic 1.5!!!!!!!!!\n x -= pointerWidth * 1.5;\n width += pointerWidth;\n } else if (direction === RIGHT) {\n width += pointerWidth * 1.5;\n }\n return {\n x: x,\n y: y,\n width: width,\n height: height\n };\n }\n };\n\n Konva.Util.extend(Konva.Tag, Konva.Shape);\n Konva.Factory.addGetterSetter(Konva.Tag, 'pointerDirection', NONE);\n\n /**\n * set pointer Direction\n * @name setPointerDirection\n * @method\n * @memberof Konva.Tag.prototype\n * @param {String} pointerDirection can be up, right, down, left, or none. The\n * default is none\n */\n\n /**\n * get pointer Direction\n * @name getPointerDirection\n * @method\n * @memberof Konva.Tag.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Tag,\n 'pointerWidth',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set pointer width\n * @name setPointerWidth\n * @method\n * @memberof Konva.Tag.prototype\n * @param {Number} pointerWidth\n */\n\n /**\n * get pointer width\n * @name getPointerWidth\n * @method\n * @memberof Konva.Tag.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Tag,\n 'pointerHeight',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set pointer height\n * @name setPointerHeight\n * @method\n * @memberof Konva.Tag.prototype\n * @param {Number} pointerHeight\n */\n\n /**\n * get pointer height\n * @name getPointerHeight\n * @method\n * @memberof Konva.Tag.prototype\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Tag,\n 'cornerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * set corner radius\n * @name setCornerRadius\n * @method\n * @memberof Konva.Tag.prototype\n * @param {Number} corner radius\n */\n\n /**\n * get corner radius\n * @name getCornerRadius\n * @method\n * @memberof Konva.Tag.prototype\n */\n\n Konva.Collection.mapMethods(Konva.Tag);\n})();\n\n(function(Konva) {\n 'use strict';\n /**\n * Arrow constructor\n * @constructor\n * @memberof Konva\n * @augments Konva.Shape\n * @param {Object} config\n * @param {Array} config.points Flat array of points coordinates. You should define them as [x1, y1, x2, y2, x3, y3].\n * @param {Number} [config.tension] Higher values will result in a more curvy line. A value of 0 will result in no interpolation.\n * The default is 0\n * @param {Number} config.pointerLength Arrow pointer length. Default value is 10.\n * @param {Number} config.pointerWidth Arrow pointer width. Default value is 10.\n * @param {Boolean} config.pointerAtBeginning Do we need to draw pointer on both sides?. Default false.\n * @param {String} [config.fill] fill color\n * @param {Image} [config.fillPatternImage] fill pattern image\n * @param {Number} [config.fillPatternX]\n * @param {Number} [config.fillPatternY]\n * @param {Object} [config.fillPatternOffset] object with x and y component\n * @param {Number} [config.fillPatternOffsetX] \n * @param {Number} [config.fillPatternOffsetY] \n * @param {Object} [config.fillPatternScale] object with x and y component\n * @param {Number} [config.fillPatternScaleX]\n * @param {Number} [config.fillPatternScaleY]\n * @param {Number} [config.fillPatternRotation]\n * @param {String} [config.fillPatternRepeat] can be \"repeat\", \"repeat-x\", \"repeat-y\", or \"no-repeat\". The default is \"no-repeat\"\n * @param {Object} [config.fillLinearGradientStartPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientStartPointX]\n * @param {Number} [config.fillLinearGradientStartPointY]\n * @param {Object} [config.fillLinearGradientEndPoint] object with x and y component\n * @param {Number} [config.fillLinearGradientEndPointX]\n * @param {Number} [config.fillLinearGradientEndPointY]\n * @param {Array} [config.fillLinearGradientColorStops] array of color stops\n * @param {Object} [config.fillRadialGradientStartPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientStartPointX]\n * @param {Number} [config.fillRadialGradientStartPointY]\n * @param {Object} [config.fillRadialGradientEndPoint] object with x and y component\n * @param {Number} [config.fillRadialGradientEndPointX] \n * @param {Number} [config.fillRadialGradientEndPointY] \n * @param {Number} [config.fillRadialGradientStartRadius]\n * @param {Number} [config.fillRadialGradientEndRadius]\n * @param {Array} [config.fillRadialGradientColorStops] array of color stops\n * @param {Boolean} [config.fillEnabled] flag which enables or disables the fill. The default value is true\n * @param {String} [config.fillPriority] can be color, linear-gradient, radial-graident, or pattern. The default value is color. The fillPriority property makes it really easy to toggle between different fill types. For example, if you want to toggle between a fill color style and a fill pattern style, simply set the fill property and the fillPattern properties, and then use setFillPriority('color') to render the shape with a color fill, or use setFillPriority('pattern') to render the shape with the pattern fill configuration\n * @param {String} [config.stroke] stroke color\n * @param {Number} [config.strokeWidth] stroke width\n * @param {Boolean} [config.strokeHitEnabled] flag which enables or disables stroke hit region. The default is true\n * @param {Boolean} [config.perfectDrawEnabled] flag which enables or disables using buffer canvas. The default is true\n * @param {Boolean} [config.shadowForStrokeEnabled] flag which enables or disables shasow for stroke. The default is true\n * @param {Boolean} [config.strokeScaleEnabled] flag which enables or disables stroke scale. The default is true\n * @param {Boolean} [config.strokeEnabled] flag which enables or disables the stroke. The default value is true\n * @param {String} [config.lineJoin] can be miter, round, or bevel. The default\n * is miter\n * @param {String} [config.lineCap] can be butt, round, or sqare. The default\n * is butt\n * @param {String} [config.shadowColor]\n * @param {Number} [config.shadowBlur]\n * @param {Object} [config.shadowOffset] object with x and y component\n * @param {Number} [config.shadowOffsetX]\n * @param {Number} [config.shadowOffsetY]\n * @param {Number} [config.shadowOpacity] shadow opacity. Can be any real number\n * between 0 and 1\n * @param {Boolean} [config.shadowEnabled] flag which enables or disables the shadow. The default value is true\n * @param {Array} [config.dash]\n * @param {Boolean} [config.dashEnabled] flag which enables or disables the dashArray. The default value is true\n * @param {Number} [config.x]\n * @param {Number} [config.y]\n * @param {Number} [config.width]\n * @param {Number} [config.height]\n * @param {Boolean} [config.visible]\n * @param {Boolean} [config.listening] whether or not the node is listening for events\n * @param {String} [config.id] unique id\n * @param {String} [config.name] non-unique name\n * @param {Number} [config.opacity] determines node opacity. Can be any number between 0 and 1\n * @param {Object} [config.scale] set scale\n * @param {Number} [config.scaleX] set scale x\n * @param {Number} [config.scaleY] set scale y\n * @param {Number} [config.rotation] rotation in degrees\n * @param {Object} [config.offset] offset from center point and rotation point\n * @param {Number} [config.offsetX] set offset x\n * @param {Number} [config.offsetY] set offset y\n * @param {Boolean} [config.draggable] makes the node draggable. When stages are draggable, you can drag and drop\n * the entire stage by dragging any portion of the stage\n * @param {Number} [config.dragDistance]\n * @param {Function} [config.dragBoundFunc]\n * @example\n * var line = new Konva.Line({\n * points: [73, 70, 340, 23, 450, 60, 500, 20],\n * stroke: 'red',\n * tension: 1,\n * pointerLength : 10,\n * pointerWidth : 12\n * });\n */\n Konva.Arrow = function(config) {\n this.____init(config);\n };\n\n Konva.Arrow.prototype = {\n ____init: function(config) {\n // call super constructor\n Konva.Line.call(this, config);\n this.className = 'Arrow';\n },\n _sceneFunc: function(ctx) {\n Konva.Line.prototype._sceneFunc.apply(this, arguments);\n var PI2 = Math.PI * 2;\n var points = this.points();\n\n var tp = points;\n var fromTension = this.getTension() !== 0 && points.length > 4;\n if (fromTension) {\n tp = this.getTensionPoints();\n }\n\n var n = points.length;\n\n var dx, dy;\n if (fromTension) {\n dx = points[n - 2] - tp[n - 2];\n dy = points[n - 1] - tp[n - 1];\n } else {\n dx = points[n - 2] - points[n - 4];\n dy = points[n - 1] - points[n - 3];\n }\n\n var radians = (Math.atan2(dy, dx) + PI2) % PI2;\n var length = this.pointerLength();\n var width = this.pointerWidth();\n\n ctx.save();\n ctx.beginPath();\n ctx.translate(points[n - 2], points[n - 1]);\n ctx.rotate(radians);\n ctx.moveTo(0, 0);\n ctx.lineTo(-length, width / 2);\n ctx.lineTo(-length, -width / 2);\n ctx.closePath();\n ctx.restore();\n\n if (this.pointerAtBeginning()) {\n ctx.save();\n ctx.translate(points[0], points[1]);\n if (fromTension) {\n dx = tp[0] - points[0];\n dy = tp[1] - points[1];\n } else {\n dx = points[2] - points[0];\n dy = points[3] - points[1];\n }\n\n ctx.rotate((Math.atan2(-dy, -dx) + PI2) % PI2);\n ctx.moveTo(0, 0);\n ctx.lineTo(-length, width / 2);\n ctx.lineTo(-length, -width / 2);\n ctx.closePath();\n ctx.restore();\n }\n\n // here is a tricky part\n // we need to disable dash for arrow pointers\n var isDashEnabled = this.dashEnabled();\n if (isDashEnabled) {\n // manually disable dash for head\n // it is better not to use setter here,\n // because it will trigger attr change event\n this.attrs.dashEnabled = false;\n ctx.setLineDash([]);\n }\n\n ctx.fillStrokeShape(this);\n\n // restore old value\n if (isDashEnabled) {\n this.attrs.dashEnabled = true;\n }\n }\n };\n\n Konva.Util.extend(Konva.Arrow, Konva.Line);\n /**\n * get/set pointerLength\n * @name pointerLength\n * @method\n * @memberof Konva.Arrow.prototype\n * @param {Number} Length of pointer of arrow.\n * The default is 10.\n * @returns {Number}\n * @example\n * // get tension\n * var pointerLength = line.pointerLength();\n *\n * // set tension\n * line.pointerLength(15);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Arrow,\n 'pointerLength',\n 10,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set pointerWidth\n * @name pointerWidth\n * @method\n * @memberof Konva.Arrow.prototype\n * @param {Number} Width of pointer of arrow.\n * The default is 10.\n * @returns {Number}\n * @example\n * // get tension\n * var pointerWidth = line.pointerWidth();\n *\n * // set tension\n * line.pointerWidth(15);\n */\n\n Konva.Factory.addGetterSetter(\n Konva.Arrow,\n 'pointerWidth',\n 10,\n Konva.Validators.getNumberValidator()\n );\n /**\n * get/set pointerAtBeginning\n * @name pointerAtBeginning\n * @method\n * @memberof Konva.Arrow.prototype\n * @param {Number} Should pointer displayed at beginning of arrow.\n * The default is false.\n * @returns {Boolean}\n * @example\n * // get tension\n * var pointerAtBeginning = line.pointerAtBeginning();\n *\n * // set tension\n * line.pointerAtBeginning(true);\n */\n\n Konva.Factory.addGetterSetter(Konva.Arrow, 'pointerAtBeginning', false);\n Konva.Collection.mapMethods(Konva.Arrow);\n})(Konva);\n\n(function(Konva) {\n 'use strict';\n\n var ATTR_CHANGE_LIST = [\n 'resizeEnabledChange',\n 'rotateAnchorOffsetChange',\n 'rotateEnabledChange',\n 'enabledAnchorsChange',\n 'anchorSizeChange',\n 'borderEnabledChange',\n 'borderStrokeChange',\n 'borderStrokeWidthChange',\n 'borderDashChange',\n 'anchorStrokeChange',\n 'anchorStrokeWidthChange',\n 'anchorFillChange',\n 'anchorCornerRadiusChange',\n 'ignoreStrokeChange'\n ].join(' ');\n\n var NODE_RECT = 'nodeRect';\n\n var TRANSFORM_CHANGE_STR = [\n 'xChange.resizer',\n 'yChange.resizer',\n 'widthChange.resizer',\n 'heightChange.resizer',\n 'scaleXChange.resizer',\n 'scaleYChange.resizer',\n 'skewXChange.resizer',\n 'skewYChange.resizer',\n 'rotationChange.resizer',\n 'offsetXChange.resizer',\n 'offsetYChange.resizer',\n 'transformsEnabledChange.resizer'\n ].join(' ');\n\n var REDRAW_CHANGE_STR = [\n 'widthChange.resizer',\n 'heightChange.resizer',\n 'scaleXChange.resizer',\n 'scaleYChange.resizer',\n 'skewXChange.resizer',\n 'skewYChange.resizer',\n 'rotationChange.resizer',\n 'offsetXChange.resizer',\n 'offsetYChange.resizer'\n ].join(' ');\n\n var ANGLES = {\n 'top-left': -45,\n 'top-center': 0,\n 'top-right': 45,\n 'middle-right': -90,\n 'middle-left': 90,\n 'bottom-left': -135,\n 'bottom-center': 180,\n 'bottom-right': 135\n };\n\n function getCursor(anchorName, rad, isMirrored) {\n if (anchorName === 'rotater') {\n return 'crosshair';\n }\n\n rad += Konva.Util._degToRad(ANGLES[anchorName] || 0);\n // If we are mirrored, we need to mirror the angle (this is not the same as\n // rotate).\n if (isMirrored) {\n rad *= -1;\n }\n var angle = ((Konva.Util._radToDeg(rad) % 360) + 360) % 360;\n\n if (\n Konva.Util._inRange(angle, 315 + 22.5, 360) ||\n Konva.Util._inRange(angle, 0, 22.5)\n ) {\n // TOP\n return 'ns-resize';\n } else if (Konva.Util._inRange(angle, 45 - 22.5, 45 + 22.5)) {\n // TOP - RIGHT\n return 'nesw-resize';\n } else if (Konva.Util._inRange(angle, 90 - 22.5, 90 + 22.5)) {\n // RIGHT\n return 'ew-resize';\n } else if (Konva.Util._inRange(angle, 135 - 22.5, 135 + 22.5)) {\n // BOTTOM - RIGHT\n return 'nwse-resize';\n } else if (Konva.Util._inRange(angle, 180 - 22.5, 180 + 22.5)) {\n // BOTTOM\n return 'ns-resize';\n } else if (Konva.Util._inRange(angle, 225 - 22.5, 225 + 22.5)) {\n // BOTTOM - LEFT\n return 'nesw-resize';\n } else if (Konva.Util._inRange(angle, 270 - 22.5, 270 + 22.5)) {\n // RIGHT\n return 'ew-resize';\n } else if (Konva.Util._inRange(angle, 315 - 22.5, 315 + 22.5)) {\n // BOTTOM - RIGHT\n return 'nwse-resize';\n } else {\n // how can we can there?\n // TODO: throw error\n Konva.Util.error(\n 'Transformer has unknown angle for cursor detection: ' + angle\n );\n return 'pointer';\n }\n }\n\n /**\n * Transformer constructor. Transformer is a special type of group that allow you transform Konva\n * primitives and shapes. Transforming tool is not changing `width` and `height` properties of nodes\n * when you resize them. Instead it changes `scaleX` and `scaleY` properties.\n * @constructor\n * @memberof Konva\n * @param {Object} config\n * @param {Boolean} [config.resizeEnabled] Default is true\n * @param {Boolean} [config.rotateEnabled] Default is true\n * @param {Array} [config.rotationSnaps] Array of angles for rotation snaps. Default is []\n * @param {Number} [config.rotateAnchorOffset] Default is 50\n * @param {Number} [config.padding] Default is 0\n * @param {Boolean} [config.borderEnabled] Should we draw border? Default is true\n * @param {String} [config.borderStroke] Border stroke color\n * @param {Number} [config.borderStrokeWidth] Border stroke size\n * @param {Array} [config.borderDash] Array for border dash.\n * @param {String} [config.anchorFill] Anchor fill color\n * @param {String} [config.anchorStroke] Anchor stroke color\n * @param {String} [config.anchorCornerRadius] Anchor corner radius\n * @param {Number} [config.anchorStrokeWidth] Anchor stroke size\n * @param {Number} [config.anchorSize] Default is 10\n * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true\n * @param {Boolean} [config.centeredScaling] Should we resize relative to node's center? Default is false\n * @param {Array} [config.enabledAnchors] Array of names of enabled handles\n * @param {Function} [config.boundBoxFunc] Bounding box function\n * @example\n * var transformer = new Konva.Transformer({\n * node: rectangle,\n * rotateAnchorOffset: 60,\n * enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right']\n * });\n * layer.add(transformer);\n */\n\n Konva.Transformer = function(config) {\n this.____init(config);\n };\n\n var ANCHORS_NAMES = [\n 'top-left',\n 'top-center',\n 'top-right',\n 'middle-right',\n 'middle-left',\n 'bottom-left',\n 'bottom-center',\n 'bottom-right'\n ];\n\n Konva.Transformer.prototype = {\n _centroid: false,\n ____init: function(config) {\n // call super constructor\n Konva.Group.call(this, config);\n this.className = 'Transformer';\n this._createElements();\n\n // bindings\n this._handleMouseMove = this._handleMouseMove.bind(this);\n this._handleMouseUp = this._handleMouseUp.bind(this);\n this.update = this.update.bind(this);\n\n // update transformer data for certain attr changes\n this.on(ATTR_CHANGE_LIST, this.update);\n\n if (this.getNode()) {\n this.update();\n }\n },\n\n /**\n * alias to `setNode`\n * @method\n * @memberof Konva.Transformer.prototype\n * @returns {Konva.Transformer}\n * @example\n * transformer.attachTo(shape);\n */\n attachTo: function(node) {\n this.setNode(node);\n },\n\n /**\n * attach transformer to a Konva.Node. Transformer will adapt to its size and listen its events\n * @method\n * @memberof Konva.Transformer.prototype\n * @returns {Konva.Transformer}\n * @example\n * transformer.setNode(shape);\n */\n setNode: function(node) {\n if (this._node) {\n this.detach();\n }\n this._node = node;\n this._resetTransformCache();\n\n node.on(TRANSFORM_CHANGE_STR, this._resetTransformCache.bind(this));\n node.on(\n REDRAW_CHANGE_STR,\n function() {\n if (!this._transforming) {\n this.update();\n }\n }.bind(this)\n );\n\n // TODO: why do we need this?\n var elementsCreated = !!this.findOne('.top-left');\n if (elementsCreated) {\n this.update();\n }\n return this;\n },\n\n getNode: function() {\n return this._node;\n },\n\n /**\n * detach transformer from a attached node\n * @method\n * @memberof Konva.Transformer.prototype\n * @returns {Konva.Transformer}\n * @example\n * transformer.detach();\n */\n detach: function() {\n if (this.getNode()) {\n this.getNode().off('.resizer');\n this._node = undefined;\n }\n this._resetTransformCache();\n },\n\n _resetTransformCache: function() {\n this._clearCache(NODE_RECT);\n this._clearCache('transform');\n this._clearSelfAndDescendantCache('absoluteTransform');\n },\n\n _getNodeRect: function() {\n return this._getCache(NODE_RECT, this.__getNodeRect);\n },\n\n __getNodeRect: function() {\n var node = this.getNode();\n if (!node) {\n return {\n x: -Number.MAX_SAFE_INTEGER,\n y: -Number.MAX_SAFE_INTEGER,\n width: 0,\n height: 0,\n rotation: 0\n };\n }\n var rect = node.getClientRect({\n skipTransform: true,\n skipShadow: true,\n skipStroke: this.ignoreStroke()\n });\n var rotation = Konva.getAngle(node.rotation());\n\n var dx = rect.x * node.scaleX() - node.offsetX() * node.scaleX();\n var dy = rect.y * node.scaleY() - node.offsetY() * node.scaleY();\n\n return {\n x: node.x() + dx * Math.cos(rotation) + dy * Math.sin(-rotation),\n y: node.y() + dy * Math.cos(rotation) + dx * Math.sin(rotation),\n width: rect.width * node.scaleX(),\n height: rect.height * node.scaleY(),\n rotation: node.rotation()\n };\n },\n\n getX: function() {\n return this._getNodeRect().x;\n },\n\n getY: function() {\n return this._getNodeRect().y;\n },\n\n getRotation: function() {\n return this._getNodeRect().rotation;\n },\n\n getWidth: function() {\n return this._getNodeRect().width;\n },\n\n getHeight: function() {\n return this._getNodeRect().height;\n },\n\n _createElements: function() {\n this._createBack();\n\n ANCHORS_NAMES.forEach(\n function(name) {\n this._createAnchor(name);\n }.bind(this)\n );\n\n this._createAnchor('rotater');\n },\n\n _createAnchor: function(name) {\n var anchor = new Konva.Rect({\n stroke: 'rgb(0, 161, 255)',\n fill: 'white',\n strokeWidth: 1,\n name: name + ' _anchor',\n dragDistance: 0,\n draggable: true\n });\n var self = this;\n anchor.on('mousedown touchstart', function(e) {\n self._handleMouseDown(e);\n });\n anchor.on('dragstart', function(e) {\n e.cancelBubble = true;\n });\n anchor.on('dragmove', function(e) {\n e.cancelBubble = true;\n });\n anchor.on('dragend', function(e) {\n e.cancelBubble = true;\n });\n\n // add hover styling\n anchor.on('mouseenter', function() {\n var tr = this.getParent();\n\n var rad = Konva.getAngle(tr.rotation());\n\n var scale = tr.getNode().getAbsoluteScale();\n // If scale.y < 0 xor scale.x < 0 we need to flip (not rotate).\n var isMirrored = scale.y * scale.x < 0;\n var cursor = getCursor(name, rad, isMirrored);\n anchor.getStage().content.style.cursor = cursor;\n tr._cursorChange = true;\n });\n anchor.on('mouseout', function() {\n if (!anchor.getStage() || !this.getParent()) {\n return;\n }\n anchor.getStage().content.style.cursor = '';\n this.getParent()._cursorChange = false;\n });\n this.add(anchor);\n },\n\n _createBack: function() {\n var back = new Konva.Shape({\n name: 'back',\n width: 0,\n height: 0,\n listening: false,\n sceneFunc: function(ctx) {\n var tr = this.getParent();\n var padding = tr.getPadding();\n ctx.beginPath();\n ctx.rect(\n -padding,\n -padding,\n this.width() + padding * 2,\n this.height() + padding * 2\n );\n ctx.moveTo(this.width() / 2, -padding);\n if (tr.rotateEnabled()) {\n ctx.lineTo(\n this.width() / 2,\n -tr.rotateAnchorOffset() * Konva.Util._sign(this.height())\n );\n }\n\n ctx.fillStrokeShape(this);\n }\n });\n this.add(back);\n },\n\n _handleMouseDown: function(e) {\n this.movingResizer = e.target.name().split(' ')[0];\n\n // var node = this.getNode();\n var attrs = this._getNodeRect();\n var width = attrs.width;\n var height = attrs.height;\n var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));\n this.sin = height / hypotenuse;\n this.cos = width / hypotenuse;\n\n window.addEventListener('mousemove', this._handleMouseMove);\n window.addEventListener('touchmove', this._handleMouseMove);\n window.addEventListener('mouseup', this._handleMouseUp, true);\n window.addEventListener('touchend', this._handleMouseUp, true);\n\n this._transforming = true;\n\n this._fire('transformstart', { evt: e });\n this.getNode()._fire('transformstart', { evt: e });\n },\n\n _handleMouseMove: function(e) {\n var x, y, newHypotenuse;\n var resizerNode = this.findOne('.' + this.movingResizer);\n var stage = resizerNode.getStage();\n\n var box = stage.getContent().getBoundingClientRect();\n var zeroPoint = {\n x: box.left,\n y: box.top\n };\n var pointerPos = {\n left: e.clientX !== undefined ? e.clientX : e.touches[0].clientX,\n top: e.clientX !== undefined ? e.clientY : e.touches[0].clientY\n };\n var newAbsPos = {\n x: pointerPos.left - zeroPoint.x,\n y: pointerPos.top - zeroPoint.y\n };\n\n resizerNode.setAbsolutePosition(newAbsPos);\n\n var keepProportion = this.keepRatio() || e.shiftKey;\n\n // console.log(keepProportion);\n\n if (this.movingResizer === 'top-left') {\n if (keepProportion) {\n newHypotenuse = Math.sqrt(\n Math.pow(this.findOne('.bottom-right').x() - resizerNode.x(), 2) +\n Math.pow(this.findOne('.bottom-right').y() - resizerNode.y(), 2)\n );\n\n x = newHypotenuse * this.cos;\n y = newHypotenuse * this.sin;\n\n this.findOne('.top-left').x(this.findOne('.bottom-right').x() - x);\n this.findOne('.top-left').y(this.findOne('.bottom-right').y() - y);\n }\n } else if (this.movingResizer === 'top-center') {\n this.findOne('.top-left').y(resizerNode.y());\n } else if (this.movingResizer === 'top-right') {\n if (keepProportion) {\n newHypotenuse = Math.sqrt(\n Math.pow(this.findOne('.bottom-left').x() - resizerNode.x(), 2) +\n Math.pow(this.findOne('.bottom-left').y() - resizerNode.y(), 2)\n );\n\n x = newHypotenuse * this.cos;\n y = newHypotenuse * this.sin;\n\n this.findOne('.top-right').x(x);\n this.findOne('.top-right').y(this.findOne('.bottom-left').y() - y);\n }\n var pos = resizerNode.position();\n\n this.findOne('.top-left').y(pos.y);\n this.findOne('.bottom-right').x(pos.x);\n } else if (this.movingResizer === 'middle-left') {\n this.findOne('.top-left').x(resizerNode.x());\n } else if (this.movingResizer === 'middle-right') {\n this.findOne('.bottom-right').x(resizerNode.x());\n } else if (this.movingResizer === 'bottom-left') {\n if (keepProportion) {\n newHypotenuse = Math.sqrt(\n Math.pow(this.findOne('.top-right').x() - resizerNode.x(), 2) +\n Math.pow(this.findOne('.top-right').y() - resizerNode.y(), 2)\n );\n\n x = newHypotenuse * this.cos;\n y = newHypotenuse * this.sin;\n\n this.findOne('.bottom-left').x(this.findOne('.top-right').x() - x);\n this.findOne('.bottom-left').y(y);\n }\n\n pos = resizerNode.position();\n\n this.findOne('.top-left').x(pos.x);\n this.findOne('.bottom-right').y(pos.y);\n } else if (this.movingResizer === 'bottom-center') {\n this.findOne('.bottom-right').y(resizerNode.y());\n } else if (this.movingResizer === 'bottom-right') {\n if (keepProportion) {\n newHypotenuse = Math.sqrt(\n Math.pow(this.findOne('.bottom-right').x(), 2) +\n Math.pow(this.findOne('.bottom-right').y(), 2)\n );\n\n x = newHypotenuse * this.cos;\n y = newHypotenuse * this.sin;\n\n this.findOne('.bottom-right').x(x);\n this.findOne('.bottom-right').y(y);\n }\n } else if (this.movingResizer === 'rotater') {\n var padding = this.getPadding();\n var attrs = this._getNodeRect();\n x = resizerNode.x() - attrs.width / 2;\n y = -resizerNode.y() + attrs.height / 2;\n\n var dAlpha = Math.atan2(-y, x) + Math.PI / 2;\n\n if (attrs.height < 0) {\n dAlpha -= Math.PI;\n }\n\n var rot = Konva.getAngle(this.rotation());\n\n var newRotation =\n Konva.Util._radToDeg(rot) + Konva.Util._radToDeg(dAlpha);\n\n var alpha = Konva.getAngle(this.getNode().rotation());\n var newAlpha = Konva.Util._degToRad(newRotation);\n\n var snaps = this.rotationSnaps();\n var offset = 0.1;\n for (var i = 0; i < snaps.length; i++) {\n var angle = Konva.getAngle(snaps[i]);\n\n var dif =\n Math.abs(angle - Konva.Util._degToRad(newRotation)) % (Math.PI * 2);\n\n if (dif < offset) {\n newRotation = Konva.Util._radToDeg(angle);\n newAlpha = Konva.Util._degToRad(newRotation);\n }\n }\n\n var dx = padding;\n var dy = padding;\n\n this._fitNodeInto(\n {\n rotation: Konva.angleDeg\n ? newRotation\n : Konva.Util._degToRad(newRotation),\n x:\n attrs.x +\n (attrs.width / 2 + padding) *\n (Math.cos(alpha) - Math.cos(newAlpha)) +\n (attrs.height / 2 + padding) *\n (Math.sin(-alpha) - Math.sin(-newAlpha)) -\n (dx * Math.cos(rot) + dy * Math.sin(-rot)),\n y:\n attrs.y +\n (attrs.height / 2 + padding) *\n (Math.cos(alpha) - Math.cos(newAlpha)) +\n (attrs.width / 2 + padding) *\n (Math.sin(alpha) - Math.sin(newAlpha)) -\n (dy * Math.cos(rot) + dx * Math.sin(rot)),\n width: attrs.width + padding * 2,\n height: attrs.height + padding * 2\n },\n e\n );\n } else {\n console.error(\n new Error(\n 'Wrong position argument of selection resizer: ',\n this.movingResizer\n )\n );\n }\n\n if (this.movingResizer === 'rotater') {\n return;\n }\n\n var absPos = this.findOne('.top-left').getAbsolutePosition(\n this.getParent()\n );\n\n var centeredScaling = this.getCenteredScaling() || e.altKey;\n if (centeredScaling) {\n var topLeft = this.findOne('.top-left');\n var bottomRight = this.findOne('.bottom-right');\n var topOffsetX = topLeft.x();\n var topOffsetY = topLeft.y();\n\n var bottomOffsetX = this.getWidth() - bottomRight.x();\n var bottomOffsetY = this.getHeight() - bottomRight.y();\n\n // console.log(topOffsetX, topOffsetY, bottomOffsetX, bottomOffsetY);\n\n bottomRight.move({\n x: -topOffsetX,\n y: -topOffsetY\n });\n\n topLeft.move({\n x: bottomOffsetX,\n y: bottomOffsetY\n });\n\n absPos = topLeft.getAbsolutePosition(this.getParent());\n }\n\n x = absPos.x;\n y = absPos.y;\n var width =\n this.findOne('.bottom-right').x() - this.findOne('.top-left').x();\n\n var height =\n this.findOne('.bottom-right').y() - this.findOne('.top-left').y();\n\n // console.log(x, y, width, height);\n\n this._fitNodeInto(\n {\n x: x + this.offsetX(),\n y: y + this.offsetY(),\n width: width,\n height: height\n },\n e\n );\n },\n\n _handleMouseUp: function(e) {\n this._removeEvents(e);\n },\n\n _removeEvents: function(e) {\n if (this._transforming) {\n this._transforming = false;\n window.removeEventListener('mousemove', this._handleMouseMove);\n window.removeEventListener('touchmove', this._handleMouseMove);\n window.removeEventListener('mouseup', this._handleMouseUp, true);\n window.removeEventListener('touchend', this._handleMouseUp, true);\n this._fire('transformend', { evt: e });\n var node = this.getNode();\n if (node) {\n node.fire('transformend', { evt: e });\n }\n }\n },\n\n _fitNodeInto: function(newAttrs, evt) {\n // waring! in this attrs padding may be included\n var boundBoxFunc = this.getBoundBoxFunc();\n if (boundBoxFunc) {\n var oldAttrs = this._getNodeRect();\n newAttrs = boundBoxFunc.call(this, oldAttrs, newAttrs);\n }\n this._settings = true;\n var node = this.getNode();\n if (newAttrs.rotation !== undefined) {\n this.getNode().rotation(newAttrs.rotation);\n }\n var pure = node.getClientRect({\n skipTransform: true,\n skipShadow: true,\n skipStroke: this.ignoreStroke()\n });\n\n var padding = this.getPadding();\n var scaleX = (newAttrs.width - padding * 2) / pure.width;\n var scaleY = (newAttrs.height - padding * 2) / pure.height;\n\n var rotation = Konva.getAngle(node.getRotation());\n var dx = pure.x * scaleX - padding - node.offsetX() * scaleX;\n var dy = pure.y * scaleY - padding - node.offsetY() * scaleY;\n\n this.getNode().setAttrs({\n scaleX: scaleX,\n scaleY: scaleY,\n x: newAttrs.x - (dx * Math.cos(rotation) + dy * Math.sin(-rotation)),\n y: newAttrs.y - (dy * Math.cos(rotation) + dx * Math.sin(rotation))\n });\n this._settings = false;\n\n this._fire('transform', { evt: evt });\n this.getNode()._fire('transform', { evt: evt });\n this.update();\n this.getLayer().batchDraw();\n },\n /**\n * force update of Konva.Transformer.\n * Use it when you updated attached Konva.Group and now you need to reset transformer size\n * @method\n * @memberof Konva.Transformer.prototype\n */\n forceUpdate: function() {\n this._resetTransformCache();\n this.update();\n },\n update: function() {\n var attrs = this._getNodeRect();\n var node = this.getNode();\n var scale = { x: 1, y: 1 };\n if (node && node.getParent()) {\n scale = node.getParent().getAbsoluteScale();\n }\n var invertedScale = {\n x: 1 / scale.x,\n y: 1 / scale.y\n };\n var width = attrs.width;\n var height = attrs.height;\n\n var enabledAnchors = this.enabledAnchors();\n var resizeEnabled = this.resizeEnabled();\n var padding = this.getPadding();\n\n var anchorSize = this.getAnchorSize();\n this.find('._anchor').setAttrs({\n width: anchorSize,\n height: anchorSize,\n offsetX: anchorSize / 2,\n offsetY: anchorSize / 2,\n stroke: this.getAnchorStroke(),\n strokeWidth: this.getAnchorStrokeWidth(),\n fill: this.getAnchorFill(),\n cornerRadius: this.getAnchorCornerRadius()\n });\n\n this.findOne('.top-left').setAttrs({\n x: -padding,\n y: -padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('top-left') >= 0\n });\n this.findOne('.top-center').setAttrs({\n x: width / 2,\n y: -padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('top-center') >= 0\n });\n this.findOne('.top-right').setAttrs({\n x: width + padding,\n y: -padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('top-right') >= 0\n });\n this.findOne('.middle-left').setAttrs({\n x: -padding,\n y: height / 2,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('middle-left') >= 0\n });\n this.findOne('.middle-right').setAttrs({\n x: width + padding,\n y: height / 2,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('middle-right') >= 0\n });\n this.findOne('.bottom-left').setAttrs({\n x: -padding,\n y: height + padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('bottom-left') >= 0\n });\n this.findOne('.bottom-center').setAttrs({\n x: width / 2,\n y: height + padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('bottom-center') >= 0\n });\n this.findOne('.bottom-right').setAttrs({\n x: width + padding,\n y: height + padding,\n scale: invertedScale,\n visible: resizeEnabled && enabledAnchors.indexOf('bottom-right') >= 0\n });\n\n var scaledRotateAnchorOffset =\n -this.rotateAnchorOffset() * Math.abs(invertedScale.y);\n this.findOne('.rotater').setAttrs({\n x: width / 2,\n y: scaledRotateAnchorOffset * Konva.Util._sign(height),\n scale: invertedScale,\n visible: this.rotateEnabled()\n });\n\n this.findOne('.back').setAttrs({\n width: width * scale.x,\n height: height * scale.y,\n scale: invertedScale,\n visible: this.borderEnabled(),\n stroke: this.getBorderStroke(),\n strokeWidth: this.getBorderStrokeWidth(),\n dash: this.getBorderDash()\n });\n },\n /**\n * determine if transformer is in active transform\n * @method\n * @memberof Konva.Transformer.prototype\n * @returns {Boolean}\n */\n isTransforming: function() {\n return this._transforming;\n },\n /**\n * Stop active transform action\n * @method\n * @memberof Konva.Transformer.prototype\n * @returns {Boolean}\n */\n stopTransform: function() {\n if (this._transforming) {\n this._removeEvents();\n var resizerNode = this.findOne('.' + this.movingResizer);\n if (resizerNode) {\n resizerNode.stopDrag();\n }\n }\n },\n destroy: function() {\n // console.log(this.isTransforming() && this.getStage());\n if (this.getStage() && this._cursorChange) {\n this.getStage().content.style.cursor = '';\n }\n Konva.Group.prototype.destroy.call(this);\n this.detach();\n this._removeEvents();\n },\n // do not work as a container\n // we will recreate inner nodes manually\n toObject: function() {\n return Konva.Node.prototype.toObject.call(this);\n }\n };\n Konva.Util.extend(Konva.Transformer, Konva.Group);\n\n function validateResizers(val) {\n if (!(val instanceof Array)) {\n Konva.Util.warn('enabledAnchors value should be an array');\n }\n if (val instanceof Array) {\n val.forEach(function(name) {\n if (ANCHORS_NAMES.indexOf(name) === -1) {\n Konva.Util.warn(\n 'Unknown anchor name: ' +\n name +\n '. Available names are: ' +\n ANCHORS_NAMES.join(', ')\n );\n }\n });\n }\n return val || [];\n }\n\n /**\n * get/set enabled handlers\n * @name enabledAnchors\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Array} array\n * @returns {Array}\n * @example\n * // get list of handlers\n * var enabledAnchors = transformer.enabledAnchors();\n *\n * // set handlers\n * transformer.enabledAnchors(['top-left', 'top-center', 'top-right', 'middle-right', 'middle-left', 'bottom-left', 'bottom-center', 'bottom-right']);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'enabledAnchors',\n ANCHORS_NAMES,\n validateResizers\n );\n\n /**\n * get/set resize ability. If false it will automatically hide resizing handlers\n * @name resizeEnabled\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Array} array\n * @returns {Array}\n * @example\n * // get\n * var resizeEnabled = transformer.resizeEnabled();\n *\n * // set\n * transformer.resizeEnabled(false);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'resizeEnabled', true);\n /**\n * get/set anchor size. Default is 10\n * @name validateAnchors\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Number} 10\n * @returns {Number}\n * @example\n * // get\n * var anchorSize = transformer.anchorSize();\n *\n * // set\n * transformer.anchorSize(20)\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'anchorSize',\n 10,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set ability to rotate.\n * @name rotateEnabled\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var rotateEnabled = transformer.rotateEnabled();\n *\n * // set\n * transformer.rotateEnabled(false);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateEnabled', true);\n\n /**\n * get/set rotation snaps angles.\n * @name rotationSnaps\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Array} array\n * @returns {Array}\n * @example\n * // get\n * var rotationSnaps = transformer.rotationSnaps();\n *\n * // set\n * transformer.rotationSnaps([0, 90, 180, 270]);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'rotationSnaps', []);\n\n /**\n * get/set distance for rotation handler\n * @name rotateAnchorOffset\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Number} offset\n * @returns {Number}\n * @example\n * // get\n * var rotateAnchorOffset = transformer.rotateAnchorOffset();\n *\n * // set\n * transformer.rotateAnchorOffset(100);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'rotateAnchorOffset',\n 50,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set visibility of border\n * @name borderEnabled\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var borderEnabled = transformer.borderEnabled();\n *\n * // set\n * transformer.borderEnabled(false);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'borderEnabled', true);\n\n /**\n * get/set anchor stroke color\n * @name anchorStroke\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var anchorStroke = transformer.anchorStroke();\n *\n * // set\n * transformer.anchorStroke('red');\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'anchorStroke',\n 'rgb(0, 161, 255)'\n );\n\n /**\n * get/set anchor stroke width\n * @name anchorStrokeWidth\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var anchorStrokeWidth = transformer.anchorStrokeWidth();\n *\n * // set\n * transformer.anchorStrokeWidth(3);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'anchorStrokeWidth',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set anchor fill color\n * @name anchorFill\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var anchorFill = transformer.anchorFill();\n *\n * // set\n * transformer.anchorFill('red');\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'anchorFill', 'white');\n\n /**\n * get/set anchor corner radius\n * @name anchorCornerRadius\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Number} enabled\n * @returns {Number}\n * @example\n * // get\n * var anchorCornerRadius = transformer.anchorCornerRadius();\n *\n * // set\n * transformer.anchorCornerRadius(3);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'anchorCornerRadius',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set border stroke color\n * @name borderStroke\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var borderStroke = transformer.borderStroke();\n *\n * // set\n * transformer.borderStroke('red');\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'borderStroke',\n 'rgb(0, 161, 255)'\n );\n\n /**\n * get/set border stroke width\n * @name borderStrokeWidth\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var borderStrokeWidth = transformer.borderStrokeWidth();\n *\n * // set\n * transformer.borderStrokeWidth(3);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'borderStrokeWidth',\n 1,\n Konva.Validators.getNumberValidator()\n );\n\n /**\n * get/set border dash array\n * @name borderDash\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var borderDash = transformer.borderDash();\n *\n * // set\n * transformer.borderDash([2, 2]);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'borderDash');\n\n /**\n * get/set should we keep ratio while resize anchors at corners\n * @name keepRatio\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} keepRatio\n * @returns {Boolean}\n * @example\n * // get\n * var keepRatio = transformer.keepRatio();\n *\n * // set\n * transformer.keepRatio(false);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'keepRatio', true);\n\n /**\n * get/set should we resize relative to node's center?\n * @name centeredScaling\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} centeredScaling\n * @returns {Boolean}\n * @example\n * // get\n * var centeredScaling = transformer.centeredScaling();\n *\n * // set\n * transformer.centeredScaling(true);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'centeredScaling', false);\n\n /**\n * get/set should we think about stroke while resize? Good to use when a shape has strokeScaleEnabled = false\n * default is false\n * @name ignoreStroke\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} ignoreStroke\n * @returns {Boolean}\n * @example\n * // get\n * var ignoreStroke = transformer.ignoreStroke();\n *\n * // set\n * transformer.ignoreStroke(true);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'ignoreStroke', false);\n\n /**\n * get/set padding\n * @name padding\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Number} padding\n * @returns {Number}\n * @example\n * // get\n * var padding = transformer.padding();\n *\n * // set\n * transformer.padding(10);\n */\n Konva.Factory.addGetterSetter(\n Konva.Transformer,\n 'padding',\n 0,\n Konva.Validators.getNumberValidator()\n );\n\n Konva.Factory.addOverloadedGetterSetter(Konva.Transformer, 'node');\n\n /**\n * get/set bounding box function\n * @name boundBoxFunc\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Function} func\n * @returns {Function}\n * @example\n * // get\n * var boundBoxFunc = transformer.boundBoxFunc();\n *\n * // set\n * transformer.boundBoxFunc(function(oldBox, newBox) {\n * if (newBox.width > 200) {\n * return oldBox;\n * }\n * return newBox;\n * });\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'boundBoxFunc');\n\n Konva.Factory.backCompat(Konva.Transformer, {\n lineEnabled: 'borderEnabled',\n rotateHandlerOffset: 'rotateAnchorOffset',\n enabledHandlers: 'enabledAnchors'\n });\n\n Konva.Collection.mapMethods(Konva.Transformer);\n})(Konva);\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack://editor/./node_modules/konva/konva.js?");
/***/ }),
/***/ "./node_modules/memoize-one/dist/memoize-one.esm.js":
/*!**********************************************************!*\
!*** ./node_modules/memoize-one/dist/memoize-one.esm.js ***!
\**********************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nvar simpleIsEqual = function simpleIsEqual(a, b) {\n return a === b;\n};\n\nfunction index (resultFn, isEqual) {\n if (isEqual === void 0) {\n isEqual = simpleIsEqual;\n }\n\n var lastThis;\n var lastArgs = [];\n var lastResult;\n var calledOnce = false;\n\n var isNewArgEqualToLast = function isNewArgEqualToLast(newArg, index) {\n return isEqual(newArg, lastArgs[index]);\n };\n\n var result = function result() {\n for (var _len = arguments.length, newArgs = new Array(_len), _key = 0; _key < _len; _key++) {\n newArgs[_key] = arguments[_key];\n }\n\n if (calledOnce && lastThis === this && newArgs.length === lastArgs.length && newArgs.every(isNewArgEqualToLast)) {\n return lastResult;\n }\n\n lastResult = resultFn.apply(this, newArgs);\n calledOnce = true;\n lastThis = this;\n lastArgs = newArgs;\n return lastResult;\n };\n\n return result;\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (index);\n\n\n//# sourceURL=webpack://editor/./node_modules/memoize-one/dist/memoize-one.esm.js?");
/***/ }),
/***/ "./node_modules/object-assign/index.js":
/*!*********************************************!*\
!*** ./node_modules/object-assign/index.js ***!
\*********************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n//# sourceURL=webpack://editor/./node_modules/object-assign/index.js?");
/***/ }),
/***/ "./node_modules/process/browser.js":
/*!*****************************************!*\
!*** ./node_modules/process/browser.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("// shim for using process in browser\nvar process = module.exports = {};\n\n// cached from whatever global is present so that test runners that stub it\n// don't break things. But we need to wrap it in a try catch in case it is\n// wrapped in strict mode code which doesn't define any globals. It's inside a\n// function because try/catches deoptimize in certain engines.\n\nvar cachedSetTimeout;\nvar cachedClearTimeout;\n\nfunction defaultSetTimout() {\n throw new Error('setTimeout has not been defined');\n}\nfunction defaultClearTimeout () {\n throw new Error('clearTimeout has not been defined');\n}\n(function () {\n try {\n if (typeof setTimeout === 'function') {\n cachedSetTimeout = setTimeout;\n } else {\n cachedSetTimeout = defaultSetTimout;\n }\n } catch (e) {\n cachedSetTimeout = defaultSetTimout;\n }\n try {\n if (typeof clearTimeout === 'function') {\n cachedClearTimeout = clearTimeout;\n } else {\n cachedClearTimeout = defaultClearTimeout;\n }\n } catch (e) {\n cachedClearTimeout = defaultClearTimeout;\n }\n} ())\nfunction runTimeout(fun) {\n if (cachedSetTimeout === setTimeout) {\n //normal enviroments in sane situations\n return setTimeout(fun, 0);\n }\n // if setTimeout wasn't available but was latter defined\n if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {\n cachedSetTimeout = setTimeout;\n return setTimeout(fun, 0);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedSetTimeout(fun, 0);\n } catch(e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedSetTimeout.call(null, fun, 0);\n } catch(e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error\n return cachedSetTimeout.call(this, fun, 0);\n }\n }\n\n\n}\nfunction runClearTimeout(marker) {\n if (cachedClearTimeout === clearTimeout) {\n //normal enviroments in sane situations\n return clearTimeout(marker);\n }\n // if clearTimeout wasn't available but was latter defined\n if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {\n cachedClearTimeout = clearTimeout;\n return clearTimeout(marker);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedClearTimeout(marker);\n } catch (e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedClearTimeout.call(null, marker);\n } catch (e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.\n // Some versions of I.E. have different rules for clearTimeout vs setTimeout\n return cachedClearTimeout.call(this, marker);\n }\n }\n\n\n\n}\nvar queue = [];\nvar draining = false;\nvar currentQueue;\nvar queueIndex = -1;\n\nfunction cleanUpNextTick() {\n if (!draining || !currentQueue) {\n return;\n }\n draining = false;\n if (currentQueue.length) {\n queue = currentQueue.concat(queue);\n } else {\n queueIndex = -1;\n }\n if (queue.length) {\n drainQueue();\n }\n}\n\nfunction drainQueue() {\n if (draining) {\n return;\n }\n var timeout = runTimeout(cleanUpNextTick);\n draining = true;\n\n var len = queue.length;\n while(len) {\n currentQueue = queue;\n queue = [];\n while (++queueIndex < len) {\n if (currentQueue) {\n currentQueue[queueIndex].run();\n }\n }\n queueIndex = -1;\n len = queue.length;\n }\n currentQueue = null;\n draining = false;\n runClearTimeout(timeout);\n}\n\nprocess.nextTick = function (fun) {\n var args = new Array(arguments.length - 1);\n if (arguments.length > 1) {\n for (var i = 1; i < arguments.length; i++) {\n args[i - 1] = arguments[i];\n }\n }\n queue.push(new Item(fun, args));\n if (queue.length === 1 && !draining) {\n runTimeout(drainQueue);\n }\n};\n\n// v8 likes predictible objects\nfunction Item(fun, array) {\n this.fun = fun;\n this.array = array;\n}\nItem.prototype.run = function () {\n this.fun.apply(null, this.array);\n};\nprocess.title = 'browser';\nprocess.browser = true;\nprocess.env = {};\nprocess.argv = [];\nprocess.version = ''; // empty string to avoid regexp issues\nprocess.versions = {};\n\nfunction noop() {}\n\nprocess.on = noop;\nprocess.addListener = noop;\nprocess.once = noop;\nprocess.off = noop;\nprocess.removeListener = noop;\nprocess.removeAllListeners = noop;\nprocess.emit = noop;\nprocess.prependListener = noop;\nprocess.prependOnceListener = noop;\n\nprocess.listeners = function (name) { return [] }\n\nprocess.binding = function (name) {\n throw new Error('process.binding is not supported');\n};\n\nprocess.cwd = function () { return '/' };\nprocess.chdir = function (dir) {\n throw new Error('process.chdir is not supported');\n};\nprocess.umask = function() { return 0; };\n\n\n//# sourceURL=webpack://editor/./node_modules/process/browser.js?");
/***/ }),
/***/ "./node_modules/prop-types/factoryWithThrowingShims.js":
/*!*************************************************************!*\
!*** ./node_modules/prop-types/factoryWithThrowingShims.js ***!
\*************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\n\nfunction emptyFunction() {}\nfunction emptyFunctionWithReset() {}\nemptyFunctionWithReset.resetWarningCache = emptyFunction;\n\nmodule.exports = function() {\n function shim(props, propName, componentName, location, propFullName, secret) {\n if (secret === ReactPropTypesSecret) {\n // It is still safe when called from React.\n return;\n }\n var err = new Error(\n 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +\n 'Use PropTypes.checkPropTypes() to call them. ' +\n 'Read more at http://fb.me/use-check-prop-types'\n );\n err.name = 'Invariant Violation';\n throw err;\n };\n shim.isRequired = shim;\n function getShim() {\n return shim;\n };\n // Important!\n // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.\n var ReactPropTypes = {\n array: shim,\n bool: shim,\n func: shim,\n number: shim,\n object: shim,\n string: shim,\n symbol: shim,\n\n any: shim,\n arrayOf: getShim,\n element: shim,\n elementType: shim,\n instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim,\n\n checkPropTypes: emptyFunctionWithReset,\n resetWarningCache: emptyFunction\n };\n\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n\n\n//# sourceURL=webpack://editor/./node_modules/prop-types/factoryWithThrowingShims.js?");
/***/ }),
/***/ "./node_modules/prop-types/index.js":
/*!******************************************!*\
!*** ./node_modules/prop-types/index.js ***!
\******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nif (false) { var throwOnDirectAccess, ReactIs; } else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = __webpack_require__(/*! ./factoryWithThrowingShims */ \"./node_modules/prop-types/factoryWithThrowingShims.js\")();\n}\n\n\n//# sourceURL=webpack://editor/./node_modules/prop-types/index.js?");
/***/ }),
/***/ "./node_modules/prop-types/lib/ReactPropTypesSecret.js":
/*!*************************************************************!*\
!*** ./node_modules/prop-types/lib/ReactPropTypesSecret.js ***!
\*************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n\n\n//# sourceURL=webpack://editor/./node_modules/prop-types/lib/ReactPropTypesSecret.js?");
/***/ }),
/***/ "./node_modules/react-dom/cjs/react-dom.production.min.js":
/*!****************************************************************!*\
!*** ./node_modules/react-dom/cjs/react-dom.production.min.js ***!
\****************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/** @license React v16.8.0\n * react-dom.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/*\n Modernizr 3.0.0pre (Custom Build) | MIT\n*/\nvar aa=__webpack_require__(/*! react */ \"./node_modules/react/index.js\"),p=__webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\"),ba=__webpack_require__(/*! scheduler */ \"./node_modules/scheduler/index.js\");function ca(a,b,c,d,e,f,g,h){if(!a){a=void 0;if(void 0===b)a=Error(\"Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.\");else{var l=[c,d,e,f,g,h],k=0;a=Error(b.replace(/%s/g,function(){return l[k++]}));a.name=\"Invariant Violation\"}a.framesToPop=1;throw a;}}\nfunction t(a){for(var b=arguments.length-1,c=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,d=0;d<b;d++)c+=\"&args[]=\"+encodeURIComponent(arguments[d+1]);ca(!1,\"Minified React error #\"+a+\"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. \",c)}aa?void 0:t(\"227\");function da(a,b,c,d,e,f,g,h,l){var k=Array.prototype.slice.call(arguments,3);try{b.apply(c,k)}catch(m){this.onError(m)}}\nvar ea=!1,fa=null,ha=!1,ia=null,ja={onError:function(a){ea=!0;fa=a}};function ka(a,b,c,d,e,f,g,h,l){ea=!1;fa=null;da.apply(ja,arguments)}function la(a,b,c,d,e,f,g,h,l){ka.apply(this,arguments);if(ea){if(ea){var k=fa;ea=!1;fa=null}else t(\"198\"),k=void 0;ha||(ha=!0,ia=k)}}var ma=null,na={};\nfunction oa(){if(ma)for(var a in na){var b=na[a],c=ma.indexOf(a);-1<c?void 0:t(\"96\",a);if(!pa[c]){b.extractEvents?void 0:t(\"97\",a);pa[c]=b;c=b.eventTypes;for(var d in c){var e=void 0;var f=c[d],g=b,h=d;ra.hasOwnProperty(h)?t(\"99\",h):void 0;ra[h]=f;var l=f.phasedRegistrationNames;if(l){for(e in l)l.hasOwnProperty(e)&&sa(l[e],g,h);e=!0}else f.registrationName?(sa(f.registrationName,g,h),e=!0):e=!1;e?void 0:t(\"98\",d,a)}}}}\nfunction sa(a,b,c){ta[a]?t(\"100\",a):void 0;ta[a]=b;ua[a]=b.eventTypes[c].dependencies}var pa=[],ra={},ta={},ua={},va=null,wa=null,xa=null;function ya(a,b,c){var d=a.type||\"unknown-event\";a.currentTarget=xa(c);la(d,b,void 0,a);a.currentTarget=null}function za(a,b){null==b?t(\"30\"):void 0;if(null==a)return b;if(Array.isArray(a)){if(Array.isArray(b))return a.push.apply(a,b),a;a.push(b);return a}return Array.isArray(b)?[a].concat(b):[a,b]}\nfunction Aa(a,b,c){Array.isArray(a)?a.forEach(b,c):a&&b.call(c,a)}var Ba=null;function Ca(a){if(a){var b=a._dispatchListeners,c=a._dispatchInstances;if(Array.isArray(b))for(var d=0;d<b.length&&!a.isPropagationStopped();d++)ya(a,b[d],c[d]);else b&&ya(a,b,c);a._dispatchListeners=null;a._dispatchInstances=null;a.isPersistent()||a.constructor.release(a)}}\nvar Da={injectEventPluginOrder:function(a){ma?t(\"101\"):void 0;ma=Array.prototype.slice.call(a);oa()},injectEventPluginsByName:function(a){var b=!1,c;for(c in a)if(a.hasOwnProperty(c)){var d=a[c];na.hasOwnProperty(c)&&na[c]===d||(na[c]?t(\"102\",c):void 0,na[c]=d,b=!0)}b&&oa()}};\nfunction Ea(a,b){var c=a.stateNode;if(!c)return null;var d=va(c);if(!d)return null;c=d[b];a:switch(b){case \"onClick\":case \"onClickCapture\":case \"onDoubleClick\":case \"onDoubleClickCapture\":case \"onMouseDown\":case \"onMouseDownCapture\":case \"onMouseMove\":case \"onMouseMoveCapture\":case \"onMouseUp\":case \"onMouseUpCapture\":(d=!d.disabled)||(a=a.type,d=!(\"button\"===a||\"input\"===a||\"select\"===a||\"textarea\"===a));a=!d;break a;default:a=!1}if(a)return null;c&&\"function\"!==typeof c?t(\"231\",b,typeof c):void 0;\nreturn c}function Fa(a){null!==a&&(Ba=za(Ba,a));a=Ba;Ba=null;if(a&&(Aa(a,Ca),Ba?t(\"95\"):void 0,ha))throw a=ia,ha=!1,ia=null,a;}var Ga=Math.random().toString(36).slice(2),Ha=\"__reactInternalInstance$\"+Ga,Ia=\"__reactEventHandlers$\"+Ga;function Ja(a){if(a[Ha])return a[Ha];for(;!a[Ha];)if(a.parentNode)a=a.parentNode;else return null;a=a[Ha];return 5===a.tag||6===a.tag?a:null}function Ka(a){a=a[Ha];return!a||5!==a.tag&&6!==a.tag?null:a}\nfunction La(a){if(5===a.tag||6===a.tag)return a.stateNode;t(\"33\")}function Ma(a){return a[Ia]||null}function Na(a){do a=a.return;while(a&&5!==a.tag);return a?a:null}function Oa(a,b,c){if(b=Ea(a,c.dispatchConfig.phasedRegistrationNames[b]))c._dispatchListeners=za(c._dispatchListeners,b),c._dispatchInstances=za(c._dispatchInstances,a)}\nfunction Pa(a){if(a&&a.dispatchConfig.phasedRegistrationNames){for(var b=a._targetInst,c=[];b;)c.push(b),b=Na(b);for(b=c.length;0<b--;)Oa(c[b],\"captured\",a);for(b=0;b<c.length;b++)Oa(c[b],\"bubbled\",a)}}function Qa(a,b,c){a&&c&&c.dispatchConfig.registrationName&&(b=Ea(a,c.dispatchConfig.registrationName))&&(c._dispatchListeners=za(c._dispatchListeners,b),c._dispatchInstances=za(c._dispatchInstances,a))}function Ra(a){a&&a.dispatchConfig.registrationName&&Qa(a._targetInst,null,a)}\nfunction Sa(a){Aa(a,Pa)}var Ta=!(\"undefined\"===typeof window||!window.document||!window.document.createElement);function Ua(a,b){var c={};c[a.toLowerCase()]=b.toLowerCase();c[\"Webkit\"+a]=\"webkit\"+b;c[\"Moz\"+a]=\"moz\"+b;return c}var Va={animationend:Ua(\"Animation\",\"AnimationEnd\"),animationiteration:Ua(\"Animation\",\"AnimationIteration\"),animationstart:Ua(\"Animation\",\"AnimationStart\"),transitionend:Ua(\"Transition\",\"TransitionEnd\")},Wa={},Xa={};\nTa&&(Xa=document.createElement(\"div\").style,\"AnimationEvent\"in window||(delete Va.animationend.animation,delete Va.animationiteration.animation,delete Va.animationstart.animation),\"TransitionEvent\"in window||delete Va.transitionend.transition);function Ya(a){if(Wa[a])return Wa[a];if(!Va[a])return a;var b=Va[a],c;for(c in b)if(b.hasOwnProperty(c)&&c in Xa)return Wa[a]=b[c];return a}\nvar Za=Ya(\"animationend\"),$a=Ya(\"animationiteration\"),ab=Ya(\"animationstart\"),bb=Ya(\"transitionend\"),cb=\"abort canplay canplaythrough durationchange emptied encrypted ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange waiting\".split(\" \"),db=null,eb=null,fb=null;\nfunction gb(){if(fb)return fb;var a,b=eb,c=b.length,d,e=\"value\"in db?db.value:db.textContent,f=e.length;for(a=0;a<c&&b[a]===e[a];a++);var g=c-a;for(d=1;d<=g&&b[c-d]===e[f-d];d++);return fb=e.slice(a,1<d?1-d:void 0)}function hb(){return!0}function ib(){return!1}\nfunction A(a,b,c,d){this.dispatchConfig=a;this._targetInst=b;this.nativeEvent=c;a=this.constructor.Interface;for(var e in a)a.hasOwnProperty(e)&&((b=a[e])?this[e]=b(c):\"target\"===e?this.target=d:this[e]=c[e]);this.isDefaultPrevented=(null!=c.defaultPrevented?c.defaultPrevented:!1===c.returnValue)?hb:ib;this.isPropagationStopped=ib;return this}\np(A.prototype,{preventDefault:function(){this.defaultPrevented=!0;var a=this.nativeEvent;a&&(a.preventDefault?a.preventDefault():\"unknown\"!==typeof a.returnValue&&(a.returnValue=!1),this.isDefaultPrevented=hb)},stopPropagation:function(){var a=this.nativeEvent;a&&(a.stopPropagation?a.stopPropagation():\"unknown\"!==typeof a.cancelBubble&&(a.cancelBubble=!0),this.isPropagationStopped=hb)},persist:function(){this.isPersistent=hb},isPersistent:ib,destructor:function(){var a=this.constructor.Interface,\nb;for(b in a)this[b]=null;this.nativeEvent=this._targetInst=this.dispatchConfig=null;this.isPropagationStopped=this.isDefaultPrevented=ib;this._dispatchInstances=this._dispatchListeners=null}});A.Interface={type:null,target:null,currentTarget:function(){return null},eventPhase:null,bubbles:null,cancelable:null,timeStamp:function(a){return a.timeStamp||Date.now()},defaultPrevented:null,isTrusted:null};\nA.extend=function(a){function b(){}function c(){return d.apply(this,arguments)}var d=this;b.prototype=d.prototype;var e=new b;p(e,c.prototype);c.prototype=e;c.prototype.constructor=c;c.Interface=p({},d.Interface,a);c.extend=d.extend;jb(c);return c};jb(A);function kb(a,b,c,d){if(this.eventPool.length){var e=this.eventPool.pop();this.call(e,a,b,c,d);return e}return new this(a,b,c,d)}function lb(a){a instanceof this?void 0:t(\"279\");a.destructor();10>this.eventPool.length&&this.eventPool.push(a)}\nfunction jb(a){a.eventPool=[];a.getPooled=kb;a.release=lb}var mb=A.extend({data:null}),nb=A.extend({data:null}),ob=[9,13,27,32],pb=Ta&&\"CompositionEvent\"in window,qb=null;Ta&&\"documentMode\"in document&&(qb=document.documentMode);\nvar rb=Ta&&\"TextEvent\"in window&&!qb,sb=Ta&&(!pb||qb&&8<qb&&11>=qb),tb=String.fromCharCode(32),vb={beforeInput:{phasedRegistrationNames:{bubbled:\"onBeforeInput\",captured:\"onBeforeInputCapture\"},dependencies:[\"compositionend\",\"keypress\",\"textInput\",\"paste\"]},compositionEnd:{phasedRegistrationNames:{bubbled:\"onCompositionEnd\",captured:\"onCompositionEndCapture\"},dependencies:\"blur compositionend keydown keypress keyup mousedown\".split(\" \")},compositionStart:{phasedRegistrationNames:{bubbled:\"onCompositionStart\",\ncaptured:\"onCompositionStartCapture\"},dependencies:\"blur compositionstart keydown keypress keyup mousedown\".split(\" \")},compositionUpdate:{phasedRegistrationNames:{bubbled:\"onCompositionUpdate\",captured:\"onCompositionUpdateCapture\"},dependencies:\"blur compositionupdate keydown keypress keyup mousedown\".split(\" \")}},wb=!1;\nfunction xb(a,b){switch(a){case \"keyup\":return-1!==ob.indexOf(b.keyCode);case \"keydown\":return 229!==b.keyCode;case \"keypress\":case \"mousedown\":case \"blur\":return!0;default:return!1}}function yb(a){a=a.detail;return\"object\"===typeof a&&\"data\"in a?a.data:null}var zb=!1;function Ab(a,b){switch(a){case \"compositionend\":return yb(b);case \"keypress\":if(32!==b.which)return null;wb=!0;return tb;case \"textInput\":return a=b.data,a===tb&&wb?null:a;default:return null}}\nfunction Bb(a,b){if(zb)return\"compositionend\"===a||!pb&&xb(a,b)?(a=gb(),fb=eb=db=null,zb=!1,a):null;switch(a){case \"paste\":return null;case \"keypress\":if(!(b.ctrlKey||b.altKey||b.metaKey)||b.ctrlKey&&b.altKey){if(b.char&&1<b.char.length)return b.char;if(b.which)return String.fromCharCode(b.which)}return null;case \"compositionend\":return sb&&\"ko\"!==b.locale?null:b.data;default:return null}}\nvar Cb={eventTypes:vb,extractEvents:function(a,b,c,d){var e=void 0;var f=void 0;if(pb)b:{switch(a){case \"compositionstart\":e=vb.compositionStart;break b;case \"compositionend\":e=vb.compositionEnd;break b;case \"compositionupdate\":e=vb.compositionUpdate;break b}e=void 0}else zb?xb(a,c)&&(e=vb.compositionEnd):\"keydown\"===a&&229===c.keyCode&&(e=vb.compositionStart);e?(sb&&\"ko\"!==c.locale&&(zb||e!==vb.compositionStart?e===vb.compositionEnd&&zb&&(f=gb()):(db=d,eb=\"value\"in db?db.value:db.textContent,zb=\n!0)),e=mb.getPooled(e,b,c,d),f?e.data=f:(f=yb(c),null!==f&&(e.data=f)),Sa(e),f=e):f=null;(a=rb?Ab(a,c):Bb(a,c))?(b=nb.getPooled(vb.beforeInput,b,c,d),b.data=a,Sa(b)):b=null;return null===f?b:null===b?f:[f,b]}},Db=null,Eb=null,Fb=null;function Gb(a){if(a=wa(a)){\"function\"!==typeof Db?t(\"280\"):void 0;var b=va(a.stateNode);Db(a.stateNode,a.type,b)}}function Hb(a){Eb?Fb?Fb.push(a):Fb=[a]:Eb=a}function Ib(){if(Eb){var a=Eb,b=Fb;Fb=Eb=null;Gb(a);if(b)for(a=0;a<b.length;a++)Gb(b[a])}}\nfunction Jb(a,b){return a(b)}function Kb(a,b,c){return a(b,c)}function Lb(){}var Mb=!1;function Nb(a,b){if(Mb)return a(b);Mb=!0;try{return Jb(a,b)}finally{if(Mb=!1,null!==Eb||null!==Fb)Lb(),Ib()}}var Ob={color:!0,date:!0,datetime:!0,\"datetime-local\":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};function Pb(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return\"input\"===b?!!Ob[a.type]:\"textarea\"===b?!0:!1}\nfunction Qb(a){a=a.target||a.srcElement||window;a.correspondingUseElement&&(a=a.correspondingUseElement);return 3===a.nodeType?a.parentNode:a}function Sb(a){if(!Ta)return!1;a=\"on\"+a;var b=a in document;b||(b=document.createElement(\"div\"),b.setAttribute(a,\"return;\"),b=\"function\"===typeof b[a]);return b}function Tb(a){var b=a.type;return(a=a.nodeName)&&\"input\"===a.toLowerCase()&&(\"checkbox\"===b||\"radio\"===b)}\nfunction Ub(a){var b=Tb(a)?\"checked\":\"value\",c=Object.getOwnPropertyDescriptor(a.constructor.prototype,b),d=\"\"+a[b];if(!a.hasOwnProperty(b)&&\"undefined\"!==typeof c&&\"function\"===typeof c.get&&\"function\"===typeof c.set){var e=c.get,f=c.set;Object.defineProperty(a,b,{configurable:!0,get:function(){return e.call(this)},set:function(a){d=\"\"+a;f.call(this,a)}});Object.defineProperty(a,b,{enumerable:c.enumerable});return{getValue:function(){return d},setValue:function(a){d=\"\"+a},stopTracking:function(){a._valueTracker=\nnull;delete a[b]}}}}function Vb(a){a._valueTracker||(a._valueTracker=Ub(a))}function Wb(a){if(!a)return!1;var b=a._valueTracker;if(!b)return!0;var c=b.getValue();var d=\"\";a&&(d=Tb(a)?a.checked?\"true\":\"false\":a.value);a=d;return a!==c?(b.setValue(a),!0):!1}\nvar Xb=aa.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,Yb=/^(.*)[\\\\\\/]/,D=\"function\"===typeof Symbol&&Symbol.for,Zb=D?Symbol.for(\"react.element\"):60103,$b=D?Symbol.for(\"react.portal\"):60106,ac=D?Symbol.for(\"react.fragment\"):60107,bc=D?Symbol.for(\"react.strict_mode\"):60108,cc=D?Symbol.for(\"react.profiler\"):60114,dc=D?Symbol.for(\"react.provider\"):60109,ec=D?Symbol.for(\"react.context\"):60110,fc=D?Symbol.for(\"react.concurrent_mode\"):60111,gc=D?Symbol.for(\"react.forward_ref\"):60112,hc=D?Symbol.for(\"react.suspense\"):\n60113,ic=D?Symbol.for(\"react.memo\"):60115,jc=D?Symbol.for(\"react.lazy\"):60116,kc=\"function\"===typeof Symbol&&Symbol.iterator;function lc(a){if(null===a||\"object\"!==typeof a)return null;a=kc&&a[kc]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nfunction mc(a){if(null==a)return null;if(\"function\"===typeof a)return a.displayName||a.name||null;if(\"string\"===typeof a)return a;switch(a){case fc:return\"ConcurrentMode\";case ac:return\"Fragment\";case $b:return\"Portal\";case cc:return\"Profiler\";case bc:return\"StrictMode\";case hc:return\"Suspense\"}if(\"object\"===typeof a)switch(a.$$typeof){case ec:return\"Context.Consumer\";case dc:return\"Context.Provider\";case gc:var b=a.render;b=b.displayName||b.name||\"\";return a.displayName||(\"\"!==b?\"ForwardRef(\"+b+\n\")\":\"ForwardRef\");case ic:return mc(a.type);case jc:if(a=1===a._status?a._result:null)return mc(a)}return null}function nc(a){var b=\"\";do{a:switch(a.tag){case 3:case 4:case 6:case 7:case 10:case 9:var c=\"\";break a;default:var d=a._debugOwner,e=a._debugSource,f=mc(a.type);c=null;d&&(c=mc(d.type));d=f;f=\"\";e?f=\" (at \"+e.fileName.replace(Yb,\"\")+\":\"+e.lineNumber+\")\":c&&(f=\" (created by \"+c+\")\");c=\"\\n in \"+(d||\"Unknown\")+f}b+=c;a=a.return}while(a);return b}\nvar oc=/^[:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD][:A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040]*$/,pc=Object.prototype.hasOwnProperty,qc={},rc={};\nfunction sc(a){if(pc.call(rc,a))return!0;if(pc.call(qc,a))return!1;if(oc.test(a))return rc[a]=!0;qc[a]=!0;return!1}function tc(a,b,c,d){if(null!==c&&0===c.type)return!1;switch(typeof b){case \"function\":case \"symbol\":return!0;case \"boolean\":if(d)return!1;if(null!==c)return!c.acceptsBooleans;a=a.toLowerCase().slice(0,5);return\"data-\"!==a&&\"aria-\"!==a;default:return!1}}\nfunction uc(a,b,c,d){if(null===b||\"undefined\"===typeof b||tc(a,b,c,d))return!0;if(d)return!1;if(null!==c)switch(c.type){case 3:return!b;case 4:return!1===b;case 5:return isNaN(b);case 6:return isNaN(b)||1>b}return!1}function F(a,b,c,d,e){this.acceptsBooleans=2===b||3===b||4===b;this.attributeName=d;this.attributeNamespace=e;this.mustUseProperty=c;this.propertyName=a;this.type=b}var G={};\n\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach(function(a){G[a]=new F(a,0,!1,a,null)});[[\"acceptCharset\",\"accept-charset\"],[\"className\",\"class\"],[\"htmlFor\",\"for\"],[\"httpEquiv\",\"http-equiv\"]].forEach(function(a){var b=a[0];G[b]=new F(b,1,!1,a[1],null)});[\"contentEditable\",\"draggable\",\"spellCheck\",\"value\"].forEach(function(a){G[a]=new F(a,2,!1,a.toLowerCase(),null)});\n[\"autoReverse\",\"externalResourcesRequired\",\"focusable\",\"preserveAlpha\"].forEach(function(a){G[a]=new F(a,2,!1,a,null)});\"allowFullScreen async autoFocus autoPlay controls default defer disabled formNoValidate hidden loop noModule noValidate open playsInline readOnly required reversed scoped seamless itemScope\".split(\" \").forEach(function(a){G[a]=new F(a,3,!1,a.toLowerCase(),null)});[\"checked\",\"multiple\",\"muted\",\"selected\"].forEach(function(a){G[a]=new F(a,3,!0,a,null)});\n[\"capture\",\"download\"].forEach(function(a){G[a]=new F(a,4,!1,a,null)});[\"cols\",\"rows\",\"size\",\"span\"].forEach(function(a){G[a]=new F(a,6,!1,a,null)});[\"rowSpan\",\"start\"].forEach(function(a){G[a]=new F(a,5,!1,a.toLowerCase(),null)});var vc=/[\\-:]([a-z])/g;function wc(a){return a[1].toUpperCase()}\n\"accent-height alignment-baseline arabic-form baseline-shift cap-height clip-path clip-rule color-interpolation color-interpolation-filters color-profile color-rendering dominant-baseline enable-background fill-opacity fill-rule flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight glyph-name glyph-orientation-horizontal glyph-orientation-vertical horiz-adv-x horiz-origin-x image-rendering letter-spacing lighting-color marker-end marker-mid marker-start overline-position overline-thickness paint-order panose-1 pointer-events rendering-intent shape-rendering stop-color stop-opacity strikethrough-position strikethrough-thickness stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering underline-position underline-thickness unicode-bidi unicode-range units-per-em v-alphabetic v-hanging v-ideographic v-mathematical vector-effect vert-adv-y vert-origin-x vert-origin-y word-spacing writing-mode xmlns:xlink x-height\".split(\" \").forEach(function(a){var b=a.replace(vc,\nwc);G[b]=new F(b,1,!1,a,null)});\"xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type\".split(\" \").forEach(function(a){var b=a.replace(vc,wc);G[b]=new F(b,1,!1,a,\"http://www.w3.org/1999/xlink\")});[\"xml:base\",\"xml:lang\",\"xml:space\"].forEach(function(a){var b=a.replace(vc,wc);G[b]=new F(b,1,!1,a,\"http://www.w3.org/XML/1998/namespace\")});G.tabIndex=new F(\"tabIndex\",1,!1,\"tabindex\",null);\nfunction xc(a,b,c,d){var e=G.hasOwnProperty(b)?G[b]:null;var f=null!==e?0===e.type:d?!1:!(2<b.length)||\"o\"!==b[0]&&\"O\"!==b[0]||\"n\"!==b[1]&&\"N\"!==b[1]?!1:!0;f||(uc(b,c,e,d)&&(c=null),d||null===e?sc(b)&&(null===c?a.removeAttribute(b):a.setAttribute(b,\"\"+c)):e.mustUseProperty?a[e.propertyName]=null===c?3===e.type?!1:\"\":c:(b=e.attributeName,d=e.attributeNamespace,null===c?a.removeAttribute(b):(e=e.type,c=3===e||4===e&&!0===c?\"\":\"\"+c,d?a.setAttributeNS(d,b,c):a.setAttribute(b,c))))}\nfunction yc(a){switch(typeof a){case \"boolean\":case \"number\":case \"object\":case \"string\":case \"undefined\":return a;default:return\"\"}}function zc(a,b){var c=b.checked;return p({},b,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:null!=c?c:a._wrapperState.initialChecked})}\nfunction Ac(a,b){var c=null==b.defaultValue?\"\":b.defaultValue,d=null!=b.checked?b.checked:b.defaultChecked;c=yc(null!=b.value?b.value:c);a._wrapperState={initialChecked:d,initialValue:c,controlled:\"checkbox\"===b.type||\"radio\"===b.type?null!=b.checked:null!=b.value}}function Bc(a,b){b=b.checked;null!=b&&xc(a,\"checked\",b,!1)}\nfunction Cc(a,b){Bc(a,b);var c=yc(b.value),d=b.type;if(null!=c)if(\"number\"===d){if(0===c&&\"\"===a.value||a.value!=c)a.value=\"\"+c}else a.value!==\"\"+c&&(a.value=\"\"+c);else if(\"submit\"===d||\"reset\"===d){a.removeAttribute(\"value\");return}b.hasOwnProperty(\"value\")?Dc(a,b.type,c):b.hasOwnProperty(\"defaultValue\")&&Dc(a,b.type,yc(b.defaultValue));null==b.checked&&null!=b.defaultChecked&&(a.defaultChecked=!!b.defaultChecked)}\nfunction Ec(a,b,c){if(b.hasOwnProperty(\"value\")||b.hasOwnProperty(\"defaultValue\")){var d=b.type;if(!(\"submit\"!==d&&\"reset\"!==d||void 0!==b.value&&null!==b.value))return;b=\"\"+a._wrapperState.initialValue;c||b===a.value||(a.value=b);a.defaultValue=b}c=a.name;\"\"!==c&&(a.name=\"\");a.defaultChecked=!a.defaultChecked;a.defaultChecked=!!a._wrapperState.initialChecked;\"\"!==c&&(a.name=c)}\nfunction Dc(a,b,c){if(\"number\"!==b||a.ownerDocument.activeElement!==a)null==c?a.defaultValue=\"\"+a._wrapperState.initialValue:a.defaultValue!==\"\"+c&&(a.defaultValue=\"\"+c)}var Fc={change:{phasedRegistrationNames:{bubbled:\"onChange\",captured:\"onChangeCapture\"},dependencies:\"blur change click focus input keydown keyup selectionchange\".split(\" \")}};function Gc(a,b,c){a=A.getPooled(Fc.change,a,b,c);a.type=\"change\";Hb(c);Sa(a);return a}var Hc=null,Ic=null;function Jc(a){Fa(a)}\nfunction Kc(a){var b=La(a);if(Wb(b))return a}function Lc(a,b){if(\"change\"===a)return b}var Mc=!1;Ta&&(Mc=Sb(\"input\")&&(!document.documentMode||9<document.documentMode));function Nc(){Hc&&(Hc.detachEvent(\"onpropertychange\",Oc),Ic=Hc=null)}function Oc(a){\"value\"===a.propertyName&&Kc(Ic)&&(a=Gc(Ic,a,Qb(a)),Nb(Jc,a))}function Pc(a,b,c){\"focus\"===a?(Nc(),Hc=b,Ic=c,Hc.attachEvent(\"onpropertychange\",Oc)):\"blur\"===a&&Nc()}function Qc(a){if(\"selectionchange\"===a||\"keyup\"===a||\"keydown\"===a)return Kc(Ic)}\nfunction Rc(a,b){if(\"click\"===a)return Kc(b)}function Sc(a,b){if(\"input\"===a||\"change\"===a)return Kc(b)}\nvar Tc={eventTypes:Fc,_isInputEventSupported:Mc,extractEvents:function(a,b,c,d){var e=b?La(b):window,f=void 0,g=void 0,h=e.nodeName&&e.nodeName.toLowerCase();\"select\"===h||\"input\"===h&&\"file\"===e.type?f=Lc:Pb(e)?Mc?f=Sc:(f=Qc,g=Pc):(h=e.nodeName)&&\"input\"===h.toLowerCase()&&(\"checkbox\"===e.type||\"radio\"===e.type)&&(f=Rc);if(f&&(f=f(a,b)))return Gc(f,c,d);g&&g(a,e,b);\"blur\"===a&&(a=e._wrapperState)&&a.controlled&&\"number\"===e.type&&Dc(e,\"number\",e.value)}},Uc=A.extend({view:null,detail:null}),Vc={Alt:\"altKey\",\nControl:\"ctrlKey\",Meta:\"metaKey\",Shift:\"shiftKey\"};function Wc(a){var b=this.nativeEvent;return b.getModifierState?b.getModifierState(a):(a=Vc[a])?!!b[a]:!1}function Xc(){return Wc}\nvar Yc=0,Zc=0,$c=!1,ad=!1,bd=Uc.extend({screenX:null,screenY:null,clientX:null,clientY:null,pageX:null,pageY:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,getModifierState:Xc,button:null,buttons:null,relatedTarget:function(a){return a.relatedTarget||(a.fromElement===a.srcElement?a.toElement:a.fromElement)},movementX:function(a){if(\"movementX\"in a)return a.movementX;var b=Yc;Yc=a.screenX;return $c?\"mousemove\"===a.type?a.screenX-b:0:($c=!0,0)},movementY:function(a){if(\"movementY\"in a)return a.movementY;\nvar b=Zc;Zc=a.screenY;return ad?\"mousemove\"===a.type?a.screenY-b:0:(ad=!0,0)}}),cd=bd.extend({pointerId:null,width:null,height:null,pressure:null,tangentialPressure:null,tiltX:null,tiltY:null,twist:null,pointerType:null,isPrimary:null}),dd={mouseEnter:{registrationName:\"onMouseEnter\",dependencies:[\"mouseout\",\"mouseover\"]},mouseLeave:{registrationName:\"onMouseLeave\",dependencies:[\"mouseout\",\"mouseover\"]},pointerEnter:{registrationName:\"onPointerEnter\",dependencies:[\"pointerout\",\"pointerover\"]},pointerLeave:{registrationName:\"onPointerLeave\",\ndependencies:[\"pointerout\",\"pointerover\"]}},ed={eventTypes:dd,extractEvents:function(a,b,c,d){var e=\"mouseover\"===a||\"pointerover\"===a,f=\"mouseout\"===a||\"pointerout\"===a;if(e&&(c.relatedTarget||c.fromElement)||!f&&!e)return null;e=d.window===d?d:(e=d.ownerDocument)?e.defaultView||e.parentWindow:window;f?(f=b,b=(b=c.relatedTarget||c.toElement)?Ja(b):null):f=null;if(f===b)return null;var g=void 0,h=void 0,l=void 0,k=void 0;if(\"mouseout\"===a||\"mouseover\"===a)g=bd,h=dd.mouseLeave,l=dd.mouseEnter,k=\"mouse\";\nelse if(\"pointerout\"===a||\"pointerover\"===a)g=cd,h=dd.pointerLeave,l=dd.pointerEnter,k=\"pointer\";var m=null==f?e:La(f);e=null==b?e:La(b);a=g.getPooled(h,f,c,d);a.type=k+\"leave\";a.target=m;a.relatedTarget=e;c=g.getPooled(l,b,c,d);c.type=k+\"enter\";c.target=e;c.relatedTarget=m;d=b;if(f&&d)a:{b=f;e=d;k=0;for(g=b;g;g=Na(g))k++;g=0;for(l=e;l;l=Na(l))g++;for(;0<k-g;)b=Na(b),k--;for(;0<g-k;)e=Na(e),g--;for(;k--;){if(b===e||b===e.alternate)break a;b=Na(b);e=Na(e)}b=null}else b=null;e=b;for(b=[];f&&f!==e;){k=\nf.alternate;if(null!==k&&k===e)break;b.push(f);f=Na(f)}for(f=[];d&&d!==e;){k=d.alternate;if(null!==k&&k===e)break;f.push(d);d=Na(d)}for(d=0;d<b.length;d++)Qa(b[d],\"bubbled\",a);for(d=f.length;0<d--;)Qa(f[d],\"captured\",c);return[a,c]}};function fd(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var gd=Object.prototype.hasOwnProperty;\nfunction hd(a,b){if(fd(a,b))return!0;if(\"object\"!==typeof a||null===a||\"object\"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++)if(!gd.call(b,c[d])||!fd(a[c[d]],b[c[d]]))return!1;return!0}function kd(a){var b=a;if(a.alternate)for(;b.return;)b=b.return;else{if(0!==(b.effectTag&2))return 1;for(;b.return;)if(b=b.return,0!==(b.effectTag&2))return 1}return 3===b.tag?2:3}function ld(a){2!==kd(a)?t(\"188\"):void 0}\nfunction md(a){var b=a.alternate;if(!b)return b=kd(a),3===b?t(\"188\"):void 0,1===b?null:a;for(var c=a,d=b;;){var e=c.return,f=e?e.alternate:null;if(!e||!f)break;if(e.child===f.child){for(var g=e.child;g;){if(g===c)return ld(e),a;if(g===d)return ld(e),b;g=g.sibling}t(\"188\")}if(c.return!==d.return)c=e,d=f;else{g=!1;for(var h=e.child;h;){if(h===c){g=!0;c=e;d=f;break}if(h===d){g=!0;d=e;c=f;break}h=h.sibling}if(!g){for(h=f.child;h;){if(h===c){g=!0;c=f;d=e;break}if(h===d){g=!0;d=f;c=e;break}h=h.sibling}g?\nvoid 0:t(\"189\")}}c.alternate!==d?t(\"190\"):void 0}3!==c.tag?t(\"188\"):void 0;return c.stateNode.current===c?a:b}function nd(a){a=md(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child.return=b,b=b.child;else{if(b===a)break;for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}}return null}\nvar od=A.extend({animationName:null,elapsedTime:null,pseudoElement:null}),pd=A.extend({clipboardData:function(a){return\"clipboardData\"in a?a.clipboardData:window.clipboardData}}),qd=Uc.extend({relatedTarget:null});function rd(a){var b=a.keyCode;\"charCode\"in a?(a=a.charCode,0===a&&13===b&&(a=13)):a=b;10===a&&(a=13);return 32<=a||13===a?a:0}\nvar sd={Esc:\"Escape\",Spacebar:\" \",Left:\"ArrowLeft\",Up:\"ArrowUp\",Right:\"ArrowRight\",Down:\"ArrowDown\",Del:\"Delete\",Win:\"OS\",Menu:\"ContextMenu\",Apps:\"ContextMenu\",Scroll:\"ScrollLock\",MozPrintableKey:\"Unidentified\"},td={8:\"Backspace\",9:\"Tab\",12:\"Clear\",13:\"Enter\",16:\"Shift\",17:\"Control\",18:\"Alt\",19:\"Pause\",20:\"CapsLock\",27:\"Escape\",32:\" \",33:\"PageUp\",34:\"PageDown\",35:\"End\",36:\"Home\",37:\"ArrowLeft\",38:\"ArrowUp\",39:\"ArrowRight\",40:\"ArrowDown\",45:\"Insert\",46:\"Delete\",112:\"F1\",113:\"F2\",114:\"F3\",115:\"F4\",\n116:\"F5\",117:\"F6\",118:\"F7\",119:\"F8\",120:\"F9\",121:\"F10\",122:\"F11\",123:\"F12\",144:\"NumLock\",145:\"ScrollLock\",224:\"Meta\"},ud=Uc.extend({key:function(a){if(a.key){var b=sd[a.key]||a.key;if(\"Unidentified\"!==b)return b}return\"keypress\"===a.type?(a=rd(a),13===a?\"Enter\":String.fromCharCode(a)):\"keydown\"===a.type||\"keyup\"===a.type?td[a.keyCode]||\"Unidentified\":\"\"},location:null,ctrlKey:null,shiftKey:null,altKey:null,metaKey:null,repeat:null,locale:null,getModifierState:Xc,charCode:function(a){return\"keypress\"===\na.type?rd(a):0},keyCode:function(a){return\"keydown\"===a.type||\"keyup\"===a.type?a.keyCode:0},which:function(a){return\"keypress\"===a.type?rd(a):\"keydown\"===a.type||\"keyup\"===a.type?a.keyCode:0}}),vd=bd.extend({dataTransfer:null}),wd=Uc.extend({touches:null,targetTouches:null,changedTouches:null,altKey:null,metaKey:null,ctrlKey:null,shiftKey:null,getModifierState:Xc}),xd=A.extend({propertyName:null,elapsedTime:null,pseudoElement:null}),yd=bd.extend({deltaX:function(a){return\"deltaX\"in a?a.deltaX:\"wheelDeltaX\"in\na?-a.wheelDeltaX:0},deltaY:function(a){return\"deltaY\"in a?a.deltaY:\"wheelDeltaY\"in a?-a.wheelDeltaY:\"wheelDelta\"in a?-a.wheelDelta:0},deltaZ:null,deltaMode:null}),zd=[[\"abort\",\"abort\"],[Za,\"animationEnd\"],[$a,\"animationIteration\"],[ab,\"animationStart\"],[\"canplay\",\"canPlay\"],[\"canplaythrough\",\"canPlayThrough\"],[\"drag\",\"drag\"],[\"dragenter\",\"dragEnter\"],[\"dragexit\",\"dragExit\"],[\"dragleave\",\"dragLeave\"],[\"dragover\",\"dragOver\"],[\"durationchange\",\"durationChange\"],[\"emptied\",\"emptied\"],[\"encrypted\",\"encrypted\"],\n[\"ended\",\"ended\"],[\"error\",\"error\"],[\"gotpointercapture\",\"gotPointerCapture\"],[\"load\",\"load\"],[\"loadeddata\",\"loadedData\"],[\"loadedmetadata\",\"loadedMetadata\"],[\"loadstart\",\"loadStart\"],[\"lostpointercapture\",\"lostPointerCapture\"],[\"mousemove\",\"mouseMove\"],[\"mouseout\",\"mouseOut\"],[\"mouseover\",\"mouseOver\"],[\"playing\",\"playing\"],[\"pointermove\",\"pointerMove\"],[\"pointerout\",\"pointerOut\"],[\"pointerover\",\"pointerOver\"],[\"progress\",\"progress\"],[\"scroll\",\"scroll\"],[\"seeking\",\"seeking\"],[\"stalled\",\"stalled\"],\n[\"suspend\",\"suspend\"],[\"timeupdate\",\"timeUpdate\"],[\"toggle\",\"toggle\"],[\"touchmove\",\"touchMove\"],[bb,\"transitionEnd\"],[\"waiting\",\"waiting\"],[\"wheel\",\"wheel\"]],Ad={},Bd={};function Cd(a,b){var c=a[0];a=a[1];var d=\"on\"+(a[0].toUpperCase()+a.slice(1));b={phasedRegistrationNames:{bubbled:d,captured:d+\"Capture\"},dependencies:[c],isInteractive:b};Ad[a]=b;Bd[c]=b}\n[[\"blur\",\"blur\"],[\"cancel\",\"cancel\"],[\"click\",\"click\"],[\"close\",\"close\"],[\"contextmenu\",\"contextMenu\"],[\"copy\",\"copy\"],[\"cut\",\"cut\"],[\"auxclick\",\"auxClick\"],[\"dblclick\",\"doubleClick\"],[\"dragend\",\"dragEnd\"],[\"dragstart\",\"dragStart\"],[\"drop\",\"drop\"],[\"focus\",\"focus\"],[\"input\",\"input\"],[\"invalid\",\"invalid\"],[\"keydown\",\"keyDown\"],[\"keypress\",\"keyPress\"],[\"keyup\",\"keyUp\"],[\"mousedown\",\"mouseDown\"],[\"mouseup\",\"mouseUp\"],[\"paste\",\"paste\"],[\"pause\",\"pause\"],[\"play\",\"play\"],[\"pointercancel\",\"pointerCancel\"],\n[\"pointerdown\",\"pointerDown\"],[\"pointerup\",\"pointerUp\"],[\"ratechange\",\"rateChange\"],[\"reset\",\"reset\"],[\"seeked\",\"seeked\"],[\"submit\",\"submit\"],[\"touchcancel\",\"touchCancel\"],[\"touchend\",\"touchEnd\"],[\"touchstart\",\"touchStart\"],[\"volumechange\",\"volumeChange\"]].forEach(function(a){Cd(a,!0)});zd.forEach(function(a){Cd(a,!1)});\nvar Dd={eventTypes:Ad,isInteractiveTopLevelEventType:function(a){a=Bd[a];return void 0!==a&&!0===a.isInteractive},extractEvents:function(a,b,c,d){var e=Bd[a];if(!e)return null;switch(a){case \"keypress\":if(0===rd(c))return null;case \"keydown\":case \"keyup\":a=ud;break;case \"blur\":case \"focus\":a=qd;break;case \"click\":if(2===c.button)return null;case \"auxclick\":case \"dblclick\":case \"mousedown\":case \"mousemove\":case \"mouseup\":case \"mouseout\":case \"mouseover\":case \"contextmenu\":a=bd;break;case \"drag\":case \"dragend\":case \"dragenter\":case \"dragexit\":case \"dragleave\":case \"dragover\":case \"dragstart\":case \"drop\":a=\nvd;break;case \"touchcancel\":case \"touchend\":case \"touchmove\":case \"touchstart\":a=wd;break;case Za:case $a:case ab:a=od;break;case bb:a=xd;break;case \"scroll\":a=Uc;break;case \"wheel\":a=yd;break;case \"copy\":case \"cut\":case \"paste\":a=pd;break;case \"gotpointercapture\":case \"lostpointercapture\":case \"pointercancel\":case \"pointerdown\":case \"pointermove\":case \"pointerout\":case \"pointerover\":case \"pointerup\":a=cd;break;default:a=A}b=a.getPooled(e,b,c,d);Sa(b);return b}},Ed=Dd.isInteractiveTopLevelEventType,\nFd=[];function Gd(a){var b=a.targetInst,c=b;do{if(!c){a.ancestors.push(c);break}var d;for(d=c;d.return;)d=d.return;d=3!==d.tag?null:d.stateNode.containerInfo;if(!d)break;a.ancestors.push(c);c=Ja(d)}while(c);for(c=0;c<a.ancestors.length;c++){b=a.ancestors[c];var e=Qb(a.nativeEvent);d=a.topLevelType;for(var f=a.nativeEvent,g=null,h=0;h<pa.length;h++){var l=pa[h];l&&(l=l.extractEvents(d,b,f,e))&&(g=za(g,l))}Fa(g)}}var Hd=!0;\nfunction H(a,b){if(!b)return null;var c=(Ed(a)?Id:Jd).bind(null,a);b.addEventListener(a,c,!1)}function Kd(a,b){if(!b)return null;var c=(Ed(a)?Id:Jd).bind(null,a);b.addEventListener(a,c,!0)}function Id(a,b){Kb(Jd,a,b)}\nfunction Jd(a,b){if(Hd){var c=Qb(b);c=Ja(c);null===c||\"number\"!==typeof c.tag||2===kd(c)||(c=null);if(Fd.length){var d=Fd.pop();d.topLevelType=a;d.nativeEvent=b;d.targetInst=c;a=d}else a={topLevelType:a,nativeEvent:b,targetInst:c,ancestors:[]};try{Nb(Gd,a)}finally{a.topLevelType=null,a.nativeEvent=null,a.targetInst=null,a.ancestors.length=0,10>Fd.length&&Fd.push(a)}}}var Ld={},Md=0,Nd=\"_reactListenersID\"+(\"\"+Math.random()).slice(2);\nfunction Od(a){Object.prototype.hasOwnProperty.call(a,Nd)||(a[Nd]=Md++,Ld[a[Nd]]={});return Ld[a[Nd]]}function Pd(a){a=a||(\"undefined\"!==typeof document?document:void 0);if(\"undefined\"===typeof a)return null;try{return a.activeElement||a.body}catch(b){return a.body}}function Qd(a){for(;a&&a.firstChild;)a=a.firstChild;return a}\nfunction Rd(a,b){var c=Qd(a);a=0;for(var d;c;){if(3===c.nodeType){d=a+c.textContent.length;if(a<=b&&d>=b)return{node:c,offset:b-a};a=d}a:{for(;c;){if(c.nextSibling){c=c.nextSibling;break a}c=c.parentNode}c=void 0}c=Qd(c)}}function Sd(a,b){return a&&b?a===b?!0:a&&3===a.nodeType?!1:b&&3===b.nodeType?Sd(a,b.parentNode):\"contains\"in a?a.contains(b):a.compareDocumentPosition?!!(a.compareDocumentPosition(b)&16):!1:!1}\nfunction Td(){for(var a=window,b=Pd();b instanceof a.HTMLIFrameElement;){try{a=b.contentDocument.defaultView}catch(c){break}b=Pd(a.document)}return b}function Ud(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&(\"input\"===b&&(\"text\"===a.type||\"search\"===a.type||\"tel\"===a.type||\"url\"===a.type||\"password\"===a.type)||\"textarea\"===b||\"true\"===a.contentEditable)}\nvar Vd=Ta&&\"documentMode\"in document&&11>=document.documentMode,Wd={select:{phasedRegistrationNames:{bubbled:\"onSelect\",captured:\"onSelectCapture\"},dependencies:\"blur contextmenu dragend focus keydown keyup mousedown mouseup selectionchange\".split(\" \")}},Xd=null,Yd=null,Zd=null,$d=!1;\nfunction ae(a,b){var c=b.window===b?b.document:9===b.nodeType?b:b.ownerDocument;if($d||null==Xd||Xd!==Pd(c))return null;c=Xd;\"selectionStart\"in c&&Ud(c)?c={start:c.selectionStart,end:c.selectionEnd}:(c=(c.ownerDocument&&c.ownerDocument.defaultView||window).getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset});return Zd&&hd(Zd,c)?null:(Zd=c,a=A.getPooled(Wd.select,Yd,a,b),a.type=\"select\",a.target=Xd,Sa(a),a)}\nvar be={eventTypes:Wd,extractEvents:function(a,b,c,d){var e=d.window===d?d.document:9===d.nodeType?d:d.ownerDocument,f;if(!(f=!e)){a:{e=Od(e);f=ua.onSelect;for(var g=0;g<f.length;g++){var h=f[g];if(!e.hasOwnProperty(h)||!e[h]){e=!1;break a}}e=!0}f=!e}if(f)return null;e=b?La(b):window;switch(a){case \"focus\":if(Pb(e)||\"true\"===e.contentEditable)Xd=e,Yd=b,Zd=null;break;case \"blur\":Zd=Yd=Xd=null;break;case \"mousedown\":$d=!0;break;case \"contextmenu\":case \"mouseup\":case \"dragend\":return $d=!1,ae(c,d);case \"selectionchange\":if(Vd)break;\ncase \"keydown\":case \"keyup\":return ae(c,d)}return null}};Da.injectEventPluginOrder(\"ResponderEventPlugin SimpleEventPlugin EnterLeaveEventPlugin ChangeEventPlugin SelectEventPlugin BeforeInputEventPlugin\".split(\" \"));va=Ma;wa=Ka;xa=La;Da.injectEventPluginsByName({SimpleEventPlugin:Dd,EnterLeaveEventPlugin:ed,ChangeEventPlugin:Tc,SelectEventPlugin:be,BeforeInputEventPlugin:Cb});function ce(a){var b=\"\";aa.Children.forEach(a,function(a){null!=a&&(b+=a)});return b}\nfunction de(a,b){a=p({children:void 0},b);if(b=ce(b.children))a.children=b;return a}function ee(a,b,c,d){a=a.options;if(b){b={};for(var e=0;e<c.length;e++)b[\"$\"+c[e]]=!0;for(c=0;c<a.length;c++)e=b.hasOwnProperty(\"$\"+a[c].value),a[c].selected!==e&&(a[c].selected=e),e&&d&&(a[c].defaultSelected=!0)}else{c=\"\"+yc(c);b=null;for(e=0;e<a.length;e++){if(a[e].value===c){a[e].selected=!0;d&&(a[e].defaultSelected=!0);return}null!==b||a[e].disabled||(b=a[e])}null!==b&&(b.selected=!0)}}\nfunction fe(a,b){null!=b.dangerouslySetInnerHTML?t(\"91\"):void 0;return p({},b,{value:void 0,defaultValue:void 0,children:\"\"+a._wrapperState.initialValue})}function ge(a,b){var c=b.value;null==c&&(c=b.defaultValue,b=b.children,null!=b&&(null!=c?t(\"92\"):void 0,Array.isArray(b)&&(1>=b.length?void 0:t(\"93\"),b=b[0]),c=b),null==c&&(c=\"\"));a._wrapperState={initialValue:yc(c)}}\nfunction he(a,b){var c=yc(b.value),d=yc(b.defaultValue);null!=c&&(c=\"\"+c,c!==a.value&&(a.value=c),null==b.defaultValue&&a.defaultValue!==c&&(a.defaultValue=c));null!=d&&(a.defaultValue=\"\"+d)}function ie(a){var b=a.textContent;b===a._wrapperState.initialValue&&(a.value=b)}var je={html:\"http://www.w3.org/1999/xhtml\",mathml:\"http://www.w3.org/1998/Math/MathML\",svg:\"http://www.w3.org/2000/svg\"};\nfunction ke(a){switch(a){case \"svg\":return\"http://www.w3.org/2000/svg\";case \"math\":return\"http://www.w3.org/1998/Math/MathML\";default:return\"http://www.w3.org/1999/xhtml\"}}function le(a,b){return null==a||\"http://www.w3.org/1999/xhtml\"===a?ke(b):\"http://www.w3.org/2000/svg\"===a&&\"foreignObject\"===b?\"http://www.w3.org/1999/xhtml\":a}\nvar me=void 0,ne=function(a){return\"undefined\"!==typeof MSApp&&MSApp.execUnsafeLocalFunction?function(b,c,d,e){MSApp.execUnsafeLocalFunction(function(){return a(b,c,d,e)})}:a}(function(a,b){if(a.namespaceURI!==je.svg||\"innerHTML\"in a)a.innerHTML=b;else{me=me||document.createElement(\"div\");me.innerHTML=\"<svg>\"+b+\"</svg>\";for(b=me.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}});\nfunction oe(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b}\nvar pe={animationIterationCount:!0,borderImageOutset:!0,borderImageSlice:!0,borderImageWidth:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,columns:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridArea:!0,gridRow:!0,gridRowEnd:!0,gridRowSpan:!0,gridRowStart:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnSpan:!0,gridColumnStart:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,\nfloodOpacity:!0,stopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},qe=[\"Webkit\",\"ms\",\"Moz\",\"O\"];Object.keys(pe).forEach(function(a){qe.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);pe[b]=pe[a]})});function re(a,b,c){return null==b||\"boolean\"===typeof b||\"\"===b?\"\":c||\"number\"!==typeof b||0===b||pe.hasOwnProperty(a)&&pe[a]?(\"\"+b).trim():b+\"px\"}\nfunction se(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf(\"--\"),e=re(c,b[c],d);\"float\"===c&&(c=\"cssFloat\");d?a.setProperty(c,e):a[c]=e}}var te=p({menuitem:!0},{area:!0,base:!0,br:!0,col:!0,embed:!0,hr:!0,img:!0,input:!0,keygen:!0,link:!0,meta:!0,param:!0,source:!0,track:!0,wbr:!0});\nfunction ue(a,b){b&&(te[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML?t(\"137\",a,\"\"):void 0),null!=b.dangerouslySetInnerHTML&&(null!=b.children?t(\"60\"):void 0,\"object\"===typeof b.dangerouslySetInnerHTML&&\"__html\"in b.dangerouslySetInnerHTML?void 0:t(\"61\")),null!=b.style&&\"object\"!==typeof b.style?t(\"62\",\"\"):void 0)}\nfunction ve(a,b){if(-1===a.indexOf(\"-\"))return\"string\"===typeof b.is;switch(a){case \"annotation-xml\":case \"color-profile\":case \"font-face\":case \"font-face-src\":case \"font-face-uri\":case \"font-face-format\":case \"font-face-name\":case \"missing-glyph\":return!1;default:return!0}}\nfunction we(a,b){a=9===a.nodeType||11===a.nodeType?a:a.ownerDocument;var c=Od(a);b=ua[b];for(var d=0;d<b.length;d++){var e=b[d];if(!c.hasOwnProperty(e)||!c[e]){switch(e){case \"scroll\":Kd(\"scroll\",a);break;case \"focus\":case \"blur\":Kd(\"focus\",a);Kd(\"blur\",a);c.blur=!0;c.focus=!0;break;case \"cancel\":case \"close\":Sb(e)&&Kd(e,a);break;case \"invalid\":case \"submit\":case \"reset\":break;default:-1===cb.indexOf(e)&&H(e,a)}c[e]=!0}}}function xe(){}var ye=null,ze=null;\nfunction Ae(a,b){switch(a){case \"button\":case \"input\":case \"select\":case \"textarea\":return!!b.autoFocus}return!1}function Be(a,b){return\"textarea\"===a||\"option\"===a||\"noscript\"===a||\"string\"===typeof b.children||\"number\"===typeof b.children||\"object\"===typeof b.dangerouslySetInnerHTML&&null!==b.dangerouslySetInnerHTML&&null!=b.dangerouslySetInnerHTML.__html}\nvar Ce=\"function\"===typeof setTimeout?setTimeout:void 0,De=\"function\"===typeof clearTimeout?clearTimeout:void 0,Ee=ba.unstable_scheduleCallback,Fe=ba.unstable_cancelCallback;\nfunction Ge(a,b,c,d,e){a[Ia]=e;\"input\"===c&&\"radio\"===e.type&&null!=e.name&&Bc(a,e);ve(c,d);d=ve(c,e);for(var f=0;f<b.length;f+=2){var g=b[f],h=b[f+1];\"style\"===g?se(a,h):\"dangerouslySetInnerHTML\"===g?ne(a,h):\"children\"===g?oe(a,h):xc(a,g,h,d)}switch(c){case \"input\":Cc(a,e);break;case \"textarea\":he(a,e);break;case \"select\":b=a._wrapperState.wasMultiple,a._wrapperState.wasMultiple=!!e.multiple,c=e.value,null!=c?ee(a,!!e.multiple,c,!1):b!==!!e.multiple&&(null!=e.defaultValue?ee(a,!!e.multiple,e.defaultValue,\n!0):ee(a,!!e.multiple,e.multiple?[]:\"\",!1))}}function He(a){for(a=a.nextSibling;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}function Ie(a){for(a=a.firstChild;a&&1!==a.nodeType&&3!==a.nodeType;)a=a.nextSibling;return a}new Set;var Je=[],Ke=-1;function I(a){0>Ke||(a.current=Je[Ke],Je[Ke]=null,Ke--)}function J(a,b){Ke++;Je[Ke]=a.current;a.current=b}var Le={},K={current:Le},L={current:!1},Me=Le;\nfunction Oe(a,b){var c=a.type.contextTypes;if(!c)return Le;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},f;for(f in c)e[f]=b[f];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function M(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Pe(a){I(L,a);I(K,a)}function Qe(a){I(L,a);I(K,a)}\nfunction Re(a,b,c){K.current!==Le?t(\"168\"):void 0;J(K,b,a);J(L,c,a)}function Se(a,b,c){var d=a.stateNode;a=b.childContextTypes;if(\"function\"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)e in a?void 0:t(\"108\",mc(b)||\"Unknown\",e);return p({},c,d)}function Te(a){var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||Le;Me=K.current;J(K,b,a);J(L,L.current,a);return!0}\nfunction Ue(a,b,c){var d=a.stateNode;d?void 0:t(\"169\");c?(b=Se(a,b,Me),d.__reactInternalMemoizedMergedChildContext=b,I(L,a),I(K,a),J(K,b,a)):I(L,a);J(L,c,a)}var Ve=null,We=null;function Xe(a){return function(b){try{return a(b)}catch(c){}}}\nfunction Ye(a){if(\"undefined\"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)return!0;try{var c=b.inject(a);Ve=Xe(function(a){return b.onCommitFiberRoot(c,a)});We=Xe(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}\nfunction Ze(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.contextDependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.childExpirationTime=this.expirationTime=0;this.alternate=null}function N(a,b,c,d){return new Ze(a,b,c,d)}\nfunction $e(a){a=a.prototype;return!(!a||!a.isReactComponent)}function af(a){if(\"function\"===typeof a)return $e(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===gc)return 11;if(a===ic)return 14}return 2}\nfunction bf(a,b){var c=a.alternate;null===c?(c=N(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.effectTag=0,c.nextEffect=null,c.firstEffect=null,c.lastEffect=null);c.childExpirationTime=a.childExpirationTime;c.expirationTime=a.expirationTime;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;c.contextDependencies=a.contextDependencies;c.sibling=a.sibling;\nc.index=a.index;c.ref=a.ref;return c}\nfunction cf(a,b,c,d,e,f){var g=2;d=a;if(\"function\"===typeof a)$e(a)&&(g=1);else if(\"string\"===typeof a)g=5;else a:switch(a){case ac:return df(c.children,e,f,b);case fc:return ef(c,e|3,f,b);case bc:return ef(c,e|2,f,b);case cc:return a=N(12,c,b,e|4),a.elementType=cc,a.type=cc,a.expirationTime=f,a;case hc:return a=N(13,c,b,e),a.elementType=hc,a.type=hc,a.expirationTime=f,a;default:if(\"object\"===typeof a&&null!==a)switch(a.$$typeof){case dc:g=10;break a;case ec:g=9;break a;case gc:g=11;break a;case ic:g=\n14;break a;case jc:g=16;d=null;break a}t(\"130\",null==a?a:typeof a,\"\")}b=N(g,c,b,e);b.elementType=a;b.type=d;b.expirationTime=f;return b}function df(a,b,c,d){a=N(7,a,d,b);a.expirationTime=c;return a}function ef(a,b,c,d){a=N(8,a,d,b);b=0===(b&1)?bc:fc;a.elementType=b;a.type=b;a.expirationTime=c;return a}function ff(a,b,c){a=N(6,a,null,b);a.expirationTime=c;return a}\nfunction gf(a,b,c){b=N(4,null!==a.children?a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function hf(a,b){a.didError=!1;var c=a.earliestPendingTime;0===c?a.earliestPendingTime=a.latestPendingTime=b:c<b?a.earliestPendingTime=b:a.latestPendingTime>b&&(a.latestPendingTime=b);jf(b,a)}\nfunction kf(a,b){a.didError=!1;a.latestPingedTime>=b&&(a.latestPingedTime=0);var c=a.earliestPendingTime,d=a.latestPendingTime;c===b?a.earliestPendingTime=d===b?a.latestPendingTime=0:d:d===b&&(a.latestPendingTime=c);c=a.earliestSuspendedTime;d=a.latestSuspendedTime;0===c?a.earliestSuspendedTime=a.latestSuspendedTime=b:c<b?a.earliestSuspendedTime=b:d>b&&(a.latestSuspendedTime=b);jf(b,a)}function lf(a,b){var c=a.earliestPendingTime;a=a.earliestSuspendedTime;c>b&&(b=c);a>b&&(b=a);return b}\nfunction jf(a,b){var c=b.earliestSuspendedTime,d=b.latestSuspendedTime,e=b.earliestPendingTime,f=b.latestPingedTime;e=0!==e?e:f;0===e&&(0===a||d<a)&&(e=d);a=e;0!==a&&c>a&&(a=c);b.nextExpirationTimeToWorkOn=e;b.expirationTime=a}function P(a,b){if(a&&a.defaultProps){b=p({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c])}return b}\nfunction mf(a){var b=a._result;switch(a._status){case 1:return b;case 2:throw b;case 0:throw b;default:a._status=0;b=a._ctor;b=b();b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)});switch(a._status){case 1:return a._result;case 2:throw a._result;}a._result=b;throw b;}}var nf=(new aa.Component).refs;\nfunction of(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:p({},b,c);a.memoizedState=c;d=a.updateQueue;null!==d&&0===a.expirationTime&&(d.baseState=c)}\nvar xf={isMounted:function(a){return(a=a._reactInternalFiber)?2===kd(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=pf();d=qf(d,a);var e=rf(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);sf();tf(a,e);uf(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=pf();d=qf(d,a);var e=rf(d);e.tag=vf;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);sf();tf(a,e);uf(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=pf();c=qf(c,a);var d=rf(c);d.tag=\nwf;void 0!==b&&null!==b&&(d.callback=b);sf();tf(a,d);uf(a,c)}};function yf(a,b,c,d,e,f,g){a=a.stateNode;return\"function\"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,f,g):b.prototype&&b.prototype.isPureReactComponent?!hd(c,d)||!hd(e,f):!0}\nfunction zf(a,b,c){var d=!1,e=Le;var f=b.contextType;\"object\"===typeof f&&null!==f?f=Af(f):(e=M(b)?Me:K.current,d=b.contextTypes,f=(d=null!==d&&void 0!==d)?Oe(a,e):Le);b=new b(c,f);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=xf;a.stateNode=b;b._reactInternalFiber=a;d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=e,a.__reactInternalMemoizedMaskedChildContext=f);return b}\nfunction Bf(a,b,c,d){a=b.state;\"function\"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);\"function\"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&xf.enqueueReplaceState(b,b.state,null)}\nfunction Cf(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=nf;var f=b.contextType;\"object\"===typeof f&&null!==f?e.context=Af(f):(f=M(b)?Me:K.current,e.context=Oe(a,f));f=a.updateQueue;null!==f&&(Df(a,f,c,e,d),e.state=a.memoizedState);f=b.getDerivedStateFromProps;\"function\"===typeof f&&(of(a,b,f,c),e.state=a.memoizedState);\"function\"===typeof b.getDerivedStateFromProps||\"function\"===typeof e.getSnapshotBeforeUpdate||\"function\"!==typeof e.UNSAFE_componentWillMount&&\"function\"!==\ntypeof e.componentWillMount||(b=e.state,\"function\"===typeof e.componentWillMount&&e.componentWillMount(),\"function\"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&xf.enqueueReplaceState(e,e.state,null),f=a.updateQueue,null!==f&&(Df(a,f,c,e,d),e.state=a.memoizedState));\"function\"===typeof e.componentDidMount&&(a.effectTag|=4)}var Ef=Array.isArray;\nfunction Ff(a,b,c){a=c.ref;if(null!==a&&\"function\"!==typeof a&&\"object\"!==typeof a){if(c._owner){c=c._owner;var d=void 0;c&&(1!==c.tag?t(\"309\"):void 0,d=c.stateNode);d?void 0:t(\"147\",a);var e=\"\"+a;if(null!==b&&null!==b.ref&&\"function\"===typeof b.ref&&b.ref._stringRef===e)return b.ref;b=function(a){var b=d.refs;b===nf&&(b=d.refs={});null===a?delete b[e]:b[e]=a};b._stringRef=e;return b}\"string\"!==typeof a?t(\"284\"):void 0;c._owner?void 0:t(\"290\",a)}return a}\nfunction Gf(a,b){\"textarea\"!==a.type&&t(\"31\",\"[object Object]\"===Object.prototype.toString.call(b)?\"object with keys {\"+Object.keys(b).join(\", \")+\"}\":b,\"\")}\nfunction Hf(a){function b(b,c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.effectTag=8}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(a,b){for(a=new Map;null!==b;)null!==b.key?a.set(b.key,b):a.set(b.index,b),b=b.sibling;return a}function e(a,b,c){a=bf(a,b,c);a.index=0;a.sibling=null;return a}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.effectTag=\n2,c):d;b.effectTag=2;return c}function g(b){a&&null===b.alternate&&(b.effectTag=2);return b}function h(a,b,c,d){if(null===b||6!==b.tag)return b=ff(c,a.mode,d),b.return=a,b;b=e(b,c,d);b.return=a;return b}function l(a,b,c,d){if(null!==b&&b.elementType===c.type)return d=e(b,c.props,d),d.ref=Ff(a,b,c),d.return=a,d;d=cf(c.type,c.key,c.props,null,a.mode,d);d.ref=Ff(a,b,c);d.return=a;return d}function k(a,b,c,d){if(null===b||4!==b.tag||b.stateNode.containerInfo!==c.containerInfo||b.stateNode.implementation!==\nc.implementation)return b=gf(c,a.mode,d),b.return=a,b;b=e(b,c.children||[],d);b.return=a;return b}function m(a,b,c,d,f){if(null===b||7!==b.tag)return b=df(c,a.mode,d,f),b.return=a,b;b=e(b,c,d);b.return=a;return b}function q(a,b,c){if(\"string\"===typeof b||\"number\"===typeof b)return b=ff(\"\"+b,a.mode,c),b.return=a,b;if(\"object\"===typeof b&&null!==b){switch(b.$$typeof){case Zb:return c=cf(b.type,b.key,b.props,null,a.mode,c),c.ref=Ff(a,null,b),c.return=a,c;case $b:return b=gf(b,a.mode,c),b.return=a,b}if(Ef(b)||\nlc(b))return b=df(b,a.mode,c,null),b.return=a,b;Gf(a,b)}return null}function x(a,b,c,d){var e=null!==b?b.key:null;if(\"string\"===typeof c||\"number\"===typeof c)return null!==e?null:h(a,b,\"\"+c,d);if(\"object\"===typeof c&&null!==c){switch(c.$$typeof){case Zb:return c.key===e?c.type===ac?m(a,b,c.props.children,d,e):l(a,b,c,d):null;case $b:return c.key===e?k(a,b,c,d):null}if(Ef(c)||lc(c))return null!==e?null:m(a,b,c,d,null);Gf(a,c)}return null}function C(a,b,c,d,e){if(\"string\"===typeof d||\"number\"===typeof d)return a=\na.get(c)||null,h(b,a,\"\"+d,e);if(\"object\"===typeof d&&null!==d){switch(d.$$typeof){case Zb:return a=a.get(null===d.key?c:d.key)||null,d.type===ac?m(b,a,d.props.children,e,d.key):l(b,a,d,e);case $b:return a=a.get(null===d.key?c:d.key)||null,k(b,a,d,e)}if(Ef(d)||lc(d))return a=a.get(c)||null,m(b,a,d,e,null);Gf(b,d)}return null}function w(e,g,h,k){for(var l=null,m=null,n=g,u=g=0,r=null;null!==n&&u<h.length;u++){n.index>u?(r=n,n=null):r=n.sibling;var v=x(e,n,h[u],k);if(null===v){null===n&&(n=r);break}a&&\nn&&null===v.alternate&&b(e,n);g=f(v,g,u);null===m?l=v:m.sibling=v;m=v;n=r}if(u===h.length)return c(e,n),l;if(null===n){for(;u<h.length;u++)if(n=q(e,h[u],k))g=f(n,g,u),null===m?l=n:m.sibling=n,m=n;return l}for(n=d(e,n);u<h.length;u++)if(r=C(n,e,u,h[u],k))a&&null!==r.alternate&&n.delete(null===r.key?u:r.key),g=f(r,g,u),null===m?l=r:m.sibling=r,m=r;a&&n.forEach(function(a){return b(e,a)});return l}function E(e,g,h,k){var l=lc(h);\"function\"!==typeof l?t(\"150\"):void 0;h=l.call(h);null==h?t(\"151\"):void 0;\nfor(var m=l=null,n=g,u=g=0,r=null,v=h.next();null!==n&&!v.done;u++,v=h.next()){n.index>u?(r=n,n=null):r=n.sibling;var z=x(e,n,v.value,k);if(null===z){n||(n=r);break}a&&n&&null===z.alternate&&b(e,n);g=f(z,g,u);null===m?l=z:m.sibling=z;m=z;n=r}if(v.done)return c(e,n),l;if(null===n){for(;!v.done;u++,v=h.next())v=q(e,v.value,k),null!==v&&(g=f(v,g,u),null===m?l=v:m.sibling=v,m=v);return l}for(n=d(e,n);!v.done;u++,v=h.next())v=C(n,e,u,v.value,k),null!==v&&(a&&null!==v.alternate&&n.delete(null===v.key?u:\nv.key),g=f(v,g,u),null===m?l=v:m.sibling=v,m=v);a&&n.forEach(function(a){return b(e,a)});return l}return function(a,d,f,h){var k=\"object\"===typeof f&&null!==f&&f.type===ac&&null===f.key;k&&(f=f.props.children);var l=\"object\"===typeof f&&null!==f;if(l)switch(f.$$typeof){case Zb:a:{l=f.key;for(k=d;null!==k;){if(k.key===l)if(7===k.tag?f.type===ac:k.elementType===f.type){c(a,k.sibling);d=e(k,f.type===ac?f.props.children:f.props,h);d.ref=Ff(a,k,f);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);k=\nk.sibling}f.type===ac?(d=df(f.props.children,a.mode,h,f.key),d.return=a,a=d):(h=cf(f.type,f.key,f.props,null,a.mode,h),h.ref=Ff(a,d,f),h.return=a,a=h)}return g(a);case $b:a:{for(k=f.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===f.containerInfo&&d.stateNode.implementation===f.implementation){c(a,d.sibling);d=e(d,f.children||[],h);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=gf(f,a.mode,h);d.return=a;a=d}return g(a)}if(\"string\"===typeof f||\"number\"===typeof f)return f=\n\"\"+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h),d.return=a,a=d):(c(a,d),d=ff(f,a.mode,h),d.return=a,a=d),g(a);if(Ef(f))return w(a,d,f,h);if(lc(f))return E(a,d,f,h);l&&Gf(a,f);if(\"undefined\"===typeof f&&!k)switch(a.tag){case 1:case 0:h=a.type,t(\"152\",h.displayName||h.name||\"Component\")}return c(a,d)}}var If=Hf(!0),Jf=Hf(!1),Kf={},Lf={current:Kf},Mf={current:Kf},Nf={current:Kf};function Of(a){a===Kf?t(\"174\"):void 0;return a}\nfunction Pf(a,b){J(Nf,b,a);J(Mf,a,a);J(Lf,Kf,a);var c=b.nodeType;switch(c){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:le(null,\"\");break;default:c=8===c?b.parentNode:b,b=c.namespaceURI||null,c=c.tagName,b=le(b,c)}I(Lf,a);J(Lf,b,a)}function Qf(a){I(Lf,a);I(Mf,a);I(Nf,a)}function Rf(a){Of(Nf.current);var b=Of(Lf.current);var c=le(b,a.type);b!==c&&(J(Mf,a,a),J(Lf,c,a))}function Sf(a){Mf.current===a&&(I(Lf,a),I(Mf,a))}\nvar Tf=0,Uf=2,Vf=4,Wf=8,Xf=16,Yf=32,Zf=64,$f=128,ag=Xb.ReactCurrentDispatcher,bg=0,cg=null,Q=null,dg=null,eg=null,R=null,fg=null,gg=0,hg=null,ig=0,jg=!1,kg=null,lg=0;function mg(){t(\"307\")}function ng(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!fd(a[c],b[c]))return!1;return!0}\nfunction og(a,b,c,d,e,f){bg=f;cg=b;dg=null!==a?a.memoizedState:null;ag.current=null===dg?pg:qg;b=c(d,e);if(jg){do jg=!1,lg+=1,dg=null!==a?a.memoizedState:null,fg=eg,hg=R=Q=null,ag.current=qg,b=c(d,e);while(jg);kg=null;lg=0}ag.current=rg;a=cg;a.memoizedState=eg;a.expirationTime=gg;a.updateQueue=hg;a.effectTag|=ig;a=null!==Q&&null!==Q.next;bg=0;fg=R=eg=dg=Q=cg=null;gg=0;hg=null;ig=0;a?t(\"300\"):void 0;return b}\nfunction sg(){ag.current=rg;bg=0;fg=R=eg=dg=Q=cg=null;gg=0;hg=null;ig=0;jg=!1;kg=null;lg=0}function tg(){var a={memoizedState:null,baseState:null,queue:null,baseUpdate:null,next:null};null===R?eg=R=a:R=R.next=a;return R}function ug(){if(null!==fg)R=fg,fg=R.next,Q=dg,dg=null!==Q?Q.next:null;else{null===dg?t(\"310\"):void 0;Q=dg;var a={memoizedState:Q.memoizedState,baseState:Q.baseState,queue:Q.queue,baseUpdate:Q.baseUpdate,next:null};R=null===R?eg=a:R.next=a;dg=Q.next}return R}\nfunction vg(a,b){return\"function\"===typeof b?b(a):b}\nfunction wg(a){var b=ug(),c=b.queue;null===c?t(\"311\"):void 0;if(0<lg){var d=c.dispatch;if(null!==kg){var e=kg.get(c);if(void 0!==e){kg.delete(c);var f=b.memoizedState;do f=a(f,e.action),e=e.next;while(null!==e);fd(f,b.memoizedState)||(xg=!0);b.memoizedState=f;b.baseUpdate===c.last&&(b.baseState=f);return[f,d]}}return[b.memoizedState,d]}d=c.last;var g=b.baseUpdate;f=b.baseState;null!==g?(null!==d&&(d.next=null),d=g.next):d=null!==d?d.next:null;if(null!==d){var h=e=null,l=d,k=!1;do{var m=l.expirationTime;\nm<bg?(k||(k=!0,h=g,e=f),m>gg&&(gg=m)):f=l.eagerReducer===a?l.eagerState:a(f,l.action);g=l;l=l.next}while(null!==l&&l!==d);k||(h=g,e=f);fd(f,b.memoizedState)||(xg=!0);b.memoizedState=f;b.baseUpdate=h;b.baseState=e;c.eagerReducer=a;c.eagerState=f}return[b.memoizedState,c.dispatch]}\nfunction yg(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};null===hg?(hg={lastEffect:null},hg.lastEffect=a.next=a):(b=hg.lastEffect,null===b?hg.lastEffect=a.next=a:(c=b.next,b.next=a,a.next=c,hg.lastEffect=a));return a}function zg(a,b,c,d){var e=tg();ig|=a;e.memoizedState=yg(b,c,void 0,void 0===d?null:d)}\nfunction Bg(a,b,c,d){var e=ug();d=void 0===d?null:d;var f=void 0;if(null!==Q){var g=Q.memoizedState;f=g.destroy;if(null!==d&&ng(d,g.deps)){yg(Tf,c,f,d);return}}ig|=a;e.memoizedState=yg(b,c,f,d)}function Cg(a,b){if(\"function\"===typeof b)return a=a(),b(a),function(){b(null)};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function Dg(){}\nfunction Eg(a,b,c){25>lg?void 0:t(\"301\");var d=a.alternate;if(a===cg||null!==d&&d===cg)if(jg=!0,a={expirationTime:bg,action:c,eagerReducer:null,eagerState:null,next:null},null===kg&&(kg=new Map),c=kg.get(b),void 0===c)kg.set(b,a);else{for(b=c;null!==b.next;)b=b.next;b.next=a}else{sf();var e=pf();e=qf(e,a);var f={expirationTime:e,action:c,eagerReducer:null,eagerState:null,next:null},g=b.last;if(null===g)f.next=f;else{var h=g.next;null!==h&&(f.next=h);g.next=f}b.last=f;if(0===a.expirationTime&&(null===\nd||0===d.expirationTime)&&(d=b.eagerReducer,null!==d))try{var l=b.eagerState,k=d(l,c);f.eagerReducer=d;f.eagerState=k;if(fd(k,l))return}catch(m){}finally{}uf(a,e)}}\nvar rg={readContext:Af,useCallback:mg,useContext:mg,useEffect:mg,useImperativeHandle:mg,useLayoutEffect:mg,useMemo:mg,useReducer:mg,useRef:mg,useState:mg,useDebugValue:mg},pg={readContext:Af,useCallback:function(a,b){tg().memoizedState=[a,void 0===b?null:b];return a},useContext:Af,useEffect:function(a,b){return zg(516,$f|Zf,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return zg(4,Vf|Yf,Cg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return zg(4,Vf|Yf,a,b)},\nuseMemo:function(a,b){var c=tg();b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=tg();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a=d.queue={last:null,dispatch:null,eagerReducer:a,eagerState:b};a=a.dispatch=Eg.bind(null,cg,a);return[d.memoizedState,a]},useRef:function(a){var b=tg();a={current:a};return b.memoizedState=a},useState:function(a){var b=tg();\"function\"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a=b.queue={last:null,dispatch:null,eagerReducer:vg,\neagerState:a};a=a.dispatch=Eg.bind(null,cg,a);return[b.memoizedState,a]},useDebugValue:Dg},qg={readContext:Af,useCallback:function(a,b){var c=ug();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&ng(b,d[1]))return d[0];c.memoizedState=[a,b];return a},useContext:Af,useEffect:function(a,b){return Bg(516,$f|Zf,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return Bg(4,Vf|Yf,Cg.bind(null,b,a),c)},useLayoutEffect:function(a,b){return Bg(4,Vf|Yf,a,b)},\nuseMemo:function(a,b){var c=ug();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&ng(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a},useReducer:wg,useRef:function(){return ug().memoizedState},useState:function(a){return wg(vg,a)},useDebugValue:Dg},Fg=null,Gg=null,Hg=!1;\nfunction Ig(a,b){var c=N(5,null,null,0);c.elementType=\"DELETED\";c.type=\"DELETED\";c.stateNode=b;c.return=a;c.effectTag=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}function Jg(a,b){switch(a.tag){case 5:var c=a.type;b=1!==b.nodeType||c.toLowerCase()!==b.nodeName.toLowerCase()?null:b;return null!==b?(a.stateNode=b,!0):!1;case 6:return b=\"\"===a.pendingProps||3!==b.nodeType?null:b,null!==b?(a.stateNode=b,!0):!1;default:return!1}}\nfunction Kg(a){if(Hg){var b=Gg;if(b){var c=b;if(!Jg(a,b)){b=He(c);if(!b||!Jg(a,b)){a.effectTag|=2;Hg=!1;Fg=a;return}Ig(Fg,c)}Fg=a;Gg=Ie(b)}else a.effectTag|=2,Hg=!1,Fg=a}}function Lg(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag;)a=a.return;Fg=a}function Mg(a){if(a!==Fg)return!1;if(!Hg)return Lg(a),Hg=!0,!1;var b=a.type;if(5!==a.tag||\"head\"!==b&&\"body\"!==b&&!Be(b,a.memoizedProps))for(b=Gg;b;)Ig(a,b),b=He(b);Lg(a);Gg=Fg?He(a.stateNode):null;return!0}function Ng(){Gg=Fg=null;Hg=!1}\nvar Og=Xb.ReactCurrentOwner,xg=!1;function S(a,b,c,d){b.child=null===a?Jf(b,null,c,d):If(b,a.child,c,d)}function Pg(a,b,c,d,e){c=c.render;var f=b.ref;Qg(b,e);d=og(a,b,c,d,f,e);if(null!==a&&!xg)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),Rg(a,b,e);b.effectTag|=1;S(a,b,d,e);return b.child}\nfunction Sg(a,b,c,d,e,f){if(null===a){var g=c.type;if(\"function\"===typeof g&&!$e(g)&&void 0===g.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=g,Tg(a,b,g,d,e,f);a=cf(c.type,null,d,null,b.mode,f);a.ref=b.ref;a.return=b;return b.child=a}g=a.child;if(e<f&&(e=g.memoizedProps,c=c.compare,c=null!==c?c:hd,c(e,d)&&a.ref===b.ref))return Rg(a,b,f);b.effectTag|=1;a=bf(g,d,f);a.ref=b.ref;a.return=b;return b.child=a}\nfunction Tg(a,b,c,d,e,f){return null!==a&&hd(a.memoizedProps,d)&&a.ref===b.ref&&(xg=!1,e<f)?Rg(a,b,f):Ug(a,b,c,d,f)}function Vg(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}function Ug(a,b,c,d,e){var f=M(c)?Me:K.current;f=Oe(b,f);Qg(b,e);c=og(a,b,c,d,f,e);if(null!==a&&!xg)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),Rg(a,b,e);b.effectTag|=1;S(a,b,c,e);return b.child}\nfunction Wg(a,b,c,d,e){if(M(c)){var f=!0;Te(b)}else f=!1;Qg(b,e);if(null===b.stateNode)null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),zf(b,c,d,e),Cf(b,c,d,e),d=!0;else if(null===a){var g=b.stateNode,h=b.memoizedProps;g.props=h;var l=g.context,k=c.contextType;\"object\"===typeof k&&null!==k?k=Af(k):(k=M(c)?Me:K.current,k=Oe(b,k));var m=c.getDerivedStateFromProps,q=\"function\"===typeof m||\"function\"===typeof g.getSnapshotBeforeUpdate;q||\"function\"!==typeof g.UNSAFE_componentWillReceiveProps&&\n\"function\"!==typeof g.componentWillReceiveProps||(h!==d||l!==k)&&Bf(b,g,d,k);Xg=!1;var x=b.memoizedState;l=g.state=x;var C=b.updateQueue;null!==C&&(Df(b,C,d,g,e),l=b.memoizedState);h!==d||x!==l||L.current||Xg?(\"function\"===typeof m&&(of(b,c,m,d),l=b.memoizedState),(h=Xg||yf(b,c,h,d,x,l,k))?(q||\"function\"!==typeof g.UNSAFE_componentWillMount&&\"function\"!==typeof g.componentWillMount||(\"function\"===typeof g.componentWillMount&&g.componentWillMount(),\"function\"===typeof g.UNSAFE_componentWillMount&&\ng.UNSAFE_componentWillMount()),\"function\"===typeof g.componentDidMount&&(b.effectTag|=4)):(\"function\"===typeof g.componentDidMount&&(b.effectTag|=4),b.memoizedProps=d,b.memoizedState=l),g.props=d,g.state=l,g.context=k,d=h):(\"function\"===typeof g.componentDidMount&&(b.effectTag|=4),d=!1)}else g=b.stateNode,h=b.memoizedProps,g.props=b.type===b.elementType?h:P(b.type,h),l=g.context,k=c.contextType,\"object\"===typeof k&&null!==k?k=Af(k):(k=M(c)?Me:K.current,k=Oe(b,k)),m=c.getDerivedStateFromProps,(q=\"function\"===\ntypeof m||\"function\"===typeof g.getSnapshotBeforeUpdate)||\"function\"!==typeof g.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof g.componentWillReceiveProps||(h!==d||l!==k)&&Bf(b,g,d,k),Xg=!1,l=b.memoizedState,x=g.state=l,C=b.updateQueue,null!==C&&(Df(b,C,d,g,e),x=b.memoizedState),h!==d||l!==x||L.current||Xg?(\"function\"===typeof m&&(of(b,c,m,d),x=b.memoizedState),(m=Xg||yf(b,c,h,d,l,x,k))?(q||\"function\"!==typeof g.UNSAFE_componentWillUpdate&&\"function\"!==typeof g.componentWillUpdate||(\"function\"===\ntypeof g.componentWillUpdate&&g.componentWillUpdate(d,x,k),\"function\"===typeof g.UNSAFE_componentWillUpdate&&g.UNSAFE_componentWillUpdate(d,x,k)),\"function\"===typeof g.componentDidUpdate&&(b.effectTag|=4),\"function\"===typeof g.getSnapshotBeforeUpdate&&(b.effectTag|=256)):(\"function\"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),b.memoizedProps=d,b.memoizedState=\nx),g.props=d,g.state=x,g.context=k,d=m):(\"function\"!==typeof g.componentDidUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof g.getSnapshotBeforeUpdate||h===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),d=!1);return Yg(a,b,c,d,f,e)}\nfunction Yg(a,b,c,d,e,f){Vg(a,b);var g=0!==(b.effectTag&64);if(!d&&!g)return e&&Ue(b,c,!1),Rg(a,b,f);d=b.stateNode;Og.current=b;var h=g&&\"function\"!==typeof c.getDerivedStateFromError?null:d.render();b.effectTag|=1;null!==a&&g?(b.child=If(b,a.child,null,f),b.child=If(b,null,h,f)):S(a,b,h,f);b.memoizedState=d.state;e&&Ue(b,c,!0);return b.child}function Zg(a){var b=a.stateNode;b.pendingContext?Re(a,b.pendingContext,b.pendingContext!==b.context):b.context&&Re(a,b.context,!1);Pf(a,b.containerInfo)}\nfunction $g(a,b,c){var d=b.mode,e=b.pendingProps,f=b.memoizedState;if(0===(b.effectTag&64)){f=null;var g=!1}else f={timedOutAt:null!==f?f.timedOutAt:0},g=!0,b.effectTag&=-65;if(null===a)if(g){var h=e.fallback;a=df(null,d,0,null);0===(b.mode&1)&&(a.child=null!==b.memoizedState?b.child.child:b.child);d=df(h,d,c,null);a.sibling=d;c=a;c.return=d.return=b}else c=d=Jf(b,null,e.children,c);else null!==a.memoizedState?(d=a.child,h=d.sibling,g?(c=e.fallback,e=bf(d,d.pendingProps,0),0===(b.mode&1)&&(g=null!==\nb.memoizedState?b.child.child:b.child,g!==d.child&&(e.child=g)),d=e.sibling=bf(h,c,h.expirationTime),c=e,e.childExpirationTime=0,c.return=d.return=b):c=d=If(b,d.child,e.children,c)):(h=a.child,g?(g=e.fallback,e=df(null,d,0,null),e.child=h,0===(b.mode&1)&&(e.child=null!==b.memoizedState?b.child.child:b.child),d=e.sibling=df(g,d,c,null),d.effectTag|=2,c=e,e.childExpirationTime=0,c.return=d.return=b):d=c=If(b,h,e.children,c)),b.stateNode=a.stateNode;b.memoizedState=f;b.child=c;return d}\nfunction Rg(a,b,c){null!==a&&(b.contextDependencies=a.contextDependencies);if(b.childExpirationTime<c)return null;null!==a&&b.child!==a.child?t(\"153\"):void 0;if(null!==b.child){a=b.child;c=bf(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=bf(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}\nfunction ah(a,b,c){var d=b.expirationTime;if(null!==a)if(a.memoizedProps!==b.pendingProps||L.current)xg=!0;else{if(d<c){xg=!1;switch(b.tag){case 3:Zg(b);Ng();break;case 5:Rf(b);break;case 1:M(b.type)&&Te(b);break;case 4:Pf(b,b.stateNode.containerInfo);break;case 10:bh(b,b.memoizedProps.value);break;case 13:if(null!==b.memoizedState){d=b.child.childExpirationTime;if(0!==d&&d>=c)return $g(a,b,c);b=Rg(a,b,c);return null!==b?b.sibling:null}}return Rg(a,b,c)}}else xg=!1;b.expirationTime=0;switch(b.tag){case 2:d=\nb.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);a=b.pendingProps;var e=Oe(b,K.current);Qg(b,c);e=og(null,b,d,a,e,c);b.effectTag|=1;if(\"object\"===typeof e&&null!==e&&\"function\"===typeof e.render&&void 0===e.$$typeof){b.tag=1;sg();if(M(d)){var f=!0;Te(b)}else f=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;var g=d.getDerivedStateFromProps;\"function\"===typeof g&&of(b,d,g,a);e.updater=xf;b.stateNode=e;e._reactInternalFiber=b;Cf(b,d,a,c);b=Yg(null,b,d,!0,f,\nc)}else b.tag=0,S(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);f=b.pendingProps;a=mf(e);b.type=a;e=b.tag=af(a);f=P(a,f);g=void 0;switch(e){case 0:g=Ug(null,b,a,f,c);break;case 1:g=Wg(null,b,a,f,c);break;case 11:g=Pg(null,b,a,f,c);break;case 14:g=Sg(null,b,a,P(a.type,f),d,c);break;default:t(\"306\",a,\"\")}return g;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),Ug(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,\ne=b.elementType===d?e:P(d,e),Wg(a,b,d,e,c);case 3:Zg(b);d=b.updateQueue;null===d?t(\"282\"):void 0;e=b.memoizedState;e=null!==e?e.element:null;Df(b,d,b.pendingProps,null,c);d=b.memoizedState.element;if(d===e)Ng(),b=Rg(a,b,c);else{e=b.stateNode;if(e=(null===a||null===a.child)&&e.hydrate)Gg=Ie(b.stateNode.containerInfo),Fg=b,e=Hg=!0;e?(b.effectTag|=2,b.child=Jf(b,null,d,c)):(S(a,b,d,c),Ng());b=b.child}return b;case 5:return Rf(b),null===a&&Kg(b),d=b.type,e=b.pendingProps,f=null!==a?a.memoizedProps:null,\ng=e.children,Be(d,e)?g=null:null!==f&&Be(d,f)&&(b.effectTag|=16),Vg(a,b),1!==c&&b.mode&1&&e.hidden?(b.expirationTime=b.childExpirationTime=1,b=null):(S(a,b,g,c),b=b.child),b;case 6:return null===a&&Kg(b),null;case 13:return $g(a,b,c);case 4:return Pf(b,b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=If(b,null,d,c):S(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:P(d,e),Pg(a,b,d,e,c);case 7:return S(a,b,b.pendingProps,c),b.child;case 8:return S(a,b,b.pendingProps.children,\nc),b.child;case 12:return S(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;g=b.memoizedProps;f=e.value;bh(b,f);if(null!==g){var h=g.value;f=fd(h,f)?0:(\"function\"===typeof d._calculateChangedBits?d._calculateChangedBits(h,f):1073741823)|0;if(0===f){if(g.children===e.children&&!L.current){b=Rg(a,b,c);break a}}else for(h=b.child,null!==h&&(h.return=b);null!==h;){var l=h.contextDependencies;if(null!==l){g=h.child;for(var k=l.first;null!==k;){if(k.context===d&&0!==\n(k.observedBits&f)){1===h.tag&&(k=rf(c),k.tag=wf,tf(h,k));h.expirationTime<c&&(h.expirationTime=c);k=h.alternate;null!==k&&k.expirationTime<c&&(k.expirationTime=c);for(var m=h.return;null!==m;){k=m.alternate;if(m.childExpirationTime<c)m.childExpirationTime=c,null!==k&&k.childExpirationTime<c&&(k.childExpirationTime=c);else if(null!==k&&k.childExpirationTime<c)k.childExpirationTime=c;else break;m=m.return}l.expirationTime<c&&(l.expirationTime=c);break}k=k.next}}else g=10===h.tag?h.type===b.type?null:\nh.child:h.child;if(null!==g)g.return=h;else for(g=h;null!==g;){if(g===b){g=null;break}h=g.sibling;if(null!==h){h.return=g.return;g=h;break}g=g.return}h=g}}S(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,f=b.pendingProps,d=f.children,Qg(b,c),e=Af(e,f.unstable_observedBits),d=d(e),b.effectTag|=1,S(a,b,d,c),b.child;case 14:return e=b.type,f=P(e,b.pendingProps),f=P(e.type,f),Sg(a,b,e,f,d,c);case 15:return Tg(a,b,b.type,b.pendingProps,d,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===\nd?e:P(d,e),null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),b.tag=1,M(d)?(a=!0,Te(b)):a=!1,Qg(b,c),zf(b,d,e,c),Cf(b,d,e,c),Yg(null,b,d,!0,a,c);default:t(\"156\")}}var ch={current:null},dh=null,eh=null,fh=null;function bh(a,b){var c=a.type._context;J(ch,c._currentValue,a);c._currentValue=b}function gh(a){var b=ch.current;I(ch,a);a.type._context._currentValue=b}function Qg(a,b){dh=a;fh=eh=null;var c=a.contextDependencies;null!==c&&c.expirationTime>=b&&(xg=!0);a.contextDependencies=null}\nfunction Af(a,b){if(fh!==a&&!1!==b&&0!==b){if(\"number\"!==typeof b||1073741823===b)fh=a,b=1073741823;b={context:a,observedBits:b,next:null};null===eh?(null===dh?t(\"308\"):void 0,eh=b,dh.contextDependencies={first:b,expirationTime:0}):eh=eh.next=b}return a._currentValue}var hh=0,vf=1,wf=2,ih=3,Xg=!1;function jh(a){return{baseState:a,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}\nfunction kh(a){return{baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function rf(a){return{expirationTime:a,tag:hh,payload:null,callback:null,next:null,nextEffect:null}}function lh(a,b){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b)}\nfunction tf(a,b){var c=a.alternate;if(null===c){var d=a.updateQueue;var e=null;null===d&&(d=a.updateQueue=jh(a.memoizedState))}else d=a.updateQueue,e=c.updateQueue,null===d?null===e?(d=a.updateQueue=jh(a.memoizedState),e=c.updateQueue=jh(c.memoizedState)):d=a.updateQueue=kh(e):null===e&&(e=c.updateQueue=kh(d));null===e||d===e?lh(d,b):null===d.lastUpdate||null===e.lastUpdate?(lh(d,b),lh(e,b)):(lh(d,b),e.lastUpdate=b)}\nfunction mh(a,b){var c=a.updateQueue;c=null===c?a.updateQueue=jh(a.memoizedState):nh(a,c);null===c.lastCapturedUpdate?c.firstCapturedUpdate=c.lastCapturedUpdate=b:(c.lastCapturedUpdate.next=b,c.lastCapturedUpdate=b)}function nh(a,b){var c=a.alternate;null!==c&&b===c.updateQueue&&(b=a.updateQueue=kh(b));return b}\nfunction oh(a,b,c,d,e,f){switch(c.tag){case vf:return a=c.payload,\"function\"===typeof a?a.call(f,d,e):a;case ih:a.effectTag=a.effectTag&-2049|64;case hh:a=c.payload;e=\"function\"===typeof a?a.call(f,d,e):a;if(null===e||void 0===e)break;return p({},d,e);case wf:Xg=!0}return d}\nfunction Df(a,b,c,d,e){Xg=!1;b=nh(a,b);for(var f=b.baseState,g=null,h=0,l=b.firstUpdate,k=f;null!==l;){var m=l.expirationTime;m<e?(null===g&&(g=l,f=k),h<m&&(h=m)):(k=oh(a,b,l,k,c,d),null!==l.callback&&(a.effectTag|=32,l.nextEffect=null,null===b.lastEffect?b.firstEffect=b.lastEffect=l:(b.lastEffect.nextEffect=l,b.lastEffect=l)));l=l.next}m=null;for(l=b.firstCapturedUpdate;null!==l;){var q=l.expirationTime;q<e?(null===m&&(m=l,null===g&&(f=k)),h<q&&(h=q)):(k=oh(a,b,l,k,c,d),null!==l.callback&&(a.effectTag|=\n32,l.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=l:(b.lastCapturedEffect.nextEffect=l,b.lastCapturedEffect=l)));l=l.next}null===g&&(b.lastUpdate=null);null===m?b.lastCapturedUpdate=null:a.effectTag|=32;null===g&&null===m&&(f=k);b.baseState=f;b.firstUpdate=g;b.firstCapturedUpdate=m;a.expirationTime=h;a.memoizedState=k}\nfunction ph(a,b,c){null!==b.firstCapturedUpdate&&(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);qh(b.firstEffect,c);b.firstEffect=b.lastEffect=null;qh(b.firstCapturedEffect,c);b.firstCapturedEffect=b.lastCapturedEffect=null}function qh(a,b){for(;null!==a;){var c=a.callback;if(null!==c){a.callback=null;var d=b;\"function\"!==typeof c?t(\"191\",c):void 0;c.call(d)}a=a.nextEffect}}\nfunction rh(a,b){return{value:a,source:b,stack:nc(b)}}function sh(a){a.effectTag|=4}var wh=void 0,xh=void 0,yh=void 0,zh=void 0;wh=function(a,b){for(var c=b.child;null!==c;){if(5===c.tag||6===c.tag)a.appendChild(c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=c.return;c=c.sibling}};xh=function(){};\nyh=function(a,b,c,d,e){var f=a.memoizedProps;if(f!==d){var g=b.stateNode;Of(Lf.current);a=null;switch(c){case \"input\":f=zc(g,f);d=zc(g,d);a=[];break;case \"option\":f=de(g,f);d=de(g,d);a=[];break;case \"select\":f=p({},f,{value:void 0});d=p({},d,{value:void 0});a=[];break;case \"textarea\":f=fe(g,f);d=fe(g,d);a=[];break;default:\"function\"!==typeof f.onClick&&\"function\"===typeof d.onClick&&(g.onclick=xe)}ue(c,d);g=c=void 0;var h=null;for(c in f)if(!d.hasOwnProperty(c)&&f.hasOwnProperty(c)&&null!=f[c])if(\"style\"===\nc){var l=f[c];for(g in l)l.hasOwnProperty(g)&&(h||(h={}),h[g]=\"\")}else\"dangerouslySetInnerHTML\"!==c&&\"children\"!==c&&\"suppressContentEditableWarning\"!==c&&\"suppressHydrationWarning\"!==c&&\"autoFocus\"!==c&&(ta.hasOwnProperty(c)?a||(a=[]):(a=a||[]).push(c,null));for(c in d){var k=d[c];l=null!=f?f[c]:void 0;if(d.hasOwnProperty(c)&&k!==l&&(null!=k||null!=l))if(\"style\"===c)if(l){for(g in l)!l.hasOwnProperty(g)||k&&k.hasOwnProperty(g)||(h||(h={}),h[g]=\"\");for(g in k)k.hasOwnProperty(g)&&l[g]!==k[g]&&(h||\n(h={}),h[g]=k[g])}else h||(a||(a=[]),a.push(c,h)),h=k;else\"dangerouslySetInnerHTML\"===c?(k=k?k.__html:void 0,l=l?l.__html:void 0,null!=k&&l!==k&&(a=a||[]).push(c,\"\"+k)):\"children\"===c?l===k||\"string\"!==typeof k&&\"number\"!==typeof k||(a=a||[]).push(c,\"\"+k):\"suppressContentEditableWarning\"!==c&&\"suppressHydrationWarning\"!==c&&(ta.hasOwnProperty(c)?(null!=k&&we(e,c),a||l===k||(a=[])):(a=a||[]).push(c,k))}h&&(a=a||[]).push(\"style\",h);e=a;(b.updateQueue=e)&&sh(b)}};zh=function(a,b,c,d){c!==d&&sh(b)};\nvar Ah=\"function\"===typeof WeakSet?WeakSet:Set;function Bh(a,b){var c=b.source,d=b.stack;null===d&&null!==c&&(d=nc(c));null!==c&&mc(c.type);b=b.value;null!==a&&1===a.tag&&mc(a.type);try{console.error(b)}catch(e){setTimeout(function(){throw e;})}}function Ch(a){var b=a.ref;if(null!==b)if(\"function\"===typeof b)try{b(null)}catch(c){Dh(a,c)}else b.current=null}\nfunction Eh(a,b,c){c=c.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do{if((d.tag&a)!==Tf){var e=d.destroy;d.destroy=void 0;void 0!==e&&e()}(d.tag&b)!==Tf&&(e=d.create,d.destroy=e());d=d.next}while(d!==c)}}\nfunction Fh(a,b){for(var c=a;;){if(5===c.tag){var d=c.stateNode;if(b)d.style.display=\"none\";else{d=c.stateNode;var e=c.memoizedProps.style;e=void 0!==e&&null!==e&&e.hasOwnProperty(\"display\")?e.display:null;d.style.display=re(\"display\",e)}}else if(6===c.tag)c.stateNode.nodeValue=b?\"\":c.memoizedProps;else if(13===c.tag&&null!==c.memoizedState){d=c.child.sibling;d.return=c;c=d;continue}else if(null!==c.child){c.child.return=c;c=c.child;continue}if(c===a)break;for(;null===c.sibling;){if(null===c.return||\nc.return===a)return;c=c.return}c.sibling.return=c.return;c=c.sibling}}\nfunction Gh(a){\"function\"===typeof We&&We(a);switch(a.tag){case 0:case 11:case 14:case 15:var b=a.updateQueue;if(null!==b&&(b=b.lastEffect,null!==b)){var c=b=b.next;do{var d=c.destroy;if(void 0!==d){var e=a;try{d()}catch(f){Dh(e,f)}}c=c.next}while(c!==b)}break;case 1:Ch(a);b=a.stateNode;if(\"function\"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(f){Dh(a,f)}break;case 5:Ch(a);break;case 4:Hh(a)}}\nfunction Ih(a){return 5===a.tag||3===a.tag||4===a.tag}\nfunction Jh(a){a:{for(var b=a.return;null!==b;){if(Ih(b)){var c=b;break a}b=b.return}t(\"160\");c=void 0}var d=b=void 0;switch(c.tag){case 5:b=c.stateNode;d=!1;break;case 3:b=c.stateNode.containerInfo;d=!0;break;case 4:b=c.stateNode.containerInfo;d=!0;break;default:t(\"161\")}c.effectTag&16&&(oe(b,\"\"),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Ih(c.return)){c=null;break a}c=c.return}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag;){if(c.effectTag&2)continue b;\nif(null===c.child||4===c.tag)continue b;else c.child.return=c,c=c.child}if(!(c.effectTag&2)){c=c.stateNode;break a}}for(var e=a;;){if(5===e.tag||6===e.tag)if(c)if(d){var f=b,g=e.stateNode,h=c;8===f.nodeType?f.parentNode.insertBefore(g,h):f.insertBefore(g,h)}else b.insertBefore(e.stateNode,c);else d?(g=b,h=e.stateNode,8===g.nodeType?(f=g.parentNode,f.insertBefore(h,g)):(f=g,f.appendChild(h)),g=g._reactRootContainer,null!==g&&void 0!==g||null!==f.onclick||(f.onclick=xe)):b.appendChild(e.stateNode);\nelse if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break;for(;null===e.sibling;){if(null===e.return||e.return===a)return;e=e.return}e.sibling.return=e.return;e=e.sibling}}\nfunction Hh(a){for(var b=a,c=!1,d=void 0,e=void 0;;){if(!c){c=b.return;a:for(;;){null===c?t(\"160\"):void 0;switch(c.tag){case 5:d=c.stateNode;e=!1;break a;case 3:d=c.stateNode.containerInfo;e=!0;break a;case 4:d=c.stateNode.containerInfo;e=!0;break a}c=c.return}c=!0}if(5===b.tag||6===b.tag){a:for(var f=b,g=f;;)if(Gh(g),null!==g.child&&4!==g.tag)g.child.return=g,g=g.child;else{if(g===f)break;for(;null===g.sibling;){if(null===g.return||g.return===f)break a;g=g.return}g.sibling.return=g.return;g=g.sibling}e?\n(f=d,g=b.stateNode,8===f.nodeType?f.parentNode.removeChild(g):f.removeChild(g)):d.removeChild(b.stateNode)}else if(4===b.tag?(d=b.stateNode.containerInfo,e=!0):Gh(b),null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return;b=b.return;4===b.tag&&(c=!1)}b.sibling.return=b.return;b=b.sibling}}\nfunction Kh(a,b){switch(b.tag){case 0:case 11:case 14:case 15:Eh(Vf,Wf,b);break;case 1:break;case 5:var c=b.stateNode;if(null!=c){var d=b.memoizedProps;a=null!==a?a.memoizedProps:d;var e=b.type,f=b.updateQueue;b.updateQueue=null;null!==f&&Ge(c,f,e,a,d,b)}break;case 6:null===b.stateNode?t(\"162\"):void 0;b.stateNode.nodeValue=b.memoizedProps;break;case 3:break;case 12:break;case 13:c=b.memoizedState;d=void 0;a=b;null===c?d=!1:(d=!0,a=b.child,0===c.timedOutAt&&(c.timedOutAt=pf()));null!==a&&Fh(a,d);c=\nb.updateQueue;if(null!==c){b.updateQueue=null;var g=b.stateNode;null===g&&(g=b.stateNode=new Ah);c.forEach(function(a){var c=Lh.bind(null,b,a);g.has(a)||(g.add(a),a.then(c,c))})}break;case 17:break;default:t(\"163\")}}var Mh=\"function\"===typeof WeakMap?WeakMap:Map;function Nh(a,b,c){c=rf(c);c.tag=ih;c.payload={element:null};var d=b.value;c.callback=function(){Oh(d);Bh(a,b)};return c}\nfunction Ph(a,b,c){c=rf(c);c.tag=ih;var d=a.type.getDerivedStateFromError;if(\"function\"===typeof d){var e=b.value;c.payload=function(){return d(e)}}var f=a.stateNode;null!==f&&\"function\"===typeof f.componentDidCatch&&(c.callback=function(){\"function\"!==typeof d&&(null===Qh?Qh=new Set([this]):Qh.add(this));var c=b.value,e=b.stack;Bh(a,b);this.componentDidCatch(c,{componentStack:null!==e?e:\"\"})});return c}\nfunction Rh(a){switch(a.tag){case 1:M(a.type)&&Pe(a);var b=a.effectTag;return b&2048?(a.effectTag=b&-2049|64,a):null;case 3:return Qf(a),Qe(a),b=a.effectTag,0!==(b&64)?t(\"285\"):void 0,a.effectTag=b&-2049|64,a;case 5:return Sf(a),null;case 13:return b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 4:return Qf(a),null;case 10:return gh(a),null;default:return null}}\nvar Sh=Xb.ReactCurrentDispatcher,Th=Xb.ReactCurrentOwner,Uh=1073741822,Vh=0,Wh=!1,T=null,Xh=null,U=0,Yh=-1,Zh=!1,V=null,$h=!1,ai=null,bi=null,ci=null,Qh=null;function di(){if(null!==T)for(var a=T.return;null!==a;){var b=a;switch(b.tag){case 1:var c=b.type.childContextTypes;null!==c&&void 0!==c&&Pe(b);break;case 3:Qf(b);Qe(b);break;case 5:Sf(b);break;case 4:Qf(b);break;case 10:gh(b)}a=a.return}Xh=null;U=0;Yh=-1;Zh=!1;T=null}\nfunction ei(a,b){ci=bi=ai=null;var c=W;W=!0;do{if(b.effectTag&512){var d=!1,e=void 0;try{var f=b;Eh($f,Tf,f);Eh(Tf,Zf,f)}catch(g){d=!0,e=g}d&&Dh(b,e)}b=b.nextEffect}while(null!==b);W=c;c=a.expirationTime;0!==c&&fi(a,c)}function sf(){null!==bi&&Fe(bi);null!==ci&&ci()}\nfunction gi(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&1024)){T=a;a:{var e=b;b=a;var f=U;var g=b.pendingProps;switch(b.tag){case 2:break;case 16:break;case 15:case 0:break;case 1:M(b.type)&&Pe(b);break;case 3:Qf(b);Qe(b);g=b.stateNode;g.pendingContext&&(g.context=g.pendingContext,g.pendingContext=null);if(null===e||null===e.child)Mg(b),b.effectTag&=-3;xh(b);break;case 5:Sf(b);var h=Of(Nf.current);f=b.type;if(null!==e&&null!=b.stateNode)yh(e,b,f,g,h),e.ref!==b.ref&&(b.effectTag|=\n128);else if(g){var l=Of(Lf.current);if(Mg(b)){g=b;e=g.stateNode;var k=g.type,m=g.memoizedProps,q=h;e[Ha]=g;e[Ia]=m;f=void 0;h=k;switch(h){case \"iframe\":case \"object\":H(\"load\",e);break;case \"video\":case \"audio\":for(k=0;k<cb.length;k++)H(cb[k],e);break;case \"source\":H(\"error\",e);break;case \"img\":case \"image\":case \"link\":H(\"error\",e);H(\"load\",e);break;case \"form\":H(\"reset\",e);H(\"submit\",e);break;case \"details\":H(\"toggle\",e);break;case \"input\":Ac(e,m);H(\"invalid\",e);we(q,\"onChange\");break;case \"select\":e._wrapperState=\n{wasMultiple:!!m.multiple};H(\"invalid\",e);we(q,\"onChange\");break;case \"textarea\":ge(e,m),H(\"invalid\",e),we(q,\"onChange\")}ue(h,m);k=null;for(f in m)m.hasOwnProperty(f)&&(l=m[f],\"children\"===f?\"string\"===typeof l?e.textContent!==l&&(k=[\"children\",l]):\"number\"===typeof l&&e.textContent!==\"\"+l&&(k=[\"children\",\"\"+l]):ta.hasOwnProperty(f)&&null!=l&&we(q,f));switch(h){case \"input\":Vb(e);Ec(e,m,!0);break;case \"textarea\":Vb(e);ie(e,m);break;case \"select\":case \"option\":break;default:\"function\"===typeof m.onClick&&\n(e.onclick=xe)}f=k;g.updateQueue=f;g=null!==f?!0:!1;g&&sh(b)}else{m=b;e=f;q=g;k=9===h.nodeType?h:h.ownerDocument;l===je.html&&(l=ke(e));l===je.html?\"script\"===e?(e=k.createElement(\"div\"),e.innerHTML=\"<script>\\x3c/script>\",k=e.removeChild(e.firstChild)):\"string\"===typeof q.is?k=k.createElement(e,{is:q.is}):(k=k.createElement(e),\"select\"===e&&q.multiple&&(k.multiple=!0)):k=k.createElementNS(l,e);e=k;e[Ha]=m;e[Ia]=g;wh(e,b,!1,!1);q=e;k=f;m=g;var x=h,C=ve(k,m);switch(k){case \"iframe\":case \"object\":H(\"load\",\nq);h=m;break;case \"video\":case \"audio\":for(h=0;h<cb.length;h++)H(cb[h],q);h=m;break;case \"source\":H(\"error\",q);h=m;break;case \"img\":case \"image\":case \"link\":H(\"error\",q);H(\"load\",q);h=m;break;case \"form\":H(\"reset\",q);H(\"submit\",q);h=m;break;case \"details\":H(\"toggle\",q);h=m;break;case \"input\":Ac(q,m);h=zc(q,m);H(\"invalid\",q);we(x,\"onChange\");break;case \"option\":h=de(q,m);break;case \"select\":q._wrapperState={wasMultiple:!!m.multiple};h=p({},m,{value:void 0});H(\"invalid\",q);we(x,\"onChange\");break;case \"textarea\":ge(q,\nm);h=fe(q,m);H(\"invalid\",q);we(x,\"onChange\");break;default:h=m}ue(k,h);l=void 0;var w=k,E=q,v=h;for(l in v)if(v.hasOwnProperty(l)){var n=v[l];\"style\"===l?se(E,n):\"dangerouslySetInnerHTML\"===l?(n=n?n.__html:void 0,null!=n&&ne(E,n)):\"children\"===l?\"string\"===typeof n?(\"textarea\"!==w||\"\"!==n)&&oe(E,n):\"number\"===typeof n&&oe(E,\"\"+n):\"suppressContentEditableWarning\"!==l&&\"suppressHydrationWarning\"!==l&&\"autoFocus\"!==l&&(ta.hasOwnProperty(l)?null!=n&&we(x,l):null!=n&&xc(E,l,n,C))}switch(k){case \"input\":Vb(q);\nEc(q,m,!1);break;case \"textarea\":Vb(q);ie(q,m);break;case \"option\":null!=m.value&&q.setAttribute(\"value\",\"\"+yc(m.value));break;case \"select\":h=q;h.multiple=!!m.multiple;q=m.value;null!=q?ee(h,!!m.multiple,q,!1):null!=m.defaultValue&&ee(h,!!m.multiple,m.defaultValue,!0);break;default:\"function\"===typeof h.onClick&&(q.onclick=xe)}(g=Ae(f,g))&&sh(b);b.stateNode=e}null!==b.ref&&(b.effectTag|=128)}else null===b.stateNode?t(\"166\"):void 0;break;case 6:e&&null!=b.stateNode?zh(e,b,e.memoizedProps,g):(\"string\"!==\ntypeof g&&(null===b.stateNode?t(\"166\"):void 0),e=Of(Nf.current),Of(Lf.current),Mg(b)?(g=b,f=g.stateNode,e=g.memoizedProps,f[Ha]=g,(g=f.nodeValue!==e)&&sh(b)):(f=b,g=(9===e.nodeType?e:e.ownerDocument).createTextNode(g),g[Ha]=b,f.stateNode=g));break;case 11:break;case 13:g=b.memoizedState;if(0!==(b.effectTag&64)){b.expirationTime=f;T=b;break a}g=null!==g;f=null!==e&&null!==e.memoizedState;null!==e&&!g&&f&&(e=e.child.sibling,null!==e&&(h=b.firstEffect,null!==h?(b.firstEffect=e,e.nextEffect=h):(b.firstEffect=\nb.lastEffect=e,e.nextEffect=null),e.effectTag=8));if(g||f)b.effectTag|=4;break;case 7:break;case 8:break;case 12:break;case 4:Qf(b);xh(b);break;case 10:gh(b);break;case 9:break;case 14:break;case 17:M(b.type)&&Pe(b);break;default:t(\"156\")}T=null}b=a;if(1===U||1!==b.childExpirationTime){g=0;for(f=b.child;null!==f;)e=f.expirationTime,h=f.childExpirationTime,e>g&&(g=e),h>g&&(g=h),f=f.sibling;b.childExpirationTime=g}if(null!==T)return T;null!==c&&0===(c.effectTag&1024)&&(null===c.firstEffect&&(c.firstEffect=\na.firstEffect),null!==a.lastEffect&&(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1<a.effectTag&&(null!==c.lastEffect?c.lastEffect.nextEffect=a:c.firstEffect=a,c.lastEffect=a))}else{a=Rh(a,U);if(null!==a)return a.effectTag&=1023,a;null!==c&&(c.firstEffect=c.lastEffect=null,c.effectTag|=1024)}if(null!==d)return d;if(null!==c)a=c;else break}return null}\nfunction hi(a){var b=ah(a.alternate,a,U);a.memoizedProps=a.pendingProps;null===b&&(b=gi(a));Th.current=null;return b}\nfunction ii(a,b){Wh?t(\"243\"):void 0;sf();Wh=!0;var c=Sh.current;Sh.current=rg;var d=a.nextExpirationTimeToWorkOn;if(d!==U||a!==Xh||null===T)di(),Xh=a,U=d,T=bf(Xh.current,null,U),a.pendingCommitExpirationTime=0;var e=!1;do{try{if(b)for(;null!==T&&!ji();)T=hi(T);else for(;null!==T;)T=hi(T)}catch(E){if(fh=eh=dh=null,sg(),null===T)e=!0,Oh(E);else{null===T?t(\"271\"):void 0;var f=T,g=f.return;if(null===g)e=!0,Oh(E);else{a:{var h=a,l=g,k=f,m=E;g=U;k.effectTag|=1024;k.firstEffect=k.lastEffect=null;if(null!==\nm&&\"object\"===typeof m&&\"function\"===typeof m.then){var q=m;m=l;var x=-1,C=-1;do{if(13===m.tag){var w=m.alternate;if(null!==w&&(w=w.memoizedState,null!==w)){C=10*(1073741822-w.timedOutAt);break}w=m.pendingProps.maxDuration;if(\"number\"===typeof w)if(0>=w)x=0;else if(-1===x||w<x)x=w}m=m.return}while(null!==m);m=l;do{if(w=13===m.tag)w=void 0===m.memoizedProps.fallback?!1:null===m.memoizedState;if(w){l=m.updateQueue;null===l?(l=new Set,l.add(q),m.updateQueue=l):l.add(q);if(0===(m.mode&1)){m.effectTag|=\n64;k.effectTag&=-1957;1===k.tag&&(null===k.alternate?k.tag=17:(g=rf(1073741823),g.tag=wf,tf(k,g)));k.expirationTime=1073741823;break a}k=h.pingCache;null===k?(k=h.pingCache=new Mh,l=new Set,k.set(q,l)):(l=k.get(q),void 0===l&&(l=new Set,k.set(q,l)));l.has(g)||(l.add(g),k=ki.bind(null,h,q,g),q.then(k,k));-1===x?h=1073741823:(-1===C&&(C=10*(1073741822-lf(h,g))-5E3),h=C+x);0<=h&&Yh<h&&(Yh=h);m.effectTag|=2048;m.expirationTime=g;break a}m=m.return}while(null!==m);m=Error((mc(k.type)||\"A React component\")+\n\" suspended while rendering, but no fallback UI was specified.\\n\\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.\"+nc(k))}Zh=!0;m=rh(m,k);h=l;do{switch(h.tag){case 3:h.effectTag|=2048;h.expirationTime=g;g=Nh(h,m,g);mh(h,g);break a;case 1:if(q=m,x=h.type,C=h.stateNode,0===(h.effectTag&64)&&(\"function\"===typeof x.getDerivedStateFromError||null!==C&&\"function\"===typeof C.componentDidCatch&&(null===Qh||!Qh.has(C)))){h.effectTag|=2048;\nh.expirationTime=g;g=Ph(h,q,g);mh(h,g);break a}}h=h.return}while(null!==h)}T=gi(f);continue}}}break}while(1);Wh=!1;Sh.current=c;fh=eh=dh=null;sg();if(e)Xh=null,a.finishedWork=null;else if(null!==T)a.finishedWork=null;else{c=a.current.alternate;null===c?t(\"281\"):void 0;Xh=null;if(Zh){e=a.latestPendingTime;f=a.latestSuspendedTime;g=a.latestPingedTime;if(0!==e&&e<d||0!==f&&f<d||0!==g&&g<d){kf(a,d);li(a,c,d,a.expirationTime,-1);return}if(!a.didError&&b){a.didError=!0;d=a.nextExpirationTimeToWorkOn=d;\nb=a.expirationTime=1073741823;li(a,c,d,b,-1);return}}b&&-1!==Yh?(kf(a,d),b=10*(1073741822-lf(a,d)),b<Yh&&(Yh=b),b=10*(1073741822-pf()),b=Yh-b,li(a,c,d,a.expirationTime,0>b?0:b)):(a.pendingCommitExpirationTime=d,a.finishedWork=c)}}\nfunction Dh(a,b){for(var c=a.return;null!==c;){switch(c.tag){case 1:var d=c.stateNode;if(\"function\"===typeof c.type.getDerivedStateFromError||\"function\"===typeof d.componentDidCatch&&(null===Qh||!Qh.has(d))){a=rh(b,a);a=Ph(c,a,1073741823);tf(c,a);uf(c,1073741823);return}break;case 3:a=rh(b,a);a=Nh(c,a,1073741823);tf(c,a);uf(c,1073741823);return}c=c.return}3===a.tag&&(c=rh(b,a),c=Nh(a,c,1073741823),tf(a,c),uf(a,1073741823))}\nfunction qf(a,b){0!==Vh?a=Vh:Wh?a=$h?1073741823:U:b.mode&1?(a=mi?1073741822-10*(((1073741822-a+15)/10|0)+1):1073741822-25*(((1073741822-a+500)/25|0)+1),null!==Xh&&a===U&&--a):a=1073741823;mi&&(0===ni||a<ni)&&(ni=a);return a}\nfunction ki(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);if(null!==Xh&&U===c)Xh=null;else if(b=a.earliestSuspendedTime,d=a.latestSuspendedTime,0!==b&&c<=b&&c>=d){a.didError=!1;b=a.latestPingedTime;if(0===b||b>c)a.latestPingedTime=c;jf(c,a);c=a.expirationTime;0!==c&&fi(a,c)}}function Lh(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=pf();b=qf(b,a);a=oi(a,b);null!==a&&(hf(a,b),b=a.expirationTime,0!==b&&fi(a,b))}\nfunction oi(a,b){a.expirationTime<b&&(a.expirationTime=b);var c=a.alternate;null!==c&&c.expirationTime<b&&(c.expirationTime=b);var d=a.return,e=null;if(null===d&&3===a.tag)e=a.stateNode;else for(;null!==d;){c=d.alternate;d.childExpirationTime<b&&(d.childExpirationTime=b);null!==c&&c.childExpirationTime<b&&(c.childExpirationTime=b);if(null===d.return&&3===d.tag){e=d.stateNode;break}d=d.return}return e}\nfunction uf(a,b){a=oi(a,b);null!==a&&(!Wh&&0!==U&&b>U&&di(),hf(a,b),Wh&&!$h&&Xh===a||fi(a,a.expirationTime),pi>qi&&(pi=0,t(\"185\")))}function ri(a,b,c,d,e){var f=Vh;Vh=1073741823;try{return a(b,c,d,e)}finally{Vh=f}}var si=null,X=null,ti=0,ui=void 0,W=!1,vi=null,Y=0,ni=0,wi=!1,xi=null,Z=!1,yi=!1,mi=!1,zi=null,Ai=ba.unstable_now(),Bi=1073741822-(Ai/10|0),Ci=Bi,qi=50,pi=0,Di=null;function Ei(){Bi=1073741822-((ba.unstable_now()-Ai)/10|0)}\nfunction Fi(a,b){if(0!==ti){if(b<ti)return;null!==ui&&ba.unstable_cancelCallback(ui)}ti=b;a=ba.unstable_now()-Ai;ui=ba.unstable_scheduleCallback(Gi,{timeout:10*(1073741822-b)-a})}function li(a,b,c,d,e){a.expirationTime=d;0!==e||ji()?0<e&&(a.timeoutHandle=Ce(Hi.bind(null,a,b,c),e)):(a.pendingCommitExpirationTime=c,a.finishedWork=b)}function Hi(a,b,c){a.pendingCommitExpirationTime=c;a.finishedWork=b;Ei();Ci=Bi;Ii(a,c)}function pf(){if(W)return Ci;Ji();if(0===Y||1===Y)Ei(),Ci=Bi;return Ci}\nfunction fi(a,b){null===a.nextScheduledRoot?(a.expirationTime=b,null===X?(si=X=a,a.nextScheduledRoot=a):(X=X.nextScheduledRoot=a,X.nextScheduledRoot=si)):b>a.expirationTime&&(a.expirationTime=b);W||(Z?yi&&(vi=a,Y=1073741823,Ki(a,1073741823,!1)):1073741823===b?Li(1073741823,!1):Fi(a,b))}\nfunction Ji(){var a=0,b=null;if(null!==X)for(var c=X,d=si;null!==d;){var e=d.expirationTime;if(0===e){null===c||null===X?t(\"244\"):void 0;if(d===d.nextScheduledRoot){si=X=d.nextScheduledRoot=null;break}else if(d===si)si=e=d.nextScheduledRoot,X.nextScheduledRoot=e,d.nextScheduledRoot=null;else if(d===X){X=c;X.nextScheduledRoot=si;d.nextScheduledRoot=null;break}else c.nextScheduledRoot=d.nextScheduledRoot,d.nextScheduledRoot=null;d=c.nextScheduledRoot}else{e>a&&(a=e,b=d);if(d===X)break;if(1073741823===\na)break;c=d;d=d.nextScheduledRoot}}vi=b;Y=a}var Mi=!1;function ji(){return Mi?!0:ba.unstable_shouldYield()?Mi=!0:!1}function Gi(){try{if(!ji()&&null!==si){Ei();var a=si;do{var b=a.expirationTime;0!==b&&Bi<=b&&(a.nextExpirationTimeToWorkOn=Bi);a=a.nextScheduledRoot}while(a!==si)}Li(0,!0)}finally{Mi=!1}}\nfunction Li(a,b){Ji();if(b)for(Ei(),Ci=Bi;null!==vi&&0!==Y&&a<=Y&&!(Mi&&Bi>Y);)Ki(vi,Y,Bi>Y),Ji(),Ei(),Ci=Bi;else for(;null!==vi&&0!==Y&&a<=Y;)Ki(vi,Y,!1),Ji();b&&(ti=0,ui=null);0!==Y&&Fi(vi,Y);pi=0;Di=null;if(null!==zi)for(a=zi,zi=null,b=0;b<a.length;b++){var c=a[b];try{c._onComplete()}catch(d){wi||(wi=!0,xi=d)}}if(wi)throw a=xi,xi=null,wi=!1,a;}function Ii(a,b){W?t(\"253\"):void 0;vi=a;Y=b;Ki(a,b,!1);Li(1073741823,!1)}\nfunction Ki(a,b,c){W?t(\"245\"):void 0;W=!0;if(c){var d=a.finishedWork;null!==d?Oi(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,De(d)),ii(a,c),d=a.finishedWork,null!==d&&(ji()?a.finishedWork=d:Oi(a,d,b)))}else d=a.finishedWork,null!==d?Oi(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,-1!==d&&(a.timeoutHandle=-1,De(d)),ii(a,c),d=a.finishedWork,null!==d&&Oi(a,d,b));W=!1}\nfunction Oi(a,b,c){var d=a.firstBatch;if(null!==d&&d._expirationTime>=c&&(null===zi?zi=[d]:zi.push(d),d._defer)){a.finishedWork=b;a.expirationTime=0;return}a.finishedWork=null;a===Di?pi++:(Di=a,pi=0);$h=Wh=!0;a.current===b?t(\"177\"):void 0;c=a.pendingCommitExpirationTime;0===c?t(\"261\"):void 0;a.pendingCommitExpirationTime=0;d=b.expirationTime;var e=b.childExpirationTime;d=e>d?e:d;a.didError=!1;0===d?(a.earliestPendingTime=0,a.latestPendingTime=0,a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=\n0):(d<a.latestPingedTime&&(a.latestPingedTime=0),e=a.latestPendingTime,0!==e&&(e>d?a.earliestPendingTime=a.latestPendingTime=0:a.earliestPendingTime>d&&(a.earliestPendingTime=a.latestPendingTime)),e=a.earliestSuspendedTime,0===e?hf(a,d):d<a.latestSuspendedTime?(a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0,hf(a,d)):d>e&&hf(a,d));jf(0,a);Th.current=null;1<b.effectTag?null!==b.lastEffect?(b.lastEffect.nextEffect=b,d=b.firstEffect):d=b:d=b.firstEffect;ye=Hd;e=Td();if(Ud(e)){if(\"selectionStart\"in\ne)var f={start:e.selectionStart,end:e.selectionEnd};else a:{f=(f=e.ownerDocument)&&f.defaultView||window;var g=f.getSelection&&f.getSelection();if(g&&0!==g.rangeCount){f=g.anchorNode;var h=g.anchorOffset,l=g.focusNode;g=g.focusOffset;try{f.nodeType,l.nodeType}catch(ub){f=null;break a}var k=0,m=-1,q=-1,x=0,C=0,w=e,E=null;b:for(;;){for(var v;;){w!==f||0!==h&&3!==w.nodeType||(m=k+h);w!==l||0!==g&&3!==w.nodeType||(q=k+g);3===w.nodeType&&(k+=w.nodeValue.length);if(null===(v=w.firstChild))break;E=w;w=v}for(;;){if(w===\ne)break b;E===f&&++x===h&&(m=k);E===l&&++C===g&&(q=k);if(null!==(v=w.nextSibling))break;w=E;E=w.parentNode}w=v}f=-1===m||-1===q?null:{start:m,end:q}}else f=null}f=f||{start:0,end:0}}else f=null;ze={focusedElem:e,selectionRange:f};Hd=!1;for(V=d;null!==V;){e=!1;f=void 0;try{for(;null!==V;){if(V.effectTag&256)a:{var n=V.alternate;h=V;switch(h.tag){case 0:case 11:case 15:Eh(Uf,Tf,h);break a;case 1:if(h.effectTag&256&&null!==n){var u=n.memoizedProps,z=n.memoizedState,Ag=h.stateNode,Ni=Ag.getSnapshotBeforeUpdate(h.elementType===\nh.type?u:P(h.type,u),z);Ag.__reactInternalSnapshotBeforeUpdate=Ni}break a;case 3:case 5:case 6:case 4:case 17:break a;default:t(\"163\")}}V=V.nextEffect}}catch(ub){e=!0,f=ub}e&&(null===V?t(\"178\"):void 0,Dh(V,f),null!==V&&(V=V.nextEffect))}for(V=d;null!==V;){n=!1;u=void 0;try{for(;null!==V;){var y=V.effectTag;y&16&&oe(V.stateNode,\"\");if(y&128){var B=V.alternate;if(null!==B){var r=B.ref;null!==r&&(\"function\"===typeof r?r(null):r.current=null)}}switch(y&14){case 2:Jh(V);V.effectTag&=-3;break;case 6:Jh(V);\nV.effectTag&=-3;Kh(V.alternate,V);break;case 4:Kh(V.alternate,V);break;case 8:z=V;Hh(z);z.return=null;z.child=null;z.memoizedState=null;z.updateQueue=null;var O=z.alternate;null!==O&&(O.return=null,O.child=null,O.memoizedState=null,O.updateQueue=null)}V=V.nextEffect}}catch(ub){n=!0,u=ub}n&&(null===V?t(\"178\"):void 0,Dh(V,u),null!==V&&(V=V.nextEffect))}r=ze;B=Td();y=r.focusedElem;n=r.selectionRange;if(B!==y&&y&&y.ownerDocument&&Sd(y.ownerDocument.documentElement,y)){null!==n&&Ud(y)&&(B=n.start,r=n.end,\nvoid 0===r&&(r=B),\"selectionStart\"in y?(y.selectionStart=B,y.selectionEnd=Math.min(r,y.value.length)):(r=(B=y.ownerDocument||document)&&B.defaultView||window,r.getSelection&&(r=r.getSelection(),u=y.textContent.length,O=Math.min(n.start,u),n=void 0===n.end?O:Math.min(n.end,u),!r.extend&&O>n&&(u=n,n=O,O=u),u=Rd(y,O),z=Rd(y,n),u&&z&&(1!==r.rangeCount||r.anchorNode!==u.node||r.anchorOffset!==u.offset||r.focusNode!==z.node||r.focusOffset!==z.offset)&&(B=B.createRange(),B.setStart(u.node,u.offset),r.removeAllRanges(),\nO>n?(r.addRange(B),r.extend(z.node,z.offset)):(B.setEnd(z.node,z.offset),r.addRange(B))))));B=[];for(r=y;r=r.parentNode;)1===r.nodeType&&B.push({element:r,left:r.scrollLeft,top:r.scrollTop});\"function\"===typeof y.focus&&y.focus();for(y=0;y<B.length;y++)r=B[y],r.element.scrollLeft=r.left,r.element.scrollTop=r.top}ze=null;Hd=!!ye;ye=null;a.current=b;for(V=d;null!==V;){y=!1;B=void 0;try{for(r=a,O=c;null!==V;){var qa=V.effectTag;if(qa&36){var Rb=V.alternate;n=V;u=O;switch(n.tag){case 0:case 11:case 15:Eh(Xf,\nYf,n);break;case 1:var id=n.stateNode;if(n.effectTag&4)if(null===Rb)id.componentDidMount();else{var dj=n.elementType===n.type?Rb.memoizedProps:P(n.type,Rb.memoizedProps);id.componentDidUpdate(dj,Rb.memoizedState,id.__reactInternalSnapshotBeforeUpdate)}var th=n.updateQueue;null!==th&&ph(n,th,id,u);break;case 3:var uh=n.updateQueue;if(null!==uh){z=null;if(null!==n.child)switch(n.child.tag){case 5:z=n.child.stateNode;break;case 1:z=n.child.stateNode}ph(n,uh,z,u)}break;case 5:var ej=n.stateNode;null===\nRb&&n.effectTag&4&&Ae(n.type,n.memoizedProps)&&ej.focus();break;case 6:break;case 4:break;case 12:break;case 13:break;case 17:break;default:t(\"163\")}}if(qa&128){var jd=V.ref;if(null!==jd){var vh=V.stateNode;switch(V.tag){case 5:var Ne=vh;break;default:Ne=vh}\"function\"===typeof jd?jd(Ne):jd.current=Ne}}qa&512&&(ai=r);V=V.nextEffect}}catch(ub){y=!0,B=ub}y&&(null===V?t(\"178\"):void 0,Dh(V,B),null!==V&&(V=V.nextEffect))}null!==d&&null!==ai&&(qa=ei.bind(null,a,d),bi=Ee(qa),ci=qa);Wh=$h=!1;\"function\"===\ntypeof Ve&&Ve(b.stateNode);qa=b.expirationTime;b=b.childExpirationTime;b=b>qa?b:qa;0===b&&(Qh=null);a.expirationTime=b;a.finishedWork=null}function Oh(a){null===vi?t(\"246\"):void 0;vi.expirationTime=0;wi||(wi=!0,xi=a)}function Pi(a,b){var c=Z;Z=!0;try{return a(b)}finally{(Z=c)||W||Li(1073741823,!1)}}function Qi(a,b){if(Z&&!yi){yi=!0;try{return a(b)}finally{yi=!1}}return a(b)}\nfunction Ri(a,b,c){if(mi)return a(b,c);Z||W||0===ni||(Li(ni,!1),ni=0);var d=mi,e=Z;Z=mi=!0;try{return a(b,c)}finally{mi=d,(Z=e)||W||Li(1073741823,!1)}}\nfunction Si(a,b,c,d,e){var f=b.current;a:if(c){c=c._reactInternalFiber;b:{2===kd(c)&&1===c.tag?void 0:t(\"170\");var g=c;do{switch(g.tag){case 3:g=g.stateNode.context;break b;case 1:if(M(g.type)){g=g.stateNode.__reactInternalMemoizedMergedChildContext;break b}}g=g.return}while(null!==g);t(\"171\");g=void 0}if(1===c.tag){var h=c.type;if(M(h)){c=Se(c,h,g);break a}}c=g}else c=Le;null===b.context?b.context=c:b.pendingContext=c;b=e;e=rf(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);\nsf();tf(f,e);uf(f,d);return d}function Ti(a,b,c,d){var e=b.current,f=pf();e=qf(f,e);return Si(a,b,c,e,d)}function Ui(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}function Vi(a,b,c){var d=3<arguments.length&&void 0!==arguments[3]?arguments[3]:null;return{$$typeof:$b,key:null==d?null:\"\"+d,children:a,containerInfo:b,implementation:c}}\nDb=function(a,b,c){switch(b){case \"input\":Cc(a,c);b=c.name;if(\"radio\"===c.type&&null!=b){for(c=a;c.parentNode;)c=c.parentNode;c=c.querySelectorAll(\"input[name=\"+JSON.stringify(\"\"+b)+'][type=\"radio\"]');for(b=0;b<c.length;b++){var d=c[b];if(d!==a&&d.form===a.form){var e=Ma(d);e?void 0:t(\"90\");Wb(d);Cc(d,e)}}}break;case \"textarea\":he(a,c);break;case \"select\":b=c.value,null!=b&&ee(a,!!c.multiple,b,!1)}};\nfunction Wi(a){var b=1073741822-25*(((1073741822-pf()+500)/25|0)+1);b>=Uh&&(b=Uh-1);this._expirationTime=Uh=b;this._root=a;this._callbacks=this._next=null;this._hasChildren=this._didComplete=!1;this._children=null;this._defer=!0}Wi.prototype.render=function(a){this._defer?void 0:t(\"250\");this._hasChildren=!0;this._children=a;var b=this._root._internalRoot,c=this._expirationTime,d=new Xi;Si(a,b,null,c,d._onCommit);return d};\nWi.prototype.then=function(a){if(this._didComplete)a();else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};\nWi.prototype.commit=function(){var a=this._root._internalRoot,b=a.firstBatch;this._defer&&null!==b?void 0:t(\"251\");if(this._hasChildren){var c=this._expirationTime;if(b!==this){this._hasChildren&&(c=this._expirationTime=b._expirationTime,this.render(this._children));for(var d=null,e=b;e!==this;)d=e,e=e._next;null===d?t(\"251\"):void 0;d._next=e._next;this._next=b;a.firstBatch=this}this._defer=!1;Ii(a,c);b=this._next;this._next=null;b=a.firstBatch=b;null!==b&&b._hasChildren&&b.render(b._children)}else this._next=\nnull,this._defer=!1};Wi.prototype._onComplete=function(){if(!this._didComplete){this._didComplete=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++)(0,a[b])()}};function Xi(){this._callbacks=null;this._didCommit=!1;this._onCommit=this._onCommit.bind(this)}Xi.prototype.then=function(a){if(this._didCommit)a();else{var b=this._callbacks;null===b&&(b=this._callbacks=[]);b.push(a)}};\nXi.prototype._onCommit=function(){if(!this._didCommit){this._didCommit=!0;var a=this._callbacks;if(null!==a)for(var b=0;b<a.length;b++){var c=a[b];\"function\"!==typeof c?t(\"191\",c):void 0;c()}}};\nfunction Yi(a,b,c){b=N(3,null,null,b?3:0);a={current:b,containerInfo:a,pendingChildren:null,pingCache:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:-1,context:null,pendingContext:null,hydrate:c,nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null};this._internalRoot=b.stateNode=a}\nYi.prototype.render=function(a,b){var c=this._internalRoot,d=new Xi;b=void 0===b?null:b;null!==b&&d.then(b);Ti(a,c,null,d._onCommit);return d};Yi.prototype.unmount=function(a){var b=this._internalRoot,c=new Xi;a=void 0===a?null:a;null!==a&&c.then(a);Ti(null,b,null,c._onCommit);return c};Yi.prototype.legacy_renderSubtreeIntoContainer=function(a,b,c){var d=this._internalRoot,e=new Xi;c=void 0===c?null:c;null!==c&&e.then(c);Ti(b,d,a,e._onCommit);return e};\nYi.prototype.createBatch=function(){var a=new Wi(this),b=a._expirationTime,c=this._internalRoot,d=c.firstBatch;if(null===d)c.firstBatch=a,a._next=null;else{for(c=null;null!==d&&d._expirationTime>=b;)c=d,d=d._next;a._next=d;null!==c&&(c._next=a)}return a};function Zi(a){return!(!a||1!==a.nodeType&&9!==a.nodeType&&11!==a.nodeType&&(8!==a.nodeType||\" react-mount-point-unstable \"!==a.nodeValue))}Jb=Pi;Kb=Ri;Lb=function(){W||0===ni||(Li(ni,!1),ni=0)};\nfunction $i(a,b){b||(b=a?9===a.nodeType?a.documentElement:a.firstChild:null,b=!(!b||1!==b.nodeType||!b.hasAttribute(\"data-reactroot\")));if(!b)for(var c;c=a.lastChild;)a.removeChild(c);return new Yi(a,!1,b)}\nfunction aj(a,b,c,d,e){var f=c._reactRootContainer;if(f){if(\"function\"===typeof e){var g=e;e=function(){var a=Ui(f._internalRoot);g.call(a)}}null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)}else{f=c._reactRootContainer=$i(c,d);if(\"function\"===typeof e){var h=e;e=function(){var a=Ui(f._internalRoot);h.call(a)}}Qi(function(){null!=a?f.legacy_renderSubtreeIntoContainer(a,b,e):f.render(b,e)})}return Ui(f._internalRoot)}\nfunction bj(a,b){var c=2<arguments.length&&void 0!==arguments[2]?arguments[2]:null;Zi(b)?void 0:t(\"200\");return Vi(a,b,null,c)}\nvar fj={createPortal:bj,findDOMNode:function(a){if(null==a)return null;if(1===a.nodeType)return a;var b=a._reactInternalFiber;void 0===b&&(\"function\"===typeof a.render?t(\"188\"):t(\"268\",Object.keys(a)));a=nd(b);a=null===a?null:a.stateNode;return a},hydrate:function(a,b,c){Zi(b)?void 0:t(\"200\");return aj(null,a,b,!0,c)},render:function(a,b,c){Zi(b)?void 0:t(\"200\");return aj(null,a,b,!1,c)},unstable_renderSubtreeIntoContainer:function(a,b,c,d){Zi(c)?void 0:t(\"200\");null==a||void 0===a._reactInternalFiber?\nt(\"38\"):void 0;return aj(a,b,c,!1,d)},unmountComponentAtNode:function(a){Zi(a)?void 0:t(\"40\");return a._reactRootContainer?(Qi(function(){aj(null,null,a,!1,function(){a._reactRootContainer=null})}),!0):!1},unstable_createPortal:function(){return bj.apply(void 0,arguments)},unstable_batchedUpdates:Pi,unstable_interactiveUpdates:Ri,flushSync:function(a,b){W?t(\"187\"):void 0;var c=Z;Z=!0;try{return ri(a,b)}finally{Z=c,Li(1073741823,!1)}},unstable_createRoot:cj,unstable_flushControlled:function(a){var b=\nZ;Z=!0;try{ri(a)}finally{(Z=b)||W||Li(1073741823,!1)}},__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{Events:[Ka,La,Ma,Da.injectEventPluginsByName,ra,Sa,function(a){Aa(a,Ra)},Hb,Ib,Jd,Fa]}};function cj(a,b){Zi(a)?void 0:t(\"299\",\"unstable_createRoot\");return new Yi(a,!0,null!=b&&!0===b.hydrate)}\n(function(a){var b=a.findFiberByHostInstance;return Ye(p({},a,{overrideProps:null,currentDispatcherRef:Xb.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=nd(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))})({findFiberByHostInstance:Ja,bundleType:0,version:\"16.8.0\",rendererPackageName:\"react-dom\"});var gj={default:fj},hj=gj&&fj||gj;module.exports=hj.default||hj;\n\n\n//# sourceURL=webpack://editor/./node_modules/react-dom/cjs/react-dom.production.min.js?");
/***/ }),
/***/ "./node_modules/react-dom/index.js":
/*!*****************************************!*\
!*** ./node_modules/react-dom/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nfunction checkDCE() {\n /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */\n if (\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined' ||\n typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE !== 'function'\n ) {\n return;\n }\n if (false) {}\n try {\n // Verify that the code above has been dead code eliminated (DCE'd).\n __REACT_DEVTOOLS_GLOBAL_HOOK__.checkDCE(checkDCE);\n } catch (err) {\n // DevTools shouldn't crash React, no matter what.\n // We should still report in case we break this code.\n console.error(err);\n }\n}\n\nif (true) {\n // DCE check should happen before ReactDOM bundle executes so that\n // DevTools can report bad minification during injection.\n checkDCE();\n module.exports = __webpack_require__(/*! ./cjs/react-dom.production.min.js */ \"./node_modules/react-dom/cjs/react-dom.production.min.js\");\n} else {}\n\n\n//# sourceURL=webpack://editor/./node_modules/react-dom/index.js?");
/***/ }),
/***/ "./node_modules/react-is/cjs/react-is.production.min.js":
/*!**************************************************************!*\
!*** ./node_modules/react-is/cjs/react-is.production.min.js ***!
\**************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/** @license React v16.8.2\n * react-is.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nObject.defineProperty(exports,\"__esModule\",{value:!0});\nvar b=\"function\"===typeof Symbol&&Symbol.for,c=b?Symbol.for(\"react.element\"):60103,d=b?Symbol.for(\"react.portal\"):60106,e=b?Symbol.for(\"react.fragment\"):60107,f=b?Symbol.for(\"react.strict_mode\"):60108,g=b?Symbol.for(\"react.profiler\"):60114,h=b?Symbol.for(\"react.provider\"):60109,k=b?Symbol.for(\"react.context\"):60110,l=b?Symbol.for(\"react.async_mode\"):60111,m=b?Symbol.for(\"react.concurrent_mode\"):60111,n=b?Symbol.for(\"react.forward_ref\"):60112,p=b?Symbol.for(\"react.suspense\"):60113,q=b?Symbol.for(\"react.memo\"):\n60115,r=b?Symbol.for(\"react.lazy\"):60116;function t(a){if(\"object\"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case h:return a;default:return u}}case r:case q:case d:return u}}}function v(a){return t(a)===m}exports.typeOf=t;exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;\nexports.Fragment=e;exports.Lazy=r;exports.Memo=q;exports.Portal=d;exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isValidElementType=function(a){return\"string\"===typeof a||\"function\"===typeof a||a===e||a===m||a===g||a===f||a===p||\"object\"===typeof a&&null!==a&&(a.$$typeof===r||a.$$typeof===q||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n)};exports.isAsyncMode=function(a){return v(a)||t(a)===l};exports.isConcurrentMode=v;exports.isContextConsumer=function(a){return t(a)===k};\nexports.isContextProvider=function(a){return t(a)===h};exports.isElement=function(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return t(a)===n};exports.isFragment=function(a){return t(a)===e};exports.isLazy=function(a){return t(a)===r};exports.isMemo=function(a){return t(a)===q};exports.isPortal=function(a){return t(a)===d};exports.isProfiler=function(a){return t(a)===g};exports.isStrictMode=function(a){return t(a)===f};\nexports.isSuspense=function(a){return t(a)===p};\n\n\n//# sourceURL=webpack://editor/./node_modules/react-is/cjs/react-is.production.min.js?");
/***/ }),
/***/ "./node_modules/react-is/index.js":
/*!****************************************!*\
!*** ./node_modules/react-is/index.js ***!
\****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nif (true) {\n module.exports = __webpack_require__(/*! ./cjs/react-is.production.min.js */ \"./node_modules/react-is/cjs/react-is.production.min.js\");\n} else {}\n\n\n//# sourceURL=webpack://editor/./node_modules/react-is/index.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/HostConfigWithNoHydration.js":
/*!*******************************************************************!*\
!*** ./node_modules/react-konva/lib/HostConfigWithNoHydration.js ***!
\*******************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nexports.__esModule = true;\nexports.didNotFindHydratableTextInstance = exports.didNotFindHydratableInstance = exports.didNotFindHydratableContainerTextInstance = exports.didNotFindHydratableContainerInstance = exports.didNotHydrateInstance = exports.didNotHydrateContainerInstance = exports.didNotMatchHydratedTextInstance = exports.didNotMatchHydratedContainerTextInstance = exports.hydrateTextInstance = exports.hydrateInstance = exports.getFirstHydratableChild = exports.getNextHydratableSibling = exports.canHydrateTextInstance = exports.canHydrateInstance = exports.supportsHydration = undefined;\n\nvar _invariant = __webpack_require__(/*! ./invariant */ \"./node_modules/react-konva/lib/invariant.js\");\n\nvar _invariant2 = _interopRequireDefault(_invariant);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// Renderers that don't support hydration\n// can re-export everything from this module.\n\nfunction shim() {\n (0, _invariant2.default)(false, 'The current renderer does not support hyration. ' + 'This error is likely caused by a bug in React. ' + 'Please file an issue.');\n}\n\n// Hydration (when unsupported)\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n\nvar supportsHydration = exports.supportsHydration = false;\nvar canHydrateInstance = exports.canHydrateInstance = shim;\nvar canHydrateTextInstance = exports.canHydrateTextInstance = shim;\nvar getNextHydratableSibling = exports.getNextHydratableSibling = shim;\nvar getFirstHydratableChild = exports.getFirstHydratableChild = shim;\nvar hydrateInstance = exports.hydrateInstance = shim;\nvar hydrateTextInstance = exports.hydrateTextInstance = shim;\nvar didNotMatchHydratedContainerTextInstance = exports.didNotMatchHydratedContainerTextInstance = shim;\nvar didNotMatchHydratedTextInstance = exports.didNotMatchHydratedTextInstance = shim;\nvar didNotHydrateContainerInstance = exports.didNotHydrateContainerInstance = shim;\nvar didNotHydrateInstance = exports.didNotHydrateInstance = shim;\nvar didNotFindHydratableContainerInstance = exports.didNotFindHydratableContainerInstance = shim;\nvar didNotFindHydratableContainerTextInstance = exports.didNotFindHydratableContainerTextInstance = shim;\nvar didNotFindHydratableInstance = exports.didNotFindHydratableInstance = shim;\nvar didNotFindHydratableTextInstance = exports.didNotFindHydratableTextInstance = shim;\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/HostConfigWithNoHydration.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/HostConfigWithNoPersistence.js":
/*!*********************************************************************!*\
!*** ./node_modules/react-konva/lib/HostConfigWithNoPersistence.js ***!
\*********************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nexports.__esModule = true;\nexports.createHiddenTextInstance = exports.cloneUnhiddenInstance = exports.cloneHiddenInstance = exports.replaceContainerChildren = exports.finalizeContainerChildren = exports.appendChildToContainerChildSet = exports.createContainerChildSet = exports.cloneInstance = exports.supportsPersistence = undefined;\n\nvar _invariant = __webpack_require__(/*! ./invariant */ \"./node_modules/react-konva/lib/invariant.js\");\n\nvar _invariant2 = _interopRequireDefault(_invariant);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// Renderers that don't support persistence\n// can re-export everything from this module.\n\nfunction shim() {\n (0, _invariant2.default)(false, 'The current renderer does not support persistence. ' + 'This error is likely caused by a bug in React. ' + 'Please file an issue.');\n}\n\n// Persistence (when unsupported)\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * \n */\n\nvar supportsPersistence = exports.supportsPersistence = false;\nvar cloneInstance = exports.cloneInstance = shim;\nvar createContainerChildSet = exports.createContainerChildSet = shim;\nvar appendChildToContainerChildSet = exports.appendChildToContainerChildSet = shim;\nvar finalizeContainerChildren = exports.finalizeContainerChildren = shim;\nvar replaceContainerChildren = exports.replaceContainerChildren = shim;\nvar cloneHiddenInstance = exports.cloneHiddenInstance = shim;\nvar cloneUnhiddenInstance = exports.cloneUnhiddenInstance = shim;\nvar createHiddenTextInstance = exports.createHiddenTextInstance = shim;\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/HostConfigWithNoPersistence.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/ReactDOMComponentTree.js":
/*!***************************************************************!*\
!*** ./node_modules/react-konva/lib/ReactDOMComponentTree.js ***!
\***************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nexports.__esModule = true;\nexports.getClosestInstanceFromNode = getClosestInstanceFromNode;\n// from https://github.com/facebook/react/blob/87ae211ccd8d61796cfdef138d1e12fb7a74f85d/packages/shared/ReactTypeOfWork.js\nvar HostComponent = 5;\nvar HostText = 6;\n\n// adapted FROM: https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMComponentTree.js\n\nvar randomKey = Math.random().toString(36).slice(2);\nvar internalInstanceKey = '__reactInternalInstance$' + randomKey;\n\n/**\n * Given a DOM node, return the closest ReactDOMComponent or\n * ReactDOMTextComponent instance ancestor.\n */\nfunction getClosestInstanceFromNode(node) {\n if (node[internalInstanceKey]) {\n return node[internalInstanceKey];\n }\n\n while (!node[internalInstanceKey]) {\n if (node.parentNode) {\n node = node.parentNode;\n } else {\n // Top of the tree. This node must not be part of a React tree (or is\n // unmounted, potentially).\n return null;\n }\n }\n\n var inst = node[internalInstanceKey];\n if (inst.tag === HostComponent || inst.tag === HostText) {\n // In Fiber, this will always be the deepest root.\n return inst;\n }\n\n return null;\n}\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/ReactDOMComponentTree.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/ReactKonva.js":
/*!****************************************************!*\
!*** ./node_modules/react-konva/lib/ReactKonva.js ***!
\****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Based on ReactArt.js\n * Copyright (c) 2017-present Lavrenov Anton.\n * All rights reserved.\n *\n * MIT\n */\n\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar React = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\nvar Konva = __webpack_require__(/*! konva */ \"./node_modules/konva/konva.js\");\nvar ReactFiberReconciler = __webpack_require__(/*! react-reconciler */ \"./node_modules/react-reconciler/index.js\");\nvar ReactDOMComponentTree = __webpack_require__(/*! ./ReactDOMComponentTree */ \"./node_modules/react-konva/lib/ReactDOMComponentTree.js\");\nvar HostConfig = __webpack_require__(/*! ./ReactKonvaHostConfig */ \"./node_modules/react-konva/lib/ReactKonvaHostConfig.js\");\n\nvar _require = __webpack_require__(/*! ./makeUpdates */ \"./node_modules/react-konva/lib/makeUpdates.js\"),\n applyNodeProps = _require.applyNodeProps,\n toggleStrictMode = _require.toggleStrictMode;\n\nvar REACT_VERSION = '16.8.0';\n\n// export for testing\nvar __matchRectVersion = React.version === REACT_VERSION;\n\nif (!__matchRectVersion) {\n console.error('Version mismatch detected for react-konva and react. react-konva expects to have react version ' + REACT_VERSION + ', but it has version ' + React.version + '. Make sure versions are matched, otherwise, react-konva work is not guaranteed. For releases information take a look here: https://github.com/konvajs/react-konva/releases');\n}\n\nvar Stage = function (_React$Component) {\n _inherits(Stage, _React$Component);\n\n function Stage() {\n _classCallCheck(this, Stage);\n\n return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));\n }\n\n Stage.prototype.componentDidMount = function componentDidMount() {\n if (!Konva.isBrowser) {\n return;\n }\n this._stage = new Konva.Stage({\n width: this.props.width,\n height: this.props.height,\n container: this._tagRef\n });\n\n this._setRef(this._stage);\n\n applyNodeProps(this._stage, this.props);\n\n this._mountNode = KonvaRenderer.createContainer(this._stage);\n KonvaRenderer.updateContainer(this.props.children, this._mountNode, this);\n };\n\n Stage.prototype._setRef = function _setRef(value) {\n var forwardedRef = this.props.forwardedRef;\n\n if (!forwardedRef) {\n return;\n }\n if (typeof forwardedRef === 'function') {\n forwardedRef(value);\n } else {\n forwardedRef.current = value;\n }\n };\n\n Stage.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {\n if (!Konva.isBrowser) {\n return;\n }\n this._setRef(this._stage);\n applyNodeProps(this._stage, this.props, prevProps);\n\n KonvaRenderer.updateContainer(this.props.children, this._mountNode, this);\n };\n\n Stage.prototype.componentWillUnmount = function componentWillUnmount() {\n if (!Konva.isBrowser) {\n return;\n }\n this._setRef(null);\n KonvaRenderer.updateContainer(null, this._mountNode, this);\n this._stage.destroy();\n };\n\n Stage.prototype.getStage = function getStage() {\n return this._stage;\n };\n\n Stage.prototype.render = function render() {\n var _this2 = this;\n\n var props = this.props;\n\n return React.createElement('div', {\n ref: function ref(_ref) {\n return _this2._tagRef = _ref;\n },\n accessKey: props.accessKey,\n className: props.className,\n role: props.role,\n style: props.style,\n tabIndex: props.tabIndex,\n title: props.title\n });\n };\n\n return Stage;\n}(React.Component);\n\nvar KONVA_NODES = ['Layer', 'FastLayer', 'Group', 'Label', 'Rect', 'Circle', 'Ellipse', 'Wedge', 'Line', 'Sprite', 'Image', 'Text', 'TextPath', 'Star', 'Ring', 'Arc', 'Tag', 'Path', 'RegularPolygon', 'Arrow', 'Shape', 'Transformer'];\n\nvar TYPES = {};\n\nKONVA_NODES.forEach(function (nodeName) {\n TYPES[nodeName] = nodeName;\n});\n\nvar KonvaRenderer = ReactFiberReconciler(HostConfig);\n\nKonvaRenderer.injectIntoDevTools({\n findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,\n bundleType: false ? undefined : 0,\n version: React.version,\n rendererPackageName: 'react-konva',\n getInspectorDataForViewTag: function getInspectorDataForViewTag() {\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n console.log(args);\n }\n});\n\n/** API */\n\nvar StageWrap = React.forwardRef(function (props, ref) {\n return React.createElement(Stage, _extends({}, props, { forwardedRef: ref }));\n});\n\nmodule.exports = _extends({}, TYPES, {\n __matchRectVersion: __matchRectVersion,\n Stage: StageWrap,\n useStrictMode: toggleStrictMode\n});\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/ReactKonva.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/ReactKonvaHostConfig.js":
/*!**************************************************************!*\
!*** ./node_modules/react-konva/lib/ReactKonvaHostConfig.js ***!
\**************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nexports.__esModule = true;\nexports.supportsMutation = exports.isPrimaryRenderer = exports.cancelPassiveEffects = exports.schedulePassiveEffects = exports.noTimeout = exports.cancelTimeout = exports.scheduleTimeout = exports.cancelDeferredCallback = exports.shouldYield = exports.scheduleDeferredCallback = exports.now = undefined;\n\nvar _HostConfigWithNoPersistence = __webpack_require__(/*! ./HostConfigWithNoPersistence */ \"./node_modules/react-konva/lib/HostConfigWithNoPersistence.js\");\n\nObject.keys(_HostConfigWithNoPersistence).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _HostConfigWithNoPersistence[key];\n }\n });\n});\n\nvar _HostConfigWithNoHydration = __webpack_require__(/*! ./HostConfigWithNoHydration */ \"./node_modules/react-konva/lib/HostConfigWithNoHydration.js\");\n\nObject.keys(_HostConfigWithNoHydration).forEach(function (key) {\n if (key === \"default\" || key === \"__esModule\") return;\n Object.defineProperty(exports, key, {\n enumerable: true,\n get: function get() {\n return _HostConfigWithNoHydration[key];\n }\n });\n});\n\nvar _scheduler = __webpack_require__(/*! scheduler */ \"./node_modules/scheduler/index.js\");\n\nObject.defineProperty(exports, 'now', {\n enumerable: true,\n get: function get() {\n return _scheduler.unstable_now;\n }\n});\nObject.defineProperty(exports, 'scheduleDeferredCallback', {\n enumerable: true,\n get: function get() {\n return _scheduler.unstable_scheduleCallback;\n }\n});\nObject.defineProperty(exports, 'shouldYield', {\n enumerable: true,\n get: function get() {\n return _scheduler.unstable_shouldYield;\n }\n});\nObject.defineProperty(exports, 'cancelDeferredCallback', {\n enumerable: true,\n get: function get() {\n return _scheduler.unstable_cancelCallback;\n }\n});\nexports.appendInitialChild = appendInitialChild;\nexports.createInstance = createInstance;\nexports.createTextInstance = createTextInstance;\nexports.finalizeInitialChildren = finalizeInitialChildren;\nexports.getPublicInstance = getPublicInstance;\nexports.prepareForCommit = prepareForCommit;\nexports.prepareUpdate = prepareUpdate;\nexports.resetAfterCommit = resetAfterCommit;\nexports.resetTextContent = resetTextContent;\nexports.shouldDeprioritizeSubtree = shouldDeprioritizeSubtree;\nexports.getRootHostContext = getRootHostContext;\nexports.getChildHostContext = getChildHostContext;\nexports.shouldSetTextContent = shouldSetTextContent;\nexports.appendChild = appendChild;\nexports.appendChildToContainer = appendChildToContainer;\nexports.insertBefore = insertBefore;\nexports.insertInContainerBefore = insertInContainerBefore;\nexports.removeChild = removeChild;\nexports.removeChildFromContainer = removeChildFromContainer;\nexports.commitTextUpdate = commitTextUpdate;\nexports.commitMount = commitMount;\nexports.commitUpdate = commitUpdate;\nexports.hideInstance = hideInstance;\nexports.hideTextInstance = hideTextInstance;\nexports.unhideInstance = unhideInstance;\nexports.unhideTextInstance = unhideTextInstance;\n\nvar _konva = __webpack_require__(/*! konva */ \"./node_modules/konva/konva.js\");\n\nvar _konva2 = _interopRequireDefault(_konva);\n\nvar _makeUpdates = __webpack_require__(/*! ./makeUpdates */ \"./node_modules/react-konva/lib/makeUpdates.js\");\n\nvar _invariant = __webpack_require__(/*! ./invariant */ \"./node_modules/react-konva/lib/invariant.js\");\n\nvar _invariant2 = _interopRequireDefault(_invariant);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar NO_CONTEXT = {};\nvar UPDATE_SIGNAL = {};\n\n// for react-spring capability\n_konva2.default.Node.prototype._applyProps = _makeUpdates.applyNodeProps;\n\nfunction appendInitialChild(parentInstance, child) {\n if (typeof child === 'string') {\n // Noop for string children of Text (eg <Text>foo</Text>)\n (0, _invariant2.default)(false, 'Don not use plain text as child of Konva.Node. You are using text: \"%s\"', child);\n return;\n }\n\n parentInstance.add(child);\n\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction createInstance(type, props, internalInstanceHandle) {\n var NodeClass = _konva2.default[type];\n if (!NodeClass) {\n (0, _invariant2.default)(instance, 'ReactKonva does not support the type \"%s\". If you want to render DOM elements as part of canvas tree take a look into this demo: https://konvajs.github.io/docs/react/DOM_Portal.html', type);\n return;\n }\n\n var instance = new NodeClass();\n (0, _makeUpdates.applyNodeProps)(instance, props);\n\n return instance;\n}\n\nfunction createTextInstance(text, rootContainerInstance, internalInstanceHandle) {\n (0, _invariant2.default)(false, 'Text components are not supported for now in ReactKonva. You text is: \"' + text + '\"');\n}\n\nfunction finalizeInitialChildren(domElement, type, props) {\n return false;\n}\n\nfunction getPublicInstance(instance) {\n return instance;\n}\n\nfunction prepareForCommit() {\n // Noop\n}\n\nfunction prepareUpdate(domElement, type, oldProps, newProps) {\n return UPDATE_SIGNAL;\n}\n\nfunction resetAfterCommit() {\n // Noop\n}\n\nfunction resetTextContent(domElement) {\n // Noop\n}\n\nfunction shouldDeprioritizeSubtree(type, props) {\n return false;\n}\n\nfunction getRootHostContext() {\n return NO_CONTEXT;\n}\n\nfunction getChildHostContext() {\n return NO_CONTEXT;\n}\n\nvar scheduleTimeout = exports.scheduleTimeout = setTimeout;\nvar cancelTimeout = exports.cancelTimeout = clearTimeout;\nvar noTimeout = exports.noTimeout = -1;\nvar schedulePassiveEffects = exports.schedulePassiveEffects = _scheduler.unstable_scheduleCallback;\nvar cancelPassiveEffects = exports.cancelPassiveEffects = _scheduler.unstable_cancelCallback;\n\nfunction shouldSetTextContent(type, props) {\n return false;\n}\n\n// The Konva renderer is secondary to the React DOM renderer.\nvar isPrimaryRenderer = exports.isPrimaryRenderer = false;\n\nvar supportsMutation = exports.supportsMutation = true;\n\nfunction appendChild(parentInstance, child) {\n if (child.parent === parentInstance) {\n child.moveToTop();\n } else {\n parentInstance.add(child);\n }\n\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction appendChildToContainer(parentInstance, child) {\n if (child.parent === parentInstance) {\n child.moveToTop();\n } else {\n parentInstance.add(child);\n }\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction insertBefore(parentInstance, child, beforeChild) {\n (0, _invariant2.default)(child !== beforeChild, 'ReactKonva: Can not insert node before itself');\n // remove and add back to reset zIndex\n child.remove();\n parentInstance.add(child);\n child.setZIndex(beforeChild.getZIndex());\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction insertInContainerBefore(parentInstance, child, beforeChild) {\n (0, _invariant2.default)(child !== beforeChild, 'ReactKonva: Can not insert node before itself');\n // remove and add back to reset zIndex\n child.remove();\n parentInstance.add(child);\n child.setZIndex(beforeChild.getZIndex());\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction removeChild(parentInstance, child) {\n child.destroy();\n child.off(_makeUpdates.EVENTS_NAMESPACE);\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction removeChildFromContainer(parentInstance, child) {\n child.destroy();\n child.off(_makeUpdates.EVENTS_NAMESPACE);\n (0, _makeUpdates.updatePicture)(parentInstance);\n}\n\nfunction commitTextUpdate(textInstance, oldText, newText) {\n (0, _invariant2.default)(false, 'Text components are not yet supported in ReactKonva. You text is: \"' + newText + '\"');\n}\n\nfunction commitMount(instance, type, newProps) {\n // Noop\n}\n\nfunction commitUpdate(instance, updatePayload, type, oldProps, newProps) {\n (0, _makeUpdates.applyNodeProps)(instance, newProps, oldProps);\n}\n\nfunction hideInstance(instance) {\n instance.hide();\n (0, _makeUpdates.updatePicture)(instance);\n}\n\nfunction hideTextInstance(textInstance) {\n // Noop\n}\n\nfunction unhideInstance(instance, props) {\n if (props.visible == null || props.visible) {\n instance.show();\n }\n}\n\nfunction unhideTextInstance(textInstance, text) {\n // Noop\n}\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/ReactKonvaHostConfig.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/invariant.js":
/*!***************************************************!*\
!*** ./node_modules/react-konva/lib/invariant.js ***!
\***************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n *\n */\n\n\nvar validateFormat = false ? undefined : function (format) {\n if (format === undefined) {\n throw new Error('invariant(...): Second argument must be a string.');\n }\n};\n/**\n * Use invariant() to assert state which your program assumes to be true.\n *\n * Provide sprintf-style format (only %s is supported) and arguments to provide\n * information about what broke and what you were expecting.\n *\n * The invariant message will be stripped in production, but the invariant will\n * remain to ensure logic does not differ in production.\n */\n\nfunction invariant(condition, format) {\n for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {\n args[_key - 2] = arguments[_key];\n }\n\n validateFormat(format);\n\n if (!condition) {\n var error;\n\n if (format === undefined) {\n error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');\n } else {\n var argIndex = 0;\n error = new Error(format.replace(/%s/g, function () {\n return String(args[argIndex++]);\n }));\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // Skip invariant's own stack frame.\n\n throw error;\n }\n}\n\nmodule.exports = invariant;\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/invariant.js?");
/***/ }),
/***/ "./node_modules/react-konva/lib/makeUpdates.js":
/*!*****************************************************!*\
!*** ./node_modules/react-konva/lib/makeUpdates.js ***!
\*****************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nexports.__esModule = true;\nexports.toggleStrictMode = toggleStrictMode;\nexports.applyNodeProps = applyNodeProps;\nexports.updatePicture = updatePicture;\nvar propsToSkip = {\n children: true,\n ref: true,\n key: true,\n style: true,\n forwardedRef: true,\n unstable_applyCache: true,\n unstable_applyDrawHitFromCache: true\n};\nvar idWarningShowed = false;\nvar zIndexWarningShowed = false;\nvar dragWarningShowed = false;\n\nvar EVENTS_NAMESPACE = exports.EVENTS_NAMESPACE = '.react-konva-event';\n\nvar useStrictMode = false;\nfunction toggleStrictMode(value) {\n useStrictMode = value;\n}\n\nfunction applyNodeProps(instance, props) {\n var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n if (!idWarningShowed && 'id' in props) {\n var message = 'ReactKonva: You are using \"id\" attribute for a Konva node. In some very rare cases it may produce bugs. Currently we recommend not to use it and use \"name\" attribute instead.\\nYou are using id = \"' + props.id + '\".\\nFor more info see: https://github.com/konvajs/react-konva/issues/119';\n console.warn(message);\n idWarningShowed = true;\n }\n\n if (!zIndexWarningShowed && 'zIndex' in props) {\n var _message = 'ReactKonva: You are using \"zIndex\" attribute for a Konva node.\\nreact-konva may get confused with ordering. Just define correct order of elements in your render function of a component.\\nFor more info see: https://github.com/konvajs/react-konva/issues/194\\n';\n console.warn(_message);\n zIndexWarningShowed = true;\n }\n\n // show draggable warning\n if (!dragWarningShowed && props.draggable) {\n var hasPosition = props.x !== undefined || props.y !== undefined;\n var hasEvents = props.onDragEnd || props.onDragMove;\n if (hasPosition && !hasEvents) {\n var _message2 = 'ReactKonva: You have a Konva node with draggable = true and position defined but no onDragMove or onDragEnd events are handled.\\nPosition of a node will be changed during drag&drop, so you should update state of the react app as well.\\nConsider to add onDragMove or onDragEnd events.\\nFor more info see: https://github.com/konvajs/react-konva/issues/256\\n';\n console.warn(_message2);\n dragWarningShowed = true;\n }\n }\n\n for (var key in oldProps) {\n if (propsToSkip[key]) {\n continue;\n }\n var isEvent = key.slice(0, 2) === 'on';\n var propChanged = oldProps[key] !== props[key];\n if (isEvent && propChanged) {\n var eventName = key.substr(2).toLowerCase();\n if (eventName.substr(0, 7) === 'content') {\n eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);\n }\n instance.off(eventName, oldProps[key]);\n }\n var toRemove = !props.hasOwnProperty(key);\n if (toRemove) {\n instance.setAttr(key, undefined);\n }\n }\n\n var strictUpdate = useStrictMode || props._useStrictMode;\n var updatedProps = {};\n var hasUpdates = false;\n\n for (var key in props) {\n if (propsToSkip[key]) {\n continue;\n }\n var isEvent = key.slice(0, 2) === 'on';\n var toAdd = oldProps[key] !== props[key];\n if (isEvent && toAdd) {\n var eventName = key.substr(2).toLowerCase();\n if (eventName.substr(0, 7) === 'content') {\n eventName = 'content' + eventName.substr(7, 1).toUpperCase() + eventName.substr(8);\n }\n if (props[key]) {\n instance.on(eventName + EVENTS_NAMESPACE, props[key]);\n }\n }\n if (!isEvent && (props[key] !== oldProps[key] || strictUpdate && props[key] !== instance.getAttr(key))) {\n hasUpdates = true;\n updatedProps[key] = props[key];\n }\n }\n\n if (hasUpdates) {\n instance.setAttrs(updatedProps);\n updatePicture(instance);\n }\n}\n\nfunction updatePicture(node) {\n var drawingNode = node.getLayer() || node.getStage();\n drawingNode && drawingNode.batchDraw();\n}\n\n//# sourceURL=webpack://editor/./node_modules/react-konva/lib/makeUpdates.js?");
/***/ }),
/***/ "./node_modules/react-reconciler/cjs/react-reconciler.production.min.js":
/*!******************************************************************************!*\
!*** ./node_modules/react-reconciler/cjs/react-reconciler.production.min.js ***!
\******************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("/** @license React v0.19.1\n * react-reconciler.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nmodule.exports = function $$$reconciler($$$hostConfig) {\n'use strict';var aa=__webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\"),ba=__webpack_require__(/*! react */ \"./node_modules/react/index.js\");function ca(a,b,c,d,e,g,f,h){if(!a){a=void 0;if(void 0===b)a=Error(\"Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.\");else{var k=[c,d,e,g,f,h],l=0;a=Error(b.replace(/%s/g,function(){return k[l++]}));a.name=\"Invariant Violation\"}a.framesToPop=1;throw a;}}\nfunction n(a){for(var b=arguments.length-1,c=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,d=0;d<b;d++)c+=\"&args[]=\"+encodeURIComponent(arguments[d+1]);ca(!1,\"Minified React error #\"+a+\"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. \",c)}var da=ba.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;da.hasOwnProperty(\"ReactCurrentDispatcher\")||(da.ReactCurrentDispatcher={current:null});\nvar p=\"function\"===typeof Symbol&&Symbol.for,ea=p?Symbol.for(\"react.element\"):60103,fa=p?Symbol.for(\"react.portal\"):60106,ha=p?Symbol.for(\"react.fragment\"):60107,ia=p?Symbol.for(\"react.strict_mode\"):60108,ja=p?Symbol.for(\"react.profiler\"):60114,ka=p?Symbol.for(\"react.provider\"):60109,la=p?Symbol.for(\"react.context\"):60110,ma=p?Symbol.for(\"react.concurrent_mode\"):60111,na=p?Symbol.for(\"react.forward_ref\"):60112,oa=p?Symbol.for(\"react.suspense\"):60113,pa=p?Symbol.for(\"react.memo\"):60115,qa=p?Symbol.for(\"react.lazy\"):\n60116,ra=\"function\"===typeof Symbol&&Symbol.iterator;function sa(a){if(null===a||\"object\"!==typeof a)return null;a=ra&&a[ra]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nfunction ta(a){if(null==a)return null;if(\"function\"===typeof a)return a.displayName||a.name||null;if(\"string\"===typeof a)return a;switch(a){case ma:return\"ConcurrentMode\";case ha:return\"Fragment\";case fa:return\"Portal\";case ja:return\"Profiler\";case ia:return\"StrictMode\";case oa:return\"Suspense\"}if(\"object\"===typeof a)switch(a.$$typeof){case la:return\"Context.Consumer\";case ka:return\"Context.Provider\";case na:var b=a.render;b=b.displayName||b.name||\"\";return a.displayName||(\"\"!==b?\"ForwardRef(\"+b+\n\")\":\"ForwardRef\");case pa:return ta(a.type);case qa:if(a=1===a._status?a._result:null)return ta(a)}return null}function ua(a){var b=a;if(a.alternate)for(;b.return;)b=b.return;else{if(0!==(b.effectTag&2))return 1;for(;b.return;)if(b=b.return,0!==(b.effectTag&2))return 1}return 3===b.tag?2:3}function va(a){2!==ua(a)?n(\"188\"):void 0}\nfunction wa(a){var b=a.alternate;if(!b)return b=ua(a),3===b?n(\"188\"):void 0,1===b?null:a;for(var c=a,d=b;;){var e=c.return,g=e?e.alternate:null;if(!e||!g)break;if(e.child===g.child){for(var f=e.child;f;){if(f===c)return va(e),a;if(f===d)return va(e),b;f=f.sibling}n(\"188\")}if(c.return!==d.return)c=e,d=g;else{f=!1;for(var h=e.child;h;){if(h===c){f=!0;c=e;d=g;break}if(h===d){f=!0;d=e;c=g;break}h=h.sibling}if(!f){for(h=g.child;h;){if(h===c){f=!0;c=g;d=e;break}if(h===d){f=!0;d=g;c=e;break}h=h.sibling}f?\nvoid 0:n(\"189\")}}c.alternate!==d?n(\"190\"):void 0}3!==c.tag?n(\"188\"):void 0;return c.stateNode.current===c?a:b}function xa(a){a=wa(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child)b.child.return=b,b=b.child;else{if(b===a)break;for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}}return null}\nfunction ya(a){a=wa(a);if(!a)return null;for(var b=a;;){if(5===b.tag||6===b.tag)return b;if(b.child&&4!==b.tag)b.child.return=b,b=b.child;else{if(b===a)break;for(;!b.sibling;){if(!b.return||b.return===a)return null;b=b.return}b.sibling.return=b.return;b=b.sibling}}return null}\nvar za=$$$hostConfig.getPublicInstance,Aa=$$$hostConfig.getRootHostContext,Ba=$$$hostConfig.getChildHostContext,Ca=$$$hostConfig.prepareForCommit,Da=$$$hostConfig.resetAfterCommit,Ea=$$$hostConfig.createInstance,Fa=$$$hostConfig.appendInitialChild,Ga=$$$hostConfig.finalizeInitialChildren,Ha=$$$hostConfig.prepareUpdate,Ia=$$$hostConfig.shouldSetTextContent,Ja=$$$hostConfig.shouldDeprioritizeSubtree,Ka=$$$hostConfig.createTextInstance,La=$$$hostConfig.scheduleDeferredCallback,Ma=$$$hostConfig.cancelDeferredCallback,\nNa=$$$hostConfig.shouldYield,Oa=$$$hostConfig.setTimeout,Pa=$$$hostConfig.clearTimeout,Qa=$$$hostConfig.noTimeout,Ra=$$$hostConfig.schedulePassiveEffects,Sa=$$$hostConfig.cancelPassiveEffects,Ta=$$$hostConfig.now,Ua=$$$hostConfig.isPrimaryRenderer,Va=$$$hostConfig.supportsMutation,Wa=$$$hostConfig.supportsPersistence,Xa=$$$hostConfig.supportsHydration,Ya=$$$hostConfig.appendChild,Za=$$$hostConfig.appendChildToContainer,$a=$$$hostConfig.commitTextUpdate,ab=$$$hostConfig.commitMount,bb=$$$hostConfig.commitUpdate,\ncb=$$$hostConfig.insertBefore,db=$$$hostConfig.insertInContainerBefore,eb=$$$hostConfig.removeChild,fb=$$$hostConfig.removeChildFromContainer,hb=$$$hostConfig.resetTextContent,ib=$$$hostConfig.hideInstance,jb=$$$hostConfig.hideTextInstance,kb=$$$hostConfig.unhideInstance,lb=$$$hostConfig.unhideTextInstance,mb=$$$hostConfig.cloneInstance,nb=$$$hostConfig.createContainerChildSet,ob=$$$hostConfig.appendChildToContainerChildSet,pb=$$$hostConfig.finalizeContainerChildren,qb=$$$hostConfig.replaceContainerChildren,\nrb=$$$hostConfig.cloneHiddenInstance,sb=$$$hostConfig.cloneUnhiddenInstance,tb=$$$hostConfig.createHiddenTextInstance,ub=$$$hostConfig.canHydrateInstance,vb=$$$hostConfig.canHydrateTextInstance,wb=$$$hostConfig.getNextHydratableSibling,xb=$$$hostConfig.getFirstHydratableChild,yb=$$$hostConfig.hydrateInstance,zb=$$$hostConfig.hydrateTextInstance,Ab=/^(.*)[\\\\\\/]/;\nfunction Bb(a){var b=\"\";do{a:switch(a.tag){case 3:case 4:case 6:case 7:case 10:case 9:var c=\"\";break a;default:var d=a._debugOwner,e=a._debugSource,g=ta(a.type);c=null;d&&(c=ta(d.type));d=g;g=\"\";e?g=\" (at \"+e.fileName.replace(Ab,\"\")+\":\"+e.lineNumber+\")\":c&&(g=\" (created by \"+c+\")\");c=\"\\n in \"+(d||\"Unknown\")+g}b+=c;a=a.return}while(a);return b}new Set;var Cb=[],Db=-1;function z(a){0>Db||(a.current=Cb[Db],Cb[Db]=null,Db--)}function A(a,b){Db++;Cb[Db]=a.current;a.current=b}\nvar Eb={},B={current:Eb},C={current:!1},Fb=Eb;function Gb(a,b){var c=a.type.contextTypes;if(!c)return Eb;var d=a.stateNode;if(d&&d.__reactInternalMemoizedUnmaskedChildContext===b)return d.__reactInternalMemoizedMaskedChildContext;var e={},g;for(g in c)e[g]=b[g];d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=b,a.__reactInternalMemoizedMaskedChildContext=e);return e}function D(a){a=a.childContextTypes;return null!==a&&void 0!==a}function Hb(a){z(C,a);z(B,a)}\nfunction Ib(a){z(C,a);z(B,a)}function Jb(a,b,c){B.current!==Eb?n(\"168\"):void 0;A(B,b,a);A(C,c,a)}function Kb(a,b,c){var d=a.stateNode;a=b.childContextTypes;if(\"function\"!==typeof d.getChildContext)return c;d=d.getChildContext();for(var e in d)e in a?void 0:n(\"108\",ta(b)||\"Unknown\",e);return aa({},c,d)}function Lb(a){var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||Eb;Fb=B.current;A(B,b,a);A(C,C.current,a);return!0}\nfunction Mb(a,b,c){var d=a.stateNode;d?void 0:n(\"169\");c?(b=Kb(a,b,Fb),d.__reactInternalMemoizedMergedChildContext=b,z(C,a),z(B,a),A(B,b,a)):z(C,a);A(C,c,a)}var Ob=null,Pb=null;function Qb(a){return function(b){try{return a(b)}catch(c){}}}\nfunction Rb(a){if(\"undefined\"===typeof __REACT_DEVTOOLS_GLOBAL_HOOK__)return!1;var b=__REACT_DEVTOOLS_GLOBAL_HOOK__;if(b.isDisabled||!b.supportsFiber)return!0;try{var c=b.inject(a);Ob=Qb(function(a){return b.onCommitFiberRoot(c,a)});Pb=Qb(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}\nfunction Sb(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=this.elementType=null;this.index=0;this.ref=null;this.pendingProps=b;this.contextDependencies=this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.childExpirationTime=this.expirationTime=0;this.alternate=null}function E(a,b,c,d){return new Sb(a,b,c,d)}\nfunction Tb(a){a=a.prototype;return!(!a||!a.isReactComponent)}function Ub(a){if(\"function\"===typeof a)return Tb(a)?1:0;if(void 0!==a&&null!==a){a=a.$$typeof;if(a===na)return 11;if(a===pa)return 14}return 2}\nfunction Vb(a,b){var c=a.alternate;null===c?(c=E(a.tag,b,a.key,a.mode),c.elementType=a.elementType,c.type=a.type,c.stateNode=a.stateNode,c.alternate=a,a.alternate=c):(c.pendingProps=b,c.effectTag=0,c.nextEffect=null,c.firstEffect=null,c.lastEffect=null);c.childExpirationTime=a.childExpirationTime;c.expirationTime=a.expirationTime;c.child=a.child;c.memoizedProps=a.memoizedProps;c.memoizedState=a.memoizedState;c.updateQueue=a.updateQueue;c.contextDependencies=a.contextDependencies;c.sibling=a.sibling;\nc.index=a.index;c.ref=a.ref;return c}\nfunction Wb(a,b,c,d,e,g){var f=2;d=a;if(\"function\"===typeof a)Tb(a)&&(f=1);else if(\"string\"===typeof a)f=5;else a:switch(a){case ha:return Xb(c.children,e,g,b);case ma:return Yb(c,e|3,g,b);case ia:return Yb(c,e|2,g,b);case ja:return a=E(12,c,b,e|4),a.elementType=ja,a.type=ja,a.expirationTime=g,a;case oa:return a=E(13,c,b,e),a.elementType=oa,a.type=oa,a.expirationTime=g,a;default:if(\"object\"===typeof a&&null!==a)switch(a.$$typeof){case ka:f=10;break a;case la:f=9;break a;case na:f=11;break a;case pa:f=\n14;break a;case qa:f=16;d=null;break a}n(\"130\",null==a?a:typeof a,\"\")}b=E(f,c,b,e);b.elementType=a;b.type=d;b.expirationTime=g;return b}function Xb(a,b,c,d){a=E(7,a,d,b);a.expirationTime=c;return a}function Yb(a,b,c,d){a=E(8,a,d,b);b=0===(b&1)?ia:ma;a.elementType=b;a.type=b;a.expirationTime=c;return a}function Zb(a,b,c){a=E(6,a,null,b);a.expirationTime=c;return a}\nfunction $b(a,b,c){b=E(4,null!==a.children?a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}function ac(a,b){a.didError=!1;var c=a.earliestPendingTime;0===c?a.earliestPendingTime=a.latestPendingTime=b:c<b?a.earliestPendingTime=b:a.latestPendingTime>b&&(a.latestPendingTime=b);bc(b,a)}\nfunction cc(a,b){a.didError=!1;a.latestPingedTime>=b&&(a.latestPingedTime=0);var c=a.earliestPendingTime,d=a.latestPendingTime;c===b?a.earliestPendingTime=d===b?a.latestPendingTime=0:d:d===b&&(a.latestPendingTime=c);c=a.earliestSuspendedTime;d=a.latestSuspendedTime;0===c?a.earliestSuspendedTime=a.latestSuspendedTime=b:c<b?a.earliestSuspendedTime=b:d>b&&(a.latestSuspendedTime=b);bc(b,a)}function dc(a,b){var c=a.earliestPendingTime;a=a.earliestSuspendedTime;c>b&&(b=c);a>b&&(b=a);return b}\nfunction bc(a,b){var c=b.earliestSuspendedTime,d=b.latestSuspendedTime,e=b.earliestPendingTime,g=b.latestPingedTime;e=0!==e?e:g;0===e&&(0===a||d<a)&&(e=d);a=e;0!==a&&c>a&&(a=c);b.nextExpirationTimeToWorkOn=e;b.expirationTime=a}function ec(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var fc=Object.prototype.hasOwnProperty;\nfunction gc(a,b){if(ec(a,b))return!0;if(\"object\"!==typeof a||null===a||\"object\"!==typeof b||null===b)return!1;var c=Object.keys(a),d=Object.keys(b);if(c.length!==d.length)return!1;for(d=0;d<c.length;d++)if(!fc.call(b,c[d])||!ec(a[c[d]],b[c[d]]))return!1;return!0}function F(a,b){if(a&&a.defaultProps){b=aa({},b);a=a.defaultProps;for(var c in a)void 0===b[c]&&(b[c]=a[c])}return b}\nfunction hc(a){var b=a._result;switch(a._status){case 1:return b;case 2:throw b;case 0:throw b;default:a._status=0;b=a._ctor;b=b();b.then(function(b){0===a._status&&(b=b.default,a._status=1,a._result=b)},function(b){0===a._status&&(a._status=2,a._result=b)});switch(a._status){case 1:return a._result;case 2:throw a._result;}a._result=b;throw b;}}var ic=(new ba.Component).refs;\nfunction jc(a,b,c,d){b=a.memoizedState;c=c(d,b);c=null===c||void 0===c?b:aa({},b,c);a.memoizedState=c;d=a.updateQueue;null!==d&&0===a.expirationTime&&(d.baseState=c)}\nvar rc={isMounted:function(a){return(a=a._reactInternalFiber)?2===ua(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=G();d=kc(d,a);var e=lc(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);mc();nc(a,e);oc(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=G();d=kc(d,a);var e=lc(d);e.tag=pc;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);mc();nc(a,e);oc(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=G();c=kc(c,a);var d=lc(c);d.tag=\nqc;void 0!==b&&null!==b&&(d.callback=b);mc();nc(a,d);oc(a,c)}};function sc(a,b,c,d,e,g,f){a=a.stateNode;return\"function\"===typeof a.shouldComponentUpdate?a.shouldComponentUpdate(d,g,f):b.prototype&&b.prototype.isPureReactComponent?!gc(c,d)||!gc(e,g):!0}\nfunction tc(a,b,c){var d=!1,e=Eb;var g=b.contextType;\"object\"===typeof g&&null!==g?g=H(g):(e=D(b)?Fb:B.current,d=b.contextTypes,g=(d=null!==d&&void 0!==d)?Gb(a,e):Eb);b=new b(c,g);a.memoizedState=null!==b.state&&void 0!==b.state?b.state:null;b.updater=rc;a.stateNode=b;b._reactInternalFiber=a;d&&(a=a.stateNode,a.__reactInternalMemoizedUnmaskedChildContext=e,a.__reactInternalMemoizedMaskedChildContext=g);return b}\nfunction uc(a,b,c,d){a=b.state;\"function\"===typeof b.componentWillReceiveProps&&b.componentWillReceiveProps(c,d);\"function\"===typeof b.UNSAFE_componentWillReceiveProps&&b.UNSAFE_componentWillReceiveProps(c,d);b.state!==a&&rc.enqueueReplaceState(b,b.state,null)}\nfunction vc(a,b,c,d){var e=a.stateNode;e.props=c;e.state=a.memoizedState;e.refs=ic;var g=b.contextType;\"object\"===typeof g&&null!==g?e.context=H(g):(g=D(b)?Fb:B.current,e.context=Gb(a,g));g=a.updateQueue;null!==g&&(wc(a,g,c,e,d),e.state=a.memoizedState);g=b.getDerivedStateFromProps;\"function\"===typeof g&&(jc(a,b,g,c),e.state=a.memoizedState);\"function\"===typeof b.getDerivedStateFromProps||\"function\"===typeof e.getSnapshotBeforeUpdate||\"function\"!==typeof e.UNSAFE_componentWillMount&&\"function\"!==\ntypeof e.componentWillMount||(b=e.state,\"function\"===typeof e.componentWillMount&&e.componentWillMount(),\"function\"===typeof e.UNSAFE_componentWillMount&&e.UNSAFE_componentWillMount(),b!==e.state&&rc.enqueueReplaceState(e,e.state,null),g=a.updateQueue,null!==g&&(wc(a,g,c,e,d),e.state=a.memoizedState));\"function\"===typeof e.componentDidMount&&(a.effectTag|=4)}var xc=Array.isArray;\nfunction yc(a,b,c){a=c.ref;if(null!==a&&\"function\"!==typeof a&&\"object\"!==typeof a){if(c._owner){c=c._owner;var d=void 0;c&&(1!==c.tag?n(\"309\"):void 0,d=c.stateNode);d?void 0:n(\"147\",a);var e=\"\"+a;if(null!==b&&null!==b.ref&&\"function\"===typeof b.ref&&b.ref._stringRef===e)return b.ref;b=function(b){var a=d.refs;a===ic&&(a=d.refs={});null===b?delete a[e]:a[e]=b};b._stringRef=e;return b}\"string\"!==typeof a?n(\"284\"):void 0;c._owner?void 0:n(\"290\",a)}return a}\nfunction zc(a,b){\"textarea\"!==a.type&&n(\"31\",\"[object Object]\"===Object.prototype.toString.call(b)?\"object with keys {\"+Object.keys(b).join(\", \")+\"}\":b,\"\")}\nfunction Ac(a){function b(b,c){if(a){var d=b.lastEffect;null!==d?(d.nextEffect=c,b.lastEffect=c):b.firstEffect=b.lastEffect=c;c.nextEffect=null;c.effectTag=8}}function c(c,d){if(!a)return null;for(;null!==d;)b(c,d),d=d.sibling;return null}function d(b,a){for(b=new Map;null!==a;)null!==a.key?b.set(a.key,a):b.set(a.index,a),a=a.sibling;return b}function e(b,a,c){b=Vb(b,a,c);b.index=0;b.sibling=null;return b}function g(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,d<c?(b.effectTag=\n2,c):d;b.effectTag=2;return c}function f(b){a&&null===b.alternate&&(b.effectTag=2);return b}function h(b,a,c,d){if(null===a||6!==a.tag)return a=Zb(c,b.mode,d),a.return=b,a;a=e(a,c,d);a.return=b;return a}function k(b,a,c,d){if(null!==a&&a.elementType===c.type)return d=e(a,c.props,d),d.ref=yc(b,a,c),d.return=b,d;d=Wb(c.type,c.key,c.props,null,b.mode,d);d.ref=yc(b,a,c);d.return=b;return d}function l(b,a,c,d){if(null===a||4!==a.tag||a.stateNode.containerInfo!==c.containerInfo||a.stateNode.implementation!==\nc.implementation)return a=$b(c,b.mode,d),a.return=b,a;a=e(a,c.children||[],d);a.return=b;return a}function m(b,a,c,d,f){if(null===a||7!==a.tag)return a=Xb(c,b.mode,d,f),a.return=b,a;a=e(a,c,d);a.return=b;return a}function w(b,a,c){if(\"string\"===typeof a||\"number\"===typeof a)return a=Zb(\"\"+a,b.mode,c),a.return=b,a;if(\"object\"===typeof a&&null!==a){switch(a.$$typeof){case ea:return c=Wb(a.type,a.key,a.props,null,b.mode,c),c.ref=yc(b,null,a),c.return=b,c;case fa:return a=$b(a,b.mode,c),a.return=b,a}if(xc(a)||\nsa(a))return a=Xb(a,b.mode,c,null),a.return=b,a;zc(b,a)}return null}function u(b,a,c,d){var e=null!==a?a.key:null;if(\"string\"===typeof c||\"number\"===typeof c)return null!==e?null:h(b,a,\"\"+c,d);if(\"object\"===typeof c&&null!==c){switch(c.$$typeof){case ea:return c.key===e?c.type===ha?m(b,a,c.props.children,d,e):k(b,a,c,d):null;case fa:return c.key===e?l(b,a,c,d):null}if(xc(c)||sa(c))return null!==e?null:m(b,a,c,d,null);zc(b,c)}return null}function x(b,a,c,d,e){if(\"string\"===typeof d||\"number\"===typeof d)return b=\nb.get(c)||null,h(a,b,\"\"+d,e);if(\"object\"===typeof d&&null!==d){switch(d.$$typeof){case ea:return b=b.get(null===d.key?c:d.key)||null,d.type===ha?m(a,b,d.props.children,e,d.key):k(a,b,d,e);case fa:return b=b.get(null===d.key?c:d.key)||null,l(a,b,d,e)}if(xc(d)||sa(d))return b=b.get(c)||null,m(a,b,d,e,null);zc(a,d)}return null}function v(e,f,h,l){for(var k=null,m=null,q=f,t=f=0,y=null;null!==q&&t<h.length;t++){q.index>t?(y=q,q=null):y=q.sibling;var r=u(e,q,h[t],l);if(null===r){null===q&&(q=y);break}a&&\nq&&null===r.alternate&&b(e,q);f=g(r,f,t);null===m?k=r:m.sibling=r;m=r;q=y}if(t===h.length)return c(e,q),k;if(null===q){for(;t<h.length;t++)if(q=w(e,h[t],l))f=g(q,f,t),null===m?k=q:m.sibling=q,m=q;return k}for(q=d(e,q);t<h.length;t++)if(y=x(q,e,t,h[t],l))a&&null!==y.alternate&&q.delete(null===y.key?t:y.key),f=g(y,f,t),null===m?k=y:m.sibling=y,m=y;a&&q.forEach(function(a){return b(e,a)});return k}function L(e,f,h,l){var k=sa(h);\"function\"!==typeof k?n(\"150\"):void 0;h=k.call(h);null==h?n(\"151\"):void 0;\nfor(var m=k=null,q=f,t=f=0,y=null,r=h.next();null!==q&&!r.done;t++,r=h.next()){q.index>t?(y=q,q=null):y=q.sibling;var v=u(e,q,r.value,l);if(null===v){q||(q=y);break}a&&q&&null===v.alternate&&b(e,q);f=g(v,f,t);null===m?k=v:m.sibling=v;m=v;q=y}if(r.done)return c(e,q),k;if(null===q){for(;!r.done;t++,r=h.next())r=w(e,r.value,l),null!==r&&(f=g(r,f,t),null===m?k=r:m.sibling=r,m=r);return k}for(q=d(e,q);!r.done;t++,r=h.next())r=x(q,e,t,r.value,l),null!==r&&(a&&null!==r.alternate&&q.delete(null===r.key?t:\nr.key),f=g(r,f,t),null===m?k=r:m.sibling=r,m=r);a&&q.forEach(function(a){return b(e,a)});return k}return function(a,d,g,h){var k=\"object\"===typeof g&&null!==g&&g.type===ha&&null===g.key;k&&(g=g.props.children);var l=\"object\"===typeof g&&null!==g;if(l)switch(g.$$typeof){case ea:a:{l=g.key;for(k=d;null!==k;){if(k.key===l)if(7===k.tag?g.type===ha:k.elementType===g.type){c(a,k.sibling);d=e(k,g.type===ha?g.props.children:g.props,h);d.ref=yc(a,k,g);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);k=\nk.sibling}g.type===ha?(d=Xb(g.props.children,a.mode,h,g.key),d.return=a,a=d):(h=Wb(g.type,g.key,g.props,null,a.mode,h),h.ref=yc(a,d,g),h.return=a,a=h)}return f(a);case fa:a:{for(k=g.key;null!==d;){if(d.key===k)if(4===d.tag&&d.stateNode.containerInfo===g.containerInfo&&d.stateNode.implementation===g.implementation){c(a,d.sibling);d=e(d,g.children||[],h);d.return=a;a=d;break a}else{c(a,d);break}else b(a,d);d=d.sibling}d=$b(g,a.mode,h);d.return=a;a=d}return f(a)}if(\"string\"===typeof g||\"number\"===typeof g)return g=\n\"\"+g,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,g,h),d.return=a,a=d):(c(a,d),d=Zb(g,a.mode,h),d.return=a,a=d),f(a);if(xc(g))return v(a,d,g,h);if(sa(g))return L(a,d,g,h);l&&zc(a,g);if(\"undefined\"===typeof g&&!k)switch(a.tag){case 1:case 0:h=a.type,n(\"152\",h.displayName||h.name||\"Component\")}return c(a,d)}}var Bc=Ac(!0),Cc=Ac(!1),Dc={},Ec={current:Dc},Fc={current:Dc},Gc={current:Dc};function Hc(a){a===Dc?n(\"174\"):void 0;return a}\nfunction Ic(a,b){A(Gc,b,a);A(Fc,a,a);A(Ec,Dc,a);b=Aa(b);z(Ec,a);A(Ec,b,a)}function Jc(a){z(Ec,a);z(Fc,a);z(Gc,a)}function Kc(){return Hc(Ec.current)}function Lc(a){var b=Hc(Gc.current),c=Hc(Ec.current);b=Ba(c,a.type,b);c!==b&&(A(Fc,a,a),A(Ec,b,a))}function Mc(a){Fc.current===a&&(z(Ec,a),z(Fc,a))}var Nc=0,Oc=2,Pc=4,Qc=8,Rc=16,Sc=32,Tc=64,Uc=128,Vc=da.ReactCurrentDispatcher,Wc=0,Xc=null,I=null,J=null,Yc=null,K=null,Zc=null,$c=0,M=null,ad=0,bd=!1,cd=null,dd=0;function N(){n(\"307\")}\nfunction ed(a,b){if(null===b)return!1;for(var c=0;c<b.length&&c<a.length;c++)if(!ec(a[c],b[c]))return!1;return!0}\nfunction fd(a,b,c,d,e,g){Wc=g;Xc=b;J=null!==a?a.memoizedState:null;Vc.current=null===J?gd:hd;b=c(d,e);if(bd){do bd=!1,dd+=1,J=null!==a?a.memoizedState:null,Zc=Yc,M=K=I=null,Vc.current=hd,b=c(d,e);while(bd);cd=null;dd=0}Vc.current=id;a=Xc;a.memoizedState=Yc;a.expirationTime=$c;a.updateQueue=M;a.effectTag|=ad;a=null!==I&&null!==I.next;Wc=0;Zc=K=Yc=J=I=Xc=null;$c=0;M=null;ad=0;a?n(\"300\"):void 0;return b}function jd(){Vc.current=id;Wc=0;Zc=K=Yc=J=I=Xc=null;$c=0;M=null;ad=0;bd=!1;cd=null;dd=0}\nfunction kd(){var a={memoizedState:null,baseState:null,queue:null,baseUpdate:null,next:null};null===K?Yc=K=a:K=K.next=a;return K}function ld(){if(null!==Zc)K=Zc,Zc=K.next,I=J,J=null!==I?I.next:null;else{null===J?n(\"310\"):void 0;I=J;var a={memoizedState:I.memoizedState,baseState:I.baseState,queue:I.queue,baseUpdate:I.baseUpdate,next:null};K=null===K?Yc=a:K.next=a;J=I.next}return K}function md(a,b){return\"function\"===typeof b?b(a):b}\nfunction nd(a){var b=ld(),c=b.queue;null===c?n(\"311\"):void 0;if(0<dd){var d=c.dispatch;if(null!==cd){var e=cd.get(c);if(void 0!==e){cd.delete(c);var g=b.memoizedState;do g=a(g,e.action),e=e.next;while(null!==e);ec(g,b.memoizedState)||(od=!0);b.memoizedState=g;b.baseUpdate===c.last&&(b.baseState=g);return[g,d]}}return[b.memoizedState,d]}d=c.last;var f=b.baseUpdate;g=b.baseState;null!==f?(null!==d&&(d.next=null),d=f.next):d=null!==d?d.next:null;if(null!==d){var h=e=null,k=d,l=!1;do{var m=k.expirationTime;\nm<Wc?(l||(l=!0,h=f,e=g),m>$c&&($c=m)):g=k.eagerReducer===a?k.eagerState:a(g,k.action);f=k;k=k.next}while(null!==k&&k!==d);l||(h=f,e=g);ec(g,b.memoizedState)||(od=!0);b.memoizedState=g;b.baseUpdate=h;b.baseState=e;c.eagerReducer=a;c.eagerState=g}return[b.memoizedState,c.dispatch]}\nfunction pd(a,b,c,d){a={tag:a,create:b,destroy:c,deps:d,next:null};null===M?(M={lastEffect:null},M.lastEffect=a.next=a):(b=M.lastEffect,null===b?M.lastEffect=a.next=a:(c=b.next,b.next=a,a.next=c,M.lastEffect=a));return a}function qd(a,b,c,d){var e=kd();ad|=a;e.memoizedState=pd(b,c,void 0,void 0===d?null:d)}\nfunction rd(a,b,c,d){var e=ld();d=void 0===d?null:d;var g=void 0;if(null!==I){var f=I.memoizedState;g=f.destroy;if(null!==d&&ed(d,f.deps)){pd(Nc,c,g,d);return}}ad|=a;e.memoizedState=pd(b,c,g,d)}function sd(a,b){if(\"function\"===typeof b)return a=a(),b(a),function(){b(null)};if(null!==b&&void 0!==b)return a=a(),b.current=a,function(){b.current=null}}function td(){}\nfunction ud(a,b,c){25>dd?void 0:n(\"301\");var d=a.alternate;if(a===Xc||null!==d&&d===Xc)if(bd=!0,a={expirationTime:Wc,action:c,eagerReducer:null,eagerState:null,next:null},null===cd&&(cd=new Map),c=cd.get(b),void 0===c)cd.set(b,a);else{for(b=c;null!==b.next;)b=b.next;b.next=a}else{mc();var e=G();e=kc(e,a);var g={expirationTime:e,action:c,eagerReducer:null,eagerState:null,next:null},f=b.last;if(null===f)g.next=g;else{var h=f.next;null!==h&&(g.next=h);f.next=g}b.last=g;if(0===a.expirationTime&&(null===\nd||0===d.expirationTime)&&(d=b.eagerReducer,null!==d))try{var k=b.eagerState,l=d(k,c);g.eagerReducer=d;g.eagerState=l;if(ec(l,k))return}catch(m){}finally{}oc(a,e)}}\nvar id={readContext:H,useCallback:N,useContext:N,useEffect:N,useImperativeHandle:N,useLayoutEffect:N,useMemo:N,useReducer:N,useRef:N,useState:N,useDebugValue:N},gd={readContext:H,useCallback:function(a,b){kd().memoizedState=[a,void 0===b?null:b];return a},useContext:H,useEffect:function(a,b){return qd(516,Uc|Tc,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return qd(4,Pc|Sc,sd.bind(null,b,a),c)},useLayoutEffect:function(a,b){return qd(4,Pc|Sc,a,b)},useMemo:function(a,\nb){var c=kd();b=void 0===b?null:b;a=a();c.memoizedState=[a,b];return a},useReducer:function(a,b,c){var d=kd();b=void 0!==c?c(b):b;d.memoizedState=d.baseState=b;a=d.queue={last:null,dispatch:null,eagerReducer:a,eagerState:b};a=a.dispatch=ud.bind(null,Xc,a);return[d.memoizedState,a]},useRef:function(a){var b=kd();a={current:a};return b.memoizedState=a},useState:function(a){var b=kd();\"function\"===typeof a&&(a=a());b.memoizedState=b.baseState=a;a=b.queue={last:null,dispatch:null,eagerReducer:md,eagerState:a};\na=a.dispatch=ud.bind(null,Xc,a);return[b.memoizedState,a]},useDebugValue:td},hd={readContext:H,useCallback:function(a,b){var c=ld();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&ed(b,d[1]))return d[0];c.memoizedState=[a,b];return a},useContext:H,useEffect:function(a,b){return rd(516,Uc|Tc,a,b)},useImperativeHandle:function(a,b,c){c=null!==c&&void 0!==c?c.concat([a]):[a];return rd(4,Pc|Sc,sd.bind(null,b,a),c)},useLayoutEffect:function(a,b){return rd(4,Pc|Sc,a,b)},useMemo:function(a,\nb){var c=ld();b=void 0===b?null:b;var d=c.memoizedState;if(null!==d&&null!==b&&ed(b,d[1]))return d[0];a=a();c.memoizedState=[a,b];return a},useReducer:nd,useRef:function(){return ld().memoizedState},useState:function(a){return nd(md,a)},useDebugValue:td},vd=null,wd=null,xd=!1;function yd(a,b){var c=E(5,null,null,0);c.elementType=\"DELETED\";c.type=\"DELETED\";c.stateNode=b;c.return=a;c.effectTag=8;null!==a.lastEffect?(a.lastEffect.nextEffect=c,a.lastEffect=c):a.firstEffect=a.lastEffect=c}\nfunction zd(a,b){switch(a.tag){case 5:return b=ub(b,a.type,a.pendingProps),null!==b?(a.stateNode=b,!0):!1;case 6:return b=vb(b,a.pendingProps),null!==b?(a.stateNode=b,!0):!1;default:return!1}}function Ad(a){if(xd){var b=wd;if(b){var c=b;if(!zd(a,b)){b=wb(c);if(!b||!zd(a,b)){a.effectTag|=2;xd=!1;vd=a;return}yd(vd,c)}vd=a;wd=xb(b)}else a.effectTag|=2,xd=!1,vd=a}}function Bd(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag;)a=a.return;vd=a}\nfunction Cd(a){if(!Xa||a!==vd)return!1;if(!xd)return Bd(a),xd=!0,!1;var b=a.type;if(5!==a.tag||\"head\"!==b&&\"body\"!==b&&!Ia(b,a.memoizedProps))for(b=wd;b;)yd(a,b),b=wb(b);Bd(a);wd=vd?wb(a.stateNode):null;return!0}function Dd(){Xa&&(wd=vd=null,xd=!1)}var Ed=da.ReactCurrentOwner,od=!1;function O(a,b,c,d){b.child=null===a?Cc(b,null,c,d):Bc(b,a.child,c,d)}\nfunction Fd(a,b,c,d,e){c=c.render;var g=b.ref;Gd(b,e);d=fd(a,b,c,d,g,e);if(null!==a&&!od)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),Kd(a,b,e);b.effectTag|=1;O(a,b,d,e);return b.child}\nfunction Ld(a,b,c,d,e,g){if(null===a){var f=c.type;if(\"function\"===typeof f&&!Tb(f)&&void 0===f.defaultProps&&null===c.compare&&void 0===c.defaultProps)return b.tag=15,b.type=f,Md(a,b,f,d,e,g);a=Wb(c.type,null,d,null,b.mode,g);a.ref=b.ref;a.return=b;return b.child=a}f=a.child;if(e<g&&(e=f.memoizedProps,c=c.compare,c=null!==c?c:gc,c(e,d)&&a.ref===b.ref))return Kd(a,b,g);b.effectTag|=1;a=Vb(f,d,g);a.ref=b.ref;a.return=b;return b.child=a}\nfunction Md(a,b,c,d,e,g){return null!==a&&gc(a.memoizedProps,d)&&a.ref===b.ref&&(od=!1,e<g)?Kd(a,b,g):Nd(a,b,c,d,g)}function Od(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}function Nd(a,b,c,d,e){var g=D(c)?Fb:B.current;g=Gb(b,g);Gd(b,e);c=fd(a,b,c,d,g,e);if(null!==a&&!od)return b.updateQueue=a.updateQueue,b.effectTag&=-517,a.expirationTime<=e&&(a.expirationTime=0),Kd(a,b,e);b.effectTag|=1;O(a,b,c,e);return b.child}\nfunction Pd(a,b,c,d,e){if(D(c)){var g=!0;Lb(b)}else g=!1;Gd(b,e);if(null===b.stateNode)null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),tc(b,c,d,e),vc(b,c,d,e),d=!0;else if(null===a){var f=b.stateNode,h=b.memoizedProps;f.props=h;var k=f.context,l=c.contextType;\"object\"===typeof l&&null!==l?l=H(l):(l=D(c)?Fb:B.current,l=Gb(b,l));var m=c.getDerivedStateFromProps,w=\"function\"===typeof m||\"function\"===typeof f.getSnapshotBeforeUpdate;w||\"function\"!==typeof f.UNSAFE_componentWillReceiveProps&&\n\"function\"!==typeof f.componentWillReceiveProps||(h!==d||k!==l)&&uc(b,f,d,l);Qd=!1;var u=b.memoizedState;k=f.state=u;var x=b.updateQueue;null!==x&&(wc(b,x,d,f,e),k=b.memoizedState);h!==d||u!==k||C.current||Qd?(\"function\"===typeof m&&(jc(b,c,m,d),k=b.memoizedState),(h=Qd||sc(b,c,h,d,u,k,l))?(w||\"function\"!==typeof f.UNSAFE_componentWillMount&&\"function\"!==typeof f.componentWillMount||(\"function\"===typeof f.componentWillMount&&f.componentWillMount(),\"function\"===typeof f.UNSAFE_componentWillMount&&\nf.UNSAFE_componentWillMount()),\"function\"===typeof f.componentDidMount&&(b.effectTag|=4)):(\"function\"===typeof f.componentDidMount&&(b.effectTag|=4),b.memoizedProps=d,b.memoizedState=k),f.props=d,f.state=k,f.context=l,d=h):(\"function\"===typeof f.componentDidMount&&(b.effectTag|=4),d=!1)}else f=b.stateNode,h=b.memoizedProps,f.props=b.type===b.elementType?h:F(b.type,h),k=f.context,l=c.contextType,\"object\"===typeof l&&null!==l?l=H(l):(l=D(c)?Fb:B.current,l=Gb(b,l)),m=c.getDerivedStateFromProps,(w=\"function\"===\ntypeof m||\"function\"===typeof f.getSnapshotBeforeUpdate)||\"function\"!==typeof f.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof f.componentWillReceiveProps||(h!==d||k!==l)&&uc(b,f,d,l),Qd=!1,k=b.memoizedState,u=f.state=k,x=b.updateQueue,null!==x&&(wc(b,x,d,f,e),u=b.memoizedState),h!==d||k!==u||C.current||Qd?(\"function\"===typeof m&&(jc(b,c,m,d),u=b.memoizedState),(m=Qd||sc(b,c,h,d,k,u,l))?(w||\"function\"!==typeof f.UNSAFE_componentWillUpdate&&\"function\"!==typeof f.componentWillUpdate||(\"function\"===\ntypeof f.componentWillUpdate&&f.componentWillUpdate(d,u,l),\"function\"===typeof f.UNSAFE_componentWillUpdate&&f.UNSAFE_componentWillUpdate(d,u,l)),\"function\"===typeof f.componentDidUpdate&&(b.effectTag|=4),\"function\"===typeof f.getSnapshotBeforeUpdate&&(b.effectTag|=256)):(\"function\"!==typeof f.componentDidUpdate||h===a.memoizedProps&&k===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof f.getSnapshotBeforeUpdate||h===a.memoizedProps&&k===a.memoizedState||(b.effectTag|=256),b.memoizedProps=d,b.memoizedState=\nu),f.props=d,f.state=u,f.context=l,d=m):(\"function\"!==typeof f.componentDidUpdate||h===a.memoizedProps&&k===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof f.getSnapshotBeforeUpdate||h===a.memoizedProps&&k===a.memoizedState||(b.effectTag|=256),d=!1);return Rd(a,b,c,d,g,e)}\nfunction Rd(a,b,c,d,e,g){Od(a,b);var f=0!==(b.effectTag&64);if(!d&&!f)return e&&Mb(b,c,!1),Kd(a,b,g);d=b.stateNode;Ed.current=b;var h=f&&\"function\"!==typeof c.getDerivedStateFromError?null:d.render();b.effectTag|=1;null!==a&&f?(b.child=Bc(b,a.child,null,g),b.child=Bc(b,null,h,g)):O(a,b,h,g);b.memoizedState=d.state;e&&Mb(b,c,!0);return b.child}function Sd(a){var b=a.stateNode;b.pendingContext?Jb(a,b.pendingContext,b.pendingContext!==b.context):b.context&&Jb(a,b.context,!1);Ic(a,b.containerInfo)}\nfunction Td(a,b,c){var d=b.mode,e=b.pendingProps,g=b.memoizedState;if(0===(b.effectTag&64)){g=null;var f=!1}else g={timedOutAt:null!==g?g.timedOutAt:0},f=!0,b.effectTag&=-65;if(null===a)if(f){var h=e.fallback;a=Xb(null,d,0,null);0===(b.mode&1)&&(a.child=null!==b.memoizedState?b.child.child:b.child);d=Xb(h,d,c,null);a.sibling=d;c=a;c.return=d.return=b}else c=d=Cc(b,null,e.children,c);else null!==a.memoizedState?(d=a.child,h=d.sibling,f?(c=e.fallback,e=Vb(d,d.pendingProps,0),0===(b.mode&1)&&(f=null!==\nb.memoizedState?b.child.child:b.child,f!==d.child&&(e.child=f)),d=e.sibling=Vb(h,c,h.expirationTime),c=e,e.childExpirationTime=0,c.return=d.return=b):c=d=Bc(b,d.child,e.children,c)):(h=a.child,f?(f=e.fallback,e=Xb(null,d,0,null),e.child=h,0===(b.mode&1)&&(e.child=null!==b.memoizedState?b.child.child:b.child),d=e.sibling=Xb(f,d,c,null),d.effectTag|=2,c=e,e.childExpirationTime=0,c.return=d.return=b):d=c=Bc(b,h,e.children,c)),b.stateNode=a.stateNode;b.memoizedState=g;b.child=c;return d}\nfunction Kd(a,b,c){null!==a&&(b.contextDependencies=a.contextDependencies);if(b.childExpirationTime<c)return null;null!==a&&b.child!==a.child?n(\"153\"):void 0;if(null!==b.child){a=b.child;c=Vb(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=Vb(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}\nfunction Ud(a,b,c){var d=b.expirationTime;if(null!==a)if(a.memoizedProps!==b.pendingProps||C.current)od=!0;else{if(d<c){od=!1;switch(b.tag){case 3:Sd(b);Dd();break;case 5:Lc(b);break;case 1:D(b.type)&&Lb(b);break;case 4:Ic(b,b.stateNode.containerInfo);break;case 10:Vd(b,b.memoizedProps.value);break;case 13:if(null!==b.memoizedState){d=b.child.childExpirationTime;if(0!==d&&d>=c)return Td(a,b,c);b=Kd(a,b,c);return null!==b?b.sibling:null}}return Kd(a,b,c)}}else od=!1;b.expirationTime=0;switch(b.tag){case 2:d=\nb.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);a=b.pendingProps;var e=Gb(b,B.current);Gd(b,c);e=fd(null,b,d,a,e,c);b.effectTag|=1;if(\"object\"===typeof e&&null!==e&&\"function\"===typeof e.render&&void 0===e.$$typeof){b.tag=1;jd();if(D(d)){var g=!0;Lb(b)}else g=!1;b.memoizedState=null!==e.state&&void 0!==e.state?e.state:null;var f=d.getDerivedStateFromProps;\"function\"===typeof f&&jc(b,d,f,a);e.updater=rc;b.stateNode=e;e._reactInternalFiber=b;vc(b,d,a,c);b=Rd(null,b,d,!0,g,\nc)}else b.tag=0,O(null,b,e,c),b=b.child;return b;case 16:e=b.elementType;null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2);g=b.pendingProps;a=hc(e);b.type=a;e=b.tag=Ub(a);g=F(a,g);f=void 0;switch(e){case 0:f=Nd(null,b,a,g,c);break;case 1:f=Pd(null,b,a,g,c);break;case 11:f=Fd(null,b,a,g,c);break;case 14:f=Ld(null,b,a,F(a.type,g),d,c);break;default:n(\"306\",a,\"\")}return f;case 0:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:F(d,e),Nd(a,b,d,e,c);case 1:return d=b.type,e=b.pendingProps,\ne=b.elementType===d?e:F(d,e),Pd(a,b,d,e,c);case 3:Sd(b);d=b.updateQueue;null===d?n(\"282\"):void 0;e=b.memoizedState;e=null!==e?e.element:null;wc(b,d,b.pendingProps,null,c);d=b.memoizedState.element;if(d===e)Dd(),b=Kd(a,b,c);else{e=b.stateNode;if(e=(null===a||null===a.child)&&e.hydrate)Xa?(wd=xb(b.stateNode.containerInfo),vd=b,e=xd=!0):e=!1;e?(b.effectTag|=2,b.child=Cc(b,null,d,c)):(O(a,b,d,c),Dd());b=b.child}return b;case 5:return Lc(b),null===a&&Ad(b),d=b.type,e=b.pendingProps,g=null!==a?a.memoizedProps:\nnull,f=e.children,Ia(d,e)?f=null:null!==g&&Ia(d,g)&&(b.effectTag|=16),Od(a,b),1!==c&&b.mode&1&&Ja(d,e)?(b.expirationTime=b.childExpirationTime=1,b=null):(O(a,b,f,c),b=b.child),b;case 6:return null===a&&Ad(b),null;case 13:return Td(a,b,c);case 4:return Ic(b,b.stateNode.containerInfo),d=b.pendingProps,null===a?b.child=Bc(b,null,d,c):O(a,b,d,c),b.child;case 11:return d=b.type,e=b.pendingProps,e=b.elementType===d?e:F(d,e),Fd(a,b,d,e,c);case 7:return O(a,b,b.pendingProps,c),b.child;case 8:return O(a,b,\nb.pendingProps.children,c),b.child;case 12:return O(a,b,b.pendingProps.children,c),b.child;case 10:a:{d=b.type._context;e=b.pendingProps;f=b.memoizedProps;g=e.value;Vd(b,g);if(null!==f){var h=f.value;g=ec(h,g)?0:(\"function\"===typeof d._calculateChangedBits?d._calculateChangedBits(h,g):1073741823)|0;if(0===g){if(f.children===e.children&&!C.current){b=Kd(a,b,c);break a}}else for(h=b.child,null!==h&&(h.return=b);null!==h;){var k=h.contextDependencies;if(null!==k){f=h.child;for(var l=k.first;null!==l;){if(l.context===\nd&&0!==(l.observedBits&g)){1===h.tag&&(l=lc(c),l.tag=qc,nc(h,l));h.expirationTime<c&&(h.expirationTime=c);l=h.alternate;null!==l&&l.expirationTime<c&&(l.expirationTime=c);for(var m=h.return;null!==m;){l=m.alternate;if(m.childExpirationTime<c)m.childExpirationTime=c,null!==l&&l.childExpirationTime<c&&(l.childExpirationTime=c);else if(null!==l&&l.childExpirationTime<c)l.childExpirationTime=c;else break;m=m.return}k.expirationTime<c&&(k.expirationTime=c);break}l=l.next}}else f=10===h.tag?h.type===b.type?\nnull:h.child:h.child;if(null!==f)f.return=h;else for(f=h;null!==f;){if(f===b){f=null;break}h=f.sibling;if(null!==h){h.return=f.return;f=h;break}f=f.return}h=f}}O(a,b,e.children,c);b=b.child}return b;case 9:return e=b.type,g=b.pendingProps,d=g.children,Gd(b,c),e=H(e,g.unstable_observedBits),d=d(e),b.effectTag|=1,O(a,b,d,c),b.child;case 14:return e=b.type,g=F(e,b.pendingProps),g=F(e.type,g),Ld(a,b,e,g,d,c);case 15:return Md(a,b,b.type,b.pendingProps,d,c);case 17:return d=b.type,e=b.pendingProps,e=b.elementType===\nd?e:F(d,e),null!==a&&(a.alternate=null,b.alternate=null,b.effectTag|=2),b.tag=1,D(d)?(a=!0,Lb(b)):a=!1,Gd(b,c),tc(b,d,e,c),vc(b,d,e,c),Rd(null,b,d,!0,a,c);default:n(\"156\")}}var Wd={current:null},Xd=null,Yd=null,Zd=null;function Vd(a,b){var c=a.type._context;Ua?(A(Wd,c._currentValue,a),c._currentValue=b):(A(Wd,c._currentValue2,a),c._currentValue2=b)}function $d(a){var b=Wd.current;z(Wd,a);a=a.type._context;Ua?a._currentValue=b:a._currentValue2=b}\nfunction Gd(a,b){Xd=a;Zd=Yd=null;var c=a.contextDependencies;null!==c&&c.expirationTime>=b&&(od=!0);a.contextDependencies=null}function H(a,b){if(Zd!==a&&!1!==b&&0!==b){if(\"number\"!==typeof b||1073741823===b)Zd=a,b=1073741823;b={context:a,observedBits:b,next:null};null===Yd?(null===Xd?n(\"308\"):void 0,Yd=b,Xd.contextDependencies={first:b,expirationTime:0}):Yd=Yd.next=b}return Ua?a._currentValue:a._currentValue2}var ae=0,pc=1,qc=2,be=3,Qd=!1;\nfunction ce(a){return{baseState:a,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function de(a){return{baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}\nfunction lc(a){return{expirationTime:a,tag:ae,payload:null,callback:null,next:null,nextEffect:null}}function ee(a,b){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b)}\nfunction nc(a,b){var c=a.alternate;if(null===c){var d=a.updateQueue;var e=null;null===d&&(d=a.updateQueue=ce(a.memoizedState))}else d=a.updateQueue,e=c.updateQueue,null===d?null===e?(d=a.updateQueue=ce(a.memoizedState),e=c.updateQueue=ce(c.memoizedState)):d=a.updateQueue=de(e):null===e&&(e=c.updateQueue=de(d));null===e||d===e?ee(d,b):null===d.lastUpdate||null===e.lastUpdate?(ee(d,b),ee(e,b)):(ee(d,b),e.lastUpdate=b)}\nfunction fe(a,b){var c=a.updateQueue;c=null===c?a.updateQueue=ce(a.memoizedState):ge(a,c);null===c.lastCapturedUpdate?c.firstCapturedUpdate=c.lastCapturedUpdate=b:(c.lastCapturedUpdate.next=b,c.lastCapturedUpdate=b)}function ge(a,b){var c=a.alternate;null!==c&&b===c.updateQueue&&(b=a.updateQueue=de(b));return b}\nfunction he(a,b,c,d,e,g){switch(c.tag){case pc:return a=c.payload,\"function\"===typeof a?a.call(g,d,e):a;case be:a.effectTag=a.effectTag&-2049|64;case ae:a=c.payload;e=\"function\"===typeof a?a.call(g,d,e):a;if(null===e||void 0===e)break;return aa({},d,e);case qc:Qd=!0}return d}\nfunction wc(a,b,c,d,e){Qd=!1;b=ge(a,b);for(var g=b.baseState,f=null,h=0,k=b.firstUpdate,l=g;null!==k;){var m=k.expirationTime;m<e?(null===f&&(f=k,g=l),h<m&&(h=m)):(l=he(a,b,k,l,c,d),null!==k.callback&&(a.effectTag|=32,k.nextEffect=null,null===b.lastEffect?b.firstEffect=b.lastEffect=k:(b.lastEffect.nextEffect=k,b.lastEffect=k)));k=k.next}m=null;for(k=b.firstCapturedUpdate;null!==k;){var w=k.expirationTime;w<e?(null===m&&(m=k,null===f&&(g=l)),h<w&&(h=w)):(l=he(a,b,k,l,c,d),null!==k.callback&&(a.effectTag|=\n32,k.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=k:(b.lastCapturedEffect.nextEffect=k,b.lastCapturedEffect=k)));k=k.next}null===f&&(b.lastUpdate=null);null===m?b.lastCapturedUpdate=null:a.effectTag|=32;null===f&&null===m&&(g=l);b.baseState=g;b.firstUpdate=f;b.firstCapturedUpdate=m;a.expirationTime=h;a.memoizedState=l}\nfunction ie(a,b,c){null!==b.firstCapturedUpdate&&(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);je(b.firstEffect,c);b.firstEffect=b.lastEffect=null;je(b.firstCapturedEffect,c);b.firstCapturedEffect=b.lastCapturedEffect=null}function je(a,b){for(;null!==a;){var c=a.callback;if(null!==c){a.callback=null;var d=b;\"function\"!==typeof c?n(\"191\",c):void 0;c.call(d)}a=a.nextEffect}}\nfunction ke(a,b){return{value:a,source:b,stack:Bb(b)}}function le(a){a.effectTag|=4}var me=void 0,ne=void 0,oe=void 0,pe=void 0;\nif(Va)me=function(a,b){for(var c=b.child;null!==c;){if(5===c.tag||6===c.tag)Fa(a,c.stateNode);else if(4!==c.tag&&null!==c.child){c.child.return=c;c=c.child;continue}if(c===b)break;for(;null===c.sibling;){if(null===c.return||c.return===b)return;c=c.return}c.sibling.return=c.return;c=c.sibling}},ne=function(){},oe=function(a,b,c,d,e){a=a.memoizedProps;if(a!==d){var g=b.stateNode,f=Kc();c=Ha(g,c,a,d,e,f);(b.updateQueue=c)&&le(b)}},pe=function(a,b,c,d){c!==d&&le(b)};else if(Wa){me=function(a,b,c,d){for(var e=\nb.child;null!==e;){a:if(5===e.tag){var g=e.stateNode;if(c){var f=e.memoizedProps,h=e.type;g=d?rb(g,h,f,e):sb(g,h,f,e);e.stateNode=g}Fa(a,g)}else if(6===e.tag)g=e.stateNode,c&&(g=e.memoizedProps,f=Hc(Gc.current),h=Kc(),g=d?tb(g,f,h,b):Ka(g,f,h,b),e.stateNode=g),Fa(a,g);else if(4!==e.tag){if(13===e.tag&&(f=e.alternate,null!==f&&(g=null!==e.memoizedState,null!==f.memoizedState!==g))){f=g?e.child:e;null!==f&&me(a,f,!0,g);break a}if(null!==e.child){e.child.return=e;e=e.child;continue}}if(e===b)break;for(;null===\ne.sibling;){if(null===e.return||e.return===b)return;e=e.return}e.sibling.return=e.return;e=e.sibling}};var qe=function(a,b,c,d){for(var e=b.child;null!==e;){a:if(5===e.tag){var g=e.stateNode;if(c){var f=e.memoizedProps,h=e.type;g=d?rb(g,h,f,e):sb(g,h,f,e);e.stateNode=g}ob(a,g)}else if(6===e.tag)g=e.stateNode,c&&(g=e.memoizedProps,f=Hc(Gc.current),h=Kc(),g=d?tb(g,f,h,b):Ka(g,f,h,b),e.stateNode=g),ob(a,g);else if(4!==e.tag){if(13===e.tag&&(f=e.alternate,null!==f&&(g=null!==e.memoizedState,null!==f.memoizedState!==\ng))){f=g?e.child:e;null!==f&&qe(a,f,!0,g);break a}if(null!==e.child){e.child.return=e;e=e.child;continue}}if(e===b)break;for(;null===e.sibling;){if(null===e.return||e.return===b)return;e=e.return}e.sibling.return=e.return;e=e.sibling}};ne=function(a){var b=a.stateNode;if(null!==a.firstEffect){var c=b.containerInfo,d=nb(c);qe(d,a,!1,!1);b.pendingChildren=d;le(a);pb(c,d)}};oe=function(a,b,c,d,e){var g=a.stateNode,f=a.memoizedProps;if((a=null===b.firstEffect)&&f===d)b.stateNode=g;else{var h=b.stateNode,\nk=Kc(),l=null;f!==d&&(l=Ha(h,c,f,d,e,k));a&&null===l?b.stateNode=g:(g=mb(g,l,c,f,d,b,a,h),Ga(g,c,d,e,k)&&le(b),b.stateNode=g,a?le(b):me(g,b,!1,!1))}};pe=function(a,b,c,d){c!==d&&(a=Hc(Gc.current),c=Kc(),b.stateNode=Ka(d,a,c,b),le(b))}}else ne=function(){},oe=function(){},pe=function(){};var re=\"function\"===typeof WeakSet?WeakSet:Set;\nfunction se(a,b){var c=b.source,d=b.stack;null===d&&null!==c&&(d=Bb(c));null!==c&&ta(c.type);b=b.value;null!==a&&1===a.tag&&ta(a.type);try{console.error(b)}catch(e){setTimeout(function(){throw e;})}}function te(a){var b=a.ref;if(null!==b)if(\"function\"===typeof b)try{b(null)}catch(c){ue(a,c)}else b.current=null}\nfunction ve(a,b,c){c=c.updateQueue;c=null!==c?c.lastEffect:null;if(null!==c){var d=c=c.next;do{if((d.tag&a)!==Nc){var e=d.destroy;d.destroy=void 0;void 0!==e&&e()}(d.tag&b)!==Nc&&(e=d.create,d.destroy=e());d=d.next}while(d!==c)}}\nfunction we(a,b){if(Va)for(var c=a;;){if(5===c.tag){var d=c.stateNode;b?ib(d):kb(c.stateNode,c.memoizedProps)}else if(6===c.tag)d=c.stateNode,b?jb(d):lb(d,c.memoizedProps);else if(13===c.tag&&null!==c.memoizedState){d=c.child.sibling;d.return=c;c=d;continue}else if(null!==c.child){c.child.return=c;c=c.child;continue}if(c===a)break;for(;null===c.sibling;){if(null===c.return||c.return===a)return;c=c.return}c.sibling.return=c.return;c=c.sibling}}\nfunction xe(a){\"function\"===typeof Pb&&Pb(a);switch(a.tag){case 0:case 11:case 14:case 15:var b=a.updateQueue;if(null!==b&&(b=b.lastEffect,null!==b)){var c=b=b.next;do{var d=c.destroy;if(void 0!==d){var e=a;try{d()}catch(g){ue(e,g)}}c=c.next}while(c!==b)}break;case 1:te(a);b=a.stateNode;if(\"function\"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(g){ue(a,g)}break;case 5:te(a);break;case 4:Va?ye(a):Wa&&Wa&&(a=a.stateNode.containerInfo,\nb=nb(a),qb(a,b))}}function ze(a){for(var b=a;;)if(xe(b),null===b.child||Va&&4===b.tag){if(b===a)break;for(;null===b.sibling;){if(null===b.return||b.return===a)return;b=b.return}b.sibling.return=b.return;b=b.sibling}else b.child.return=b,b=b.child}function Ae(a){if(Wa)switch(a.tag){case 1:break;case 5:break;case 6:break;case 3:case 4:a=a.stateNode;qb(a.containerInfo,a.pendingChildren);break;default:n(\"163\")}}function Be(a){return 5===a.tag||3===a.tag||4===a.tag}\nfunction Ce(a){if(Va){a:{for(var b=a.return;null!==b;){if(Be(b)){var c=b;break a}b=b.return}n(\"160\");c=void 0}var d=b=void 0;switch(c.tag){case 5:b=c.stateNode;d=!1;break;case 3:b=c.stateNode.containerInfo;d=!0;break;case 4:b=c.stateNode.containerInfo;d=!0;break;default:n(\"161\")}c.effectTag&16&&(hb(b),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Be(c.return)){c=null;break a}c=c.return}c.sibling.return=c.return;for(c=c.sibling;5!==c.tag&&6!==c.tag;){if(c.effectTag&2)continue b;\nif(null===c.child||4===c.tag)continue b;else c.child.return=c,c=c.child}if(!(c.effectTag&2)){c=c.stateNode;break a}}for(var e=a;;){if(5===e.tag||6===e.tag)c?d?db(b,e.stateNode,c):cb(b,e.stateNode,c):d?Za(b,e.stateNode):Ya(b,e.stateNode);else if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break;for(;null===e.sibling;){if(null===e.return||e.return===a)return;e=e.return}e.sibling.return=e.return;e=e.sibling}}}\nfunction ye(a){for(var b=a,c=!1,d=void 0,e=void 0;;){if(!c){c=b.return;a:for(;;){null===c?n(\"160\"):void 0;switch(c.tag){case 5:d=c.stateNode;e=!1;break a;case 3:d=c.stateNode.containerInfo;e=!0;break a;case 4:d=c.stateNode.containerInfo;e=!0;break a}c=c.return}c=!0}if(5===b.tag||6===b.tag)ze(b),e?fb(d,b.stateNode):eb(d,b.stateNode);else if(4===b.tag?(d=b.stateNode.containerInfo,e=!0):xe(b),null!==b.child){b.child.return=b;b=b.child;continue}if(b===a)break;for(;null===b.sibling;){if(null===b.return||\nb.return===a)return;b=b.return;4===b.tag&&(c=!1)}b.sibling.return=b.return;b=b.sibling}}\nfunction De(a,b){if(Va)switch(b.tag){case 0:case 11:case 14:case 15:ve(Pc,Qc,b);break;case 1:break;case 5:var c=b.stateNode;if(null!=c){var d=b.memoizedProps;a=null!==a?a.memoizedProps:d;var e=b.type,g=b.updateQueue;b.updateQueue=null;null!==g&&bb(c,g,e,a,d,b)}break;case 6:null===b.stateNode?n(\"162\"):void 0;c=b.memoizedProps;$a(b.stateNode,null!==a?a.memoizedProps:c,c);break;case 3:break;case 12:break;case 13:c=b.memoizedState;d=void 0;a=b;null===c?d=!1:(d=!0,a=b.child,0===c.timedOutAt&&(c.timedOutAt=\nG()));null!==a&&we(a,d);c=b.updateQueue;if(null!==c){b.updateQueue=null;var f=b.stateNode;null===f&&(f=b.stateNode=new re);c.forEach(function(a){var c=Ee.bind(null,b,a);f.has(a)||(f.add(a),a.then(c,c))})}break;case 17:break;default:n(\"163\")}else{switch(b.tag){case 0:case 11:case 14:case 15:ve(Pc,Qc,b);return}Ae(b)}}var Fe=\"function\"===typeof WeakMap?WeakMap:Map;function Ge(a,b,c){c=lc(c);c.tag=be;c.payload={element:null};var d=b.value;c.callback=function(){He(d);se(a,b)};return c}\nfunction Ie(a,b,c){c=lc(c);c.tag=be;var d=a.type.getDerivedStateFromError;if(\"function\"===typeof d){var e=b.value;c.payload=function(){return d(e)}}var g=a.stateNode;null!==g&&\"function\"===typeof g.componentDidCatch&&(c.callback=function(){\"function\"!==typeof d&&(null===Je?Je=new Set([this]):Je.add(this));var c=b.value,e=b.stack;se(a,b);this.componentDidCatch(c,{componentStack:null!==e?e:\"\"})});return c}\nfunction Ke(a){switch(a.tag){case 1:D(a.type)&&Hb(a);var b=a.effectTag;return b&2048?(a.effectTag=b&-2049|64,a):null;case 3:return Jc(a),Ib(a),b=a.effectTag,0!==(b&64)?n(\"285\"):void 0,a.effectTag=b&-2049|64,a;case 5:return Mc(a),null;case 13:return b=a.effectTag,b&2048?(a.effectTag=b&-2049|64,a):null;case 4:return Jc(a),null;case 10:return $d(a),null;default:return null}}\nvar Le=da.ReactCurrentDispatcher,Me=da.ReactCurrentOwner,Ne=1073741822,Oe=0,Pe=!1,P=null,Q=null,R=0,Qe=-1,Re=!1,S=null,Se=!1,Te=null,Ue=null,Ve=null,Je=null;function We(){if(null!==P)for(var a=P.return;null!==a;){var b=a;switch(b.tag){case 1:var c=b.type.childContextTypes;null!==c&&void 0!==c&&Hb(b);break;case 3:Jc(b);Ib(b);break;case 5:Mc(b);break;case 4:Jc(b);break;case 10:$d(b)}a=a.return}Q=null;R=0;Qe=-1;Re=!1;P=null}\nfunction Xe(a,b){Ve=Ue=Te=null;var c=T;T=!0;do{if(b.effectTag&512){var d=!1,e=void 0;try{var g=b;ve(Uc,Nc,g);ve(Nc,Tc,g)}catch(f){d=!0,e=f}d&&ue(b,e)}b=b.nextEffect}while(null!==b);T=c;c=a.expirationTime;0!==c&&Ye(a,c)}function mc(){null!==Ue&&Sa(Ue);null!==Ve&&Ve()}\nfunction Ze(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&1024)){P=a;a:{var e=b;b=a;var g=R,f=b.pendingProps;switch(b.tag){case 2:break;case 16:break;case 15:case 0:break;case 1:D(b.type)&&Hb(b);break;case 3:Jc(b);Ib(b);f=b.stateNode;f.pendingContext&&(f.context=f.pendingContext,f.pendingContext=null);if(null===e||null===e.child)Cd(b),b.effectTag&=-3;ne(b);break;case 5:Mc(b);g=Hc(Gc.current);var h=b.type;if(null!==e&&null!=b.stateNode)oe(e,b,h,f,g),e.ref!==b.ref&&(b.effectTag|=\n128);else if(f){e=Kc();if(Cd(b))f=b,Xa||n(\"175\"),e=yb(f.stateNode,f.type,f.memoizedProps,g,e,f),f.updateQueue=e,e=null!==e?!0:!1,e&&le(b);else{var k=Ea(h,f,g,e,b);me(k,b,!1,!1);Ga(k,h,f,g,e)&&le(b);b.stateNode=k}null!==b.ref&&(b.effectTag|=128)}else null===b.stateNode?n(\"166\"):void 0;break;case 6:e&&null!=b.stateNode?pe(e,b,e.memoizedProps,f):(\"string\"!==typeof f&&(null===b.stateNode?n(\"166\"):void 0),e=Hc(Gc.current),g=Kc(),Cd(b)?(e=b,Xa||n(\"176\"),(e=zb(e.stateNode,e.memoizedProps,e))&&le(b)):b.stateNode=\nKa(f,e,g,b));break;case 11:break;case 13:f=b.memoizedState;if(0!==(b.effectTag&64)){b.expirationTime=g;P=b;break a}f=null!==f;g=null!==e&&null!==e.memoizedState;null!==e&&!f&&g&&(e=e.child.sibling,null!==e&&(h=b.firstEffect,null!==h?(b.firstEffect=e,e.nextEffect=h):(b.firstEffect=b.lastEffect=e,e.nextEffect=null),e.effectTag=8));if(f||g)b.effectTag|=4;break;case 7:break;case 8:break;case 12:break;case 4:Jc(b);ne(b);break;case 10:$d(b);break;case 9:break;case 14:break;case 17:D(b.type)&&Hb(b);break;\ndefault:n(\"156\")}P=null}b=a;if(1===R||1!==b.childExpirationTime){e=0;for(f=b.child;null!==f;)g=f.expirationTime,h=f.childExpirationTime,g>e&&(e=g),h>e&&(e=h),f=f.sibling;b.childExpirationTime=e}if(null!==P)return P;null!==c&&0===(c.effectTag&1024)&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1<a.effectTag&&(null!==c.lastEffect?c.lastEffect.nextEffect=a:c.firstEffect=a,c.lastEffect=\na))}else{a=Ke(a,R);if(null!==a)return a.effectTag&=1023,a;null!==c&&(c.firstEffect=c.lastEffect=null,c.effectTag|=1024)}if(null!==d)return d;if(null!==c)a=c;else break}return null}function $e(a){var b=Ud(a.alternate,a,R);a.memoizedProps=a.pendingProps;null===b&&(b=Ze(a));Me.current=null;return b}\nfunction af(a,b){Pe?n(\"243\"):void 0;mc();Pe=!0;var c=Le.current;Le.current=id;var d=a.nextExpirationTimeToWorkOn;if(d!==R||a!==Q||null===P)We(),Q=a,R=d,P=Vb(Q.current,null,R),a.pendingCommitExpirationTime=0;var e=!1;do{try{if(b)for(;null!==P&&!bf();)P=$e(P);else for(;null!==P;)P=$e(P)}catch(L){if(Zd=Yd=Xd=null,jd(),null===P)e=!0,He(L);else{null===P?n(\"271\"):void 0;var g=P,f=g.return;if(null===f)e=!0,He(L);else{a:{var h=a,k=f,l=g,m=L;f=R;l.effectTag|=1024;l.firstEffect=l.lastEffect=null;if(null!==\nm&&\"object\"===typeof m&&\"function\"===typeof m.then){var w=m;m=k;var u=-1,x=-1;do{if(13===m.tag){var v=m.alternate;if(null!==v&&(v=v.memoizedState,null!==v)){x=10*(1073741822-v.timedOutAt);break}v=m.pendingProps.maxDuration;if(\"number\"===typeof v)if(0>=v)u=0;else if(-1===u||v<u)u=v}m=m.return}while(null!==m);m=k;do{if(v=13===m.tag)v=void 0===m.memoizedProps.fallback?!1:null===m.memoizedState;if(v){k=m.updateQueue;null===k?(k=new Set,k.add(w),m.updateQueue=k):k.add(w);if(0===(m.mode&1)){m.effectTag|=\n64;l.effectTag&=-1957;1===l.tag&&(null===l.alternate?l.tag=17:(f=lc(1073741823),f.tag=qc,nc(l,f)));l.expirationTime=1073741823;break a}l=h.pingCache;null===l?(l=h.pingCache=new Fe,k=new Set,l.set(w,k)):(k=l.get(w),void 0===k&&(k=new Set,l.set(w,k)));k.has(f)||(k.add(f),l=cf.bind(null,h,w,f),w.then(l,l));-1===u?h=1073741823:(-1===x&&(x=10*(1073741822-dc(h,f))-5E3),h=x+u);0<=h&&Qe<h&&(Qe=h);m.effectTag|=2048;m.expirationTime=f;break a}m=m.return}while(null!==m);m=Error((ta(l.type)||\"A React component\")+\n\" suspended while rendering, but no fallback UI was specified.\\n\\nAdd a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display.\"+Bb(l))}Re=!0;m=ke(m,l);h=k;do{switch(h.tag){case 3:h.effectTag|=2048;h.expirationTime=f;f=Ge(h,m,f);fe(h,f);break a;case 1:if(w=m,u=h.type,x=h.stateNode,0===(h.effectTag&64)&&(\"function\"===typeof u.getDerivedStateFromError||null!==x&&\"function\"===typeof x.componentDidCatch&&(null===Je||!Je.has(x)))){h.effectTag|=2048;\nh.expirationTime=f;f=Ie(h,w,f);fe(h,f);break a}}h=h.return}while(null!==h)}P=Ze(g);continue}}}break}while(1);Pe=!1;Le.current=c;Zd=Yd=Xd=null;jd();if(e)Q=null,a.finishedWork=null;else if(null!==P)a.finishedWork=null;else{c=a.current.alternate;null===c?n(\"281\"):void 0;Q=null;if(Re){e=a.latestPendingTime;g=a.latestSuspendedTime;f=a.latestPingedTime;if(0!==e&&e<d||0!==g&&g<d||0!==f&&f<d){cc(a,d);df(a,c,d,a.expirationTime,-1);return}if(!a.didError&&b){a.didError=!0;d=a.nextExpirationTimeToWorkOn=d;b=\na.expirationTime=1073741823;df(a,c,d,b,-1);return}}b&&-1!==Qe?(cc(a,d),b=10*(1073741822-dc(a,d)),b<Qe&&(Qe=b),b=10*(1073741822-G()),b=Qe-b,df(a,c,d,a.expirationTime,0>b?0:b)):(a.pendingCommitExpirationTime=d,a.finishedWork=c)}}\nfunction ue(a,b){for(var c=a.return;null!==c;){switch(c.tag){case 1:var d=c.stateNode;if(\"function\"===typeof c.type.getDerivedStateFromError||\"function\"===typeof d.componentDidCatch&&(null===Je||!Je.has(d))){a=ke(b,a);a=Ie(c,a,1073741823);nc(c,a);oc(c,1073741823);return}break;case 3:a=ke(b,a);a=Ge(c,a,1073741823);nc(c,a);oc(c,1073741823);return}c=c.return}3===a.tag&&(c=ke(b,a),c=Ge(a,c,1073741823),nc(a,c),oc(a,1073741823))}\nfunction kc(a,b){0!==Oe?a=Oe:Pe?a=Se?1073741823:R:b.mode&1?(a=ef?1073741822-10*(((1073741822-a+15)/10|0)+1):1073741822-25*(((1073741822-a+500)/25|0)+1),null!==Q&&a===R&&--a):a=1073741823;ef&&(0===ff||a<ff)&&(ff=a);return a}function cf(a,b,c){var d=a.pingCache;null!==d&&d.delete(b);if(null!==Q&&R===c)Q=null;else if(b=a.earliestSuspendedTime,d=a.latestSuspendedTime,0!==b&&c<=b&&c>=d){a.didError=!1;b=a.latestPingedTime;if(0===b||b>c)a.latestPingedTime=c;bc(c,a);c=a.expirationTime;0!==c&&Ye(a,c)}}\nfunction Ee(a,b){var c=a.stateNode;null!==c&&c.delete(b);b=G();b=kc(b,a);a=gf(a,b);null!==a&&(ac(a,b),b=a.expirationTime,0!==b&&Ye(a,b))}\nfunction gf(a,b){a.expirationTime<b&&(a.expirationTime=b);var c=a.alternate;null!==c&&c.expirationTime<b&&(c.expirationTime=b);var d=a.return,e=null;if(null===d&&3===a.tag)e=a.stateNode;else for(;null!==d;){c=d.alternate;d.childExpirationTime<b&&(d.childExpirationTime=b);null!==c&&c.childExpirationTime<b&&(c.childExpirationTime=b);if(null===d.return&&3===d.tag){e=d.stateNode;break}d=d.return}return e}\nfunction oc(a,b){a=gf(a,b);null!==a&&(!Pe&&0!==R&&b>R&&We(),ac(a,b),Pe&&!Se&&Q===a||Ye(a,a.expirationTime),hf>jf&&(hf=0,n(\"185\")))}function kf(a,b,c,d,e){var g=Oe;Oe=1073741823;try{return a(b,c,d,e)}finally{Oe=g}}var U=null,V=null,lf=0,mf=void 0,T=!1,W=null,X=0,ff=0,nf=!1,of=null,Y=!1,pf=!1,ef=!1,qf=null,tf=Ta(),Z=1073741822-(tf/10|0),uf=Z,jf=50,hf=0,vf=null;function wf(){Z=1073741822-((Ta()-tf)/10|0)}\nfunction xf(a,b){if(0!==lf){if(b<lf)return;null!==mf&&Ma(mf)}lf=b;a=Ta()-tf;mf=La(yf,{timeout:10*(1073741822-b)-a})}function df(a,b,c,d,e){a.expirationTime=d;0!==e||bf()?0<e&&(a.timeoutHandle=Oa(zf.bind(null,a,b,c),e)):(a.pendingCommitExpirationTime=c,a.finishedWork=b)}function zf(a,b,c){a.pendingCommitExpirationTime=c;a.finishedWork=b;wf();uf=Z;Af(a,c)}function G(){if(T)return uf;Bf();if(0===X||1===X)wf(),uf=Z;return uf}\nfunction Ye(a,b){null===a.nextScheduledRoot?(a.expirationTime=b,null===V?(U=V=a,a.nextScheduledRoot=a):(V=V.nextScheduledRoot=a,V.nextScheduledRoot=U)):b>a.expirationTime&&(a.expirationTime=b);T||(Y?pf&&(W=a,X=1073741823,Cf(a,1073741823,!1)):1073741823===b?Df(1073741823,!1):xf(a,b))}\nfunction Bf(){var a=0,b=null;if(null!==V)for(var c=V,d=U;null!==d;){var e=d.expirationTime;if(0===e){null===c||null===V?n(\"244\"):void 0;if(d===d.nextScheduledRoot){U=V=d.nextScheduledRoot=null;break}else if(d===U)U=e=d.nextScheduledRoot,V.nextScheduledRoot=e,d.nextScheduledRoot=null;else if(d===V){V=c;V.nextScheduledRoot=U;d.nextScheduledRoot=null;break}else c.nextScheduledRoot=d.nextScheduledRoot,d.nextScheduledRoot=null;d=c.nextScheduledRoot}else{e>a&&(a=e,b=d);if(d===V)break;if(1073741823===a)break;\nc=d;d=d.nextScheduledRoot}}W=b;X=a}var Ef=!1;function bf(){return Ef?!0:Na()?Ef=!0:!1}function yf(){try{if(!bf()&&null!==U){wf();var a=U;do{var b=a.expirationTime;0!==b&&Z<=b&&(a.nextExpirationTimeToWorkOn=Z);a=a.nextScheduledRoot}while(a!==U)}Df(0,!0)}finally{Ef=!1}}\nfunction Df(a,b){Bf();if(b)for(wf(),uf=Z;null!==W&&0!==X&&a<=X&&!(Ef&&Z>X);)Cf(W,X,Z>X),Bf(),wf(),uf=Z;else for(;null!==W&&0!==X&&a<=X;)Cf(W,X,!1),Bf();b&&(lf=0,mf=null);0!==X&&xf(W,X);hf=0;vf=null;if(null!==qf)for(a=qf,qf=null,b=0;b<a.length;b++){var c=a[b];try{c._onComplete()}catch(d){nf||(nf=!0,of=d)}}if(nf)throw a=of,of=null,nf=!1,a;}function Af(a,b){T?n(\"253\"):void 0;W=a;X=b;Cf(a,b,!1);Df(1073741823,!1)}\nfunction Cf(a,b,c){T?n(\"245\"):void 0;T=!0;if(c){var d=a.finishedWork;null!==d?Ff(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,d!==Qa&&(a.timeoutHandle=Qa,Pa(d)),af(a,c),d=a.finishedWork,null!==d&&(bf()?a.finishedWork=d:Ff(a,d,b)))}else d=a.finishedWork,null!==d?Ff(a,d,b):(a.finishedWork=null,d=a.timeoutHandle,d!==Qa&&(a.timeoutHandle=Qa,Pa(d)),af(a,c),d=a.finishedWork,null!==d&&Ff(a,d,b));T=!1}\nfunction Ff(a,b,c){var d=a.firstBatch;if(null!==d&&d._expirationTime>=c&&(null===qf?qf=[d]:qf.push(d),d._defer)){a.finishedWork=b;a.expirationTime=0;return}a.finishedWork=null;a===vf?hf++:(vf=a,hf=0);Se=Pe=!0;a.current===b?n(\"177\"):void 0;c=a.pendingCommitExpirationTime;0===c?n(\"261\"):void 0;a.pendingCommitExpirationTime=0;d=b.expirationTime;var e=b.childExpirationTime;d=e>d?e:d;a.didError=!1;0===d?(a.earliestPendingTime=0,a.latestPendingTime=0,a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=\n0):(d<a.latestPingedTime&&(a.latestPingedTime=0),e=a.latestPendingTime,0!==e&&(e>d?a.earliestPendingTime=a.latestPendingTime=0:a.earliestPendingTime>d&&(a.earliestPendingTime=a.latestPendingTime)),e=a.earliestSuspendedTime,0===e?ac(a,d):d<a.latestSuspendedTime?(a.earliestSuspendedTime=0,a.latestSuspendedTime=0,a.latestPingedTime=0,ac(a,d)):d>e&&ac(a,d));bc(0,a);Me.current=null;1<b.effectTag?null!==b.lastEffect?(b.lastEffect.nextEffect=b,d=b.firstEffect):d=b:d=b.firstEffect;Ca(a.containerInfo);for(S=\nd;null!==S;){e=!1;var g=void 0;try{for(;null!==S;){if(S.effectTag&256)a:{var f=S.alternate,h=S;switch(h.tag){case 0:case 11:case 15:ve(Oc,Nc,h);break a;case 1:if(h.effectTag&256&&null!==f){var k=f.memoizedProps,l=f.memoizedState,m=h.stateNode,w=m.getSnapshotBeforeUpdate(h.elementType===h.type?k:F(h.type,k),l);m.__reactInternalSnapshotBeforeUpdate=w}break a;case 3:case 5:case 6:case 4:case 17:break a;default:n(\"163\")}}S=S.nextEffect}}catch(gb){e=!0,g=gb}e&&(null===S?n(\"178\"):void 0,ue(S,g),null!==\nS&&(S=S.nextEffect))}for(S=d;null!==S;){f=!1;k=void 0;try{for(;null!==S;){var u=S.effectTag;u&16&&Va&&hb(S.stateNode);if(u&128){var x=S.alternate;if(null!==x){var v=x.ref;null!==v&&(\"function\"===typeof v?v(null):v.current=null)}}switch(u&14){case 2:Ce(S);S.effectTag&=-3;break;case 6:Ce(S);S.effectTag&=-3;De(S.alternate,S);break;case 4:De(S.alternate,S);break;case 8:l=S;Va?ye(l):ze(l);l.return=null;l.child=null;l.memoizedState=null;l.updateQueue=null;var L=l.alternate;null!==L&&(L.return=null,L.child=\nnull,L.memoizedState=null,L.updateQueue=null)}S=S.nextEffect}}catch(gb){f=!0,k=gb}f&&(null===S?n(\"178\"):void 0,ue(S,k),null!==S&&(S=S.nextEffect))}Da(a.containerInfo);a.current=b;for(S=d;null!==S;){u=!1;x=void 0;try{for(v=a,L=c;null!==S;){var q=S.effectTag;if(q&36){var t=S.alternate;f=S;k=L;switch(f.tag){case 0:case 11:case 15:ve(Rc,Sc,f);break;case 1:var y=f.stateNode;if(f.effectTag&4)if(null===t)y.componentDidMount();else{var rf=f.elementType===f.type?t.memoizedProps:F(f.type,t.memoizedProps);y.componentDidUpdate(rf,\nt.memoizedState,y.__reactInternalSnapshotBeforeUpdate)}var Hd=f.updateQueue;null!==Hd&&ie(f,Hd,y,k);break;case 3:var Id=f.updateQueue;if(null!==Id){l=null;if(null!==f.child)switch(f.child.tag){case 5:l=za(f.child.stateNode);break;case 1:l=f.child.stateNode}ie(f,Id,l,k)}break;case 5:var sf=f.stateNode;null===t&&f.effectTag&4&&ab(sf,f.type,f.memoizedProps,f);break;case 6:break;case 4:break;case 12:break;case 13:break;case 17:break;default:n(\"163\")}}if(q&128){var Nb=S.ref;if(null!==Nb){var Jd=S.stateNode;\nswitch(S.tag){case 5:var r=za(Jd);break;default:r=Jd}\"function\"===typeof Nb?Nb(r):Nb.current=r}}q&512&&(Te=v);S=S.nextEffect}}catch(gb){u=!0,x=gb}u&&(null===S?n(\"178\"):void 0,ue(S,x),null!==S&&(S=S.nextEffect))}null!==d&&null!==Te&&(q=Xe.bind(null,a,d),Ue=Ra(q),Ve=q);Pe=Se=!1;\"function\"===typeof Ob&&Ob(b.stateNode);q=b.expirationTime;b=b.childExpirationTime;b=b>q?b:q;0===b&&(Je=null);a.expirationTime=b;a.finishedWork=null}\nfunction He(a){null===W?n(\"246\"):void 0;W.expirationTime=0;nf||(nf=!0,of=a)}\nfunction Gf(a,b,c,d,e){var g=b.current;a:if(c){c=c._reactInternalFiber;b:{2===ua(c)&&1===c.tag?void 0:n(\"170\");var f=c;do{switch(f.tag){case 3:f=f.stateNode.context;break b;case 1:if(D(f.type)){f=f.stateNode.__reactInternalMemoizedMergedChildContext;break b}}f=f.return}while(null!==f);n(\"171\");f=void 0}if(1===c.tag){var h=c.type;if(D(h)){c=Kb(c,h,f);break a}}c=f}else c=Eb;null===b.context?b.context=c:b.pendingContext=c;b=e;e=lc(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);\nmc();nc(g,e);oc(g,d);return d}function Hf(a){var b=a._reactInternalFiber;void 0===b&&(\"function\"===typeof a.render?n(\"188\"):n(\"268\",Object.keys(a)));a=xa(b);return null===a?null:a.stateNode}\nvar If={updateContainerAtExpirationTime:Gf,createContainer:function(a,b,c){b=E(3,null,null,b?3:0);a={current:b,containerInfo:a,pendingChildren:null,pingCache:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,didError:!1,pendingCommitExpirationTime:0,finishedWork:null,timeoutHandle:Qa,context:null,pendingContext:null,hydrate:c,nextExpirationTimeToWorkOn:0,expirationTime:0,firstBatch:null,nextScheduledRoot:null};return b.stateNode=a},updateContainer:function(a,\nb,c,d){var e=b.current,g=G();e=kc(g,e);return Gf(a,b,c,e,d)},flushRoot:Af,requestWork:Ye,computeUniqueAsyncExpiration:function(){var a=1073741822-25*(((1073741822-G()+500)/25|0)+1);a>=Ne&&(a=Ne-1);return Ne=a},batchedUpdates:function(a,b){var c=Y;Y=!0;try{return a(b)}finally{(Y=c)||T||Df(1073741823,!1)}},unbatchedUpdates:function(a,b){if(Y&&!pf){pf=!0;try{return a(b)}finally{pf=!1}}return a(b)},deferredUpdates:function(a){var b=G(),c=Oe,d=ef;Oe=1073741822-25*(((1073741822-b+500)/25|0)+1);ef=!1;try{return a()}finally{Oe=\nc,ef=d}},syncUpdates:kf,interactiveUpdates:function(a,b,c){if(ef)return a(b,c);Y||T||0===ff||(Df(ff,!1),ff=0);var d=ef,e=Y;Y=ef=!0;try{return a(b,c)}finally{ef=d,(Y=e)||T||Df(1073741823,!1)}},flushInteractiveUpdates:function(){T||0===ff||(Df(ff,!1),ff=0)},flushControlled:function(a){var b=Y;Y=!0;try{kf(a)}finally{(Y=b)||T||Df(1073741823,!1)}},flushSync:function(a,b){T?n(\"187\"):void 0;var c=Y;Y=!0;try{return kf(a,b)}finally{Y=c,Df(1073741823,!1)}},getPublicRootInstance:function(a){a=a.current;if(!a.child)return null;\nswitch(a.child.tag){case 5:return za(a.child.stateNode);default:return a.child.stateNode}},findHostInstance:Hf,findHostInstanceWithWarning:function(a){return Hf(a)},findHostInstanceWithNoPortals:function(a){a=ya(a);return null===a?null:a.stateNode},injectIntoDevTools:function(a){var b=a.findFiberByHostInstance;return Rb(aa({},a,{overrideProps:null,currentDispatcherRef:da.ReactCurrentDispatcher,findHostInstanceByFiber:function(a){a=xa(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?\nb(a):null}}))}};module.exports=If.default||If;\n\n var $$$renderer = module.exports;\n module.exports = $$$reconciler;\n return $$$renderer;\n};\n\n\n//# sourceURL=webpack://editor/./node_modules/react-reconciler/cjs/react-reconciler.production.min.js?");
/***/ }),
/***/ "./node_modules/react-reconciler/index.js":
/*!************************************************!*\
!*** ./node_modules/react-reconciler/index.js ***!
\************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nif (true) {\n module.exports = __webpack_require__(/*! ./cjs/react-reconciler.production.min.js */ \"./node_modules/react-reconciler/cjs/react-reconciler.production.min.js\");\n} else {}\n\n\n//# sourceURL=webpack://editor/./node_modules/react-reconciler/index.js?");
/***/ }),
/***/ "./node_modules/react/cjs/react.production.min.js":
/*!********************************************************!*\
!*** ./node_modules/react/cjs/react.production.min.js ***!
\********************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/** @license React v16.8.0\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nvar k=__webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\"),n=\"function\"===typeof Symbol&&Symbol.for,p=n?Symbol.for(\"react.element\"):60103,q=n?Symbol.for(\"react.portal\"):60106,r=n?Symbol.for(\"react.fragment\"):60107,t=n?Symbol.for(\"react.strict_mode\"):60108,u=n?Symbol.for(\"react.profiler\"):60114,v=n?Symbol.for(\"react.provider\"):60109,w=n?Symbol.for(\"react.context\"):60110,x=n?Symbol.for(\"react.concurrent_mode\"):60111,y=n?Symbol.for(\"react.forward_ref\"):60112,z=n?Symbol.for(\"react.suspense\"):60113,aa=n?Symbol.for(\"react.memo\"):\n60115,ba=n?Symbol.for(\"react.lazy\"):60116,A=\"function\"===typeof Symbol&&Symbol.iterator;function ca(a,b,d,c,e,g,h,f){if(!a){a=void 0;if(void 0===b)a=Error(\"Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.\");else{var l=[d,c,e,g,h,f],m=0;a=Error(b.replace(/%s/g,function(){return l[m++]}));a.name=\"Invariant Violation\"}a.framesToPop=1;throw a;}}\nfunction B(a){for(var b=arguments.length-1,d=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=0;c<b;c++)d+=\"&args[]=\"+encodeURIComponent(arguments[c+1]);ca(!1,\"Minified React error #\"+a+\"; visit %s for the full message or use the non-minified dev environment for full errors and additional helpful warnings. \",d)}var C={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},D={};\nfunction E(a,b,d){this.props=a;this.context=b;this.refs=D;this.updater=d||C}E.prototype.isReactComponent={};E.prototype.setState=function(a,b){\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a?B(\"85\"):void 0;this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,d){this.props=a;this.context=b;this.refs=D;this.updater=d||C}var H=G.prototype=new F;\nH.constructor=G;k(H,E.prototype);H.isPureReactComponent=!0;var I={current:null},J={current:null},K=Object.prototype.hasOwnProperty,L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,d){var c=void 0,e={},g=null,h=null;if(null!=b)for(c in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(g=\"\"+b.key),b)K.call(b,c)&&!L.hasOwnProperty(c)&&(e[c]=b[c]);var f=arguments.length-2;if(1===f)e.children=d;else if(1<f){for(var l=Array(f),m=0;m<f;m++)l[m]=arguments[m+2];e.children=l}if(a&&a.defaultProps)for(c in f=a.defaultProps,f)void 0===e[c]&&(e[c]=f[c]);return{$$typeof:p,type:a,key:g,ref:h,props:e,_owner:J.current}}\nfunction da(a,b){return{$$typeof:p,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function N(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===p}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+(\"\"+a).replace(/[=:]/g,function(a){return b[a]})}var O=/\\/+/g,P=[];function Q(a,b,d,c){if(P.length){var e=P.pop();e.result=a;e.keyPrefix=b;e.func=d;e.context=c;e.count=0;return e}return{result:a,keyPrefix:b,func:d,context:c,count:0}}\nfunction R(a){a.result=null;a.keyPrefix=null;a.func=null;a.context=null;a.count=0;10>P.length&&P.push(a)}\nfunction S(a,b,d,c){var e=typeof a;if(\"undefined\"===e||\"boolean\"===e)a=null;var g=!1;if(null===a)g=!0;else switch(e){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case p:case q:g=!0}}if(g)return d(c,a,\"\"===b?\".\"+T(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var h=0;h<a.length;h++){e=a[h];var f=b+T(e,h);g+=S(e,f,d,c)}else if(null===a||\"object\"!==typeof a?f=null:(f=A&&a[A]||a[\"@@iterator\"],f=\"function\"===typeof f?f:null),\"function\"===typeof f)for(a=f.call(a),h=\n0;!(e=a.next()).done;)e=e.value,f=b+T(e,h++),g+=S(e,f,d,c);else\"object\"===e&&(d=\"\"+a,B(\"31\",\"[object Object]\"===d?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":d,\"\"));return g}function U(a,b,d){return null==a?0:S(a,\"\",b,d)}function T(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(a.key):b.toString(36)}function ea(a,b){a.func.call(a.context,b,a.count++)}\nfunction fa(a,b,d){var c=a.result,e=a.keyPrefix;a=a.func.call(a.context,b,a.count++);Array.isArray(a)?V(a,c,d,function(a){return a}):null!=a&&(N(a)&&(a=da(a,e+(!a.key||b&&b.key===a.key?\"\":(\"\"+a.key).replace(O,\"$&/\")+\"/\")+d)),c.push(a))}function V(a,b,d,c,e){var g=\"\";null!=d&&(g=(\"\"+d).replace(O,\"$&/\")+\"/\");b=Q(b,g,c,e);U(a,fa,b);R(b)}function W(){var a=I.current;null===a?B(\"307\"):void 0;return a}\nvar X={Children:{map:function(a,b,d){if(null==a)return a;var c=[];V(a,c,null,b,d);return c},forEach:function(a,b,d){if(null==a)return a;b=Q(null,null,b,d);U(a,ea,b);R(b)},count:function(a){return U(a,function(){return null},null)},toArray:function(a){var b=[];V(a,b,null,function(a){return a});return b},only:function(a){N(a)?void 0:B(\"143\");return a}},createRef:function(){return{current:null}},Component:E,PureComponent:G,createContext:function(a,b){void 0===b&&(b=null);a={$$typeof:w,_calculateChangedBits:b,\n_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null};a.Provider={$$typeof:v,_context:a};return a.Consumer=a},forwardRef:function(a){return{$$typeof:y,render:a}},lazy:function(a){return{$$typeof:ba,_ctor:a,_status:-1,_result:null}},memo:function(a,b){return{$$typeof:aa,type:a,compare:void 0===b?null:b}},useCallback:function(a,b){return W().useCallback(a,b)},useContext:function(a,b){return W().useContext(a,b)},useEffect:function(a,b){return W().useEffect(a,b)},useImperativeHandle:function(a,\nb,d){return W().useImperativeHandle(a,b,d)},useDebugValue:function(){},useLayoutEffect:function(a,b){return W().useLayoutEffect(a,b)},useMemo:function(a,b){return W().useMemo(a,b)},useReducer:function(a,b,d){return W().useReducer(a,b,d)},useRef:function(a){return W().useRef(a)},useState:function(a){return W().useState(a)},Fragment:r,StrictMode:t,Suspense:z,createElement:M,cloneElement:function(a,b,d){null===a||void 0===a?B(\"267\",a):void 0;var c=void 0,e=k({},a.props),g=a.key,h=a.ref,f=a._owner;if(null!=\nb){void 0!==b.ref&&(h=b.ref,f=J.current);void 0!==b.key&&(g=\"\"+b.key);var l=void 0;a.type&&a.type.defaultProps&&(l=a.type.defaultProps);for(c in b)K.call(b,c)&&!L.hasOwnProperty(c)&&(e[c]=void 0===b[c]&&void 0!==l?l[c]:b[c])}c=arguments.length-2;if(1===c)e.children=d;else if(1<c){l=Array(c);for(var m=0;m<c;m++)l[m]=arguments[m+2];e.children=l}return{$$typeof:p,type:a.type,key:g,ref:h,props:e,_owner:f}},createFactory:function(a){var b=M.bind(null,a);b.type=a;return b},isValidElement:N,version:\"16.8.0\",\nunstable_ConcurrentMode:x,unstable_Profiler:u,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:I,ReactCurrentOwner:J,assign:k}},Y={default:X},Z=Y&&X||Y;module.exports=Z.default||Z;\n\n\n//# sourceURL=webpack://editor/./node_modules/react/cjs/react.production.min.js?");
/***/ }),
/***/ "./node_modules/react/index.js":
/*!*************************************!*\
!*** ./node_modules/react/index.js ***!
\*************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nif (true) {\n module.exports = __webpack_require__(/*! ./cjs/react.production.min.js */ \"./node_modules/react/cjs/react.production.min.js\");\n} else {}\n\n\n//# sourceURL=webpack://editor/./node_modules/react/index.js?");
/***/ }),
/***/ "./node_modules/scheduler/cjs/scheduler.production.min.js":
/*!****************************************************************!*\
!*** ./node_modules/scheduler/cjs/scheduler.production.min.js ***!
\****************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("/* WEBPACK VAR INJECTION */(function(global) {/** @license React v0.13.2\n * scheduler.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nObject.defineProperty(exports,\"__esModule\",{value:!0});var d=null,e=!1,g=3,k=-1,l=-1,m=!1,n=!1;function p(){if(!m){var a=d.expirationTime;n?q():n=!0;r(t,a)}}\nfunction u(){var a=d,b=d.next;if(d===b)d=null;else{var c=d.previous;d=c.next=b;b.previous=c}a.next=a.previous=null;c=a.callback;b=a.expirationTime;a=a.priorityLevel;var f=g,Q=l;g=a;l=b;try{var h=c()}finally{g=f,l=Q}if(\"function\"===typeof h)if(h={callback:h,priorityLevel:a,expirationTime:b,next:null,previous:null},null===d)d=h.next=h.previous=h;else{c=null;a=d;do{if(a.expirationTime>=b){c=a;break}a=a.next}while(a!==d);null===c?c=d:c===d&&(d=h,p());b=c.previous;b.next=c.previous=h;h.next=c;h.previous=\nb}}function v(){if(-1===k&&null!==d&&1===d.priorityLevel){m=!0;try{do u();while(null!==d&&1===d.priorityLevel)}finally{m=!1,null!==d?p():n=!1}}}function t(a){m=!0;var b=e;e=a;try{if(a)for(;null!==d;){var c=exports.unstable_now();if(d.expirationTime<=c){do u();while(null!==d&&d.expirationTime<=c)}else break}else if(null!==d){do u();while(null!==d&&!w())}}finally{m=!1,e=b,null!==d?p():n=!1,v()}}\nvar x=Date,y=\"function\"===typeof setTimeout?setTimeout:void 0,z=\"function\"===typeof clearTimeout?clearTimeout:void 0,A=\"function\"===typeof requestAnimationFrame?requestAnimationFrame:void 0,B=\"function\"===typeof cancelAnimationFrame?cancelAnimationFrame:void 0,C,D;function E(a){C=A(function(b){z(D);a(b)});D=y(function(){B(C);a(exports.unstable_now())},100)}\nif(\"object\"===typeof performance&&\"function\"===typeof performance.now){var F=performance;exports.unstable_now=function(){return F.now()}}else exports.unstable_now=function(){return x.now()};var r,q,w,G=null;\"undefined\"!==typeof window?G=window:\"undefined\"!==typeof global&&(G=global);\nif(G&&G._schedMock){var H=G._schedMock;r=H[0];q=H[1];w=H[2];exports.unstable_now=H[3]}else if(\"undefined\"===typeof window||\"function\"!==typeof MessageChannel){var I=null,J=function(a){if(null!==I)try{I(a)}finally{I=null}};r=function(a){null!==I?setTimeout(r,0,a):(I=a,setTimeout(J,0,!1))};q=function(){I=null};w=function(){return!1}}else{\"undefined\"!==typeof console&&(\"function\"!==typeof A&&console.error(\"This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills\"),\n\"function\"!==typeof B&&console.error(\"This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills\"));var K=null,L=!1,M=-1,N=!1,O=!1,P=0,R=33,S=33;w=function(){return P<=exports.unstable_now()};var T=new MessageChannel,U=T.port2;T.port1.onmessage=function(){L=!1;var a=K,b=M;K=null;M=-1;var c=exports.unstable_now(),f=!1;if(0>=P-c)if(-1!==b&&b<=c)f=!0;else{N||(N=!0,E(V));K=a;M=b;return}if(null!==a){O=!0;try{a(f)}finally{O=!1}}};\nvar V=function(a){if(null!==K){E(V);var b=a-P+S;b<S&&R<S?(8>b&&(b=8),S=b<R?R:b):R=b;P=a+S;L||(L=!0,U.postMessage(void 0))}else N=!1};r=function(a,b){K=a;M=b;O||0>b?U.postMessage(void 0):N||(N=!0,E(V))};q=function(){K=null;L=!1;M=-1}}exports.unstable_ImmediatePriority=1;exports.unstable_UserBlockingPriority=2;exports.unstable_NormalPriority=3;exports.unstable_IdlePriority=5;exports.unstable_LowPriority=4;\nexports.unstable_runWithPriority=function(a,b){switch(a){case 1:case 2:case 3:case 4:case 5:break;default:a=3}var c=g,f=k;g=a;k=exports.unstable_now();try{return b()}finally{g=c,k=f,v()}};exports.unstable_next=function(a){switch(g){case 1:case 2:case 3:var b=3;break;default:b=g}var c=g,f=k;g=b;k=exports.unstable_now();try{return a()}finally{g=c,k=f,v()}};\nexports.unstable_scheduleCallback=function(a,b){var c=-1!==k?k:exports.unstable_now();if(\"object\"===typeof b&&null!==b&&\"number\"===typeof b.timeout)b=c+b.timeout;else switch(g){case 1:b=c+-1;break;case 2:b=c+250;break;case 5:b=c+1073741823;break;case 4:b=c+1E4;break;default:b=c+5E3}a={callback:a,priorityLevel:g,expirationTime:b,next:null,previous:null};if(null===d)d=a.next=a.previous=a,p();else{c=null;var f=d;do{if(f.expirationTime>b){c=f;break}f=f.next}while(f!==d);null===c?c=d:c===d&&(d=a,p());\nb=c.previous;b.next=c.previous=a;a.next=c;a.previous=b}return a};exports.unstable_cancelCallback=function(a){var b=a.next;if(null!==b){if(b===a)d=null;else{a===d&&(d=b);var c=a.previous;c.next=b;b.previous=c}a.next=a.previous=null}};exports.unstable_wrapCallback=function(a){var b=g;return function(){var c=g,f=k;g=b;k=exports.unstable_now();try{return a.apply(this,arguments)}finally{g=c,k=f,v()}}};exports.unstable_getCurrentPriorityLevel=function(){return g};\nexports.unstable_shouldYield=function(){return!e&&(null!==d&&d.expirationTime<l||w())};exports.unstable_continueExecution=function(){null!==d&&p()};exports.unstable_pauseExecution=function(){};exports.unstable_getFirstCallbackNode=function(){return d};\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ \"./node_modules/webpack/buildin/global.js\")))\n\n//# sourceURL=webpack://editor/./node_modules/scheduler/cjs/scheduler.production.min.js?");
/***/ }),
/***/ "./node_modules/scheduler/index.js":
/*!*****************************************!*\
!*** ./node_modules/scheduler/index.js ***!
\*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\n\nif (true) {\n module.exports = __webpack_require__(/*! ./cjs/scheduler.production.min.js */ \"./node_modules/scheduler/cjs/scheduler.production.min.js\");\n} else {}\n\n\n//# sourceURL=webpack://editor/./node_modules/scheduler/index.js?");
/***/ }),
/***/ "./node_modules/styled-components/dist/styled-components.browser.esm.js":
/*!******************************************************************************!*\
!*** ./node_modules/styled-components/dist/styled-components.browser.esm.js ***!
\******************************************************************************/
/*! exports provided: default, css, keyframes, createGlobalStyle, isStyledComponent, ThemeConsumer, ThemeContext, ThemeProvider, withTheme, ServerStyleSheet, StyleSheetManager, __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* WEBPACK VAR INJECTION */(function(process) {/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"css\", function() { return css; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"keyframes\", function() { return keyframes; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createGlobalStyle\", function() { return createGlobalStyle; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"isStyledComponent\", function() { return isStyledComponent; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ThemeConsumer\", function() { return ThemeConsumer; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ThemeContext\", function() { return ThemeContext; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ThemeProvider\", function() { return ThemeProvider; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"withTheme\", function() { return withTheme; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"ServerStyleSheet\", function() { return ServerStyleSheet; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"StyleSheetManager\", function() { return StyleSheetManager; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"__DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS\", function() { return __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS; });\n/* harmony import */ var stylis_stylis_min__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! stylis/stylis.min */ \"./node_modules/stylis/stylis.min.js\");\n/* harmony import */ var stylis_stylis_min__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(stylis_stylis_min__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var stylis_rule_sheet__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! stylis-rule-sheet */ \"./node_modules/stylis-rule-sheet/index.js\");\n/* harmony import */ var stylis_rule_sheet__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(stylis_rule_sheet__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _emotion_unitless__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @emotion/unitless */ \"./node_modules/@emotion/unitless/dist/unitless.browser.esm.js\");\n/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\n/* harmony import */ var react_is__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_is__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var memoize_one__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! memoize-one */ \"./node_modules/memoize-one/dist/memoize-one.esm.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! prop-types */ \"./node_modules/prop-types/index.js\");\n/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__);\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_7__);\n/* harmony import */ var _emotion_is_prop_valid__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @emotion/is-prop-valid */ \"./node_modules/@emotion/is-prop-valid/dist/is-prop-valid.browser.esm.js\");\n\n\n\n\n\n\n\n\n\n\n// \n\nvar interleave = (function (strings, interpolations) {\n var result = [strings[0]];\n\n for (var i = 0, len = interpolations.length; i < len; i += 1) {\n result.push(interpolations[i], strings[i + 1]);\n }\n\n return result;\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\n\nvar classCallCheck = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\n\nvar createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\n\nvar _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n};\n\nvar inherits = function (subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\n\nvar objectWithoutProperties = function (obj, keys) {\n var target = {};\n\n for (var i in obj) {\n if (keys.indexOf(i) >= 0) continue;\n if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n target[i] = obj[i];\n }\n\n return target;\n};\n\nvar possibleConstructorReturn = function (self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n};\n\n// \nvar isPlainObject = (function (x) {\n return (typeof x === 'undefined' ? 'undefined' : _typeof(x)) === 'object' && x.constructor === Object;\n});\n\n// \nvar EMPTY_ARRAY = Object.freeze([]);\nvar EMPTY_OBJECT = Object.freeze({});\n\n// \nfunction isFunction(test) {\n return typeof test === 'function';\n}\n\n// \n\nfunction getComponentName(target) {\n return ( false) || target.displayName || target.name || 'Component';\n}\n\n// \nfunction isStyledComponent(target) {\n return target && typeof target.styledComponentId === 'string';\n}\n\n// \n\nvar SC_ATTR = typeof process !== 'undefined' && process.env.SC_ATTR || 'data-styled';\n\nvar SC_VERSION_ATTR = 'data-styled-version';\n\nvar SC_STREAM_ATTR = 'data-styled-streamed';\n\nvar IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;\n\nvar DISABLE_SPEEDY = typeof SC_DISABLE_SPEEDY === 'boolean' && SC_DISABLE_SPEEDY || \"production\" !== 'production';\n\n// Shared empty execution context when generating static styles\nvar STATIC_EXECUTION_CONTEXT = {};\n\n// \n\n\n/**\n * Parse errors.md and turn it into a simple hash of code: message\n */\nvar ERRORS = false ? undefined : {};\n\n/**\n * super basic version of sprintf\n */\nfunction format() {\n var a = arguments.length <= 0 ? undefined : arguments[0];\n var b = [];\n\n for (var c = 1, len = arguments.length; c < len; c += 1) {\n b.push(arguments.length <= c ? undefined : arguments[c]);\n }\n\n b.forEach(function (d) {\n a = a.replace(/%[a-z]/, d);\n });\n\n return a;\n}\n\n/**\n * Create an error file out of errors.md for development and a simple web link to the full errors\n * in production mode.\n */\n\nvar StyledComponentsError = function (_Error) {\n inherits(StyledComponentsError, _Error);\n\n function StyledComponentsError(code) {\n classCallCheck(this, StyledComponentsError);\n\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n\n if (true) {\n var _this = possibleConstructorReturn(this, _Error.call(this, 'An error occurred. See https://github.com/styled-components/styled-components/blob/master/src/utils/errors.md#' + code + ' for more information. ' + (interpolations ? 'Additional arguments: ' + interpolations.join(', ') : '')));\n } else { var _this; }\n return possibleConstructorReturn(_this);\n }\n\n return StyledComponentsError;\n}(Error);\n\n// \nvar SC_COMPONENT_ID = /^[^\\S\\n]*?\\/\\* sc-component-id:\\s*(\\S+)\\s+\\*\\//gm;\n\nvar extractComps = (function (maybeCSS) {\n var css = '' + (maybeCSS || ''); // Definitely a string, and a clone\n var existingComponents = [];\n css.replace(SC_COMPONENT_ID, function (match, componentId, matchIndex) {\n existingComponents.push({ componentId: componentId, matchIndex: matchIndex });\n return match;\n });\n return existingComponents.map(function (_ref, i) {\n var componentId = _ref.componentId,\n matchIndex = _ref.matchIndex;\n\n var nextComp = existingComponents[i + 1];\n var cssFromDOM = nextComp ? css.slice(matchIndex, nextComp.matchIndex) : css.slice(matchIndex);\n return { componentId: componentId, cssFromDOM: cssFromDOM };\n });\n});\n\n// \n\nvar COMMENT_REGEX = /^\\s*\\/\\/.*$/gm;\n\n// NOTE: This stylis instance is only used to split rules from SSR'd style tags\nvar stylisSplitter = new stylis_stylis_min__WEBPACK_IMPORTED_MODULE_0___default.a({\n global: false,\n cascade: true,\n keyframe: false,\n prefix: false,\n compress: false,\n semicolon: true\n});\n\nvar stylis = new stylis_stylis_min__WEBPACK_IMPORTED_MODULE_0___default.a({\n global: false,\n cascade: true,\n keyframe: false,\n prefix: true,\n compress: false,\n semicolon: false // NOTE: This means \"autocomplete missing semicolons\"\n});\n\n// Wrap `insertRulePlugin to build a list of rules,\n// and then make our own plugin to return the rules. This\n// makes it easier to hook into the existing SSR architecture\n\nvar parsingRules = [];\n\n// eslint-disable-next-line consistent-return\nvar returnRulesPlugin = function returnRulesPlugin(context) {\n if (context === -2) {\n var parsedRules = parsingRules;\n parsingRules = [];\n return parsedRules;\n }\n};\n\nvar parseRulesPlugin = stylis_rule_sheet__WEBPACK_IMPORTED_MODULE_1___default()(function (rule) {\n parsingRules.push(rule);\n});\n\nvar _componentId = void 0;\nvar _selector = void 0;\nvar _selectorRegexp = void 0;\n\nvar selfReferenceReplacer = function selfReferenceReplacer(match, offset, string) {\n if (\n // the first self-ref is always untouched\n offset > 0 &&\n // there should be at least two self-refs to do a replacement (.b > .b)\n string.slice(0, offset).indexOf(_selector) !== -1 &&\n // no consecutive self refs (.b.b); that is a precedence boost and treated differently\n string.slice(offset - _selector.length, offset) !== _selector) {\n return '.' + _componentId;\n }\n\n return match;\n};\n\n/**\n * When writing a style like\n *\n * & + & {\n * color: red;\n * }\n *\n * The second ampersand should be a reference to the static component class. stylis\n * has no knowledge of static class so we have to intelligently replace the base selector.\n */\nvar selfReferenceReplacementPlugin = function selfReferenceReplacementPlugin(context, _, selectors) {\n if (context === 2 && selectors.length && selectors[0].lastIndexOf(_selector) > 0) {\n // eslint-disable-next-line no-param-reassign\n selectors[0] = selectors[0].replace(_selectorRegexp, selfReferenceReplacer);\n }\n};\n\nstylis.use([selfReferenceReplacementPlugin, parseRulesPlugin, returnRulesPlugin]);\nstylisSplitter.use([parseRulesPlugin, returnRulesPlugin]);\n\nvar splitByRules = function splitByRules(css) {\n return stylisSplitter('', css);\n};\n\nfunction stringifyRules(rules, selector, prefix) {\n var componentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '&';\n\n var flatCSS = rules.join('').replace(COMMENT_REGEX, ''); // replace JS comments\n\n var cssStr = selector && prefix ? prefix + ' ' + selector + ' { ' + flatCSS + ' }' : flatCSS;\n\n // stylis has no concept of state to be passed to plugins\n // but since JS is single=threaded, we can rely on that to ensure\n // these properties stay in sync with the current stylis run\n _componentId = componentId;\n _selector = selector;\n _selectorRegexp = new RegExp('\\\\' + _selector + '\\\\b', 'g');\n\n return stylis(prefix || !selector ? '' : selector, cssStr);\n}\n\n// \n/* eslint-disable camelcase, no-undef */\n\nvar getNonce = (function () {\n return true ? __webpack_require__.nc : undefined;\n});\n\n// \n/* These are helpers for the StyleTags to keep track of the injected\n * rule names for each (component) ID that they're keeping track of.\n * They're crucial for detecting whether a name has already been\n * injected.\n * (This excludes rehydrated names) */\n\n/* adds a new ID:name pairing to a names dictionary */\nvar addNameForId = function addNameForId(names, id, name) {\n if (name) {\n // eslint-disable-next-line no-param-reassign\n var namesForId = names[id] || (names[id] = Object.create(null));\n namesForId[name] = true;\n }\n};\n\n/* resets an ID entirely by overwriting it in the dictionary */\nvar resetIdNames = function resetIdNames(names, id) {\n // eslint-disable-next-line no-param-reassign\n names[id] = Object.create(null);\n};\n\n/* factory for a names dictionary checking the existance of an ID:name pairing */\nvar hasNameForId = function hasNameForId(names) {\n return function (id, name) {\n return names[id] !== undefined && names[id][name];\n };\n};\n\n/* stringifies names for the html/element output */\nvar stringifyNames = function stringifyNames(names) {\n var str = '';\n // eslint-disable-next-line guard-for-in\n for (var id in names) {\n str += Object.keys(names[id]).join(' ') + ' ';\n }\n return str.trim();\n};\n\n/* clones the nested names dictionary */\nvar cloneNames = function cloneNames(names) {\n var clone = Object.create(null);\n // eslint-disable-next-line guard-for-in\n for (var id in names) {\n clone[id] = _extends({}, names[id]);\n }\n return clone;\n};\n\n// \n\n/* These are helpers that deal with the insertRule (aka speedy) API\n * They are used in the StyleTags and specifically the speedy tag\n */\n\n/* retrieve a sheet for a given style tag */\nvar sheetForTag = function sheetForTag(tag) {\n // $FlowFixMe\n if (tag.sheet) return tag.sheet;\n\n /* Firefox quirk requires us to step through all stylesheets to find one owned by the given tag */\n var size = document.styleSheets.length;\n for (var i = 0; i < size; i += 1) {\n var sheet = document.styleSheets[i];\n // $FlowFixMe\n if (sheet.ownerNode === tag) return sheet;\n }\n\n /* we should always be able to find a tag */\n throw new StyledComponentsError(10);\n};\n\n/* insert a rule safely and return whether it was actually injected */\nvar safeInsertRule = function safeInsertRule(sheet, cssRule, index) {\n /* abort early if cssRule string is falsy */\n if (!cssRule) return false;\n\n var maxIndex = sheet.cssRules.length;\n\n try {\n /* use insertRule and cap passed index with maxIndex (no of cssRules) */\n sheet.insertRule(cssRule, index <= maxIndex ? index : maxIndex);\n } catch (err) {\n /* any error indicates an invalid rule */\n return false;\n }\n\n return true;\n};\n\n/* deletes `size` rules starting from `removalIndex` */\nvar deleteRules = function deleteRules(sheet, removalIndex, size) {\n var lowerBound = removalIndex - size;\n for (var i = removalIndex; i > lowerBound; i -= 1) {\n sheet.deleteRule(i);\n }\n};\n\n// \n\n/* this marker separates component styles and is important for rehydration */\nvar makeTextMarker = function makeTextMarker(id) {\n return '\\n/* sc-component-id: ' + id + ' */\\n';\n};\n\n/* add up all numbers in array up until and including the index */\nvar addUpUntilIndex = function addUpUntilIndex(sizes, index) {\n var totalUpToIndex = 0;\n for (var i = 0; i <= index; i += 1) {\n totalUpToIndex += sizes[i];\n }\n\n return totalUpToIndex;\n};\n\n/* create a new style tag after lastEl */\nvar makeStyleTag = function makeStyleTag(target, tagEl, insertBefore) {\n var el = document.createElement('style');\n el.setAttribute(SC_ATTR, '');\n el.setAttribute(SC_VERSION_ATTR, \"4.1.3\");\n\n var nonce = getNonce();\n if (nonce) {\n el.setAttribute('nonce', nonce);\n }\n\n /* Work around insertRule quirk in EdgeHTML */\n el.appendChild(document.createTextNode(''));\n\n if (target && !tagEl) {\n /* Append to target when no previous element was passed */\n target.appendChild(el);\n } else {\n if (!tagEl || !target || !tagEl.parentNode) {\n throw new StyledComponentsError(6);\n }\n\n /* Insert new style tag after the previous one */\n tagEl.parentNode.insertBefore(el, insertBefore ? tagEl : tagEl.nextSibling);\n }\n\n return el;\n};\n\n/* takes a css factory function and outputs an html styled tag factory */\nvar wrapAsHtmlTag = function wrapAsHtmlTag(css, names) {\n return function (additionalAttrs) {\n var nonce = getNonce();\n var attrs = [nonce && 'nonce=\"' + nonce + '\"', SC_ATTR + '=\"' + stringifyNames(names) + '\"', SC_VERSION_ATTR + '=\"' + \"4.1.3\" + '\"', additionalAttrs];\n\n var htmlAttr = attrs.filter(Boolean).join(' ');\n return '<style ' + htmlAttr + '>' + css() + '</style>';\n };\n};\n\n/* takes a css factory function and outputs an element factory */\nvar wrapAsElement = function wrapAsElement(css, names) {\n return function () {\n var _props;\n\n var props = (_props = {}, _props[SC_ATTR] = stringifyNames(names), _props[SC_VERSION_ATTR] = \"4.1.3\", _props);\n\n var nonce = getNonce();\n if (nonce) {\n // $FlowFixMe\n props.nonce = nonce;\n }\n\n // eslint-disable-next-line react/no-danger\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement('style', _extends({}, props, { dangerouslySetInnerHTML: { __html: css() } }));\n };\n};\n\nvar getIdsFromMarkersFactory = function getIdsFromMarkersFactory(markers) {\n return function () {\n return Object.keys(markers);\n };\n};\n\n/* speedy tags utilise insertRule */\nvar makeSpeedyTag = function makeSpeedyTag(el, getImportRuleTag) {\n var names = Object.create(null);\n var markers = Object.create(null);\n var sizes = [];\n\n var extractImport = getImportRuleTag !== undefined;\n /* indicates whether getImportRuleTag was called */\n var usedImportRuleTag = false;\n\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = sizes.length;\n sizes.push(0);\n resetIdNames(names, id);\n\n return markers[id];\n };\n\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n var sheet = sheetForTag(el);\n var insertIndex = addUpUntilIndex(sizes, marker);\n\n var injectedRules = 0;\n var importRules = [];\n var cssRulesSize = cssRules.length;\n\n for (var i = 0; i < cssRulesSize; i += 1) {\n var cssRule = cssRules[i];\n var mayHaveImport = extractImport; /* @import rules are reordered to appear first */\n if (mayHaveImport && cssRule.indexOf('@import') !== -1) {\n importRules.push(cssRule);\n } else if (safeInsertRule(sheet, cssRule, insertIndex + injectedRules)) {\n mayHaveImport = false;\n injectedRules += 1;\n }\n }\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(id + '-import', importRules);\n }\n\n sizes[marker] += injectedRules; /* add up no of injected rules */\n addNameForId(names, id, name);\n };\n\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n\n var size = sizes[marker];\n var sheet = sheetForTag(el);\n var removalIndex = addUpUntilIndex(sizes, marker) - 1;\n deleteRules(sheet, removalIndex, size);\n sizes[marker] = 0;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(id + '-import');\n }\n };\n\n var css = function css() {\n var _sheetForTag = sheetForTag(el),\n cssRules = _sheetForTag.cssRules;\n\n var str = '';\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n str += makeTextMarker(id);\n var marker = markers[id];\n var end = addUpUntilIndex(sizes, marker);\n var size = sizes[marker];\n for (var i = end - size; i < end; i += 1) {\n var rule = cssRules[i];\n if (rule !== undefined) {\n str += rule.cssText;\n }\n }\n }\n\n return str;\n };\n\n return {\n clone: function clone() {\n throw new StyledComponentsError(5);\n },\n\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n};\n\nvar makeTextNode = function makeTextNode(id) {\n return document.createTextNode(makeTextMarker(id));\n};\n\nvar makeBrowserTag = function makeBrowserTag(el, getImportRuleTag) {\n var names = Object.create(null);\n var markers = Object.create(null);\n\n var extractImport = getImportRuleTag !== undefined;\n\n /* indicates whether getImportRuleTag was called */\n var usedImportRuleTag = false;\n\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n markers[id] = makeTextNode(id);\n el.appendChild(markers[id]);\n names[id] = Object.create(null);\n\n return markers[id];\n };\n\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n var importRules = [];\n var cssRulesSize = cssRules.length;\n\n for (var i = 0; i < cssRulesSize; i += 1) {\n var rule = cssRules[i];\n var mayHaveImport = extractImport;\n if (mayHaveImport && rule.indexOf('@import') !== -1) {\n importRules.push(rule);\n } else {\n mayHaveImport = false;\n var separator = i === cssRulesSize - 1 ? '' : ' ';\n marker.appendData('' + rule + separator);\n }\n }\n\n addNameForId(names, id, name);\n\n if (extractImport && importRules.length > 0) {\n usedImportRuleTag = true;\n // $FlowFixMe\n getImportRuleTag().insertRules(id + '-import', importRules);\n }\n };\n\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n\n /* create new empty text node and replace the current one */\n var newMarker = makeTextNode(id);\n el.replaceChild(newMarker, marker);\n markers[id] = newMarker;\n resetIdNames(names, id);\n\n if (extractImport && usedImportRuleTag) {\n // $FlowFixMe\n getImportRuleTag().removeRules(id + '-import');\n }\n };\n\n var css = function css() {\n var str = '';\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n str += markers[id].data;\n }\n\n return str;\n };\n\n return {\n clone: function clone() {\n throw new StyledComponentsError(5);\n },\n\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: el,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n};\n\nvar makeServerTag = function makeServerTag(namesArg, markersArg) {\n var names = namesArg === undefined ? Object.create(null) : namesArg;\n var markers = markersArg === undefined ? Object.create(null) : markersArg;\n\n var insertMarker = function insertMarker(id) {\n var prev = markers[id];\n if (prev !== undefined) {\n return prev;\n }\n\n return markers[id] = [''];\n };\n\n var insertRules = function insertRules(id, cssRules, name) {\n var marker = insertMarker(id);\n marker[0] += cssRules.join(' ');\n addNameForId(names, id, name);\n };\n\n var removeRules = function removeRules(id) {\n var marker = markers[id];\n if (marker === undefined) return;\n marker[0] = '';\n resetIdNames(names, id);\n };\n\n var css = function css() {\n var str = '';\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n var cssForId = markers[id][0];\n if (cssForId) {\n str += makeTextMarker(id) + cssForId;\n }\n }\n return str;\n };\n\n var clone = function clone() {\n var namesClone = cloneNames(names);\n var markersClone = Object.create(null);\n\n // eslint-disable-next-line guard-for-in\n for (var id in markers) {\n markersClone[id] = [markers[id][0]];\n }\n\n return makeServerTag(namesClone, markersClone);\n };\n\n var tag = {\n clone: clone,\n css: css,\n getIds: getIdsFromMarkersFactory(markers),\n hasNameForId: hasNameForId(names),\n insertMarker: insertMarker,\n insertRules: insertRules,\n removeRules: removeRules,\n sealed: false,\n styleTag: null,\n toElement: wrapAsElement(css, names),\n toHTML: wrapAsHtmlTag(css, names)\n };\n\n return tag;\n};\n\nvar makeTag = function makeTag(target, tagEl, forceServer, insertBefore, getImportRuleTag) {\n if (IS_BROWSER && !forceServer) {\n var el = makeStyleTag(target, tagEl, insertBefore);\n\n if (DISABLE_SPEEDY) {\n return makeBrowserTag(el, getImportRuleTag);\n } else {\n return makeSpeedyTag(el, getImportRuleTag);\n }\n }\n\n return makeServerTag();\n};\n\nvar rehydrate = function rehydrate(tag, els, extracted) {\n /* add all extracted components to the new tag */\n for (var i = 0, len = extracted.length; i < len; i += 1) {\n var _extracted$i = extracted[i],\n componentId = _extracted$i.componentId,\n cssFromDOM = _extracted$i.cssFromDOM;\n\n var cssRules = splitByRules(cssFromDOM);\n tag.insertRules(componentId, cssRules);\n }\n\n /* remove old HTMLStyleElements, since they have been rehydrated */\n for (var _i = 0, _len = els.length; _i < _len; _i += 1) {\n var el = els[_i];\n if (el.parentNode) {\n el.parentNode.removeChild(el);\n }\n }\n};\n\n// \n\nvar SPLIT_REGEX = /\\s+/;\n\n/* determine the maximum number of components before tags are sharded */\nvar MAX_SIZE = void 0;\nif (IS_BROWSER) {\n /* in speedy mode we can keep a lot more rules in a sheet before a slowdown can be expected */\n MAX_SIZE = DISABLE_SPEEDY ? 40 : 1000;\n} else {\n /* for servers we do not need to shard at all */\n MAX_SIZE = -1;\n}\n\nvar sheetRunningId = 0;\nvar master = void 0;\n\nvar StyleSheet = function () {\n\n /* a map from ids to tags */\n\n /* deferred rules for a given id */\n\n /* this is used for not reinjecting rules via hasNameForId() */\n\n /* when rules for an id are removed using remove() we have to ignore rehydratedNames for it */\n\n /* a list of tags belonging to this StyleSheet */\n\n /* a tag for import rules */\n\n /* current capacity until a new tag must be created */\n\n /* children (aka clones) of this StyleSheet inheriting all and future injections */\n\n function StyleSheet() {\n var _this = this;\n\n var target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : IS_BROWSER ? document.head : null;\n var forceServer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;\n classCallCheck(this, StyleSheet);\n\n this.getImportRuleTag = function () {\n var importRuleTag = _this.importRuleTag;\n\n if (importRuleTag !== undefined) {\n return importRuleTag;\n }\n\n var firstTag = _this.tags[0];\n var insertBefore = true;\n\n return _this.importRuleTag = makeTag(_this.target, firstTag ? firstTag.styleTag : null, _this.forceServer, insertBefore);\n };\n\n sheetRunningId += 1;\n this.id = sheetRunningId;\n this.forceServer = forceServer;\n this.target = forceServer ? null : target;\n this.tagMap = {};\n this.deferred = {};\n this.rehydratedNames = {};\n this.ignoreRehydratedNames = {};\n this.tags = [];\n this.capacity = 1;\n this.clones = [];\n }\n\n /* rehydrate all SSR'd style tags */\n\n\n StyleSheet.prototype.rehydrate = function rehydrate$$1() {\n if (!IS_BROWSER || this.forceServer) return this;\n\n var els = [];\n var extracted = [];\n var isStreamed = false;\n\n /* retrieve all of our SSR style elements from the DOM */\n var nodes = document.querySelectorAll('style[' + SC_ATTR + '][' + SC_VERSION_ATTR + '=\"' + \"4.1.3\" + '\"]');\n\n var nodesSize = nodes.length;\n\n /* abort rehydration if no previous style tags were found */\n if (!nodesSize) return this;\n\n for (var i = 0; i < nodesSize; i += 1) {\n var el = nodes[i];\n\n /* check if style tag is a streamed tag */\n if (!isStreamed) isStreamed = !!el.getAttribute(SC_STREAM_ATTR);\n\n /* retrieve all component names */\n var elNames = (el.getAttribute(SC_ATTR) || '').trim().split(SPLIT_REGEX);\n var elNamesSize = elNames.length;\n for (var j = 0, name; j < elNamesSize; j += 1) {\n name = elNames[j];\n /* add rehydrated name to sheet to avoid re-adding styles */\n this.rehydratedNames[name] = true;\n }\n\n /* extract all components and their CSS */\n extracted.push.apply(extracted, extractComps(el.textContent));\n\n /* store original HTMLStyleElement */\n els.push(el);\n }\n\n /* abort rehydration if nothing was extracted */\n var extractedSize = extracted.length;\n if (!extractedSize) return this;\n\n /* create a tag to be used for rehydration */\n var tag = this.makeTag(null);\n\n rehydrate(tag, els, extracted);\n\n /* reset capacity and adjust MAX_SIZE by the initial size of the rehydration */\n this.capacity = Math.max(1, MAX_SIZE - extractedSize);\n this.tags.push(tag);\n\n /* retrieve all component ids */\n for (var _j = 0; _j < extractedSize; _j += 1) {\n this.tagMap[extracted[_j].componentId] = tag;\n }\n\n return this;\n };\n\n /* retrieve a \"master\" instance of StyleSheet which is typically used when no other is available\n * The master StyleSheet is targeted by createGlobalStyle, keyframes, and components outside of any\n * StyleSheetManager's context */\n\n\n /* reset the internal \"master\" instance */\n StyleSheet.reset = function reset() {\n var forceServer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;\n\n master = new StyleSheet(undefined, forceServer).rehydrate();\n };\n\n /* adds \"children\" to the StyleSheet that inherit all of the parents' rules\n * while their own rules do not affect the parent */\n\n\n StyleSheet.prototype.clone = function clone() {\n var sheet = new StyleSheet(this.target, this.forceServer);\n\n /* add to clone array */\n this.clones.push(sheet);\n\n /* clone all tags */\n sheet.tags = this.tags.map(function (tag) {\n var ids = tag.getIds();\n var newTag = tag.clone();\n\n /* reconstruct tagMap */\n for (var i = 0; i < ids.length; i += 1) {\n sheet.tagMap[ids[i]] = newTag;\n }\n\n return newTag;\n });\n\n /* clone other maps */\n sheet.rehydratedNames = _extends({}, this.rehydratedNames);\n sheet.deferred = _extends({}, this.deferred);\n\n return sheet;\n };\n\n /* force StyleSheet to create a new tag on the next injection */\n\n\n StyleSheet.prototype.sealAllTags = function sealAllTags() {\n this.capacity = 1;\n\n this.tags.forEach(function (tag) {\n // eslint-disable-next-line no-param-reassign\n tag.sealed = true;\n });\n };\n\n StyleSheet.prototype.makeTag = function makeTag$$1(tag) {\n var lastEl = tag ? tag.styleTag : null;\n var insertBefore = false;\n\n return makeTag(this.target, lastEl, this.forceServer, insertBefore, this.getImportRuleTag);\n };\n\n /* get a tag for a given componentId, assign the componentId to one, or shard */\n StyleSheet.prototype.getTagForId = function getTagForId(id) {\n /* simply return a tag, when the componentId was already assigned one */\n var prev = this.tagMap[id];\n if (prev !== undefined && !prev.sealed) {\n return prev;\n }\n\n var tag = this.tags[this.tags.length - 1];\n\n /* shard (create a new tag) if the tag is exhausted (See MAX_SIZE) */\n this.capacity -= 1;\n\n if (this.capacity === 0) {\n this.capacity = MAX_SIZE;\n tag = this.makeTag(tag);\n this.tags.push(tag);\n }\n\n return this.tagMap[id] = tag;\n };\n\n /* mainly for createGlobalStyle to check for its id */\n\n\n StyleSheet.prototype.hasId = function hasId(id) {\n return this.tagMap[id] !== undefined;\n };\n\n /* caching layer checking id+name to already have a corresponding tag and injected rules */\n\n\n StyleSheet.prototype.hasNameForId = function hasNameForId(id, name) {\n /* exception for rehydrated names which are checked separately */\n if (this.ignoreRehydratedNames[id] === undefined && this.rehydratedNames[name]) {\n return true;\n }\n\n var tag = this.tagMap[id];\n return tag !== undefined && tag.hasNameForId(id, name);\n };\n\n /* registers a componentId and registers it on its tag */\n\n\n StyleSheet.prototype.deferredInject = function deferredInject(id, cssRules) {\n /* don't inject when the id is already registered */\n if (this.tagMap[id] !== undefined) return;\n\n var clones = this.clones;\n\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].deferredInject(id, cssRules);\n }\n\n this.getTagForId(id).insertMarker(id);\n this.deferred[id] = cssRules;\n };\n\n /* injects rules for a given id with a name that will need to be cached */\n\n\n StyleSheet.prototype.inject = function inject(id, cssRules, name) {\n var clones = this.clones;\n\n\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].inject(id, cssRules, name);\n }\n\n var tag = this.getTagForId(id);\n\n /* add deferred rules for component */\n if (this.deferred[id] !== undefined) {\n // Combine passed cssRules with previously deferred CSS rules\n // NOTE: We cannot mutate the deferred array itself as all clones\n // do the same (see clones[i].inject)\n var rules = this.deferred[id].concat(cssRules);\n tag.insertRules(id, rules, name);\n\n this.deferred[id] = undefined;\n } else {\n tag.insertRules(id, cssRules, name);\n }\n };\n\n /* removes all rules for a given id, which doesn't remove its marker but resets it */\n\n\n StyleSheet.prototype.remove = function remove(id) {\n var tag = this.tagMap[id];\n if (tag === undefined) return;\n\n var clones = this.clones;\n\n for (var i = 0; i < clones.length; i += 1) {\n clones[i].remove(id);\n }\n\n /* remove all rules from the tag */\n tag.removeRules(id);\n\n /* ignore possible rehydrated names */\n this.ignoreRehydratedNames[id] = true;\n\n /* delete possible deferred rules */\n this.deferred[id] = undefined;\n };\n\n StyleSheet.prototype.toHTML = function toHTML() {\n return this.tags.map(function (tag) {\n return tag.toHTML();\n }).join('');\n };\n\n StyleSheet.prototype.toReactElements = function toReactElements() {\n var id = this.id;\n\n\n return this.tags.map(function (tag, i) {\n var key = 'sc-' + id + '-' + i;\n return Object(react__WEBPACK_IMPORTED_MODULE_2__[\"cloneElement\"])(tag.toElement(), { key: key });\n });\n };\n\n createClass(StyleSheet, null, [{\n key: 'master',\n get: function get$$1() {\n return master || (master = new StyleSheet().rehydrate());\n }\n\n /* NOTE: This is just for backwards-compatibility with jest-styled-components */\n\n }, {\n key: 'instance',\n get: function get$$1() {\n return StyleSheet.master;\n }\n }]);\n return StyleSheet;\n}();\n\n// \n\nvar Keyframes = function () {\n function Keyframes(name, rules) {\n var _this = this;\n\n classCallCheck(this, Keyframes);\n\n this.inject = function (styleSheet) {\n if (!styleSheet.hasNameForId(_this.id, _this.name)) {\n styleSheet.inject(_this.id, _this.rules, _this.name);\n }\n };\n\n this.toString = function () {\n throw new StyledComponentsError(12, String(_this.name));\n };\n\n this.name = name;\n this.rules = rules;\n\n this.id = 'sc-keyframes-' + name;\n }\n\n Keyframes.prototype.getName = function getName() {\n return this.name;\n };\n\n return Keyframes;\n}();\n\n// \n\n/**\n * inlined version of\n * https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/hyphenateStyleName.js\n */\n\nvar uppercasePattern = /([A-Z])/g;\nvar msPattern = /^ms-/;\n\n/**\n * Hyphenates a camelcased CSS property name, for example:\n *\n * > hyphenateStyleName('backgroundColor')\n * < \"background-color\"\n * > hyphenateStyleName('MozTransition')\n * < \"-moz-transition\"\n * > hyphenateStyleName('msTransition')\n * < \"-ms-transition\"\n *\n * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix\n * is converted to `-ms-`.\n *\n * @param {string} string\n * @return {string}\n */\nfunction hyphenateStyleName(string) {\n return string.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');\n}\n\n// \n\n// Taken from https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/dangerousStyleValue.js\nfunction addUnitIfNeeded(name, value) {\n // https://github.com/amilajack/eslint-plugin-flowtype-errors/issues/133\n // $FlowFixMe\n if (value == null || typeof value === 'boolean' || value === '') {\n return '';\n }\n\n if (typeof value === 'number' && value !== 0 && !(name in _emotion_unitless__WEBPACK_IMPORTED_MODULE_3__[\"default\"])) {\n return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers\n }\n\n return String(value).trim();\n}\n\n// \n\n/**\n * It's falsish not falsy because 0 is allowed.\n */\nvar isFalsish = function isFalsish(chunk) {\n return chunk === undefined || chunk === null || chunk === false || chunk === '';\n};\n\nvar objToCss = function objToCss(obj, prevKey) {\n var css = Object.keys(obj).filter(function (key) {\n return !isFalsish(obj[key]);\n }).map(function (key) {\n if (isPlainObject(obj[key])) return objToCss(obj[key], key);\n return hyphenateStyleName(key) + ': ' + addUnitIfNeeded(key, obj[key]) + ';';\n }).join(' ');\n return prevKey ? prevKey + ' {\\n ' + css + '\\n}' : css;\n};\n\nfunction flatten(chunk, executionContext, styleSheet) {\n if (Array.isArray(chunk)) {\n var ruleSet = [];\n\n for (var i = 0, len = chunk.length, result; i < len; i += 1) {\n result = flatten(chunk[i], executionContext, styleSheet);\n\n if (result === null) continue;else if (Array.isArray(result)) ruleSet.push.apply(ruleSet, result);else ruleSet.push(result);\n }\n\n return ruleSet;\n }\n\n if (isFalsish(chunk)) {\n return null;\n }\n\n /* Handle other components */\n if (isStyledComponent(chunk)) {\n return '.' + chunk.styledComponentId;\n }\n\n /* Either execute or defer the function */\n if (isFunction(chunk)) {\n if (executionContext) {\n var shouldThrow = false;\n\n try {\n // eslint-disable-next-line new-cap\n if (Object(react_is__WEBPACK_IMPORTED_MODULE_4__[\"isElement\"])(new chunk(executionContext))) {\n shouldThrow = true;\n }\n } catch (e) {\n /* */\n }\n\n if (shouldThrow) {\n throw new StyledComponentsError(13, getComponentName(chunk));\n }\n\n return flatten(chunk(executionContext), executionContext, styleSheet);\n } else return chunk;\n }\n\n if (chunk instanceof Keyframes) {\n if (styleSheet) {\n chunk.inject(styleSheet);\n return chunk.getName();\n } else return chunk;\n }\n\n /* Handle objects */\n return isPlainObject(chunk) ? objToCss(chunk) : chunk.toString();\n}\n\n// \n\nfunction css(styles) {\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n\n if (isFunction(styles) || isPlainObject(styles)) {\n // $FlowFixMe\n return flatten(interleave(EMPTY_ARRAY, [styles].concat(interpolations)));\n }\n\n // $FlowFixMe\n return flatten(interleave(styles, interpolations));\n}\n\n// \n\nfunction constructWithOptions(componentConstructor, tag) {\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT;\n\n if (!Object(react_is__WEBPACK_IMPORTED_MODULE_4__[\"isValidElementType\"])(tag)) {\n throw new StyledComponentsError(1, String(tag));\n }\n\n /* This is callable directly as a template function */\n // $FlowFixMe: Not typed to avoid destructuring arguments\n var templateFunction = function templateFunction() {\n return componentConstructor(tag, options, css.apply(undefined, arguments));\n };\n\n /* If config methods are called, wrap up a new template function and merge options */\n templateFunction.withConfig = function (config) {\n return constructWithOptions(componentConstructor, tag, _extends({}, options, config));\n };\n\n /* Modify/inject new props at runtime */\n templateFunction.attrs = function (attrs) {\n return constructWithOptions(componentConstructor, tag, _extends({}, options, {\n attrs: Array.prototype.concat(options.attrs, attrs).filter(Boolean)\n }));\n };\n\n return templateFunction;\n}\n\n// \n// Source: https://github.com/garycourt/murmurhash-js/blob/master/murmurhash2_gc.js\nfunction murmurhash(c) {\n for (var e = c.length | 0, a = e | 0, d = 0, b; e >= 4;) {\n b = c.charCodeAt(d) & 255 | (c.charCodeAt(++d) & 255) << 8 | (c.charCodeAt(++d) & 255) << 16 | (c.charCodeAt(++d) & 255) << 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), b ^= b >>> 24, b = 1540483477 * (b & 65535) + ((1540483477 * (b >>> 16) & 65535) << 16), a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16) ^ b, e -= 4, ++d;\n }\n switch (e) {\n case 3:\n a ^= (c.charCodeAt(d + 2) & 255) << 16;\n case 2:\n a ^= (c.charCodeAt(d + 1) & 255) << 8;\n case 1:\n a ^= c.charCodeAt(d) & 255, a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n }\n a ^= a >>> 13;\n a = 1540483477 * (a & 65535) + ((1540483477 * (a >>> 16) & 65535) << 16);\n return (a ^ a >>> 15) >>> 0;\n}\n\n// \n/* eslint-disable no-bitwise */\n\n/* This is the \"capacity\" of our alphabet i.e. 2x26 for all letters plus their capitalised\n * counterparts */\nvar charsLength = 52;\n\n/* start at 75 for 'a' until 'z' (25) and then start at 65 for capitalised letters */\nvar getAlphabeticChar = function getAlphabeticChar(code) {\n return String.fromCharCode(code + (code > 25 ? 39 : 97));\n};\n\n/* input a number, usually a hash and convert it to base-52 */\nfunction generateAlphabeticName(code) {\n var name = '';\n var x = void 0;\n\n /* get a char and divide by alphabet-length */\n for (x = code; x > charsLength; x = Math.floor(x / charsLength)) {\n name = getAlphabeticChar(x % charsLength) + name;\n }\n\n return getAlphabeticChar(x % charsLength) + name;\n}\n\n// \n\nfunction hasFunctionObjectKey(obj) {\n // eslint-disable-next-line guard-for-in, no-restricted-syntax\n for (var key in obj) {\n if (isFunction(obj[key])) {\n return true;\n }\n }\n\n return false;\n}\n\nfunction isStaticRules(rules, attrs) {\n for (var i = 0; i < rules.length; i += 1) {\n var rule = rules[i];\n\n // recursive case\n if (Array.isArray(rule) && !isStaticRules(rule, attrs)) {\n return false;\n } else if (isFunction(rule) && !isStyledComponent(rule)) {\n // functions are allowed to be static if they're just being\n // used to get the classname of a nested styled component\n return false;\n }\n }\n\n if (attrs.some(function (x) {\n return isFunction(x) || hasFunctionObjectKey(x);\n })) return false;\n\n return true;\n}\n\n// \n\nvar isHMREnabled = false && false;\n\n/* combines hashStr (murmurhash) and nameGenerator for convenience */\nvar hasher = function hasher(str) {\n return generateAlphabeticName(murmurhash(str));\n};\n\n/*\n ComponentStyle is all the CSS-specific stuff, not\n the React-specific stuff.\n */\n\nvar ComponentStyle = function () {\n function ComponentStyle(rules, attrs, componentId) {\n classCallCheck(this, ComponentStyle);\n\n this.rules = rules;\n this.isStatic = !isHMREnabled && isStaticRules(rules, attrs);\n this.componentId = componentId;\n\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n\n /*\n * Flattens a rule set into valid CSS\n * Hashes it, wraps the whole chunk in a .hash1234 {}\n * Returns the hash to be injected on render()\n * */\n\n\n ComponentStyle.prototype.generateAndInjectStyles = function generateAndInjectStyles(executionContext, styleSheet) {\n var isStatic = this.isStatic,\n componentId = this.componentId,\n lastClassName = this.lastClassName;\n\n if (IS_BROWSER && isStatic && typeof lastClassName === 'string' && styleSheet.hasNameForId(componentId, lastClassName)) {\n return lastClassName;\n }\n\n var flatCSS = flatten(this.rules, executionContext, styleSheet);\n var name = hasher(this.componentId + flatCSS.join(''));\n if (!styleSheet.hasNameForId(componentId, name)) {\n styleSheet.inject(this.componentId, stringifyRules(flatCSS, '.' + name, undefined, componentId), name);\n }\n\n this.lastClassName = name;\n return name;\n };\n\n ComponentStyle.generateName = function generateName(str) {\n return hasher(str);\n };\n\n return ComponentStyle;\n}();\n\n// \n\nvar LIMIT = 200;\n\nvar createWarnTooManyClasses = (function (displayName) {\n var generatedClasses = {};\n var warningSeen = false;\n\n return function (className) {\n if (!warningSeen) {\n generatedClasses[className] = true;\n if (Object.keys(generatedClasses).length >= LIMIT) {\n // Unable to find latestRule in test environment.\n /* eslint-disable no-console, prefer-template */\n console.warn('Over ' + LIMIT + ' classes were generated for component ' + displayName + '. \\n' + 'Consider using the attrs method, together with a style object for frequently changed styles.\\n' + 'Example:\\n' + ' const Component = styled.div.attrs({\\n' + ' style: ({ background }) => ({\\n' + ' background,\\n' + ' }),\\n' + ' })`width: 100%;`\\n\\n' + ' <Component />');\n warningSeen = true;\n generatedClasses = {};\n }\n }\n };\n});\n\n// \n\nvar determineTheme = (function (props, fallbackTheme) {\n var defaultProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : EMPTY_OBJECT;\n\n // Props should take precedence over ThemeProvider, which should take precedence over\n // defaultProps, but React automatically puts defaultProps on props.\n\n /* eslint-disable react/prop-types, flowtype-errors/show-errors */\n var isDefaultTheme = defaultProps ? props.theme === defaultProps.theme : false;\n var theme = props.theme && !isDefaultTheme ? props.theme : fallbackTheme || defaultProps.theme;\n /* eslint-enable */\n\n return theme;\n});\n\n// \nvar escapeRegex = /[[\\].#*$><+~=|^:(),\"'`-]+/g;\nvar dashesAtEnds = /(^-|-$)/g;\n\n/**\n * TODO: Explore using CSS.escape when it becomes more available\n * in evergreen browsers.\n */\nfunction escape(str) {\n return str\n // Replace all possible CSS selectors\n .replace(escapeRegex, '-')\n\n // Remove extraneous hyphens at the start and end\n .replace(dashesAtEnds, '');\n}\n\n// \n\nfunction isTag(target) {\n return typeof target === 'string' && ( false ? undefined : true);\n}\n\n// \n\nfunction generateDisplayName(target) {\n // $FlowFixMe\n return isTag(target) ? 'styled.' + target : 'Styled(' + getComponentName(target) + ')';\n}\n\nvar _TYPE_STATICS;\n\nvar REACT_STATICS = {\n childContextTypes: true,\n contextTypes: true,\n defaultProps: true,\n displayName: true,\n getDerivedStateFromProps: true,\n propTypes: true,\n type: true\n};\n\nvar KNOWN_STATICS = {\n name: true,\n length: true,\n prototype: true,\n caller: true,\n callee: true,\n arguments: true,\n arity: true\n};\n\nvar TYPE_STATICS = (_TYPE_STATICS = {}, _TYPE_STATICS[react_is__WEBPACK_IMPORTED_MODULE_4__[\"ForwardRef\"]] = {\n $$typeof: true,\n render: true\n}, _TYPE_STATICS);\n\nvar defineProperty$1 = Object.defineProperty,\n getOwnPropertyNames = Object.getOwnPropertyNames,\n _Object$getOwnPropert = Object.getOwnPropertySymbols,\n getOwnPropertySymbols = _Object$getOwnPropert === undefined ? function () {\n return [];\n} : _Object$getOwnPropert,\n getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor,\n getPrototypeOf = Object.getPrototypeOf,\n objectPrototype = Object.prototype;\nvar arrayPrototype = Array.prototype;\n\n\nfunction hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {\n if (typeof sourceComponent !== 'string') {\n // don't hoist over string (html) components\n\n var inheritedComponent = getPrototypeOf(sourceComponent);\n\n if (inheritedComponent && inheritedComponent !== objectPrototype) {\n hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);\n }\n\n var keys = arrayPrototype.concat(getOwnPropertyNames(sourceComponent),\n // $FlowFixMe\n getOwnPropertySymbols(sourceComponent));\n\n var targetStatics = TYPE_STATICS[targetComponent.$$typeof] || REACT_STATICS;\n\n var sourceStatics = TYPE_STATICS[sourceComponent.$$typeof] || REACT_STATICS;\n\n var i = keys.length;\n var descriptor = void 0;\n var key = void 0;\n\n // eslint-disable-next-line no-plusplus\n while (i--) {\n key = keys[i];\n\n if (\n // $FlowFixMe\n !KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) &&\n // $FlowFixMe\n !(targetStatics && targetStatics[key])) {\n descriptor = getOwnPropertyDescriptor(sourceComponent, key);\n\n if (descriptor) {\n try {\n // Avoid failures from read-only properties\n defineProperty$1(targetComponent, key, descriptor);\n } catch (e) {\n /* fail silently */\n }\n }\n }\n }\n\n return targetComponent;\n }\n\n return targetComponent;\n}\n\n// \nfunction isDerivedReactComponent(fn) {\n return !!(fn && fn.prototype && fn.prototype.isReactComponent);\n}\n\n// \n// Helper to call a given function, only once\nvar once = (function (cb) {\n var called = false;\n\n return function () {\n if (!called) {\n called = true;\n cb.apply(undefined, arguments);\n }\n };\n});\n\n// \n\nvar ThemeContext = Object(react__WEBPACK_IMPORTED_MODULE_2__[\"createContext\"])();\n\nvar ThemeConsumer = ThemeContext.Consumer;\n\n/**\n * Provide a theme to an entire react component tree via context\n */\n\nvar ThemeProvider = function (_Component) {\n inherits(ThemeProvider, _Component);\n\n function ThemeProvider(props) {\n classCallCheck(this, ThemeProvider);\n\n var _this = possibleConstructorReturn(this, _Component.call(this, props));\n\n _this.getContext = Object(memoize_one__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(_this.getContext.bind(_this));\n _this.renderInner = _this.renderInner.bind(_this);\n return _this;\n }\n\n ThemeProvider.prototype.render = function render() {\n if (!this.props.children) return null;\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n ThemeContext.Consumer,\n null,\n this.renderInner\n );\n };\n\n ThemeProvider.prototype.renderInner = function renderInner(outerTheme) {\n var context = this.getContext(this.props.theme, outerTheme);\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n ThemeContext.Provider,\n { value: context },\n react__WEBPACK_IMPORTED_MODULE_2___default.a.Children.only(this.props.children)\n );\n };\n\n /**\n * Get the theme from the props, supporting both (outerTheme) => {}\n * as well as object notation\n */\n\n\n ThemeProvider.prototype.getTheme = function getTheme(theme, outerTheme) {\n if (isFunction(theme)) {\n var mergedTheme = theme(outerTheme);\n\n if (false) {}\n\n return mergedTheme;\n }\n\n if (theme === null || Array.isArray(theme) || (typeof theme === 'undefined' ? 'undefined' : _typeof(theme)) !== 'object') {\n throw new StyledComponentsError(8);\n }\n\n return _extends({}, outerTheme, theme);\n };\n\n ThemeProvider.prototype.getContext = function getContext(theme, outerTheme) {\n return this.getTheme(theme, outerTheme);\n };\n\n return ThemeProvider;\n}(react__WEBPACK_IMPORTED_MODULE_2__[\"Component\"]);\n\n// \n\nvar ServerStyleSheet = function () {\n function ServerStyleSheet() {\n classCallCheck(this, ServerStyleSheet);\n\n /* The master sheet might be reset, so keep a reference here */\n this.masterSheet = StyleSheet.master;\n this.instance = this.masterSheet.clone();\n this.sealed = false;\n }\n\n /**\n * Mark the ServerStyleSheet as being fully emitted and manually GC it from the\n * StyleSheet singleton.\n */\n\n\n ServerStyleSheet.prototype.seal = function seal() {\n if (!this.sealed) {\n /* Remove sealed StyleSheets from the master sheet */\n var index = this.masterSheet.clones.indexOf(this.instance);\n this.masterSheet.clones.splice(index, 1);\n this.sealed = true;\n }\n };\n\n ServerStyleSheet.prototype.collectStyles = function collectStyles(children) {\n if (this.sealed) {\n throw new StyledComponentsError(2);\n }\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n StyleSheetManager,\n { sheet: this.instance },\n children\n );\n };\n\n ServerStyleSheet.prototype.getStyleTags = function getStyleTags() {\n this.seal();\n return this.instance.toHTML();\n };\n\n ServerStyleSheet.prototype.getStyleElement = function getStyleElement() {\n this.seal();\n return this.instance.toReactElements();\n };\n\n ServerStyleSheet.prototype.interleaveWithNodeStream = function interleaveWithNodeStream(readableStream) {\n var _this = this;\n\n {\n throw new StyledComponentsError(3);\n }\n\n /* the tag index keeps track of which tags have already been emitted */\n var instance = this.instance;\n\n var instanceTagIndex = 0;\n\n var streamAttr = SC_STREAM_ATTR + '=\"true\"';\n\n var transformer = new stream.Transform({\n transform: function appendStyleChunks(chunk, /* encoding */_, callback) {\n var tags = instance.tags;\n\n var html = '';\n\n /* retrieve html for each new style tag */\n for (; instanceTagIndex < tags.length; instanceTagIndex += 1) {\n var tag = tags[instanceTagIndex];\n html += tag.toHTML(streamAttr);\n }\n\n /* force our StyleSheets to emit entirely new tags */\n instance.sealAllTags();\n\n /* prepend style html to chunk */\n this.push(html + chunk);\n callback();\n }\n });\n\n readableStream.on('end', function () {\n return _this.seal();\n });\n readableStream.on('error', function (err) {\n _this.seal();\n\n // forward the error to the transform stream\n transformer.emit('error', err);\n });\n\n return readableStream.pipe(transformer);\n };\n\n return ServerStyleSheet;\n}();\n\n// \n\nvar StyleSheetContext = Object(react__WEBPACK_IMPORTED_MODULE_2__[\"createContext\"])();\n\nvar StyleSheetConsumer = StyleSheetContext.Consumer;\n\nvar StyleSheetManager = function (_Component) {\n inherits(StyleSheetManager, _Component);\n\n function StyleSheetManager(props) {\n classCallCheck(this, StyleSheetManager);\n\n var _this = possibleConstructorReturn(this, _Component.call(this, props));\n\n _this.getContext = Object(memoize_one__WEBPACK_IMPORTED_MODULE_5__[\"default\"])(_this.getContext);\n return _this;\n }\n\n StyleSheetManager.prototype.getContext = function getContext(sheet, target) {\n if (sheet) {\n return sheet;\n } else if (target) {\n return new StyleSheet(target);\n } else {\n throw new StyledComponentsError(4);\n }\n };\n\n StyleSheetManager.prototype.render = function render() {\n var _props = this.props,\n children = _props.children,\n sheet = _props.sheet,\n target = _props.target;\n\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n StyleSheetContext.Provider,\n { value: this.getContext(sheet, target) },\n false ? undefined : children\n );\n };\n\n return StyleSheetManager;\n}(react__WEBPACK_IMPORTED_MODULE_2__[\"Component\"]);\n false ? undefined : void 0;\n\n// \n\nvar didWarnAboutClassNameUsage = new Set();\n\nvar classNameUsageCheckInjector = (function (target) {\n var elementClassName = '';\n\n var targetCDM = target.componentDidMount;\n\n // eslint-disable-next-line no-param-reassign\n target.componentDidMount = function componentDidMount() {\n if (typeof targetCDM === 'function') {\n targetCDM.call(this);\n }\n\n var forwardTarget = this.props.forwardedComponent.target;\n\n if (target.props && target.props.suppressClassNameWarning || target.attrs && target.attrs.suppressClassNameWarning || didWarnAboutClassNameUsage.has(forwardTarget)) {\n return;\n }\n\n didWarnAboutClassNameUsage.add(forwardTarget);\n\n var classNames = elementClassName.replace(/ +/g, ' ').trim().split(' ');\n // eslint-disable-next-line react/no-find-dom-node\n var node = react_dom__WEBPACK_IMPORTED_MODULE_7___default.a.findDOMNode(this);\n var selector = classNames.map(function (s) {\n return '.' + s;\n }).join('');\n\n if (node && node.nodeType === 1 && !classNames.every(function (className) {\n return node.classList && node.classList.contains(className);\n }) && !node.querySelector(selector)) {\n console.warn('It looks like you\\'ve wrapped styled() around your React component (' + getComponentName(forwardTarget) + '), but the className prop is not being passed down to a child. No styles will be rendered unless className is composed within your React component.');\n }\n };\n\n var prevRenderInner = target.renderInner;\n\n // eslint-disable-next-line no-param-reassign\n target.renderInner = function renderInner() {\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var element = prevRenderInner.apply(this, args);\n\n elementClassName = element.props.className;\n\n return element;\n };\n});\n\n// \n\nvar identifiers = {};\n\n/* We depend on components having unique IDs */\nfunction generateId(_ComponentStyle, _displayName, parentComponentId) {\n var displayName = typeof _displayName !== 'string' ? 'sc' : escape(_displayName);\n\n /**\n * This ensures uniqueness if two components happen to share\n * the same displayName.\n */\n var nr = (identifiers[displayName] || 0) + 1;\n identifiers[displayName] = nr;\n\n var componentId = displayName + '-' + _ComponentStyle.generateName(displayName + nr);\n\n return parentComponentId ? parentComponentId + '-' + componentId : componentId;\n}\n\n// $FlowFixMe\n\nvar StyledComponent = function (_Component) {\n inherits(StyledComponent, _Component);\n\n function StyledComponent() {\n classCallCheck(this, StyledComponent);\n\n var _this = possibleConstructorReturn(this, _Component.call(this));\n\n _this.attrs = {};\n\n _this.renderOuter = _this.renderOuter.bind(_this);\n _this.renderInner = _this.renderInner.bind(_this);\n\n if (false) {}\n\n if (false) {}\n return _this;\n }\n\n StyledComponent.prototype.render = function render() {\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n StyleSheetConsumer,\n null,\n this.renderOuter\n );\n };\n\n StyledComponent.prototype.renderOuter = function renderOuter() {\n var styleSheet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : StyleSheet.master;\n\n this.styleSheet = styleSheet;\n\n // No need to subscribe a static component to theme changes, it won't change anything\n if (this.props.forwardedComponent.componentStyle.isStatic) return this.renderInner();\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n ThemeConsumer,\n null,\n this.renderInner\n );\n };\n\n StyledComponent.prototype.renderInner = function renderInner(theme) {\n var _props$forwardedCompo = this.props.forwardedComponent,\n componentStyle = _props$forwardedCompo.componentStyle,\n defaultProps = _props$forwardedCompo.defaultProps,\n displayName = _props$forwardedCompo.displayName,\n foldedComponentIds = _props$forwardedCompo.foldedComponentIds,\n styledComponentId = _props$forwardedCompo.styledComponentId,\n target = _props$forwardedCompo.target;\n\n\n var generatedClassName = void 0;\n if (componentStyle.isStatic) {\n generatedClassName = this.generateAndInjectStyles(EMPTY_OBJECT, this.props);\n } else if (theme !== undefined) {\n generatedClassName = this.generateAndInjectStyles(determineTheme(this.props, theme, defaultProps), this.props);\n } else {\n generatedClassName = this.generateAndInjectStyles(this.props.theme || EMPTY_OBJECT, this.props);\n }\n\n var elementToBeCreated = this.props.as || this.attrs.as || target;\n var isTargetTag = isTag(elementToBeCreated);\n\n var propsForElement = {};\n var computedProps = _extends({}, this.attrs, this.props);\n\n var key = void 0;\n // eslint-disable-next-line guard-for-in\n for (key in computedProps) {\n if (false) {}\n\n if (key === 'forwardedComponent' || key === 'as') continue;else if (key === 'forwardedRef') propsForElement.ref = computedProps[key];else if (!isTargetTag || Object(_emotion_is_prop_valid__WEBPACK_IMPORTED_MODULE_8__[\"default\"])(key)) {\n // Don't pass through non HTML tags through to HTML elements\n propsForElement[key] = computedProps[key];\n }\n }\n\n if (this.props.style && this.attrs.style) {\n propsForElement.style = _extends({}, this.attrs.style, this.props.style);\n }\n\n propsForElement.className = Array.prototype.concat(foldedComponentIds, this.props.className, styledComponentId, this.attrs.className, generatedClassName).filter(Boolean).join(' ');\n\n return Object(react__WEBPACK_IMPORTED_MODULE_2__[\"createElement\"])(elementToBeCreated, propsForElement);\n };\n\n StyledComponent.prototype.buildExecutionContext = function buildExecutionContext(theme, props, attrs) {\n var _this2 = this;\n\n var context = _extends({}, props, { theme: theme });\n\n if (!attrs.length) return context;\n\n this.attrs = {};\n\n attrs.forEach(function (attrDef) {\n var resolvedAttrDef = attrDef;\n var attrDefWasFn = false;\n var attr = void 0;\n var key = void 0;\n\n if (isFunction(resolvedAttrDef)) {\n // $FlowFixMe\n resolvedAttrDef = resolvedAttrDef(context);\n attrDefWasFn = true;\n }\n\n /* eslint-disable guard-for-in */\n // $FlowFixMe\n for (key in resolvedAttrDef) {\n attr = resolvedAttrDef[key];\n\n if (!attrDefWasFn) {\n if (isFunction(attr) && !isDerivedReactComponent(attr) && !isStyledComponent(attr)) {\n if (false) {}\n\n attr = attr(context);\n\n if (false) {}\n }\n }\n\n _this2.attrs[key] = attr;\n context[key] = attr;\n }\n /* eslint-enable */\n });\n\n return context;\n };\n\n StyledComponent.prototype.generateAndInjectStyles = function generateAndInjectStyles(theme, props) {\n var _props$forwardedCompo2 = props.forwardedComponent,\n attrs = _props$forwardedCompo2.attrs,\n componentStyle = _props$forwardedCompo2.componentStyle,\n warnTooManyClasses = _props$forwardedCompo2.warnTooManyClasses;\n\n // statically styled-components don't need to build an execution context object,\n // and shouldn't be increasing the number of class names\n\n if (componentStyle.isStatic && !attrs.length) {\n return componentStyle.generateAndInjectStyles(EMPTY_OBJECT, this.styleSheet);\n }\n\n var className = componentStyle.generateAndInjectStyles(this.buildExecutionContext(theme, props, attrs), this.styleSheet);\n\n if (false) {}\n\n return className;\n };\n\n return StyledComponent;\n}(react__WEBPACK_IMPORTED_MODULE_2__[\"Component\"]);\n\nfunction createStyledComponent(target, options, rules) {\n var isTargetStyledComp = isStyledComponent(target);\n var isClass = !isTag(target);\n\n var _options$displayName = options.displayName,\n displayName = _options$displayName === undefined ? generateDisplayName(target) : _options$displayName,\n _options$componentId = options.componentId,\n componentId = _options$componentId === undefined ? generateId(ComponentStyle, options.displayName, options.parentComponentId) : _options$componentId,\n _options$ParentCompon = options.ParentComponent,\n ParentComponent = _options$ParentCompon === undefined ? StyledComponent : _options$ParentCompon,\n _options$attrs = options.attrs,\n attrs = _options$attrs === undefined ? EMPTY_ARRAY : _options$attrs;\n\n\n var styledComponentId = options.displayName && options.componentId ? escape(options.displayName) + '-' + options.componentId : options.componentId || componentId;\n\n // fold the underlying StyledComponent attrs up (implicit extend)\n var finalAttrs =\n // $FlowFixMe\n isTargetStyledComp && target.attrs ? Array.prototype.concat(target.attrs, attrs).filter(Boolean) : attrs;\n\n var componentStyle = new ComponentStyle(isTargetStyledComp ? // fold the underlying StyledComponent rules up (implicit extend)\n // $FlowFixMe\n target.componentStyle.rules.concat(rules) : rules, finalAttrs, styledComponentId);\n\n /**\n * forwardRef creates a new interim component, which we'll take advantage of\n * instead of extending ParentComponent to create _another_ interim class\n */\n var WrappedStyledComponent = react__WEBPACK_IMPORTED_MODULE_2___default.a.forwardRef(function (props, ref) {\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(ParentComponent, _extends({}, props, { forwardedComponent: WrappedStyledComponent, forwardedRef: ref }));\n });\n\n // $FlowFixMe\n WrappedStyledComponent.attrs = finalAttrs;\n // $FlowFixMe\n WrappedStyledComponent.componentStyle = componentStyle;\n WrappedStyledComponent.displayName = displayName;\n\n // $FlowFixMe\n WrappedStyledComponent.foldedComponentIds = isTargetStyledComp ? // $FlowFixMe\n Array.prototype.concat(target.foldedComponentIds, target.styledComponentId) : EMPTY_ARRAY;\n\n // $FlowFixMe\n WrappedStyledComponent.styledComponentId = styledComponentId;\n\n // fold the underlying StyledComponent target up since we folded the styles\n // $FlowFixMe\n WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;\n\n // $FlowFixMe\n WrappedStyledComponent.withComponent = function withComponent(tag) {\n var previousComponentId = options.componentId,\n optionsToCopy = objectWithoutProperties(options, ['componentId']);\n\n\n var newComponentId = previousComponentId && previousComponentId + '-' + (isTag(tag) ? tag : escape(getComponentName(tag)));\n\n var newOptions = _extends({}, optionsToCopy, {\n attrs: finalAttrs,\n componentId: newComponentId,\n ParentComponent: ParentComponent\n });\n\n return createStyledComponent(tag, newOptions, rules);\n };\n\n if (false) {}\n\n // $FlowFixMe\n WrappedStyledComponent.toString = function () {\n return '.' + WrappedStyledComponent.styledComponentId;\n };\n\n if (isClass) {\n hoistNonReactStatics(WrappedStyledComponent, target, {\n // all SC-specific things should not be hoisted\n attrs: true,\n componentStyle: true,\n displayName: true,\n foldedComponentIds: true,\n styledComponentId: true,\n target: true,\n withComponent: true\n });\n }\n\n return WrappedStyledComponent;\n}\n\n// \n// Thanks to ReactDOMFactories for this handy list!\n\nvar domElements = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'big', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'keygen', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr',\n\n// SVG\n'circle', 'clipPath', 'defs', 'ellipse', 'foreignObject', 'g', 'image', 'line', 'linearGradient', 'mask', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'stop', 'svg', 'text', 'tspan'];\n\n// \n\nvar styled = function styled(tag) {\n return constructWithOptions(createStyledComponent, tag);\n};\n\n// Shorthands for all valid HTML Elements\ndomElements.forEach(function (domElement) {\n styled[domElement] = styled(domElement);\n});\n\n// \n\nvar GlobalStyle = function () {\n function GlobalStyle(rules, componentId) {\n classCallCheck(this, GlobalStyle);\n\n this.rules = rules;\n this.componentId = componentId;\n this.isStatic = isStaticRules(rules, EMPTY_ARRAY);\n\n if (!StyleSheet.master.hasId(componentId)) {\n StyleSheet.master.deferredInject(componentId, []);\n }\n }\n\n GlobalStyle.prototype.createStyles = function createStyles(executionContext, styleSheet) {\n var flatCSS = flatten(this.rules, executionContext, styleSheet);\n var css = stringifyRules(flatCSS, '');\n\n styleSheet.inject(this.componentId, css);\n };\n\n GlobalStyle.prototype.removeStyles = function removeStyles(styleSheet) {\n var componentId = this.componentId;\n\n if (styleSheet.hasId(componentId)) {\n styleSheet.remove(componentId);\n }\n };\n\n // TODO: overwrite in-place instead of remove+create?\n\n\n GlobalStyle.prototype.renderStyles = function renderStyles(executionContext, styleSheet) {\n this.removeStyles(styleSheet);\n this.createStyles(executionContext, styleSheet);\n };\n\n return GlobalStyle;\n}();\n\n// \n\n// place our cache into shared context so it'll persist between HMRs\nif (IS_BROWSER) {\n window.scCGSHMRCache = {};\n}\n\nfunction createGlobalStyle(strings) {\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n\n var rules = css.apply(undefined, [strings].concat(interpolations));\n var id = 'sc-global-' + murmurhash(JSON.stringify(rules));\n var style = new GlobalStyle(rules, id);\n\n var GlobalStyleComponent = function (_React$Component) {\n inherits(GlobalStyleComponent, _React$Component);\n\n function GlobalStyleComponent() {\n classCallCheck(this, GlobalStyleComponent);\n\n var _this = possibleConstructorReturn(this, _React$Component.call(this));\n\n var _this$constructor = _this.constructor,\n globalStyle = _this$constructor.globalStyle,\n styledComponentId = _this$constructor.styledComponentId;\n\n\n if (IS_BROWSER) {\n window.scCGSHMRCache[styledComponentId] = (window.scCGSHMRCache[styledComponentId] || 0) + 1;\n }\n\n /**\n * This fixes HMR compatibility. Don't ask me why, but this combination of\n * caching the closure variables via statics and then persisting the statics in\n * state works across HMR where no other combination did. ¯\\_(ツ)_/¯\n */\n _this.state = {\n globalStyle: globalStyle,\n styledComponentId: styledComponentId\n };\n return _this;\n }\n\n GlobalStyleComponent.prototype.componentWillUnmount = function componentWillUnmount() {\n if (window.scCGSHMRCache[this.state.styledComponentId]) {\n window.scCGSHMRCache[this.state.styledComponentId] -= 1;\n }\n /**\n * Depending on the order \"render\" is called this can cause the styles to be lost\n * until the next render pass of the remaining instance, which may\n * not be immediate.\n */\n if (window.scCGSHMRCache[this.state.styledComponentId] === 0) {\n this.state.globalStyle.removeStyles(this.styleSheet);\n }\n };\n\n GlobalStyleComponent.prototype.render = function render() {\n var _this2 = this;\n\n if (false) {}\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n StyleSheetConsumer,\n null,\n function (styleSheet) {\n _this2.styleSheet = styleSheet || StyleSheet.master;\n\n var globalStyle = _this2.state.globalStyle;\n\n\n if (globalStyle.isStatic) {\n globalStyle.renderStyles(STATIC_EXECUTION_CONTEXT, _this2.styleSheet);\n\n return null;\n } else {\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n ThemeConsumer,\n null,\n function (theme) {\n // $FlowFixMe\n var defaultProps = _this2.constructor.defaultProps;\n\n\n var context = _extends({}, _this2.props);\n\n if (typeof theme !== 'undefined') {\n context.theme = determineTheme(_this2.props, theme, defaultProps);\n }\n\n globalStyle.renderStyles(context, _this2.styleSheet);\n\n return null;\n }\n );\n }\n }\n );\n };\n\n return GlobalStyleComponent;\n }(react__WEBPACK_IMPORTED_MODULE_2___default.a.Component);\n\n GlobalStyleComponent.globalStyle = style;\n GlobalStyleComponent.styledComponentId = id;\n\n\n return GlobalStyleComponent;\n}\n\n// \n\nvar replaceWhitespace = function replaceWhitespace(str) {\n return str.replace(/\\s|\\\\n/g, '');\n};\n\nfunction keyframes(strings) {\n /* Warning if you've used keyframes on React Native */\n if (false) {}\n\n for (var _len = arguments.length, interpolations = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n interpolations[_key - 1] = arguments[_key];\n }\n\n var rules = css.apply(undefined, [strings].concat(interpolations));\n\n var name = generateAlphabeticName(murmurhash(replaceWhitespace(JSON.stringify(rules))));\n\n return new Keyframes(name, stringifyRules(rules, name, '@keyframes'));\n}\n\n// \n\nvar withTheme = (function (Component$$1) {\n var WithTheme = react__WEBPACK_IMPORTED_MODULE_2___default.a.forwardRef(function (props, ref) {\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(\n ThemeConsumer,\n null,\n function (theme) {\n // $FlowFixMe\n var defaultProps = Component$$1.defaultProps;\n\n var themeProp = determineTheme(props, theme, defaultProps);\n\n if (false) {}\n\n return react__WEBPACK_IMPORTED_MODULE_2___default.a.createElement(Component$$1, _extends({}, props, { theme: themeProp, ref: ref }));\n }\n );\n });\n\n hoistNonReactStatics(WithTheme, Component$$1);\n\n WithTheme.displayName = 'WithTheme(' + getComponentName(Component$$1) + ')';\n\n return WithTheme;\n});\n\n// \n\n/* eslint-disable */\nvar __DO_NOT_USE_OR_YOU_WILL_BE_HAUNTED_BY_SPOOKY_GHOSTS = {\n StyleSheet: StyleSheet\n};\n\n// \n\n/* Warning if you've imported this file on React Native */\nif (false) {}\n\n/* Warning if there are several instances of styled-components */\nif (false) {}\n\n//\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (styled);\n\n//# sourceMappingURL=styled-components.browser.esm.js.map\n\n/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../process/browser.js */ \"./node_modules/process/browser.js\")))\n\n//# sourceURL=webpack://editor/./node_modules/styled-components/dist/styled-components.browser.esm.js?");
/***/ }),
/***/ "./node_modules/stylis-rule-sheet/index.js":
/*!*************************************************!*\
!*** ./node_modules/stylis-rule-sheet/index.js ***!
\*************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("(function (factory) {\n\t true ? (module['exports'] = factory()) :\n\t\tundefined\n}(function () {\n\n\t'use strict'\n\n\treturn function (insertRule) {\n\t\tvar delimiter = '/*|*/'\n\t\tvar needle = delimiter+'}'\n\n\t\tfunction toSheet (block) {\n\t\t\tif (block)\n\t\t\t\ttry {\n\t\t\t\t\tinsertRule(block + '}')\n\t\t\t\t} catch (e) {}\n\t\t}\n\n\t\treturn function ruleSheet (context, content, selectors, parents, line, column, length, ns, depth, at) {\n\t\t\tswitch (context) {\n\t\t\t\t// property\n\t\t\t\tcase 1:\n\t\t\t\t\t// @import\n\t\t\t\t\tif (depth === 0 && content.charCodeAt(0) === 64)\n\t\t\t\t\t\treturn insertRule(content+';'), ''\n\t\t\t\t\tbreak\n\t\t\t\t// selector\n\t\t\t\tcase 2:\n\t\t\t\t\tif (ns === 0)\n\t\t\t\t\t\treturn content + delimiter\n\t\t\t\t\tbreak\n\t\t\t\t// at-rule\n\t\t\t\tcase 3:\n\t\t\t\t\tswitch (ns) {\n\t\t\t\t\t\t// @font-face, @page\n\t\t\t\t\t\tcase 102:\n\t\t\t\t\t\tcase 112:\n\t\t\t\t\t\t\treturn insertRule(selectors[0]+content), ''\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn content + (at === 0 ? delimiter : '')\n\t\t\t\t\t}\n\t\t\t\tcase -2:\n\t\t\t\t\tcontent.split(needle).forEach(toSheet)\n\t\t\t}\n\t\t}\n\t}\n}))\n\n\n//# sourceURL=webpack://editor/./node_modules/stylis-rule-sheet/index.js?");
/***/ }),
/***/ "./node_modules/stylis/stylis.min.js":
/*!*******************************************!*\
!*** ./node_modules/stylis/stylis.min.js ***!
\*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("!function(e){ true?module.exports=e(null):undefined}(function e(a){\"use strict\";var r=/^\\0+/g,c=/[\\0\\r\\f]/g,s=/: */g,t=/zoo|gra/,i=/([,: ])(transform)/g,f=/,+\\s*(?![^(]*[)])/g,n=/ +\\s*(?![^(]*[)])/g,l=/ *[\\0] */g,o=/,\\r+?/g,h=/([\\t\\r\\n ])*\\f?&/g,u=/:global\\(((?:[^\\(\\)\\[\\]]*|\\[.*\\]|\\([^\\(\\)]*\\))*)\\)/g,d=/\\W+/g,b=/@(k\\w+)\\s*(\\S*)\\s*/,p=/::(place)/g,k=/:(read-only)/g,g=/\\s+(?=[{\\];=:>])/g,A=/([[}=:>])\\s+/g,C=/(\\{[^{]+?);(?=\\})/g,w=/\\s{2,}/g,v=/([^\\(])(:+) */g,m=/[svh]\\w+-[tblr]{2}/,x=/\\(\\s*(.*)\\s*\\)/g,$=/([\\s\\S]*?);/g,y=/-self|flex-/g,O=/[^]*?(:[rp][el]a[\\w-]+)[^]*/,j=/stretch|:\\s*\\w+\\-(?:conte|avail)/,z=/([^-])(image-set\\()/,N=\"-webkit-\",S=\"-moz-\",F=\"-ms-\",W=59,q=125,B=123,D=40,E=41,G=91,H=93,I=10,J=13,K=9,L=64,M=32,P=38,Q=45,R=95,T=42,U=44,V=58,X=39,Y=34,Z=47,_=62,ee=43,ae=126,re=0,ce=12,se=11,te=107,ie=109,fe=115,ne=112,le=111,oe=105,he=99,ue=100,de=112,be=1,pe=1,ke=0,ge=1,Ae=1,Ce=1,we=0,ve=0,me=0,xe=[],$e=[],ye=0,Oe=null,je=-2,ze=-1,Ne=0,Se=1,Fe=2,We=3,qe=0,Be=1,De=\"\",Ee=\"\",Ge=\"\";function He(e,a,s,t,i){for(var f,n,o=0,h=0,u=0,d=0,g=0,A=0,C=0,w=0,m=0,$=0,y=0,O=0,j=0,z=0,R=0,we=0,$e=0,Oe=0,je=0,ze=s.length,Je=ze-1,Re=\"\",Te=\"\",Ue=\"\",Ve=\"\",Xe=\"\",Ye=\"\";R<ze;){if(C=s.charCodeAt(R),R===Je)if(h+d+u+o!==0){if(0!==h)C=h===Z?I:Z;d=u=o=0,ze++,Je++}if(h+d+u+o===0){if(R===Je){if(we>0)Te=Te.replace(c,\"\");if(Te.trim().length>0){switch(C){case M:case K:case W:case J:case I:break;default:Te+=s.charAt(R)}C=W}}if(1===$e)switch(C){case B:case q:case W:case Y:case X:case D:case E:case U:$e=0;case K:case J:case I:case M:break;default:for($e=0,je=R,g=C,R--,C=W;je<ze;)switch(s.charCodeAt(je++)){case I:case J:case W:++R,C=g,je=ze;break;case V:if(we>0)++R,C=g;case B:je=ze}}switch(C){case B:for(g=(Te=Te.trim()).charCodeAt(0),y=1,je=++R;R<ze;){switch(C=s.charCodeAt(R)){case B:y++;break;case q:y--;break;case Z:switch(A=s.charCodeAt(R+1)){case T:case Z:R=Qe(A,R,Je,s)}break;case G:C++;case D:C++;case Y:case X:for(;R++<Je&&s.charCodeAt(R)!==C;);}if(0===y)break;R++}if(Ue=s.substring(je,R),g===re)g=(Te=Te.replace(r,\"\").trim()).charCodeAt(0);switch(g){case L:if(we>0)Te=Te.replace(c,\"\");switch(A=Te.charCodeAt(1)){case ue:case ie:case fe:case Q:f=a;break;default:f=xe}if(je=(Ue=He(a,f,Ue,A,i+1)).length,me>0&&0===je)je=Te.length;if(ye>0)if(f=Ie(xe,Te,Oe),n=Pe(We,Ue,f,a,pe,be,je,A,i,t),Te=f.join(\"\"),void 0!==n)if(0===(je=(Ue=n.trim()).length))A=0,Ue=\"\";if(je>0)switch(A){case fe:Te=Te.replace(x,Me);case ue:case ie:case Q:Ue=Te+\"{\"+Ue+\"}\";break;case te:if(Ue=(Te=Te.replace(b,\"$1 $2\"+(Be>0?De:\"\")))+\"{\"+Ue+\"}\",1===Ae||2===Ae&&Le(\"@\"+Ue,3))Ue=\"@\"+N+Ue+\"@\"+Ue;else Ue=\"@\"+Ue;break;default:if(Ue=Te+Ue,t===de)Ve+=Ue,Ue=\"\"}else Ue=\"\";break;default:Ue=He(a,Ie(a,Te,Oe),Ue,t,i+1)}Xe+=Ue,O=0,$e=0,z=0,we=0,Oe=0,j=0,Te=\"\",Ue=\"\",C=s.charCodeAt(++R);break;case q:case W:if((je=(Te=(we>0?Te.replace(c,\"\"):Te).trim()).length)>1){if(0===z)if((g=Te.charCodeAt(0))===Q||g>96&&g<123)je=(Te=Te.replace(\" \",\":\")).length;if(ye>0)if(void 0!==(n=Pe(Se,Te,a,e,pe,be,Ve.length,t,i,t)))if(0===(je=(Te=n.trim()).length))Te=\"\\0\\0\";switch(g=Te.charCodeAt(0),A=Te.charCodeAt(1),g){case re:break;case L:if(A===oe||A===he){Ye+=Te+s.charAt(R);break}default:if(Te.charCodeAt(je-1)===V)break;Ve+=Ke(Te,g,A,Te.charCodeAt(2))}}O=0,$e=0,z=0,we=0,Oe=0,Te=\"\",C=s.charCodeAt(++R)}}switch(C){case J:case I:if(h+d+u+o+ve===0)switch($){case E:case X:case Y:case L:case ae:case _:case T:case ee:case Z:case Q:case V:case U:case W:case B:case q:break;default:if(z>0)$e=1}if(h===Z)h=0;else if(ge+O===0&&t!==te&&Te.length>0)we=1,Te+=\"\\0\";if(ye*qe>0)Pe(Ne,Te,a,e,pe,be,Ve.length,t,i,t);be=1,pe++;break;case W:case q:if(h+d+u+o===0){be++;break}default:switch(be++,Re=s.charAt(R),C){case K:case M:if(d+o+h===0)switch(w){case U:case V:case K:case M:Re=\"\";break;default:if(C!==M)Re=\" \"}break;case re:Re=\"\\\\0\";break;case ce:Re=\"\\\\f\";break;case se:Re=\"\\\\v\";break;case P:if(d+h+o===0&&ge>0)Oe=1,we=1,Re=\"\\f\"+Re;break;case 108:if(d+h+o+ke===0&&z>0)switch(R-z){case 2:if(w===ne&&s.charCodeAt(R-3)===V)ke=w;case 8:if(m===le)ke=m}break;case V:if(d+h+o===0)z=R;break;case U:if(h+u+d+o===0)we=1,Re+=\"\\r\";break;case Y:case X:if(0===h)d=d===C?0:0===d?C:d;break;case G:if(d+h+u===0)o++;break;case H:if(d+h+u===0)o--;break;case E:if(d+h+o===0)u--;break;case D:if(d+h+o===0){if(0===O)switch(2*w+3*m){case 533:break;default:y=0,O=1}u++}break;case L:if(h+u+d+o+z+j===0)j=1;break;case T:case Z:if(d+o+u>0)break;switch(h){case 0:switch(2*C+3*s.charCodeAt(R+1)){case 235:h=Z;break;case 220:je=R,h=T}break;case T:if(C===Z&&w===T&&je+2!==R){if(33===s.charCodeAt(je+2))Ve+=s.substring(je,R+1);Re=\"\",h=0}}}if(0===h){if(ge+d+o+j===0&&t!==te&&C!==W)switch(C){case U:case ae:case _:case ee:case E:case D:if(0===O){switch(w){case K:case M:case I:case J:Re+=\"\\0\";break;default:Re=\"\\0\"+Re+(C===U?\"\":\"\\0\")}we=1}else switch(C){case D:if(z+7===R&&108===w)z=0;O=++y;break;case E:if(0==(O=--y))we=1,Re+=\"\\0\"}break;case K:case M:switch(w){case re:case B:case q:case W:case U:case ce:case K:case M:case I:case J:break;default:if(0===O)we=1,Re+=\"\\0\"}}if(Te+=Re,C!==M&&C!==K)$=C}}m=w,w=C,R++}if(je=Ve.length,me>0)if(0===je&&0===Xe.length&&0===a[0].length==false)if(t!==ie||1===a.length&&(ge>0?Ee:Ge)===a[0])je=a.join(\",\").length+2;if(je>0){if(f=0===ge&&t!==te?function(e){for(var a,r,s=0,t=e.length,i=Array(t);s<t;++s){for(var f=e[s].split(l),n=\"\",o=0,h=0,u=0,d=0,b=f.length;o<b;++o){if(0===(h=(r=f[o]).length)&&b>1)continue;if(u=n.charCodeAt(n.length-1),d=r.charCodeAt(0),a=\"\",0!==o)switch(u){case T:case ae:case _:case ee:case M:case D:break;default:a=\" \"}switch(d){case P:r=a+Ee;case ae:case _:case ee:case M:case E:case D:break;case G:r=a+r+Ee;break;case V:switch(2*r.charCodeAt(1)+3*r.charCodeAt(2)){case 530:if(Ce>0){r=a+r.substring(8,h-1);break}default:if(o<1||f[o-1].length<1)r=a+Ee+r}break;case U:a=\"\";default:if(h>1&&r.indexOf(\":\")>0)r=a+r.replace(v,\"$1\"+Ee+\"$2\");else r=a+r+Ee}n+=r}i[s]=n.replace(c,\"\").trim()}return i}(a):a,ye>0)if(void 0!==(n=Pe(Fe,Ve,f,e,pe,be,je,t,i,t))&&0===(Ve=n).length)return Ye+Ve+Xe;if(Ve=f.join(\",\")+\"{\"+Ve+\"}\",Ae*ke!=0){if(2===Ae&&!Le(Ve,2))ke=0;switch(ke){case le:Ve=Ve.replace(k,\":\"+S+\"$1\")+Ve;break;case ne:Ve=Ve.replace(p,\"::\"+N+\"input-$1\")+Ve.replace(p,\"::\"+S+\"$1\")+Ve.replace(p,\":\"+F+\"input-$1\")+Ve}ke=0}}return Ye+Ve+Xe}function Ie(e,a,r){var c=a.trim().split(o),s=c,t=c.length,i=e.length;switch(i){case 0:case 1:for(var f=0,n=0===i?\"\":e[0]+\" \";f<t;++f)s[f]=Je(n,s[f],r,i).trim();break;default:f=0;var l=0;for(s=[];f<t;++f)for(var h=0;h<i;++h)s[l++]=Je(e[h]+\" \",c[f],r,i).trim()}return s}function Je(e,a,r,c){var s=a,t=s.charCodeAt(0);if(t<33)t=(s=s.trim()).charCodeAt(0);switch(t){case P:switch(ge+c){case 0:case 1:if(0===e.trim().length)break;default:return s.replace(h,\"$1\"+e.trim())}break;case V:switch(s.charCodeAt(1)){case 103:if(Ce>0&&ge>0)return s.replace(u,\"$1\").replace(h,\"$1\"+Ge);break;default:return e.trim()+s.replace(h,\"$1\"+e.trim())}default:if(r*ge>0&&s.indexOf(\"\\f\")>0)return s.replace(h,(e.charCodeAt(0)===V?\"\":\"$1\")+e.trim())}return e+s}function Ke(e,a,r,c){var l,o=0,h=e+\";\",u=2*a+3*r+4*c;if(944===u)return function(e){var a=e.length,r=e.indexOf(\":\",9)+1,c=e.substring(0,r).trim(),s=e.substring(r,a-1).trim();switch(e.charCodeAt(9)*Be){case 0:break;case Q:if(110!==e.charCodeAt(10))break;default:for(var t=s.split((s=\"\",f)),i=0,r=0,a=t.length;i<a;r=0,++i){for(var l=t[i],o=l.split(n);l=o[r];){var h=l.charCodeAt(0);if(1===Be&&(h>L&&h<90||h>96&&h<123||h===R||h===Q&&l.charCodeAt(1)!==Q))switch(isNaN(parseFloat(l))+(-1!==l.indexOf(\"(\"))){case 1:switch(l){case\"infinite\":case\"alternate\":case\"backwards\":case\"running\":case\"normal\":case\"forwards\":case\"both\":case\"none\":case\"linear\":case\"ease\":case\"ease-in\":case\"ease-out\":case\"ease-in-out\":case\"paused\":case\"reverse\":case\"alternate-reverse\":case\"inherit\":case\"initial\":case\"unset\":case\"step-start\":case\"step-end\":break;default:l+=De}}o[r++]=l}s+=(0===i?\"\":\",\")+o.join(\" \")}}if(s=c+s+\";\",1===Ae||2===Ae&&Le(s,1))return N+s+s;return s}(h);else if(0===Ae||2===Ae&&!Le(h,1))return h;switch(u){case 1015:return 97===h.charCodeAt(10)?N+h+h:h;case 951:return 116===h.charCodeAt(3)?N+h+h:h;case 963:return 110===h.charCodeAt(5)?N+h+h:h;case 1009:if(100!==h.charCodeAt(4))break;case 969:case 942:return N+h+h;case 978:return N+h+S+h+h;case 1019:case 983:return N+h+S+h+F+h+h;case 883:if(h.charCodeAt(8)===Q)return N+h+h;if(h.indexOf(\"image-set(\",11)>0)return h.replace(z,\"$1\"+N+\"$2\")+h;return h;case 932:if(h.charCodeAt(4)===Q)switch(h.charCodeAt(5)){case 103:return N+\"box-\"+h.replace(\"-grow\",\"\")+N+h+F+h.replace(\"grow\",\"positive\")+h;case 115:return N+h+F+h.replace(\"shrink\",\"negative\")+h;case 98:return N+h+F+h.replace(\"basis\",\"preferred-size\")+h}return N+h+F+h+h;case 964:return N+h+F+\"flex-\"+h+h;case 1023:if(99!==h.charCodeAt(8))break;return l=h.substring(h.indexOf(\":\",15)).replace(\"flex-\",\"\").replace(\"space-between\",\"justify\"),N+\"box-pack\"+l+N+h+F+\"flex-pack\"+l+h;case 1005:return t.test(h)?h.replace(s,\":\"+N)+h.replace(s,\":\"+S)+h:h;case 1e3:switch(o=(l=h.substring(13).trim()).indexOf(\"-\")+1,l.charCodeAt(0)+l.charCodeAt(o)){case 226:l=h.replace(m,\"tb\");break;case 232:l=h.replace(m,\"tb-rl\");break;case 220:l=h.replace(m,\"lr\");break;default:return h}return N+h+F+l+h;case 1017:if(-1===h.indexOf(\"sticky\",9))return h;case 975:switch(o=(h=e).length-10,u=(l=(33===h.charCodeAt(o)?h.substring(0,o):h).substring(e.indexOf(\":\",7)+1).trim()).charCodeAt(0)+(0|l.charCodeAt(7))){case 203:if(l.charCodeAt(8)<111)break;case 115:h=h.replace(l,N+l)+\";\"+h;break;case 207:case 102:h=h.replace(l,N+(u>102?\"inline-\":\"\")+\"box\")+\";\"+h.replace(l,N+l)+\";\"+h.replace(l,F+l+\"box\")+\";\"+h}return h+\";\";case 938:if(h.charCodeAt(5)===Q)switch(h.charCodeAt(6)){case 105:return l=h.replace(\"-items\",\"\"),N+h+N+\"box-\"+l+F+\"flex-\"+l+h;case 115:return N+h+F+\"flex-item-\"+h.replace(y,\"\")+h;default:return N+h+F+\"flex-line-pack\"+h.replace(\"align-content\",\"\").replace(y,\"\")+h}break;case 973:case 989:if(h.charCodeAt(3)!==Q||122===h.charCodeAt(4))break;case 931:case 953:if(true===j.test(e))if(115===(l=e.substring(e.indexOf(\":\")+1)).charCodeAt(0))return Ke(e.replace(\"stretch\",\"fill-available\"),a,r,c).replace(\":fill-available\",\":stretch\");else return h.replace(l,N+l)+h.replace(l,S+l.replace(\"fill-\",\"\"))+h;break;case 962:if(h=N+h+(102===h.charCodeAt(5)?F+h:\"\")+h,r+c===211&&105===h.charCodeAt(13)&&h.indexOf(\"transform\",10)>0)return h.substring(0,h.indexOf(\";\",27)+1).replace(i,\"$1\"+N+\"$2\")+h}return h}function Le(e,a){var r=e.indexOf(1===a?\":\":\"{\"),c=e.substring(0,3!==a?r:10),s=e.substring(r+1,e.length-1);return Oe(2!==a?c:c.replace(O,\"$1\"),s,a)}function Me(e,a){var r=Ke(a,a.charCodeAt(0),a.charCodeAt(1),a.charCodeAt(2));return r!==a+\";\"?r.replace($,\" or ($1)\").substring(4):\"(\"+a+\")\"}function Pe(e,a,r,c,s,t,i,f,n,l){for(var o,h=0,u=a;h<ye;++h)switch(o=$e[h].call(Te,e,u,r,c,s,t,i,f,n,l)){case void 0:case false:case true:case null:break;default:u=o}if(u!==a)return u}function Qe(e,a,r,c){for(var s=a+1;s<r;++s)switch(c.charCodeAt(s)){case Z:if(e===T)if(c.charCodeAt(s-1)===T&&a+2!==s)return s+1;break;case I:if(e===Z)return s+1}return s}function Re(e){for(var a in e){var r=e[a];switch(a){case\"keyframe\":Be=0|r;break;case\"global\":Ce=0|r;break;case\"cascade\":ge=0|r;break;case\"compress\":we=0|r;break;case\"semicolon\":ve=0|r;break;case\"preserve\":me=0|r;break;case\"prefix\":if(Oe=null,!r)Ae=0;else if(\"function\"!=typeof r)Ae=1;else Ae=2,Oe=r}}return Re}function Te(a,r){if(void 0!==this&&this.constructor===Te)return e(a);var s=a,t=s.charCodeAt(0);if(t<33)t=(s=s.trim()).charCodeAt(0);if(Be>0)De=s.replace(d,t===G?\"\":\"-\");if(t=1,1===ge)Ge=s;else Ee=s;var i,f=[Ge];if(ye>0)if(void 0!==(i=Pe(ze,r,f,f,pe,be,0,0,0,0))&&\"string\"==typeof i)r=i;var n=He(xe,f,r,0,0);if(ye>0)if(void 0!==(i=Pe(je,n,f,f,pe,be,n.length,0,0,0))&&\"string\"!=typeof(n=i))t=0;return De=\"\",Ge=\"\",Ee=\"\",ke=0,pe=1,be=1,we*t==0?n:n.replace(c,\"\").replace(g,\"\").replace(A,\"$1\").replace(C,\"$1\").replace(w,\" \")}if(Te.use=function e(a){switch(a){case void 0:case null:ye=$e.length=0;break;default:if(\"function\"==typeof a)$e[ye++]=a;else if(\"object\"==typeof a)for(var r=0,c=a.length;r<c;++r)e(a[r]);else qe=0|!!a}return e},Te.set=Re,void 0!==a)Re(a);return Te});\n//# sourceMappingURL=stylis.min.js.map\n\n//# sourceURL=webpack://editor/./node_modules/stylis/stylis.min.js?");
/***/ }),
/***/ "./node_modules/uuid/lib/bytesToUuid.js":
/*!**********************************************!*\
!*** ./node_modules/uuid/lib/bytesToUuid.js ***!
\**********************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\nvar byteToHex = [];\nfor (var i = 0; i < 256; ++i) {\n byteToHex[i] = (i + 0x100).toString(16).substr(1);\n}\n\nfunction bytesToUuid(buf, offset) {\n var i = offset || 0;\n var bth = byteToHex;\n // join used to fix memory issue caused by concatenation: https://bugs.chromium.org/p/v8/issues/detail?id=3175#c4\n return ([bth[buf[i++]], bth[buf[i++]], \n\tbth[buf[i++]], bth[buf[i++]], '-',\n\tbth[buf[i++]], bth[buf[i++]], '-',\n\tbth[buf[i++]], bth[buf[i++]], '-',\n\tbth[buf[i++]], bth[buf[i++]], '-',\n\tbth[buf[i++]], bth[buf[i++]],\n\tbth[buf[i++]], bth[buf[i++]],\n\tbth[buf[i++]], bth[buf[i++]]]).join('');\n}\n\nmodule.exports = bytesToUuid;\n\n\n//# sourceURL=webpack://editor/./node_modules/uuid/lib/bytesToUuid.js?");
/***/ }),
/***/ "./node_modules/uuid/lib/rng-browser.js":
/*!**********************************************!*\
!*** ./node_modules/uuid/lib/rng-browser.js ***!
\**********************************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("// Unique ID creation requires a high quality random # generator. In the\n// browser this is a little complicated due to unknown quality of Math.random()\n// and inconsistent support for the `crypto` API. We do the best we can via\n// feature-detection\n\n// getRandomValues needs to be invoked in a context where \"this\" is a Crypto\n// implementation. Also, find the complete implementation of crypto on IE11.\nvar getRandomValues = (typeof(crypto) != 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto)) ||\n (typeof(msCrypto) != 'undefined' && typeof window.msCrypto.getRandomValues == 'function' && msCrypto.getRandomValues.bind(msCrypto));\n\nif (getRandomValues) {\n // WHATWG crypto RNG - http://wiki.whatwg.org/wiki/Crypto\n var rnds8 = new Uint8Array(16); // eslint-disable-line no-undef\n\n module.exports = function whatwgRNG() {\n getRandomValues(rnds8);\n return rnds8;\n };\n} else {\n // Math.random()-based (RNG)\n //\n // If all else fails, use Math.random(). It's fast, but is of unspecified\n // quality.\n var rnds = new Array(16);\n\n module.exports = function mathRNG() {\n for (var i = 0, r; i < 16; i++) {\n if ((i & 0x03) === 0) r = Math.random() * 0x100000000;\n rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;\n }\n\n return rnds;\n };\n}\n\n\n//# sourceURL=webpack://editor/./node_modules/uuid/lib/rng-browser.js?");
/***/ }),
/***/ "./node_modules/uuid/v1.js":
/*!*********************************!*\
!*** ./node_modules/uuid/v1.js ***!
\*********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
eval("var rng = __webpack_require__(/*! ./lib/rng */ \"./node_modules/uuid/lib/rng-browser.js\");\nvar bytesToUuid = __webpack_require__(/*! ./lib/bytesToUuid */ \"./node_modules/uuid/lib/bytesToUuid.js\");\n\n// **`v1()` - Generate time-based UUID**\n//\n// Inspired by https://github.com/LiosK/UUID.js\n// and http://docs.python.org/library/uuid.html\n\nvar _nodeId;\nvar _clockseq;\n\n// Previous uuid creation time\nvar _lastMSecs = 0;\nvar _lastNSecs = 0;\n\n// See https://github.com/broofa/node-uuid for API details\nfunction v1(options, buf, offset) {\n var i = buf && offset || 0;\n var b = buf || [];\n\n options = options || {};\n var node = options.node || _nodeId;\n var clockseq = options.clockseq !== undefined ? options.clockseq : _clockseq;\n\n // node and clockseq need to be initialized to random values if they're not\n // specified. We do this lazily to minimize issues related to insufficient\n // system entropy. See #189\n if (node == null || clockseq == null) {\n var seedBytes = rng();\n if (node == null) {\n // Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1)\n node = _nodeId = [\n seedBytes[0] | 0x01,\n seedBytes[1], seedBytes[2], seedBytes[3], seedBytes[4], seedBytes[5]\n ];\n }\n if (clockseq == null) {\n // Per 4.2.2, randomize (14 bit) clockseq\n clockseq = _clockseq = (seedBytes[6] << 8 | seedBytes[7]) & 0x3fff;\n }\n }\n\n // UUID timestamps are 100 nano-second units since the Gregorian epoch,\n // (1582-10-15 00:00). JSNumbers aren't precise enough for this, so\n // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'\n // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.\n var msecs = options.msecs !== undefined ? options.msecs : new Date().getTime();\n\n // Per 4.2.1.2, use count of uuid's generated during the current clock\n // cycle to simulate higher resolution clock\n var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1;\n\n // Time since last uuid creation (in msecs)\n var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;\n\n // Per 4.2.1.2, Bump clockseq on clock regression\n if (dt < 0 && options.clockseq === undefined) {\n clockseq = clockseq + 1 & 0x3fff;\n }\n\n // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new\n // time interval\n if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) {\n nsecs = 0;\n }\n\n // Per 4.2.1.2 Throw error if too many uuids are requested\n if (nsecs >= 10000) {\n throw new Error('uuid.v1(): Can\\'t create more than 10M uuids/sec');\n }\n\n _lastMSecs = msecs;\n _lastNSecs = nsecs;\n _clockseq = clockseq;\n\n // Per 4.1.4 - Convert from unix epoch to Gregorian epoch\n msecs += 12219292800000;\n\n // `time_low`\n var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;\n b[i++] = tl >>> 24 & 0xff;\n b[i++] = tl >>> 16 & 0xff;\n b[i++] = tl >>> 8 & 0xff;\n b[i++] = tl & 0xff;\n\n // `time_mid`\n var tmh = (msecs / 0x100000000 * 10000) & 0xfffffff;\n b[i++] = tmh >>> 8 & 0xff;\n b[i++] = tmh & 0xff;\n\n // `time_high_and_version`\n b[i++] = tmh >>> 24 & 0xf | 0x10; // include version\n b[i++] = tmh >>> 16 & 0xff;\n\n // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)\n b[i++] = clockseq >>> 8 | 0x80;\n\n // `clock_seq_low`\n b[i++] = clockseq & 0xff;\n\n // `node`\n for (var n = 0; n < 6; ++n) {\n b[i + n] = node[n];\n }\n\n return buf ? buf : bytesToUuid(b);\n}\n\nmodule.exports = v1;\n\n\n//# sourceURL=webpack://editor/./node_modules/uuid/v1.js?");
/***/ }),
/***/ "./node_modules/webpack/buildin/global.js":
/*!***********************************!*\
!*** (webpack)/buildin/global.js ***!
\***********************************/
/*! no static exports found */
/***/ (function(module, exports) {
eval("var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n\n\n//# sourceURL=webpack://editor/(webpack)/buildin/global.js?");
/***/ }),
/***/ "./src/components/image.tsx":
/*!**********************************!*\
!*** ./src/components/image.tsx ***!
\**********************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-konva */ \"./node_modules/react-konva/lib/ReactKonva.js\");\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_konva__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass YImage extends react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"] {\n constructor(props) {\n super(props);\n this.state = {\n image: null\n };\n this.image = document.createElement(\"img\");\n }\n componentDidMount() {\n this.image.src = this.props.src;\n this.image.onload = () => {\n this.setState({\n image: this.image\n });\n };\n }\n componentWillUnmount() {\n this.image.onload = null;\n }\n render() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Image\"], Object.assign({ image: this.state.image }, this.props));\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (YImage);\n\n\n//# sourceURL=webpack://editor/./src/components/image.tsx?");
/***/ }),
/***/ "./src/components/photo-editor.tsx":
/*!*****************************************!*\
!*** ./src/components/photo-editor.tsx ***!
\*****************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-konva */ \"./node_modules/react-konva/lib/ReactKonva.js\");\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_konva__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var styled_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! styled-components */ \"./node_modules/styled-components/dist/styled-components.browser.esm.js\");\n/* harmony import */ var _image__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./image */ \"./src/components/image.tsx\");\n/* harmony import */ var _transformer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./transformer */ \"./src/components/transformer.tsx\");\n\n\n\n\n// import Dropdown from '@/components/drop-down'\n// import PhotoEditorInfoPanel from '@/components/design-editor/photo-editor-info-panel';\n\nlet Utils = {\n keepLastIndex(obj) {\n let doc = document;\n if (window.getSelection) { //ie11 10 9 ff safari\n obj.focus(); //解决ff不获取焦点无法定位问题\n var range = window.getSelection(); //创建range\n range.selectAllChildren(obj); //range 选择obj下所有子内容\n range.collapseToEnd(); //光标移至最后\n }\n }\n};\nconst OperationPanel = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div `\n background: rgba(50,54,66,0.8);\n border-radius: 2px;\n color: #fff;\n position: absolute;\n right: 20px;\n top: 20px;\n width: 160px;\n height: 64px;\n .operation-panel-bar1 {\n height: 32px;\n line-height: 32px;\n text-align: center;\n box-sizing: content-box;\n border-bottom: 1px solid rgba(255,255,255,0.1);\n }\n .operation-panel-bar2 {\n height: 32px;\n line-height: 32px;\n text-align: center;\n }\n .operation-panel-bar-tool {\n display: inline-block;\n width: 20px;\n height: 20px;\n line-height: 20px;\n margin: 0 7px;\n vertical-align: middle;\n .operation-panel-bar-tool-icon {\n font-size: 20px;\n color: #eeeeee;\n cursor: pointer;\n &:hover {\n background: #555C6E;\n border-radius: 2px;\n }\n }\n .operation-panel-bar-tool-icon-selected {\n color: #4E9FFF;\n }\n .operation-panel-bar-tool-icon-disable {\n cursor: not-allowed;\n opacity: 0.2;\n }\n }\n`;\nconst ScalePanel = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div `\n background: rgba(50,54,66,0.8);\n border-radius: 2px;\n color: #fff;\n position: absolute;\n right: 20px;\n top: 92px;\n width: 160px;\n height: 32px;\n line-height: 32px;\n .scale-panel-minus {\n margin-left: 20px; margin-right: 26px; cursor: pointer; font-size:16px;\n color: rgba(255, 255, 255, 0.5);\n &:hover {\n color: rgba(255, 255, 255, 1);\n }\n }\n .scale-panel-plus {\n margin-left: 26px; cursor: pointer; font-size: 16px;\n color: rgba(255, 255, 255, 0.5);\n &:hover {\n color: rgba(255, 255, 255, 1);\n }\n }\n`;\nconst PhotoEditorInfoPanelWrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__[\"default\"].div `\n max-width: 160px;\n min-width: 160px;\n border-radius: 2px;\n cursor: pointer;\n background: rgba(50,54,66,0.8);\n color: #fff;\n position: absolute;\n right: 20px;\n top: 142px;\n`;\nconst uuidv1 = __webpack_require__(/*! uuid/v1 */ \"./node_modules/uuid/v1.js\");\nconst GAP = 6;\nconst ASSISTANT_LINE_GAP = 10;\nconst LEFT = 37;\nconst RIGHT = 39;\nconst TOP = 38;\nconst BOTTOM = 40;\nconst SPACE = 32;\nconst SHIFT = 16;\nconst MIN_SCALE = 0.01;\nconst TEXT_TRANSFORMER_PADDING = 6;\nlet refLineId = 0;\n// 放大和缩小过渡动画\nfunction transitionAnimation(fn, step, interval) {\n let times = step;\n let itv = setInterval(() => {\n if (times > 0) {\n fn();\n times--;\n }\n else {\n clearInterval(itv);\n }\n }, interval);\n}\n// 初次渲染计算缩放比例\nfunction calcScale(s1, s2) {\n const s1Width = s1.width;\n const s1Height = s1.height;\n const s2Width = s2.width;\n const s2Height = s2.height;\n const BUFFER = 200;\n let scale = 1.0;\n if (s1Width / s2Width < scale) {\n scale = s1Width / (s2Width + BUFFER);\n }\n if (s1Height / s2Height < scale) {\n scale = s1Height / (s2Height + BUFFER);\n }\n return scale;\n}\nclass PhotoEditor extends react__WEBPACK_IMPORTED_MODULE_0__[\"Component\"] {\n constructor(props) {\n super(props);\n // 绑定shift键，多选\n this.bindShiftKeyDown = () => {\n let keydownFn = (e) => {\n let keyCode = e.keyCode;\n if (keyCode === SHIFT) {\n this.combinable = true;\n }\n };\n document.addEventListener('keydown', keydownFn);\n return () => {\n document.removeEventListener('keydown', keydownFn);\n };\n };\n this.bindShiftKeyUp = () => {\n let keyUpFn = (e) => {\n let keyCode = e.keyCode;\n if (keyCode === SHIFT) {\n this.combinable = false;\n }\n };\n document.addEventListener('keyup', keyUpFn);\n return () => {\n document.removeEventListener('keyup', keyUpFn);\n };\n };\n // 绑定空格，选择和移动画布\n this.bindMousedown = () => {\n // 拖动画布\n // let mousedownFn = (e: MouseEvent) => {\n // this.setState({\n // draggingCanvas: true\n // })\n // }\n // let mouseupFn = (e: MouseEvent) => {\n // this.setState({\n // draggingCanvas: false\n // })\n // }\n let keypressFn = (e) => {\n let keyCode = e.keyCode;\n if (keyCode === SPACE) {\n this.setState({\n draggableCanvas: true\n });\n }\n };\n let keyupFn = (e) => {\n let keyCode = e.keyCode;\n if (keyCode === SPACE) {\n this.setState({\n draggableCanvas: false\n });\n }\n };\n // document.addEventListener('mousedown', mousedownFn)\n // document.addEventListener('mouseup', mouseupFn)\n document.addEventListener('keypress', keypressFn);\n document.addEventListener('keyup', keyupFn);\n return () => {\n // document.removeEventListener('mousedown', mousedownFn)\n // document.removeEventListener('mouseup', mouseupFn)\n document.removeEventListener('keypress', keypressFn);\n document.removeEventListener('keyup', keyupFn);\n };\n };\n // 绑定上下左右移动切片\n this.bindKeyboard = (pickedEle) => {\n if (!pickedEle) {\n return () => { };\n }\n let onKeydownFn = (e) => {\n let keyCode = e.keyCode;\n if (keyCode === LEFT) {\n pickedEle.setAttr('x', pickedEle.getAttr('x') - 1);\n this.props.onDragEnd([pickedEle]);\n e.preventDefault();\n }\n if (keyCode === RIGHT) {\n pickedEle.setAttr('x', pickedEle.getAttr('x') + 1);\n this.props.onDragEnd([pickedEle]);\n e.preventDefault();\n }\n if (keyCode === TOP) {\n pickedEle.setAttr('y', pickedEle.getAttr('y') - 1);\n this.props.onDragEnd([pickedEle]);\n e.preventDefault();\n }\n if (keyCode === BOTTOM) {\n pickedEle.setAttr('y', pickedEle.getAttr('y') + 1);\n this.props.onDragEnd([pickedEle]);\n e.preventDefault();\n }\n };\n document.addEventListener('keydown', onKeydownFn);\n return () => document.removeEventListener('keydown', onKeydownFn);\n };\n // 缩小/放大画布\n this.scalePlus = () => {\n transitionAnimation(() => {\n const ADDEND = 0.005;\n let scale = this.state.scale + ADDEND;\n let layerX = (this.refLayer.getAttr('x') - this.props.canvasSize.width * ADDEND / 2);\n let layerY = (this.refLayer.getAttr('y') - this.props.canvasSize.height * ADDEND / 2);\n this.setState({\n scale,\n });\n this.setRefLayerPosition(layerX, layerY);\n }, 8, 20);\n };\n this.scaleMinus = () => {\n if (this.state.scale > MIN_SCALE) {\n transitionAnimation(() => {\n const ADDEND = 0.005;\n let scale = this.state.scale - ADDEND;\n let layerX = (this.refLayer.getAttr('x') + this.props.canvasSize.width * ADDEND / 2);\n let layerY = (this.refLayer.getAttr('y') + this.props.canvasSize.height * ADDEND / 2);\n this.setState({\n scale,\n });\n this.setRefLayerPosition(layerX, layerY);\n }, 8, 20);\n }\n };\n // 编辑文字\n this.handleEditText = (e, editingTextId, d) => {\n const { scale } = this.state;\n let textNode = e.target;\n let textPosition = textNode.getAbsolutePosition();\n let stageBox = this.refStage.getContainer().getBoundingClientRect();\n let areaPosition = {\n x: textPosition.x + stageBox.left,\n y: textPosition.y + stageBox.top\n };\n let inputEle = document.createElement('div');\n document.body.appendChild(inputEle);\n // inputEle.value = d.text;\n inputEle.contentEditable = 'plaintext-only';\n inputEle.innerText = textNode.text() === ' 请输入文字内容 ' ? '' : textNode.text();\n inputEle.style.position = 'absolute';\n inputEle.style.top = areaPosition.y - TEXT_TRANSFORMER_PADDING + 'px';\n inputEle.style.left = areaPosition.x - TEXT_TRANSFORMER_PADDING + 'px';\n inputEle.style.resize = 'none';\n inputEle.style.fontFamily = d.fontFamily;\n inputEle.style.fontSize = textNode.fontSize() * scale + 'px';\n inputEle.style.color = textNode.attrs.fill;\n inputEle.style.padding = '3px';\n inputEle.style.border = '1px solid #4E9FFF';\n inputEle.style.lineHeight = textNode.fontSize() * scale + 'px';\n inputEle.style.overflow = 'hidden';\n // inputEle.style.letterSpacing = '1';\n Utils.keepLastIndex(inputEle);\n let inputOnkeydown = (e) => {\n e.stopPropagation();\n };\n let inputBlurListener = () => {\n if (inputEle.innerText !== '' && inputEle.innerText !== '\\n') {\n inputEle.removeEventListener('blur', inputBlurListener);\n inputEle.removeEventListener('keydown', inputOnkeydown);\n let text = inputEle.innerText;\n // let strList = text.split('\\n')\n // let l = 0\n // strList.forEach(str => {\n // if (str.length > l) {\n // l = str.length\n // }\n // })\n // let newText = ''\n // for (let i = 0; i < l; i++) {\n // strList.forEach(str => {\n // newText += str[i] || ' '\n // })\n // newText += '\\n'\n // }\n textNode.text(text);\n this.refLayer.draw();\n document.body.removeChild(inputEle);\n this.props.onDragEnd([textNode]);\n this.unbindKeyboardEvent();\n this.unbindKeyboardEvent = this.bindKeyboard(this.pickedEle);\n this.setState({\n editingTextId: ''\n });\n }\n else {\n inputEle.removeEventListener('blur', inputBlurListener);\n inputEle.removeEventListener('keydown', inputOnkeydown);\n document.body.removeChild(inputEle);\n this.unbindKeyboardEvent();\n this.unbindKeyboardEvent = this.bindKeyboard(this.pickedEle);\n this.setState({\n editingTextId: ''\n });\n this.props.onDelete(d);\n }\n };\n inputEle.addEventListener('blur', inputBlurListener);\n inputEle.addEventListener('keydown', inputOnkeydown);\n this.bindShiftKeyDown();\n this.setState({\n editingTextId\n });\n };\n // 移动切片\n this.handleDragMove = (e) => {\n let target = e.target;\n if (target.nodeType === 'Layer') {\n return;\n }\n this.props.onDragMove(target);\n this.isDragging = true;\n };\n // 移动切片结束时触发\n this.handleDragEnd = (e) => {\n const { onDragEnd } = this.props;\n let target = e.target;\n if (target.nodeType === 'Layer') {\n this.setStateMainLayerPosition(target);\n return;\n }\n if (target.nodeType === 'Group') {\n let x = target.attrs.x;\n let y = target.attrs.y;\n let children = target.children;\n let c = children\n .map((c) => {\n c.attrs.x += x;\n c.attrs.y += y;\n return c;\n });\n onDragEnd(c);\n }\n else {\n onDragEnd([target]);\n }\n this.isDragging = false;\n this.setState({\n draggingToggle: !this.state.draggingToggle\n });\n };\n // 放大缩小切片\n this.handleTransform = (e) => {\n const { onTransform } = this.props;\n onTransform([e.currentTarget]);\n };\n this.handleTransformEnd = (e) => {\n const { onTransformEnd } = this.props;\n onTransformEnd([e.currentTarget]);\n };\n // 点选切片\n this.handleMouseDown = (e) => {\n const { onMouseDown } = this.props;\n let ele = e.target;\n if (this.state.group.indexOf(ele.attrs.id) >= 0) {\n return;\n }\n if (this.combinable) {\n this.setState({\n group: [...new Set([...this.state.group, ele.id()])]\n });\n onMouseDown(\"\");\n return;\n }\n // clicked on stage - cler selection\n if (ele === ele.getStage()) {\n onMouseDown(\"\");\n this.setState({\n group: []\n });\n this.combinable = false;\n return;\n }\n // clicked on transformer - do nothing\n const clickedOnTransformer = ele.getParent().className === 'Transformer';\n if (clickedOnTransformer) {\n return;\n }\n // find clicked rect by its id\n const name = ele.id();\n // const rect = this.state.rectangles.find((r: any) => r.name === name);\n // if (rect) {\n onMouseDown(name);\n // } else {\n // this.setState({\n // selectedShapeId: ''\n // });\n // }\n this.setState({\n group: []\n });\n this.combinable = false;\n };\n // 多选对齐\n this.handleGroupAlignLeft = () => {\n let group = this.refLayer.find('.group')[0];\n if (!group)\n return;\n let children = group.children;\n // 找出最左边的切片的x坐标\n let xmin = children[0].attrs.x;\n children.forEach((c) => {\n if (c.attrs.x < xmin) {\n xmin = c.attrs.x;\n }\n });\n // 左对齐\n let c = children\n .map((c) => {\n c.attrs.x = xmin;\n return c;\n });\n this.props.onDragEnd(c);\n this.setState({\n draggingToggle: !this.state.draggingToggle\n });\n };\n this.handleGroupAlignTop = () => {\n let group = this.refLayer.find('.group')[0];\n if (!group)\n return;\n let children = group.children;\n // 找出最左边的切片的x坐标\n let ymin = children[0].attrs.y;\n children.forEach((c) => {\n if (c.attrs.y < ymin) {\n ymin = c.attrs.y;\n }\n });\n // 左对齐\n let c = children\n .map((c) => {\n c.attrs.y = ymin;\n return c;\n });\n this.props.onDragEnd(c);\n this.setState({\n draggingToggle: !this.state.draggingToggle\n });\n };\n this.handleGroupAlignRight = () => {\n let group = this.refLayer.find('.group')[0];\n if (!group)\n return;\n let children = group.children;\n // 找出最右边的切片的x坐标+width\n let attrs = children[0].attrs;\n let width = children[0].width();\n let xmax = attrs.x + width * attrs.scaleX;\n children.forEach((c) => {\n if (c.attrs.x + c.attrs.width * c.attrs.scaleX > xmax) {\n let width = c.width();\n xmax = c.attrs.x + width * c.attrs.scaleX;\n }\n });\n // 右对齐\n let c = children\n .map((c) => {\n let width = c.width();\n c.attrs.x = xmax - width * c.attrs.scaleX;\n return c;\n });\n this.props.onDragEnd(c);\n this.setState({\n draggingToggle: !this.state.draggingToggle\n });\n };\n this.handleGroupAlignBottom = () => {\n let group = this.refLayer.find('.group')[0];\n if (!group)\n return;\n let children = group.children;\n // 找出最右边的切片的x坐标+height\n let attrs = children[0].attrs;\n let height = children[0].height();\n let ymax = attrs.y + height * attrs.scaleY;\n children.forEach((c) => {\n if (c.attrs.y + c.attrs.height * c.attrs.scaleY > ymax) {\n let height = c.height();\n ymax = c.attrs.y + height * c.attrs.scaleY;\n }\n });\n // 右对齐\n let c = children\n .map((c) => {\n let height = c.height();\n c.attrs.y = ymax - height * c.attrs.scaleY;\n return c;\n });\n this.props.onDragEnd(c);\n this.setState({\n draggingToggle: !this.state.draggingToggle\n });\n };\n // 选择和移动切换\n this.handleToggleSelectableShapeOn = () => {\n this.setState({\n selectableShape: true\n });\n };\n this.handleToggleSelectableShapeOff = () => {\n this.setState({\n selectableShape: false\n });\n };\n // 镜像翻转\n this.handleMirrorShape = () => {\n let { selectedShapeId } = this.props;\n if (selectedShapeId) {\n let picked = this.refLayer.find('.' + selectedShapeId)[0] || this.refLayer.find('.text-' + selectedShapeId)[0];\n picked.scaleX(picked.scaleX() * -1);\n this.props.onDragEnd([picked]);\n }\n };\n // 上下颠倒\n this.handleUpSideDown = () => {\n let { selectedShapeId } = this.props;\n if (selectedShapeId) {\n let picked = this.refLayer.find('.' + selectedShapeId)[0] || this.refLayer.find('.text-' + selectedShapeId)[0];\n picked.scaleY(picked.scaleY() * -1);\n this.props.onDragEnd([picked]);\n }\n };\n this.setStateMainLayerPosition = (layer) => {\n this.setState({\n mainLayerX: layer.attrs.x,\n mainLayerY: layer.attrs.y,\n });\n };\n this.addNewRefLine = (e) => {\n let { mainLayerX, mainLayerY, scale } = this.state;\n let layerX = e.evt.layerX;\n let layerY = e.evt.layerY;\n if (layerX < 10 && layerY < 10)\n return;\n if (layerX < 10) {\n this.setState({\n refLines: [...this.state.refLines, { x: 0, y: (layerY - mainLayerY) / scale, id: refLineId++ }]\n });\n }\n if (layerY < 10) {\n this.setState({\n refLines: [...this.state.refLines, { x: (layerX - mainLayerX) / scale, y: 0, id: refLineId++ }]\n });\n }\n };\n // 判断切片是否在画布之外\n this.isShapeOut = (shape) => {\n if (!shape) {\n return;\n }\n const { width, height } = this.props.canvasSize;\n let leftOut = false, rightOut = false;\n let topOut = false, bottomOut = false;\n // let shapeWidth = shape.width * Math.abs(shape.scale.x)\n // let shapeHeight = shape.height * Math.abs(shape.scale.y)\n let shapeWidth = 0;\n let shapeHeight = 0;\n if (shape.x + shapeWidth < 0) {\n leftOut = true;\n }\n if (shape.x > width) {\n rightOut = true;\n }\n if (shape.y > height) {\n bottomOut = true;\n }\n if (shape.y + shapeHeight < 0) {\n topOut = true;\n }\n return leftOut || rightOut || bottomOut || topOut;\n };\n // 渲染切片\n this.renderShape = (d, i, inGroup) => {\n // d:切片信息，i:切片索引，inGroup:被多选选中的切片\n const { draggable } = this.props;\n const { editingTextId, draggableCanvas, selectableShape } = this.state;\n let flipHorizontal = (d.flipHorizontal || 1);\n let flipVertical = (d.flipVertical || 1);\n if (d.type === 'text') {\n if (editingTextId === d.id) {\n return null;\n }\n let text = d.text;\n // let strList = text.split('\\n')\n // let l = 0\n // strList.forEach(str => {\n // if (str.length > l) {\n // l = str.length\n // }\n // })\n // let newText = ''\n // for (let i = 0; i < l; i++) {\n // strList.forEach(str => {\n // newText += str[i] || ' '\n // })\n // newText += '\\n'\n // }\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Text\"], { id: d.id, text: text, \n // name={`${d.id} element photo-editor-element-${this.uuid}`}\n name: inGroup ? '' : `text-${d.id} element photo-editor-element-${this.uuid}`, fontSize: Number(d.fontSize) || 12, onDblClick: inGroup ? () => { } : (e) => this.handleEditText(e, d.id, d), scale: {\n x: d.scale.x * flipHorizontal,\n y: d.scale.y * flipVertical,\n }, x: d.x, y: d.y, \n // width={d.width} height={d.height}\n key: i + d.text, offset: {\n // 镜像翻转偏移量\n x: flipHorizontal < 0 ? d.width : 0,\n y: flipVertical < 0 ? d.height : 0\n }, draggable: inGroup ? false : draggable && !draggableCanvas && selectableShape, onTransformEnd: this.handleTransformEnd, \n // onTransform={this.handleTransform}\n rotation: d.rotation, fill: d.color, fontFamily: d.fontFamily || 'Arial', stroke: inGroup ? \"#555c6e\" : \"\", strokeWidth: inGroup ? 1 : 0 }));\n }\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_image__WEBPACK_IMPORTED_MODULE_3__[\"default\"], { id: d.id, scale: {\n x: d.scale.x * flipHorizontal,\n y: d.scale.y * flipVertical,\n }, name: inGroup ? '' : `${d.id} photo-editor-element-${this.uuid}`, x: d.x, y: d.y, width: d.width, height: d.height, key: i + d.src, src: d.src, offset: {\n // 镜像翻转偏移量\n x: flipHorizontal < 0 ? d.width : 0,\n y: flipVertical < 0 ? d.height : 0,\n }, draggable: inGroup ? false : draggable && !draggableCanvas && selectableShape, onTransformEnd: this.handleTransformEnd, \n // onTransform={this.handleTransform}\n rotation: d.rotation, stroke: inGroup ? \"#555c6e\" : \"\", strokeWidth: inGroup ? 2 : 0 });\n };\n const scale = calcScale({ width: props.width, height: props.height }, props.canvasSize);\n this.state = {\n scale,\n editingTextId: '',\n draggableCanvas: false,\n draggingCanvas: false,\n group: [],\n draggingToggle: true,\n selectableShape: true,\n mainLayerX: 0,\n mainLayerY: 0,\n refLines: [],\n };\n this.uuid = uuidv1();\n this.onWheel = (e) => {\n let deltaY = e.deltaY;\n const ADDEND = 0.01;\n if (deltaY < 0) {\n let scale = this.state.scale + ADDEND;\n let layerX = (this.refLayer.getAttr('x') - this.props.canvasSize.width * ADDEND / 2);\n let layerY = (this.refLayer.getAttr('y') - this.props.canvasSize.height * ADDEND / 2);\n this.setState({\n scale,\n });\n this.setRefLayerPosition(layerX, layerY);\n }\n else {\n if (this.state.scale > MIN_SCALE) {\n let scale = this.state.scale - ADDEND;\n let layerX = (this.refLayer.getAttr('x') + this.props.canvasSize.width * ADDEND / 2);\n let layerY = (this.refLayer.getAttr('y') + this.props.canvasSize.height * ADDEND / 2);\n this.setState({\n scale,\n });\n this.setRefLayerPosition(layerX, layerY);\n }\n }\n this.setStateMainLayerPosition(this.refLayer);\n e.preventDefault();\n };\n this.unbindKeyboardEvent = () => { };\n this.unbindMousedownEvent = () => { };\n this.unbindShiftKeyDownEvent = () => { };\n this.unbindShiftKeyUpEvent = () => { };\n this.combinable = false;\n }\n componentDidMount() {\n // layer 上下左右居中定位\n let scale = this.state.scale;\n let layerX = (this.props.width - this.props.canvasSize.width * scale) / 2;\n let layerY = (this.props.height - this.props.canvasSize.height * scale) / 2;\n this.setRefLayerPosition(layerX, layerY);\n this.setStateMainLayerPosition(this.refLayer);\n // 滚轮，放大缩小事件\n this.refWrapper.addEventListener('wheel', this.onWheel);\n // 绑定键盘移动切片事件\n this.unbindKeyboardEvent = this.bindKeyboard(this.pickedEle);\n // 绑定鼠标拖动画布事件\n this.unbindMousedownEvent = this.bindMousedown();\n this.unbindShiftKeyDownEvent = this.bindShiftKeyDown();\n this.unbindShiftKeyUpEvent = this.bindShiftKeyUp();\n }\n componentDidUpdate() {\n const selectedShapeId = this.props.selectedShapeId;\n if (!selectedShapeId) {\n this.unbindKeyboardEvent();\n return;\n }\n let picked = this.refLayer.find('.' + selectedShapeId)[0];\n if (picked) {\n this.pickedEle = picked;\n }\n else {\n // 文字元素选中\n this.pickedEle = this.refLayer.find('.text-' + selectedShapeId)[0];\n }\n this.unbindKeyboardEvent();\n this.unbindKeyboardEvent = this.bindKeyboard(this.pickedEle);\n }\n componentWillUnmount() {\n this.refWrapper.removeEventListener('wheel', this.onWheel);\n this.unbindMousedownEvent();\n this.unbindKeyboardEvent();\n this.unbindShiftKeyDownEvent();\n this.unbindShiftKeyUpEvent();\n }\n // 设置画布位置\n setRefLayerPosition(layerX, layerY) {\n this.refLayer.setAttr('x', layerX);\n this.refLayer.setAttr('y', layerY);\n }\n // 渲染操作面板\n // renderOperationPanel = () => {\n // const {selectableShape, group} = this.state\n // const { data, selectedShapeId } = this.props;\n // let selected = data.filter(d => {\n // return d.id === selectedShapeId\n // })[0] || {type: 'text',flipVertical: 1,flipHorizontal: 1}\n // let selectGroup = group.length > 0\n // return (\n // <OperationPanel>\n // <div className='operation-panel-bar1'>\n // <div className={`operation-panel-bar-tool`} onClick={this.handleToggleSelectableShapeOn}>\n // <Icon type=\"icon-ai-editor-choice\" className={`operation-panel-bar-tool-icon ${selectableShape ? 'operation-panel-bar-tool-icon-selected' : ''}`}></Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleToggleSelectableShapeOff}>\n // <Icon type=\"icon-ai-editor-move\" className={`operation-panel-bar-tool-icon ${!selectableShape ? 'operation-panel-bar-tool-icon-selected' : ''}`}></Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleMirrorShape}>\n // <Icon \n // type=\"icon-ai-mirror-level\" \n // className={`operation-panel-bar-tool-icon ${selected.flipHorizontal < 0 ? 'operation-panel-bar-tool-icon-selected' : ''} ${selected.type === 'text' ? 'operation-panel-bar-tool-icon-disable' : ''}`}>\n // </Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleUpSideDown}>\n // <Icon \n // type=\"icon-ai-mirror-vertically\"\n // className={`operation-panel-bar-tool-icon ${selected.flipVertical < 0 ? 'operation-panel-bar-tool-icon-selected' : ''} ${selected.type === 'text' ? 'operation-panel-bar-tool-icon-disable' : ''}`}>\n // </Icon>\n // </div>\n // </div>\n // <div className='operation-panel-bar2'>\n // <div className='operation-panel-bar-tool' onClick={this.handleGroupAlignBottom}>\n // <Icon type=\"icon-ai-bottom-align\" className={`operation-panel-bar-tool-icon ${!selectGroup ? 'operation-panel-bar-tool-icon-disable' : ''}`}></Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleGroupAlignLeft}>\n // <Icon type=\"icon-ai-left-align\" className={`operation-panel-bar-tool-icon ${!selectGroup ? 'operation-panel-bar-tool-icon-disable' : ''}`}></Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleGroupAlignTop}>\n // <Icon type=\"icon-ai-top-align\" className={`operation-panel-bar-tool-icon ${!selectGroup ? 'operation-panel-bar-tool-icon-disable' : ''}`}></Icon>\n // </div>\n // <div className='operation-panel-bar-tool' onClick={this.handleGroupAlignRight}>\n // <Icon type=\"icon-ai-right-align\" className={`operation-panel-bar-tool-icon ${!selectGroup ? 'operation-panel-bar-tool-icon-disable' : ''}`}></Icon>\n // </div>\n // </div>\n // </OperationPanel>\n // )\n // }\n render() {\n console.log('===============editor=============');\n const { data, width, height, selectedShapeId, canvasSize } = this.props;\n const { scale, group, editingTextId, draggableCanvas, draggingCanvas, mainLayerX, mainLayerY, refLines, selectableShape } = this.state;\n let cursorType = 'default';\n if (draggableCanvas) {\n cursorType = 'grab';\n }\n if (draggingCanvas) {\n cursorType = 'grabbing';\n }\n if (!selectableShape) {\n cursorType = 'grab';\n }\n // 过滤-非多选\n let filteredList = data.filter(d => {\n return group.indexOf(d.id) < 0;\n });\n // 过滤-多选\n let groupList = data.filter(d => {\n return group.indexOf(d.id) >= 0;\n });\n // 未被选中的切片\n let unselectedList = filteredList.filter(d => {\n return d.id !== selectedShapeId;\n });\n // 被选中的切片，会被移到最顶层\n let selectedList = filteredList.filter(d => {\n return d.id === selectedShapeId;\n });\n let shapesList = filteredList;\n let selectedShapeOut = [];\n if (selectedList[0] && this.isShapeOut(selectedList[0])) {\n selectedShapeOut = selectedList;\n shapesList = unselectedList;\n }\n return (react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", { ref: ele => this.refWrapper = ele, style: { position: 'relative' } },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Stage\"], { width: width, height: height, onMouseDown: this.handleMouseDown, ref: ele => {\n this.props.refCanvas && this.props.refCanvas(ele);\n this.refStage = ele;\n }, style: { cursor: cursorType } },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Layer\"], { ref: ele => this.refLayer = ele, scale: {\n x: scale,\n y: scale\n }, \n // width={canvasSize.width}\n // height={canvasSize.height}\n // onDragMove={this.handleDragMove} // 性能问题\n onDragEnd: this.handleDragEnd, draggable: true },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Group\"], { name: \"image-group-for-clip\", clipFunc: (ctx) => { ctx.rect(0, 0, canvasSize.width, canvasSize.height); } },\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Rect\"], { width: canvasSize.width, height: canvasSize.height, fill: \"#f4f4f4\", \n // id=\"background\"\n name: \"background\" }),\n shapesList.map((d, i) => {\n return this.renderShape(d, i, false);\n })),\n group.length > 0 &&\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_1__[\"Group\"], { name: \"group\", draggable: !draggableCanvas && selectableShape, key: String(this.state.draggingToggle) }, groupList.map((d, i) => {\n return this.renderShape(d, i, true);\n })),\n selectedShapeOut.map((d, i) => {\n return this.renderShape(d, i, false);\n }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_transformer__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { key: group.length, enabledAnchors: [], padding: TEXT_TRANSFORMER_PADDING, borderStroke: \"#4E9FFF\", borderStrokeWidth: 1, anchorStroke: \"#ccc\", selectedShapeId: 'group', rotateEnabled: false }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_transformer__WEBPACK_IMPORTED_MODULE_4__[\"default\"], { enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'], rotationSnaps: [0, 90, 180, 270], rotateAnchorOffset: 20, borderStroke: \"#4E9FFF\", borderStrokeWidth: 1, anchorStroke: \"#ccc\", anchorCornerRadius: 10, \n // anchorSize={10}\n selectedShapeId: selectedShapeId, \n // rotateEnabled={false}\n draggable: true }),\n react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_transformer__WEBPACK_IMPORTED_MODULE_4__[\"default\"]\n // 临时解决方案,key\n , { \n // 临时解决方案,key\n key: data.filter(d => d.id === selectedShapeId)[0] ? data.filter(d => d.id === selectedShapeId)[0].fontSize : '', enabledAnchors: [], padding: TEXT_TRANSFORMER_PADDING, rotationSnaps: [0, 90, 180, 270], rotateAnchorOffset: 20, borderStroke: \"#4E9FFF\", borderStrokeWidth: 1, anchorStroke: \"#ccc\", anchorCornerRadius: 10, \n // anchorSize={10}\n // 正在编辑的text不显示transformer\n // rotateEnabled={false}\n selectedShapeId: editingTextId === selectedShapeId ? \"\" : \"text-\" + selectedShapeId })))));\n }\n}\nPhotoEditor.defaultProps = {\n draggable: false,\n width: 800,\n height: 800,\n data: [],\n canvasSize: {\n width: 600,\n height: 600,\n },\n refCanvas: null,\n onDragEnd: () => { },\n onDragMove: () => { },\n onTransformEnd: () => { },\n onTransform: () => { },\n onKeyboardOperate: () => { },\n};\n/* harmony default export */ __webpack_exports__[\"default\"] = (PhotoEditor);\n\n\n//# sourceURL=webpack://editor/./src/components/photo-editor.tsx?");
/***/ }),
/***/ "./src/components/transformer.tsx":
/*!****************************************!*\
!*** ./src/components/transformer.tsx ***!
\****************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-konva */ \"./node_modules/react-konva/lib/ReactKonva.js\");\n/* harmony import */ var react_konva__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_konva__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);\n\n\nclass TransformerComponent extends react__WEBPACK_IMPORTED_MODULE_1___default.a.Component {\n componentDidMount() {\n this.checkNode();\n }\n componentDidUpdate() {\n this.checkNode();\n }\n checkNode() {\n // here we need to manually attach or detach Transformer node\n const stage = this.transformer.getStage();\n const { selectedShapeId } = this.props;\n const selectedNode = stage.findOne('.' + selectedShapeId);\n // do nothing if selected node is already attached\n if (selectedNode === this.transformer.node()) {\n return;\n }\n if (selectedNode) {\n // attach to another node\n this.transformer.attachTo(selectedNode);\n }\n else {\n // remove transformer\n this.transformer.detach();\n }\n this.transformer.getLayer().batchDraw();\n }\n render() {\n return (react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(react_konva__WEBPACK_IMPORTED_MODULE_0__[\"Transformer\"], Object.assign({}, this.props, { ref: (node) => {\n this.transformer = node;\n } })));\n }\n}\n/* harmony default export */ __webpack_exports__[\"default\"] = (TransformerComponent);\n\n\n//# sourceURL=webpack://editor/./src/components/transformer.tsx?");
/***/ })
/******/ });
});