` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: _propTypes2.default.any,\n /**\n * A set of `
` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n */\n children: _propTypes2.default.node,\n\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: _propTypes2.default.bool,\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: _propTypes2.default.bool,\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: _propTypes2.default.bool,\n\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: _propTypes2.default.func\n};\n\nvar defaultProps = {\n component: 'div',\n childFactory: function childFactory(child) {\n return child;\n }\n\n /**\n * The `` component manages a set of `` components\n * in a list. Like with the `` component, ``, is a\n * state machine for managing the mounting and unmounting of components over\n * time.\n *\n * Consider the example below using the `Fade` CSS transition from before.\n * As items are removed or added to the TodoList the `in` prop is toggled\n * automatically by the ``. You can use _any_ ``\n * component in a ``, not just css.\n *\n * ## Example\n *\n * \n *\n * Note that `` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual ``\n * components. This means you can mix and match animations across different\n * list items.\n */\n};\nvar TransitionGroup = function (_React$Component) {\n _inherits(TransitionGroup, _React$Component);\n\n function TransitionGroup(props, context) {\n _classCallCheck(this, TransitionGroup);\n\n var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));\n\n var handleExited = _this.handleExited.bind(_this);\n\n // Initial children should all be entering, dependent on appear\n _this.state = {\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n\n TransitionGroup.prototype.getChildContext = function getChildContext() {\n return {\n transitionGroup: { isMounting: !this.appeared }\n };\n };\n\n TransitionGroup.prototype.componentDidMount = function componentDidMount() {\n this.appeared = true;\n };\n\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n\n return {\n children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n };\n\n TransitionGroup.prototype.handleExited = function handleExited(child, node) {\n var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children);\n\n if (child.key in currentChildMapping) return;\n\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n\n this.setState(function (state) {\n var children = _extends({}, state.children);\n\n delete children[child.key];\n return { children: children };\n });\n };\n\n TransitionGroup.prototype.render = function render() {\n var _props = this.props,\n Component = _props.component,\n childFactory = _props.childFactory,\n props = _objectWithoutProperties(_props, ['component', 'childFactory']);\n\n var children = values(this.state.children).map(childFactory);\n\n delete props.appear;\n delete props.enter;\n delete props.exit;\n\n if (Component === null) {\n return children;\n }\n return _react2.default.createElement(\n Component,\n props,\n children\n );\n };\n\n return TransitionGroup;\n}(_react2.default.Component);\n\nTransitionGroup.childContextTypes = {\n transitionGroup: _propTypes2.default.object.isRequired\n};\n\n\nTransitionGroup.propTypes = process.env.NODE_ENV !== \"production\" ? propTypes : {};\nTransitionGroup.defaultProps = defaultProps;\n\nexports.default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);\nmodule.exports = exports['default'];","function _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance\");\n}\n\nmodule.exports = _nonIterableSpread;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = exports.DELAY_RIPPLE = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _toConsumableArray2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/toConsumableArray\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _assertThisInitialized2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/assertThisInitialized\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\n\nvar _TransitionGroup = _interopRequireDefault(require(\"react-transition-group/TransitionGroup\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _Ripple = _interopRequireDefault(require(\"./Ripple\"));\n\nvar DURATION = 550;\nvar DELAY_RIPPLE = 80;\nexports.DELAY_RIPPLE = DELAY_RIPPLE;\n\nvar styles = function styles(theme) {\n return {\n root: {\n display: 'block',\n position: 'absolute',\n overflow: 'hidden',\n borderRadius: 'inherit',\n width: '100%',\n height: '100%',\n left: 0,\n top: 0,\n pointerEvents: 'none',\n zIndex: 0\n },\n ripple: {\n width: 50,\n height: 50,\n left: 0,\n top: 0,\n opacity: 0,\n position: 'absolute'\n },\n rippleVisible: {\n opacity: 0.3,\n transform: 'scale(1)',\n animation: \"mui-ripple-enter \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n ripplePulsate: {\n animationDuration: \"\".concat(theme.transitions.duration.shorter, \"ms\")\n },\n child: {\n opacity: 1,\n display: 'block',\n width: '100%',\n height: '100%',\n borderRadius: '50%',\n backgroundColor: 'currentColor'\n },\n childLeaving: {\n opacity: 0,\n animation: \"mui-ripple-exit \".concat(DURATION, \"ms \").concat(theme.transitions.easing.easeInOut)\n },\n childPulsate: {\n position: 'absolute',\n left: 0,\n top: 0,\n animation: \"mui-ripple-pulsate 2500ms \".concat(theme.transitions.easing.easeInOut, \" 200ms infinite\")\n },\n '@keyframes mui-ripple-enter': {\n '0%': {\n transform: 'scale(0)',\n opacity: 0.1\n },\n '100%': {\n transform: 'scale(1)',\n opacity: 0.3\n }\n },\n '@keyframes mui-ripple-exit': {\n '0%': {\n opacity: 1\n },\n '100%': {\n opacity: 0\n }\n },\n '@keyframes mui-ripple-pulsate': {\n '0%': {\n transform: 'scale(1)'\n },\n '50%': {\n transform: 'scale(0.92)'\n },\n '100%': {\n transform: 'scale(1)'\n }\n }\n };\n};\n\nexports.styles = styles;\n\nvar TouchRipple =\n/*#__PURE__*/\nfunction (_React$PureComponent) {\n (0, _inherits2.default)(TouchRipple, _React$PureComponent);\n\n function TouchRipple() {\n var _ref;\n\n var _temp, _this;\n\n (0, _classCallCheck2.default)(this, TouchRipple);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = TouchRipple.__proto__ || Object.getPrototypeOf(TouchRipple)).call.apply(_ref, [this].concat(args))), _this.ignoringMouseDown = false, _this.startTimer = null, _this.startTimerCommit = null, _this.state = {\n // eslint-disable-next-line react/no-unused-state\n nextKey: 0,\n ripples: []\n }, _this.pulsate = function () {\n _this.start({}, {\n pulsate: true\n });\n }, _this.start = function () {\n var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var cb = arguments.length > 2 ? arguments[2] : undefined;\n var _options$pulsate = options.pulsate,\n pulsate = _options$pulsate === void 0 ? false : _options$pulsate,\n _options$center = options.center,\n center = _options$center === void 0 ? _this.props.center || options.pulsate : _options$center,\n _options$fakeElement = options.fakeElement,\n fakeElement = _options$fakeElement === void 0 ? false : _options$fakeElement;\n\n if (event.type === 'mousedown' && _this.ignoringMouseDown) {\n _this.ignoringMouseDown = false;\n return;\n }\n\n if (event.type === 'touchstart') {\n _this.ignoringMouseDown = true;\n }\n\n var element = fakeElement ? null : _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));\n var rect = element ? element.getBoundingClientRect() : {\n width: 0,\n height: 0,\n left: 0,\n top: 0\n }; // Get the size of the ripple\n\n var rippleX;\n var rippleY;\n var rippleSize;\n\n if (center || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {\n rippleX = Math.round(rect.width / 2);\n rippleY = Math.round(rect.height / 2);\n } else {\n var clientX = event.clientX ? event.clientX : event.touches[0].clientX;\n var clientY = event.clientY ? event.clientY : event.touches[0].clientY;\n rippleX = Math.round(clientX - rect.left);\n rippleY = Math.round(clientY - rect.top);\n }\n\n if (center) {\n rippleSize = Math.sqrt((2 * Math.pow(rect.width, 2) + Math.pow(rect.height, 2)) / 3); // For some reason the animation is broken on Mobile Chrome if the size if even.\n\n if (rippleSize % 2 === 0) {\n rippleSize += 1;\n }\n } else {\n var sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;\n var sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;\n rippleSize = Math.sqrt(Math.pow(sizeX, 2) + Math.pow(sizeY, 2));\n } // Touche devices\n\n\n if (event.touches) {\n // Prepare the ripple effect.\n _this.startTimerCommit = function () {\n _this.startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }; // Deplay the execution of the ripple effect.\n\n\n _this.startTimer = setTimeout(function () {\n if (_this.startTimerCommit) {\n _this.startTimerCommit();\n\n _this.startTimerCommit = null;\n }\n }, DELAY_RIPPLE); // We have to make a tradeoff with this value.\n } else {\n _this.startCommit({\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize,\n cb: cb\n });\n }\n }, _this.startCommit = function (params) {\n var pulsate = params.pulsate,\n rippleX = params.rippleX,\n rippleY = params.rippleY,\n rippleSize = params.rippleSize,\n cb = params.cb;\n\n _this.setState(function (state) {\n return {\n nextKey: state.nextKey + 1,\n ripples: (0, _toConsumableArray2.default)(state.ripples).concat([_react.default.createElement(_Ripple.default, {\n key: state.nextKey,\n classes: _this.props.classes,\n timeout: {\n exit: DURATION,\n enter: DURATION\n },\n pulsate: pulsate,\n rippleX: rippleX,\n rippleY: rippleY,\n rippleSize: rippleSize\n })])\n };\n }, cb);\n }, _this.stop = function (event, cb) {\n clearTimeout(_this.startTimer);\n var ripples = _this.state.ripples; // The touch interaction occures to quickly.\n // We still want to show ripple effect.\n\n if (event.type === 'touchend' && _this.startTimerCommit) {\n event.persist();\n\n _this.startTimerCommit();\n\n _this.startTimerCommit = null;\n _this.startTimer = setTimeout(function () {\n _this.stop(event, cb);\n }, 0);\n return;\n }\n\n _this.startTimerCommit = null;\n\n if (ripples && ripples.length) {\n _this.setState({\n ripples: ripples.slice(1)\n }, cb);\n }\n }, _temp));\n }\n\n (0, _createClass2.default)(TouchRipple, [{\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n clearTimeout(this.startTimer);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _props = this.props,\n center = _props.center,\n classes = _props.classes,\n className = _props.className,\n other = (0, _objectWithoutProperties2.default)(_props, [\"center\", \"classes\", \"className\"]);\n return _react.default.createElement(_TransitionGroup.default, (0, _extends2.default)({\n component: \"span\",\n enter: true,\n exit: true,\n className: (0, _classnames.default)(classes.root, className)\n }, other), this.state.ripples);\n }\n }]);\n return TouchRipple;\n}(_react.default.PureComponent);\n\nTouchRipple.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * If `true`, the ripple starts at the center of the component\n * rather than at the point of interaction.\n */\n center: _propTypes.default.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string\n} : {};\nTouchRipple.defaultProps = {\n center: false\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n flip: false,\n name: 'MuiTouchRipple'\n})(TouchRipple);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.detectFocusVisible = detectFocusVisible;\nexports.listenForFocusKeys = listenForFocusKeys;\n\nvar _keycode = _interopRequireDefault(require(\"keycode\"));\n\nvar _warning = _interopRequireDefault(require(\"warning\"));\n\nvar _ownerDocument = _interopRequireDefault(require(\"../utils/ownerDocument\"));\n\n// weak\nvar internal = {\n focusKeyPressed: false,\n keyUpEventTimeout: -1\n};\n\nfunction detectFocusVisible(instance, element, callback) {\n var attempt = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(instance.focusVisibleCheckTime, 'Material-UI: missing instance.focusVisibleCheckTime.') : void 0;\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(instance.focusVisibleMaxCheckTimes, 'Material-UI: missing instance.focusVisibleMaxCheckTimes.') : void 0;\n instance.focusVisibleTimeout = setTimeout(function () {\n var doc = (0, _ownerDocument.default)(element);\n\n if (internal.focusKeyPressed && (doc.activeElement === element || element.contains(doc.activeElement))) {\n callback();\n } else if (attempt < instance.focusVisibleMaxCheckTimes) {\n detectFocusVisible(instance, element, callback, attempt + 1);\n }\n }, instance.focusVisibleCheckTime);\n}\n\nvar FOCUS_KEYS = ['tab', 'enter', 'space', 'esc', 'up', 'down', 'left', 'right'];\n\nfunction isFocusKey(event) {\n return FOCUS_KEYS.indexOf((0, _keycode.default)(event)) > -1;\n}\n\nvar handleKeyUpEvent = function handleKeyUpEvent(event) {\n if (isFocusKey(event)) {\n internal.focusKeyPressed = true; // Let's consider that the user is using a keyboard during a window frame of 1s.\n\n clearTimeout(internal.keyUpEventTimeout);\n internal.keyUpEventTimeout = setTimeout(function () {\n internal.focusKeyPressed = false;\n }, 1e3);\n }\n};\n\nfunction listenForFocusKeys(win) {\n // The event listener will only be added once per window.\n // Duplicate event listeners will be ignored by addEventListener.\n // Also, this logic is client side only, we don't need a teardown.\n win.addEventListener('keyup', handleKeyUpEvent);\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _assertThisInitialized2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/assertThisInitialized\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _keycode = _interopRequireDefault(require(\"keycode\"));\n\nvar _ownerWindow = _interopRequireDefault(require(\"../utils/ownerWindow\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _focusVisible = require(\"./focusVisible\");\n\nvar _TouchRipple = _interopRequireDefault(require(\"./TouchRipple\"));\n\nvar _createRippleHandler = _interopRequireDefault(require(\"./createRippleHandler\"));\n\nvar styles = {\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'relative',\n // Remove grey highlight\n WebkitTapHighlightColor: 'transparent',\n backgroundColor: 'transparent',\n // Reset default value\n // We disable the focus ring for mouse, touch and keyboard users.\n outline: 'none',\n border: 0,\n margin: 0,\n // Remove the margin in Safari\n borderRadius: 0,\n padding: 0,\n // Remove the padding in Firefox\n cursor: 'pointer',\n userSelect: 'none',\n verticalAlign: 'middle',\n '-moz-appearance': 'none',\n // Reset\n '-webkit-appearance': 'none',\n // Reset\n textDecoration: 'none',\n // So we take precedent over the style of a native element.\n color: 'inherit',\n '&::-moz-focus-inner': {\n borderStyle: 'none' // Remove Firefox dotted outline.\n\n },\n '&$disabled': {\n pointerEvents: 'none',\n // Disable link interactions\n cursor: 'default'\n }\n },\n disabled: {},\n focusVisible: {}\n};\n/* istanbul ignore if */\n\nexports.styles = styles;\n\nif (process.env.NODE_ENV !== 'production' && !_react.default.createContext) {\n throw new Error('Material-UI: react@16.3.0 or greater is required.');\n}\n/**\n * `ButtonBase` contains as few styles as possible.\n * It aims to be a simple building block for creating a button.\n * It contains a load of style reset and some focus/ripple logic.\n */\n\n\nvar ButtonBase =\n/*#__PURE__*/\nfunction (_React$Component) {\n (0, _inherits2.default)(ButtonBase, _React$Component);\n\n function ButtonBase() {\n var _ref;\n\n var _temp, _this;\n\n (0, _classCallCheck2.default)(this, ButtonBase);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = ButtonBase.__proto__ || Object.getPrototypeOf(ButtonBase)).call.apply(_ref, [this].concat(args))), _this.ripple = null, _this.keyDown = false, _this.button = null, _this.focusVisibleTimeout = null, _this.focusVisibleCheckTime = 50, _this.focusVisibleMaxCheckTimes = 5, _this.handleMouseDown = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'MouseDown', 'start', function () {\n clearTimeout(_this.focusVisibleTimeout);\n\n if (_this.state.focusVisible) {\n _this.setState({\n focusVisible: false\n });\n }\n }), _this.handleMouseUp = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'MouseUp', 'stop'), _this.handleMouseLeave = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'MouseLeave', 'stop', function (event) {\n if (_this.state.focusVisible) {\n event.preventDefault();\n }\n }), _this.handleTouchStart = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'TouchStart', 'start'), _this.handleTouchEnd = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'TouchEnd', 'stop'), _this.handleTouchMove = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'TouchMove', 'stop'), _this.handleBlur = (0, _createRippleHandler.default)((0, _assertThisInitialized2.default)(_this), 'Blur', 'stop', function () {\n clearTimeout(_this.focusVisibleTimeout);\n\n if (_this.state.focusVisible) {\n _this.setState({\n focusVisible: false\n });\n }\n }), _this.state = {}, _this.onRippleRef = function (node) {\n _this.ripple = node;\n }, _this.onFocusVisibleHandler = function (event) {\n _this.keyDown = false;\n\n _this.setState({\n focusVisible: true\n });\n\n if (_this.props.onFocusVisible) {\n _this.props.onFocusVisible(event);\n }\n }, _this.handleKeyDown = function (event) {\n var _this$props = _this.props,\n component = _this$props.component,\n focusRipple = _this$props.focusRipple,\n onKeyDown = _this$props.onKeyDown,\n onClick = _this$props.onClick;\n var key = (0, _keycode.default)(event); // Check if key is already down to avoid repeats being counted as multiple activations\n\n if (focusRipple && !_this.keyDown && _this.state.focusVisible && _this.ripple && key === 'space') {\n _this.keyDown = true;\n event.persist();\n\n _this.ripple.stop(event, function () {\n _this.ripple.start(event);\n });\n }\n\n if (onKeyDown) {\n onKeyDown(event);\n } // Keyboard accessibility for non interactive elements\n\n\n if (event.target === event.currentTarget && component && component !== 'button' && (key === 'space' || key === 'enter') && !(_this.button.tagName === 'A' && _this.button.href)) {\n event.preventDefault();\n\n if (onClick) {\n onClick(event);\n }\n }\n }, _this.handleKeyUp = function (event) {\n if (_this.props.focusRipple && (0, _keycode.default)(event) === 'space' && _this.ripple && _this.state.focusVisible) {\n _this.keyDown = false;\n event.persist();\n\n _this.ripple.stop(event, function () {\n _this.ripple.pulsate(event);\n });\n }\n\n if (_this.props.onKeyUp) {\n _this.props.onKeyUp(event);\n }\n }, _this.handleFocus = function (event) {\n if (_this.props.disabled) {\n return;\n } // Fix for https://github.com/facebook/react/issues/7769\n\n\n if (!_this.button) {\n _this.button = event.currentTarget;\n }\n\n event.persist();\n (0, _focusVisible.detectFocusVisible)((0, _assertThisInitialized2.default)(_this), _this.button, function () {\n _this.onFocusVisibleHandler(event);\n });\n\n if (_this.props.onFocus) {\n _this.props.onFocus(event);\n }\n }, _temp));\n }\n\n (0, _createClass2.default)(ButtonBase, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n this.button = _reactDom.default.findDOMNode(this);\n (0, _focusVisible.listenForFocusKeys)((0, _ownerWindow.default)(this.button));\n\n if (this.props.action) {\n this.props.action({\n focusVisible: function focusVisible() {\n _this2.setState({\n focusVisible: true\n });\n\n _this2.button.focus();\n }\n });\n }\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps, prevState) {\n if (this.props.focusRipple && !this.props.disableRipple && !prevState.focusVisible && this.state.focusVisible) {\n this.ripple.pulsate();\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.button = null;\n clearTimeout(this.focusVisibleTimeout);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _classNames;\n\n var _props = this.props,\n action = _props.action,\n buttonRef = _props.buttonRef,\n centerRipple = _props.centerRipple,\n children = _props.children,\n classes = _props.classes,\n classNameProp = _props.className,\n component = _props.component,\n disabled = _props.disabled,\n disableRipple = _props.disableRipple,\n disableTouchRipple = _props.disableTouchRipple,\n focusRipple = _props.focusRipple,\n focusVisibleClassName = _props.focusVisibleClassName,\n onBlur = _props.onBlur,\n onFocus = _props.onFocus,\n onFocusVisible = _props.onFocusVisible,\n onKeyDown = _props.onKeyDown,\n onKeyUp = _props.onKeyUp,\n onMouseDown = _props.onMouseDown,\n onMouseLeave = _props.onMouseLeave,\n onMouseUp = _props.onMouseUp,\n onTouchEnd = _props.onTouchEnd,\n onTouchMove = _props.onTouchMove,\n onTouchStart = _props.onTouchStart,\n tabIndex = _props.tabIndex,\n TouchRippleProps = _props.TouchRippleProps,\n type = _props.type,\n other = (0, _objectWithoutProperties2.default)(_props, [\"action\", \"buttonRef\", \"centerRipple\", \"children\", \"classes\", \"className\", \"component\", \"disabled\", \"disableRipple\", \"disableTouchRipple\", \"focusRipple\", \"focusVisibleClassName\", \"onBlur\", \"onFocus\", \"onFocusVisible\", \"onKeyDown\", \"onKeyUp\", \"onMouseDown\", \"onMouseLeave\", \"onMouseUp\", \"onTouchEnd\", \"onTouchMove\", \"onTouchStart\", \"tabIndex\", \"TouchRippleProps\", \"type\"]);\n var className = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), (0, _defineProperty2.default)(_classNames, classes.focusVisible, this.state.focusVisible), (0, _defineProperty2.default)(_classNames, focusVisibleClassName, this.state.focusVisible), _classNames), classNameProp);\n var buttonProps = {};\n var ComponentProp = component;\n\n if (ComponentProp === 'button' && other.href) {\n ComponentProp = 'a';\n }\n\n if (ComponentProp === 'button') {\n buttonProps.type = type || 'button';\n buttonProps.disabled = disabled;\n } else {\n buttonProps.role = 'button';\n }\n\n return _react.default.createElement(ComponentProp, (0, _extends2.default)({\n onBlur: this.handleBlur,\n onFocus: this.handleFocus,\n onKeyDown: this.handleKeyDown,\n onKeyUp: this.handleKeyUp,\n onMouseDown: this.handleMouseDown,\n onMouseLeave: this.handleMouseLeave,\n onMouseUp: this.handleMouseUp,\n onTouchEnd: this.handleTouchEnd,\n onTouchMove: this.handleTouchMove,\n onTouchStart: this.handleTouchStart,\n tabIndex: disabled ? '-1' : tabIndex,\n className: className,\n ref: buttonRef\n }, buttonProps, other), children, !disableRipple && !disabled ? _react.default.createElement(_TouchRipple.default, (0, _extends2.default)({\n innerRef: this.onRippleRef,\n center: centerRipple\n }, TouchRippleProps)) : null);\n }\n }], [{\n key: \"getDerivedStateFromProps\",\n value: function getDerivedStateFromProps(nextProps, prevState) {\n if (typeof prevState.focusVisible === 'undefined') {\n return {\n focusVisible: false,\n lastDisabled: nextProps.disabled\n };\n } // The blur won't fire when the disabled state is set on a focused input.\n // We need to book keep the focused state manually.\n\n\n if (!prevState.prevState && nextProps.disabled && prevState.focusVisible) {\n return {\n focusVisible: false,\n lastDisabled: nextProps.disabled\n };\n }\n\n return {\n lastDisabled: nextProps.disabled\n };\n }\n }]);\n return ButtonBase;\n}(_react.default.Component);\n\nButtonBase.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * Callback fired when the component mounts.\n * This is useful when you want to trigger an action programmatically.\n * It currently only supports `focusVisible()` action.\n *\n * @param {object} actions This object contains all possible actions\n * that can be triggered programmatically.\n */\n action: _propTypes.default.func,\n\n /**\n * Use that property to pass a ref callback to the native button component.\n */\n buttonRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),\n\n /**\n * If `true`, the ripples will be centered.\n * They won't start at the cursor interaction position.\n */\n centerRipple: _propTypes.default.bool,\n\n /**\n * The content of the component.\n */\n children: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * If `true`, the base button will be disabled.\n */\n disabled: _propTypes.default.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: _propTypes.default.bool,\n\n /**\n * If `true`, the touch ripple effect will be disabled.\n */\n disableTouchRipple: _propTypes.default.bool,\n\n /**\n * If `true`, the base button will have a keyboard focus ripple.\n * `disableRipple` must also be `false`.\n */\n focusRipple: _propTypes.default.bool,\n\n /**\n * This property can help a person know which element has the keyboard focus.\n * The class name will be applied when the element gain the focus throught a keyboard interaction.\n * It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).\n * The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md).\n */\n focusVisibleClassName: _propTypes.default.string,\n\n /**\n * @ignore\n */\n onBlur: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onClick: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onFocus: _propTypes.default.func,\n\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onKeyDown: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onKeyUp: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onMouseDown: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onMouseLeave: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onMouseUp: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onTouchEnd: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onTouchMove: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onTouchStart: _propTypes.default.func,\n\n /**\n * @ignore\n */\n role: _propTypes.default.string,\n\n /**\n * @ignore\n */\n tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),\n\n /**\n * Properties applied to the `TouchRipple` element.\n */\n TouchRippleProps: _propTypes.default.object,\n\n /**\n * Used to control the button's purpose.\n * This property passes the value to the `type` attribute of the native button component.\n * Valid property values include `button`, `submit`, and `reset`.\n */\n type: _propTypes.default.string\n} : {};\nButtonBase.defaultProps = {\n centerRipple: false,\n component: 'button',\n disableRipple: false,\n disableTouchRipple: false,\n focusRipple: false,\n tabIndex: '0',\n type: 'button'\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiButtonBase'\n})(ButtonBase);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _colorManipulator = require(\"../styles/colorManipulator\");\n\nvar _ButtonBase = _interopRequireDefault(require(\"../ButtonBase\"));\n\nvar _helpers = require(\"../utils/helpers\");\n\n// @inheritedComponent ButtonBase\nvar styles = function styles(theme) {\n return {\n root: {\n textAlign: 'center',\n flex: '0 0 auto',\n fontSize: theme.typography.pxToRem(24),\n width: 48,\n height: 48,\n padding: 0,\n borderRadius: '50%',\n color: theme.palette.action.active,\n transition: theme.transitions.create('background-color', {\n duration: theme.transitions.duration.shortest\n }),\n '&:hover': {\n backgroundColor: (0, _colorManipulator.fade)(theme.palette.action.active, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n },\n '&$disabled': {\n backgroundColor: 'transparent'\n }\n },\n '&$disabled': {\n color: theme.palette.action.disabled\n }\n },\n colorInherit: {\n color: 'inherit'\n },\n colorPrimary: {\n color: theme.palette.primary.main,\n '&:hover': {\n backgroundColor: (0, _colorManipulator.fade)(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n colorSecondary: {\n color: theme.palette.secondary.main,\n '&:hover': {\n backgroundColor: (0, _colorManipulator.fade)(theme.palette.secondary.main, theme.palette.action.hoverOpacity),\n // Reset on touch devices, it doesn't add specificity\n '@media (hover: none)': {\n backgroundColor: 'transparent'\n }\n }\n },\n disabled: {},\n label: {\n width: '100%',\n display: 'flex',\n alignItems: 'inherit',\n justifyContent: 'inherit'\n }\n };\n};\n/**\n * Refer to the [Icons](/style/icons) section of the documentation\n * regarding the available icon options.\n */\n\n\nexports.styles = styles;\n\nfunction IconButton(props) {\n var _classNames;\n\n var children = props.children,\n classes = props.classes,\n className = props.className,\n color = props.color,\n disabled = props.disabled,\n other = (0, _objectWithoutProperties2.default)(props, [\"children\", \"classes\", \"className\", \"color\", \"disabled\"]);\n return _react.default.createElement(_ButtonBase.default, (0, _extends2.default)({\n className: (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes[\"color\".concat((0, _helpers.capitalize)(color))], color !== 'default'), (0, _defineProperty2.default)(_classNames, classes.disabled, disabled), _classNames), className),\n centerRipple: true,\n focusRipple: true,\n disabled: disabled\n }, other), _react.default.createElement(\"span\", {\n className: classes.label\n }, children));\n}\n\nIconButton.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * The icon element.\n */\n children: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary']),\n\n /**\n * If `true`, the button will be disabled.\n */\n disabled: _propTypes.default.bool,\n\n /**\n * If `true`, the ripple will be disabled.\n */\n disableRipple: _propTypes.default.bool\n} : {};\nIconButton.defaultProps = {\n color: 'default',\n disabled: false\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiIconButton'\n})(IconButton);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _helpers = require(\"../utils/helpers\");\n\nvar _SwitchBase = _interopRequireDefault(require(\"../internal/SwitchBase\"));\n\nvar styles = function styles(theme) {\n return {\n root: {\n display: 'inline-flex',\n width: 62,\n position: 'relative',\n flexShrink: 0,\n // For correct alignment with the text.\n verticalAlign: 'middle'\n },\n icon: {\n boxShadow: theme.shadows[1],\n backgroundColor: 'currentColor',\n width: 20,\n height: 20,\n borderRadius: '50%'\n },\n iconChecked: {\n boxShadow: theme.shadows[2]\n },\n switchBase: {\n zIndex: 1,\n color: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],\n transition: theme.transitions.create('transform', {\n duration: theme.transitions.duration.shortest\n })\n },\n checked: {\n transform: 'translateX(14px)',\n '& + $bar': {\n opacity: 0.5\n }\n },\n colorPrimary: {\n '&$checked': {\n color: theme.palette.primary.main,\n '& + $bar': {\n backgroundColor: theme.palette.primary.main\n }\n }\n },\n colorSecondary: {\n '&$checked': {\n color: theme.palette.secondary.main,\n '& + $bar': {\n backgroundColor: theme.palette.secondary.main\n }\n }\n },\n disabled: {\n '& + $bar': {\n opacity: theme.palette.type === 'light' ? 0.12 : 0.1\n },\n '& $icon': {\n boxShadow: theme.shadows[1]\n },\n '&$switchBase': {\n color: theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],\n '& + $bar': {\n backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white\n }\n }\n },\n bar: {\n borderRadius: 14 / 2,\n display: 'block',\n position: 'absolute',\n width: 34,\n height: 14,\n top: '50%',\n left: '50%',\n marginTop: -7,\n marginLeft: -17,\n transition: theme.transitions.create(['opacity', 'background-color'], {\n duration: theme.transitions.duration.shortest\n }),\n backgroundColor: theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,\n opacity: theme.palette.type === 'light' ? 0.38 : 0.3\n }\n };\n};\n\nexports.styles = styles;\n\nfunction Switch(props) {\n var classes = props.classes,\n className = props.className,\n color = props.color,\n other = (0, _objectWithoutProperties2.default)(props, [\"classes\", \"className\", \"color\"]);\n return _react.default.createElement(\"span\", {\n className: (0, _classnames.default)(classes.root, className)\n }, _react.default.createElement(_SwitchBase.default, (0, _extends2.default)({\n icon: _react.default.createElement(\"span\", {\n className: classes.icon\n }),\n classes: {\n root: (0, _classnames.default)(classes.switchBase, classes[\"color\".concat((0, _helpers.capitalize)(color))]),\n checked: classes.checked,\n disabled: classes.disabled\n },\n checkedIcon: _react.default.createElement(\"span\", {\n className: (0, _classnames.default)(classes.icon, classes.iconChecked)\n })\n }, other)), _react.default.createElement(\"span\", {\n className: classes.bar\n }));\n}\n\nSwitch.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * If `true`, the component is checked.\n */\n checked: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),\n\n /**\n * The icon to display when the component is checked.\n */\n checkedIcon: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: _propTypes.default.oneOf(['primary', 'secondary', 'default']),\n\n /**\n * @ignore\n */\n defaultChecked: _propTypes.default.bool,\n\n /**\n * If `true`, the switch will be disabled.\n */\n disabled: _propTypes.default.bool,\n\n /**\n * If `true`, the ripple effect will be disabled.\n */\n disableRipple: _propTypes.default.bool,\n\n /**\n * The icon to display when the component is unchecked.\n */\n icon: _propTypes.default.node,\n\n /**\n * The id of the `input` element.\n */\n id: _propTypes.default.string,\n\n /**\n * Attributes applied to the `input` element.\n */\n inputProps: _propTypes.default.object,\n\n /**\n * Use that property to pass a ref callback to the native input component.\n */\n inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),\n\n /**\n * Callback fired when the state is changed.\n *\n * @param {object} event The event source of the callback.\n * You can pull out the new value by accessing `event.target.checked`.\n * @param {boolean} checked The `checked` value of the switch\n */\n onChange: _propTypes.default.func,\n\n /**\n * The input component property `type`.\n */\n type: _propTypes.default.string,\n\n /**\n * The value of the component.\n */\n value: _propTypes.default.string\n} : {};\nSwitch.defaultProps = {\n color: 'secondary'\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiSwitch'\n})(Switch);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _colorManipulator = require(\"../styles/colorManipulator\");\n\nvar styles = function styles(theme) {\n return {\n root: {\n height: 1,\n margin: 0,\n // Reset browser default style.\n border: 'none',\n flexShrink: 0,\n backgroundColor: theme.palette.divider\n },\n absolute: {\n position: 'absolute',\n bottom: 0,\n left: 0,\n width: '100%'\n },\n inset: {\n marginLeft: 72\n },\n light: {\n backgroundColor: (0, _colorManipulator.fade)(theme.palette.divider, 0.08)\n }\n };\n};\n\nexports.styles = styles;\n\nfunction Divider(props) {\n var _classNames;\n\n var absolute = props.absolute,\n classes = props.classes,\n classNameProp = props.className,\n Component = props.component,\n inset = props.inset,\n light = props.light,\n other = (0, _objectWithoutProperties2.default)(props, [\"absolute\", \"classes\", \"className\", \"component\", \"inset\", \"light\"]);\n var className = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.absolute, absolute), (0, _defineProperty2.default)(_classNames, classes.inset, inset), (0, _defineProperty2.default)(_classNames, classes.light, light), _classNames), classNameProp);\n return _react.default.createElement(Component, (0, _extends2.default)({\n className: className\n }, other));\n}\n\nDivider.propTypes = process.env.NODE_ENV !== \"production\" ? {\n absolute: _propTypes.default.bool,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * If `true`, the divider will be indented.\n */\n inset: _propTypes.default.bool,\n\n /**\n * If `true`, the divider will have a lighter color.\n */\n light: _propTypes.default.bool\n} : {};\nDivider.defaultProps = {\n absolute: false,\n component: 'hr',\n inset: false,\n light: false\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiDivider'\n})(Divider);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _Typography = _interopRequireDefault(require(\"../Typography\"));\n\nvar styles = function styles(theme) {\n return {\n root: theme.mixins.gutters({\n display: 'flex',\n alignItems: 'center',\n paddingTop: 16,\n paddingBottom: 16\n }),\n avatar: {\n flex: '0 0 auto',\n marginRight: 16\n },\n action: {\n flex: '0 0 auto',\n alignSelf: 'flex-start',\n marginTop: -8,\n marginRight: -16\n },\n content: {\n flex: '1 1 auto'\n },\n title: {},\n subheader: {}\n };\n};\n\nexports.styles = styles;\n\nfunction CardHeader(props) {\n var action = props.action,\n avatar = props.avatar,\n classes = props.classes,\n classNameProp = props.className,\n Component = props.component,\n subheader = props.subheader,\n title = props.title,\n other = (0, _objectWithoutProperties2.default)(props, [\"action\", \"avatar\", \"classes\", \"className\", \"component\", \"subheader\", \"title\"]);\n return _react.default.createElement(Component, (0, _extends2.default)({\n className: (0, _classnames.default)(classes.root, classNameProp)\n }, other), avatar && _react.default.createElement(\"div\", {\n className: classes.avatar\n }, avatar), _react.default.createElement(\"div\", {\n className: classes.content\n }, _react.default.createElement(_Typography.default, {\n variant: avatar ? 'body2' : 'headline',\n component: \"span\",\n className: classes.title\n }, title), subheader && _react.default.createElement(_Typography.default, {\n variant: avatar ? 'body2' : 'body1',\n component: \"span\",\n color: \"textSecondary\",\n className: classes.subheader\n }, subheader)), action && _react.default.createElement(\"div\", {\n className: classes.action\n }, action));\n}\n\nCardHeader.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * The action to display in the card header.\n */\n action: _propTypes.default.node,\n\n /**\n * The Avatar for the Card Header.\n */\n avatar: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * The content of the component.\n */\n subheader: _propTypes.default.node,\n\n /**\n * The content of the Card Title.\n */\n title: _propTypes.default.node\n} : {};\nCardHeader.defaultProps = {\n component: 'div'\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiCardHeader'\n})(CardHeader);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar styles = function styles(theme) {\n return {\n root: theme.mixins.gutters({\n paddingTop: 16,\n paddingBottom: 16,\n '&:last-child': {\n paddingBottom: 24\n }\n })\n };\n};\n\nexports.styles = styles;\n\nfunction CardContent(props) {\n var classes = props.classes,\n className = props.className,\n Component = props.component,\n other = (0, _objectWithoutProperties2.default)(props, [\"classes\", \"className\", \"component\"]);\n return _react.default.createElement(Component, (0, _extends2.default)({\n className: (0, _classnames.default)(classes.root, className)\n }, other));\n}\n\nCardContent.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object])\n} : {};\nCardContent.defaultProps = {\n component: 'div'\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiCardContent'\n})(CardContent);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _Paper = _interopRequireDefault(require(\"../Paper\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\n// @inheritedComponent Paper\nvar styles = {\n root: {\n overflow: 'hidden'\n }\n};\nexports.styles = styles;\n\nfunction Card(props) {\n var classes = props.classes,\n className = props.className,\n raised = props.raised,\n other = (0, _objectWithoutProperties2.default)(props, [\"classes\", \"className\", \"raised\"]);\n return _react.default.createElement(_Paper.default, (0, _extends2.default)({\n className: (0, _classnames.default)(classes.root, className),\n elevation: raised ? 8 : 1\n }, other));\n}\n\nCard.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * If `true`, the card will use raised styling.\n */\n raised: _propTypes.default.bool\n} : {};\nCard.defaultProps = {\n raised: false\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiCard'\n})(Card);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _helpers = require(\"../utils/helpers\");\n\nvar styles = function styles(theme) {\n return {\n root: {\n display: 'block',\n margin: 0\n },\n display4: theme.typography.display4,\n display3: theme.typography.display3,\n display2: theme.typography.display2,\n display1: theme.typography.display1,\n headline: theme.typography.headline,\n title: theme.typography.title,\n subheading: theme.typography.subheading,\n body2: theme.typography.body2,\n body1: theme.typography.body1,\n caption: theme.typography.caption,\n button: theme.typography.button,\n alignLeft: {\n textAlign: 'left'\n },\n alignCenter: {\n textAlign: 'center'\n },\n alignRight: {\n textAlign: 'right'\n },\n alignJustify: {\n textAlign: 'justify'\n },\n noWrap: {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap'\n },\n gutterBottom: {\n marginBottom: '0.35em'\n },\n paragraph: {\n marginBottom: 16\n },\n colorInherit: {\n color: 'inherit'\n },\n colorPrimary: {\n color: theme.palette.primary.main\n },\n colorSecondary: {\n color: theme.palette.secondary.main\n },\n colorTextSecondary: {\n color: theme.palette.text.secondary\n },\n colorError: {\n color: theme.palette.error.main\n }\n };\n};\n\nexports.styles = styles;\n\nfunction Typography(props) {\n var _classNames;\n\n var align = props.align,\n classes = props.classes,\n classNameProp = props.className,\n componentProp = props.component,\n color = props.color,\n gutterBottom = props.gutterBottom,\n headlineMapping = props.headlineMapping,\n noWrap = props.noWrap,\n paragraph = props.paragraph,\n variant = props.variant,\n other = (0, _objectWithoutProperties2.default)(props, [\"align\", \"classes\", \"className\", \"component\", \"color\", \"gutterBottom\", \"headlineMapping\", \"noWrap\", \"paragraph\", \"variant\"]);\n var className = (0, _classnames.default)(classes.root, classes[variant], (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes[\"color\".concat((0, _helpers.capitalize)(color))], color !== 'default'), (0, _defineProperty2.default)(_classNames, classes.noWrap, noWrap), (0, _defineProperty2.default)(_classNames, classes.gutterBottom, gutterBottom), (0, _defineProperty2.default)(_classNames, classes.paragraph, paragraph), (0, _defineProperty2.default)(_classNames, classes[\"align\".concat((0, _helpers.capitalize)(align))], align !== 'inherit'), _classNames), classNameProp);\n var Component = componentProp || (paragraph ? 'p' : headlineMapping[variant]) || 'span';\n return _react.default.createElement(Component, (0, _extends2.default)({\n className: className\n }, other));\n}\n\nTypography.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * Set the text-align on the component.\n */\n align: _propTypes.default.oneOf(['inherit', 'left', 'center', 'right', 'justify']),\n\n /**\n * The content of the component.\n */\n children: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The color of the component. It supports those theme colors that make sense for this component.\n */\n color: _propTypes.default.oneOf(['inherit', 'primary', 'textSecondary', 'secondary', 'error', 'default']),\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n * By default, it maps the variant to a good default headline component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * If `true`, the text will have a bottom margin.\n */\n gutterBottom: _propTypes.default.bool,\n\n /**\n * We are empirically mapping the variant property to a range of different DOM element types.\n * For instance, h1 to h6. If you wish to change that mapping, you can provide your own.\n * Alternatively, you can use the `component` property.\n */\n headlineMapping: _propTypes.default.object,\n\n /**\n * If `true`, the text will not wrap, but instead will truncate with an ellipsis.\n */\n noWrap: _propTypes.default.bool,\n\n /**\n * If `true`, the text will have a bottom margin.\n */\n paragraph: _propTypes.default.bool,\n\n /**\n * Applies the theme typography styles.\n */\n variant: _propTypes.default.oneOf(['display4', 'display3', 'display2', 'display1', 'headline', 'title', 'subheading', 'body2', 'body1', 'caption', 'button'])\n} : {};\nTypography.defaultProps = {\n align: 'inherit',\n color: 'default',\n gutterBottom: false,\n headlineMapping: {\n display4: 'h1',\n display3: 'h1',\n display2: 'h1',\n display1: 'h1',\n headline: 'h1',\n title: 'h2',\n subheading: 'h3',\n body2: 'aside',\n body1: 'p'\n },\n noWrap: false,\n paragraph: false,\n variant: 'body1'\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiTypography'\n})(Typography);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _warning = _interopRequireDefault(require(\"warning\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar styles = function styles(theme) {\n var elevations = {};\n theme.shadows.forEach(function (shadow, index) {\n elevations[\"elevation\".concat(index)] = {\n boxShadow: shadow\n };\n });\n return (0, _objectSpread2.default)({\n root: {\n backgroundColor: theme.palette.background.paper\n },\n rounded: {\n borderRadius: theme.shape.borderRadius\n }\n }, elevations);\n};\n\nexports.styles = styles;\n\nfunction Paper(props) {\n var classes = props.classes,\n classNameProp = props.className,\n Component = props.component,\n square = props.square,\n elevation = props.elevation,\n other = (0, _objectWithoutProperties2.default)(props, [\"classes\", \"className\", \"component\", \"square\", \"elevation\"]);\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(elevation >= 0 && elevation < 25, \"Material-UI: this elevation `\".concat(elevation, \"` is not implemented.\")) : void 0;\n var className = (0, _classnames.default)(classes.root, classes[\"elevation\".concat(elevation)], (0, _defineProperty2.default)({}, classes.rounded, !square), classNameProp);\n return _react.default.createElement(Component, (0, _extends2.default)({\n className: className\n }, other));\n}\n\nPaper.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * The content of the component.\n */\n children: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The component used for the root node.\n * Either a string to use a DOM element or a component.\n */\n component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * Shadow depth, corresponds to `dp` in the spec.\n * It's accepting values between 0 and 24 inclusive.\n */\n elevation: _propTypes.default.number,\n\n /**\n * If `true`, rounded corners are disabled.\n */\n square: _propTypes.default.bool\n} : {};\nPaper.defaultProps = {\n component: 'div',\n elevation: 2,\n square: false\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiPaper'\n})(Paper);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _Paper = _interopRequireDefault(require(\"../Paper\"));\n\nvar _Typography = _interopRequireDefault(require(\"../Typography\"));\n\nvar _colorManipulator = require(\"../styles/colorManipulator\");\n\n// @inheritedComponent Paper\nvar styles = function styles(theme) {\n var _root;\n\n var emphasis = theme.palette.type === 'light' ? 0.8 : 0.98;\n var backgroundColor = (0, _colorManipulator.emphasize)(theme.palette.background.default, emphasis);\n return {\n root: (_root = {\n pointerEvents: 'initial',\n color: theme.palette.getContrastText(backgroundColor),\n backgroundColor: backgroundColor,\n display: 'flex',\n alignItems: 'center',\n flexWrap: 'wrap',\n padding: '6px 24px'\n }, (0, _defineProperty2.default)(_root, theme.breakpoints.up('md'), {\n minWidth: 288,\n maxWidth: 568,\n borderRadius: theme.shape.borderRadius\n }), (0, _defineProperty2.default)(_root, theme.breakpoints.down('sm'), {\n flexGrow: 1\n }), _root),\n message: {\n padding: '8px 0'\n },\n action: {\n display: 'flex',\n alignItems: 'center',\n marginLeft: 'auto',\n paddingLeft: 24,\n marginRight: -8\n }\n };\n};\n\nexports.styles = styles;\n\nfunction SnackbarContent(props) {\n var action = props.action,\n classes = props.classes,\n className = props.className,\n message = props.message,\n other = (0, _objectWithoutProperties2.default)(props, [\"action\", \"classes\", \"className\", \"message\"]);\n return _react.default.createElement(_Paper.default, (0, _extends2.default)({\n component: _Typography.default,\n headlineMapping: {\n body1: 'div'\n },\n role: \"alertdialog\",\n square: true,\n elevation: 6,\n className: (0, _classnames.default)(classes.root, className)\n }, other), _react.default.createElement(\"div\", {\n className: classes.message\n }, message), action ? _react.default.createElement(\"div\", {\n className: classes.action\n }, action) : null);\n}\n\nSnackbarContent.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * The action to display.\n */\n action: _propTypes.default.node,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * The message to display.\n */\n message: _propTypes.default.node\n} : {};\n\nvar _default = (0, _withStyles.default)(styles, {\n name: 'MuiSnackbarContent'\n})(SnackbarContent);\n\nexports.default = _default;","'use strict';\n\nexports.__esModule = true;\nexports.classNamesShape = exports.timeoutsShape = undefined;\nexports.transitionTimeout = transitionTimeout;\n\nvar _propTypes = require('prop-types');\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction transitionTimeout(transitionType) {\n var timeoutPropName = 'transition' + transitionType + 'Timeout';\n var enabledPropName = 'transition' + transitionType;\n\n return function (props) {\n // If the transition is enabled\n if (props[enabledPropName]) {\n // If no timeout duration is provided\n if (props[timeoutPropName] == null) {\n return new Error(timeoutPropName + ' wasn\\'t supplied to CSSTransitionGroup: ' + 'this can cause unreliable animations and won\\'t be supported in ' + 'a future version of React. See ' + 'https://fb.me/react-animation-transition-group-timeout for more ' + 'information.');\n\n // If the duration isn't a number\n } else if (typeof props[timeoutPropName] !== 'number') {\n return new Error(timeoutPropName + ' must be a number (in milliseconds)');\n }\n }\n\n return null;\n };\n}\n\nvar timeoutsShape = exports.timeoutsShape = _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.shape({\n enter: _propTypes2.default.number,\n exit: _propTypes2.default.number\n}).isRequired]);\n\nvar classNamesShape = exports.classNamesShape = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({\n enter: _propTypes2.default.string,\n exit: _propTypes2.default.string,\n active: _propTypes2.default.string\n}), _propTypes2.default.shape({\n enter: _propTypes2.default.string,\n enterDone: _propTypes2.default.string,\n enterActive: _propTypes2.default.string,\n exit: _propTypes2.default.string,\n exitDone: _propTypes2.default.string,\n exitActive: _propTypes2.default.string\n})]);","/**\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'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n","/**\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'use strict';\n\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\n\nfunction 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 instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim\n };\n\n ReactPropTypes.checkPropTypes = emptyFunction;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.setTranslateValue = setTranslateValue;\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\n\nvar _reactEventListener = _interopRequireDefault(require(\"react-event-listener\"));\n\nvar _debounce = _interopRequireDefault(require(\"debounce\"));\n\nvar _Transition = _interopRequireDefault(require(\"react-transition-group/Transition\"));\n\nvar _ownerWindow = _interopRequireDefault(require(\"../utils/ownerWindow\"));\n\nvar _withTheme = _interopRequireDefault(require(\"../styles/withTheme\"));\n\nvar _transitions = require(\"../styles/transitions\");\n\nvar _utils = require(\"../transitions/utils\");\n\n// @inheritedComponent Transition\n// < 1kb payload overhead when lodash/debounce is > 3kb.\nvar GUTTER = 24; // Translate the node so he can't be seen on the screen.\n// Later, we gonna translate back the node to his original location\n// with `translate3d(0, 0, 0)`.`\n\nfunction getTranslateValue(props, node) {\n var direction = props.direction;\n var rect = node.getBoundingClientRect();\n var transform;\n\n if (node.fakeTransform) {\n transform = node.fakeTransform;\n } else {\n var computedStyle = (0, _ownerWindow.default)(node).getComputedStyle(node);\n transform = computedStyle.getPropertyValue('-webkit-transform') || computedStyle.getPropertyValue('transform');\n }\n\n var offsetX = 0;\n var offsetY = 0;\n\n if (transform && transform !== 'none' && typeof transform === 'string') {\n var transformValues = transform.split('(')[1].split(')')[0].split(',');\n offsetX = parseInt(transformValues[4], 10);\n offsetY = parseInt(transformValues[5], 10);\n }\n\n if (direction === 'left') {\n return \"translateX(100vw) translateX(-\".concat(rect.left - offsetX, \"px)\");\n }\n\n if (direction === 'right') {\n return \"translateX(-\".concat(rect.left + rect.width + GUTTER - offsetX, \"px)\");\n }\n\n if (direction === 'up') {\n return \"translateY(100vh) translateY(-\".concat(rect.top - offsetY, \"px)\");\n } // direction === 'down'\n\n\n return \"translateY(-\".concat(rect.top + rect.height + GUTTER - offsetY, \"px)\");\n}\n\nfunction setTranslateValue(props, node) {\n var transform = getTranslateValue(props, node);\n\n if (transform) {\n node.style.webkitTransform = transform;\n node.style.transform = transform;\n }\n}\n/**\n * The Slide transition is used by the [Snackbar](/demos/snackbars) component.\n * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.\n */\n\n\nvar Slide =\n/*#__PURE__*/\nfunction (_React$Component) {\n (0, _inherits2.default)(Slide, _React$Component);\n\n function Slide() {\n var _ref;\n\n var _temp, _this;\n\n (0, _classCallCheck2.default)(this, Slide);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = Slide.__proto__ || Object.getPrototypeOf(Slide)).call.apply(_ref, [this].concat(args))), _this.mounted = false, _this.transition = null, _this.handleResize = (0, _debounce.default)(function () {\n // Skip configuration where the position is screen size invariant.\n if (_this.props.in || _this.props.direction === 'down' || _this.props.direction === 'right') {\n return;\n }\n\n var node = _reactDom.default.findDOMNode(_this.transition);\n\n if (node) {\n setTranslateValue(_this.props, node);\n }\n }, 166), _this.handleEnter = function (node) {\n setTranslateValue(_this.props, node);\n (0, _utils.reflow)(node);\n\n if (_this.props.onEnter) {\n _this.props.onEnter(node);\n }\n }, _this.handleEntering = function (node) {\n var theme = _this.props.theme;\n var transitionProps = (0, _utils.getTransitionProps)(_this.props, {\n mode: 'enter'\n });\n node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _objectSpread2.default)({}, transitionProps, {\n easing: theme.transitions.easing.easeOut\n }));\n node.style.transition = theme.transitions.create('transform', (0, _objectSpread2.default)({}, transitionProps, {\n easing: theme.transitions.easing.easeOut\n }));\n node.style.webkitTransform = 'translate(0, 0)';\n node.style.transform = 'translate(0, 0)';\n\n if (_this.props.onEntering) {\n _this.props.onEntering(node);\n }\n }, _this.handleExit = function (node) {\n var theme = _this.props.theme;\n var transitionProps = (0, _utils.getTransitionProps)(_this.props, {\n mode: 'exit'\n });\n node.style.webkitTransition = theme.transitions.create('-webkit-transform', (0, _objectSpread2.default)({}, transitionProps, {\n easing: theme.transitions.easing.sharp\n }));\n node.style.transition = theme.transitions.create('transform', (0, _objectSpread2.default)({}, transitionProps, {\n easing: theme.transitions.easing.sharp\n }));\n setTranslateValue(_this.props, node);\n\n if (_this.props.onExit) {\n _this.props.onExit(node);\n }\n }, _this.handleExited = function (node) {\n // No need for transitions when the component is hidden\n node.style.webkitTransition = '';\n node.style.transition = '';\n\n if (_this.props.onExited) {\n _this.props.onExited(node);\n }\n }, _temp));\n }\n\n (0, _createClass2.default)(Slide, [{\n key: \"componentDidMount\",\n // Corresponds to 10 frames at 60 Hz.\n value: function componentDidMount() {\n // state.mounted handle SSR, once the component is mounted, we need\n // to properly hide it.\n if (!this.props.in) {\n // We need to set initial translate values of transition element\n // otherwise component will be shown when in=false.\n this.updatePosition();\n }\n\n this.mounted = true;\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n if (prevProps.direction !== this.props.direction && !this.props.in) {\n // We need to update the position of the drawer when the direction change and\n // when it's hidden.\n this.updatePosition();\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.handleResize.clear();\n }\n }, {\n key: \"updatePosition\",\n value: function updatePosition() {\n var node = _reactDom.default.findDOMNode(this.transition);\n\n if (node) {\n node.style.visibility = 'inherit';\n setTranslateValue(this.props, node);\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this2 = this;\n\n var _props = this.props,\n children = _props.children,\n onEnter = _props.onEnter,\n onEntering = _props.onEntering,\n onExit = _props.onExit,\n onExited = _props.onExited,\n styleProp = _props.style,\n theme = _props.theme,\n other = (0, _objectWithoutProperties2.default)(_props, [\"children\", \"onEnter\", \"onEntering\", \"onExit\", \"onExited\", \"style\", \"theme\"]);\n var style = {}; // We use this state to handle the server-side rendering.\n // We don't know the width of the children ahead of time.\n // We need to render it.\n\n if (!this.props.in && !this.mounted) {\n style.visibility = 'hidden';\n }\n\n style = (0, _objectSpread2.default)({}, style, styleProp, _react.default.isValidElement(children) ? children.props.style : {});\n return _react.default.createElement(_reactEventListener.default, {\n target: \"window\",\n onResize: this.handleResize\n }, _react.default.createElement(_Transition.default, (0, _extends2.default)({\n onEnter: this.handleEnter,\n onEntering: this.handleEntering,\n onExit: this.handleExit,\n onExited: this.handleExited,\n appear: true,\n style: style,\n ref: function ref(node) {\n _this2.transition = node;\n }\n }, other), children));\n }\n }]);\n return Slide;\n}(_react.default.Component);\n\nSlide.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A single child content element.\n */\n children: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),\n\n /**\n * Direction the child node will enter from.\n */\n direction: _propTypes.default.oneOf(['left', 'right', 'up', 'down']),\n\n /**\n * If `true`, show the component; triggers the enter or exit animation.\n */\n in: _propTypes.default.bool,\n\n /**\n * @ignore\n */\n onEnter: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onEntering: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onExit: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onExited: _propTypes.default.func,\n\n /**\n * @ignore\n */\n style: _propTypes.default.object,\n\n /**\n * @ignore\n */\n theme: _propTypes.default.object.isRequired,\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n timeout: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({\n enter: _propTypes.default.number,\n exit: _propTypes.default.number\n })])\n} : {};\nSlide.defaultProps = {\n direction: 'down',\n timeout: {\n enter: _transitions.duration.enteringScreen,\n exit: _transitions.duration.leavingScreen\n }\n};\n\nvar _default = (0, _withTheme.default)()(Slide);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _reactEventListener = _interopRequireDefault(require(\"react-event-listener\"));\n\nvar _ownerDocument = _interopRequireDefault(require(\"../utils/ownerDocument\"));\n\n// @inheritedComponent EventListener\n\n/**\n * Listen for click events that occur somewhere in the document, outside of the element itself.\n * For instance, if you need to hide a menu when people click anywhere else on your page.\n */\nvar ClickAwayListener =\n/*#__PURE__*/\nfunction (_React$Component) {\n (0, _inherits2.default)(ClickAwayListener, _React$Component);\n\n function ClickAwayListener() {\n var _ref;\n\n var _temp, _this;\n\n (0, _classCallCheck2.default)(this, ClickAwayListener);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = ClickAwayListener.__proto__ || Object.getPrototypeOf(ClickAwayListener)).call.apply(_ref, [this].concat(args))), _this.node = null, _this.mounted = null, _this.handleClickAway = function (event) {\n // Ignore events that have been `event.preventDefault()` marked.\n if (event.defaultPrevented) {\n return;\n } // IE11 support, which trigger the handleClickAway even after the unbind\n\n\n if (!_this.mounted) {\n return;\n } // The child might render null.\n\n\n if (!_this.node) {\n return;\n }\n\n var doc = (0, _ownerDocument.default)(_this.node);\n\n if (doc.documentElement && doc.documentElement.contains(event.target) && !_this.node.contains(event.target)) {\n _this.props.onClickAway(event);\n }\n }, _temp));\n }\n\n (0, _createClass2.default)(ClickAwayListener, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n this.node = _reactDom.default.findDOMNode(this);\n this.mounted = true;\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n this.mounted = false;\n }\n }, {\n key: \"render\",\n value: function render() {\n var _props = this.props,\n children = _props.children,\n mouseEvent = _props.mouseEvent,\n touchEvent = _props.touchEvent,\n onClickAway = _props.onClickAway,\n other = (0, _objectWithoutProperties2.default)(_props, [\"children\", \"mouseEvent\", \"touchEvent\", \"onClickAway\"]);\n var listenerProps = {};\n\n if (mouseEvent !== false) {\n listenerProps[mouseEvent] = this.handleClickAway;\n }\n\n if (touchEvent !== false) {\n listenerProps[touchEvent] = this.handleClickAway;\n }\n\n return _react.default.createElement(_reactEventListener.default, (0, _extends2.default)({\n target: \"document\"\n }, listenerProps, other), children);\n }\n }]);\n return ClickAwayListener;\n}(_react.default.Component);\n\nClickAwayListener.propTypes = process.env.NODE_ENV !== \"production\" ? {\n children: _propTypes.default.node.isRequired,\n mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', false]),\n onClickAway: _propTypes.default.func.isRequired,\n touchEvent: _propTypes.default.oneOf(['onTouchStart', 'onTouchEnd', false])\n} : {};\nClickAwayListener.defaultProps = {\n mouseEvent: 'onMouseUp',\n touchEvent: 'onTouchEnd'\n};\nvar _default = ClickAwayListener;\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = exports.styles = void 0;\n\nvar _extends2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/extends\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectSpread8 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _classnames = _interopRequireDefault(require(\"classnames\"));\n\nvar _reactEventListener = _interopRequireDefault(require(\"react-event-listener\"));\n\nvar _withStyles = _interopRequireDefault(require(\"../styles/withStyles\"));\n\nvar _transitions = require(\"../styles/transitions\");\n\nvar _ClickAwayListener = _interopRequireDefault(require(\"../ClickAwayListener\"));\n\nvar _helpers = require(\"../utils/helpers\");\n\nvar _Slide = _interopRequireDefault(require(\"../Slide\"));\n\nvar _SnackbarContent = _interopRequireDefault(require(\"../SnackbarContent\"));\n\nvar styles = function styles(theme) {\n var gutter = 24;\n var top = {\n top: 0\n };\n var bottom = {\n bottom: 0\n };\n var right = {\n justifyContent: 'flex-end'\n };\n var left = {\n justifyContent: 'flex-start'\n };\n var topSpace = {\n top: gutter\n };\n var bottomSpace = {\n bottom: gutter\n };\n var rightSpace = {\n right: gutter\n };\n var leftSpace = {\n left: gutter\n };\n var center = {\n left: '50%',\n right: 'auto',\n transform: 'translateX(-50%)'\n };\n return {\n root: {\n zIndex: theme.zIndex.snackbar,\n position: 'fixed',\n display: 'flex',\n left: 0,\n right: 0,\n justifyContent: 'center',\n alignItems: 'center'\n },\n anchorOriginTopCenter: (0, _objectSpread8.default)({}, top, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({}, center))),\n anchorOriginBottomCenter: (0, _objectSpread8.default)({}, bottom, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({}, center))),\n anchorOriginTopRight: (0, _objectSpread8.default)({}, top, right, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({\n left: 'auto'\n }, topSpace, rightSpace))),\n anchorOriginBottomRight: (0, _objectSpread8.default)({}, bottom, right, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({\n left: 'auto'\n }, bottomSpace, rightSpace))),\n anchorOriginTopLeft: (0, _objectSpread8.default)({}, top, left, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({\n right: 'auto'\n }, topSpace, leftSpace))),\n anchorOriginBottomLeft: (0, _objectSpread8.default)({}, bottom, left, (0, _defineProperty2.default)({}, theme.breakpoints.up('md'), (0, _objectSpread8.default)({\n right: 'auto'\n }, bottomSpace, leftSpace)))\n };\n};\n/* istanbul ignore if */\n\n\nexports.styles = styles;\n\nif (process.env.NODE_ENV !== 'production' && !_react.default.createContext) {\n throw new Error('Material-UI: react@16.3.0 or greater is required.');\n}\n\nvar Snackbar =\n/*#__PURE__*/\nfunction (_React$Component) {\n (0, _inherits2.default)(Snackbar, _React$Component);\n\n function Snackbar() {\n var _ref;\n\n var _temp, _this;\n\n (0, _classCallCheck2.default)(this, Snackbar);\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return (0, _possibleConstructorReturn2.default)(_this, (_temp = _this = (0, _possibleConstructorReturn2.default)(this, (_ref = Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).call.apply(_ref, [this].concat(args))), _this.timerAutoHide = null, _this.state = {}, _this.handleMouseEnter = function (event) {\n if (_this.props.onMouseEnter) {\n _this.props.onMouseEnter(event);\n }\n\n _this.handlePause();\n }, _this.handleMouseLeave = function (event) {\n if (_this.props.onMouseLeave) {\n _this.props.onMouseLeave(event);\n }\n\n _this.handleResume();\n }, _this.handleClickAway = function (event) {\n if (_this.props.onClose) {\n _this.props.onClose(event, 'clickaway');\n }\n }, _this.handlePause = function () {\n clearTimeout(_this.timerAutoHide);\n }, _this.handleResume = function () {\n if (_this.props.autoHideDuration != null) {\n if (_this.props.resumeHideDuration != null) {\n _this.setAutoHideTimer(_this.props.resumeHideDuration);\n\n return;\n }\n\n _this.setAutoHideTimer(_this.props.autoHideDuration * 0.5);\n }\n }, _this.handleExited = function () {\n _this.setState({\n exited: true\n });\n }, _temp));\n }\n\n (0, _createClass2.default)(Snackbar, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n if (this.props.open) {\n this.setAutoHideTimer();\n }\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n if (prevProps.open !== this.props.open) {\n if (this.props.open) {\n this.setAutoHideTimer();\n } else {\n clearTimeout(this.timerAutoHide);\n }\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n clearTimeout(this.timerAutoHide);\n }\n }, {\n key: \"setAutoHideTimer\",\n // Timer that controls delay before snackbar auto hides\n value: function setAutoHideTimer(autoHideDuration) {\n var _this2 = this;\n\n var autoHideDurationBefore = autoHideDuration != null ? autoHideDuration : this.props.autoHideDuration;\n\n if (!this.props.onClose || autoHideDurationBefore == null) {\n return;\n }\n\n clearTimeout(this.timerAutoHide);\n this.timerAutoHide = setTimeout(function () {\n var autoHideDurationAfter = autoHideDuration != null ? autoHideDuration : _this2.props.autoHideDuration;\n\n if (!_this2.props.onClose || autoHideDurationAfter == null) {\n return;\n }\n\n _this2.props.onClose(null, 'timeout');\n }, autoHideDurationBefore);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _props = this.props,\n action = _props.action,\n _props$anchorOrigin = _props.anchorOrigin,\n vertical = _props$anchorOrigin.vertical,\n horizontal = _props$anchorOrigin.horizontal,\n autoHideDuration = _props.autoHideDuration,\n children = _props.children,\n classes = _props.classes,\n className = _props.className,\n ContentProps = _props.ContentProps,\n disableWindowBlurListener = _props.disableWindowBlurListener,\n message = _props.message,\n onClose = _props.onClose,\n onEnter = _props.onEnter,\n onEntered = _props.onEntered,\n onEntering = _props.onEntering,\n onExit = _props.onExit,\n onExited = _props.onExited,\n onExiting = _props.onExiting,\n onMouseEnter = _props.onMouseEnter,\n onMouseLeave = _props.onMouseLeave,\n open = _props.open,\n resumeHideDuration = _props.resumeHideDuration,\n TransitionComponent = _props.TransitionComponent,\n transitionDuration = _props.transitionDuration,\n TransitionProps = _props.TransitionProps,\n other = (0, _objectWithoutProperties2.default)(_props, [\"action\", \"anchorOrigin\", \"autoHideDuration\", \"children\", \"classes\", \"className\", \"ContentProps\", \"disableWindowBlurListener\", \"message\", \"onClose\", \"onEnter\", \"onEntered\", \"onEntering\", \"onExit\", \"onExited\", \"onExiting\", \"onMouseEnter\", \"onMouseLeave\", \"open\", \"resumeHideDuration\", \"TransitionComponent\", \"transitionDuration\", \"TransitionProps\"]); // So we only render active snackbars.\n\n if (!open && this.state.exited) {\n return null;\n }\n\n return _react.default.createElement(_ClickAwayListener.default, {\n onClickAway: this.handleClickAway\n }, _react.default.createElement(\"div\", (0, _extends2.default)({\n className: (0, _classnames.default)(classes.root, classes[\"anchorOrigin\".concat((0, _helpers.capitalize)(vertical)).concat((0, _helpers.capitalize)(horizontal))], className),\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave\n }, other), _react.default.createElement(_reactEventListener.default, {\n target: \"window\",\n onFocus: disableWindowBlurListener ? undefined : this.handleResume,\n onBlur: disableWindowBlurListener ? undefined : this.handlePause\n }), _react.default.createElement(TransitionComponent, (0, _extends2.default)({\n appear: true,\n \"in\": open,\n onEnter: onEnter,\n onEntered: onEntered,\n onEntering: onEntering,\n onExit: onExit,\n onExited: (0, _helpers.createChainedFunction)(this.handleExited, onExited),\n onExiting: onExiting,\n timeout: transitionDuration,\n direction: vertical === 'top' ? 'down' : 'up'\n }, TransitionProps), children || _react.default.createElement(_SnackbarContent.default, (0, _extends2.default)({\n message: message,\n action: action\n }, ContentProps)))));\n }\n }], [{\n key: \"getDerivedStateFromProps\",\n value: function getDerivedStateFromProps(nextProps, prevState) {\n if (typeof prevState.exited === 'undefined') {\n return {\n exited: !nextProps.open\n };\n }\n\n if (nextProps.open) {\n return {\n exited: false\n };\n }\n\n return null;\n }\n }]);\n return Snackbar;\n}(_react.default.Component);\n\nSnackbar.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * The action to display.\n */\n action: _propTypes.default.node,\n\n /**\n * The anchor of the `Snackbar`.\n */\n anchorOrigin: _propTypes.default.shape({\n horizontal: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['left', 'center', 'right'])]),\n vertical: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf(['top', 'center', 'bottom'])])\n }),\n\n /**\n * The number of milliseconds to wait before automatically calling the\n * `onClose` function. `onClose` should then set the state of the `open`\n * prop to hide the Snackbar. This behavior is disabled by default with\n * the `null` value.\n */\n autoHideDuration: _propTypes.default.number,\n\n /**\n * If you wish the take control over the children of the component you can use this property.\n * When used, you replace the `SnackbarContent` component with the children.\n */\n children: _propTypes.default.element,\n\n /**\n * Override or extend the styles applied to the component.\n * See [CSS API](#css-api) below for more details.\n */\n classes: _propTypes.default.object.isRequired,\n\n /**\n * @ignore\n */\n className: _propTypes.default.string,\n\n /**\n * Properties applied to the `SnackbarContent` element.\n */\n ContentProps: _propTypes.default.object,\n\n /**\n * If `true`, the `autoHideDuration` timer will expire even if the window is not focused.\n */\n disableWindowBlurListener: _propTypes.default.bool,\n\n /**\n * When displaying multiple consecutive Snackbars from a parent rendering a single\n * , add the key property to ensure independent treatment of each message.\n * e.g. , otherwise, the message may update-in-place and\n * features such as autoHideDuration may be canceled.\n */\n key: _propTypes.default.any,\n\n /**\n * The message to display.\n */\n message: _propTypes.default.node,\n\n /**\n * Callback fired when the component requests to be closed.\n * Typically `onClose` is used to set state in the parent component,\n * which is used to control the `Snackbar` `open` prop.\n * The `reason` parameter can optionally be used to control the response to `onClose`,\n * for example ignoring `clickaway`.\n *\n * @param {object} event The event source of the callback\n * @param {string} reason Can be:`\"timeout\"` (`autoHideDuration` expired) or: `\"clickaway\"`\n */\n onClose: _propTypes.default.func,\n\n /**\n * Callback fired before the transition is entering.\n */\n onEnter: _propTypes.default.func,\n\n /**\n * Callback fired when the transition has entered.\n */\n onEntered: _propTypes.default.func,\n\n /**\n * Callback fired when the transition is entering.\n */\n onEntering: _propTypes.default.func,\n\n /**\n * Callback fired before the transition is exiting.\n */\n onExit: _propTypes.default.func,\n\n /**\n * Callback fired when the transition has exited.\n */\n onExited: _propTypes.default.func,\n\n /**\n * Callback fired when the transition is exiting.\n */\n onExiting: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onMouseEnter: _propTypes.default.func,\n\n /**\n * @ignore\n */\n onMouseLeave: _propTypes.default.func,\n\n /**\n * If true, `Snackbar` is open.\n */\n open: _propTypes.default.bool,\n\n /**\n * The number of milliseconds to wait before dismissing after user interaction.\n * If `autoHideDuration` property isn't specified, it does nothing.\n * If `autoHideDuration` property is specified but `resumeHideDuration` isn't,\n * we default to `autoHideDuration / 2` ms.\n */\n resumeHideDuration: _propTypes.default.number,\n\n /**\n * Transition component.\n */\n TransitionComponent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),\n\n /**\n * The duration for the transition, in milliseconds.\n * You may specify a single timeout for all transitions, or individually with an object.\n */\n transitionDuration: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({\n enter: _propTypes.default.number,\n exit: _propTypes.default.number\n })]),\n\n /**\n * Properties applied to the `Transition` element.\n */\n TransitionProps: _propTypes.default.object\n} : {};\nSnackbar.defaultProps = {\n anchorOrigin: {\n vertical: 'bottom',\n horizontal: 'center'\n },\n disableWindowBlurListener: false,\n TransitionComponent: _Slide.default,\n transitionDuration: {\n enter: _transitions.duration.enteringScreen,\n exit: _transitions.duration.leavingScreen\n }\n};\n\nvar _default = (0, _withStyles.default)(styles, {\n flip: false,\n name: 'MuiSnackbar'\n})(Snackbar);\n\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _typeof2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/typeof\"));\n\nvar _warning = _interopRequireDefault(require(\"warning\"));\n\nvar _deepmerge = _interopRequireDefault(require(\"deepmerge\"));\n\n// < 1kb payload overhead when lodash/merge is > 3kb.\n// Support for the jss-expand plugin.\nfunction arrayMerge(destination, source) {\n return source;\n}\n\nfunction getStylesCreator(stylesOrCreator) {\n var themingEnabled = typeof stylesOrCreator === 'function';\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)((0, _typeof2.default)(stylesOrCreator) === 'object' || themingEnabled, ['Material-UI: the first argument provided to withStyles() is invalid.', 'You need to provide a function generating the styles or a styles object.'].join('\\n')) : void 0;\n\n function create(theme, name) {\n var styles = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;\n\n if (!name || !theme.overrides || !theme.overrides[name]) {\n return styles;\n }\n\n var overrides = theme.overrides[name];\n var stylesWithOverrides = (0, _objectSpread2.default)({}, styles);\n Object.keys(overrides).forEach(function (key) {\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(stylesWithOverrides[key], ['Material-UI: you are trying to override a style that does not exist.', \"Fix the `\".concat(key, \"` key of `theme.overrides.\").concat(name, \"`.\")].join('\\n')) : void 0;\n stylesWithOverrides[key] = (0, _deepmerge.default)(stylesWithOverrides[key], overrides[key], {\n arrayMerge: arrayMerge\n });\n });\n return stylesWithOverrides;\n }\n\n return {\n create: create,\n options: {},\n themingEnabled: themingEnabled\n };\n}\n\nvar _default = getStylesCreator;\nexports.default = _default;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _propTypes = require('prop-types');\n\nexports['default'] = {\n jss: (0, _propTypes.shape)({\n options: (0, _propTypes.shape)({\n createGenerateClassName: _propTypes.func.isRequired\n }).isRequired,\n createStyleSheet: _propTypes.func.isRequired,\n removeStyleSheet: _propTypes.func.isRequired\n }),\n registry: (0, _propTypes.shape)({\n add: _propTypes.func.isRequired,\n toString: _propTypes.func.isRequired\n })\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _ns$jss$ns$sheetOptio;\n\nvar _propTypes = require('prop-types');\n\nvar _ns = require('./ns');\n\nvar ns = _interopRequireWildcard(_ns);\n\nvar _propTypes2 = require('./propTypes');\n\nvar _propTypes3 = _interopRequireDefault(_propTypes2);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nexports['default'] = (_ns$jss$ns$sheetOptio = {}, _defineProperty(_ns$jss$ns$sheetOptio, ns.jss, _propTypes3['default'].jss), _defineProperty(_ns$jss$ns$sheetOptio, ns.sheetOptions, _propTypes.object), _defineProperty(_ns$jss$ns$sheetOptio, ns.sheetsRegistry, _propTypes3['default'].registry), _defineProperty(_ns$jss$ns$sheetOptio, ns.managers, _propTypes.object), _ns$jss$ns$sheetOptio);","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = createStyles;\n\nfunction createStyles(s) {\n return s;\n}","function createBroadcast (initialState) {\n var listeners = {};\n var id = 1;\n var _state = initialState;\n\n function getState () {\n return _state\n }\n\n function setState (state) {\n _state = state;\n var keys = Object.keys(listeners);\n var i = 0;\n var len = keys.length;\n for (; i < len; i++) {\n // if a listener gets unsubscribed during setState we just skip it\n if (listeners[keys[i]]) { listeners[keys[i]](state); }\n }\n }\n\n // subscribe to changes and return the subscriptionId\n function subscribe (listener) {\n if (typeof listener !== 'function') {\n throw new Error('listener must be a function.')\n }\n var currentId = id;\n listeners[currentId] = listener;\n id += 1;\n return currentId\n }\n\n // remove subscription by removing the listener function\n function unsubscribe (id) {\n listeners[id] = undefined;\n }\n\n return { getState: getState, setState: setState, subscribe: subscribe, unsubscribe: unsubscribe }\n}\n\nexport default createBroadcast;\n","function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","\"use strict\";\n\nvar _interopRequireWildcard = require(\"@babel/runtime/helpers/builtin/interopRequireWildcard\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _classCallCheck2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/classCallCheck\"));\n\nvar _createClass2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/createClass\"));\n\nvar _possibleConstructorReturn2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/possibleConstructorReturn\"));\n\nvar _inherits2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/inherits\"));\n\nvar _react = _interopRequireDefault(require(\"react\"));\n\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\n\nvar _warning = _interopRequireDefault(require(\"warning\"));\n\nvar _brcast = _interopRequireDefault(require(\"brcast\"));\n\nvar _themeListener = _interopRequireWildcard(require(\"./themeListener\"));\n\nvar _exactProp = _interopRequireDefault(require(\"../utils/exactProp\"));\n\n/**\n * This component takes a `theme` property.\n * It makes the `theme` available down the React tree thanks to React context.\n * This component should preferably be used at **the root of your component tree**.\n */\nvar MuiThemeProvider =\n/*#__PURE__*/\nfunction (_React$Component) {\n (0, _inherits2.default)(MuiThemeProvider, _React$Component);\n\n // We are not using the React state in order to avoid unnecessary rerender.\n function MuiThemeProvider(props, context) {\n var _this;\n\n (0, _classCallCheck2.default)(this, MuiThemeProvider);\n _this = (0, _possibleConstructorReturn2.default)(this, (MuiThemeProvider.__proto__ || Object.getPrototypeOf(MuiThemeProvider)).call(this, props, context)); // Get the outer theme from the context, can be null\n\n _this.broadcast = (0, _brcast.default)();\n _this.unsubscribeId = null;\n _this.outerTheme = null;\n _this.outerTheme = _themeListener.default.initial(context); // Propagate the theme so it can be accessed by the children\n\n _this.broadcast.setState(_this.mergeOuterLocalTheme(_this.props.theme));\n\n return _this;\n }\n\n (0, _createClass2.default)(MuiThemeProvider, [{\n key: \"getChildContext\",\n value: function getChildContext() {\n var _ref;\n\n var _props = this.props,\n sheetsManager = _props.sheetsManager,\n disableStylesGeneration = _props.disableStylesGeneration;\n var muiThemeProviderOptions = this.context.muiThemeProviderOptions || {};\n\n if (sheetsManager !== undefined) {\n muiThemeProviderOptions.sheetsManager = sheetsManager;\n }\n\n if (disableStylesGeneration !== undefined) {\n muiThemeProviderOptions.disableStylesGeneration = disableStylesGeneration;\n }\n\n return _ref = {}, (0, _defineProperty2.default)(_ref, _themeListener.CHANNEL, this.broadcast), (0, _defineProperty2.default)(_ref, \"muiThemeProviderOptions\", muiThemeProviderOptions), _ref;\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n // Subscribe on the outer theme, if present\n this.unsubscribeId = _themeListener.default.subscribe(this.context, function (outerTheme) {\n _this2.outerTheme = outerTheme; // Forward the parent theme update to the children\n\n _this2.broadcast.setState(_this2.mergeOuterLocalTheme(_this2.props.theme));\n });\n }\n }, {\n key: \"componentDidUpdate\",\n value: function componentDidUpdate(prevProps) {\n // Propagate a local theme update\n if (this.props.theme !== prevProps.theme) {\n this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));\n }\n }\n }, {\n key: \"componentWillUnmount\",\n value: function componentWillUnmount() {\n if (this.unsubscribeId !== null) {\n _themeListener.default.unsubscribe(this.context, this.unsubscribeId);\n }\n } // Simple merge between the outer theme and the local theme\n\n }, {\n key: \"mergeOuterLocalTheme\",\n value: function mergeOuterLocalTheme(localTheme) {\n // To support composition of theme.\n if (typeof localTheme === 'function') {\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(this.outerTheme, ['Material-UI: you are providing a theme function property ' + 'to the MuiThemeProvider component:', ' outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\\n')) : void 0;\n return localTheme(this.outerTheme);\n }\n\n if (!this.outerTheme) {\n return localTheme;\n }\n\n return (0, _objectSpread2.default)({}, this.outerTheme, localTheme);\n }\n }, {\n key: \"render\",\n value: function render() {\n // TODO move the sheetsManager property to a different component.\n // warning(\n // typeof window !== 'undefined' || this.props.sheetsManager,\n // [\n // 'Material-UI: you need to provide a sheetsManager to the MuiThemeProvider ' +\n // 'when rendering on the server.',\n // 'If you do not, you might experience a memory leak',\n // ].join('\\n'),\n // );\n return this.props.children;\n }\n }]);\n return MuiThemeProvider;\n}(_react.default.Component);\n\nMuiThemeProvider.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * You can wrap a node.\n */\n children: _propTypes.default.node.isRequired,\n\n /**\n * You can disable the generation of the styles with this option.\n * It can be useful when traversing the React tree outside of the HTML\n * rendering step on the server.\n * Let's say you are using react-apollo to extract all\n * the queries made by the interface server side.\n * You can significantly speed up the traversal with this property.\n */\n disableStylesGeneration: _propTypes.default.bool,\n\n /**\n * The sheetsManager is used to deduplicate style sheet injection in the page.\n * It's deduplicating using the (theme, styles) couple.\n * On the server, you should provide a new instance for each request.\n */\n sheetsManager: _propTypes.default.object,\n\n /**\n * A theme object.\n */\n theme: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]).isRequired\n} : {};\nMuiThemeProvider.propTypes = process.env.NODE_ENV !== \"production\" ? (0, _exactProp.default)(MuiThemeProvider.propTypes) : {};\nMuiThemeProvider.childContextTypes = (0, _objectSpread2.default)({}, _themeListener.default.contextTypes, {\n muiThemeProviderOptions: _propTypes.default.object\n});\nMuiThemeProvider.contextTypes = (0, _objectSpread2.default)({}, _themeListener.default.contextTypes, {\n muiThemeProviderOptions: _propTypes.default.object\n});\nvar _default = MuiThemeProvider;\nexports.default = _default;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = jssPropsSort;\n/**\n * Sort props by length.\n */\nfunction jssPropsSort() {\n function sort(prop0, prop1) {\n return prop0.length - prop1.length;\n }\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n\n var newStyle = {};\n var props = Object.keys(style).sort(sort);\n for (var prop in props) {\n newStyle[props[prop]] = style[props[prop]];\n }\n return newStyle;\n }\n\n return { onProcessStyle: onProcessStyle };\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = supportedValue;\n\nvar _isInBrowser = require('is-in-browser');\n\nvar _isInBrowser2 = _interopRequireDefault(_isInBrowser);\n\nvar _prefix = require('./prefix');\n\nvar _prefix2 = _interopRequireDefault(_prefix);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar cache = {};\nvar el = void 0;\n\nif (_isInBrowser2['default']) el = document.createElement('p');\n\n/**\n * Returns prefixed value if needed. Returns `false` if value is not supported.\n *\n * @param {String} property\n * @param {String} value\n * @return {String|Boolean}\n * @api public\n */\nfunction supportedValue(property, value) {\n // For server-side rendering.\n if (!el) return value;\n\n // It is a string or a number as a string like '1'.\n // We want only prefixable values here.\n if (typeof value !== 'string' || !isNaN(parseInt(value, 10))) return value;\n\n var cacheKey = property + value;\n\n if (cache[cacheKey] != null) return cache[cacheKey];\n\n // IE can even throw an error in some cases, for e.g. style.content = 'bar'\n try {\n // Test value as it is.\n el.style[property] = value;\n } catch (err) {\n cache[cacheKey] = false;\n return false;\n }\n\n // Value is supported as it is.\n if (el.style[property] !== '') {\n cache[cacheKey] = value;\n } else {\n // Test value with vendor prefix.\n value = _prefix2['default'].css + value;\n\n // Hardcode test to convert \"flex\" to \"-ms-flexbox\" for IE10.\n if (value === '-ms-flex') value = '-ms-flexbox';\n\n el.style[property] = value;\n\n // Value is supported with vendor prefix.\n if (el.style[property] !== '') cache[cacheKey] = value;\n }\n\n if (!cache[cacheKey]) cache[cacheKey] = false;\n\n // Reset style value.\n el.style[property] = '';\n\n return cache[cacheKey];\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = camelize;\nvar regExp = /[-\\s]+(.)?/g;\n\n/**\n * Convert dash separated strings to camel cased.\n *\n * @param {String} str\n * @return {String}\n */\nfunction camelize(str) {\n return str.replace(regExp, toUpper);\n}\n\nfunction toUpper(match, c) {\n return c ? c.toUpperCase() : '';\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = supportedProperty;\n\nvar _isInBrowser = require('is-in-browser');\n\nvar _isInBrowser2 = _interopRequireDefault(_isInBrowser);\n\nvar _prefix = require('./prefix');\n\nvar _prefix2 = _interopRequireDefault(_prefix);\n\nvar _camelize = require('./camelize');\n\nvar _camelize2 = _interopRequireDefault(_camelize);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar el = void 0;\nvar cache = {};\n\nif (_isInBrowser2['default']) {\n el = document.createElement('p');\n\n /**\n * We test every property on vendor prefix requirement.\n * Once tested, result is cached. It gives us up to 70% perf boost.\n * http://jsperf.com/element-style-object-access-vs-plain-object\n *\n * Prefill cache with known css properties to reduce amount of\n * properties we need to feature test at runtime.\n * http://davidwalsh.name/vendor-prefix\n */\n var computed = window.getComputedStyle(document.documentElement, '');\n for (var key in computed) {\n if (!isNaN(key)) cache[computed[key]] = computed[key];\n }\n}\n\n/**\n * Test if a property is supported, returns supported property with vendor\n * prefix if required. Returns `false` if not supported.\n *\n * @param {String} prop dash separated\n * @return {String|Boolean}\n * @api public\n */\nfunction supportedProperty(prop) {\n // For server-side rendering.\n if (!el) return prop;\n\n // We have not tested this prop yet, lets do the test.\n if (cache[prop] != null) return cache[prop];\n\n // Camelization is required because we can't test using\n // css syntax for e.g. in FF.\n // Test if property is supported as it is.\n if ((0, _camelize2['default'])(prop) in el.style) {\n cache[prop] = prop;\n }\n // Test if property is supported with vendor prefix.\n else if (_prefix2['default'].js + (0, _camelize2['default'])('-' + prop) in el.style) {\n cache[prop] = _prefix2['default'].css + prop;\n } else {\n cache[prop] = false;\n }\n\n return cache[prop];\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.supportedValue = exports.supportedProperty = exports.prefix = undefined;\n\nvar _prefix = require('./prefix');\n\nvar _prefix2 = _interopRequireDefault(_prefix);\n\nvar _supportedProperty = require('./supported-property');\n\nvar _supportedProperty2 = _interopRequireDefault(_supportedProperty);\n\nvar _supportedValue = require('./supported-value');\n\nvar _supportedValue2 = _interopRequireDefault(_supportedValue);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nexports['default'] = {\n prefix: _prefix2['default'],\n supportedProperty: _supportedProperty2['default'],\n supportedValue: _supportedValue2['default']\n}; /**\n * CSS Vendor prefix detection and property feature testing.\n *\n * @copyright Oleg Slobodskoi 2015\n * @website https://github.com/jsstyles/css-vendor\n * @license MIT\n */\n\nexports.prefix = _prefix2['default'];\nexports.supportedProperty = _supportedProperty2['default'];\nexports.supportedValue = _supportedValue2['default'];","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = jssVendorPrefixer;\n\nvar _cssVendor = require('css-vendor');\n\nvar vendor = _interopRequireWildcard(_cssVendor);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }\n\n/**\n * Add vendor prefix to a property name when needed.\n *\n * @param {Rule} rule\n * @api public\n */\nfunction jssVendorPrefixer() {\n function onProcessRule(rule) {\n if (rule.type === 'keyframes') {\n rule.key = '@' + vendor.prefix.css + rule.key.substr(1);\n }\n }\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n\n for (var prop in style) {\n var value = style[prop];\n\n var changeProp = false;\n var supportedProp = vendor.supportedProperty(prop);\n if (supportedProp && supportedProp !== prop) changeProp = true;\n\n var changeValue = false;\n var supportedValue = vendor.supportedValue(supportedProp, value);\n if (supportedValue && supportedValue !== value) changeValue = true;\n\n if (changeProp || changeValue) {\n if (changeProp) delete style[prop];\n style[supportedProp || prop] = supportedValue || value;\n }\n }\n\n return style;\n }\n\n function onChangeValue(value, prop) {\n return vendor.supportedValue(prop, value);\n }\n\n return { onProcessRule: onProcessRule, onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/**\n * Generated jss-default-unit CSS property units\n *\n * @type object\n */\nexports['default'] = {\n 'animation-delay': 'ms',\n 'animation-duration': 'ms',\n 'background-position': 'px',\n 'background-position-x': 'px',\n 'background-position-y': 'px',\n 'background-size': 'px',\n border: 'px',\n 'border-bottom': 'px',\n 'border-bottom-left-radius': 'px',\n 'border-bottom-right-radius': 'px',\n 'border-bottom-width': 'px',\n 'border-left': 'px',\n 'border-left-width': 'px',\n 'border-radius': 'px',\n 'border-right': 'px',\n 'border-right-width': 'px',\n 'border-spacing': 'px',\n 'border-top': 'px',\n 'border-top-left-radius': 'px',\n 'border-top-right-radius': 'px',\n 'border-top-width': 'px',\n 'border-width': 'px',\n 'border-after-width': 'px',\n 'border-before-width': 'px',\n 'border-end-width': 'px',\n 'border-horizontal-spacing': 'px',\n 'border-start-width': 'px',\n 'border-vertical-spacing': 'px',\n bottom: 'px',\n 'box-shadow': 'px',\n 'column-gap': 'px',\n 'column-rule': 'px',\n 'column-rule-width': 'px',\n 'column-width': 'px',\n 'flex-basis': 'px',\n 'font-size': 'px',\n 'font-size-delta': 'px',\n height: 'px',\n left: 'px',\n 'letter-spacing': 'px',\n 'logical-height': 'px',\n 'logical-width': 'px',\n margin: 'px',\n 'margin-after': 'px',\n 'margin-before': 'px',\n 'margin-bottom': 'px',\n 'margin-left': 'px',\n 'margin-right': 'px',\n 'margin-top': 'px',\n 'max-height': 'px',\n 'max-width': 'px',\n 'margin-end': 'px',\n 'margin-start': 'px',\n 'mask-position-x': 'px',\n 'mask-position-y': 'px',\n 'mask-size': 'px',\n 'max-logical-height': 'px',\n 'max-logical-width': 'px',\n 'min-height': 'px',\n 'min-width': 'px',\n 'min-logical-height': 'px',\n 'min-logical-width': 'px',\n motion: 'px',\n 'motion-offset': 'px',\n outline: 'px',\n 'outline-offset': 'px',\n 'outline-width': 'px',\n padding: 'px',\n 'padding-bottom': 'px',\n 'padding-left': 'px',\n 'padding-right': 'px',\n 'padding-top': 'px',\n 'padding-after': 'px',\n 'padding-before': 'px',\n 'padding-end': 'px',\n 'padding-start': 'px',\n 'perspective-origin-x': '%',\n 'perspective-origin-y': '%',\n perspective: 'px',\n right: 'px',\n 'shape-margin': 'px',\n size: 'px',\n 'text-indent': 'px',\n 'text-stroke': 'px',\n 'text-stroke-width': 'px',\n top: 'px',\n 'transform-origin': '%',\n 'transform-origin-x': '%',\n 'transform-origin-y': '%',\n 'transform-origin-z': '%',\n 'transition-delay': 'ms',\n 'transition-duration': 'ms',\n 'vertical-align': 'px',\n width: 'px',\n 'word-spacing': 'px',\n // Not existing properties.\n // Used to avoid issues with jss-expand intergration.\n 'box-shadow-x': 'px',\n 'box-shadow-y': 'px',\n 'box-shadow-blur': 'px',\n 'box-shadow-spread': 'px',\n 'font-line-height': 'px',\n 'text-shadow-x': 'px',\n 'text-shadow-y': 'px',\n 'text-shadow-blur': 'px'\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nexports['default'] = defaultUnit;\n\nvar _defaultUnits = require('./defaultUnits');\n\nvar _defaultUnits2 = _interopRequireDefault(_defaultUnits);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\n/**\n * Clones the object and adds a camel cased property version.\n */\nfunction addCamelCasedVersion(obj) {\n var regExp = /(-[a-z])/g;\n var replace = function replace(str) {\n return str[1].toUpperCase();\n };\n var newObj = {};\n for (var key in obj) {\n newObj[key] = obj[key];\n newObj[key.replace(regExp, replace)] = obj[key];\n }\n return newObj;\n}\n\nvar units = addCamelCasedVersion(_defaultUnits2['default']);\n\n/**\n * Recursive deep style passing function\n *\n * @param {String} current property\n * @param {(Object|Array|Number|String)} property value\n * @param {Object} options\n * @return {(Object|Array|Number|String)} resulting value\n */\nfunction iterate(prop, value, options) {\n if (!value) return value;\n\n var convertedValue = value;\n\n var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);\n if (type === 'object' && Array.isArray(value)) type = 'array';\n\n switch (type) {\n case 'object':\n if (prop === 'fallbacks') {\n for (var innerProp in value) {\n value[innerProp] = iterate(innerProp, value[innerProp], options);\n }\n break;\n }\n for (var _innerProp in value) {\n value[_innerProp] = iterate(prop + '-' + _innerProp, value[_innerProp], options);\n }\n break;\n case 'array':\n for (var i = 0; i < value.length; i++) {\n value[i] = iterate(prop, value[i], options);\n }\n break;\n case 'number':\n if (value !== 0) {\n convertedValue = value + (options[prop] || units[prop] || '');\n }\n break;\n default:\n break;\n }\n\n return convertedValue;\n}\n\n/**\n * Add unit to numeric values.\n */\nfunction defaultUnit() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n var camelCasedOptions = addCamelCasedVersion(options);\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n\n for (var prop in style) {\n style[prop] = iterate(prop, style[prop], camelCasedOptions);\n }\n\n return style;\n }\n\n function onChangeValue(value, prop) {\n return iterate(prop, value, camelCasedOptions);\n }\n\n return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };\n}","'use strict';\n\nvar uppercasePattern = /[A-Z]/g;\nvar msPattern = /^ms-/;\nvar cache = {};\n\nfunction hyphenateStyleName(string) {\n return string in cache\n ? cache[string]\n : cache[string] = string\n .replace(uppercasePattern, '-$&')\n .toLowerCase()\n .replace(msPattern, '-ms-');\n}\n\nmodule.exports = hyphenateStyleName;\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports['default'] = camelCase;\n\nvar _hyphenateStyleName = require('hyphenate-style-name');\n\nvar _hyphenateStyleName2 = _interopRequireDefault(_hyphenateStyleName);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\n/**\n * Convert camel cased property names to dash separated.\n *\n * @param {Object} style\n * @return {Object}\n */\nfunction convertCase(style) {\n var converted = {};\n\n for (var prop in style) {\n converted[(0, _hyphenateStyleName2['default'])(prop)] = style[prop];\n }\n\n if (style.fallbacks) {\n if (Array.isArray(style.fallbacks)) converted.fallbacks = style.fallbacks.map(convertCase);else converted.fallbacks = convertCase(style.fallbacks);\n }\n\n return converted;\n}\n\n/**\n * Allow camel cased property names by converting them back to dasherized.\n *\n * @param {Rule} rule\n */\nfunction camelCase() {\n function onProcessStyle(style) {\n if (Array.isArray(style)) {\n // Handle rules like @font-face, which can have multiple styles in an array\n for (var index = 0; index < style.length; index++) {\n style[index] = convertCase(style[index]);\n }\n return style;\n }\n\n return convertCase(style);\n }\n\n function onChangeValue(value, prop, rule) {\n var hyphenatedProp = (0, _hyphenateStyleName2['default'])(prop);\n\n // There was no camel case in place\n if (prop === hyphenatedProp) return value;\n\n rule.prop(hyphenatedProp, value);\n\n // Core will ignore that property value we set the proper one above.\n return null;\n }\n\n return { onProcessStyle: onProcessStyle, onChangeValue: onChangeValue };\n}","/**\n * Copyright 2014-2015, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n\n'use strict';\n\n/**\n * Similar to invariant but only logs a warning if the condition is not met.\n * This can be used to log issues in development environments in critical\n * paths. Removing the logging code for production environments will keep the\n * same logic and follow the same code paths.\n */\n\nvar warning = function() {};\n\nif (process.env.NODE_ENV !== 'production') {\n warning = function(condition, format, args) {\n var len = arguments.length;\n args = new Array(len > 2 ? len - 2 : 0);\n for (var key = 2; key < len; key++) {\n args[key - 2] = arguments[key];\n }\n if (format === undefined) {\n throw new Error(\n '`warning(condition, format, ...args)` requires a warning ' +\n 'message argument'\n );\n }\n\n if (format.length < 10 || (/^[s\\W]*$/).test(format)) {\n throw new Error(\n 'The warning format should be able to uniquely identify this ' +\n 'warning. Please, use a more descriptive format than: ' + format\n );\n }\n\n if (!condition) {\n var argIndex = 0;\n var message = 'Warning: ' +\n format.replace(/%s/g, function() {\n return args[argIndex++];\n });\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch(x) {}\n }\n };\n}\n\nmodule.exports = warning;\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\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\nexports.default = jssNested;\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar separatorRegExp = /\\s*,\\s*/g;\nvar parentRegExp = /&/g;\nvar refRegExp = /\\$([\\w-]+)/g;\n\n/**\n * Convert nested rules to separate, remove them from original styles.\n *\n * @param {Rule} rule\n * @api public\n */\nfunction jssNested() {\n // Get a function to be used for $ref replacement.\n function getReplaceRef(container) {\n return function (match, key) {\n var rule = container.getRule(key);\n if (rule) return rule.selector;\n (0, _warning2.default)(false, '[JSS] Could not find the referenced rule %s in %s.', key, container.options.meta || container);\n return key;\n };\n }\n\n var hasAnd = function hasAnd(str) {\n return str.indexOf('&') !== -1;\n };\n\n function replaceParentRefs(nestedProp, parentProp) {\n var parentSelectors = parentProp.split(separatorRegExp);\n var nestedSelectors = nestedProp.split(separatorRegExp);\n\n var result = '';\n\n for (var i = 0; i < parentSelectors.length; i++) {\n var parent = parentSelectors[i];\n\n for (var j = 0; j < nestedSelectors.length; j++) {\n var nested = nestedSelectors[j];\n if (result) result += ', ';\n // Replace all & by the parent or prefix & with the parent.\n result += hasAnd(nested) ? nested.replace(parentRegExp, parent) : parent + ' ' + nested;\n }\n }\n\n return result;\n }\n\n function getOptions(rule, container, options) {\n // Options has been already created, now we only increase index.\n if (options) return _extends({}, options, { index: options.index + 1 });\n\n var nestingLevel = rule.options.nestingLevel;\n\n nestingLevel = nestingLevel === undefined ? 1 : nestingLevel + 1;\n\n return _extends({}, rule.options, {\n nestingLevel: nestingLevel,\n index: container.indexOf(rule) + 1\n });\n }\n\n function onProcessStyle(style, rule) {\n if (rule.type !== 'style') return style;\n var container = rule.options.parent;\n var options = void 0;\n var replaceRef = void 0;\n for (var prop in style) {\n var isNested = hasAnd(prop);\n var isNestedConditional = prop[0] === '@';\n\n if (!isNested && !isNestedConditional) continue;\n\n options = getOptions(rule, container, options);\n\n if (isNested) {\n var selector = replaceParentRefs(prop, rule.selector\n // Lazily create the ref replacer function just once for\n // all nested rules within the sheet.\n );if (!replaceRef) replaceRef = getReplaceRef(container\n // Replace all $refs.\n );selector = selector.replace(refRegExp, replaceRef);\n\n container.addRule(selector, style[prop], _extends({}, options, { selector: selector }));\n } else if (isNestedConditional) {\n container\n // Place conditional right after the parent rule to ensure right ordering.\n .addRule(prop, null, options).addRule(rule.key, style[prop], { selector: rule.selector });\n }\n\n delete style[prop];\n }\n\n return style;\n }\n\n return { onProcessStyle: onProcessStyle };\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n/* eslint-disable class-methods-use-this */\n\n/**\n * Rendering backend to do nothing in nodejs.\n */\nvar VirtualRenderer = function () {\n function VirtualRenderer() {\n _classCallCheck(this, VirtualRenderer);\n }\n\n _createClass(VirtualRenderer, [{\n key: 'setProperty',\n value: function setProperty() {\n return true;\n }\n }, {\n key: 'getPropertyValue',\n value: function getPropertyValue() {\n return '';\n }\n }, {\n key: 'removeProperty',\n value: function removeProperty() {}\n }, {\n key: 'setSelector',\n value: function setSelector() {\n return true;\n }\n }, {\n key: 'getKey',\n value: function getKey() {\n return '';\n }\n }, {\n key: 'attach',\n value: function attach() {}\n }, {\n key: 'detach',\n value: function detach() {}\n }, {\n key: 'deploy',\n value: function deploy() {}\n }, {\n key: 'insertRule',\n value: function insertRule() {\n return false;\n }\n }, {\n key: 'deleteRule',\n value: function deleteRule() {\n return true;\n }\n }, {\n key: 'replaceRule',\n value: function replaceRule() {\n return false;\n }\n }, {\n key: 'getRules',\n value: function getRules() {}\n }, {\n key: 'indexOf',\n value: function indexOf() {\n return -1;\n }\n }]);\n\n return VirtualRenderer;\n}();\n\nexports['default'] = VirtualRenderer;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nvar _sheets = require('../sheets');\n\nvar _sheets2 = _interopRequireDefault(_sheets);\n\nvar _StyleRule = require('../rules/StyleRule');\n\nvar _StyleRule2 = _interopRequireDefault(_StyleRule);\n\nvar _toCssValue = require('../utils/toCssValue');\n\nvar _toCssValue2 = _interopRequireDefault(_toCssValue);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n/**\n * Cache the value from the first time a function is called.\n */\nvar memoize = function memoize(fn) {\n var value = void 0;\n return function () {\n if (!value) value = fn();\n return value;\n };\n};\n\n/**\n * Get a style property value.\n */\nfunction getPropertyValue(cssRule, prop) {\n try {\n return cssRule.style.getPropertyValue(prop);\n } catch (err) {\n // IE may throw if property is unknown.\n return '';\n }\n}\n\n/**\n * Set a style property.\n */\nfunction setProperty(cssRule, prop, value) {\n try {\n var cssValue = value;\n\n if (Array.isArray(value)) {\n cssValue = (0, _toCssValue2['default'])(value, true);\n\n if (value[value.length - 1] === '!important') {\n cssRule.style.setProperty(prop, cssValue, 'important');\n return true;\n }\n }\n\n cssRule.style.setProperty(prop, cssValue);\n } catch (err) {\n // IE may throw if property is unknown.\n return false;\n }\n return true;\n}\n\n/**\n * Remove a style property.\n */\nfunction removeProperty(cssRule, prop) {\n try {\n cssRule.style.removeProperty(prop);\n } catch (err) {\n (0, _warning2['default'])(false, '[JSS] DOMException \"%s\" was thrown. Tried to remove property \"%s\".', err.message, prop);\n }\n}\n\nvar CSSRuleTypes = {\n STYLE_RULE: 1,\n KEYFRAMES_RULE: 7\n\n /**\n * Get the CSS Rule key.\n */\n\n};var getKey = function () {\n var extractKey = function extractKey(cssText) {\n var from = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return cssText.substr(from, cssText.indexOf('{') - 1);\n };\n\n return function (cssRule) {\n if (cssRule.type === CSSRuleTypes.STYLE_RULE) return cssRule.selectorText;\n if (cssRule.type === CSSRuleTypes.KEYFRAMES_RULE) {\n var name = cssRule.name;\n\n if (name) return '@keyframes ' + name;\n\n // There is no rule.name in the following browsers:\n // - IE 9\n // - Safari 7.1.8\n // - Mobile Safari 9.0.0\n var cssText = cssRule.cssText;\n\n return '@' + extractKey(cssText, cssText.indexOf('keyframes'));\n }\n\n // Conditionals.\n return extractKey(cssRule.cssText);\n };\n}();\n\n/**\n * Set the selector.\n */\nfunction setSelector(cssRule, selectorText) {\n cssRule.selectorText = selectorText;\n\n // Return false if setter was not successful.\n // Currently works in chrome only.\n return cssRule.selectorText === selectorText;\n}\n\n/**\n * Gets the `head` element upon the first call and caches it.\n */\nvar getHead = memoize(function () {\n return document.head || document.getElementsByTagName('head')[0];\n});\n\n/**\n * Gets a map of rule keys, where the property is an unescaped key and value\n * is a potentially escaped one.\n * It is used to identify CSS rules and the corresponding JSS rules. As an identifier\n * for CSSStyleRule we normally use `selectorText`. Though if original selector text\n * contains escaped code points e.g. `:not(#\\\\20)`, CSSOM will compile it to `:not(# )`\n * and so CSS rule's `selectorText` won't match JSS rule selector.\n *\n * https://www.w3.org/International/questions/qa-escapes#cssescapes\n */\nvar getUnescapedKeysMap = function () {\n var style = void 0;\n var isAttached = false;\n\n return function (rules) {\n var map = {};\n // https://github.com/facebook/flow/issues/2696\n if (!style) style = document.createElement('style');\n for (var i = 0; i < rules.length; i++) {\n var rule = rules[i];\n if (!(rule instanceof _StyleRule2['default'])) continue;\n var selector = rule.selector;\n // Only unescape selector over CSSOM if it contains a back slash.\n\n if (selector && selector.indexOf('\\\\') !== -1) {\n // Lazilly attach when needed.\n if (!isAttached) {\n getHead().appendChild(style);\n isAttached = true;\n }\n style.textContent = selector + ' {}';\n var _style = style,\n sheet = _style.sheet;\n\n if (sheet) {\n var cssRules = sheet.cssRules;\n\n if (cssRules) map[cssRules[0].selectorText] = rule.key;\n }\n }\n }\n if (isAttached) {\n getHead().removeChild(style);\n isAttached = false;\n }\n return map;\n };\n}();\n\n/**\n * Find attached sheet with an index higher than the passed one.\n */\nfunction findHigherSheet(registry, options) {\n for (var i = 0; i < registry.length; i++) {\n var sheet = registry[i];\n if (sheet.attached && sheet.options.index > options.index && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n return null;\n}\n\n/**\n * Find attached sheet with the highest index.\n */\nfunction findHighestSheet(registry, options) {\n for (var i = registry.length - 1; i >= 0; i--) {\n var sheet = registry[i];\n if (sheet.attached && sheet.options.insertionPoint === options.insertionPoint) {\n return sheet;\n }\n }\n return null;\n}\n\n/**\n * Find a comment with \"jss\" inside.\n */\nfunction findCommentNode(text) {\n var head = getHead();\n for (var i = 0; i < head.childNodes.length; i++) {\n var node = head.childNodes[i];\n if (node.nodeType === 8 && node.nodeValue.trim() === text) {\n return node;\n }\n }\n return null;\n}\n\n/**\n * Find a node before which we can insert the sheet.\n */\nfunction findPrevNode(options) {\n var registry = _sheets2['default'].registry;\n\n\n if (registry.length > 0) {\n // Try to insert before the next higher sheet.\n var sheet = findHigherSheet(registry, options);\n if (sheet) return sheet.renderer.element;\n\n // Otherwise insert after the last attached.\n sheet = findHighestSheet(registry, options);\n if (sheet) return sheet.renderer.element.nextElementSibling;\n }\n\n // Try to find a comment placeholder if registry is empty.\n var insertionPoint = options.insertionPoint;\n\n if (insertionPoint && typeof insertionPoint === 'string') {\n var comment = findCommentNode(insertionPoint);\n if (comment) return comment.nextSibling;\n // If user specifies an insertion point and it can't be found in the document -\n // bad specificity issues may appear.\n (0, _warning2['default'])(insertionPoint === 'jss', '[JSS] Insertion point \"%s\" not found.', insertionPoint);\n }\n\n return null;\n}\n\n/**\n * Insert style element into the DOM.\n */\nfunction insertStyle(style, options) {\n var insertionPoint = options.insertionPoint;\n\n var prevNode = findPrevNode(options);\n\n if (prevNode) {\n var parentNode = prevNode.parentNode;\n\n if (parentNode) parentNode.insertBefore(style, prevNode);\n return;\n }\n\n // Works with iframes and any node types.\n if (insertionPoint && typeof insertionPoint.nodeType === 'number') {\n // https://stackoverflow.com/questions/41328728/force-casting-in-flow\n var insertionPointElement = insertionPoint;\n var _parentNode = insertionPointElement.parentNode;\n\n if (_parentNode) _parentNode.insertBefore(style, insertionPointElement.nextSibling);else (0, _warning2['default'])(false, '[JSS] Insertion point is not in the DOM.');\n return;\n }\n\n getHead().insertBefore(style, prevNode);\n}\n\n/**\n * Read jss nonce setting from the page if the user has set it.\n */\nvar getNonce = memoize(function () {\n var node = document.querySelector('meta[property=\"csp-nonce\"]');\n return node ? node.getAttribute('content') : null;\n});\n\nvar DomRenderer = function () {\n function DomRenderer(sheet) {\n _classCallCheck(this, DomRenderer);\n\n this.getPropertyValue = getPropertyValue;\n this.setProperty = setProperty;\n this.removeProperty = removeProperty;\n this.setSelector = setSelector;\n this.getKey = getKey;\n this.getUnescapedKeysMap = getUnescapedKeysMap;\n this.hasInsertedRules = false;\n\n // There is no sheet when the renderer is used from a standalone StyleRule.\n if (sheet) _sheets2['default'].add(sheet);\n\n this.sheet = sheet;\n\n var _ref = this.sheet ? this.sheet.options : {},\n media = _ref.media,\n meta = _ref.meta,\n element = _ref.element;\n\n this.element = element || document.createElement('style');\n this.element.setAttribute('data-jss', '');\n if (media) this.element.setAttribute('media', media);\n if (meta) this.element.setAttribute('data-meta', meta);\n var nonce = getNonce();\n if (nonce) this.element.setAttribute('nonce', nonce);\n }\n\n /**\n * Insert style element into render tree.\n */\n\n\n // HTMLStyleElement needs fixing https://github.com/facebook/flow/issues/2696\n\n\n _createClass(DomRenderer, [{\n key: 'attach',\n value: function attach() {\n // In the case the element node is external and it is already in the DOM.\n if (this.element.parentNode || !this.sheet) return;\n\n // When rules are inserted using `insertRule` API, after `sheet.detach().attach()`\n // browsers remove those rules.\n // TODO figure out if its a bug and if it is known.\n // Workaround is to redeploy the sheet before attaching as a string.\n if (this.hasInsertedRules) {\n this.deploy();\n this.hasInsertedRules = false;\n }\n\n insertStyle(this.element, this.sheet.options);\n }\n\n /**\n * Remove style element from render tree.\n */\n\n }, {\n key: 'detach',\n value: function detach() {\n this.element.parentNode.removeChild(this.element);\n }\n\n /**\n * Inject CSS string into element.\n */\n\n }, {\n key: 'deploy',\n value: function deploy() {\n if (!this.sheet) return;\n this.element.textContent = '\\n' + this.sheet.toString() + '\\n';\n }\n\n /**\n * Insert a rule into element.\n */\n\n }, {\n key: 'insertRule',\n value: function insertRule(rule, index) {\n var sheet = this.element.sheet;\n var cssRules = sheet.cssRules;\n\n var str = rule.toString();\n if (!index) index = cssRules.length;\n\n if (!str) return false;\n\n try {\n sheet.insertRule(str, index);\n } catch (err) {\n (0, _warning2['default'])(false, '[JSS] Can not insert an unsupported rule \\n\\r%s', rule);\n return false;\n }\n this.hasInsertedRules = true;\n\n return cssRules[index];\n }\n\n /**\n * Delete a rule.\n */\n\n }, {\n key: 'deleteRule',\n value: function deleteRule(cssRule) {\n var sheet = this.element.sheet;\n\n var index = this.indexOf(cssRule);\n if (index === -1) return false;\n sheet.deleteRule(index);\n return true;\n }\n\n /**\n * Get index of a CSS Rule.\n */\n\n }, {\n key: 'indexOf',\n value: function indexOf(cssRule) {\n var cssRules = this.element.sheet.cssRules;\n\n for (var _index = 0; _index < cssRules.length; _index++) {\n if (cssRule === cssRules[_index]) return _index;\n }\n return -1;\n }\n\n /**\n * Generate a new CSS rule and replace the existing one.\n */\n\n }, {\n key: 'replaceRule',\n value: function replaceRule(cssRule, rule) {\n var index = this.indexOf(cssRule);\n var newCssRule = this.insertRule(rule, index);\n this.element.sheet.deleteRule(index);\n return newCssRule;\n }\n\n /**\n * Get all rules elements.\n */\n\n }, {\n key: 'getRules',\n value: function getRules() {\n return this.element.sheet.cssRules;\n }\n }]);\n\n return DomRenderer;\n}();\n\nexports['default'] = DomRenderer;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _RuleList = require('../RuleList');\n\nvar _RuleList2 = _interopRequireDefault(_RuleList);\n\nvar _StyleRule = require('../rules/StyleRule');\n\nvar _StyleRule2 = _interopRequireDefault(_StyleRule);\n\nvar _createRule = require('../utils/createRule');\n\nvar _createRule2 = _interopRequireDefault(_createRule);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\n// A symbol replacement.\nvar now = Date.now();\n\nvar fnValuesNs = 'fnValues' + now;\nvar fnStyleNs = 'fnStyle' + ++now;\n\nexports['default'] = {\n onCreateRule: function onCreateRule(name, decl, options) {\n if (typeof decl !== 'function') return null;\n var rule = (0, _createRule2['default'])(name, {}, options);\n rule[fnStyleNs] = decl;\n return rule;\n },\n onProcessStyle: function onProcessStyle(style, rule) {\n var fn = {};\n for (var prop in style) {\n var value = style[prop];\n if (typeof value !== 'function') continue;\n delete style[prop];\n fn[prop] = value;\n }\n rule = rule;\n rule[fnValuesNs] = fn;\n return style;\n },\n onUpdate: function onUpdate(data, rule) {\n // It is a rules container like for e.g. ConditionalRule.\n if (rule.rules instanceof _RuleList2['default']) {\n rule.rules.update(data);\n return;\n }\n if (!(rule instanceof _StyleRule2['default'])) return;\n\n rule = rule;\n\n // If we have a fn values map, it is a rule with function values.\n if (rule[fnValuesNs]) {\n for (var prop in rule[fnValuesNs]) {\n rule.prop(prop, rule[fnValuesNs][prop](data));\n }\n }\n\n rule = rule;\n\n var fnStyle = rule[fnStyleNs];\n\n // If we have a style function, the entire rule is dynamic and style object\n // will be returned from that function.\n if (fnStyle) {\n var style = fnStyle(data);\n for (var _prop in style) {\n rule.prop(_prop, style[_prop]);\n }\n }\n }\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _StyleRule = require('../rules/StyleRule');\n\nvar _StyleRule2 = _interopRequireDefault(_StyleRule);\n\nvar _createRule = require('../utils/createRule');\n\nvar _createRule2 = _interopRequireDefault(_createRule);\n\nvar _isObservable = require('../utils/isObservable');\n\nvar _isObservable2 = _interopRequireDefault(_isObservable);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nexports['default'] = {\n onCreateRule: function onCreateRule(name, decl, options) {\n if (!(0, _isObservable2['default'])(decl)) return null;\n\n // Cast `decl` to `Observable`, since it passed the type guard.\n var style$ = decl;\n\n var rule = (0, _createRule2['default'])(name, {}, options);\n\n // TODO\n // Call `stream.subscribe()` returns a subscription, which should be explicitly\n // unsubscribed from when we know this sheet is no longer needed.\n style$.subscribe(function (style) {\n for (var prop in style) {\n rule.prop(prop, style[prop]);\n }\n });\n\n return rule;\n },\n onProcessRule: function onProcessRule(rule) {\n if (!(rule instanceof _StyleRule2['default'])) return;\n var styleRule = rule;\n var style = styleRule.style;\n\n var _loop = function _loop(prop) {\n var value = style[prop];\n if (!(0, _isObservable2['default'])(value)) return 'continue';\n delete style[prop];\n value.subscribe({\n next: function next(nextValue) {\n styleRule.prop(prop, nextValue);\n }\n });\n };\n\n for (var prop in style) {\n var _ret = _loop(prop);\n\n if (_ret === 'continue') continue;\n }\n }\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _toCss = require('../utils/toCss');\n\nvar _toCss2 = _interopRequireDefault(_toCss);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar ViewportRule = function () {\n function ViewportRule(key, style, options) {\n _classCallCheck(this, ViewportRule);\n\n this.type = 'viewport';\n this.isProcessed = false;\n\n this.key = key;\n this.style = style;\n this.options = options;\n }\n\n /**\n * Generates a CSS string.\n */\n\n\n _createClass(ViewportRule, [{\n key: 'toString',\n value: function toString(options) {\n return (0, _toCss2['default'])(this.key, this.style, options);\n }\n }]);\n\n return ViewportRule;\n}();\n\nexports['default'] = ViewportRule;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _toCss = require('../utils/toCss');\n\nvar _toCss2 = _interopRequireDefault(_toCss);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar FontFaceRule = function () {\n function FontFaceRule(key, style, options) {\n _classCallCheck(this, FontFaceRule);\n\n this.type = 'font-face';\n this.isProcessed = false;\n\n this.key = key;\n this.style = style;\n this.options = options;\n }\n\n /**\n * Generates a CSS string.\n */\n\n\n _createClass(FontFaceRule, [{\n key: 'toString',\n value: function toString(options) {\n if (Array.isArray(this.style)) {\n var str = '';\n for (var index = 0; index < this.style.length; index++) {\n str += (0, _toCss2['default'])(this.key, this.style[index]);\n if (this.style[index + 1]) str += '\\n';\n }\n return str;\n }\n\n return (0, _toCss2['default'])(this.key, this.style, options);\n }\n }]);\n\n return FontFaceRule;\n}();\n\nexports['default'] = FontFaceRule;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\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\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _RuleList = require('../RuleList');\n\nvar _RuleList2 = _interopRequireDefault(_RuleList);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n/**\n * Conditional rule for @media, @supports\n */\nvar ConditionalRule = function () {\n function ConditionalRule(key, styles, options) {\n _classCallCheck(this, ConditionalRule);\n\n this.type = 'conditional';\n this.isProcessed = false;\n\n this.key = key;\n this.options = options;\n this.rules = new _RuleList2['default'](_extends({}, options, { parent: this }));\n\n for (var name in styles) {\n this.rules.add(name, styles[name]);\n }\n\n this.rules.process();\n }\n\n /**\n * Get a rule.\n */\n\n\n _createClass(ConditionalRule, [{\n key: 'getRule',\n value: function getRule(name) {\n return this.rules.get(name);\n }\n\n /**\n * Get index of a rule.\n */\n\n }, {\n key: 'indexOf',\n value: function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n\n /**\n * Create and register rule, run plugins.\n */\n\n }, {\n key: 'addRule',\n value: function addRule(name, style, options) {\n var rule = this.rules.add(name, style, options);\n this.options.jss.plugins.onProcessRule(rule);\n return rule;\n }\n\n /**\n * Generates a CSS string.\n */\n\n }, {\n key: 'toString',\n value: function toString() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { indent: 1 };\n\n var inner = this.rules.toString(options);\n return inner ? this.key + ' {\\n' + inner + '\\n}' : '';\n }\n }]);\n\n return ConditionalRule;\n}();\n\nexports['default'] = ConditionalRule;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\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\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _RuleList = require('../RuleList');\n\nvar _RuleList2 = _interopRequireDefault(_RuleList);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n/**\n * Rule for @keyframes\n */\nvar KeyframesRule = function () {\n function KeyframesRule(key, frames, options) {\n _classCallCheck(this, KeyframesRule);\n\n this.type = 'keyframes';\n this.isProcessed = false;\n\n this.key = key;\n this.options = options;\n this.rules = new _RuleList2['default'](_extends({}, options, { parent: this }));\n\n for (var name in frames) {\n this.rules.add(name, frames[name], _extends({}, this.options, {\n parent: this,\n selector: name\n }));\n }\n\n this.rules.process();\n }\n\n /**\n * Generates a CSS string.\n */\n\n\n _createClass(KeyframesRule, [{\n key: 'toString',\n value: function toString() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { indent: 1 };\n\n var inner = this.rules.toString(options);\n if (inner) inner += '\\n';\n return this.key + ' {\\n' + inner + '}';\n }\n }]);\n\n return KeyframesRule;\n}();\n\nexports['default'] = KeyframesRule;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar SimpleRule = function () {\n function SimpleRule(key, value, options) {\n _classCallCheck(this, SimpleRule);\n\n this.type = 'simple';\n this.isProcessed = false;\n\n this.key = key;\n this.value = value;\n this.options = options;\n }\n\n /**\n * Generates a CSS string.\n */\n // eslint-disable-next-line no-unused-vars\n\n\n _createClass(SimpleRule, [{\n key: 'toString',\n value: function toString(options) {\n if (Array.isArray(this.value)) {\n var str = '';\n for (var index = 0; index < this.value.length; index++) {\n str += this.key + ' ' + this.value[index] + ';';\n if (this.value[index + 1]) str += '\\n';\n }\n return str;\n }\n\n return this.key + ' ' + this.value + ';';\n }\n }]);\n\n return SimpleRule;\n}();\n\nexports['default'] = SimpleRule;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _SimpleRule = require('../rules/SimpleRule');\n\nvar _SimpleRule2 = _interopRequireDefault(_SimpleRule);\n\nvar _KeyframesRule = require('../rules/KeyframesRule');\n\nvar _KeyframesRule2 = _interopRequireDefault(_KeyframesRule);\n\nvar _ConditionalRule = require('../rules/ConditionalRule');\n\nvar _ConditionalRule2 = _interopRequireDefault(_ConditionalRule);\n\nvar _FontFaceRule = require('../rules/FontFaceRule');\n\nvar _FontFaceRule2 = _interopRequireDefault(_FontFaceRule);\n\nvar _ViewportRule = require('../rules/ViewportRule');\n\nvar _ViewportRule2 = _interopRequireDefault(_ViewportRule);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar classes = {\n '@charset': _SimpleRule2['default'],\n '@import': _SimpleRule2['default'],\n '@namespace': _SimpleRule2['default'],\n '@keyframes': _KeyframesRule2['default'],\n '@media': _ConditionalRule2['default'],\n '@supports': _ConditionalRule2['default'],\n '@font-face': _FontFaceRule2['default'],\n '@viewport': _ViewportRule2['default'],\n '@-ms-viewport': _ViewportRule2['default']\n\n /**\n * Generate plugins which will register all rules.\n */\n};\nvar plugins = Object.keys(classes).map(function (key) {\n // https://jsperf.com/indexof-vs-substr-vs-regex-at-the-beginning-3\n var re = new RegExp('^' + key);\n var RuleClass = classes[key];\n var onCreateRule = function onCreateRule(name, decl, options) {\n return re.test(name) ? new RuleClass(name, decl, options) : null;\n };\n return { onCreateRule: onCreateRule };\n});\n\nexports['default'] = plugins;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar PluginsRegistry = function () {\n function PluginsRegistry() {\n _classCallCheck(this, PluginsRegistry);\n\n this.hooks = {\n onCreateRule: [],\n onProcessRule: [],\n onProcessStyle: [],\n onProcessSheet: [],\n onChangeValue: [],\n onUpdate: []\n\n /**\n * Call `onCreateRule` hooks and return an object if returned by a hook.\n */\n };\n }\n\n _createClass(PluginsRegistry, [{\n key: 'onCreateRule',\n value: function onCreateRule(name, decl, options) {\n for (var i = 0; i < this.hooks.onCreateRule.length; i++) {\n var rule = this.hooks.onCreateRule[i](name, decl, options);\n if (rule) return rule;\n }\n return null;\n }\n\n /**\n * Call `onProcessRule` hooks.\n */\n\n }, {\n key: 'onProcessRule',\n value: function onProcessRule(rule) {\n if (rule.isProcessed) return;\n var sheet = rule.options.sheet;\n\n for (var i = 0; i < this.hooks.onProcessRule.length; i++) {\n this.hooks.onProcessRule[i](rule, sheet);\n }\n\n // $FlowFixMe\n if (rule.style) this.onProcessStyle(rule.style, rule, sheet);\n\n rule.isProcessed = true;\n }\n\n /**\n * Call `onProcessStyle` hooks.\n */\n\n }, {\n key: 'onProcessStyle',\n value: function onProcessStyle(style, rule, sheet) {\n var nextStyle = style;\n\n for (var i = 0; i < this.hooks.onProcessStyle.length; i++) {\n nextStyle = this.hooks.onProcessStyle[i](nextStyle, rule, sheet);\n // $FlowFixMe\n rule.style = nextStyle;\n }\n }\n\n /**\n * Call `onProcessSheet` hooks.\n */\n\n }, {\n key: 'onProcessSheet',\n value: function onProcessSheet(sheet) {\n for (var i = 0; i < this.hooks.onProcessSheet.length; i++) {\n this.hooks.onProcessSheet[i](sheet);\n }\n }\n\n /**\n * Call `onUpdate` hooks.\n */\n\n }, {\n key: 'onUpdate',\n value: function onUpdate(data, rule, sheet) {\n for (var i = 0; i < this.hooks.onUpdate.length; i++) {\n this.hooks.onUpdate[i](data, rule, sheet);\n }\n }\n\n /**\n * Call `onChangeValue` hooks.\n */\n\n }, {\n key: 'onChangeValue',\n value: function onChangeValue(value, prop, rule) {\n var processedValue = value;\n for (var i = 0; i < this.hooks.onChangeValue.length; i++) {\n processedValue = this.hooks.onChangeValue[i](processedValue, prop, rule);\n }\n return processedValue;\n }\n\n /**\n * Register a plugin.\n * If function is passed, it is a shortcut for `{onProcessRule}`.\n */\n\n }, {\n key: 'use',\n value: function use(plugin) {\n for (var name in plugin) {\n if (this.hooks[name]) this.hooks[name].push(plugin[name]);else (0, _warning2['default'])(false, '[JSS] Unknown hook \"%s\".', name);\n }\n }\n }]);\n\n return PluginsRegistry;\n}();\n\nexports['default'] = PluginsRegistry;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\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\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _isInBrowser = require('is-in-browser');\n\nvar _isInBrowser2 = _interopRequireDefault(_isInBrowser);\n\nvar _StyleSheet = require('./StyleSheet');\n\nvar _StyleSheet2 = _interopRequireDefault(_StyleSheet);\n\nvar _PluginsRegistry = require('./PluginsRegistry');\n\nvar _PluginsRegistry2 = _interopRequireDefault(_PluginsRegistry);\n\nvar _rules = require('./plugins/rules');\n\nvar _rules2 = _interopRequireDefault(_rules);\n\nvar _observables = require('./plugins/observables');\n\nvar _observables2 = _interopRequireDefault(_observables);\n\nvar _functions = require('./plugins/functions');\n\nvar _functions2 = _interopRequireDefault(_functions);\n\nvar _sheets = require('./sheets');\n\nvar _sheets2 = _interopRequireDefault(_sheets);\n\nvar _StyleRule = require('./rules/StyleRule');\n\nvar _StyleRule2 = _interopRequireDefault(_StyleRule);\n\nvar _createGenerateClassName = require('./utils/createGenerateClassName');\n\nvar _createGenerateClassName2 = _interopRequireDefault(_createGenerateClassName);\n\nvar _createRule2 = require('./utils/createRule');\n\nvar _createRule3 = _interopRequireDefault(_createRule2);\n\nvar _DomRenderer = require('./renderers/DomRenderer');\n\nvar _DomRenderer2 = _interopRequireDefault(_DomRenderer);\n\nvar _VirtualRenderer = require('./renderers/VirtualRenderer');\n\nvar _VirtualRenderer2 = _interopRequireDefault(_VirtualRenderer);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar defaultPlugins = _rules2['default'].concat([_observables2['default'], _functions2['default']]);\n\nvar instanceCounter = 0;\n\nvar Jss = function () {\n function Jss(options) {\n _classCallCheck(this, Jss);\n\n this.id = instanceCounter++;\n this.version = \"9.8.7\";\n this.plugins = new _PluginsRegistry2['default']();\n this.options = {\n createGenerateClassName: _createGenerateClassName2['default'],\n Renderer: _isInBrowser2['default'] ? _DomRenderer2['default'] : _VirtualRenderer2['default'],\n plugins: []\n };\n this.generateClassName = (0, _createGenerateClassName2['default'])();\n\n // eslint-disable-next-line prefer-spread\n this.use.apply(this, defaultPlugins);\n this.setup(options);\n }\n\n _createClass(Jss, [{\n key: 'setup',\n value: function setup() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n\n if (options.createGenerateClassName) {\n this.options.createGenerateClassName = options.createGenerateClassName;\n // $FlowFixMe\n this.generateClassName = options.createGenerateClassName();\n }\n\n if (options.insertionPoint != null) this.options.insertionPoint = options.insertionPoint;\n if (options.virtual || options.Renderer) {\n this.options.Renderer = options.Renderer || (options.virtual ? _VirtualRenderer2['default'] : _DomRenderer2['default']);\n }\n\n // eslint-disable-next-line prefer-spread\n if (options.plugins) this.use.apply(this, options.plugins);\n\n return this;\n }\n\n /**\n * Create a Style Sheet.\n */\n\n }, {\n key: 'createStyleSheet',\n value: function createStyleSheet(styles) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n\n var index = options.index;\n if (typeof index !== 'number') {\n index = _sheets2['default'].index === 0 ? 0 : _sheets2['default'].index + 1;\n }\n var sheet = new _StyleSheet2['default'](styles, _extends({}, options, {\n jss: this,\n generateClassName: options.generateClassName || this.generateClassName,\n insertionPoint: this.options.insertionPoint,\n Renderer: this.options.Renderer,\n index: index\n }));\n this.plugins.onProcessSheet(sheet);\n\n return sheet;\n }\n\n /**\n * Detach the Style Sheet and remove it from the registry.\n */\n\n }, {\n key: 'removeStyleSheet',\n value: function removeStyleSheet(sheet) {\n sheet.detach();\n _sheets2['default'].remove(sheet);\n return this;\n }\n\n /**\n * Create a rule without a Style Sheet.\n */\n\n }, {\n key: 'createRule',\n value: function createRule(name) {\n var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n // Enable rule without name for inline styles.\n if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') {\n options = style;\n style = name;\n name = undefined;\n }\n\n // Cast from RuleFactoryOptions to RuleOptions\n // https://stackoverflow.com/questions/41328728/force-casting-in-flow\n var ruleOptions = options;\n\n ruleOptions.jss = this;\n ruleOptions.Renderer = this.options.Renderer;\n if (!ruleOptions.generateClassName) ruleOptions.generateClassName = this.generateClassName;\n if (!ruleOptions.classes) ruleOptions.classes = {};\n var rule = (0, _createRule3['default'])(name, style, ruleOptions);\n\n if (!ruleOptions.selector && rule instanceof _StyleRule2['default']) {\n rule.selector = '.' + ruleOptions.generateClassName(rule);\n }\n\n this.plugins.onProcessRule(rule);\n\n return rule;\n }\n\n /**\n * Register plugin. Passed function will be invoked with a rule instance.\n */\n\n }, {\n key: 'use',\n value: function use() {\n var _this = this;\n\n for (var _len = arguments.length, plugins = Array(_len), _key = 0; _key < _len; _key++) {\n plugins[_key] = arguments[_key];\n }\n\n plugins.forEach(function (plugin) {\n // Avoids applying same plugin twice, at least based on ref.\n if (_this.options.plugins.indexOf(plugin) === -1) {\n _this.options.plugins.push(plugin);\n _this.plugins.use(plugin);\n }\n });\n\n return this;\n }\n }]);\n\n return Jss;\n}();\n\nexports['default'] = Jss;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar ns = '2f1acc6c3a606b082e5eef5e54414ffb';\nif (global[ns] == null) global[ns] = 0;\n\n// Bundle may contain multiple JSS versions at the same time. In order to identify\n// the current version with just one short number and use it for classes generation\n// we use a counter. Also it is more accurate, because user can manually reevaluate\n// the module.\nexports['default'] = global[ns]++;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar CSS = global.CSS;\n\nvar env = process.env.NODE_ENV;\n\nvar escapeRegex = /([[\\].#*$><+~=|^:(),\"'`])/g;\n\nexports['default'] = function (str) {\n // We don't need to escape it in production, because we are not using user's\n // input for selectors, we are generating a valid selector.\n if (env === 'production') return str;\n\n if (!CSS || !CSS.escape) {\n return str.replace(escapeRegex, '\\\\$1');\n }\n\n return CSS.escape(str);\n};","module.exports = function(originalModule) {\r\n\tif (!originalModule.webpackPolyfill) {\r\n\t\tvar module = Object.create(originalModule);\r\n\t\t// module.parent = undefined by default\r\n\t\tif (!module.children) module.children = [];\r\n\t\tObject.defineProperty(module, \"loaded\", {\r\n\t\t\tenumerable: true,\r\n\t\t\tget: function() {\r\n\t\t\t\treturn module.l;\r\n\t\t\t}\r\n\t\t});\r\n\t\tObject.defineProperty(module, \"id\", {\r\n\t\t\tenumerable: true,\r\n\t\t\tget: function() {\r\n\t\t\t\treturn module.i;\r\n\t\t\t}\r\n\t\t});\r\n\t\tObject.defineProperty(module, \"exports\", {\r\n\t\t\tenumerable: true\r\n\t\t});\r\n\t\tmodule.webpackPolyfill = 1;\r\n\t}\r\n\treturn module;\r\n};\r\n","/* global window */\nimport ponyfill from './ponyfill.js';\n\nvar root;\n\nif (typeof self !== 'undefined') {\n root = self;\n} else if (typeof window !== 'undefined') {\n root = window;\n} else if (typeof global !== 'undefined') {\n root = global;\n} else if (typeof module !== 'undefined') {\n root = module;\n} else {\n root = Function('return this')();\n}\n\nvar result = ponyfill(root);\nexport default result;\n","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nexports['default'] = cloneStyle;\n\nvar _isObservable = require('./isObservable');\n\nvar _isObservable2 = _interopRequireDefault(_isObservable);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nvar isArray = Array.isArray;\nfunction cloneStyle(style) {\n // Support empty values in case user ends up with them by accident.\n if (style == null) return style;\n\n // Support string value for SimpleRule.\n var typeOfStyle = typeof style === 'undefined' ? 'undefined' : _typeof(style);\n\n if (typeOfStyle === 'string' || typeOfStyle === 'number' || typeOfStyle === 'function') {\n return style;\n }\n\n // Support array for FontFaceRule.\n if (isArray(style)) return style.map(cloneStyle);\n\n // Support Observable styles. Observables are immutable, so we don't need to\n // copy them.\n if ((0, _isObservable2['default'])(style)) return style;\n\n var newStyle = {};\n for (var name in style) {\n var value = style[name];\n if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {\n newStyle[name] = cloneStyle(value);\n continue;\n }\n newStyle[name] = value;\n }\n\n return newStyle;\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _warning = require('warning');\n\nvar _warning2 = _interopRequireDefault(_warning);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\n/**\n * SheetsManager is like a WeakMap which is designed to count StyleSheet\n * instances and attach/detach automatically.\n */\nvar SheetsManager = function () {\n function SheetsManager() {\n _classCallCheck(this, SheetsManager);\n\n this.sheets = [];\n this.refs = [];\n this.keys = [];\n }\n\n _createClass(SheetsManager, [{\n key: 'get',\n value: function get(key) {\n var index = this.keys.indexOf(key);\n return this.sheets[index];\n }\n }, {\n key: 'add',\n value: function add(key, sheet) {\n var sheets = this.sheets,\n refs = this.refs,\n keys = this.keys;\n\n var index = sheets.indexOf(sheet);\n\n if (index !== -1) return index;\n\n sheets.push(sheet);\n refs.push(0);\n keys.push(key);\n\n return sheets.length - 1;\n }\n }, {\n key: 'manage',\n value: function manage(key) {\n var index = this.keys.indexOf(key);\n var sheet = this.sheets[index];\n if (this.refs[index] === 0) sheet.attach();\n this.refs[index]++;\n if (!this.keys[index]) this.keys.splice(index, 0, key);\n return sheet;\n }\n }, {\n key: 'unmanage',\n value: function unmanage(key) {\n var index = this.keys.indexOf(key);\n if (index === -1) {\n // eslint-ignore-next-line no-console\n (0, _warning2['default'])(false, \"SheetsManager: can't find sheet to unmanage\");\n return;\n }\n if (this.refs[index] > 0) {\n this.refs[index]--;\n if (this.refs[index] === 0) this.sheets[index].detach();\n }\n }\n }, {\n key: 'size',\n get: function get() {\n return this.keys.length;\n }\n }]);\n\n return SheetsManager;\n}();\n\nexports['default'] = SheetsManager;","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nexports['default'] = getDynamicStyles;\n/**\n * Extracts a styles object with only props that contain function values.\n */\nfunction getDynamicStyles(styles) {\n var to = null;\n\n for (var key in styles) {\n var value = styles[key];\n var type = typeof value === 'undefined' ? 'undefined' : _typeof(value);\n\n if (type === 'function') {\n if (!to) to = {};\n to[key] = value;\n } else if (type === 'object' && value !== null && !Array.isArray(value)) {\n var extracted = getDynamicStyles(value);\n if (extracted) {\n if (!to) to = {};\n to[key] = extracted;\n }\n }\n }\n\n return to;\n}","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\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\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nexports['default'] = jssGlobal;\n\nvar _jss = require('jss');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nvar propKey = '@global';\nvar prefixKey = '@global ';\n\nvar GlobalContainerRule = function () {\n function GlobalContainerRule(key, styles, options) {\n _classCallCheck(this, GlobalContainerRule);\n\n this.type = 'global';\n\n this.key = key;\n this.options = options;\n this.rules = new _jss.RuleList(_extends({}, options, {\n parent: this\n }));\n\n for (var selector in styles) {\n this.rules.add(selector, styles[selector], { selector: selector });\n }\n\n this.rules.process();\n }\n\n /**\n * Get a rule.\n */\n\n\n _createClass(GlobalContainerRule, [{\n key: 'getRule',\n value: function getRule(name) {\n return this.rules.get(name);\n }\n\n /**\n * Create and register rule, run plugins.\n */\n\n }, {\n key: 'addRule',\n value: function addRule(name, style, options) {\n var rule = this.rules.add(name, style, options);\n this.options.jss.plugins.onProcessRule(rule);\n return rule;\n }\n\n /**\n * Get index of a rule.\n */\n\n }, {\n key: 'indexOf',\n value: function indexOf(rule) {\n return this.rules.indexOf(rule);\n }\n\n /**\n * Generates a CSS string.\n */\n\n }, {\n key: 'toString',\n value: function toString() {\n return this.rules.toString();\n }\n }]);\n\n return GlobalContainerRule;\n}();\n\nvar GlobalPrefixedRule = function () {\n function GlobalPrefixedRule(name, style, options) {\n _classCallCheck(this, GlobalPrefixedRule);\n\n this.name = name;\n this.options = options;\n var selector = name.substr(prefixKey.length);\n this.rule = options.jss.createRule(selector, style, _extends({}, options, {\n parent: this,\n selector: selector\n }));\n }\n\n _createClass(GlobalPrefixedRule, [{\n key: 'toString',\n value: function toString(options) {\n return this.rule.toString(options);\n }\n }]);\n\n return GlobalPrefixedRule;\n}();\n\nvar separatorRegExp = /\\s*,\\s*/g;\n\nfunction addScope(selector, scope) {\n var parts = selector.split(separatorRegExp);\n var scoped = '';\n for (var i = 0; i < parts.length; i++) {\n scoped += scope + ' ' + parts[i].trim();\n if (parts[i + 1]) scoped += ', ';\n }\n return scoped;\n}\n\nfunction handleNestedGlobalContainerRule(rule) {\n var options = rule.options,\n style = rule.style;\n\n var rules = style[propKey];\n\n if (!rules) return;\n\n for (var name in rules) {\n options.sheet.addRule(name, rules[name], _extends({}, options, {\n selector: addScope(name, rule.selector)\n }));\n }\n\n delete style[propKey];\n}\n\nfunction handlePrefixedGlobalRule(rule) {\n var options = rule.options,\n style = rule.style;\n\n for (var prop in style) {\n if (prop.substr(0, propKey.length) !== propKey) continue;\n\n var selector = addScope(prop.substr(propKey.length), rule.selector);\n options.sheet.addRule(selector, style[prop], _extends({}, options, {\n selector: selector\n }));\n delete style[prop];\n }\n}\n\n/**\n * Convert nested rules to separate, remove them from original styles.\n *\n * @param {Rule} rule\n * @api public\n */\nfunction jssGlobal() {\n function onCreateRule(name, styles, options) {\n if (name === propKey) {\n return new GlobalContainerRule(name, styles, options);\n }\n\n if (name[0] === '@' && name.substr(0, prefixKey.length) === prefixKey) {\n return new GlobalPrefixedRule(name, styles, options);\n }\n\n var parent = options.parent;\n\n\n if (parent) {\n if (parent.type === 'global' || parent.options.parent.type === 'global') {\n options.global = true;\n }\n }\n\n if (options.global) options.selector = name;\n\n return null;\n }\n\n function onProcessRule(rule) {\n if (rule.type !== 'style') return;\n\n handleNestedGlobalContainerRule(rule);\n handlePrefixedGlobalRule(rule);\n }\n\n return { onCreateRule: onCreateRule, onProcessRule: onProcessRule };\n}","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\n// We need to centralize the zIndex definitions as they work\n// like global values in the browser.\nvar zIndex = {\n mobileStepper: 1000,\n appBar: 1100,\n drawer: 1200,\n modal: 1300,\n snackbar: 1400,\n tooltip: 1500\n};\nvar _default = zIndex;\nexports.default = _default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar spacing = {\n // All components align to an 8dp square baseline grid for mobile, tablet, and desktop.\n // https://material.io/design/layout/understanding-layout.html#pixel-density\n unit: 8\n};\nvar _default = spacing;\nexports.default = _default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar shape = {\n borderRadius: 4\n};\nvar _default = shape;\nexports.default = _default;","\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = void 0;\nvar shadowKeyUmbraOpacity = 0.2;\nvar shadowKeyPenumbraOpacity = 0.14;\nvar shadowAmbientShadowOpacity = 0.12;\n\nfunction createShadow() {\n return [\"\".concat(arguments.length <= 0 ? undefined : arguments[0], \"px \").concat(arguments.length <= 1 ? undefined : arguments[1], \"px \").concat(arguments.length <= 2 ? undefined : arguments[2], \"px \").concat(arguments.length <= 3 ? undefined : arguments[3], \"px rgba(0, 0, 0, \").concat(shadowKeyUmbraOpacity, \")\"), \"\".concat(arguments.length <= 4 ? undefined : arguments[4], \"px \").concat(arguments.length <= 5 ? undefined : arguments[5], \"px \").concat(arguments.length <= 6 ? undefined : arguments[6], \"px \").concat(arguments.length <= 7 ? undefined : arguments[7], \"px rgba(0, 0, 0, \").concat(shadowKeyPenumbraOpacity, \")\"), \"\".concat(arguments.length <= 8 ? undefined : arguments[8], \"px \").concat(arguments.length <= 9 ? undefined : arguments[9], \"px \").concat(arguments.length <= 10 ? undefined : arguments[10], \"px \").concat(arguments.length <= 11 ? undefined : arguments[11], \"px rgba(0, 0, 0, \").concat(shadowAmbientShadowOpacity, \")\")].join(',');\n}\n\nvar shadows = ['none', createShadow(0, 1, 3, 0, 0, 1, 1, 0, 0, 2, 1, -1), createShadow(0, 1, 5, 0, 0, 2, 2, 0, 0, 3, 1, -2), createShadow(0, 1, 8, 0, 0, 3, 4, 0, 0, 3, 3, -2), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];\nvar _default = shadows;\nexports.default = _default;","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = createTypography;\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _deepmerge = _interopRequireDefault(require(\"deepmerge\"));\n\n// < 1kb payload overhead when lodash/merge is > 3kb.\nfunction round(value) {\n return Math.round(value * 1e5) / 1e5;\n}\n\nfunction createTypography(palette, typography) {\n var _ref = typeof typography === 'function' ? typography(palette) : typography,\n _ref$fontFamily = _ref.fontFamily,\n fontFamily = _ref$fontFamily === void 0 ? '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif' : _ref$fontFamily,\n _ref$fontSize = _ref.fontSize,\n fontSize = _ref$fontSize === void 0 ? 14 : _ref$fontSize,\n _ref$fontWeightLight = _ref.fontWeightLight,\n fontWeightLight = _ref$fontWeightLight === void 0 ? 300 : _ref$fontWeightLight,\n _ref$fontWeightRegula = _ref.fontWeightRegular,\n fontWeightRegular = _ref$fontWeightRegula === void 0 ? 400 : _ref$fontWeightRegula,\n _ref$fontWeightMedium = _ref.fontWeightMedium,\n fontWeightMedium = _ref$fontWeightMedium === void 0 ? 500 : _ref$fontWeightMedium,\n _ref$htmlFontSize = _ref.htmlFontSize,\n htmlFontSize = _ref$htmlFontSize === void 0 ? 16 : _ref$htmlFontSize,\n allVariants = _ref.allVariants,\n other = (0, _objectWithoutProperties2.default)(_ref, [\"fontFamily\", \"fontSize\", \"fontWeightLight\", \"fontWeightRegular\", \"fontWeightMedium\", \"htmlFontSize\", \"allVariants\"]);\n\n var coef = fontSize / 14;\n\n function pxToRem(value) {\n return \"\".concat(value / htmlFontSize * coef, \"rem\");\n }\n\n return (0, _deepmerge.default)({\n pxToRem: pxToRem,\n round: round,\n fontFamily: fontFamily,\n fontSize: fontSize,\n fontWeightLight: fontWeightLight,\n fontWeightRegular: fontWeightRegular,\n fontWeightMedium: fontWeightMedium,\n display4: (0, _objectSpread2.default)({\n fontSize: pxToRem(112),\n fontWeight: fontWeightLight,\n fontFamily: fontFamily,\n letterSpacing: '-.04em',\n lineHeight: \"\".concat(round(128 / 112), \"em\"),\n marginLeft: '-.04em',\n color: palette.text.secondary\n }, allVariants),\n display3: (0, _objectSpread2.default)({\n fontSize: pxToRem(56),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n letterSpacing: '-.02em',\n lineHeight: \"\".concat(round(73 / 56), \"em\"),\n marginLeft: '-.02em',\n color: palette.text.secondary\n }, allVariants),\n display2: (0, _objectSpread2.default)({\n fontSize: pxToRem(45),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(48 / 45), \"em\"),\n marginLeft: '-.02em',\n color: palette.text.secondary\n }, allVariants),\n display1: (0, _objectSpread2.default)({\n fontSize: pxToRem(34),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(41 / 34), \"em\"),\n color: palette.text.secondary\n }, allVariants),\n headline: (0, _objectSpread2.default)({\n fontSize: pxToRem(24),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(32.5 / 24), \"em\"),\n color: palette.text.primary\n }, allVariants),\n title: (0, _objectSpread2.default)({\n fontSize: pxToRem(21),\n fontWeight: fontWeightMedium,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(24.5 / 21), \"em\"),\n color: palette.text.primary\n }, allVariants),\n subheading: (0, _objectSpread2.default)({\n fontSize: pxToRem(16),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(24 / 16), \"em\"),\n color: palette.text.primary\n }, allVariants),\n body2: (0, _objectSpread2.default)({\n fontSize: pxToRem(14),\n fontWeight: fontWeightMedium,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(24 / 14), \"em\"),\n color: palette.text.primary\n }, allVariants),\n body1: (0, _objectSpread2.default)({\n fontSize: pxToRem(14),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(20.5 / 14), \"em\"),\n color: palette.text.primary\n }, allVariants),\n caption: (0, _objectSpread2.default)({\n fontSize: pxToRem(12),\n fontWeight: fontWeightRegular,\n fontFamily: fontFamily,\n lineHeight: \"\".concat(round(16.5 / 12), \"em\"),\n color: palette.text.secondary\n }, allVariants),\n button: (0, _objectSpread2.default)({\n fontSize: pxToRem(14),\n textTransform: 'uppercase',\n fontWeight: fontWeightMedium,\n fontFamily: fontFamily,\n color: palette.text.primary\n }, allVariants)\n }, other, {\n clone: false // No need to clone deep\n\n });\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = createPalette;\nexports.dark = exports.light = void 0;\n\nvar _objectSpread2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nvar _objectWithoutProperties2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectWithoutProperties\"));\n\nvar _warning = _interopRequireDefault(require(\"warning\"));\n\nvar _deepmerge = _interopRequireDefault(require(\"deepmerge\"));\n\nvar _indigo = _interopRequireDefault(require(\"../colors/indigo\"));\n\nvar _pink = _interopRequireDefault(require(\"../colors/pink\"));\n\nvar _grey = _interopRequireDefault(require(\"../colors/grey\"));\n\nvar _red = _interopRequireDefault(require(\"../colors/red\"));\n\nvar _common = _interopRequireDefault(require(\"../colors/common\"));\n\nvar _colorManipulator = require(\"./colorManipulator\");\n\n// < 1kb payload overhead when lodash/merge is > 3kb.\nvar light = {\n // The colors used to style the text.\n text: {\n // The most important text.\n primary: 'rgba(0, 0, 0, 0.87)',\n // Secondary text.\n secondary: 'rgba(0, 0, 0, 0.54)',\n // Disabled text have even lower visual prominence.\n disabled: 'rgba(0, 0, 0, 0.38)',\n // Text hints.\n hint: 'rgba(0, 0, 0, 0.38)'\n },\n // The color used to divide different elements.\n divider: 'rgba(0, 0, 0, 0.12)',\n // The background colors used to style the surfaces.\n // Consistency between these values is important.\n background: {\n paper: _common.default.white,\n default: _grey.default[50]\n },\n // The colors used to style the action elements.\n action: {\n // The color of an active action like an icon button.\n active: 'rgba(0, 0, 0, 0.54)',\n // The color of an hovered action.\n hover: 'rgba(0, 0, 0, 0.08)',\n hoverOpacity: 0.08,\n // The color of a selected action.\n selected: 'rgba(0, 0, 0, 0.14)',\n // The color of a disabled action.\n disabled: 'rgba(0, 0, 0, 0.26)',\n // The background color of a disabled action.\n disabledBackground: 'rgba(0, 0, 0, 0.12)'\n }\n};\nexports.light = light;\nvar dark = {\n text: {\n primary: _common.default.white,\n secondary: 'rgba(255, 255, 255, 0.7)',\n disabled: 'rgba(255, 255, 255, 0.5)',\n hint: 'rgba(255, 255, 255, 0.5)',\n icon: 'rgba(255, 255, 255, 0.5)'\n },\n divider: 'rgba(255, 255, 255, 0.12)',\n background: {\n paper: _grey.default[800],\n default: '#303030'\n },\n action: {\n active: _common.default.white,\n hover: 'rgba(255, 255, 255, 0.1)',\n hoverOpacity: 0.1,\n selected: 'rgba(255, 255, 255, 0.2)',\n disabled: 'rgba(255, 255, 255, 0.3)',\n disabledBackground: 'rgba(255, 255, 255, 0.12)'\n }\n};\nexports.dark = dark;\n\nfunction addLightOrDark(intent, direction, shade, tonalOffset) {\n if (!intent[direction]) {\n if (intent.hasOwnProperty(shade)) {\n intent[direction] = intent[shade];\n } else if (direction === 'light') {\n intent.light = (0, _colorManipulator.lighten)(intent.main, tonalOffset);\n } else if (direction === 'dark') {\n intent.dark = (0, _colorManipulator.darken)(intent.main, tonalOffset * 1.5);\n }\n }\n}\n\nfunction createPalette(palette) {\n var _palette$primary = palette.primary,\n primary = _palette$primary === void 0 ? {\n light: _indigo.default[300],\n main: _indigo.default[500],\n dark: _indigo.default[700]\n } : _palette$primary,\n _palette$secondary = palette.secondary,\n secondary = _palette$secondary === void 0 ? {\n light: _pink.default.A200,\n main: _pink.default.A400,\n dark: _pink.default.A700\n } : _palette$secondary,\n _palette$error = palette.error,\n error = _palette$error === void 0 ? {\n light: _red.default[300],\n main: _red.default[500],\n dark: _red.default[700]\n } : _palette$error,\n _palette$type = palette.type,\n type = _palette$type === void 0 ? 'light' : _palette$type,\n _palette$contrastThre = palette.contrastThreshold,\n contrastThreshold = _palette$contrastThre === void 0 ? 3 : _palette$contrastThre,\n _palette$tonalOffset = palette.tonalOffset,\n tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,\n other = (0, _objectWithoutProperties2.default)(palette, [\"primary\", \"secondary\", \"error\", \"type\", \"contrastThreshold\", \"tonalOffset\"]);\n\n function getContrastText(background) {\n // Use the same logic as\n // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59\n // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54\n var contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;\n\n if (process.env.NODE_ENV !== 'production') {\n var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(contrast >= 3, [\"Material-UI: the contrast ratio of \".concat(contrast, \":1 for \").concat(contrastText, \" on \").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\\n')) : void 0;\n }\n\n return contrastText;\n }\n\n function augmentColor(color, mainShade, lightShade, darkShade) {\n if (!color.main && color[mainShade]) {\n color.main = color[mainShade];\n }\n\n addLightOrDark(color, 'light', lightShade, tonalOffset);\n addLightOrDark(color, 'dark', darkShade, tonalOffset);\n\n if (!color.contrastText) {\n color.contrastText = getContrastText(color.main);\n }\n }\n\n augmentColor(primary, 500, 300, 700);\n augmentColor(secondary, 'A400', 'A200', 'A700');\n augmentColor(error, 500, 300, 700);\n var types = {\n dark: dark,\n light: light\n };\n process.env.NODE_ENV !== \"production\" ? (0, _warning.default)(types[type], \"Material-UI: the palette type `\".concat(type, \"` is not supported.\")) : void 0;\n var paletteOutput = (0, _deepmerge.default)((0, _objectSpread2.default)({\n // A collection of common colors.\n common: _common.default,\n // The palette type, can be light or dark.\n type: type,\n // The colors used to represent primary interface elements for a user.\n primary: primary,\n // The colors used to represent secondary interface elements for a user.\n secondary: secondary,\n // The colors used to represent interface elements that the user should be made aware of.\n error: error,\n // The grey colors.\n grey: _grey.default,\n // Used by `getContrastText()` to maximize the contrast between the background and\n // the text.\n contrastThreshold: contrastThreshold,\n // Take a background color and return the color of the text to maximize the contrast.\n getContrastText: getContrastText,\n // Generate a rich color object.\n augmentColor: augmentColor,\n // Used by the functions below to shift a color's luminance by approximately\n // two indexes within its tonal palette.\n // E.g., shift from Red 500 to Red 300 or Red 700.\n tonalOffset: tonalOffset\n }, types[type]), other, {\n clone: false // No need to clone deep\n\n });\n return paletteOutput;\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/builtin/interopRequireDefault\");\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = createMixins;\n\nvar _defineProperty2 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/defineProperty\"));\n\nvar _objectSpread3 = _interopRequireDefault(require(\"@babel/runtime/helpers/builtin/objectSpread\"));\n\nfunction createMixins(breakpoints, spacing, mixins) {\n var _toolbar;\n\n return (0, _objectSpread3.default)({\n gutters: function gutters() {\n var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n return (0, _objectSpread3.default)({\n paddingLeft: spacing.unit * 2,\n paddingRight: spacing.unit * 2\n }, styles, (0, _defineProperty2.default)({}, breakpoints.up('sm'), (0, _objectSpread3.default)({\n paddingLeft: spacing.unit * 3,\n paddingRight: spacing.unit * 3\n }, styles[breakpoints.up('sm')])));\n },\n toolbar: (_toolbar = {\n minHeight: 56\n }, (0, _defineProperty2.default)(_toolbar, \"\".concat(breakpoints.up('xs'), \" and (orientation: landscape)\"), {\n minHeight: 48\n }), (0, _defineProperty2.default)(_toolbar, breakpoints.up('sm'), {\n minHeight: 64\n }), _toolbar)\n }, mixins);\n}","function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nmodule.exports = _objectWithoutPropertiesLoose;","/**\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'use strict';\n\nvar ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';\n\nmodule.exports = ReactPropTypesSecret;\n","/**\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'use strict';\n\nvar emptyFunction = require('fbjs/lib/emptyFunction');\nvar invariant = require('fbjs/lib/invariant');\nvar ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');\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 invariant(\n false,\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 };\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 instanceOf: getShim,\n node: shim,\n objectOf: getShim,\n oneOf: getShim,\n oneOfType: getShim,\n shape: getShim,\n exact: getShim\n };\n\n ReactPropTypes.checkPropTypes = emptyFunction;\n ReactPropTypes.PropTypes = ReactPropTypes;\n\n return ReactPropTypes;\n};\n","'use strict';\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 * 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'use strict';\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\n\n/**\n * Simple, lightweight module assisting with the detection and context of\n * Worker. Helps avoid circular dependencies and allows code to reason about\n * whether or not they are in a Worker, even if they never include the main\n * `ReactWorker` dependency.\n */\nvar ExecutionEnvironment = {\n\n canUseDOM: canUseDOM,\n\n canUseWorkers: typeof Worker !== 'undefined',\n\n canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),\n\n canUseViewport: canUseDOM && !!window.screen,\n\n isInWorker: !canUseDOM // For now, this is true - might change in the future.\n\n};\n\nmodule.exports = ExecutionEnvironment;","// adapted FROM: https://github.com/facebook/react/blob/3019210df2b486416ed94d7b9becffaf254e81c4/src/renderers/shared/ReactDOMFrameScheduling.js\n\n'use strict';\n\n// This is a built-in polyfill for requestIdleCallback. It works by scheduling\n// a requestAnimationFrame, storing the time for the start of the frame, then\n// scheduling a postMessage which gets scheduled after paint. Within the\n// postMessage handler do as much work as possible until time + frame rate.\n// By separating the idle call into a separate event tick we ensure that\n// layout, paint and other browser work is counted against the available time.\n// The frame rate is dynamically adjusted.\n\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; };\n\nvar ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');\n\nvar hasNativePerformanceNow = (typeof performance === 'undefined' ? 'undefined' : _typeof(performance)) === 'object' && typeof performance.now === 'function';\n\nvar now = void 0;\nif (hasNativePerformanceNow) {\n now = function now() {\n return performance.now();\n };\n} else {\n now = function now() {\n return Date.now();\n };\n}\n\n// TODO: There's no way to cancel, because Fiber doesn't atm.\nvar rIC = void 0;\n\nif (!ExecutionEnvironment.canUseDOM) {\n rIC = function rIC(frameCallback) {\n setTimeout(function () {\n frameCallback({\n timeRemaining: function timeRemaining() {\n return Infinity;\n }\n });\n });\n return 0;\n };\n} else if (typeof requestIdleCallback !== 'function') {\n // Polyfill requestIdleCallback.\n\n var scheduledRAFCallback = null;\n var scheduledRICCallback = null;\n\n var isIdleScheduled = false;\n var isAnimationFrameScheduled = false;\n\n var frameDeadline = 0;\n // We start out assuming that we run at 30fps but then the heuristic tracking\n // will adjust this value to a faster fps if we get more frequent animation\n // frames.\n var previousFrameTime = 33;\n var activeFrameTime = 33;\n\n var frameDeadlineObject;\n if (hasNativePerformanceNow) {\n frameDeadlineObject = {\n timeRemaining: function timeRemaining() {\n // We assume that if we have a performance timer that the rAF callback\n // gets a performance timer value. Not sure if this is always true.\n return frameDeadline - performance.now();\n }\n };\n } else {\n frameDeadlineObject = {\n timeRemaining: function timeRemaining() {\n // Fallback to Date.now()\n return frameDeadline - Date.now();\n }\n };\n }\n\n // We use the postMessage trick to defer idle work until after the repaint.\n var messageKey = '__reactIdleCallback$' + Math.random().toString(36).slice(2);\n var idleTick = function idleTick(event) {\n if (event.source !== window || event.data !== messageKey) {\n return;\n }\n isIdleScheduled = false;\n var callback = scheduledRICCallback;\n scheduledRICCallback = null;\n if (callback !== null) {\n callback(frameDeadlineObject);\n }\n };\n // Assumes that we have addEventListener in this environment. Might need\n // something better for old IE.\n window.addEventListener('message', idleTick, false);\n\n var animationTick = function animationTick(rafTime) {\n isAnimationFrameScheduled = false;\n var nextFrameTime = rafTime - frameDeadline + activeFrameTime;\n if (nextFrameTime < activeFrameTime && previousFrameTime < activeFrameTime) {\n if (nextFrameTime < 8) {\n // Defensive coding. We don't support higher frame rates than 120hz.\n // If we get lower than that, it is probably a bug.\n nextFrameTime = 8;\n }\n // If one frame goes long, then the next one can be short to catch up.\n // If two frames are short in a row, then that's an indication that we\n // actually have a higher frame rate than what we're currently optimizing.\n // We adjust our heuristic dynamically accordingly. For example, if we're\n // running on 120hz display or 90hz VR display.\n // Take the max of the two in case one of them was an anomaly due to\n // missed frame deadlines.\n activeFrameTime = nextFrameTime < previousFrameTime ? previousFrameTime : nextFrameTime;\n } else {\n previousFrameTime = nextFrameTime;\n }\n frameDeadline = rafTime + activeFrameTime;\n if (!isIdleScheduled) {\n isIdleScheduled = true;\n window.postMessage(messageKey, '*');\n }\n var callback = scheduledRAFCallback;\n scheduledRAFCallback = null;\n if (callback !== null) {\n callback(rafTime);\n }\n };\n\n rIC = function rIC(callback) {\n // This assumes that we only schedule one callback at a time because that's\n // how Fiber uses it.\n scheduledRICCallback = callback;\n if (!isAnimationFrameScheduled) {\n // If rAF didn't already schedule one, we need to schedule a frame.\n // TODO: If this rAF doesn't materialize because the browser throttles, we\n // might want to still have setTimeout trigger rIC as a backup to ensure\n // that we keep performing work.\n isAnimationFrameScheduled = true;\n requestAnimationFrame(animationTick);\n }\n return 0;\n };\n} else {\n rIC = requestIdleCallback;\n}\n\nexports.now = now;\nexports.rIC = rIC;","/** @license React v16.4.1\n * react-reconciler.production.min.js\n *\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 */\nmodule.exports = function $$$reconciler($$$hostConfig) {\n'use strict';var aa=require(\"object-assign\"),ba=require(\"fbjs/lib/invariant\"),ca=require(\"react\"),m=require(\"fbjs/lib/emptyObject\"),da=require(\"fbjs/lib/shallowEqual\");function n(a){for(var b=arguments.length-1,c=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,d=0;dpb||(a.current=ob[pb],ob[pb]=null,pb--)}function A(a,b){pb++;ob[pb]=a.current;a.current=b}\nvar B=y(m),C=y(!1),qb=m;function rb(a){return sb(a)?qb:B.current}function tb(a,b){var c=a.type.contextTypes;if(!c)return m;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 sb(a){return 2===a.tag&&null!=a.type.childContextTypes}\nfunction ub(a){sb(a)&&(z(C,a),z(B,a))}function vb(a){z(C,a);z(B,a)}function wb(a,b,c){B.current!==m?n(\"168\"):void 0;A(B,b,a);A(C,c,a)}function xb(a,b){var c=a.stateNode,d=a.type.childContextTypes;if(\"function\"!==typeof c.getChildContext)return b;c=c.getChildContext();for(var e in c)e in d?void 0:n(\"108\",sa(a)||\"Unknown\",e);return aa({},b,c)}function yb(a){if(!sb(a))return!1;var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||m;qb=B.current;A(B,b,a);A(C,C.current,a);return!0}\nfunction zb(a,b){var c=a.stateNode;c?void 0:n(\"169\");if(b){var d=xb(a,qb);c.__reactInternalMemoizedMergedChildContext=d;z(C,a);z(B,a);A(B,d,a)}else z(C,a);A(C,b,a)}\nfunction D(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=null;this.index=0;this.ref=null;this.pendingProps=b;this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.expirationTime=0;this.alternate=null}\nfunction Ab(a,b,c){var d=a.alternate;null===d?(d=new D(a.tag,b,a.key,a.mode),d.type=a.type,d.stateNode=a.stateNode,d.alternate=a,a.alternate=d):(d.pendingProps=b,d.effectTag=0,d.nextEffect=null,d.firstEffect=null,d.lastEffect=null);d.expirationTime=c;d.child=a.child;d.memoizedProps=a.memoizedProps;d.memoizedState=a.memoizedState;d.updateQueue=a.updateQueue;d.sibling=a.sibling;d.index=a.index;d.ref=a.ref;return d}\nfunction Bb(a,b,c){var d=a.type,e=a.key;a=a.props;if(\"function\"===typeof d)var f=d.prototype&&d.prototype.isReactComponent?2:0;else if(\"string\"===typeof d)f=5;else switch(d){case x:return Cb(a.children,b,c,e);case na:f=11;b|=3;break;case ja:f=11;b|=2;break;case ka:return d=new D(15,a,e,b|4),d.type=ka,d.expirationTime=c,d;case pa:f=16;b|=2;break;default:a:{switch(\"object\"===typeof d&&null!==d?d.$$typeof:null){case la:f=13;break a;case ma:f=12;break a;case oa:f=14;break a;default:n(\"130\",null==d?d:\ntypeof d,\"\")}f=void 0}}b=new D(f,a,e,b);b.type=d;b.expirationTime=c;return b}function Cb(a,b,c,d){a=new D(10,a,d,b);a.expirationTime=c;return a}function Db(a,b,c){a=new D(6,a,null,b);a.expirationTime=c;return a}function Eb(a,b,c){b=new D(4,null!==a.children?a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}var Fb=null,Gb=null;function Hb(a){return function(b){try{return a(b)}catch(c){}}}\nfunction Ib(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);Fb=Hb(function(a){return b.onCommitFiberRoot(c,a)});Gb=Hb(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}function Jb(a){\"function\"===typeof Fb&&Fb(a)}function Kb(a){\"function\"===typeof Gb&&Gb(a)}var E=!1;\nfunction Lb(a){return{expirationTime:0,baseState:a,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function Mb(a){return{expirationTime:a.expirationTime,baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}\nfunction Nb(a){return{expirationTime:a,tag:0,payload:null,callback:null,next:null,nextEffect:null}}function Ob(a,b,c){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b);if(0===a.expirationTime||a.expirationTime>c)a.expirationTime=c}\nfunction Pb(a,b,c){var d=a.alternate;if(null===d){var e=a.updateQueue;var f=null;null===e&&(e=a.updateQueue=Lb(a.memoizedState))}else e=a.updateQueue,f=d.updateQueue,null===e?null===f?(e=a.updateQueue=Lb(a.memoizedState),f=d.updateQueue=Lb(d.memoizedState)):e=a.updateQueue=Mb(f):null===f&&(f=d.updateQueue=Mb(e));null===f||e===f?Ob(e,b,c):null===e.lastUpdate||null===f.lastUpdate?(Ob(e,b,c),Ob(f,b,c)):(Ob(e,b,c),f.lastUpdate=b)}\nfunction Qb(a,b,c){var d=a.updateQueue;d=null===d?a.updateQueue=Lb(a.memoizedState):Rb(a,d);null===d.lastCapturedUpdate?d.firstCapturedUpdate=d.lastCapturedUpdate=b:(d.lastCapturedUpdate.next=b,d.lastCapturedUpdate=b);if(0===d.expirationTime||d.expirationTime>c)d.expirationTime=c}function Rb(a,b){var c=a.alternate;null!==c&&b===c.updateQueue&&(b=a.updateQueue=Mb(b));return b}\nfunction Sb(a,b,c,d,e,f){switch(c.tag){case 1:return a=c.payload,\"function\"===typeof a?a.call(f,d,e):a;case 3:a.effectTag=a.effectTag&-1025|64;case 0:a=c.payload;e=\"function\"===typeof a?a.call(f,d,e):a;if(null===e||void 0===e)break;return aa({},d,e);case 2:E=!0}return d}\nfunction Tb(a,b,c,d,e){E=!1;if(!(0===b.expirationTime||b.expirationTime>e)){b=Rb(a,b);for(var f=b.baseState,g=null,k=0,h=b.firstUpdate,l=f;null!==h;){var p=h.expirationTime;if(p>e){if(null===g&&(g=h,f=l),0===k||k>p)k=p}else l=Sb(a,b,h,l,c,d),null!==h.callback&&(a.effectTag|=32,h.nextEffect=null,null===b.lastEffect?b.firstEffect=b.lastEffect=h:(b.lastEffect.nextEffect=h,b.lastEffect=h));h=h.next}p=null;for(h=b.firstCapturedUpdate;null!==h;){var u=h.expirationTime;if(u>e){if(null===p&&(p=h,null===g&&\n(f=l)),0===k||k>u)k=u}else l=Sb(a,b,h,l,c,d),null!==h.callback&&(a.effectTag|=32,h.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=h:(b.lastCapturedEffect.nextEffect=h,b.lastCapturedEffect=h));h=h.next}null===g&&(b.lastUpdate=null);null===p?b.lastCapturedUpdate=null:a.effectTag|=32;null===g&&null===p&&(f=l);b.baseState=f;b.firstUpdate=g;b.firstCapturedUpdate=p;b.expirationTime=k;a.memoizedState=l}}\nfunction Ub(a,b){\"function\"!==typeof a?n(\"191\",a):void 0;a.call(b)}\nfunction Vb(a,b,c){null!==b.firstCapturedUpdate&&(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);a=b.firstEffect;for(b.firstEffect=b.lastEffect=null;null!==a;){var d=a.callback;null!==d&&(a.callback=null,Ub(d,c));a=a.nextEffect}a=b.firstCapturedEffect;for(b.firstCapturedEffect=b.lastCapturedEffect=null;null!==a;)b=a.callback,null!==b&&(a.callback=null,Ub(b,c)),a=a.nextEffect}\nfunction Wb(a,b){return{value:a,source:b,stack:nb(b)}}var Xb=y(null),Yb=y(null),Zb=y(0);function $b(a){var b=a.type._context;Oa?(A(Zb,b._changedBits,a),A(Yb,b._currentValue,a),A(Xb,a,a),b._currentValue=a.pendingProps.value,b._changedBits=a.stateNode):(A(Zb,b._changedBits2,a),A(Yb,b._currentValue2,a),A(Xb,a,a),b._currentValue2=a.pendingProps.value,b._changedBits2=a.stateNode)}\nfunction ac(a){var b=Zb.current,c=Yb.current;z(Xb,a);z(Yb,a);z(Zb,a);a=a.type._context;Oa?(a._currentValue=c,a._changedBits=b):(a._currentValue2=c,a._changedBits2=b)}var bc={},F=y(bc),cc=y(bc),dc=y(bc);function G(a){a===bc?n(\"174\"):void 0;return a}function ec(a,b){A(dc,b,a);A(cc,a,a);A(F,bc,a);b=za(b);z(F,a);A(F,b,a)}function fc(a){z(F,a);z(cc,a);z(dc,a)}function gc(a){cc.current===a&&(z(F,a),z(cc,a))}\nfunction hc(a,b,c){var d=a.memoizedState;b=b(c,d);d=null===b||void 0===b?d:aa({},d,b);a.memoizedState=d;a=a.updateQueue;null!==a&&0===a.expirationTime&&(a.baseState=d)}\nvar kc={isMounted:function(a){return(a=a._reactInternalFiber)?2===ta(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=H();d=ic(d,a);var e=Nb(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);Pb(a,e,d);jc(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=H();d=ic(d,a);var e=Nb(d);e.tag=1;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);Pb(a,e,d);jc(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=H();c=ic(c,a);var d=Nb(c);d.tag=2;void 0!==\nb&&null!==b&&(d.callback=b);Pb(a,d,c);jc(a,c)}};function lc(a,b,c,d,e,f){var g=a.stateNode;a=a.type;return\"function\"===typeof g.shouldComponentUpdate?g.shouldComponentUpdate(c,e,f):a.prototype&&a.prototype.isPureReactComponent?!da(b,c)||!da(d,e):!0}\nfunction mc(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&&kc.enqueueReplaceState(b,b.state,null)}\nfunction nc(a,b){var c=a.type,d=a.stateNode,e=a.pendingProps,f=rb(a);d.props=e;d.state=a.memoizedState;d.refs=m;d.context=tb(a,f);f=a.updateQueue;null!==f&&(Tb(a,f,e,d,b),d.state=a.memoizedState);f=a.type.getDerivedStateFromProps;\"function\"===typeof f&&(hc(a,f,e),d.state=a.memoizedState);\"function\"===typeof c.getDerivedStateFromProps||\"function\"===typeof d.getSnapshotBeforeUpdate||\"function\"!==typeof d.UNSAFE_componentWillMount&&\"function\"!==typeof d.componentWillMount||(c=d.state,\"function\"===typeof d.componentWillMount&&\nd.componentWillMount(),\"function\"===typeof d.UNSAFE_componentWillMount&&d.UNSAFE_componentWillMount(),c!==d.state&&kc.enqueueReplaceState(d,d.state,null),f=a.updateQueue,null!==f&&(Tb(a,f,e,d,b),d.state=a.memoizedState));\"function\"===typeof d.componentDidMount&&(a.effectTag|=4)}var oc=Array.isArray;\nfunction pc(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&&(2!==c.tag?n(\"110\"):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===m?d.refs={}:d.refs;null===b?delete a[e]:a[e]=b};b._stringRef=e;return b}\"string\"!==typeof a?n(\"148\"):void 0;c._owner?void 0:n(\"254\",a)}return a}\nfunction qc(a,b){\"textarea\"!==a.type&&n(\"31\",\"[object Object]\"===Object.prototype.toString.call(b)?\"object with keys {\"+Object.keys(b).join(\", \")+\"}\":b,\"\")}\nfunction rc(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=Ab(b,a,c);b.index=0;b.sibling=null;return b}function f(b,c,d){b.index=d;if(!a)return c;d=b.alternate;if(null!==d)return d=d.index,dl?(p=q,q=null):p=q.sibling;var t=K(e,q,h[l],k);if(null===t){null===q&&(q=p);break}a&&q&&null===t.alternate&&b(e,q);g=f(t,g,l);\nnull===v?r=t:v.sibling=t;v=t;q=p}if(l===h.length)return c(e,q),r;if(null===q){for(;lv?(p=r,r=null):p=r.sibling;var Y=K(e,r,t.value,k);if(null===Y){r||(r=p);break}a&&r&&null===Y.alternate&&b(e,r);g=f(Y,g,v);null===l?q=Y:l.sibling=Y;l=Y;r=p}if(t.done)return c(e,r),q;if(null===r){for(;!t.done;v++,t=h.next())t=u(e,t.value,k),null!==t&&(g=f(t,g,v),null===l?q=t:l.sibling=t,l=t);return q}for(r=d(e,r);!t.done;v++,t=h.next())t=P(r,e,v,t.value,k),null!==t&&(a&&null!==t.alternate&&r.delete(null===t.key?v:t.key),g=f(t,g,v),null===l?q=t:l.sibling=t,l=t);a&&\nr.forEach(function(a){return b(e,a)});return q}return function(a,d,f,h){var k=\"object\"===typeof f&&null!==f&&f.type===x&&null===f.key;k&&(f=f.props.children);var l=\"object\"===typeof f&&null!==f;if(l)switch(f.$$typeof){case ha:a:{l=f.key;for(k=d;null!==k;){if(k.key===l)if(10===k.tag?f.type===x:k.type===f.type){c(a,k.sibling);d=e(k,f.type===x?f.props.children:f.props,h);d.ref=pc(a,k,f);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);k=k.sibling}f.type===x?(d=Cb(f.props.children,a.mode,h,f.key),\nd.return=a,a=d):(h=Bb(f,a.mode,h),h.ref=pc(a,d,f),h.return=a,a=h)}return g(a);case ia: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=Eb(f,a.mode,h);d.return=a;a=d}return g(a)}if(\"string\"===typeof f||\"number\"===typeof f)return f=\"\"+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h),d.return=a,a=d):(c(a,\nd),d=Db(f,a.mode,h),d.return=a,a=d),g(a);if(oc(f))return fa(a,d,f,h);if(ra(f))return Z(a,d,f,h);l&&qc(a,f);if(\"undefined\"===typeof f&&!k)switch(a.tag){case 2:case 1:h=a.type,n(\"152\",h.displayName||h.name||\"Component\")}return c(a,d)}}var sc=rc(!0),tc=rc(!1),I=null,uc=null,vc=!1;function wc(a,b){var c=new D(5,null,null,0);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 xc(a,b){switch(a.tag){case 5:return b=hb(b,a.type,a.pendingProps),null!==b?(a.stateNode=b,!0):!1;case 6:return b=ib(b,a.pendingProps),null!==b?(a.stateNode=b,!0):!1;default:return!1}}function yc(a){if(vc){var b=uc;if(b){var c=b;if(!xc(a,b)){b=jb(c);if(!b||!xc(a,b)){a.effectTag|=2;vc=!1;I=a;return}wc(I,c)}I=a;uc=kb(b)}else a.effectTag|=2,vc=!1,I=a}}function zc(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag;)a=a.return;I=a}\nfunction Ac(a){if(!Ra||a!==I)return!1;if(!vc)return zc(a),vc=!0,!1;var b=a.type;if(5!==a.tag||\"head\"!==b&&\"body\"!==b&&!Ia(b,a.memoizedProps))for(b=uc;b;)wc(a,b),b=jb(b);zc(a);uc=I?jb(a.stateNode):null;return!0}function Bc(){Ra&&(uc=I=null,vc=!1)}function J(a,b,c){Cc(a,b,c,b.expirationTime)}function Cc(a,b,c,d){b.child=null===a?tc(b,null,c,d):sc(b,a.child,c,d)}function Fc(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}\nfunction Gc(a,b,c,d,e){Fc(a,b);var f=0!==(b.effectTag&64);if(!c&&!f)return d&&zb(b,!1),L(a,b);c=b.stateNode;ea.current=b;var g=f?null:c.render();b.effectTag|=1;f&&(Cc(a,b,null,e),b.child=null);Cc(a,b,g,e);b.memoizedState=c.state;b.memoizedProps=c.props;d&&zb(b,!0);return b.child}function Hc(a){var b=a.stateNode;b.pendingContext?wb(a,b.pendingContext,b.pendingContext!==b.context):b.context&&wb(a,b.context,!1);ec(a,b.containerInfo)}\nfunction Ic(a,b,c,d){var e=a.child;null!==e&&(e.return=a);for(;null!==e;){switch(e.tag){case 12:var f=e.stateNode|0;if(e.type===b&&0!==(f&c)){for(f=e;null!==f;){var g=f.alternate;if(0===f.expirationTime||f.expirationTime>d)f.expirationTime=d,null!==g&&(0===g.expirationTime||g.expirationTime>d)&&(g.expirationTime=d);else if(null!==g&&(0===g.expirationTime||g.expirationTime>d))g.expirationTime=d;else break;f=f.return}f=null}else f=e.child;break;case 13:f=e.type===a.type?null:e.child;break;default:f=\ne.child}if(null!==f)f.return=e;else for(f=e;null!==f;){if(f===a){f=null;break}e=f.sibling;if(null!==e){e.return=f.return;f=e;break}f=f.return}e=f}}\nfunction Jc(a,b,c){var d=b.type._context,e=b.pendingProps,f=b.memoizedProps,g=!0;if(C.current)g=!1;else if(f===e)return b.stateNode=0,$b(b),L(a,b);var k=e.value;b.memoizedProps=e;if(null===f)k=1073741823;else if(f.value===e.value){if(f.children===e.children&&g)return b.stateNode=0,$b(b),L(a,b);k=0}else{var h=f.value;if(h===k&&(0!==h||1/h===1/k)||h!==h&&k!==k){if(f.children===e.children&&g)return b.stateNode=0,$b(b),L(a,b);k=0}else if(k=\"function\"===typeof d._calculateChangedBits?d._calculateChangedBits(h,\nk):1073741823,k|=0,0===k){if(f.children===e.children&&g)return b.stateNode=0,$b(b),L(a,b)}else Ic(b,d,k,c)}b.stateNode=k;$b(b);J(a,b,e.children);return b.child}function L(a,b){null!==a&&b.child!==a.child?n(\"153\"):void 0;if(null!==b.child){a=b.child;var c=Ab(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=Ab(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}\nfunction Kc(a,b,c){if(0===b.expirationTime||b.expirationTime>c){switch(b.tag){case 3:Hc(b);break;case 2:yb(b);break;case 4:ec(b,b.stateNode.containerInfo);break;case 13:$b(b)}return null}switch(b.tag){case 0:null!==a?n(\"155\"):void 0;var d=b.type,e=b.pendingProps,f=rb(b);f=tb(b,f);d=d(e,f);b.effectTag|=1;\"object\"===typeof d&&null!==d&&\"function\"===typeof d.render&&void 0===d.$$typeof?(f=b.type,b.tag=2,b.memoizedState=null!==d.state&&void 0!==d.state?d.state:null,f=f.getDerivedStateFromProps,\"function\"===\ntypeof f&&hc(b,f,e),e=yb(b),d.updater=kc,b.stateNode=d,d._reactInternalFiber=b,nc(b,c),a=Gc(a,b,!0,e,c)):(b.tag=1,J(a,b,d),b.memoizedProps=e,a=b.child);return a;case 1:return e=b.type,c=b.pendingProps,C.current||b.memoizedProps!==c?(d=rb(b),d=tb(b,d),e=e(c,d),b.effectTag|=1,J(a,b,e),b.memoizedProps=c,a=b.child):a=L(a,b),a;case 2:e=yb(b);if(null===a)if(null===b.stateNode){var g=b.pendingProps,k=b.type;d=rb(b);var h=2===b.tag&&null!=b.type.contextTypes;f=h?tb(b,d):m;g=new k(g,f);b.memoizedState=null!==\ng.state&&void 0!==g.state?g.state:null;g.updater=kc;b.stateNode=g;g._reactInternalFiber=b;h&&(h=b.stateNode,h.__reactInternalMemoizedUnmaskedChildContext=d,h.__reactInternalMemoizedMaskedChildContext=f);nc(b,c);d=!0}else{k=b.type;d=b.stateNode;h=b.memoizedProps;f=b.pendingProps;d.props=h;var l=d.context;g=rb(b);g=tb(b,g);var p=k.getDerivedStateFromProps;(k=\"function\"===typeof p||\"function\"===typeof d.getSnapshotBeforeUpdate)||\"function\"!==typeof d.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof d.componentWillReceiveProps||\n(h!==f||l!==g)&&mc(b,d,f,g);E=!1;var u=b.memoizedState;l=d.state=u;var K=b.updateQueue;null!==K&&(Tb(b,K,f,d,c),l=b.memoizedState);h!==f||u!==l||C.current||E?(\"function\"===typeof p&&(hc(b,p,f),l=b.memoizedState),(h=E||lc(b,h,f,u,l,g))?(k||\"function\"!==typeof d.UNSAFE_componentWillMount&&\"function\"!==typeof d.componentWillMount||(\"function\"===typeof d.componentWillMount&&d.componentWillMount(),\"function\"===typeof d.UNSAFE_componentWillMount&&d.UNSAFE_componentWillMount()),\"function\"===typeof d.componentDidMount&&\n(b.effectTag|=4)):(\"function\"===typeof d.componentDidMount&&(b.effectTag|=4),b.memoizedProps=f,b.memoizedState=l),d.props=f,d.state=l,d.context=g,d=h):(\"function\"===typeof d.componentDidMount&&(b.effectTag|=4),d=!1)}else k=b.type,d=b.stateNode,f=b.memoizedProps,h=b.pendingProps,d.props=f,l=d.context,g=rb(b),g=tb(b,g),p=k.getDerivedStateFromProps,(k=\"function\"===typeof p||\"function\"===typeof d.getSnapshotBeforeUpdate)||\"function\"!==typeof d.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof d.componentWillReceiveProps||\n(f!==h||l!==g)&&mc(b,d,h,g),E=!1,l=b.memoizedState,u=d.state=l,K=b.updateQueue,null!==K&&(Tb(b,K,h,d,c),u=b.memoizedState),f!==h||l!==u||C.current||E?(\"function\"===typeof p&&(hc(b,p,h),u=b.memoizedState),(p=E||lc(b,f,h,l,u,g))?(k||\"function\"!==typeof d.UNSAFE_componentWillUpdate&&\"function\"!==typeof d.componentWillUpdate||(\"function\"===typeof d.componentWillUpdate&&d.componentWillUpdate(h,u,g),\"function\"===typeof d.UNSAFE_componentWillUpdate&&d.UNSAFE_componentWillUpdate(h,u,g)),\"function\"===typeof d.componentDidUpdate&&\n(b.effectTag|=4),\"function\"===typeof d.getSnapshotBeforeUpdate&&(b.effectTag|=256)):(\"function\"!==typeof d.componentDidUpdate||f===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof d.getSnapshotBeforeUpdate||f===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),b.memoizedProps=h,b.memoizedState=u),d.props=h,d.state=u,d.context=g,d=p):(\"function\"!==typeof d.componentDidUpdate||f===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof d.getSnapshotBeforeUpdate||\nf===a.memoizedProps&&l===a.memoizedState||(b.effectTag|=256),d=!1);return Gc(a,b,d,e,c);case 3:Hc(b);e=b.updateQueue;if(null!==e)if(d=b.memoizedState,d=null!==d?d.element:null,Tb(b,e,b.pendingProps,null,c),e=b.memoizedState.element,e===d)Bc(),a=L(a,b);else{d=b.stateNode;if(d=(null===a||null===a.child)&&d.hydrate)Ra?(uc=kb(b.stateNode.containerInfo),I=b,d=vc=!0):d=!1;d?(b.effectTag|=2,b.child=tc(b,null,e,c)):(Bc(),J(a,b,e));a=b.child}else Bc(),a=L(a,b);return a;case 5:a:{d=G(dc.current);e=G(F.current);\nd=Aa(e,b.type,d);e!==d&&(A(cc,b,b),A(F,d,b));null===a&&yc(b);e=b.type;h=b.memoizedProps;d=b.pendingProps;f=null!==a?a.memoizedProps:null;if(!C.current&&h===d){if(h=b.mode&1&&Ja(e,d))b.expirationTime=1073741823;if(!h||1073741823!==c){a=L(a,b);break a}}h=d.children;Ia(e,d)?h=null:f&&Ia(e,f)&&(b.effectTag|=16);Fc(a,b);1073741823!==c&&b.mode&1&&Ja(e,d)?(b.expirationTime=1073741823,b.memoizedProps=d,a=null):(J(a,b,h),b.memoizedProps=d,a=b.child)}return a;case 6:return null===a&&yc(b),b.memoizedProps=b.pendingProps,\nnull;case 16:return null;case 4:return ec(b,b.stateNode.containerInfo),e=b.pendingProps,C.current||b.memoizedProps!==e?(null===a?b.child=sc(b,null,e,c):J(a,b,e),b.memoizedProps=e,a=b.child):a=L(a,b),a;case 14:return e=b.type.render,c=b.pendingProps,d=b.ref,C.current||b.memoizedProps!==c||d!==(null!==a?a.ref:null)?(e=e(c,d),J(a,b,e),b.memoizedProps=c,a=b.child):a=L(a,b),a;case 10:return c=b.pendingProps,C.current||b.memoizedProps!==c?(J(a,b,c),b.memoizedProps=c,a=b.child):a=L(a,b),a;case 11:return c=\nb.pendingProps.children,C.current||null!==c&&b.memoizedProps!==c?(J(a,b,c),b.memoizedProps=c,a=b.child):a=L(a,b),a;case 15:return c=b.pendingProps,b.memoizedProps===c?a=L(a,b):(J(a,b,c.children),b.memoizedProps=c,a=b.child),a;case 13:return Jc(a,b,c);case 12:a:if(d=b.type,f=b.pendingProps,h=b.memoizedProps,e=Oa?d._currentValue:d._currentValue2,g=Oa?d._changedBits:d._changedBits2,C.current||0!==g||h!==f){b.memoizedProps=f;k=f.unstable_observedBits;if(void 0===k||null===k)k=1073741823;b.stateNode=k;\nif(0!==(g&k))Ic(b,d,g,c);else if(h===f){a=L(a,b);break a}c=f.children;c=c(e);b.effectTag|=1;J(a,b,c);a=b.child}else a=L(a,b);return a;default:n(\"156\")}}function M(a){a.effectTag|=4}function Lc(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}}var Mc=void 0,Nc=void 0,Oc=void 0;\nPa?(Mc=function(){},Nc=function(a,b,c){(b.updateQueue=c)&&M(b)},Oc=function(a,b,c,d){c!==d&&M(b)}):Qa?(Mc=function(a){var b=a.stateNode;if(null!==a.firstEffect){var c=b.containerInfo,d=db(c);a:for(var e=a.child;null!==e;){if(5===e.tag||6===e.tag)eb(d,e.stateNode);else if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break a;for(;null===e.sibling;){if(null===e.return||e.return===a)break a;e=e.return}e.sibling.return=e.return;e=e.sibling}b.pendingChildren=d;M(a);fb(c,d)}},\nNc=function(a,b,c,d,e,f,g,k){var h=null===b.firstEffect;a=a.stateNode;h&&null===c?b.stateNode=a:(c=bb(a,c,d,e,f,b,h,b.stateNode),Ga(c,d,f,g,k)&&M(b),b.stateNode=c,h?M(b):Lc(c,b))},Oc=function(a,b,c,d){c!==d&&(a=G(dc.current),c=G(F.current),b.stateNode=Ka(d,a,c,b),M(b))}):(Mc=function(){},Nc=function(){},Oc=function(){});\nfunction Pc(a,b){var c=b.pendingProps;switch(b.tag){case 1:return null;case 2:return ub(b),null;case 3:fc(b);vb(b);c=b.stateNode;c.pendingContext&&(c.context=c.pendingContext,c.pendingContext=null);if(null===a||null===a.child)Ac(b),b.effectTag&=-3;Mc(b);return null;case 5:gc(b);var d=G(dc.current),e=b.type;if(null!==a&&null!=b.stateNode){var f=a.memoizedProps,g=b.stateNode,k=G(F.current);g=Ha(g,e,f,c,d,k);Nc(a,b,g,e,f,c,d,k);a.ref!==b.ref&&(b.effectTag|=128)}else{if(!c)return null===b.stateNode?n(\"166\"):\nvoid 0,null;a=G(F.current);Ac(b)?(Ra||n(\"175\"),c=lb(b.stateNode,b.type,b.memoizedProps,d,a,b),b.updateQueue=c,null!==c&&M(b)):(f=Ea(e,c,d,a,b),Lc(f,b),Ga(f,e,c,d,a)&&M(b),b.stateNode=f);null!==b.ref&&(b.effectTag|=128)}return null;case 6:if(a&&null!=b.stateNode)Oc(a,b,a.memoizedProps,c);else{if(\"string\"!==typeof c)return null===b.stateNode?n(\"166\"):void 0,null;d=G(dc.current);e=G(F.current);Ac(b)?(Ra||n(\"176\"),mb(b.stateNode,b.memoizedProps,b)&&M(b)):b.stateNode=Ka(c,d,e,b)}return null;case 14:return null;\ncase 16:return null;case 10:return null;case 11:return null;case 15:return null;case 4:return fc(b),Mc(b),null;case 13:return ac(b),null;case 12:return null;case 0:n(\"167\");default:n(\"156\")}}function Qc(a,b){var c=b.source;null===b.stack&&null!==c&&nb(c);null!==c&&sa(c);b=b.value;null!==a&&2===a.tag&&sa(a);try{b&&b.suppressReactErrorLogging||console.error(b)}catch(d){d&&d.suppressReactErrorLogging||console.error(d)}}\nfunction Rc(a){var b=a.ref;if(null!==b)if(\"function\"===typeof b)try{b(null)}catch(c){Sc(a,c)}else b.current=null}function Tc(a){\"function\"===typeof Kb&&Kb(a);switch(a.tag){case 2:Rc(a);var b=a.stateNode;if(\"function\"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(c){Sc(a,c)}break;case 5:Rc(a);break;case 4:Pa?Uc(a):Qa&&Qa&&(a=a.stateNode.containerInfo,b=db(a),gb(a,b))}}\nfunction Vc(a){for(var b=a;;)if(Tc(b),null===b.child||Pa&&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 Wc(a){return 5===a.tag||3===a.tag||4===a.tag}\nfunction Xc(a){if(Pa){a:{for(var b=a.return;null!==b;){if(Wc(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&&(ab(b),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Wc(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?Ya(b,e.stateNode,c):Xa(b,e.stateNode,c):d?Ta(b,e.stateNode):Sa(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 Uc(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)Vc(b),e?$a(d,b.stateNode):Za(d,b.stateNode);else if(4===b.tag?d=b.stateNode.containerInfo:Tc(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===\na)return;b=b.return;4===b.tag&&(c=!1)}b.sibling.return=b.return;b=b.sibling}}\nfunction Yc(a,b){if(Pa)switch(b.tag){case 2: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&&Wa(c,f,e,a,d,b)}break;case 6:null===b.stateNode?n(\"162\"):void 0;c=b.memoizedProps;Ua(b.stateNode,null!==a?a.memoizedProps:c,c);break;case 3:break;case 15:break;case 16:break;default:n(\"163\")}else if(Qa)switch(b.tag){case 2:break;case 5:break;case 6:break;case 3:case 4:b=b.stateNode;gb(b.containerInfo,b.pendingChildren);\nbreak;default:n(\"163\")}}function Zc(a,b,c){c=Nb(c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){$c(d);Qc(a,b)};return c}function ad(a,b,c){c=Nb(c);c.tag=3;var d=a.stateNode;null!==d&&\"function\"===typeof d.componentDidCatch&&(c.callback=function(){null===bd?bd=new Set([this]):bd.add(this);var c=b.value,d=b.stack;Qc(a,b);this.componentDidCatch(c,{componentStack:null!==d?d:\"\"})});return c}\nfunction cd(a,b,c,d,e,f){c.effectTag|=512;c.firstEffect=c.lastEffect=null;d=Wb(d,c);a=b;do{switch(a.tag){case 3:a.effectTag|=1024;d=Zc(a,d,f);Qb(a,d,f);return;case 2:if(b=d,c=a.stateNode,0===(a.effectTag&64)&&null!==c&&\"function\"===typeof c.componentDidCatch&&(null===bd||!bd.has(c))){a.effectTag|=1024;d=ad(a,b,f);Qb(a,d,f);return}}a=a.return}while(null!==a)}\nfunction dd(a){switch(a.tag){case 2:ub(a);var b=a.effectTag;return b&1024?(a.effectTag=b&-1025|64,a):null;case 3:return fc(a),vb(a),b=a.effectTag,b&1024?(a.effectTag=b&-1025|64,a):null;case 5:return gc(a),null;case 16:return b=a.effectTag,b&1024?(a.effectTag=b&-1025|64,a):null;case 4:return fc(a),null;case 13:return ac(a),null;default:return null}}var ed=Na(),fd=2,gd=ed,hd=0,id=0,N=!1,O=null,jd=null,Q=0,kd=-1,ld=!1,R=null,md=!1,nd=!1,bd=null;\nfunction od(){if(null!==O)for(var a=O.return;null!==a;){var b=a;switch(b.tag){case 2:ub(b);break;case 3:fc(b);vb(b);break;case 5:gc(b);break;case 4:fc(b);break;case 13:ac(b)}a=a.return}jd=null;Q=0;kd=-1;ld=!1;O=null;nd=!1}\nfunction pd(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&512)){b=Pc(b,a,Q);var e=a;if(1073741823===Q||1073741823!==e.expirationTime){var f=0;switch(e.tag){case 3:case 2:var g=e.updateQueue;null!==g&&(f=g.expirationTime)}for(g=e.child;null!==g;)0!==g.expirationTime&&(0===f||f>g.expirationTime)&&(f=g.expirationTime),g=g.sibling;e.expirationTime=f}if(null!==b)return b;null!==c&&0===(c.effectTag&512)&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&\n(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1S)&&(S=a);return a}\nfunction jc(a,b){for(;null!==a;){if(0===a.expirationTime||a.expirationTime>b)a.expirationTime=b;null!==a.alternate&&(0===a.alternate.expirationTime||a.alternate.expirationTime>b)&&(a.alternate.expirationTime=b);if(null===a.return)if(3===a.tag){var c=a.stateNode;!N&&0!==Q&&bxd&&n(\"185\")}else break;a=a.return}}function H(){gd=Na()-ed;return fd=(gd/10|0)+2}function yd(a,b,c,d,e){var f=id;id=1;try{return a(b,c,d,e)}finally{id=f}}\nvar zd=null,T=null,Ad=0,Bd=void 0,U=!1,V=null,W=0,S=0,Cd=!1,Dd=!1,Ed=null,Fd=null,X=!1,Gd=!1,vd=!1,Hd=null,xd=1E3,wd=0,Id=1;function Jd(a){if(0!==Ad){if(a>Ad)return;null!==Bd&&Ma(Bd)}var b=Na()-ed;Ad=a;Bd=La(Nd,{timeout:10*(a-2)-b})}\nfunction td(a,b){if(null===a.nextScheduledRoot)a.remainingExpirationTime=b,null===T?(zd=T=a,a.nextScheduledRoot=a):(T=T.nextScheduledRoot=a,T.nextScheduledRoot=zd);else{var c=a.remainingExpirationTime;if(0===c||b=W)&&(!Cd||H()>=W);)H(),Od(V,W,!Cd),Qd();else for(;null!==V&&0!==W&&(0===a||a>=W);)Od(V,W,!1),Qd();null!==Fd&&(Ad=0,Bd=null);0!==W&&Jd(W);Fd=null;Cd=!1;Sd()}\nfunction Sd(){wd=0;if(null!==Hd){var a=Hd;Hd=null;for(var b=0;bId?!1:Cd=!0}function $c(a){null===V?n(\"246\"):void 0;V.remainingExpirationTime=0;Dd||(Dd=!0,Ed=a)}function ud(a){null===V?n(\"246\"):void 0;V.remainingExpirationTime=a}\nfunction Ud(a,b,c,d,e){var f=b.current;if(c){c=c._reactInternalFiber;var g;b:{2===ta(c)&&2===c.tag?void 0:n(\"170\");for(g=c;3!==g.tag;){if(sb(g)){g=g.stateNode.__reactInternalMemoizedMergedChildContext;break b}(g=g.return)?void 0:n(\"171\")}g=g.stateNode.context}c=sb(c)?xb(c,g):g}else c=m;null===b.context?b.context=c:b.pendingContext=c;b=e;e=Nb(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);Pb(f,e,d);jc(f,d);return d}\nvar Vd={updateContainerAtExpirationTime:Ud,createContainer:function(a,b,c){b=new D(3,null,null,b?3:0);a={current:b,containerInfo:a,pendingChildren:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,pendingCommitExpirationTime:0,finishedWork:null,context:null,pendingContext:null,hydrate:c,remainingExpirationTime:0,firstBatch:null,nextScheduledRoot:null};return b.stateNode=a},updateContainer:function(a,b,c,d){var e=b.current,f=H();e=ic(f,\ne);return Ud(a,b,c,e,d)},flushRoot:function(a,b){U?n(\"253\"):void 0;V=a;W=b;Od(a,b,!1);Pd();Sd()},requestWork:td,computeUniqueAsyncExpiration:function(){var a=2+25*(((H()-2+500)/25|0)+1);a<=hd&&(a=hd+1);return hd=a},batchedUpdates:function(a,b){var c=X;X=!0;try{return a(b)}finally{(X=c)||U||Pd()}},unbatchedUpdates:function(a,b){if(X&&!Gd){Gd=!0;try{return a(b)}finally{Gd=!1}}return a(b)},deferredUpdates:function(a){var b=id;id=2+25*(((H()-2+500)/25|0)+1);try{return a()}finally{id=b}},syncUpdates:yd,\ninteractiveUpdates:function(a,b,c){if(vd)return a(b,c);X||U||0===S||(Rd(S,!1,null),S=0);var d=vd,e=X;X=vd=!0;try{return a(b,c)}finally{vd=d,(X=e)||U||Pd()}},flushInteractiveUpdates:function(){U||0===S||(Rd(S,!1,null),S=0)},flushControlled:function(a){var b=X;X=!0;try{yd(a)}finally{(X=b)||U||Rd(1,!1,null)}},flushSync:function(a,b){U?n(\"187\"):void 0;var c=X;X=!0;try{return yd(a,b)}finally{X=c,Pd()}},getPublicRootInstance:function(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return ya(a.child.stateNode);\ndefault:return a.child.stateNode}},findHostInstance:function(a){var b=a._reactInternalFiber;void 0===b&&(\"function\"===typeof a.render?n(\"188\"):n(\"268\",Object.keys(a)));a=wa(b);return null===a?null:a.stateNode},findHostInstanceWithNoPortals:function(a){a=xa(a);return null===a?null:a.stateNode},injectIntoDevTools:function(a){var b=a.findFiberByHostInstance;return Ib(aa({},a,{findHostInstanceByFiber:function(a){a=wa(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):\nnull}}))}};module.exports=Vd.default?Vd.default:Vd;\n\n var $$$renderer = module.exports;\n module.exports = $$$reconciler;\n return $$$renderer;\n};\n","'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-reconciler.production.min.js');\n} else {\n module.exports = require('./cjs/react-reconciler.development.js');\n}\n","/*\n * Konva JavaScript Framework v2.1.7\n * http://konvajs.github.io/\n * Licensed under the MIT\n * Date: Tue Jul 03 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.1.7',\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 // 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 !== undefined) {\n this.ids[id] = node;\n }\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 (typeof exports === 'object') {\n module.exports = Konva;\n } else if (typeof define === 'function' && define.amd) {\n // AMD. Register as an anonymous module.\n define(function() {\n return Konva;\n });\n }\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 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 Object.prototype.toString.call(obj) === OBJECT_NUMBER;\n },\n _isString: function(obj) {\n return Object.prototype.toString.call(obj) === OBJECT_STRING;\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 /**\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 this.setTransform(1, 0, 0, 1, 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 var method = SET + Konva.Util._capitalize(attr);\n\n constructor.prototype[method] = function(val) {\n if (validator) {\n val = validator.call(this, val);\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 constructor.prototype[oldMethodName] = function() {\n method.apply(this, arguments);\n Konva.Util.error(\n oldMethodName +\n ' method is deprecated and will be removed soon. Use ' +\n newMethodName +\n ' instead'\n );\n };\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 };\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 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 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 rect = this.getClientRect({\n skipTransform: true,\n relativeTo: this.getParent()\n }),\n width = conf.width || rect.width,\n height = conf.height || rect.height,\n pixelRatio = conf.pixelRatio,\n x = conf.x || rect.x,\n y = conf.y || rect.y,\n offset = conf.offset || 0,\n drawBorder = conf.drawBorder || false;\n\n if (!width || !height) {\n // make throw async, because we don't need to stop funcion\n setTimeout(function() {\n Konva.Util.throw(\n 'Width or height of caching configuration equals 0. Caching is ignored.'\n );\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 * @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 {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 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() {\n var visible = this.getVisible(),\n parent = this.getParent();\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();\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(canvas) {\n var layer = this.getLayer();\n return (\n (canvas && canvas.isCache) ||\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 true;\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 = 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 transformsEnabled,\n trans;\n\n // start with stage and traverse downwards to self\n this._eachAncestorReverse(function(node) {\n transformsEnabled = node.transformsEnabled();\n trans = node.getTransform();\n\n if (transformsEnabled === 'all') {\n at.multiply(trans);\n } else if (transformsEnabled === 'position') {\n at.translate(node.x(), node.y());\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 stage = this.getStage(),\n x = config.x || 0,\n y = config.y || 0,\n pixelRatio = config.pixelRatio || 1,\n canvas = new Konva.SceneCanvas({\n width:\n config.width || this.getWidth() || (stage ? stage.getWidth() : 0),\n height:\n config.height ||\n this.getHeight() ||\n (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. 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 return this._toKonvaCanvas(config).toDataURL(mimeType, quality);\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 Konva.Util._getImage(this.toDataURL(config), function(img) {\n config.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(Konva.Node, 'x', 0);\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(Konva.Node, 'y', 0);\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 );\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(Konva.Node, 'opacity', 1);\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(Konva.Node, 'rotation', 0);\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(Konva.Node, 'scaleX', 1);\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(Konva.Node, 'scaleY', 1);\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(Konva.Node, 'skewX', 0);\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(Konva.Node, 'skewY', 0);\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(Konva.Node, 'offsetX', 0);\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(Konva.Node, 'offsetY', 0);\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(Konva.Node, 'dragDistance');\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(Konva.Node, 'width', 0);\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(Konva.Node, 'height', 0);\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');\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(Konva.Node, 'preventDefault', true);\n\n Konva.Factory.addGetterSetter(Konva.Node, 'filters', undefined, function(\n val\n ) {\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');\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(Konva.Node, 'transformsEnabled', 'all');\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\n Konva.Factory.afterSetFilter\n );\n /**\n * get/set hsl luminance. Use with {@link Konva.Filters.HSL} filter.\n * @name value\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(200);\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\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 null,\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 \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 null,\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 null,\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 null,\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 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 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({ relativeTo: that });\n\n // skip invisible children (like empty groups)\n // or don't skip... hmmm...\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.getVisible()) {\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(Konva.Container, 'clipX');\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(Konva.Container, 'clipY');\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(Konva.Container, 'clipWidth');\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(Konva.Container, 'clipHeight');\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 var relativeTo = attrs.relativeTo;\n\n var fillRect = this.getSelfRect();\n\n var strokeWidth = (this.hasStroke() && this.strokeWidth()) || 0;\n var fillAndStrokeWidth = fillRect.width + strokeWidth;\n var fillAndStrokeHeight = fillRect.height + strokeWidth;\n\n var shadowOffsetX = this.hasShadow() ? this.shadowOffsetX() : 0;\n var shadowOffsetY = this.hasShadow() ? this.shadowOffsetY() : 0;\n\n var preWidth = fillAndStrokeWidth + Math.abs(shadowOffsetX);\n var preHeight = fillAndStrokeHeight + Math.abs(shadowOffsetY);\n\n var blurRadius = (this.hasShadow() && 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(Konva.Shape, 'stroke');\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(Konva.Shape, 'strokeWidth', 2);\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(Konva.Shape, 'strokeHitEnabled', true);\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(Konva.Shape, 'perfectDrawEnabled', true);\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(Konva.Shape, 'shadowForStrokeEnabled', true);\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(Konva.Shape, 'dashOffset', 0);\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(Konva.Shape, 'shadowColor');\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(Konva.Shape, 'shadowBlur');\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(Konva.Shape, 'shadowOpacity');\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(Konva.Shape, 'shadowOffsetX', 0);\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(Konva.Shape, 'shadowOffsetY', 0);\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(Konva.Shape, 'fill');\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(Konva.Shape, 'fillPatternX', 0);\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(Konva.Shape, 'fillPatternY', 0);\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(Konva.Shape, 'fillPatternOffsetX', 0);\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(Konva.Shape, 'fillPatternOffsetY', 0);\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(Konva.Shape, 'fillPatternScaleX', 1);\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(Konva.Shape, 'fillPatternScaleY', 1);\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 toDataURL: function(config) {\n config = config || {};\n\n var mimeType = config.mimeType || null,\n quality = config.quality || null,\n 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 var width = layer.getCanvas().getWidth();\n var height = layer.getCanvas().getHeight();\n var ratio = layer.getCanvas().getPixelRatio();\n _context.drawImage(\n layer.getCanvas()._canvas,\n 0,\n 0,\n width / ratio,\n height / ratio\n );\n });\n var src = canvas.toDataURL(mimeType, quality);\n\n if (config.callback) {\n config.callback(src);\n }\n\n return src;\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\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 this._fire(CLICK, { evt: evt, target: this, currentTarget: this });\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 this._fire(TAP, { evt: evt, target: this, currentTarget: this });\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.className = KONVA_CONTENT;\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 /**\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 * @return {Konva.Layer} this\n * @memberof Konva.Base.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 * @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 = 1;\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\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 for (n = 0; n < len; n++) {\n diff.push(end[n] - start[n]);\n }\n } else if (colorAttrs.indexOf(key) !== -1) {\n start = Konva.Util.colorToRGBA(start);\n var 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 for (n = 0; n < len; n++) {\n newVal.push((start[n] || 0) + diff[n] * i);\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 node._setDragPosition(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 }\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(Konva.Rect, 'cornerRadius', 0);\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(Konva.Circle, 'radius', 0);\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(Konva.Ellipse, 'radiusX', 0);\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(Konva.Ellipse, 'radiusY', 0);\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(Konva.Ring, 'innerRadius', 0);\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(Konva.Ring, 'outerRadius', 0);\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(Konva.Wedge, 'radius', 0);\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(Konva.Wedge, 'angle', 0);\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(Konva.Arc, 'innerRadius', 0);\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(Konva.Arc, 'outerRadius', 0);\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(Konva.Arc, 'angle', 0);\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(Konva.Image, 'cropX', 0);\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(Konva.Image, 'cropY', 0);\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(Konva.Image, 'cropWidth', 0);\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(Konva.Image, 'cropHeight', 0);\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 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 '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 {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 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 if (padding) {\n context.translate(padding, 0);\n context.translate(0, padding + lineHeightPx / 2);\n } else {\n context.translate(0, 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 text height\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 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 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 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 // 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(Konva.Text, 'fontSize', 12);\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(Konva.Text, 'padding', 0);\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, 'lineHeight', 1);\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(Konva.Text, 'letterSpacing', 0);\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(Konva.Line, 'tension', 0);\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(Konva.Line, 'points', []);\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 {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 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.Animation.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(Konva.Sprite, 'frameIndex', 0);\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(Konva.Sprite, 'frameRate', 17);\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.on('dataChange.konva', function() {\n that.dataArray = Konva.Path.parsePathData(this.getData());\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 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.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 }\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 {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 * getKerning: 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 this.getKerning = config && config.getKerning;\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',\n that._setTextData\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\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 (this.getKerning) {\n try {\n // getKerning is a user provided getter. Make sure it never breaks our logic\n kern =\n this.getKerning(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(Konva.TextPath, 'fontSize', 12);\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(Konva.TextPath, 'letterSpacing', 0);\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.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(Konva.RegularPolygon, 'radius', 0);\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(Konva.RegularPolygon, 'sides', 0);\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(Konva.Star, 'numPoints', 5);\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(Konva.Star, 'innerRadius', 0);\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(Konva.Star, 'outerRadius', 0);\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(Konva.Tag, 'pointerWidth', 0);\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(Konva.Tag, 'pointerHeight', 0);\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(Konva.Tag, 'cornerRadius', 0);\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(Konva.Arrow, 'pointerLength', 10);\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(Konva.Arrow, 'pointerWidth', 10);\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 'rotateHandlerOffsetChange'\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) {\n if (anchorName === 'rotater') {\n return 'crosshair';\n }\n\n rad += Konva.Util._degToRad(ANGLES[anchorName] || 0);\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.\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.rotateHandlerOffset] Default is 50\n * @param {Number} [config.padding] Default is 0\n * @param {Number} [config.lineEnabled] Should we draw border? Default is true\n * @param {Boolean} [config.keepRatio] Should we keep ratio when we are moving edges? Default is true\n * @param {Array} [config.enabledHandlers] 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 * rotateHandlerOffset: 60,\n * enabledHandlers: ['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 RESIZERS_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 var warningShowed = false;\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 (!warningShowed) {\n Konva.Util.warn(\n 'Konva.Transformer is currently experimental and may have bugs. Please report any issues to GitHub repo.'\n );\n warningShowed = true;\n }\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({ skipTransform: true });\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 RESIZERS_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,\n width: 10,\n height: 10,\n offsetX: 5,\n offsetY: 5,\n dragDistance: 0\n });\n var self = this;\n anchor.on('mousedown touchstart', function(e) {\n self._handleMouseDown(e);\n });\n\n // add hover styling\n anchor.on('mouseenter', function() {\n var layer = this.getLayer();\n var tr = this.getParent();\n\n // TODO: I guess there are some ways to simplify that calculations\n // the basic idea is to find \"angle\" of handler\n var rad = Konva.getAngle(tr.rotation());\n\n // var cdx = tr.getWidth() / 2;\n // var cdy = tr.getHeight() / 2;\n\n // var parentPos = tr.getAbsolutePosition(tr.getParent());\n // var center = {\n // x: parentPos.x + (cdx * Math.cos(rad) + cdy * Math.sin(-rad)),\n // y: parentPos.y + (cdy * Math.cos(rad) + cdx * Math.sin(rad))\n // };\n\n // var pos = this.getAbsolutePosition(tr.getParent());\n\n // var dx = -pos.x + center.x;\n // var dy = -pos.y + center.y;\n\n // var angle = -Math.atan2(-dy, dx) - Math.PI / 2;\n\n var cursor = getCursor(name, rad);\n anchor.getStage().content.style.cursor = cursor;\n layer.batchDraw();\n });\n anchor.on('mouseout', function() {\n var layer = this.getLayer();\n if (!layer) {\n return;\n }\n anchor.getStage().content.style.cursor = '';\n layer.batchDraw();\n });\n this.add(anchor);\n },\n\n _createBack: function() {\n var back = new Konva.Shape({\n stroke: 'rgb(0, 161, 255)',\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.rotateHandlerOffset() * 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();\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');\n this.getNode().fire('transformstart');\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 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 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 } 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 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 this._fitNodeInto({\n x: x + this.offsetX(),\n y: y + this.offsetY(),\n width: width,\n height: height\n });\n },\n\n _handleMouseUp: function() {\n this._removeEvents();\n },\n\n _removeEvents: function() {\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');\n this.getNode().fire('transformend');\n }\n },\n\n _fitNodeInto: function(newAttrs) {\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({ skipTransform: true });\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');\n this.getNode().fire('transform');\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 width = attrs.width;\n var height = attrs.height;\n\n var enabledHandlers = this.enabledHandlers();\n var resizeEnabled = this.resizeEnabled();\n var padding = this.getPadding();\n\n this.findOne('.top-left').setAttrs({\n x: -padding,\n y: -padding,\n visible: resizeEnabled && enabledHandlers.indexOf('top-left') >= 0\n });\n this.findOne('.top-center').setAttrs({\n x: width / 2,\n y: -padding,\n visible: resizeEnabled && enabledHandlers.indexOf('top-center') >= 0\n });\n this.findOne('.top-right').setAttrs({\n x: width + padding,\n y: -padding,\n visible: resizeEnabled && enabledHandlers.indexOf('top-right') >= 0\n });\n this.findOne('.middle-left').setAttrs({\n x: -padding,\n y: height / 2,\n visible: resizeEnabled && enabledHandlers.indexOf('middle-left') >= 0\n });\n this.findOne('.middle-right').setAttrs({\n x: width + padding,\n y: height / 2,\n visible: resizeEnabled && enabledHandlers.indexOf('middle-right') >= 0\n });\n this.findOne('.bottom-left').setAttrs({\n x: -padding,\n y: height + padding,\n visible: resizeEnabled && enabledHandlers.indexOf('bottom-left') >= 0\n });\n this.findOne('.bottom-center').setAttrs({\n x: width / 2,\n y: height + padding,\n visible: resizeEnabled && enabledHandlers.indexOf('bottom-center') >= 0\n });\n this.findOne('.bottom-right').setAttrs({\n x: width + padding,\n y: height + padding,\n visible: resizeEnabled && enabledHandlers.indexOf('bottom-right') >= 0\n });\n\n this.findOne('.rotater').setAttrs({\n x: width / 2,\n y: -this.rotateHandlerOffset() * Konva.Util._sign(height),\n visible: this.rotateEnabled()\n });\n\n this.findOne('.back').setAttrs({\n width: width,\n height: height,\n visible: this.lineEnabled()\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 }\n },\n destroy: function() {\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('enabledHandlers value should be an array');\n }\n if (val instanceof Array) {\n val.forEach(function(name) {\n if (RESIZERS_NAMES.indexOf(name) === -1) {\n Konva.Util.warn(\n 'Unknown resizer name: ' +\n name +\n '. Available names are: ' +\n RESIZERS_NAMES.join(', ')\n );\n }\n });\n }\n return val || [];\n }\n\n /**\n * get/set enabled handlers\n * @name enabledHandlers\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Array} array\n * @returns {Array}\n * @example\n * // get list of handlers\n * var enabledHandlers = transformer.enabledHandlers();\n *\n * // set handlers\n * transformer.enabledHandlers(['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 'enabledHandlers',\n RESIZERS_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 /**\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 rotateHandlerOffset\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Number} offset\n * @returns {Number}\n * @example\n * // get\n * var rotateHandlerOffset = transformer.rotateHandlerOffset();\n *\n * // set\n * transformer.rotateHandlerOffset(100);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'rotateHandlerOffset', 50);\n\n /**\n * get/set visibility of border\n * @name lineEnabled\n * @method\n * @memberof Konva.Transformer.prototype\n * @param {Boolean} enabled\n * @returns {Boolean}\n * @example\n * // get\n * var lineEnabled = transformer.lineEnabled();\n *\n * // set\n * transformer.lineEnabled(false);\n */\n Konva.Factory.addGetterSetter(Konva.Transformer, 'lineEnabled', true);\n\n /**\n * get/set should we keep ration of resize?\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 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(Konva.Transformer, 'padding', 0);\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.Collection.mapMethods(Konva.Transformer);\n})(Konva);\n","/**\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'use strict';\n\nvar emptyObject = {};\n\nif (process.env.NODE_ENV !== 'production') {\n Object.freeze(emptyObject);\n}\n\nmodule.exports = emptyObject;","/**\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'use strict';\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\n * to provide information about what broke and what you were\n * expecting.\n *\n * The invariant message will be stripped in production, but the invariant\n * will remain to ensure logic does not differ in production.\n */\n\nvar validateFormat = function validateFormat(format) {};\n\nif (process.env.NODE_ENV !== 'production') {\n validateFormat = function validateFormat(format) {\n if (format === undefined) {\n throw new Error('invariant requires an error message argument');\n }\n };\n}\n\nfunction invariant(condition, format, a, b, c, d, e, f) {\n validateFormat(format);\n\n if (!condition) {\n var error;\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 args = [a, b, c, d, e, f];\n var argIndex = 0;\n error = new Error(format.replace(/%s/g, function () {\n return args[argIndex++];\n }));\n error.name = 'Invariant Violation';\n }\n\n error.framesToPop = 1; // we don't care about invariant's own frame\n throw error;\n }\n}\n\nmodule.exports = invariant;","'use strict';\n\n/**\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 * @typechecks\n */\n\n/**\n * @param {*} object The object to check.\n * @return {boolean} Whether or not the object is a DOM node.\n */\nfunction isNode(object) {\n var doc = object ? object.ownerDocument || object : document;\n var defaultView = doc.defaultView || window;\n return !!(object && (typeof defaultView.Node === 'function' ? object instanceof defaultView.Node : typeof object === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string'));\n}\n\nmodule.exports = isNode;","'use strict';\n\n/**\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 * @typechecks\n */\n\nvar isNode = require('./isNode');\n\n/**\n * @param {*} object The object to check.\n * @return {boolean} Whether or not the object is a DOM text node.\n */\nfunction isTextNode(object) {\n return isNode(object) && object.nodeType == 3;\n}\n\nmodule.exports = isTextNode;","'use strict';\n\n/**\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 isTextNode = require('./isTextNode');\n\n/*eslint-disable no-bitwise */\n\n/**\n * Checks if a given DOM node contains or is another DOM node.\n */\nfunction containsNode(outerNode, innerNode) {\n if (!outerNode || !innerNode) {\n return false;\n } else if (outerNode === innerNode) {\n return true;\n } else if (isTextNode(outerNode)) {\n return false;\n } else if (isTextNode(innerNode)) {\n return containsNode(outerNode, innerNode.parentNode);\n } else if ('contains' in outerNode) {\n return outerNode.contains(innerNode);\n } else if (outerNode.compareDocumentPosition) {\n return !!(outerNode.compareDocumentPosition(innerNode) & 16);\n } else {\n return false;\n }\n}\n\nmodule.exports = containsNode;","'use strict';\n\n/**\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 * @typechecks\n */\n\n/* eslint-disable fb-www/typeof-undefined */\n\n/**\n * Same as document.activeElement but wraps in a try-catch block. In IE it is\n * not safe to call document.activeElement if there is nothing focused.\n *\n * The activeElement will be null only if the document or document body is not\n * yet defined.\n *\n * @param {?DOMDocument} doc Defaults to current document.\n * @return {?DOMElement}\n */\nfunction getActiveElement(doc) /*?DOMElement*/{\n doc = doc || (typeof document !== 'undefined' ? document : undefined);\n if (typeof doc === 'undefined') {\n return null;\n }\n try {\n return doc.activeElement || doc.body;\n } catch (e) {\n return doc.body;\n }\n}\n\nmodule.exports = getActiveElement;","/**\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'use strict';\n\nvar canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);\n\n/**\n * Simple, lightweight module assisting with the detection and context of\n * Worker. Helps avoid circular dependencies and allows code to reason about\n * whether or not they are in a Worker, even if they never include the main\n * `ReactWorker` dependency.\n */\nvar ExecutionEnvironment = {\n\n canUseDOM: canUseDOM,\n\n canUseWorkers: typeof Worker !== 'undefined',\n\n canUseEventListeners: canUseDOM && !!(window.addEventListener || window.attachEvent),\n\n canUseViewport: canUseDOM && !!window.screen,\n\n isInWorker: !canUseDOM // For now, this is true - might change in the future.\n\n};\n\nmodule.exports = ExecutionEnvironment;","/** @license React v16.4.0\n * react-dom.production.min.js\n *\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 Modernizr 3.0.0pre (Custom Build) | MIT\n*/\n'use strict';var aa=require(\"fbjs/lib/invariant\"),ca=require(\"react\"),m=require(\"fbjs/lib/ExecutionEnvironment\"),p=require(\"object-assign\"),v=require(\"fbjs/lib/emptyFunction\"),da=require(\"fbjs/lib/getActiveElement\"),ea=require(\"fbjs/lib/shallowEqual\"),fa=require(\"fbjs/lib/containsNode\"),ha=require(\"fbjs/lib/emptyObject\");\nfunction A(a){for(var b=arguments.length-1,c=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,d=0;dthis.eventPool.length&&this.eventPool.push(a)}function qb(a){a.eventPool=[];a.getPooled=rb;a.release=sb}var tb=H.extend({data:null}),ub=H.extend({data:null}),vb=[9,13,27,32],wb=m.canUseDOM&&\"CompositionEvent\"in window,xb=null;m.canUseDOM&&\"documentMode\"in document&&(xb=document.documentMode);\nvar yb=m.canUseDOM&&\"TextEvent\"in window&&!xb,zb=m.canUseDOM&&(!wb||xb&&8=xb),Ab=String.fromCharCode(32),Bb={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(\" \")}},Cb=!1;\nfunction Db(a,b){switch(a){case \"keyup\":return-1!==vb.indexOf(b.keyCode);case \"keydown\":return 229!==b.keyCode;case \"keypress\":case \"mousedown\":case \"blur\":return!0;default:return!1}}function Eb(a){a=a.detail;return\"object\"===typeof a&&\"data\"in a?a.data:null}var Fb=!1;function Gb(a,b){switch(a){case \"compositionend\":return Eb(b);case \"keypress\":if(32!==b.which)return null;Cb=!0;return Ab;case \"textInput\":return a=b.data,a===Ab&&Cb?null:a;default:return null}}\nfunction Hb(a,b){if(Fb)return\"compositionend\"===a||!wb&&Db(a,b)?(a=mb(),G._root=null,G._startText=null,G._fallbackText=null,Fb=!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&&1b}return!1}\nfunction J(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 K={};\"children dangerouslySetInnerHTML defaultValue defaultChecked innerHTML suppressContentEditableWarning suppressHydrationWarning style\".split(\" \").forEach(function(a){K[a]=new J(a,0,!1,a,null)});\n[[\"acceptCharset\",\"accept-charset\"],[\"className\",\"class\"],[\"htmlFor\",\"for\"],[\"httpEquiv\",\"http-equiv\"]].forEach(function(a){var b=a[0];K[b]=new J(b,1,!1,a[1],null)});[\"contentEditable\",\"draggable\",\"spellCheck\",\"value\"].forEach(function(a){K[a]=new J(a,2,!1,a.toLowerCase(),null)});[\"autoReverse\",\"externalResourcesRequired\",\"preserveAlpha\"].forEach(function(a){K[a]=new J(a,2,!1,a,null)});\n\"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){K[a]=new J(a,3,!1,a.toLowerCase(),null)});[\"checked\",\"multiple\",\"muted\",\"selected\"].forEach(function(a){K[a]=new J(a,3,!0,a.toLowerCase(),null)});[\"capture\",\"download\"].forEach(function(a){K[a]=new J(a,4,!1,a.toLowerCase(),null)});\n[\"cols\",\"rows\",\"size\",\"span\"].forEach(function(a){K[a]=new J(a,6,!1,a.toLowerCase(),null)});[\"rowSpan\",\"start\"].forEach(function(a){K[a]=new J(a,5,!1,a.toLowerCase(),null)});var Cc=/[\\-:]([a-z])/g;function Dc(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(Cc,\nDc);K[b]=new J(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(Cc,Dc);K[b]=new J(b,1,!1,a,\"http://www.w3.org/1999/xlink\")});[\"xml:base\",\"xml:lang\",\"xml:space\"].forEach(function(a){var b=a.replace(Cc,Dc);K[b]=new J(b,1,!1,a,\"http://www.w3.org/XML/1998/namespace\")});K.tabIndex=new J(\"tabIndex\",1,!1,\"tabindex\",null);\nfunction Ec(a,b,c,d){var e=K.hasOwnProperty(b)?K[b]:null;var f=null!==e?0===e.type:d?!1:!(2Ed.length&&Ed.push(a)}}}\nvar Md={get _enabled(){return Gd},setEnabled:Id,isEnabled:function(){return Gd},trapBubbledEvent:L,trapCapturedEvent:Ld,dispatchEvent:Kd},Nd={},Od=0,Pd=\"_reactListenersID\"+(\"\"+Math.random()).slice(2);function Qd(a){Object.prototype.hasOwnProperty.call(a,Pd)||(a[Pd]=Od++,Nd[a[Pd]]={});return Nd[a[Pd]]}function Rd(a){for(;a&&a.firstChild;)a=a.firstChild;return a}\nfunction Sd(a,b){var c=Rd(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=Rd(c)}}function Td(a){var b=a&&a.nodeName&&a.nodeName.toLowerCase();return b&&(\"input\"===b&&\"text\"===a.type||\"textarea\"===b||\"true\"===a.contentEditable)}\nvar Ud=m.canUseDOM&&\"documentMode\"in document&&11>=document.documentMode,Vd={select:{phasedRegistrationNames:{bubbled:\"onSelect\",captured:\"onSelectCapture\"},dependencies:\"blur contextmenu focus keydown keyup mousedown mouseup selectionchange\".split(\" \")}},Wd=null,Xd=null,Yd=null,Zd=!1;\nfunction $d(a,b){if(Zd||null==Wd||Wd!==da())return null;var c=Wd;\"selectionStart\"in c&&Td(c)?c={start:c.selectionStart,end:c.selectionEnd}:window.getSelection?(c=window.getSelection(),c={anchorNode:c.anchorNode,anchorOffset:c.anchorOffset,focusNode:c.focusNode,focusOffset:c.focusOffset}):c=void 0;return Yd&&ea(Yd,c)?null:(Yd=c,a=H.getPooled(Vd.select,Xd,a,b),a.type=\"select\",a.target=Wd,Ya(a),a)}\nvar ae={eventTypes:Vd,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=Qd(e);f=sa.onSelect;for(var g=0;ga))){he=-1;ne.didTimeout=!0;for(var b=0,c=ee.length;bb&&(b=8),me=b=b.length?void 0:A(\"93\"),b=b[0]),c=\"\"+b),null==c&&(c=\"\"));a._wrapperState={initialValue:\"\"+c}}\nfunction ze(a,b){var c=b.value;null!=c&&(c=\"\"+c,c!==a.value&&(a.value=c),null==b.defaultValue&&(a.defaultValue=c));null!=b.defaultValue&&(a.defaultValue=b.defaultValue)}function Ae(a){var b=a.textContent;b===a._wrapperState.initialValue&&(a.value=b)}var Be={html:\"http://www.w3.org/1999/xhtml\",mathml:\"http://www.w3.org/1998/Math/MathML\",svg:\"http://www.w3.org/2000/svg\"};\nfunction Ce(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 De(a,b){return null==a||\"http://www.w3.org/1999/xhtml\"===a?Ce(b):\"http://www.w3.org/2000/svg\"===a&&\"foreignObject\"===b?\"http://www.w3.org/1999/xhtml\":a}\nvar Ee=void 0,Fe=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!==Be.svg||\"innerHTML\"in a)a.innerHTML=b;else{Ee=Ee||document.createElement(\"div\");Ee.innerHTML=\"\"+b+\" \";for(b=Ee.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;b.firstChild;)a.appendChild(b.firstChild)}});\nfunction Ge(a,b){if(b){var c=a.firstChild;if(c&&c===a.lastChild&&3===c.nodeType){c.nodeValue=b;return}}a.textContent=b}\nvar He={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,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,floodOpacity:!0,\nstopOpacity:!0,strokeDasharray:!0,strokeDashoffset:!0,strokeMiterlimit:!0,strokeOpacity:!0,strokeWidth:!0},Ie=[\"Webkit\",\"ms\",\"Moz\",\"O\"];Object.keys(He).forEach(function(a){Ie.forEach(function(b){b=b+a.charAt(0).toUpperCase()+a.substring(1);He[b]=He[a]})});\nfunction Je(a,b){a=a.style;for(var c in b)if(b.hasOwnProperty(c)){var d=0===c.indexOf(\"--\");var e=c;var f=b[c];e=null==f||\"boolean\"===typeof f||\"\"===f?\"\":d||\"number\"!==typeof f||0===f||He.hasOwnProperty(e)&&He[e]?(\"\"+f).trim():f+\"px\";\"float\"===c&&(c=\"cssFloat\");d?a.setProperty(c,e):a[c]=e}}var Ke=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 Le(a,b,c){b&&(Ke[a]&&(null!=b.children||null!=b.dangerouslySetInnerHTML?A(\"137\",a,c()):void 0),null!=b.dangerouslySetInnerHTML&&(null!=b.children?A(\"60\"):void 0,\"object\"===typeof b.dangerouslySetInnerHTML&&\"__html\"in b.dangerouslySetInnerHTML?void 0:A(\"61\")),null!=b.style&&\"object\"!==typeof b.style?A(\"62\",c()):void 0)}\nfunction Me(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}}var Ne=v.thatReturns(\"\");\nfunction Oe(a,b){a=9===a.nodeType||11===a.nodeType?a:a.ownerDocument;var c=Qd(a);b=sa[b];for(var d=0;d\\x3c/script>\",a=a.removeChild(a.firstChild)):a=\"string\"===typeof b.is?c.createElement(a,{is:b.is}):c.createElement(a):a=c.createElementNS(d,a);return a}function Qe(a,b){return(9===b.nodeType?b:b.ownerDocument).createTextNode(a)}\nfunction Re(a,b,c,d){var e=Me(b,c);switch(b){case \"iframe\":case \"object\":L(\"load\",a);var f=c;break;case \"video\":case \"audio\":for(f=0;fgf||(a.current=ff[gf],ff[gf]=null,gf--)}function N(a,b){gf++;ff[gf]=a.current;a.current=b}var jf=hf(ha),O=hf(!1),kf=ha;function lf(a){return mf(a)?kf:jf.current}\nfunction nf(a,b){var c=a.type.contextTypes;if(!c)return ha;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 mf(a){return 2===a.tag&&null!=a.type.childContextTypes}function of(a){mf(a)&&(M(O,a),M(jf,a))}function pf(a){M(O,a);M(jf,a)}\nfunction qf(a,b,c){jf.current!==ha?A(\"168\"):void 0;N(jf,b,a);N(O,c,a)}function rf(a,b){var c=a.stateNode,d=a.type.childContextTypes;if(\"function\"!==typeof c.getChildContext)return b;c=c.getChildContext();for(var e in c)e in d?void 0:A(\"108\",tc(a)||\"Unknown\",e);return p({},b,c)}function sf(a){if(!mf(a))return!1;var b=a.stateNode;b=b&&b.__reactInternalMemoizedMergedChildContext||ha;kf=jf.current;N(jf,b,a);N(O,O.current,a);return!0}\nfunction tf(a,b){var c=a.stateNode;c?void 0:A(\"169\");if(b){var d=rf(a,kf);c.__reactInternalMemoizedMergedChildContext=d;M(O,a);M(jf,a);N(jf,d,a)}else M(O,a);N(O,b,a)}\nfunction uf(a,b,c,d){this.tag=a;this.key=c;this.sibling=this.child=this.return=this.stateNode=this.type=null;this.index=0;this.ref=null;this.pendingProps=b;this.memoizedState=this.updateQueue=this.memoizedProps=null;this.mode=d;this.effectTag=0;this.lastEffect=this.firstEffect=this.nextEffect=null;this.expirationTime=0;this.alternate=null}\nfunction vf(a,b,c){var d=a.alternate;null===d?(d=new uf(a.tag,b,a.key,a.mode),d.type=a.type,d.stateNode=a.stateNode,d.alternate=a,a.alternate=d):(d.pendingProps=b,d.effectTag=0,d.nextEffect=null,d.firstEffect=null,d.lastEffect=null);d.expirationTime=c;d.child=a.child;d.memoizedProps=a.memoizedProps;d.memoizedState=a.memoizedState;d.updateQueue=a.updateQueue;d.sibling=a.sibling;d.index=a.index;d.ref=a.ref;return d}\nfunction wf(a,b,c){var d=a.type,e=a.key;a=a.props;if(\"function\"===typeof d)var f=d.prototype&&d.prototype.isReactComponent?2:0;else if(\"string\"===typeof d)f=5;else switch(d){case hc:return xf(a.children,b,c,e);case oc:f=11;b|=3;break;case ic:f=11;b|=2;break;case jc:return d=new uf(15,a,e,b|4),d.type=jc,d.expirationTime=c,d;case qc:f=16;b|=2;break;default:a:{switch(\"object\"===typeof d&&null!==d?d.$$typeof:null){case mc:f=13;break a;case nc:f=12;break a;case pc:f=14;break a;default:A(\"130\",null==d?\nd:typeof d,\"\")}f=void 0}}b=new uf(f,a,e,b);b.type=d;b.expirationTime=c;return b}function xf(a,b,c,d){a=new uf(10,a,d,b);a.expirationTime=c;return a}function yf(a,b,c){a=new uf(6,a,null,b);a.expirationTime=c;return a}function zf(a,b,c){b=new uf(4,null!==a.children?a.children:[],a.key,b);b.expirationTime=c;b.stateNode={containerInfo:a.containerInfo,pendingChildren:null,implementation:a.implementation};return b}\nfunction Af(a,b,c){b=new uf(3,null,null,b?3:0);a={current:b,containerInfo:a,pendingChildren:null,earliestPendingTime:0,latestPendingTime:0,earliestSuspendedTime:0,latestSuspendedTime:0,latestPingedTime:0,pendingCommitExpirationTime:0,finishedWork:null,context:null,pendingContext:null,hydrate:c,remainingExpirationTime:0,firstBatch:null,nextScheduledRoot:null};return b.stateNode=a}var Bf=null,Cf=null;function Df(a){return function(b){try{return a(b)}catch(c){}}}\nfunction Ef(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);Bf=Df(function(a){return b.onCommitFiberRoot(c,a)});Cf=Df(function(a){return b.onCommitFiberUnmount(c,a)})}catch(d){}return!0}function Ff(a){\"function\"===typeof Bf&&Bf(a)}function Gf(a){\"function\"===typeof Cf&&Cf(a)}var Hf=!1;\nfunction If(a){return{expirationTime:0,baseState:a,firstUpdate:null,lastUpdate:null,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}function Jf(a){return{expirationTime:a.expirationTime,baseState:a.baseState,firstUpdate:a.firstUpdate,lastUpdate:a.lastUpdate,firstCapturedUpdate:null,lastCapturedUpdate:null,firstEffect:null,lastEffect:null,firstCapturedEffect:null,lastCapturedEffect:null}}\nfunction Kf(a){return{expirationTime:a,tag:0,payload:null,callback:null,next:null,nextEffect:null}}function Lf(a,b,c){null===a.lastUpdate?a.firstUpdate=a.lastUpdate=b:(a.lastUpdate.next=b,a.lastUpdate=b);if(0===a.expirationTime||a.expirationTime>c)a.expirationTime=c}\nfunction Mf(a,b,c){var d=a.alternate;if(null===d){var e=a.updateQueue;var f=null;null===e&&(e=a.updateQueue=If(a.memoizedState))}else e=a.updateQueue,f=d.updateQueue,null===e?null===f?(e=a.updateQueue=If(a.memoizedState),f=d.updateQueue=If(d.memoizedState)):e=a.updateQueue=Jf(f):null===f&&(f=d.updateQueue=Jf(e));null===f||e===f?Lf(e,b,c):null===e.lastUpdate||null===f.lastUpdate?(Lf(e,b,c),Lf(f,b,c)):(Lf(e,b,c),f.lastUpdate=b)}\nfunction Nf(a,b,c){var d=a.updateQueue;d=null===d?a.updateQueue=If(a.memoizedState):Of(a,d);null===d.lastCapturedUpdate?d.firstCapturedUpdate=d.lastCapturedUpdate=b:(d.lastCapturedUpdate.next=b,d.lastCapturedUpdate=b);if(0===d.expirationTime||d.expirationTime>c)d.expirationTime=c}function Of(a,b){var c=a.alternate;null!==c&&b===c.updateQueue&&(b=a.updateQueue=Jf(b));return b}\nfunction Pf(a,b,c,d,e,f){switch(c.tag){case 1:return a=c.payload,\"function\"===typeof a?a.call(f,d,e):a;case 3:a.effectTag=a.effectTag&-1025|64;case 0: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 2:Hf=!0}return d}\nfunction Qf(a,b,c,d,e){Hf=!1;if(!(0===b.expirationTime||b.expirationTime>e)){b=Of(a,b);for(var f=b.baseState,g=null,h=0,k=b.firstUpdate,n=f;null!==k;){var r=k.expirationTime;if(r>e){if(null===g&&(g=k,f=n),0===h||h>r)h=r}else n=Pf(a,b,k,n,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}r=null;for(k=b.firstCapturedUpdate;null!==k;){var w=k.expirationTime;if(w>e){if(null===r&&(r=k,null===\ng&&(f=n)),0===h||h>w)h=w}else n=Pf(a,b,k,n,c,d),null!==k.callback&&(a.effectTag|=32,k.nextEffect=null,null===b.lastCapturedEffect?b.firstCapturedEffect=b.lastCapturedEffect=k:(b.lastCapturedEffect.nextEffect=k,b.lastCapturedEffect=k));k=k.next}null===g&&(b.lastUpdate=null);null===r?b.lastCapturedUpdate=null:a.effectTag|=32;null===g&&null===r&&(f=n);b.baseState=f;b.firstUpdate=g;b.firstCapturedUpdate=r;b.expirationTime=h;a.memoizedState=n}}\nfunction Rf(a,b){\"function\"!==typeof a?A(\"191\",a):void 0;a.call(b)}\nfunction Sf(a,b,c){null!==b.firstCapturedUpdate&&(null!==b.lastUpdate&&(b.lastUpdate.next=b.firstCapturedUpdate,b.lastUpdate=b.lastCapturedUpdate),b.firstCapturedUpdate=b.lastCapturedUpdate=null);a=b.firstEffect;for(b.firstEffect=b.lastEffect=null;null!==a;){var d=a.callback;null!==d&&(a.callback=null,Rf(d,c));a=a.nextEffect}a=b.firstCapturedEffect;for(b.firstCapturedEffect=b.lastCapturedEffect=null;null!==a;)b=a.callback,null!==b&&(a.callback=null,Rf(b,c)),a=a.nextEffect}\nfunction Tf(a,b){return{value:a,source:b,stack:vc(b)}}var Uf=hf(null),Vf=hf(null),Wf=hf(0);function Xf(a){var b=a.type._context;N(Wf,b._changedBits,a);N(Vf,b._currentValue,a);N(Uf,a,a);b._currentValue=a.pendingProps.value;b._changedBits=a.stateNode}function Yf(a){var b=Wf.current,c=Vf.current;M(Uf,a);M(Vf,a);M(Wf,a);a=a.type._context;a._currentValue=c;a._changedBits=b}var Zf={},$f=hf(Zf),ag=hf(Zf),bg=hf(Zf);function cg(a){a===Zf?A(\"174\"):void 0;return a}\nfunction dg(a,b){N(bg,b,a);N(ag,a,a);N($f,Zf,a);var c=b.nodeType;switch(c){case 9:case 11:b=(b=b.documentElement)?b.namespaceURI:De(null,\"\");break;default:c=8===c?b.parentNode:b,b=c.namespaceURI||null,c=c.tagName,b=De(b,c)}M($f,a);N($f,b,a)}function eg(a){M($f,a);M(ag,a);M(bg,a)}function fg(a){ag.current===a&&(M($f,a),M(ag,a))}function hg(a,b,c){var d=a.memoizedState;b=b(c,d);d=null===b||void 0===b?d:p({},d,b);a.memoizedState=d;a=a.updateQueue;null!==a&&0===a.expirationTime&&(a.baseState=d)}\nvar lg={isMounted:function(a){return(a=a._reactInternalFiber)?2===id(a):!1},enqueueSetState:function(a,b,c){a=a._reactInternalFiber;var d=ig();d=jg(d,a);var e=Kf(d);e.payload=b;void 0!==c&&null!==c&&(e.callback=c);Mf(a,e,d);kg(a,d)},enqueueReplaceState:function(a,b,c){a=a._reactInternalFiber;var d=ig();d=jg(d,a);var e=Kf(d);e.tag=1;e.payload=b;void 0!==c&&null!==c&&(e.callback=c);Mf(a,e,d);kg(a,d)},enqueueForceUpdate:function(a,b){a=a._reactInternalFiber;var c=ig();c=jg(c,a);var d=Kf(c);d.tag=2;void 0!==\nb&&null!==b&&(d.callback=b);Mf(a,d,c);kg(a,c)}};function mg(a,b,c,d,e,f){var g=a.stateNode;a=a.type;return\"function\"===typeof g.shouldComponentUpdate?g.shouldComponentUpdate(c,e,f):a.prototype&&a.prototype.isPureReactComponent?!ea(b,c)||!ea(d,e):!0}\nfunction ng(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&&lg.enqueueReplaceState(b,b.state,null)}\nfunction og(a,b){var c=a.type,d=a.stateNode,e=a.pendingProps,f=lf(a);d.props=e;d.state=a.memoizedState;d.refs=ha;d.context=nf(a,f);f=a.updateQueue;null!==f&&(Qf(a,f,e,d,b),d.state=a.memoizedState);f=a.type.getDerivedStateFromProps;\"function\"===typeof f&&(hg(a,f,e),d.state=a.memoizedState);\"function\"===typeof c.getDerivedStateFromProps||\"function\"===typeof d.getSnapshotBeforeUpdate||\"function\"!==typeof d.UNSAFE_componentWillMount&&\"function\"!==typeof d.componentWillMount||(c=d.state,\"function\"===typeof d.componentWillMount&&\nd.componentWillMount(),\"function\"===typeof d.UNSAFE_componentWillMount&&d.UNSAFE_componentWillMount(),c!==d.state&&lg.enqueueReplaceState(d,d.state,null),f=a.updateQueue,null!==f&&(Qf(a,f,e,d,b),d.state=a.memoizedState));\"function\"===typeof d.componentDidMount&&(a.effectTag|=4)}var pg=Array.isArray;\nfunction qg(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&&(2!==c.tag?A(\"110\"):void 0,d=c.stateNode);d?void 0:A(\"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===ha?d.refs={}:d.refs;null===a?delete b[e]:b[e]=a};b._stringRef=e;return b}\"string\"!==typeof a?A(\"148\"):void 0;c._owner?void 0:A(\"254\",a)}return a}\nfunction rg(a,b){\"textarea\"!==a.type&&A(\"31\",\"[object Object]\"===Object.prototype.toString.call(b)?\"object with keys {\"+Object.keys(b).join(\", \")+\"}\":b,\"\")}\nfunction sg(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=vf(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,dq?(n=t,t=null):n=t.sibling;var l=P(e,t,h[q],k);if(null===l){null===t&&(t=n);break}a&&t&&null===l.alternate&&b(e,\nt);g=f(l,g,q);null===x?u=l:x.sibling=l;x=l;t=n}if(q===h.length)return c(e,t),u;if(null===t){for(;qx?(y=n,n=null):y=n.sibling;var r=P(e,n,l.value,k);if(null===r){n||(n=y);break}a&&n&&null===r.alternate&&b(e,n);g=f(r,g,x);null===u?t=r:u.sibling=r;u=r;n=y}if(l.done)return c(e,n),t;if(null===n){for(;!l.done;x++,l=h.next())l=w(e,l.value,k),null!==l&&(g=f(l,g,x),null===u?t=l:u.sibling=l,u=l);return t}for(n=d(e,n);!l.done;x++,l=h.next())l=kc(n,e,x,l.value,k),null!==l&&(a&&null!==l.alternate&&n.delete(null===l.key?x:l.key),g=f(l,g,x),null===\nu?t=l:u.sibling=l,u=l);a&&n.forEach(function(a){return b(e,a)});return t}return function(a,d,f,h){\"object\"===typeof f&&null!==f&&f.type===hc&&null===f.key&&(f=f.props.children);var k=\"object\"===typeof f&&null!==f;if(k)switch(f.$$typeof){case fc:a:{var n=f.key;for(k=d;null!==k;){if(k.key===n)if(10===k.tag?f.type===hc:k.type===f.type){c(a,k.sibling);d=e(k,f.type===hc?f.props.children:f.props,h);d.ref=qg(a,k,f);d.return=a;a=d;break a}else{c(a,k);break}else b(a,k);k=k.sibling}f.type===hc?(d=xf(f.props.children,\na.mode,h,f.key),d.return=a,a=d):(h=wf(f,a.mode,h),h.ref=qg(a,d,f),h.return=a,a=h)}return g(a);case gc: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=zf(f,a.mode,h);d.return=a;a=d}return g(a)}if(\"string\"===typeof f||\"number\"===typeof f)return f=\"\"+f,null!==d&&6===d.tag?(c(a,d.sibling),d=e(d,f,h),d.return=\na,a=d):(c(a,d),d=yf(f,a.mode,h),d.return=a,a=d),g(a);if(pg(f))return Hd(a,d,f,h);if(sc(f))return E(a,d,f,h);k&&rg(a,f);if(\"undefined\"===typeof f)switch(a.tag){case 2:case 1:h=a.type,A(\"152\",h.displayName||h.name||\"Component\")}return c(a,d)}}var tg=sg(!0),ug=sg(!1),vg=null,wg=null,xg=!1;function yg(a,b){var c=new uf(5,null,null,0);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 zg(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}}function Ag(a){if(xg){var b=wg;if(b){var c=b;if(!zg(a,b)){b=df(c);if(!b||!zg(a,b)){a.effectTag|=2;xg=!1;vg=a;return}yg(vg,c)}vg=a;wg=ef(b)}else a.effectTag|=2,xg=!1,vg=a}}\nfunction Bg(a){for(a=a.return;null!==a&&5!==a.tag&&3!==a.tag;)a=a.return;vg=a}function Cg(a){if(a!==vg)return!1;if(!xg)return Bg(a),xg=!0,!1;var b=a.type;if(5!==a.tag||\"head\"!==b&&\"body\"!==b&&!$e(b,a.memoizedProps))for(b=wg;b;)yg(a,b),b=df(b);Bg(a);wg=vg?df(a.stateNode):null;return!0}function Dg(){wg=vg=null;xg=!1}function Q(a,b,c){Eg(a,b,c,b.expirationTime)}function Eg(a,b,c,d){b.child=null===a?ug(b,null,c,d):tg(b,a.child,c,d)}\nfunction Fg(a,b){var c=b.ref;if(null===a&&null!==c||null!==a&&a.ref!==c)b.effectTag|=128}function Gg(a,b,c,d,e){Fg(a,b);var f=0!==(b.effectTag&64);if(!c&&!f)return d&&tf(b,!1),R(a,b);c=b.stateNode;ec.current=b;var g=f?null:c.render();b.effectTag|=1;f&&(Eg(a,b,null,e),b.child=null);Eg(a,b,g,e);b.memoizedState=c.state;b.memoizedProps=c.props;d&&tf(b,!0);return b.child}\nfunction Hg(a){var b=a.stateNode;b.pendingContext?qf(a,b.pendingContext,b.pendingContext!==b.context):b.context&&qf(a,b.context,!1);dg(a,b.containerInfo)}\nfunction Ig(a,b,c,d){var e=a.child;null!==e&&(e.return=a);for(;null!==e;){switch(e.tag){case 12:var f=e.stateNode|0;if(e.type===b&&0!==(f&c)){for(f=e;null!==f;){var g=f.alternate;if(0===f.expirationTime||f.expirationTime>d)f.expirationTime=d,null!==g&&(0===g.expirationTime||g.expirationTime>d)&&(g.expirationTime=d);else if(null!==g&&(0===g.expirationTime||g.expirationTime>d))g.expirationTime=d;else break;f=f.return}f=null}else f=e.child;break;case 13:f=e.type===a.type?null:e.child;break;default:f=\ne.child}if(null!==f)f.return=e;else for(f=e;null!==f;){if(f===a){f=null;break}e=f.sibling;if(null!==e){e.return=f.return;f=e;break}f=f.return}e=f}}\nfunction Jg(a,b,c){var d=b.type._context,e=b.pendingProps,f=b.memoizedProps,g=!0;if(O.current)g=!1;else if(f===e)return b.stateNode=0,Xf(b),R(a,b);var h=e.value;b.memoizedProps=e;if(null===f)h=1073741823;else if(f.value===e.value){if(f.children===e.children&&g)return b.stateNode=0,Xf(b),R(a,b);h=0}else{var k=f.value;if(k===h&&(0!==k||1/k===1/h)||k!==k&&h!==h){if(f.children===e.children&&g)return b.stateNode=0,Xf(b),R(a,b);h=0}else if(h=\"function\"===typeof d._calculateChangedBits?d._calculateChangedBits(k,\nh):1073741823,h|=0,0===h){if(f.children===e.children&&g)return b.stateNode=0,Xf(b),R(a,b)}else Ig(b,d,h,c)}b.stateNode=h;Xf(b);Q(a,b,e.children);return b.child}function R(a,b){null!==a&&b.child!==a.child?A(\"153\"):void 0;if(null!==b.child){a=b.child;var c=vf(a,a.pendingProps,a.expirationTime);b.child=c;for(c.return=b;null!==a.sibling;)a=a.sibling,c=c.sibling=vf(a,a.pendingProps,a.expirationTime),c.return=b;c.sibling=null}return b.child}\nfunction Kg(a,b,c){if(0===b.expirationTime||b.expirationTime>c){switch(b.tag){case 3:Hg(b);break;case 2:sf(b);break;case 4:dg(b,b.stateNode.containerInfo);break;case 13:Xf(b)}return null}switch(b.tag){case 0:null!==a?A(\"155\"):void 0;var d=b.type,e=b.pendingProps,f=lf(b);f=nf(b,f);d=d(e,f);b.effectTag|=1;\"object\"===typeof d&&null!==d&&\"function\"===typeof d.render&&void 0===d.$$typeof?(f=b.type,b.tag=2,b.memoizedState=null!==d.state&&void 0!==d.state?d.state:null,f=f.getDerivedStateFromProps,\"function\"===\ntypeof f&&hg(b,f,e),e=sf(b),d.updater=lg,b.stateNode=d,d._reactInternalFiber=b,og(b,c),a=Gg(a,b,!0,e,c)):(b.tag=1,Q(a,b,d),b.memoizedProps=e,a=b.child);return a;case 1:return e=b.type,c=b.pendingProps,O.current||b.memoizedProps!==c?(d=lf(b),d=nf(b,d),e=e(c,d),b.effectTag|=1,Q(a,b,e),b.memoizedProps=c,a=b.child):a=R(a,b),a;case 2:e=sf(b);if(null===a)if(null===b.stateNode){var g=b.pendingProps,h=b.type;d=lf(b);var k=2===b.tag&&null!=b.type.contextTypes;f=k?nf(b,d):ha;g=new h(g,f);b.memoizedState=null!==\ng.state&&void 0!==g.state?g.state:null;g.updater=lg;b.stateNode=g;g._reactInternalFiber=b;k&&(k=b.stateNode,k.__reactInternalMemoizedUnmaskedChildContext=d,k.__reactInternalMemoizedMaskedChildContext=f);og(b,c);d=!0}else{h=b.type;d=b.stateNode;k=b.memoizedProps;f=b.pendingProps;d.props=k;var n=d.context;g=lf(b);g=nf(b,g);var r=h.getDerivedStateFromProps;(h=\"function\"===typeof r||\"function\"===typeof d.getSnapshotBeforeUpdate)||\"function\"!==typeof d.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof d.componentWillReceiveProps||\n(k!==f||n!==g)&&ng(b,d,f,g);Hf=!1;var w=b.memoizedState;n=d.state=w;var P=b.updateQueue;null!==P&&(Qf(b,P,f,d,c),n=b.memoizedState);k!==f||w!==n||O.current||Hf?(\"function\"===typeof r&&(hg(b,r,f),n=b.memoizedState),(k=Hf||mg(b,k,f,w,n,g))?(h||\"function\"!==typeof d.UNSAFE_componentWillMount&&\"function\"!==typeof d.componentWillMount||(\"function\"===typeof d.componentWillMount&&d.componentWillMount(),\"function\"===typeof d.UNSAFE_componentWillMount&&d.UNSAFE_componentWillMount()),\"function\"===typeof d.componentDidMount&&\n(b.effectTag|=4)):(\"function\"===typeof d.componentDidMount&&(b.effectTag|=4),b.memoizedProps=f,b.memoizedState=n),d.props=f,d.state=n,d.context=g,d=k):(\"function\"===typeof d.componentDidMount&&(b.effectTag|=4),d=!1)}else h=b.type,d=b.stateNode,f=b.memoizedProps,k=b.pendingProps,d.props=f,n=d.context,g=lf(b),g=nf(b,g),r=h.getDerivedStateFromProps,(h=\"function\"===typeof r||\"function\"===typeof d.getSnapshotBeforeUpdate)||\"function\"!==typeof d.UNSAFE_componentWillReceiveProps&&\"function\"!==typeof d.componentWillReceiveProps||\n(f!==k||n!==g)&&ng(b,d,k,g),Hf=!1,n=b.memoizedState,w=d.state=n,P=b.updateQueue,null!==P&&(Qf(b,P,k,d,c),w=b.memoizedState),f!==k||n!==w||O.current||Hf?(\"function\"===typeof r&&(hg(b,r,k),w=b.memoizedState),(r=Hf||mg(b,f,k,n,w,g))?(h||\"function\"!==typeof d.UNSAFE_componentWillUpdate&&\"function\"!==typeof d.componentWillUpdate||(\"function\"===typeof d.componentWillUpdate&&d.componentWillUpdate(k,w,g),\"function\"===typeof d.UNSAFE_componentWillUpdate&&d.UNSAFE_componentWillUpdate(k,w,g)),\"function\"===typeof d.componentDidUpdate&&\n(b.effectTag|=4),\"function\"===typeof d.getSnapshotBeforeUpdate&&(b.effectTag|=256)):(\"function\"!==typeof d.componentDidUpdate||f===a.memoizedProps&&n===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof d.getSnapshotBeforeUpdate||f===a.memoizedProps&&n===a.memoizedState||(b.effectTag|=256),b.memoizedProps=k,b.memoizedState=w),d.props=k,d.state=w,d.context=g,d=r):(\"function\"!==typeof d.componentDidUpdate||f===a.memoizedProps&&n===a.memoizedState||(b.effectTag|=4),\"function\"!==typeof d.getSnapshotBeforeUpdate||\nf===a.memoizedProps&&n===a.memoizedState||(b.effectTag|=256),d=!1);return Gg(a,b,d,e,c);case 3:Hg(b);e=b.updateQueue;if(null!==e)if(d=b.memoizedState,d=null!==d?d.element:null,Qf(b,e,b.pendingProps,null,c),e=b.memoizedState.element,e===d)Dg(),a=R(a,b);else{d=b.stateNode;if(d=(null===a||null===a.child)&&d.hydrate)wg=ef(b.stateNode.containerInfo),vg=b,d=xg=!0;d?(b.effectTag|=2,b.child=ug(b,null,e,c)):(Dg(),Q(a,b,e));a=b.child}else Dg(),a=R(a,b);return a;case 5:a:{cg(bg.current);e=cg($f.current);d=De(e,\nb.type);e!==d&&(N(ag,b,b),N($f,d,b));null===a&&Ag(b);e=b.type;k=b.memoizedProps;d=b.pendingProps;f=null!==a?a.memoizedProps:null;if(!O.current&&k===d){if(k=b.mode&1&&!!d.hidden)b.expirationTime=1073741823;if(!k||1073741823!==c){a=R(a,b);break a}}k=d.children;$e(e,d)?k=null:f&&$e(e,f)&&(b.effectTag|=16);Fg(a,b);1073741823!==c&&b.mode&1&&d.hidden?(b.expirationTime=1073741823,b.memoizedProps=d,a=null):(Q(a,b,k),b.memoizedProps=d,a=b.child)}return a;case 6:return null===a&&Ag(b),b.memoizedProps=b.pendingProps,\nnull;case 16:return null;case 4:return dg(b,b.stateNode.containerInfo),e=b.pendingProps,O.current||b.memoizedProps!==e?(null===a?b.child=tg(b,null,e,c):Q(a,b,e),b.memoizedProps=e,a=b.child):a=R(a,b),a;case 14:return e=b.type.render,c=b.pendingProps,d=b.ref,O.current||b.memoizedProps!==c||d!==(null!==a?a.ref:null)?(e=e(c,d),Q(a,b,e),b.memoizedProps=c,a=b.child):a=R(a,b),a;case 10:return c=b.pendingProps,O.current||b.memoizedProps!==c?(Q(a,b,c),b.memoizedProps=c,a=b.child):a=R(a,b),a;case 11:return c=\nb.pendingProps.children,O.current||null!==c&&b.memoizedProps!==c?(Q(a,b,c),b.memoizedProps=c,a=b.child):a=R(a,b),a;case 15:return c=b.pendingProps,b.memoizedProps===c?a=R(a,b):(Q(a,b,c.children),b.memoizedProps=c,a=b.child),a;case 13:return Jg(a,b,c);case 12:a:if(d=b.type,f=b.pendingProps,k=b.memoizedProps,e=d._currentValue,g=d._changedBits,O.current||0!==g||k!==f){b.memoizedProps=f;h=f.unstable_observedBits;if(void 0===h||null===h)h=1073741823;b.stateNode=h;if(0!==(g&h))Ig(b,d,g,c);else if(k===f){a=\nR(a,b);break a}c=f.children;c=c(e);b.effectTag|=1;Q(a,b,c);a=b.child}else a=R(a,b);return a;default:A(\"156\")}}function Lg(a){a.effectTag|=4}var Pg=void 0,Qg=void 0,Rg=void 0;Pg=function(){};Qg=function(a,b,c){(b.updateQueue=c)&&Lg(b)};Rg=function(a,b,c,d){c!==d&&Lg(b)};\nfunction Sg(a,b){var c=b.pendingProps;switch(b.tag){case 1:return null;case 2:return of(b),null;case 3:eg(b);pf(b);var d=b.stateNode;d.pendingContext&&(d.context=d.pendingContext,d.pendingContext=null);if(null===a||null===a.child)Cg(b),b.effectTag&=-3;Pg(b);return null;case 5:fg(b);d=cg(bg.current);var e=b.type;if(null!==a&&null!=b.stateNode){var f=a.memoizedProps,g=b.stateNode,h=cg($f.current);g=Se(g,e,f,c,d);Qg(a,b,g,e,f,c,d,h);a.ref!==b.ref&&(b.effectTag|=128)}else{if(!c)return null===b.stateNode?\nA(\"166\"):void 0,null;a=cg($f.current);if(Cg(b))c=b.stateNode,e=b.type,f=b.memoizedProps,c[C]=b,c[Ma]=f,d=Ue(c,e,f,a,d),b.updateQueue=d,null!==d&&Lg(b);else{a=Pe(e,c,d,a);a[C]=b;a[Ma]=c;a:for(f=b.child;null!==f;){if(5===f.tag||6===f.tag)a.appendChild(f.stateNode);else if(4!==f.tag&&null!==f.child){f.child.return=f;f=f.child;continue}if(f===b)break;for(;null===f.sibling;){if(null===f.return||f.return===b)break a;f=f.return}f.sibling.return=f.return;f=f.sibling}Re(a,e,c,d);Ze(e,c)&&Lg(b);b.stateNode=\na}null!==b.ref&&(b.effectTag|=128)}return null;case 6:if(a&&null!=b.stateNode)Rg(a,b,a.memoizedProps,c);else{if(\"string\"!==typeof c)return null===b.stateNode?A(\"166\"):void 0,null;d=cg(bg.current);cg($f.current);Cg(b)?(d=b.stateNode,c=b.memoizedProps,d[C]=b,Ve(d,c)&&Lg(b)):(d=Qe(c,d),d[C]=b,b.stateNode=d)}return null;case 14:return null;case 16:return null;case 10:return null;case 11:return null;case 15:return null;case 4:return eg(b),Pg(b),null;case 13:return Yf(b),null;case 12:return null;case 0:A(\"167\");\ndefault:A(\"156\")}}function Tg(a,b){var c=b.source;null===b.stack&&null!==c&&vc(c);null!==c&&tc(c);b=b.value;null!==a&&2===a.tag&&tc(a);try{b&&b.suppressReactErrorLogging||console.error(b)}catch(d){d&&d.suppressReactErrorLogging||console.error(d)}}function Ug(a){var b=a.ref;if(null!==b)if(\"function\"===typeof b)try{b(null)}catch(c){Vg(a,c)}else b.current=null}\nfunction Wg(a){\"function\"===typeof Gf&&Gf(a);switch(a.tag){case 2:Ug(a);var b=a.stateNode;if(\"function\"===typeof b.componentWillUnmount)try{b.props=a.memoizedProps,b.state=a.memoizedState,b.componentWillUnmount()}catch(c){Vg(a,c)}break;case 5:Ug(a);break;case 4:Xg(a)}}function Yg(a){return 5===a.tag||3===a.tag||4===a.tag}\nfunction Zg(a){a:{for(var b=a.return;null!==b;){if(Yg(b)){var c=b;break a}b=b.return}A(\"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:A(\"161\")}c.effectTag&16&&(Ge(b,\"\"),c.effectTag&=-17);a:b:for(c=a;;){for(;null===c.sibling;){if(null===c.return||Yg(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?(f=b,g=e.stateNode,8===f.nodeType?f.parentNode.insertBefore(g,f):f.appendChild(g)):b.appendChild(e.stateNode);else if(4!==e.tag&&null!==e.child){e.child.return=e;e=e.child;continue}if(e===a)break;for(;null===\ne.sibling;){if(null===e.return||e.return===a)return;e=e.return}e.sibling.return=e.return;e=e.sibling}}\nfunction Xg(a){for(var b=a,c=!1,d=void 0,e=void 0;;){if(!c){c=b.return;a:for(;;){null===c?A(\"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(Wg(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:Wg(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 $g(a,b){switch(b.tag){case 2: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&&(c[Ma]=d,Te(c,f,e,a,d))}break;case 6:null===b.stateNode?A(\"162\"):void 0;b.stateNode.nodeValue=b.memoizedProps;break;case 3:break;case 15:break;case 16:break;default:A(\"163\")}}function ah(a,b,c){c=Kf(c);c.tag=3;c.payload={element:null};var d=b.value;c.callback=function(){bh(d);Tg(a,b)};return c}\nfunction ch(a,b,c){c=Kf(c);c.tag=3;var d=a.stateNode;null!==d&&\"function\"===typeof d.componentDidCatch&&(c.callback=function(){null===dh?dh=new Set([this]):dh.add(this);var c=b.value,d=b.stack;Tg(a,b);this.componentDidCatch(c,{componentStack:null!==d?d:\"\"})});return c}\nfunction eh(a,b,c,d,e,f){c.effectTag|=512;c.firstEffect=c.lastEffect=null;d=Tf(d,c);a=b;do{switch(a.tag){case 3:a.effectTag|=1024;d=ah(a,d,f);Nf(a,d,f);return;case 2:if(b=d,c=a.stateNode,0===(a.effectTag&64)&&null!==c&&\"function\"===typeof c.componentDidCatch&&(null===dh||!dh.has(c))){a.effectTag|=1024;d=ch(a,b,f);Nf(a,d,f);return}}a=a.return}while(null!==a)}\nfunction fh(a){switch(a.tag){case 2:of(a);var b=a.effectTag;return b&1024?(a.effectTag=b&-1025|64,a):null;case 3:return eg(a),pf(a),b=a.effectTag,b&1024?(a.effectTag=b&-1025|64,a):null;case 5:return fg(a),null;case 16:return b=a.effectTag,b&1024?(a.effectTag=b&-1025|64,a):null;case 4:return eg(a),null;case 13:return Yf(a),null;default:return null}}var gh=af(),hh=2,ih=gh,jh=0,kh=0,lh=!1,S=null,mh=null,T=0,nh=-1,oh=!1,U=null,ph=!1,qh=!1,dh=null;\nfunction rh(){if(null!==S)for(var a=S.return;null!==a;){var b=a;switch(b.tag){case 2:of(b);break;case 3:eg(b);pf(b);break;case 5:fg(b);break;case 4:eg(b);break;case 13:Yf(b)}a=a.return}mh=null;T=0;nh=-1;oh=!1;S=null;qh=!1}\nfunction sh(a){for(;;){var b=a.alternate,c=a.return,d=a.sibling;if(0===(a.effectTag&512)){b=Sg(b,a,T);var e=a;if(1073741823===T||1073741823!==e.expirationTime){var f=0;switch(e.tag){case 3:case 2:var g=e.updateQueue;null!==g&&(f=g.expirationTime)}for(g=e.child;null!==g;)0!==g.expirationTime&&(0===f||f>g.expirationTime)&&(f=g.expirationTime),g=g.sibling;e.expirationTime=f}if(null!==b)return b;null!==c&&0===(c.effectTag&512)&&(null===c.firstEffect&&(c.firstEffect=a.firstEffect),null!==a.lastEffect&&\n(null!==c.lastEffect&&(c.lastEffect.nextEffect=a.firstEffect),c.lastEffect=a.lastEffect),1Ah)&&(Ah=a);return a}\nfunction kg(a,b){for(;null!==a;){if(0===a.expirationTime||a.expirationTime>b)a.expirationTime=b;null!==a.alternate&&(0===a.alternate.expirationTime||a.alternate.expirationTime>b)&&(a.alternate.expirationTime=b);if(null===a.return)if(3===a.tag){var c=a.stateNode;!lh&&0!==T&&bCh&&A(\"185\")}else break;a=a.return}}function ig(){ih=af()-gh;return hh=(ih/10|0)+2}\nfunction Dh(a){var b=kh;kh=2+25*(((ig()-2+500)/25|0)+1);try{return a()}finally{kh=b}}function Eh(a,b,c,d,e){var f=kh;kh=1;try{return a(b,c,d,e)}finally{kh=f}}var Fh=null,V=null,Gh=0,Hh=-1,W=!1,X=null,Y=0,Ah=0,Ih=!1,Jh=!1,Kh=null,Lh=null,Z=!1,Mh=!1,zh=!1,Nh=null,Ch=1E3,Bh=0,Oh=1;function Ph(a){if(0!==Gh){if(a>Gh)return;cf(Hh)}var b=af()-gh;Gh=a;Hh=bf(Qh,{timeout:10*(a-2)-b})}\nfunction wh(a,b){if(null===a.nextScheduledRoot)a.remainingExpirationTime=b,null===V?(Fh=V=a,a.nextScheduledRoot=a):(V=V.nextScheduledRoot=a,V.nextScheduledRoot=Fh);else{var c=a.remainingExpirationTime;if(0===c||b=Y)&&(!Ih||ig()>=Y);)ig(),Rh(X,Y,!Ih),Th();else for(;null!==X&&0!==Y&&(0===a||a>=Y);)Rh(X,Y,!1),Th();null!==Lh&&(Gh=0,Hh=-1);0!==Y&&Ph(Y);Lh=null;Ih=!1;Vh()}function Wh(a,b){W?A(\"253\"):void 0;X=a;Y=b;Rh(a,b,!1);Sh();Vh()}\nfunction Vh(){Bh=0;if(null!==Nh){var a=Nh;Nh=null;for(var b=0;bu&&(y=u,u=l,l=y),y=Sd(q,l),D=Sd(q,u),y&&D&&(1!==z.rangeCount||z.anchorNode!==y.node||z.anchorOffset!==y.offset||z.focusNode!==D.node||z.focusOffset!==D.offset)&&(ja=document.createRange(),ja.setStart(y.node,y.offset),z.removeAllRanges(),l>u?(z.addRange(ja),z.extend(D.node,D.offset)):(ja.setEnd(D.node,D.offset),z.addRange(ja)))));z=[];for(l=q;l=l.parentNode;)1===l.nodeType&&z.push({element:l,left:l.scrollLeft,\ntop:l.scrollTop});q.focus();for(q=0;qOh?!1:Ih=!0}\nfunction bh(a){null===X?A(\"246\"):void 0;X.remainingExpirationTime=0;Jh||(Jh=!0,Kh=a)}function xh(a){null===X?A(\"246\"):void 0;X.remainingExpirationTime=a}function Yh(a,b){var c=Z;Z=!0;try{return a(b)}finally{(Z=c)||W||Sh()}}function Zh(a,b){if(Z&&!Mh){Mh=!0;try{return a(b)}finally{Mh=!1}}return a(b)}function $h(a,b){W?A(\"187\"):void 0;var c=Z;Z=!0;try{return Eh(a,b)}finally{Z=c,Sh()}}function ai(a){var b=Z;Z=!0;try{Eh(a)}finally{(Z=b)||W||Uh(1,!1,null)}}\nfunction bi(a,b,c,d,e){var f=b.current;if(c){c=c._reactInternalFiber;var g;b:{2===id(c)&&2===c.tag?void 0:A(\"170\");for(g=c;3!==g.tag;){if(mf(g)){g=g.stateNode.__reactInternalMemoizedMergedChildContext;break b}(g=g.return)?void 0:A(\"171\")}g=g.stateNode.context}c=mf(c)?rf(c,g):g}else c=ha;null===b.context?b.context=c:b.pendingContext=c;b=e;e=Kf(d);e.payload={element:a};b=void 0===b?null:b;null!==b&&(e.callback=b);Mf(f,e,d);kg(f,d);return d}\nfunction ci(a){var b=a._reactInternalFiber;void 0===b&&(\"function\"===typeof a.render?A(\"188\"):A(\"268\",Object.keys(a)));a=ld(b);return null===a?null:a.stateNode}function di(a,b,c,d){var e=b.current,f=ig();e=jg(f,e);return bi(a,b,c,e,d)}function ei(a){a=a.current;if(!a.child)return null;switch(a.child.tag){case 5:return a.child.stateNode;default:return a.child.stateNode}}\nfunction fi(a){var b=a.findFiberByHostInstance;return Ef(p({},a,{findHostInstanceByFiber:function(a){a=ld(a);return null===a?null:a.stateNode},findFiberByHostInstance:function(a){return b?b(a):null}}))}\nvar gi={updateContainerAtExpirationTime:bi,createContainer:function(a,b,c){return Af(a,b,c)},updateContainer:di,flushRoot:Wh,requestWork:wh,computeUniqueAsyncExpiration:yh,batchedUpdates:Yh,unbatchedUpdates:Zh,deferredUpdates:Dh,syncUpdates:Eh,interactiveUpdates:function(a,b,c){if(zh)return a(b,c);Z||W||0===Ah||(Uh(Ah,!1,null),Ah=0);var d=zh,e=Z;Z=zh=!0;try{return a(b,c)}finally{zh=d,(Z=e)||W||Sh()}},flushInteractiveUpdates:function(){W||0===Ah||(Uh(Ah,!1,null),Ah=0)},flushControlled:ai,flushSync:$h,\ngetPublicRootInstance:ei,findHostInstance:ci,findHostInstanceWithNoPortals:function(a){a=md(a);return null===a?null:a.stateNode},injectIntoDevTools:fi};function ii(a,b,c){var d=3P.length&&P.push(a)}\nfunction S(a,b,e,c){var d=typeof a;if(\"undefined\"===d||\"boolean\"===d)a=null;var g=!1;if(null===a)g=!0;else switch(d){case \"string\":case \"number\":g=!0;break;case \"object\":switch(a.$$typeof){case t:case u:g=!0}}if(g)return e(c,a,\"\"===b?\".\"+T(a,0):b),1;g=0;b=\"\"===b?\".\":b+\":\";if(Array.isArray(a))for(var h=0;h
+- Converted paths to macros where applicable
+- Changed source to GitHub URL using gittag release version
+
* Thu Aug 16 2018 Chris Johnson
- Updated dependencies
diff --git a/rpm/specfiles/simengine-dashboard.spec b/rpm/specfiles/simengine-dashboard.spec
index 851f13a8..53305e49 100644
--- a/rpm/specfiles/simengine-dashboard.spec
+++ b/rpm/specfiles/simengine-dashboard.spec
@@ -1,6 +1,6 @@
Name: simengine-dashboard
Version: 1
-Release: 1
+Release: 2
Summary: SimEngine - Dashboard
URL: https://github.com/Seneca-CDOT/simengine
License: GPLv3+
@@ -20,31 +20,31 @@ Dashboard front-end website files for SimEngine.
%build
%install
-mkdir -p %{buildroot}/var/www/html/
-cp -fRp images %{buildroot}/var/www/html/
-cp -fp vendors.js %{buildroot}/var/www/html/
-cp -fp main.js %{buildroot}/var/www/html/
-cp -fp main.css %{buildroot}/var/www/html/
-cp -fp vendors.css %{buildroot}/var/www/html/
-cp -fp vendors.js.map %{buildroot}/var/www/html/
-cp -fp vendors.css.map %{buildroot}/var/www/html/
-cp -fp main.js.map %{buildroot}/var/www/html/
-cp -fp main.css.map %{buildroot}/var/www/html/
-cp -fp favicon.ico %{buildroot}/var/www/html/
-cp -fp index.html %{buildroot}/var/www/html/
+mkdir -p %{buildroot}%{_localstatedir}/www/html/
+cp -fRp images %{buildroot}%{_localstatedir}/www/html/
+cp -fp vendors.js %{buildroot}%{_localstatedir}/www/html/
+cp -fp main.js %{buildroot}%{_localstatedir}/www/html/
+cp -fp main.css %{buildroot}%{_localstatedir}/www/html/
+cp -fp vendors.css %{buildroot}%{_localstatedir}/www/html/
+cp -fp vendors.js.map %{buildroot}%{_localstatedir}/www/html/
+cp -fp vendors.css.map %{buildroot}%{_localstatedir}/www/html/
+cp -fp main.js.map %{buildroot}%{_localstatedir}/www/html/
+cp -fp main.css.map %{buildroot}%{_localstatedir}/www/html/
+cp -fp favicon.ico %{buildroot}%{_localstatedir}/www/html/
+cp -fp index.html %{buildroot}%{_localstatedir}/www/html/
%files
-/var/www/html/images
-/var/www/html/vendors.js
-/var/www/html/main.js
-/var/www/html/main.css
-/var/www/html/vendors.css
-/var/www/html/vendors.js.map
-/var/www/html/vendors.css.map
-/var/www/html/main.js.map
-/var/www/html/main.css.map
-/var/www/html/favicon.ico
-/var/www/html/index.html
+%{_localstatedir}/www/html/images
+%{_localstatedir}/www/html/vendors.js
+%{_localstatedir}/www/html/main.js
+%{_localstatedir}/www/html/main.css
+%{_localstatedir}/www/html/vendors.css
+%{_localstatedir}/www/html/vendors.js.map
+%{_localstatedir}/www/html/vendors.css.map
+%{_localstatedir}/www/html/main.js.map
+%{_localstatedir}/www/html/main.css.map
+%{_localstatedir}/www/html/favicon.ico
+%{_localstatedir}/www/html/index.html
%post
systemctl enable httpd.service --now
diff --git a/rpm/specfiles/simengine-node.spec b/rpm/specfiles/simengine-node.spec
new file mode 100644
index 00000000..d94e61e6
--- /dev/null
+++ b/rpm/specfiles/simengine-node.spec
@@ -0,0 +1,71 @@
+Name: simengine-dashboard
+Version: 1
+Release: 2
+Summary: SimEngine - Dashboard
+URL: https://github.com/Seneca-CDOT/simengine
+License: GPLv3+
+
+%global gittag 1
+
+Source0: https://github.com/Seneca-CDOT/simengine/archive/{gittag}/simengine-%{version}.tar.gz
+Source1: http://registry.npmjs.org/babel-cli/-/babel-cli-6.26.0.tgz
+Source2: http://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz
+Source3: http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.3.tgz
+Source4: http://registry.npmjs.org/babel-loader/-/babel-loader-7.1.4.tgz
+Source5: http://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz
+Source6: http://registry.npmjs.org/babel-preset-react/-/babel-preset-react-6.24.1.tgz
+Source7: http://registry.npmjs.org/babel-preset-stage-0/-/babel-preset-stage-0-6.24.1.tgz
+Source8: http://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-0.1.19.tgz
+Source9: http://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz
+Source10: http://registry.npmjs.org/eslint/-/eslint-4.19.1.tgz
+Source11: http://registry.npmjs.org/eslint-loader/-/eslint-loader-2.0.0.tgz
+Source12: http://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.12.0.tgz
+Source13: http://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.8.2.tgz
+Source14: http://registry.npmjs.org/extract-text-webpack-plugin/-/extract-text-webpack-plugin-4.0.0-beta.0.tgz
+Source15: http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz
+Source16: http://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz
+Source17: http://registry.npmjs.org/live-server/-/live-server-1.2.0.tgz
+Source18: http://registry.npmjs.org/node-sass/-/node-sass-4.9.0.tgz
+Source19: http://registry.npmjs.org/sass-loader/-/sass-loader-7.0.1.tgz
+Source20: http://registry.npmjs.org/style-loader/-/style-loader-0.21.0.tgz
+Source21: http://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.5.tgz
+Source22: http://registry.npmjs.org/url-loader/-/url-loader-1.0.1.tgz
+Source23: http://registry.npmjs.org/webpack/-/webpack-4.9.1.tgz
+Source24: http://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz
+Source25: http://registry.npmjs.org/webpack-cli/-/webpack-cli-2.1.4.tgz
+Source26: http://registry.npmjs.org/webpack-dashboard/-/webpack-dashboard-2.0.0.tgz
+Source27: http://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.1.4.tgz
+Source28: http://registry.npmjs.org/webpack-merge/-/webpack-merge-4.1.2.tgz
+
+Requires: simengine-database, simengine-core, httpd
+BuildRequires: nodejs-packaging
+
+%description
+Dashboard front-end website files for SimEngine.
+
+%global debug_package %{nil}
+
+%prep
+%autosetup -n simengine-%{version}
+
+%build
+npm build:prod %{_builddir}/%{name}-%{version}/dashboard/frontend/
+
+%install
+mkdir -p %{buildroot}%{_localstatedir}/www/html/
+cp -fRp dashboard/frontend/public/images %{buildroot}%{_localstatedir}/www/html/
+
+%{nodejs_sitelib}/
+
+%files
+%{_localstatedir}/www/html/*
+
+%post
+systemctl enable httpd.service --now
+
+%changelog
+* Fri Aug 24 2018 Chris Johnson
+- Modified Source0 to GitHub location
+
+* Thu Aug 16 2018 Chris Johnson
+- Initial alpha test file
\ No newline at end of file
diff --git a/rpm/specfiles/simengine.spec b/rpm/specfiles/simengine.spec
index 1b27dbe8..3fd4ce6a 100644
--- a/rpm/specfiles/simengine.spec
+++ b/rpm/specfiles/simengine.spec
@@ -1,33 +1,83 @@
Name: simengine
-Version: 1
-Release: 1
-Summary: SimEngine - HA Hardware Simulator
+Version: 3
+Release: 2
+Summary: Hardware Simulation Engine
URL: https://github.com/Seneca-CDOT/simengine
License: GPLv3+
-Source0:
-BuildArch: x86_64
+%global gittag 3
-Conflicts: firewalld
-Requires: iptables-services, nodejs, redis, neo4j, python3-libvirt, OpenIPMI, OpenIPMI-lanserv, OpenIPMI-devel, gcc
+Source0: https://github.com/Seneca-CDOT/%{name}/archive/%{gittag}/%{name}-%{version}.tar.gz
+
+Requires(pre): shadow-utils
+BuildRequires: OpenIPMI-devel, gcc, systemd
+Requires: neo4j, cypher-shell, redis, python-neo4j-driver, python-redis, python3-libvirt, OpenIPMI, OpenIPMI-lanserv, python3-redis, python2-redis, python3-pysnmp, python3-neo4j-driver, httpd
%description
-Hardware simulation engine for Alteeve's Anvil! Intelligent Availability platform and similar HA configurations
+Simengine is a hardware simulation engine that models high-availability setups.
+
+%global debug_package %{nil}
%pre
-systemctl enable iptables --now &> /dev/null
-iptables -F
+systemctl stop neo4j
+pip3 install circuits
+getent group neo4j >/dev/null || groupadd -r neo4j
+getent passwd neo4j >/dev/null || \
+ useradd -r -g neo4j -s /sbin/nologin \
+ -c "Neo4j Database Account" neo4j
+exit 0
%prep
-autosetup -c %{name}
+%autosetup -n %{name}-%{version}
+
+%build
+gcc -shared -o %{_builddir}/%{name}-%{version}/haos_extend.so -fPIC %{_builddir}/%{name}-%{version}/enginecore/ipmi_sim/haos_extend.c
+objcopy --only-keep-debug %{_builddir}/%{name}-%{version}/haos_extend.so %{_builddir}/%{name}-%{version}/haos_extend.debug
+strip --strip-debug --strip-unneeded %{_builddir}/%{name}-%{version}/haos_extend.so
%install
+mkdir -p %{buildroot}%{_sharedstatedir}/neo4j/data/dbms/
+mkdir -p %{buildroot}%{_datadir}/%{name}/
+mkdir -p %{buildroot}%{_libdir}/%{name}/
+mkdir -p %{buildroot}%{_unitdir}/
+mkdir -p %{buildroot}%{_bindir}/
+mkdir -p %{buildroot}%{_var}/www/html/%{name}/
+cp -fRp dashboard/prebuild/* %{buildroot}%{_var}/www/html/%{name}/
+cp -fp database/auth %{buildroot}%{_sharedstatedir}/neo4j/data/dbms/
+cp -fp haos_extend.so %{buildroot}%{_libdir}/%{name}/
+cp -fRp enginecore %{buildroot}%{_datadir}/%{name}/
+cp -fRp data %{buildroot}%{_datadir}/%{name}/
+cp -fp services/simengine-core.service %{buildroot}%{_unitdir}/
+ln -s %{_datadir}/%{name}/enginecore/simengine-cli %{buildroot}%{_bindir}/simengine-cli
+exit 0
%files
+%attr(0644, neo4j, neo4j) %{_sharedstatedir}/neo4j/data/dbms/auth
+%{_libdir}/%{name}/haos_extend.so
+%{_datadir}/%{name}/enginecore
+%{_datadir}/%{name}/data
+%{_unitdir}/simengine-core.service
+%{_bindir}/simengine-cli
+%{_var}/www/html/%{name}/
+%exclude %{_datadir}/%{name}/enginecore/.pylintrc
+%exclude %{_datadir}/%{name}/enginecore/ipmi_sim/haos_extend.c
+%exclude %{_datadir}/%{name}/enginecore/ipmi_sim/.gitignore
%post
-
-%postun
+systemctl daemon-reload
+systemctl enable neo4j --now
+systemctl enable redis --now
+sleep 10
+echo "CREATE CONSTRAINT ON (n:Asset) ASSERT (n.key) IS UNIQUE;" | cypher-shell -u simengine -p simengine
+systemctl enable simengine-core.service --now
%changelog
-* Mon Jul 23 2018 Chris Johnson
+* Thu Aug 23 2018 Chris Johnson 2-2
+- Converted paths to macros where applicable
+- Changed source to GitHub URL using gittag release version
+
+* Thu Aug 16 2018 Chris Johnson 1-2
+- Updated dependencies
+
+* Mon Jul 23 2018 Chris Johnson 1-1
+- Initial alpha test file
\ No newline at end of file