+ */
+
+ 'use strict';
+
+ var util = __webpack_require__(8);
+
+ var layout = ['{{slider}}
', '{{huebar}}
'].join('\n');
+
+ var SVGSlider = [''].join('\n');
+
+ var VMLSlider = ['', '', '', '', '', '', '', '', '
'].join('\n');
+
+ var SVGHuebar = [''].join('\n');
+
+ var VMLHuebar = ['', '', '', '', '', '
'].join('\n');
+
+ var isOldBrowser = util.browser.msie && util.browser.version < 9;
+
+ if (isOldBrowser) {
+ global.document.namespaces.add('v', 'urn:schemas-microsoft-com:vml');
+ }
+
+ module.exports = {
+ layout: layout,
+ slider: isOldBrowser ? VMLSlider : SVGSlider,
+ huebar: isOldBrowser ? VMLHuebar : SVGHuebar
+ };
+ /* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+ /***/ })
+ /******/ ])
+ });
+ ;
+
+/***/ }),
+/* 83 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _tuiCodeSnippet = __webpack_require__(3);
+
+ var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
+
+ var _util = __webpack_require__(72);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ /**
+ * Range control class
+ * @class
+ * @ignore
+ */
+ var Range = function () {
+ function Range(rangeElement) {
+ var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+ _classCallCheck(this, Range);
+
+ this._value = options.value || 0;
+ this.rangeElement = rangeElement;
+ this._drawRangeElement();
+
+ this.rangeWidth = (0, _util.toInteger)(window.getComputedStyle(rangeElement, null).width) - 12;
+ this._min = options.min || 0;
+ this._max = options.max || 100;
+ this._absMax = this._min * -1 + this._max;
+ this.realTimeEvent = options.realTimeEvent || false;
+
+ this._addClickEvent();
+ this._addDragEvent();
+ this.value = options.value;
+ this.trigger('change');
+ }
+
+ /**
+ * Set range max value and re position cursor
+ * @param {number} maxValue - max value
+ */
+
+
+ _createClass(Range, [{
+ key: 'trigger',
+
+
+ /**
+ * event tirigger
+ * @param {string} type - type
+ */
+ value: function trigger(type) {
+ this.fire(type, this._value);
+ }
+
+ /**
+ * Make range element
+ * @private
+ */
+
+ }, {
+ key: '_drawRangeElement',
+ value: function _drawRangeElement() {
+ this.rangeElement.classList.add('tui-image-editor-range');
+
+ this.bar = document.createElement('div');
+ this.bar.className = 'tui-image-editor-virtual-range-bar';
+
+ this.subbar = document.createElement('div');
+ this.subbar.className = 'tui-image-editor-virtual-range-subbar';
+
+ this.pointer = document.createElement('div');
+ this.pointer.className = 'tui-image-editor-virtual-range-pointer';
+
+ this.bar.appendChild(this.subbar);
+ this.bar.appendChild(this.pointer);
+ this.rangeElement.appendChild(this.bar);
+ }
+
+ /**
+ * Add Range click event
+ * @private
+ */
+
+ }, {
+ key: '_addClickEvent',
+ value: function _addClickEvent() {
+ var _this = this;
+
+ this.rangeElement.addEventListener('click', function (event) {
+ event.stopPropagation();
+ if (event.target.className !== 'tui-image-editor-range') {
+ return;
+ }
+ var touchPx = event.offsetX;
+ var ratio = touchPx / _this.rangeWidth;
+ var value = _this._absMax * ratio + _this._min;
+ _this.pointer.style.left = ratio * _this.rangeWidth + 'px';
+ _this.subbar.style.right = (1 - ratio) * _this.rangeWidth + 'px';
+ _this._value = value;
+
+ _this.fire('change', value);
+ });
+ }
+
+ /**
+ * Add Range drag event
+ * @private
+ */
+
+ }, {
+ key: '_addDragEvent',
+ value: function _addDragEvent() {
+ var _this2 = this;
+
+ this.pointer.addEventListener('mousedown', function (event) {
+ _this2.firstPosition = event.screenX;
+ _this2.firstLeft = (0, _util.toInteger)(_this2.pointer.style.left) || 0;
+ _this2.dragEventHandler = {
+ changeAngle: _this2._changeAngle.bind(_this2),
+ stopChangingAngle: _this2._stopChangingAngle.bind(_this2)
+ };
+
+ document.addEventListener('mousemove', _this2.dragEventHandler.changeAngle);
+ document.addEventListener('mouseup', _this2.dragEventHandler.stopChangingAngle);
+ });
+ }
+
+ /**
+ * change angle event
+ * @param {object} event - change event
+ * @private
+ */
+
+ }, {
+ key: '_changeAngle',
+ value: function _changeAngle(event) {
+ var changePosition = event.screenX;
+ var diffPosition = changePosition - this.firstPosition;
+ var touchPx = this.firstLeft + diffPosition;
+ touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx;
+ touchPx = touchPx < 0 ? 0 : touchPx;
+
+ this.pointer.style.left = touchPx + 'px';
+ this.subbar.style.right = this.rangeWidth - touchPx + 'px';
+ var ratio = touchPx / this.rangeWidth;
+ var value = this._absMax * ratio + this._min;
+
+ this._value = value;
+
+ if (this.realTimeEvent) {
+ this.fire('change', value);
+ }
+ }
+
+ /**
+ * stop change angle event
+ * @private
+ */
+
+ }, {
+ key: '_stopChangingAngle',
+ value: function _stopChangingAngle() {
+ this.fire('change', this._value);
+ document.removeEventListener('mousemove', this.dragEventHandler.changeAngle);
+ document.removeEventListener('mouseup', this.dragEventHandler.stopChangingAngle);
+ }
+ }, {
+ key: 'max',
+ set: function set(maxValue) {
+ this._max = maxValue;
+ this._absMax = this._min * -1 + this._max;
+ this.value = this._value;
+ },
+ get: function get() {
+ return this._max;
+ }
+
+ /**
+ * Get range value
+ * @returns {Number} range value
+ */
+
+ }, {
+ key: 'value',
+ get: function get() {
+ return this._value;
+ }
+
+ /**
+ * Set range value
+ * @param {Number} value range value
+ * @param {Boolean} fire whether fire custom event or not
+ */
+ ,
+ set: function set(value) {
+ var absValue = value - this._min;
+ var leftPosition = absValue * this.rangeWidth / this._absMax;
+
+ if (this.rangeWidth < leftPosition) {
+ leftPosition = this.rangeWidth;
+ }
+
+ this.pointer.style.left = leftPosition + 'px';
+ this.subbar.style.right = this.rangeWidth - leftPosition + 'px';
+ this._value = value;
+ }
+ }]);
+
+ return Range;
+ }();
+
+ _tuiCodeSnippet2.default.CustomEvents.mixin(Range);
+ exports.default = Range;
+
+/***/ }),
+/* 84 */
+/***/ (function(module, exports) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ /**
+ * Submenu Base Class
+ * @class
+ * @ignore
+ */
+ var Submenu = function () {
+ function Submenu(subMenuElement, _ref) {
+ var name = _ref.name,
+ iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition,
+ templateHtml = _ref.templateHtml;
+
+ _classCallCheck(this, Submenu);
+
+ this.selector = function (str) {
+ return subMenuElement.querySelector(str);
+ };
+ this.menuBarPosition = menuBarPosition;
+ this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';
+ this._makeSubMenuElement(subMenuElement, {
+ name: name,
+ iconStyle: iconStyle,
+ templateHtml: templateHtml
+ });
+ }
+
+ /**
+ * Get butten type
+ * @param {HTMLElement} button - event target element
+ * @param {array} buttonNames - Array of button names
+ * @returns {string} - button type
+ */
+
+
+ _createClass(Submenu, [{
+ key: 'getButtonType',
+ value: function getButtonType(button, buttonNames) {
+ return button.className.match(RegExp('(' + buttonNames.join('|') + ')'))[0];
+ }
+
+ /**
+ * Get butten type
+ * @param {HTMLElement} target - event target element
+ * @param {string} removeClass - remove class name
+ * @param {string} addClass - add class name
+ */
+
+ }, {
+ key: 'changeClass',
+ value: function changeClass(target, removeClass, addClass) {
+ target.classList.remove(removeClass);
+ target.classList.add(addClass);
+ }
+
+ /**
+ * Interface method whose implementation is optional.
+ * Returns the menu to its default state.
+ */
+
+ }, {
+ key: 'changeStandbyMode',
+ value: function changeStandbyMode() {}
+
+ /**
+ * Interface method whose implementation is optional.
+ * Executed when the menu starts.
+ */
+
+ }, {
+ key: 'changeStartMode',
+ value: function changeStartMode() {}
+
+ /**
+ * Make submenu dom element
+ * @param {HTMLElement} subMenuElement - subment dom element
+ * @param {Object} iconStyle - icon style
+ * @private
+ */
+
+ }, {
+ key: '_makeSubMenuElement',
+ value: function _makeSubMenuElement(subMenuElement, _ref2) {
+ var name = _ref2.name,
+ iconStyle = _ref2.iconStyle,
+ templateHtml = _ref2.templateHtml;
+
+ var iconSubMenu = document.createElement('div');
+ iconSubMenu.className = 'tui-image-editor-menu-' + name;
+ iconSubMenu.innerHTML = templateHtml({ iconStyle: iconStyle });
+
+ subMenuElement.appendChild(iconSubMenu);
+ }
+ }]);
+
+ return Submenu;
+ }();
+
+ exports.default = Submenu;
+
+/***/ }),
+/* 85 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 86 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _crop = __webpack_require__(87);
+
+ var _crop2 = _interopRequireDefault(_crop);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ /**
+ * Crop ui class
+ * @class
+ * @ignore
+ */
+ var Crop = function (_Submenu) {
+ _inherits(Crop, _Submenu);
+
+ function Crop(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Crop);
+
+ var _this = _possibleConstructorReturn(this, (Crop.__proto__ || Object.getPrototypeOf(Crop)).call(this, subMenuElement, {
+ name: 'crop',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _crop2.default
+ }));
+
+ _this.status = 'active';
+ _this._els = {
+ apply: _this.selector('#tie-crop-button .apply'),
+ cancel: _this.selector('#tie-crop-button .cancel')
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for crop
+ * @param {Object} actions - actions for crop
+ * @param {Function} actions.crop - crop action
+ * @param {Function} actions.cancel - cancel action
+ */
+
+
+ _createClass(Crop, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ var _this2 = this;
+
+ this.actions = actions;
+ this._els.apply.addEventListener('click', function () {
+ _this2.actions.crop();
+ _this2._els.apply.classList.remove('active');
+ });
+
+ this._els.cancel.addEventListener('click', function () {
+ _this2.actions.cancel();
+ _this2._els.apply.classList.remove('active');
+ });
+ }
+
+ /**
+ * Executed when the menu starts.
+ */
+
+ }, {
+ key: 'changeStartMode',
+ value: function changeStartMode() {
+ this.actions.modeChange('crop');
+ }
+
+ /**
+ * Returns the menu to its default state.
+ */
+
+ }, {
+ key: 'changeStandbyMode',
+ value: function changeStandbyMode() {
+ this.actions.stopDrawingMode();
+ }
+
+ /**
+ * Change apply button status
+ * @param {Boolean} enableStatus - apply button status
+ */
+
+ }, {
+ key: 'changeApplyButtonStatus',
+ value: function changeApplyButtonStatus(enableStatus) {
+ if (enableStatus) {
+ this._els.apply.classList.add('active');
+ } else {
+ this._els.apply.classList.remove('active');
+ }
+ }
+ }]);
+
+ return Crop;
+ }(_submenuBase2.default);
+
+ exports.default = Crop;
+
+/***/ }),
+/* 87 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 88 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _tuiCodeSnippet = __webpack_require__(3);
+
+ var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _flip = __webpack_require__(89);
+
+ var _flip2 = _interopRequireDefault(_flip);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ /**
+ * Flip ui class
+ * @class
+ * @ignore
+ */
+ var Flip = function (_Submenu) {
+ _inherits(Flip, _Submenu);
+
+ function Flip(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Flip);
+
+ var _this = _possibleConstructorReturn(this, (Flip.__proto__ || Object.getPrototypeOf(Flip)).call(this, subMenuElement, {
+ name: 'flip',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _flip2.default
+ }));
+
+ _this.flipStatus = false;
+
+ _this._els = {
+ flipButton: _this.selector('#tie-flip-button')
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for flip
+ * @param {Object} actions - actions for flip
+ * @param {Function} actions.flip - flip action
+ */
+
+
+ _createClass(Flip, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ this._actions = actions;
+ this._els.flipButton.addEventListener('click', this._changeFlip.bind(this));
+ }
+
+ /**
+ * change Flip status
+ * @param {object} event - change event
+ * @private
+ */
+
+ }, {
+ key: '_changeFlip',
+ value: function _changeFlip(event) {
+ var _this2 = this;
+
+ var button = event.target.closest('.tui-image-editor-button');
+ if (button) {
+ var flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']);
+ if (!this.flipStatus && flipType === 'resetFlip') {
+ return;
+ }
+
+ this._actions.flip(flipType).then(function (flipStatus) {
+ var flipClassList = _this2._els.flipButton.classList;
+ _this2.flipStatus = false;
+
+ flipClassList.remove('resetFlip');
+ _tuiCodeSnippet2.default.forEach(['flipX', 'flipY'], function (type) {
+ flipClassList.remove(type);
+ if (flipStatus[type]) {
+ flipClassList.add(type);
+ flipClassList.add('resetFlip');
+ _this2.flipStatus = true;
+ }
+ });
+ });
+ }
+ }
+ }]);
+
+ return Flip;
+ }(_submenuBase2.default);
+
+ exports.default = Flip;
+
+/***/ }),
+/* 89 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 90 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _range = __webpack_require__(83);
+
+ var _range2 = _interopRequireDefault(_range);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _rotate = __webpack_require__(91);
+
+ var _rotate2 = _interopRequireDefault(_rotate);
+
+ var _util = __webpack_require__(72);
+
+ var _consts = __webpack_require__(73);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ var CLOCKWISE = 30;
+ var COUNTERCLOCKWISE = -30;
+
+ /**
+ * Rotate ui class
+ * @class
+ * @ignore
+ */
+
+ var Rotate = function (_Submenu) {
+ _inherits(Rotate, _Submenu);
+
+ function Rotate(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Rotate);
+
+ var _this = _possibleConstructorReturn(this, (Rotate.__proto__ || Object.getPrototypeOf(Rotate)).call(this, subMenuElement, {
+ name: 'rotate',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _rotate2.default
+ }));
+
+ _this._els = {
+ rotateButton: _this.selector('#tie-retate-button'),
+ rotateRange: new _range2.default(_this.selector('#tie-rotate-range'), _consts.defaultRotateRangeValus),
+ rotateRangeValue: _this.selector('#tie-ratate-range-value')
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for rotate
+ * @param {Object} actions - actions for crop
+ * @param {Function} actions.rotate - rotate action
+ * @param {Function} actions.setAngle - set angle action
+ */
+
+
+ _createClass(Rotate, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ // {rotate, setAngle}
+ this.actions = actions;
+ this._els.rotateButton.addEventListener('click', this._changeRotateForButton.bind(this));
+ this._els.rotateRange.on('change', this._changeRotateForRange.bind(this));
+ this._els.rotateRangeValue.setAttribute('readonly', true);
+ }
+
+ /**
+ * Change rotate for range
+ * @param {number} value - angle value
+ * @private
+ */
+
+ }, {
+ key: '_changeRotateForRange',
+ value: function _changeRotateForRange(value) {
+ var angle = (0, _util.toInteger)(value);
+ this._els.rotateRangeValue.value = angle;
+ this.actions.setAngle(angle);
+ }
+
+ /**
+ * Change rotate for button
+ * @param {object} event - add button event object
+ * @private
+ */
+
+ }, {
+ key: '_changeRotateForButton',
+ value: function _changeRotateForButton(event) {
+ var button = event.target.closest('.tui-image-editor-button');
+ if (button) {
+ var rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']);
+ var rotateAngle = {
+ clockwise: CLOCKWISE,
+ counterclockwise: COUNTERCLOCKWISE
+ }[rotateType];
+ this.actions.rotate(rotateAngle);
+ }
+ }
+ }]);
+
+ return Rotate;
+ }(_submenuBase2.default);
+
+ exports.default = Rotate;
+
+/***/ }),
+/* 91 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 92 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _range = __webpack_require__(83);
+
+ var _range2 = _interopRequireDefault(_range);
+
+ var _colorpicker = __webpack_require__(81);
+
+ var _colorpicker2 = _interopRequireDefault(_colorpicker);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _text = __webpack_require__(93);
+
+ var _text2 = _interopRequireDefault(_text);
+
+ var _util = __webpack_require__(72);
+
+ var _consts = __webpack_require__(73);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ /**
+ * Crop ui class
+ * @class
+ * @ignore
+ */
+ var Text = function (_Submenu) {
+ _inherits(Text, _Submenu);
+
+ function Text(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Text);
+
+ var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, subMenuElement, {
+ name: 'text',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _text2.default
+ }));
+
+ _this.effect = {
+ bold: false,
+ italic: false,
+ underline: false
+ };
+ _this.align = 'left';
+ _this._els = {
+ textEffectButton: _this.selector('#tie-text-effect-button'),
+ textAlignButton: _this.selector('#tie-text-align-button'),
+ textColorpicker: new _colorpicker2.default(_this.selector('#tie-text-color'), '#ffbb3b', _this.toggleDirection),
+ textRange: new _range2.default(_this.selector('#tie-text-range'), _consts.defaultTextRangeValus),
+ textRangeValue: _this.selector('#tie-text-range-value')
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for text
+ * @param {Object} actions - actions for text
+ * @param {Function} actions.changeTextStyle - change text style
+ */
+
+
+ _createClass(Text, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ this.actions = actions;
+ this._els.textEffectButton.addEventListener('click', this._setTextEffectHandler.bind(this));
+ this._els.textAlignButton.addEventListener('click', this._setTextAlignHandler.bind(this));
+ this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));
+ this._els.textRangeValue.value = this._els.textRange.value;
+ this._els.textRangeValue.setAttribute('readonly', true);
+ this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));
+ }
+
+ /**
+ * Returns the menu to its default state.
+ */
+
+ }, {
+ key: 'changeStandbyMode',
+ value: function changeStandbyMode() {
+ this.actions.stopDrawingMode();
+ }
+
+ /**
+ * Executed when the menu starts.
+ */
+
+ }, {
+ key: 'changeStartMode',
+ value: function changeStartMode() {
+ this.actions.modeChange('text');
+ }
+
+ /**
+ * Get text color
+ * @returns {string} - text color
+ */
+
+ }, {
+ key: '_setTextEffectHandler',
+
+
+ /**
+ * text effect set handler
+ * @param {object} event - add button event object
+ * @private
+ */
+ value: function _setTextEffectHandler(event) {
+ var button = event.target.closest('.tui-image-editor-button');
+
+ var _button$className$mat = button.className.match(/(bold|italic|underline)/),
+ styleType = _button$className$mat[0];
+
+ var styleObj = {
+ 'bold': { fontWeight: 'bold' },
+ 'italic': { fontStyle: 'italic' },
+ 'underline': { textDecoration: 'underline' }
+ }[styleType];
+
+ this.effect[styleType] = !this.effect[styleType];
+ button.classList.toggle('active');
+ this.actions.changeTextStyle(styleObj);
+ }
+
+ /**
+ * text effect set handler
+ * @param {object} event - add button event object
+ * @private
+ */
+
+ }, {
+ key: '_setTextAlignHandler',
+ value: function _setTextAlignHandler(event) {
+ var button = event.target.closest('.tui-image-editor-button');
+ if (button) {
+ var styleType = this.getButtonType(button, ['left', 'center', 'right']);
+
+ event.currentTarget.classList.remove(this.align);
+ if (this.align !== styleType) {
+ event.currentTarget.classList.add(styleType);
+ }
+ this.actions.changeTextStyle({ textAlign: styleType });
+
+ this.align = styleType;
+ }
+ }
+
+ /**
+ * text align set handler
+ * @param {number} value - range value
+ * @private
+ */
+
+ }, {
+ key: '_changeTextRnageHandler',
+ value: function _changeTextRnageHandler(value) {
+ value = (0, _util.toInteger)(value);
+ if ((0, _util.toInteger)(this._els.textRangeValue.value) !== value) {
+ this.actions.changeTextStyle({
+ fontSize: value
+ });
+ this._els.textRangeValue.value = value;
+ }
+ }
+
+ /**
+ * change color handler
+ * @param {string} color - change color string
+ * @private
+ */
+
+ }, {
+ key: '_changeColorHandler',
+ value: function _changeColorHandler(color) {
+ color = color || 'transparent';
+ this.actions.changeTextStyle({
+ 'fill': color
+ });
+ }
+ }, {
+ key: 'textColor',
+ get: function get() {
+ return this._els.textColorpicker.color;
+ }
+
+ /**
+ * Get text size
+ * @returns {string} - text size
+ */
+
+ }, {
+ key: 'fontSize',
+ get: function get() {
+ return this._els.textRange.value;
+ }
+
+ /**
+ * Set text size
+ * @param {Number} value - text size
+ */
+ ,
+ set: function set(value) {
+ this._els.textRange.value = value;
+ this._els.textRangeValue.value = value;
+ }
+ }]);
+
+ return Text;
+ }(_submenuBase2.default);
+
+ exports.default = Text;
+
+/***/ }),
+/* 93 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 94 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _util = __webpack_require__(72);
+
+ var _util2 = _interopRequireDefault(_util);
+
+ var _mask = __webpack_require__(95);
+
+ var _mask2 = _interopRequireDefault(_mask);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ /**
+ * Mask ui class
+ * @class
+ * @ignore
+ */
+ var Mask = function (_Submenu) {
+ _inherits(Mask, _Submenu);
+
+ function Mask(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Mask);
+
+ var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, subMenuElement, {
+ name: 'mask',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _mask2.default
+ }));
+
+ _this._els = {
+ applyButton: _this.selector('#tie-mask-apply'),
+ maskImageButton: _this.selector('#tie-mask-image-file')
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for mask
+ * @param {Object} actions - actions for crop
+ * @param {Function} actions.loadImageFromURL - load image action
+ * @param {Function} actions.applyFilter - apply filter action
+ */
+
+
+ _createClass(Mask, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ this.actions = actions;
+ this._els.maskImageButton.addEventListener('change', this._loadMaskFile.bind(this));
+ this._els.applyButton.addEventListener('click', this._applyMask.bind(this));
+ }
+
+ /**
+ * Apply mask
+ * @private
+ */
+
+ }, {
+ key: '_applyMask',
+ value: function _applyMask() {
+ this.actions.applyFilter();
+ this._els.applyButton.classList.remove('active');
+ }
+
+ /**
+ * Load mask file
+ * @param {object} event - File change event object
+ * @private
+ */
+
+ }, {
+ key: '_loadMaskFile',
+ value: function _loadMaskFile(event) {
+ var imgUrl = void 0;
+
+ if (!_util2.default.isSupportFileApi()) {
+ alert('This browser does not support file-api');
+ }
+
+ var _event$target$files = event.target.files,
+ file = _event$target$files[0];
+
+
+ if (file) {
+ imgUrl = URL.createObjectURL(file);
+ this.actions.loadImageFromURL(imgUrl, file);
+ this._els.applyButton.classList.add('active');
+ }
+ }
+ }]);
+
+ return Mask;
+ }(_submenuBase2.default);
+
+ exports.default = Mask;
+
+/***/ }),
+/* 95 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 96 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _tuiCodeSnippet = __webpack_require__(3);
+
+ var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
+
+ var _colorpicker = __webpack_require__(81);
+
+ var _colorpicker2 = _interopRequireDefault(_colorpicker);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _icon = __webpack_require__(97);
+
+ var _icon2 = _interopRequireDefault(_icon);
+
+ var _util = __webpack_require__(72);
+
+ var _consts = __webpack_require__(73);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ /**
+ * Icon ui class
+ * @class
+ * @ignore
+ */
+ var Icon = function (_Submenu) {
+ _inherits(Icon, _Submenu);
+
+ function Icon(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Icon);
+
+ var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, subMenuElement, {
+ name: 'icon',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _icon2.default
+ }));
+
+ _this.iconType = null;
+ _this._iconMap = {};
+
+ _this._els = {
+ registIconButton: _this.selector('#tie-icon-image-file'),
+ addIconButton: _this.selector('#tie-icon-add-button'),
+ iconColorpicker: new _colorpicker2.default(_this.selector('#tie-icon-color'), '#ffbb3b', _this.toggleDirection)
+ };
+ return _this;
+ }
+
+ /**
+ * Add event for icon
+ * @param {Object} actions - actions for icon
+ * @param {Function} actions.registCustomIcon - register icon
+ * @param {Function} actions.addIcon - add icon
+ * @param {Function} actions.changeColor - change icon color
+ */
+
+
+ _createClass(Icon, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ this.actions = actions;
+
+ this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this));
+ this._els.registIconButton.addEventListener('change', this._registeIconHandler.bind(this));
+ this._els.addIconButton.addEventListener('click', this._addIconHandler.bind(this));
+ }
+
+ /**
+ * Clear icon type
+ */
+
+ }, {
+ key: 'clearIconType',
+ value: function clearIconType() {
+ this._els.addIconButton.classList.remove(this.iconType);
+ this.iconType = null;
+ }
+
+ /**
+ * Register default icon
+ */
+
+ }, {
+ key: 'registDefaultIcon',
+ value: function registDefaultIcon() {
+ var _this2 = this;
+
+ _tuiCodeSnippet2.default.forEach(_consts.defaultIconPath, function (path, type) {
+ _this2.actions.registDefalutIcons(type, path);
+ });
+ }
+
+ /**
+ * Set icon picker color
+ * @param {string} iconColor - rgb color string
+ */
+
+ }, {
+ key: 'setIconPickerColor',
+ value: function setIconPickerColor(iconColor) {
+ this._els.iconColorpicker.color = iconColor;
+ }
+
+ /**
+ * Returns the menu to its default state.
+ */
+
+ }, {
+ key: 'changeStandbyMode',
+ value: function changeStandbyMode() {
+ this.clearIconType();
+ this.actions.cancelAddIcon();
+ }
+
+ /**
+ * Change icon color
+ * @param {string} color - color for change
+ * @private
+ */
+
+ }, {
+ key: '_changeColorHandler',
+ value: function _changeColorHandler(color) {
+ color = color || 'transparent';
+ this.actions.changeColor(color);
+ }
+
+ /**
+ * Change icon color
+ * @param {object} event - add button event object
+ * @private
+ */
+
+ }, {
+ key: '_addIconHandler',
+ value: function _addIconHandler(event) {
+ var button = event.target.closest('.tui-image-editor-button');
+
+ if (button) {
+ var iconType = button.getAttribute('data-icontype');
+ var iconColor = this._els.iconColorpicker.color;
+ this.actions.discardSelection();
+ this.actions.changeSelectableAll(false);
+ this._els.addIconButton.classList.remove(this.iconType);
+ this._els.addIconButton.classList.add(iconType);
+
+ if (this.iconType === iconType) {
+ this.changeStandbyMode();
+ } else {
+ this.actions.addIcon(iconType, iconColor);
+ this.iconType = iconType;
+ }
+ }
+ }
+
+ /**
+ * register icon
+ * @param {object} event - file change event object
+ * @private
+ */
+
+ }, {
+ key: '_registeIconHandler',
+ value: function _registeIconHandler(event) {
+ var imgUrl = void 0;
+
+ if (!_util.isSupportFileApi) {
+ alert('This browser does not support file-api');
+ }
+
+ var _event$target$files = event.target.files,
+ file = _event$target$files[0];
+
+
+ if (file) {
+ imgUrl = URL.createObjectURL(file);
+ this.actions.registCustomIcon(imgUrl, file);
+ }
+ }
+ }]);
+
+ return Icon;
+ }(_submenuBase2.default);
+
+ exports.default = Icon;
+
+/***/ }),
+/* 97 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 98 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _util = __webpack_require__(72);
+
+ var _util2 = _interopRequireDefault(_util);
+
+ var _colorpicker = __webpack_require__(81);
+
+ var _colorpicker2 = _interopRequireDefault(_colorpicker);
+
+ var _range = __webpack_require__(83);
+
+ var _range2 = _interopRequireDefault(_range);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _draw = __webpack_require__(99);
+
+ var _draw2 = _interopRequireDefault(_draw);
+
+ var _consts = __webpack_require__(73);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ var DRAW_OPACITY = 0.7;
+
+ /**
+ * Draw ui class
+ * @class
+ * @ignore
+ */
+
+ var Draw = function (_Submenu) {
+ _inherits(Draw, _Submenu);
+
+ function Draw(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Draw);
+
+ var _this = _possibleConstructorReturn(this, (Draw.__proto__ || Object.getPrototypeOf(Draw)).call(this, subMenuElement, {
+ name: 'draw',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _draw2.default
+ }));
+
+ _this._els = {
+ lineSelectButton: _this.selector('#tie-draw-line-select-button'),
+ drawColorpicker: new _colorpicker2.default(_this.selector('#tie-draw-color'), '#00a9ff', _this.toggleDirection),
+ drawRange: new _range2.default(_this.selector('#tie-draw-range'), _consts.defaultDrawRangeValus),
+ drawRangeValue: _this.selector('#tie-draw-range-value')
+ };
+
+ _this.type = null;
+ _this.color = _this._els.drawColorpicker.color;
+ _this.width = _this._els.drawRange.value;
+ return _this;
+ }
+
+ /**
+ * Add event for draw
+ * @param {Object} actions - actions for crop
+ * @param {Function} actions.setDrawMode - set draw mode
+ */
+
+
+ _createClass(Draw, [{
+ key: 'addEvent',
+ value: function addEvent(actions) {
+ this.actions = actions;
+
+ this._els.lineSelectButton.addEventListener('click', this._changeDrawType.bind(this));
+ this._els.drawColorpicker.on('change', this._changeDrawColor.bind(this));
+ this._els.drawRange.on('change', this._changeDrawRange.bind(this));
+ this._els.drawRangeValue.value = this._els.drawRange.value;
+ this._els.drawRangeValue.setAttribute('readonly', true);
+ }
+
+ /**
+ * set draw mode - action runner
+ */
+
+ }, {
+ key: 'setDrawMode',
+ value: function setDrawMode() {
+ this.actions.setDrawMode(this.type, {
+ width: this.width,
+ color: _util2.default.getRgb(this.color, DRAW_OPACITY)
+ });
+ }
+
+ /**
+ * Returns the menu to its default state.
+ */
+
+ }, {
+ key: 'changeStandbyMode',
+ value: function changeStandbyMode() {
+ this.type = null;
+ this.actions.stopDrawingMode();
+ this.actions.changeSelectableAll(true);
+ this._els.lineSelectButton.classList.remove('free');
+ this._els.lineSelectButton.classList.remove('line');
+ }
+
+ /**
+ * Executed when the menu starts.
+ */
+
+ }, {
+ key: 'changeStartMode',
+ value: function changeStartMode() {
+ this.type = 'free';
+ this._els.lineSelectButton.classList.add('free');
+ this.setDrawMode();
+ }
+
+ /**
+ * Change draw type event
+ * @param {object} event - line select event
+ * @private
+ */
+
+ }, {
+ key: '_changeDrawType',
+ value: function _changeDrawType(event) {
+ var button = event.target.closest('.tui-image-editor-button');
+ if (button) {
+ var lineType = this.getButtonType(button, ['free', 'line']);
+ this.actions.discardSelection();
+
+ if (this.type === lineType) {
+ this.changeStandbyMode();
+
+ return;
+ }
+
+ this.changeStandbyMode();
+ this.type = lineType;
+ this._els.lineSelectButton.classList.add(lineType);
+ this.setDrawMode();
+ }
+ }
+
+ /**
+ * Change drawing color
+ * @param {string} color - select drawing color
+ * @private
+ */
+
+ }, {
+ key: '_changeDrawColor',
+ value: function _changeDrawColor(color) {
+ this.color = color || 'transparent';
+ if (!this.type) {
+ this.changeStartMode();
+ } else {
+ this.setDrawMode();
+ }
+ }
+
+ /**
+ * Change drawing Range
+ * @param {number} value - select drawing range
+ * @private
+ */
+
+ }, {
+ key: '_changeDrawRange',
+ value: function _changeDrawRange(value) {
+ value = _util2.default.toInteger(value);
+ this._els.drawRangeValue.value = value;
+ this.width = value;
+ if (!this.type) {
+ this.changeStartMode();
+ } else {
+ this.setDrawMode();
+ }
+ }
+ }]);
+
+ return Draw;
+ }(_submenuBase2.default);
+
+ exports.default = Draw;
+
+/***/ }),
+/* 99 */
+/***/ (function(module, exports) {
+
+ "use strict";
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ exports.default = function (_ref) {
+ var _ref$iconStyle = _ref.iconStyle,
+ normal = _ref$iconStyle.normal,
+ active = _ref$iconStyle.active;
+ return "\n \n";
+ };
+
+/***/ }),
+/* 100 */
+/***/ (function(module, exports, __webpack_require__) {
+
+ 'use strict';
+
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
+
+ var _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; }; }();
+
+ var _tuiCodeSnippet = __webpack_require__(3);
+
+ var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
+
+ var _colorpicker = __webpack_require__(81);
+
+ var _colorpicker2 = _interopRequireDefault(_colorpicker);
+
+ var _range = __webpack_require__(83);
+
+ var _range2 = _interopRequireDefault(_range);
+
+ var _submenuBase = __webpack_require__(84);
+
+ var _submenuBase2 = _interopRequireDefault(_submenuBase);
+
+ var _filter = __webpack_require__(101);
+
+ var _filter2 = _interopRequireDefault(_filter);
+
+ var _util = __webpack_require__(72);
+
+ var _consts = __webpack_require__(73);
+
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+ function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+ var PICKER_CONTROL_HEIGHT = '130px';
+ var BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken'];
+ var FILTER_OPTIONS = ['grayscale', 'invert', 'sepia', 'sepia2', 'blur', 'sharpen', 'emboss', 'remove-white', 'gradient-transparency', 'brightness', 'noise', 'pixelate', 'color-filter', 'tint', 'multiply', 'blend'];
+
+ /**
+ * Filter ui class
+ * @class
+ * @ignore
+ */
+
+ var Filter = function (_Submenu) {
+ _inherits(Filter, _Submenu);
+
+ function Filter(subMenuElement, _ref) {
+ var iconStyle = _ref.iconStyle,
+ menuBarPosition = _ref.menuBarPosition;
+
+ _classCallCheck(this, Filter);
+
+ var _this = _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, subMenuElement, {
+ name: 'filter',
+ iconStyle: iconStyle,
+ menuBarPosition: menuBarPosition,
+ templateHtml: _filter2.default
+ }));
+
+ _this.checkedMap = {};
+ _this._makeControlElement();
+ return _this;
+ }
+
+ /**
+ * Add event for filter
+ * @param {Object} actions - actions for crop
+ * @param {Function} actions.applyFilter - apply filter option
+ */
+
+
+ _createClass(Filter, [{
+ key: 'addEvent',
+ value: function addEvent(_ref2) {
+ var _this2 = this;
+
+ var applyFilter = _ref2.applyFilter;
+
+ var changeRangeValue = function changeRangeValue(filterName) {
+ var apply = _this2.checkedMap[filterName].checked;
+ var type = filterName;
+
+ applyFilter(apply, type, _this2._getFilterOption(type));
+ };
+
+ _tuiCodeSnippet2.default.forEach(FILTER_OPTIONS, function (filterName) {
+ var filterCheckElement = _this2.selector('#tie-' + filterName);
+ var filterNameCamelCase = (0, _util.toCamelCase)(filterName);
+ _this2.checkedMap[filterNameCamelCase] = filterCheckElement;
+
+ filterCheckElement.addEventListener('change', function () {
+ return changeRangeValue(filterNameCamelCase);
+ });
+ });
+
+ this._els.removewhiteThresholdRange.on('change', function () {
+ return changeRangeValue('removeWhite');
+ });
+ this._els.removewhiteDistanceRange.on('change', function () {
+ return changeRangeValue('removeWhite');
+ });
+ this._els.gradientTransparencyRange.on('change', function () {
+ return changeRangeValue('gradientTransparency');
+ });
+ this._els.colorfilterThresholeRange.on('change', function () {
+ return changeRangeValue('colorFilter');
+ });
+ this._els.pixelateRange.on('change', function () {
+ return changeRangeValue('pixelate');
+ });
+ this._els.noiseRange.on('change', function () {
+ return changeRangeValue('noise');
+ });
+ this._els.brightnessRange.on('change', function () {
+ return changeRangeValue('brightness');
+ });
+ this._els.blendType.addEventListener('change', function () {
+ return changeRangeValue('blend');
+ });
+ this._els.filterBlendColor.on('change', function () {
+ return changeRangeValue('blend');
+ });
+ this._els.filterMultiplyColor.on('change', function () {
+ return changeRangeValue('multiply');
+ });
+ this._els.tintOpacity.on('change', function () {
+ return changeRangeValue('tint');
+ });
+ this._els.filterTintColor.on('change', function () {
+ return changeRangeValue('tint');
+ });
+ this._els.blendType.addEventListener('click', function (event) {
+ return event.stopPropagation();
+ });
+ }
+
+ /**
+ * Get filter option
+ * @param {String} type - filter type
+ * @returns {Object} filter option object
+ * @private
+ */
+
+ }, {
+ key: '_getFilterOption',
+ value: function _getFilterOption(type) {
+ // eslint-disable-line
+ var option = {};
+ switch (type) {
+ case 'removeWhite':
+ option.threshold = (0, _util.toInteger)(this._els.removewhiteThresholdRange.value);
+ option.distance = (0, _util.toInteger)(this._els.removewhiteDistanceRange.value);
+ break;
+ case 'gradientTransparency':
+ option.threshold = (0, _util.toInteger)(this._els.gradientTransparencyRange.value);
+ break;
+ case 'colorFilter':
+ option.color = '#FFFFFF';
+ option.threshold = this._els.colorfilterThresholeRange.value;
+ break;
+ case 'pixelate':
+ option.blocksize = (0, _util.toInteger)(this._els.pixelateRange.value);
+ break;
+ case 'noise':
+ option.noise = (0, _util.toInteger)(this._els.noiseRange.value);
+ break;
+ case 'brightness':
+ option.brightness = (0, _util.toInteger)(this._els.brightnessRange.value);
+ break;
+ case 'blend':
+ option.color = this._els.filterBlendColor.color;
+ option.mode = this._els.blendType.value;
+ break;
+ case 'multiply':
+ option.color = this._els.filterMultiplyColor.color;
+ break;
+ case 'tint':
+ option.color = this._els.filterTintColor.color;
+ option.opacity = this._els.tintOpacity.value;
+ break;
+ default:
+ break;
+ }
+
+ return option;
+ }
+
+ /**
+ * Make submenu range and colorpicker control
+ * @private
+ */
+
+ }, {
+ key: '_makeControlElement',
+ value: function _makeControlElement() {
+ var selector = this.selector;
+
+ this._els = {
+ removewhiteThresholdRange: new _range2.default(selector('#tie-removewhite-threshold-range'), _consts.defaultFilterRangeValus.removewhiteThresholdRange),
+ removewhiteDistanceRange: new _range2.default(selector('#tie-removewhite-distance-range'), _consts.defaultFilterRangeValus.removewhiteDistanceRange),
+ gradientTransparencyRange: new _range2.default(selector('#tie-gradient-transparency-range'), _consts.defaultFilterRangeValus.gradientTransparencyRange),
+ brightnessRange: new _range2.default(selector('#tie-brightness-range'), _consts.defaultFilterRangeValus.brightnessRange),
+ noiseRange: new _range2.default(selector('#tie-noise-range'), _consts.defaultFilterRangeValus.noiseRange),
+ pixelateRange: new _range2.default(selector('#tie-pixelate-range'), _consts.defaultFilterRangeValus.pixelateRange),
+ colorfilterThresholeRange: new _range2.default(selector('#tie-colorfilter-threshole-range'), _consts.defaultFilterRangeValus.colorfilterThresholeRange),
+ filterTintColor: new _colorpicker2.default(selector('#tie-filter-tint-color'), '#03bd9e', this.toggleDirection),
+ filterMultiplyColor: new _colorpicker2.default(selector('#tie-filter-multiply-color'), '#515ce6', this.toggleDirection),
+ filterBlendColor: new _colorpicker2.default(selector('#tie-filter-blend-color'), '#ffbb3b', this.toggleDirection)
+ };
+ this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl);
+ this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl);
+ }
+
+ /**
+ * Make submenu control for picker & range mixin
+ * @param {HTMLElement} pickerControl - pickerControl dom element
+ * @returns {Range}
+ * @private
+ */
+
+ }, {
+ key: '_pickerWithRange',
+ value: function _pickerWithRange(pickerControl) {
+ var rangeWrap = document.createElement('div');
+ var rangelabel = document.createElement('label');
+ var range = document.createElement('div');
+
+ range.id = 'tie-filter-tint-opacity';
+ rangelabel.innerHTML = 'Opacity';
+ rangeWrap.appendChild(rangelabel);
+ rangeWrap.appendChild(range);
+ pickerControl.appendChild(rangeWrap);
+ pickerControl.style.height = PICKER_CONTROL_HEIGHT;
+
+ return new _range2.default(range, _consts.defaultFilterRangeValus.tintOpacityRange);
+ }
+
+ /**
+ * Make submenu control for picker & selectbox
+ * @param {HTMLElement} pickerControl - pickerControl dom element
+ * @returns {HTMLElement}
+ * @private
+ */
+
+ }, {
+ key: '_pickerWithSelectbox',
+ value: function _pickerWithSelectbox(pickerControl) {
+ var selectlistWrap = document.createElement('div');
+ var selectlist = document.createElement('select');
- var flush = function(){
- var parent, fn;
- if(isNode && (parent = process.domain))parent.exit();
- while(head){
- fn = head.fn;
- head = head.next;
- try {
- fn();
- } catch(e){
- if(head)notify();
- else last = undefined;
- throw e;
- }
- } last = undefined;
- if(parent)parent.enter();
- };
+ selectlistWrap.className = 'tui-image-editor-selectlist-wrap';
+ selectlistWrap.appendChild(selectlist);
- // Node.js
- if(isNode){
- notify = function(){
- process.nextTick(flush);
- };
- // browsers with MutationObserver
- } else if(Observer){
- var toggle = true
- , node = document.createTextNode('');
- new Observer(flush).observe(node, {characterData: true}); // eslint-disable-line no-new
- notify = function(){
- node.data = toggle = !toggle;
- };
- // environments with maybe non-completely correct, but existent Promise
- } else if(Promise && Promise.resolve){
- var promise = Promise.resolve();
- notify = function(){
- promise.then(flush);
- };
- // for other environments - macrotask based on:
- // - setImmediate
- // - MessageChannel
- // - window.postMessag
- // - onreadystatechange
- // - setTimeout
- } else {
- notify = function(){
- // strange IE + webpack dev server bug - use .call(global)
- macrotask.call(global, flush);
- };
- }
+ this._makeSelectOptionList(selectlist);
- return function(fn){
- var task = {fn: fn, next: undefined};
- if(last)last.next = task;
- if(!head){
- head = task;
- notify();
- } last = task;
- };
- };
+ pickerControl.appendChild(selectlistWrap);
+ pickerControl.style.height = PICKER_CONTROL_HEIGHT;
-/***/ }),
-/* 65 */
-/***/ (function(module, exports, __webpack_require__) {
+ return selectlist;
+ }
- var hide = __webpack_require__(17);
- module.exports = function(target, src, safe){
- for(var key in src){
- if(safe && target[key])target[key] = src[key];
- else hide(target, key, src[key]);
- } return target;
- };
+ /**
+ * Make blend select option
+ * @param {HTMLElement} selectlist - blend option select list element
+ * @private
+ */
-/***/ }),
-/* 66 */
-/***/ (function(module, exports, __webpack_require__) {
+ }, {
+ key: '_makeSelectOptionList',
+ value: function _makeSelectOptionList(selectlist) {
+ _tuiCodeSnippet2.default.forEach(BLEND_OPTIONS, function (option) {
+ var selectOption = document.createElement('option');
+ selectOption.setAttribute('value', option);
+ selectOption.innerHTML = option.replace(/^[a-z]/, function ($0) {
+ return $0.toUpperCase();
+ });
+ selectlist.appendChild(selectOption);
+ });
+ }
+ }]);
- 'use strict';
- var global = __webpack_require__(13)
- , core = __webpack_require__(14)
- , dP = __webpack_require__(18)
- , DESCRIPTORS = __webpack_require__(22)
- , SPECIES = __webpack_require__(47)('species');
+ return Filter;
+ }(_submenuBase2.default);
- module.exports = function(KEY){
- var C = typeof core[KEY] == 'function' ? core[KEY] : global[KEY];
- if(DESCRIPTORS && C && !C[SPECIES])dP.f(C, SPECIES, {
- configurable: true,
- get: function(){ return this; }
- });
- };
+ exports.default = Filter;
/***/ }),
-/* 67 */
-/***/ (function(module, exports, __webpack_require__) {
+/* 101 */
+/***/ (function(module, exports) {
- var ITERATOR = __webpack_require__(47)('iterator')
- , SAFE_CLOSING = false;
+ "use strict";
- try {
- var riter = [7][ITERATOR]();
- riter['return'] = function(){ SAFE_CLOSING = true; };
- Array.from(riter, function(){ throw 2; });
- } catch(e){ /* empty */ }
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
- module.exports = function(exec, skipClosing){
- if(!skipClosing && !SAFE_CLOSING)return false;
- var safe = false;
- try {
- var arr = [7]
- , iter = arr[ITERATOR]();
- iter.next = function(){ return {done: safe = true}; };
- arr[ITERATOR] = function(){ return iter; };
- exec(arr);
- } catch(e){ /* empty */ }
- return safe;
+ exports.default = function () {
+ return "\n \n";
};
/***/ }),
-/* 68 */
+/* 102 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(69);
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
- var _command2 = _interopRequireDefault(_command);
+ var _tuiCodeSnippet = __webpack_require__(3);
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ var _util = __webpack_require__(72);
- var commands = {};
+ var _util2 = _interopRequireDefault(_util);
- /**
- * Create a command
- * @param {string} name - Command name
- * @param {...*} args - Arguments for creating command
- * @returns {Command}
- * @ignore
- */
- /**
- * @author NHN Ent. FE Development Team
- * @fileoverview Command factory
- */
- function create(name) {
- var actions = commands[name];
- if (actions) {
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
+ var _imagetracer = __webpack_require__(103);
- return new _command2.default(actions, args);
- }
+ var _imagetracer2 = _interopRequireDefault(_imagetracer);
- return null;
- }
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
- /**
- * Register a command with name as a key
- * @param {Object} command - {name:{string}, execute: {function}, undo: {function}}
- * @param {string} command.name - command name
- * @param {function} command.execute - executable function
- * @param {function} command.undo - undo function
- * @ignore
- */
- function register(command) {
- commands[command.name] = command;
- }
+ exports.default = {
- module.exports = {
- create: create,
- register: register
- };
+ /**
+ * Get ui actions
+ * @returns {Object} actions for ui
+ * @private
+ */
+ getActions: function getActions() {
+ return {
+ main: this._mainAction(),
+ shape: this._shapeAction(),
+ crop: this._cropAction(),
+ flip: this._flipAction(),
+ rotate: this._rotateAction(),
+ text: this._textAction(),
+ mask: this._maskAction(),
+ draw: this._drawAction(),
+ icon: this._iconAction(),
+ filter: this._filterAction()
+ };
+ },
-/***/ }),
-/* 69 */
-/***/ (function(module, exports, __webpack_require__) {
- 'use strict';
+ /**
+ * Main Action
+ * @returns {Object} actions for ui main
+ * @private
+ */
+ _mainAction: function _mainAction() {
+ var _this = this;
- var _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; }; }(); /**
- * @author NHN Ent. FE Development Team
- * @fileoverview Command interface
- */
+ var exitCropOnAction = function exitCropOnAction() {
+ if (_this.ui.submenu === 'crop') {
+ _this.stopDrawingMode();
+ _this.ui.changeMenu('crop');
+ }
+ };
+
+ return (0, _tuiCodeSnippet.extend)({
+ initLoadImage: function initLoadImage(imagePath, imageName) {
+ return _this.loadImageFromURL(imagePath, imageName).then(function (sizeValue) {
+ exitCropOnAction();
+ _this.ui.initializeImgUrl = imagePath;
+ _this.ui.resizeEditor({ imageSize: sizeValue });
+ _this.clearUndoStack();
+ });
+ },
+ undo: function undo() {
+ if (!_this.isEmptyUndoStack()) {
+ exitCropOnAction();
+ _this.undo();
+ }
+ },
+ redo: function redo() {
+ if (!_this.isEmptyRedoStack()) {
+ exitCropOnAction();
+ _this.redo();
+ }
+ },
+ reset: function reset() {
+ exitCropOnAction();
+ _this.loadImageFromURL(_this.ui.initializeImgUrl, 'resetImage').then(function (sizeValue) {
+ exitCropOnAction();
+ _this.ui.resizeEditor({ imageSize: sizeValue });
+ _this.clearUndoStack();
+ });
+ },
+ delete: function _delete() {
+ _this.ui.changeDeleteButtonEnabled(false);
+ exitCropOnAction();
+ _this.removeActiveObject();
+ _this.activeObjectId = null;
+ },
+ deleteAll: function deleteAll() {
+ exitCropOnAction();
+ _this.clearObjects();
+ _this.ui.changeDeleteButtonEnabled(false);
+ _this.ui.changeDeleteAllButtonEnabled(false);
+ },
+ load: function load(file) {
+ if (!_util2.default.isSupportFileApi()) {
+ alert('This browser does not support file-api');
+ }
+ _this.ui.initializeImgUrl = URL.createObjectURL(file);
+ _this.loadImageFromFile(file).then(function () {
+ exitCropOnAction();
+ _this.clearUndoStack();
+ _this.ui.resizeEditor();
+ })['catch'](function (message) {
+ return Promise.reject(message);
+ });
+ },
+ download: function download() {
+ var dataURL = _this.toDataURL();
+ var imageName = _this.getImageName();
+ var blob = void 0,
+ type = void 0,
+ w = void 0;
+
+ if (_util2.default.isSupportFileApi() && window.saveAs) {
+ blob = _util2.default.base64ToBlob(dataURL);
+ type = blob.type.split('/')[1];
+ if (imageName.split('.').pop() !== type) {
+ imageName += '.' + type;
+ }
+ saveAs(blob, imageName); // eslint-disable-line
+ } else {
+ w = window.open();
+ w.document.body.innerHTML = '
';
+ }
+ }
+ }, this._commonAction());
+ },
- var _errorMessage = __webpack_require__(70);
- var _errorMessage2 = _interopRequireDefault(_errorMessage);
+ /**
+ * Icon Action
+ * @returns {Object} actions for ui icon
+ * @private
+ */
+ _iconAction: function _iconAction() {
+ var _this2 = this;
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ var cacheIconType = void 0;
+ var cacheIconColor = void 0;
+ var startX = void 0;
+ var startY = void 0;
+ var iconWidth = void 0;
+ var iconHeight = void 0;
+ var objId = void 0;
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+ this.on({
+ 'iconCreateResize': function iconCreateResize(_ref) {
+ var moveOriginPointer = _ref.moveOriginPointer;
- var createMessage = _errorMessage2.default.create;
- var errorTypes = _errorMessage2.default.types;
+ var scaleX = (moveOriginPointer.x - startX) / iconWidth;
+ var scaleY = (moveOriginPointer.y - startY) / iconHeight;
- /**
- * Command class
- * @class
- * @param {{name:function, execute: function, undo: function,
- * executeCallback: function, undoCallback: function}} actions - Command actions
- * @param {Array} args - passing arguments on execute, undo
- * @ignore
- */
+ _this2.setObjectPropertiesQuietly(objId, {
+ scaleX: Math.abs(scaleX * 2),
+ scaleY: Math.abs(scaleY * 2)
+ });
+ },
+ 'iconCreateEnd': function iconCreateEnd() {
+ _this2.ui.icon.clearIconType();
+ _this2.changeSelectableAll(true);
+ }
+ });
+
+ var mouseDown = function mouseDown(e, originPointer) {
+ startX = originPointer.x;
+ startY = originPointer.y;
+
+ _this2.addIcon(cacheIconType, {
+ left: originPointer.x,
+ top: originPointer.y,
+ fill: cacheIconColor
+ }).then(function (obj) {
+ objId = obj.id;
+ iconWidth = obj.width;
+ iconHeight = obj.height;
+ });
+ };
+
+ return (0, _tuiCodeSnippet.extend)({
+ changeColor: function changeColor(color) {
+ if (_this2.activeObjectId) {
+ _this2.changeIconColor(_this2.activeObjectId, color);
+ }
+ },
+ addIcon: function addIcon(iconType, iconColor) {
+ cacheIconType = iconType;
+ cacheIconColor = iconColor;
+ // this.readyAddIcon();
+ _this2.changeCursor('crosshair');
+ _this2.off('mousedown');
+ _this2.once('mousedown', mouseDown.bind(_this2));
+ },
+ cancelAddIcon: function cancelAddIcon() {
+ _this2.off('mousedown');
+ _this2.ui.icon.clearIconType();
+ _this2.changeSelectableAll(true);
+ _this2.changeCursor('default');
+ },
+ registDefalutIcons: function registDefalutIcons(type, path) {
+ var iconObj = {};
+ iconObj[type] = path;
+ _this2.registerIcons(iconObj);
+ },
+ registCustomIcon: function registCustomIcon(imgUrl, file) {
+ var imagetracer = new _imagetracer2.default();
+ imagetracer.imageToSVG(imgUrl, function (svgstr) {
+ var _svgstr$match = svgstr.match(/path[^>]*d="([^"]*)"/),
+ svgPath = _svgstr$match[1];
+
+ var iconObj = {};
+ iconObj[file.name] = svgPath;
+ _this2.registerIcons(iconObj);
+ _this2.addIcon(file.name, {
+ left: 100,
+ top: 100
+ });
+ }, _imagetracer2.default.tracerDefaultOption());
+ }
+ }, this._commonAction());
+ },
- var Command = function () {
- function Command(actions, args) {
- _classCallCheck(this, Command);
/**
- * command name
- * @type {string}
+ * Draw Action
+ * @returns {Object} actions for ui draw
+ * @private
*/
- this.name = actions.name;
+ _drawAction: function _drawAction() {
+ var _this3 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ setDrawMode: function setDrawMode(type, settings) {
+ _this3.stopDrawingMode();
+ if (type === 'free') {
+ _this3.startDrawingMode('FREE_DRAWING', settings);
+ } else {
+ _this3.startDrawingMode('LINE_DRAWING', settings);
+ }
+ },
+ setColor: function setColor(color) {
+ _this3.setBrush({
+ color: color
+ });
+ }
+ }, this._commonAction());
+ },
+
/**
- * arguments
- * @type {Array}
+ * Mask Action
+ * @returns {Object} actions for ui mask
+ * @private
*/
- this.args = args;
+ _maskAction: function _maskAction() {
+ var _this4 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ loadImageFromURL: function loadImageFromURL(imgUrl, file) {
+ return _this4.loadImageFromURL(_this4.toDataURL(), 'FilterImage').then(function () {
+ _this4.addImageObject(imgUrl).then(function () {
+ URL.revokeObjectURL(file);
+ });
+ });
+ },
+ applyFilter: function applyFilter() {
+ _this4.applyFilter('mask', {
+ maskObjId: _this4.activeObjectId
+ });
+ }
+ }, this._commonAction());
+ },
+
/**
- * Execute function
- * @type {function}
+ * Text Action
+ * @returns {Object} actions for ui text
+ * @private
*/
- this.execute = actions.execute;
+ _textAction: function _textAction() {
+ var _this5 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ changeTextStyle: function changeTextStyle(styleObj) {
+ if (_this5.activeObjectId) {
+ _this5.changeTextStyle(_this5.activeObjectId, styleObj);
+ }
+ }
+ }, this._commonAction());
+ },
+
/**
- * Undo function
- * @type {function}
+ * Rotate Action
+ * @returns {Object} actions for ui rotate
+ * @private
*/
- this.undo = actions.undo;
+ _rotateAction: function _rotateAction() {
+ var _this6 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ rotate: function rotate(angle) {
+ _this6.rotate(angle);
+ _this6.ui.resizeEditor();
+ },
+ setAngle: function setAngle(angle) {
+ _this6.setAngle(angle);
+ _this6.ui.resizeEditor();
+ }
+ }, this._commonAction());
+ },
+
/**
- * executeCallback
- * @type {function}
+ * Shape Action
+ * @returns {Object} actions for ui shape
+ * @private
*/
- this.executeCallback = actions.executeCallback || null;
+ _shapeAction: function _shapeAction() {
+ var _this7 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ changeShape: function changeShape(changeShapeObject) {
+ if (_this7.activeObjectId) {
+ _this7.changeShape(_this7.activeObjectId, changeShapeObject);
+ }
+ },
+ setDrawingShape: function setDrawingShape(shapeType) {
+ _this7.setDrawingShape(shapeType);
+ }
+ }, this._commonAction());
+ },
+
/**
- * undoCallback
- * @type {function}
+ * Crop Action
+ * @returns {Object} actions for ui crop
+ * @private
*/
- this.undoCallback = actions.undoCallback || null;
+ _cropAction: function _cropAction() {
+ var _this8 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ crop: function crop() {
+ var cropRect = _this8.getCropzoneRect();
+ if (cropRect) {
+ _this8.crop(cropRect).then(function () {
+ _this8.stopDrawingMode();
+ _this8.ui.resizeEditor();
+ _this8.ui.changeMenu('crop');
+ })['catch'](function (message) {
+ return Promise.reject(message);
+ });
+ }
+ },
+ cancel: function cancel() {
+ _this8.stopDrawingMode();
+ _this8.ui.changeMenu('crop');
+ }
+ }, this._commonAction());
+ },
+
/**
- * data for undo
- * @type {Object}
+ * Flip Action
+ * @returns {Object} actions for ui flip
+ * @private
*/
- this.undoData = {};
- }
-
- /**
- * Execute action
- * @param {Object.} compMap - Components injection
- * @abstract
- */
+ _flipAction: function _flipAction() {
+ var _this9 = this;
+ return (0, _tuiCodeSnippet.extend)({
+ flip: function flip(flipType) {
+ return _this9[flipType]();
+ }
+ }, this._commonAction());
+ },
- _createClass(Command, [{
- key: 'execute',
- value: function execute() {
- throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute'));
- }
/**
- * Undo action
- * @param {Object.} compMap - Components injection
- * @abstract
+ * Filter Action
+ * @returns {Object} actions for ui filter
+ * @private
*/
+ _filterAction: function _filterAction() {
+ var _this10 = this;
+
+ return (0, _tuiCodeSnippet.extend)({
+ applyFilter: function applyFilter(applying, type, options) {
+ if (applying) {
+ _this10.applyFilter(type, options);
+ } else if (_this10.hasFilter(type)) {
+ _this10.removeFilter(type);
+ }
+ }
+ }, this._commonAction());
+ },
- }, {
- key: 'undo',
- value: function undo() {
- throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo'));
- }
/**
- * Attach execute callabck
- * @param {function} callback - Callback after execution
- * @returns {Command} this
+ * Image Editor Event Observer
*/
+ setReAction: function setReAction() {
+ var _this11 = this;
- }, {
- key: 'setExecuteCallback',
- value: function setExecuteCallback(callback) {
- this.executeCallback = callback;
+ this.on({
+ undoStackChanged: function undoStackChanged(length) {
+ if (length) {
+ _this11.ui.changeUndoButtonStatus(true);
+ _this11.ui.changeResetButtonStatus(true);
+ } else {
+ _this11.ui.changeUndoButtonStatus(false);
+ _this11.ui.changeResetButtonStatus(false);
+ }
+ _this11.ui.resizeEditor();
+ },
+ redoStackChanged: function redoStackChanged(length) {
+ if (length) {
+ _this11.ui.changeRedoButtonStatus(true);
+ } else {
+ _this11.ui.changeRedoButtonStatus(false);
+ }
+ _this11.ui.resizeEditor();
+ },
+ /* eslint-disable complexity */
+ objectActivated: function objectActivated(obj) {
+ _this11.activeObjectId = obj.id;
+
+ _this11.ui.changeDeleteButtonEnabled(true);
+ _this11.ui.changeDeleteAllButtonEnabled(true);
+
+ if (obj.type === 'cropzone') {
+ _this11.ui.crop.changeApplyButtonStatus(true);
+ } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {
+ _this11.stopDrawingMode();
+ if (_this11.ui.submenu !== 'shape') {
+ _this11.ui.changeMenu('shape', false, false);
+ }
+ _this11.ui.shape.setShapeStatus({
+ strokeColor: obj.stroke,
+ strokeWidth: obj.strokeWidth,
+ fillColor: obj.fill
+ });
+
+ _this11.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));
+ } else if (obj.type === 'path' || obj.type === 'line') {
+ if (_this11.ui.submenu !== 'draw') {
+ _this11.ui.changeMenu('draw', false, false);
+ _this11.ui.draw.changeStandbyMode();
+ }
+ } else if (['i-text', 'text'].indexOf(obj.type) > -1) {
+ if (_this11.ui.submenu !== 'text') {
+ _this11.ui.changeMenu('text', false, false);
+ }
+ } else if (obj.type === 'icon') {
+ _this11.stopDrawingMode();
+ if (_this11.ui.submenu !== 'icon') {
+ _this11.ui.changeMenu('icon', false, false);
+ }
+ _this11.ui.icon.setIconPickerColor(obj.fill);
+ }
+ },
+ /* eslint-enable complexity */
+ addText: function addText(pos) {
+ _this11.addText('Double Click', {
+ position: pos.originPosition,
+ styles: {
+ fill: _this11.ui.text.textColor,
+ fontSize: _util2.default.toInteger(_this11.ui.text.fontSize)
+ }
+ }).then(function () {
+ _this11.changeCursor('default');
+ });
+ },
+ addObjectAfter: function addObjectAfter(obj) {
+ if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {
+ _this11.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));
+ _this11.ui.shape.changeStandbyMode();
+ }
+ },
+ objectScaled: function objectScaled(obj) {
+ if (['i-text', 'text'].indexOf(obj.type) > -1) {
+ _this11.ui.text.fontSize = _util2.default.toInteger(obj.fontSize);
+ } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) {
+ var width = obj.width,
+ height = obj.height;
+
+ var strokeValue = _this11.ui.shape.getStrokeValue();
+
+ if (width < strokeValue) {
+ _this11.ui.shape.setStrokeValue(width);
+ }
+ if (height < strokeValue) {
+ _this11.ui.shape.setStrokeValue(height);
+ }
+ }
+ },
+ selectionCleared: function selectionCleared() {
+ _this11.activeObjectId = null;
+ if (_this11.ui.submenu === 'text') {
+ _this11.changeCursor('text');
+ } else if (_this11.ui.submenu !== 'draw' && _this11.ui.submenu !== 'crop') {
+ _this11.stopDrawingMode();
+ }
+ }
+ });
+ },
- return this;
- }
/**
- * Attach undo callback
- * @param {function} callback - Callback after undo
- * @returns {Command} this
+ * Common Action
+ * @returns {Object} common actions for ui
+ * @private
*/
+ _commonAction: function _commonAction() {
+ var _this12 = this;
- }, {
- key: 'setUndoCallback',
- value: function setUndoCallback(callback) {
- this.undoCallback = callback;
-
- return this;
- }
- }]);
+ return {
+ modeChange: function modeChange(menu) {
+ switch (menu) {
+ case 'text':
+ _this12._changeActivateMode('TEXT');
+ break;
+ case 'crop':
+ _this12.startDrawingMode('CROPPER');
+ break;
+ case 'shape':
+ _this12._changeActivateMode('SHAPE');
+ _this12.setDrawingShape(_this12.ui.shape.type, _this12.ui.shape.options);
+ break;
+ default:
+ break;
+ }
+ },
+ deactivateAll: this.deactivateAll.bind(this),
+ changeSelectableAll: this.changeSelectableAll.bind(this),
+ discardSelection: this.discardSelection.bind(this),
+ stopDrawingMode: this.stopDrawingMode.bind(this)
+ };
+ },
- return Command;
- }();
- module.exports = Command;
+ /**
+ * Mixin
+ * @param {ImageEditor} ImageEditor instance
+ */
+ mixin: function mixin(ImageEditor) {
+ (0, _tuiCodeSnippet.extend)(ImageEditor.prototype, this);
+ }
+ };
/***/ }),
-/* 70 */
-/***/ (function(module, exports, __webpack_require__) {
+/* 103 */
+/***/ (function(module, exports) {
'use strict';
- var _tuiCodeSnippet = __webpack_require__(2);
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
- var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
+ var _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; }; }();
- var _util = __webpack_require__(71);
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ /*
+ imagetracer.js version 1.2.4
+ Simple raster image tracer and vectorizer written in JavaScript.
+ andras@jankovics.net
+ */
+
+ /*
+ The Unlicense / PUBLIC DOMAIN
+ This is free and unencumbered software released into the public domain.
+ Anyone is free to copy, modify, publish, use, compile, sell, or
+ distribute this software, either in source code form or as a compiled
+ binary, for any purpose, commercial or non-commercial, and by any
+ means.
+ In jurisdictions that recognize copyright laws, the author or authors
+ of this software dedicate any and all copyright interest in the
+ software to the public domain. We make this dedication for the benefit
+ of the public at large and to the detriment of our heirs and
+ successors. We intend this dedication to be an overt act of
+ relinquishment in perpetuity of all present and future rights to this
+ software under copyright law.
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+ IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+ OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+ OTHER DEALINGS IN THE SOFTWARE.
+ For more information, please refer to http://unlicense.org/
+ */
+ var ImageTracer = function () {
+ _createClass(ImageTracer, null, [{
+ key: 'tracerDefaultOption',
+ value: function tracerDefaultOption() {
+ return {
+ pathomit: 100,
+ ltres: 0.1,
+ qtres: 1,
+
+ scale: 1,
+ strokewidth: 5,
+ viewbox: false,
+ linefilter: true,
+ desc: false,
+ rightangleenhance: false,
+ pal: [{
+ r: 0,
+ g: 0,
+ b: 0,
+ a: 255
+ }, {
+ r: 255,
+ g: 255,
+ b: 255,
+ a: 255
+ }]
+ };
+ }
+ /* eslint-disable */
- /**
- * @author NHN Ent. FE Development Team
- * @fileoverview Error-message factory
- */
- var types = (0, _util.keyMirror)('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME');
- var messages = {
- UN_IMPLEMENTATION: 'Should implement a method: ',
- NO_COMPONENT_NAME: 'Should set a component name'
- };
- var map = {
- UN_IMPLEMENTATION: function UN_IMPLEMENTATION(methodName) {
- return messages.UN_IMPLEMENTATION + methodName;
- },
- NO_COMPONENT_NAME: function NO_COMPONENT_NAME() {
- return messages.NO_COMPONENT_NAME;
- }
- };
+ }]);
- module.exports = {
- types: _tuiCodeSnippet2.default.extend({}, types),
+ function ImageTracer() {
+ _classCallCheck(this, ImageTracer);
+
+ this.versionnumber = '1.2.4';
+ this.optionpresets = {
+ default: {
+ corsenabled: false,
+ ltres: 1,
+ qtres: 1,
+ pathomit: 8,
+ rightangleenhance: true,
+ colorsampling: 2,
+ numberofcolors: 16,
+ mincolorratio: 0,
+ colorquantcycles: 3,
+ layering: 0,
+ strokewidth: 1,
+ linefilter: false,
+ scale: 1,
+ roundcoords: 1,
+ viewbox: false,
+ desc: false,
+ lcpr: 0,
+ qcpr: 0,
+ blurradius: 0,
+ blurdelta: 20
+ },
+ 'posterized1': {
+ colorsampling: 0,
+ numberofcolors: 2
+ },
+ 'posterized2': {
+ numberofcolors: 4,
+ blurradius: 5
+ },
+ 'curvy': {
+ ltres: 0.01,
+ linefilter: true,
+ rightangleenhance: false },
+ 'sharp': { qtres: 0.01,
+ linefilter: false },
+ 'detailed': { pathomit: 0,
+ roundcoords: 2,
+ ltres: 0.5,
+ qtres: 0.5,
+ numberofcolors: 64 },
+ 'smoothed': { blurradius: 5,
+ blurdelta: 64 },
+ 'grayscale': { colorsampling: 0,
+ colorquantcycles: 1,
+ numberofcolors: 7 },
+ 'fixedpalette': { colorsampling: 0,
+ colorquantcycles: 1,
+ numberofcolors: 27 },
+ 'randomsampling1': { colorsampling: 1,
+ numberofcolors: 8 },
+ 'randomsampling2': { colorsampling: 1,
+ numberofcolors: 64 },
+ 'artistic1': { colorsampling: 0,
+ colorquantcycles: 1,
+ pathomit: 0,
+ blurradius: 5,
+ blurdelta: 64,
+ ltres: 0.01,
+ linefilter: true,
+ numberofcolors: 16,
+ strokewidth: 2 },
+ 'artistic2': { qtres: 0.01,
+ colorsampling: 0,
+ colorquantcycles: 1,
+ numberofcolors: 4,
+ strokewidth: 0 },
+ 'artistic3': { qtres: 10,
+ ltres: 10,
+ numberofcolors: 8 },
+ 'artistic4': { qtres: 10,
+ ltres: 10,
+ numberofcolors: 64,
+ blurradius: 5,
+ blurdelta: 256,
+ strokewidth: 2 },
+ 'posterized3': { ltres: 1,
+ qtres: 1,
+ pathomit: 20,
+ rightangleenhance: true,
+ colorsampling: 0,
+ numberofcolors: 3,
+ mincolorratio: 0,
+ colorquantcycles: 3,
+ blurradius: 3,
+ blurdelta: 20,
+ strokewidth: 0,
+ linefilter: false,
+ roundcoords: 1,
+ pal: [{ r: 0,
+ g: 0,
+ b: 100,
+ a: 255 }, { r: 255,
+ g: 255,
+ b: 255,
+ a: 255 }] }
+ };
- create: function create(type) {
- type = type.toLowerCase();
- var func = map[type];
+ this.pathscan_combined_lookup = [[[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[13, 3, 0, 1], [13, 2, -1, 0], [7, 1, 0, -1], [7, 0, 1, 0]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[11, 1, 0, -1], [14, 0, 1, 0], [14, 3, 0, 1], [11, 2, -1, 0]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]]];
- for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- args[_key - 1] = arguments[_key];
- }
+ this.gks = [[0.27901, 0.44198, 0.27901], [0.135336, 0.228569, 0.272192, 0.228569, 0.135336], [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776], [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327], [0.049692, 0.069304, 0.089767, 0.107988, 0.120651, 0.125194, 0.120651, 0.107988, 0.089767, 0.069304, 0.049692]];
- return func.apply(undefined, args);
+ this.specpalette = [{ r: 0, g: 0, b: 0, a: 255 }, { r: 128, g: 128, b: 128, a: 255 }, { r: 0, g: 0, b: 128, a: 255 }, { r: 64, g: 64, b: 128, a: 255 }, { r: 192, g: 192, b: 192, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }, { r: 128, g: 128, b: 192, a: 255 }, { r: 0, g: 0, b: 192, a: 255 }, { r: 128, g: 0, b: 0, a: 255 }, { r: 128, g: 64, b: 64, a: 255 }, { r: 128, g: 0, b: 128, a: 255 }, { r: 168, g: 168, b: 168, a: 255 }, { r: 192, g: 128, b: 128, a: 255 }, { r: 192, g: 0, b: 0, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }, { r: 0, g: 128, b: 0, a: 255 }];
}
- };
-/***/ }),
-/* 71 */
-/***/ (function(module, exports, __webpack_require__) {
+ _createClass(ImageTracer, [{
+ key: 'imageToSVG',
+ value: function imageToSVG(url, callback, options) {
+ var _this = this;
- 'use strict';
+ options = this.checkoptions(options);
+ this.loadImage(url, function (canvas) {
+ callback(_this.imagedataToSVG(_this.getImgdata(canvas), options));
+ }, options);
+ }
+ }, {
+ key: 'imagedataToSVG',
+ value: function imagedataToSVG(imgd, options) {
+ options = this.checkoptions(options);
+ var td = this.imagedataToTracedata(imgd, options);
- var _tuiCodeSnippet = __webpack_require__(2);
+ return this.getsvgstring(td, options);
+ }
+ }, {
+ key: 'imageToTracedata',
+ value: function imageToTracedata(url, callback, options) {
+ var _this2 = this;
- var min = Math.min,
- max = Math.max; /**
- * @author NHN Ent. FE Development Team
- * @fileoverview Util
- */
+ options = this.checkoptions(options);
+ this.loadImage(url, function (canvas) {
+ callback(_this2.imagedataToTracedata(_this2.getImgdata(canvas), options));
+ }, options);
+ }
+ }, {
+ key: 'imagedataToTracedata',
+ value: function imagedataToTracedata(imgd, options) {
+ options = this.checkoptions(options);
+ var ii = this.colorquantization(imgd, options);
+ var tracedata = void 0;
+ if (options.layering === 0) {
+ tracedata = {
+ layers: [],
+ palette: ii.palette,
+ width: ii.array[0].length - 2,
+ height: ii.array.length - 2
+ };
- var hostnameSent = false;
+ for (var colornum = 0; colornum < ii.palette.length; colornum += 1) {
+ var tracedlayer = this.batchtracepaths(this.internodes(this.pathscan(this.layeringstep(ii, colornum), options.pathomit), options), options.ltres, options.qtres);
+ tracedata.layers.push(tracedlayer);
+ }
+ } else {
+ var ls = this.layering(ii);
+ if (options.layercontainerid) {
+ this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid);
+ }
+ var bps = this.batchpathscan(ls, options.pathomit);
+ var bis = this.batchinternodes(bps, options);
+ tracedata = {
+ layers: this.batchtracelayers(bis, options.ltres, options.qtres),
+ palette: ii.palette,
+ width: imgd.width,
+ height: imgd.height
+ };
+ }
- module.exports = {
- /**
- * Clamp value
- * @param {number} value - Value
- * @param {number} minValue - Minimum value
- * @param {number} maxValue - Maximum value
- * @returns {number} clamped value
- */
- clamp: function clamp(value, minValue, maxValue) {
- var temp = void 0;
- if (minValue > maxValue) {
- temp = minValue;
- minValue = maxValue;
- maxValue = temp;
+ return tracedata;
}
+ }, {
+ key: 'checkoptions',
+ value: function checkoptions(options) {
+ options = options || {};
+ if (typeof options === 'string') {
+ options = options.toLowerCase();
+ if (this.optionpresets[options]) {
+ options = this.optionpresets[options];
+ } else {
+ options = {};
+ }
+ }
+ var ok = Object.keys(this.optionpresets['default']);
+ for (var k = 0; k < ok.length; k += 1) {
+ if (!options.hasOwnProperty(ok[k])) {
+ options[ok[k]] = this.optionpresets['default'][ok[k]];
+ }
+ }
- return max(minValue, min(value, maxValue));
- },
+ return options;
+ }
+ }, {
+ key: 'colorquantization',
+ value: function colorquantization(imgd, options) {
+ var arr = [];
+ var idx = 0;
+ var cd = void 0;
+ var cdl = void 0;
+ var ci = void 0;
+ var paletteacc = [];
+ var pixelnum = imgd.width * imgd.height;
+ var i = void 0;
+ var j = void 0;
+ var k = void 0;
+ var cnt = void 0;
+ var palette = void 0;
+
+ for (j = 0; j < imgd.height + 2; j += 1) {
+ arr[j] = [];
+ for (i = 0; i < imgd.width + 2; i += 1) {
+ arr[j][i] = -1;
+ }
+ }
+ if (options.pal) {
+ palette = options.pal;
+ } else if (options.colorsampling === 0) {
+ palette = this.generatepalette(options.numberofcolors);
+ } else if (options.colorsampling === 1) {
+ palette = this.samplepalette(options.numberofcolors, imgd);
+ } else {
+ palette = this.samplepalette2(options.numberofcolors, imgd);
+ }
+ if (options.blurradius > 0) {
+ imgd = this.blur(imgd, options.blurradius, options.blurdelta);
+ }
+ for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) {
+ if (cnt > 0) {
+ for (k = 0; k < palette.length; k += 1) {
+ if (paletteacc[k].n > 0) {
+ palette[k] = { r: Math.floor(paletteacc[k].r / paletteacc[k].n),
+ g: Math.floor(paletteacc[k].g / paletteacc[k].n),
+ b: Math.floor(paletteacc[k].b / paletteacc[k].n),
+ a: Math.floor(paletteacc[k].a / paletteacc[k].n) };
+ }
+
+ if (paletteacc[k].n / pixelnum < options.mincolorratio && cnt < options.colorquantcycles - 1) {
+ palette[k] = { r: Math.floor(Math.random() * 255),
+ g: Math.floor(Math.random() * 255),
+ b: Math.floor(Math.random() * 255),
+ a: Math.floor(Math.random() * 255) };
+ }
+ }
+ }
+ for (i = 0; i < palette.length; i += 1) {
+ paletteacc[i] = { r: 0,
+ g: 0,
+ b: 0,
+ a: 0,
+ n: 0 };
+ }
- /**
- * Make key-value object from arguments
- * @returns {object.}
- */
- keyMirror: function keyMirror() {
- var obj = {};
+ for (j = 0; j < imgd.height; j += 1) {
+ for (i = 0; i < imgd.width; i += 1) {
+ idx = (j * imgd.width + i) * 4;
- for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
- args[_key] = arguments[_key];
+ ci = 0;
+ cdl = 1024;
+ for (k = 0; k < palette.length; k += 1) {
+ cd = Math.abs(palette[k].r - imgd.data[idx]) + Math.abs(palette[k].g - imgd.data[idx + 1]) + Math.abs(palette[k].b - imgd.data[idx + 2]) + Math.abs(palette[k].a - imgd.data[idx + 3]);
+
+ if (cd < cdl) {
+ cdl = cd;
+ ci = k;
+ }
+ }
+
+ paletteacc[ci].r += imgd.data[idx];
+ paletteacc[ci].g += imgd.data[idx + 1];
+ paletteacc[ci].b += imgd.data[idx + 2];
+ paletteacc[ci].a += imgd.data[idx + 3];
+ paletteacc[ci].n += 1;
+
+ arr[j + 1][i + 1] = ci;
+ }
+ }
+ }
+
+ return { array: arr,
+ palette: palette };
}
+ }, {
+ key: 'samplepalette',
+ value: function samplepalette(numberofcolors, imgd) {
+ var idx = void 0;
+ var palette = [];
+ for (var i = 0; i < numberofcolors; i += 1) {
+ idx = Math.floor(Math.random() * imgd.data.length / 4) * 4;
+ palette.push({ r: imgd.data[idx],
+ g: imgd.data[idx + 1],
+ b: imgd.data[idx + 2],
+ a: imgd.data[idx + 3] });
+ }
- (0, _tuiCodeSnippet.forEach)(args, function (key) {
- obj[key] = key;
- });
+ return palette;
+ }
+ }, {
+ key: 'samplepalette2',
+ value: function samplepalette2(numberofcolors, imgd) {
+ var idx = void 0;
+ var palette = [];
+ var ni = Math.ceil(Math.sqrt(numberofcolors));
+ var nj = Math.ceil(numberofcolors / ni);
+ var vx = imgd.width / (ni + 1);
+ var vy = imgd.height / (nj + 1);
+ for (var j = 0; j < nj; j += 1) {
+ for (var i = 0; i < ni; i += 1) {
+ if (palette.length === numberofcolors) {
+ break;
+ } else {
+ idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4;
+ palette.push({ r: imgd.data[idx],
+ g: imgd.data[idx + 1],
+ b: imgd.data[idx + 2],
+ a: imgd.data[idx + 3] });
+ }
+ }
+ }
- return obj;
- },
+ return palette;
+ }
+ }, {
+ key: 'generatepalette',
+ value: function generatepalette(numberofcolors) {
+ var palette = [];
+ var rcnt = void 0;
+ var gcnt = void 0;
+ var bcnt = void 0;
+ if (numberofcolors < 8) {
+ var graystep = Math.floor(255 / (numberofcolors - 1));
+ for (var i = 0; i < numberofcolors; i += 1) {
+ palette.push({ r: i * graystep,
+ g: i * graystep,
+ b: i * graystep,
+ a: 255 });
+ }
+ } else {
+ var colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3));
+ var colorstep = Math.floor(255 / (colorqnum - 1));
+ var rndnum = numberofcolors - colorqnum * colorqnum * colorqnum;
+ for (rcnt = 0; rcnt < colorqnum; rcnt += 1) {
+ for (gcnt = 0; gcnt < colorqnum; gcnt += 1) {
+ for (bcnt = 0; bcnt < colorqnum; bcnt += 1) {
+ palette.push({ r: rcnt * colorstep,
+ g: gcnt * colorstep,
+ b: bcnt * colorstep,
+ a: 255 });
+ }
+ }
+ }
+ for (rcnt = 0; rcnt < rndnum; rcnt += 1) {
+ palette.push({ r: Math.floor(Math.random() * 255),
+ g: Math.floor(Math.random() * 255),
+ b: Math.floor(Math.random() * 255),
+ a: Math.floor(Math.random() * 255) });
+ }
+ }
+
+ return palette;
+ }
+ }, {
+ key: 'layering',
+ value: function layering(ii) {
+ var layers = [];
+ var val = 0;
+ var ah = ii.array.length;
+ var aw = ii.array[0].length;
+ var n1 = void 0;
+ var n2 = void 0;
+ var n3 = void 0;
+ var n4 = void 0;
+ var n5 = void 0;
+ var n6 = void 0;
+ var n7 = void 0;
+ var n8 = void 0;
+ var i = void 0;
+ var j = void 0;
+ var k = void 0;
+ for (k = 0; k < ii.palette.length; k += 1) {
+ layers[k] = [];
+ for (j = 0; j < ah; j += 1) {
+ layers[k][j] = [];
+ for (i = 0; i < aw; i += 1) {
+ layers[k][j][i] = 0;
+ }
+ }
+ }
+ for (j = 1; j < ah - 1; j += 1) {
+ for (i = 1; i < aw - 1; i += 1) {
+ val = ii.array[j][i];
+
+ n1 = ii.array[j - 1][i - 1] === val ? 1 : 0;
+ n2 = ii.array[j - 1][i] === val ? 1 : 0;
+ n3 = ii.array[j - 1][i + 1] === val ? 1 : 0;
+ n4 = ii.array[j][i - 1] === val ? 1 : 0;
+ n5 = ii.array[j][i + 1] === val ? 1 : 0;
+ n6 = ii.array[j + 1][i - 1] === val ? 1 : 0;
+ n7 = ii.array[j + 1][i] === val ? 1 : 0;
+ n8 = ii.array[j + 1][i + 1] === val ? 1 : 0;
+
+ layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8;
+ if (!n4) {
+ layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8;
+ }
+ if (!n2) {
+ layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8;
+ }
+ if (!n1) {
+ layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8;
+ }
+ }
+ }
+ return layers;
+ }
+ }, {
+ key: 'layeringstep',
+ value: function layeringstep(ii, cnum) {
+ var layer = [];
+ var ah = ii.array.length;
+ var aw = ii.array[0].length;
+ var i = void 0;
+ var j = void 0;
+ for (j = 0; j < ah; j += 1) {
+ layer[j] = [];
+ for (i = 0; i < aw; i += 1) {
+ layer[j][i] = 0;
+ }
+ }
+ for (j = 1; j < ah; j += 1) {
+ for (i = 1; i < aw; i += 1) {
+ layer[j][i] = (ii.array[j - 1][i - 1] === cnum ? 1 : 0) + (ii.array[j - 1][i] === cnum ? 2 : 0) + (ii.array[j][i - 1] === cnum ? 8 : 0) + (ii.array[j][i] === cnum ? 4 : 0);
+ }
+ }
- /**
- * Make CSSText
- * @param {Object} styleObj - Style info object
- * @returns {string} Connected string of style
- */
- makeStyleText: function makeStyleText(styleObj) {
- var styleStr = '';
+ return layer;
+ }
+ }, {
+ key: 'pathscan',
+ value: function pathscan(arr, pathomit) {
+ var paths = [];
+ var pacnt = 0;
+ var pcnt = 0;
+ var px = 0;
+ var py = 0;
+ var w = arr[0].length;
+ var h = arr.length;
+ var dir = 0;
+ var pathfinished = true;
+ var holepath = false;
+ var lookuprow = void 0;
+ for (var j = 0; j < h; j += 1) {
+ for (var i = 0; i < w; i += 1) {
+ if (arr[j][i] === 4 || arr[j][i] === 11) {
+ px = i;
+ py = j;
+ paths[pacnt] = {};
+ paths[pacnt].points = [];
+ paths[pacnt].boundingbox = [px, py, px, py];
+ paths[pacnt].holechildren = [];
+ pathfinished = false;
+ pcnt = 0;
+ holepath = arr[j][i] === 11;
+ dir = 1;
+
+ while (!pathfinished) {
+ paths[pacnt].points[pcnt] = {};
+ paths[pacnt].points[pcnt].x = px - 1;
+ paths[pacnt].points[pcnt].y = py - 1;
+ paths[pacnt].points[pcnt].t = arr[py][px];
+
+ if (px - 1 < paths[pacnt].boundingbox[0]) {
+ paths[pacnt].boundingbox[0] = px - 1;
+ }
+ if (px - 1 > paths[pacnt].boundingbox[2]) {
+ paths[pacnt].boundingbox[2] = px - 1;
+ }
+ if (py - 1 < paths[pacnt].boundingbox[1]) {
+ paths[pacnt].boundingbox[1] = py - 1;
+ }
+ if (py - 1 > paths[pacnt].boundingbox[3]) {
+ paths[pacnt].boundingbox[3] = py - 1;
+ }
+
+ lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir];
+ arr[py][px] = lookuprow[0];dir = lookuprow[1];px += lookuprow[2];py += lookuprow[3];
+
+ if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) {
+ pathfinished = true;
+
+ if (paths[pacnt].points.length < pathomit) {
+ paths.pop();
+ } else {
+ paths[pacnt].isholepath = !!holepath;
+
+ if (holepath) {
+ var parentidx = 0,
+ parentbbox = [-1, -1, w + 1, h + 1];
+ for (var parentcnt = 0; parentcnt < pacnt; parentcnt++) {
+ if (!paths[parentcnt].isholepath && this.boundingboxincludes(paths[parentcnt].boundingbox, paths[pacnt].boundingbox) && this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)) {
+ parentidx = parentcnt;
+ parentbbox = paths[parentcnt].boundingbox;
+ }
+ }
+ paths[parentidx].holechildren.push(pacnt);
+ }
+ pacnt += 1;
+ }
+ }
+ pcnt += 1;
+ }
+ }
+ }
+ }
- (0, _tuiCodeSnippet.forEach)(styleObj, function (value, prop) {
- styleStr += prop + ': ' + value + ';';
- });
+ return paths;
+ }
+ }, {
+ key: 'boundingboxincludes',
+ value: function boundingboxincludes(parentbbox, childbbox) {
+ return parentbbox[0] < childbbox[0] && parentbbox[1] < childbbox[1] && parentbbox[2] > childbbox[2] && parentbbox[3] > childbbox[3];
+ }
+ }, {
+ key: 'batchpathscan',
+ value: function batchpathscan(layers, pathomit) {
+ var bpaths = [];
+ for (var k in layers) {
+ if (!layers.hasOwnProperty(k)) {
+ continue;
+ }
+ bpaths[k] = this.pathscan(layers[k], pathomit);
+ }
- return styleStr;
- },
+ return bpaths;
+ }
+ }, {
+ key: 'internodes',
+ value: function internodes(paths, options) {
+ var ins = [];
+ var palen = 0;
+ var nextidx = 0;
+ var nextidx2 = 0;
+ var previdx = 0;
+ var previdx2 = 0;
+ var pacnt = void 0;
+ var pcnt = void 0;
+ for (pacnt = 0; pacnt < paths.length; pacnt += 1) {
+ ins[pacnt] = {};
+ ins[pacnt].points = [];
+ ins[pacnt].boundingbox = paths[pacnt].boundingbox;
+ ins[pacnt].holechildren = paths[pacnt].holechildren;
+ ins[pacnt].isholepath = paths[pacnt].isholepath;
+ palen = paths[pacnt].points.length;
+
+ for (pcnt = 0; pcnt < palen; pcnt += 1) {
+ nextidx = (pcnt + 1) % palen;nextidx2 = (pcnt + 2) % palen;previdx = (pcnt - 1 + palen) % palen;previdx2 = (pcnt - 2 + palen) % palen;
+
+ if (options.rightangleenhance && this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)) {
+ if (ins[pacnt].points.length > 0) {
+ ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(ins[pacnt].points[ins[pacnt].points.length - 1].x, ins[pacnt].points[ins[pacnt].points.length - 1].y, paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y);
+ }
+
+ ins[pacnt].points.push({
+ x: paths[pacnt].points[pcnt].x,
+ y: paths[pacnt].points[pcnt].y,
+ linesegment: this.getdirection(paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y, (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2)
+ });
+ }
+ ins[pacnt].points.push({
+ x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,
+ y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,
+ linesegment: this.getdirection((paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2, (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2)
+ });
+ }
+ }
- /**
- * Get object's properties
- * @param {Object} obj - object
- * @param {Array} keys - keys
- * @returns {Object} properties object
- */
- getProperties: function getProperties(obj, keys) {
- var props = {};
- var length = keys.length;
+ return ins;
+ }
+ }, {
+ key: 'testrightangle',
+ value: function testrightangle(path, idx1, idx2, idx3, idx4, idx5) {
+ return path.points[idx3].x === path.points[idx1].x && path.points[idx3].x === path.points[idx2].x && path.points[idx3].y === path.points[idx4].y && path.points[idx3].y === path.points[idx5].y || path.points[idx3].y === path.points[idx1].y && path.points[idx3].y === path.points[idx2].y && path.points[idx3].x === path.points[idx4].x && path.points[idx3].x === path.points[idx5].x;
+ }
+ }, {
+ key: 'getdirection',
+ value: function getdirection(x1, y1, x2, y2) {
+ var val = 8;
+ if (x1 < x2) {
+ if (y1 < y2) {
+ val = 1;
+ } else if (y1 > y2) {
+ val = 7;
+ } else {
+ val = 0;
+ }
+ } else if (x1 > x2) {
+ if (y1 < y2) {
+ val = 3;
+ } else if (y1 > y2) {
+ val = 5;
+ } else {
+ val = 4;
+ }
+ } else if (y1 < y2) {
+ val = 2;
+ } else if (y1 > y2) {
+ val = 6;
+ } else {
+ val = 8;
+ }
- var i = 0;
- var key = void 0;
+ return val;
+ }
+ }, {
+ key: 'batchinternodes',
+ value: function batchinternodes(bpaths, options) {
+ var binternodes = [];
+ for (var k in bpaths) {
+ if (!bpaths.hasOwnProperty(k)) {
+ continue;
+ }
+ binternodes[k] = this.internodes(bpaths[k], options);
+ }
- for (i = 0; i < length; i += 1) {
- key = keys[i];
- props[key] = obj[key];
+ return binternodes;
}
+ }, {
+ key: 'tracepath',
+ value: function tracepath(path, ltres, qtres) {
+ var pcnt = 0;
+ var segtype1 = void 0;
+ var segtype2 = void 0;
+ var seqend = void 0;
+ var smp = {};
+ smp.segments = [];
+ smp.boundingbox = path.boundingbox;
+ smp.holechildren = path.holechildren;
+ smp.isholepath = path.isholepath;
+
+ while (pcnt < path.points.length) {
+ segtype1 = path.points[pcnt].linesegment;
+ segtype2 = -1;
+ seqend = pcnt + 1;
+ while ((path.points[seqend].linesegment === segtype1 || path.points[seqend].linesegment === segtype2 || segtype2 === -1) && seqend < path.points.length - 1) {
+ if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) {
+ segtype2 = path.points[seqend].linesegment;
+ }
+ seqend += 1;
+ }
+ if (seqend === path.points.length - 1) {
+ seqend = 0;
+ }
- return props;
- },
+ smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend));
+ if (seqend > 0) {
+ pcnt = seqend;
+ } else {
+ pcnt = path.points.length;
+ }
+ }
- /**
- * send hostname
- */
- sendHostName: function sendHostName() {
- var _location = location,
- hostname = _location.hostname;
+ return smp;
+ }
+ }, {
+ key: 'fitseq',
+ value: function fitseq(path, ltres, qtres, seqstart, seqend) {
+ if (seqend > path.points.length || seqend < 0) {
+ return [];
+ }
+ var errorpoint = seqstart,
+ errorval = 0,
+ curvepass = true,
+ px = void 0,
+ py = void 0,
+ dist2 = void 0;
+ var tl = seqend - seqstart;if (tl < 0) {
+ tl += path.points.length;
+ }
+ var vx = (path.points[seqend].x - path.points[seqstart].x) / tl,
+ vy = (path.points[seqend].y - path.points[seqstart].y) / tl;
+ var pcnt = (seqstart + 1) % path.points.length,
+ pl = void 0;
+ while (pcnt != seqend) {
+ pl = pcnt - seqstart;if (pl < 0) {
+ pl += path.points.length;
+ }
+ px = path.points[seqstart].x + vx * pl;py = path.points[seqstart].y + vy * pl;
+ dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py);
+ if (dist2 > ltres) {
+ curvepass = false;
+ }
+ if (dist2 > errorval) {
+ errorpoint = pcnt;errorval = dist2;
+ }
+ pcnt = (pcnt + 1) % path.points.length;
+ }
+ if (curvepass) {
+ return [{ type: 'L',
+ x1: path.points[seqstart].x,
+ y1: path.points[seqstart].y,
+ x2: path.points[seqend].x,
+ y2: path.points[seqend].y }];
+ }
+ var fitpoint = errorpoint;curvepass = true;errorval = 0;
+ var t = (fitpoint - seqstart) / tl,
+ t1 = (1 - t) * (1 - t),
+ t2 = 2 * (1 - t) * t,
+ t3 = t * t;
+ var cpx = (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2,
+ cpy = (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2;
+ pcnt = seqstart + 1;
+ while (pcnt != seqend) {
+ t = (pcnt - seqstart) / tl;t1 = (1 - t) * (1 - t);t2 = 2 * (1 - t) * t;t3 = t * t;
+ px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x;
+ py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y;
+ dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py);
+ if (dist2 > qtres) {
+ curvepass = false;
+ }
+ if (dist2 > errorval) {
+ errorpoint = pcnt;errorval = dist2;
+ }
+ pcnt = (pcnt + 1) % path.points.length;
+ }
+ if (curvepass) {
+ return [{ type: 'Q',
+ x1: path.points[seqstart].x,
+ y1: path.points[seqstart].y,
+ x2: cpx,
+ y2: cpy,
+ x3: path.points[seqend].x,
+ y3: path.points[seqend].y }];
+ }
+ var splitpoint = fitpoint;
- if (hostnameSent) {
- return;
+ return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(this.fitseq(path, ltres, qtres, splitpoint, seqend));
}
- hostnameSent = true;
+ }, {
+ key: 'batchtracepaths',
+ value: function batchtracepaths(internodepaths, ltres, qtres) {
+ var btracedpaths = [];
+ for (var k in internodepaths) {
+ if (!internodepaths.hasOwnProperty(k)) {
+ continue;
+ }
+ btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres));
+ }
- (0, _tuiCodeSnippet.imagePing)('https://www.google-analytics.com/collect', {
- v: 1,
- t: 'event',
- tid: 'UA-115377265-9',
- cid: hostname,
- dp: hostname,
- dh: 'image-editor'
- });
- }
- };
+ return btracedpaths;
+ }
+ }, {
+ key: 'batchtracelayers',
+ value: function batchtracelayers(binternodes, ltres, qtres) {
+ var btbis = [];
+ for (var k in binternodes) {
+ if (!binternodes.hasOwnProperty(k)) {
+ continue;
+ }
+ btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres);
+ }
-/***/ }),
-/* 72 */
-/***/ (function(module, exports, __webpack_require__) {
+ return btbis;
+ }
+ }, {
+ key: 'roundtodec',
+ value: function roundtodec(val, places) {
+ return Number(val.toFixed(places));
+ }
+ }, {
+ key: 'svgpathstring',
+ value: function svgpathstring(tracedata, lnum, pathnum, options) {
+ var layer = tracedata.layers[lnum],
+ smp = layer[pathnum],
+ str = '',
+ pcnt = void 0;
+ if (options.linefilter && smp.segments.length < 3) {
+ return str;
+ }
+ str = '';
+ if (options.lcpr || options.qcpr) {
+ for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {
+ if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {
+ str += '';
+ str += '';
+ str += '';
+ str += '';
+ }
+ if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {
+ str += '';
+ }
+ }
- var _util = __webpack_require__(71);
+ for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) {
+ var hsmp = layer[smp.holechildren[hcnt]];
+ for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) {
+ if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {
+ str += '';
+ str += '';
+ str += '';
+ str += '';
+ }
+ if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {
+ str += '';
+ }
+ }
+ }
+ }
- var _util2 = _interopRequireDefault(_util);
+ return str;
+ }
+ }, {
+ key: 'getsvgstring',
+ value: function getsvgstring(tracedata, options) {
+ options = this.checkoptions(options);
+ var w = tracedata.width * options.scale;
+ var h = tracedata.height * options.scale;
+
+ var svgstr = '';
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+ return svgstr;
+ }
+ }, {
+ key: 'compareNumbers',
+ value: function compareNumbers(a, b) {
+ return a - b;
+ }
+ }, {
+ key: 'torgbastr',
+ value: function torgbastr(c) {
+ return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
+ }
+ }, {
+ key: 'tosvgcolorstr',
+ value: function tosvgcolorstr(c, options) {
+ return 'fill="rgb(' + c.r + ',' + c.g + ',' + c.b + ')" stroke="rgb(' + c.r + ',' + c.g + ',' + c.b + ')" stroke-width="' + options.strokewidth + '" opacity="' + c.a / 255.0 + '" ';
+ }
+ }, {
+ key: 'appendSVGString',
+ value: function appendSVGString(svgstr, parentid) {
+ var div = void 0;
+ if (parentid) {
+ div = document.getElementById(parentid);
+ if (!div) {
+ div = document.createElement('div');
+ div.id = parentid;
+ document.body.appendChild(div);
+ }
+ } else {
+ div = document.createElement('div');
+ document.body.appendChild(div);
+ }
+ div.innerHTML += svgstr;
+ }
+ }, {
+ key: 'blur',
+ value: function blur(imgd, radius, delta) {
+ var i = void 0,
+ j = void 0,
+ k = void 0,
+ d = void 0,
+ idx = void 0,
+ racc = void 0,
+ gacc = void 0,
+ bacc = void 0,
+ aacc = void 0,
+ wacc = void 0;
+ var imgd2 = { width: imgd.width,
+ height: imgd.height,
+ data: [] };
+ radius = Math.floor(radius);if (radius < 1) {
+ return imgd;
+ }if (radius > 5) {
+ radius = 5;
+ }delta = Math.abs(delta);if (delta > 1024) {
+ delta = 1024;
+ }
+ var thisgk = this.gks[radius - 1];
+ for (j = 0; j < imgd.height; j++) {
+ for (i = 0; i < imgd.width; i++) {
+ racc = 0;gacc = 0;bacc = 0;aacc = 0;wacc = 0;
+
+ for (k = -radius; k < radius + 1; k++) {
+ if (i + k > 0 && i + k < imgd.width) {
+ idx = (j * imgd.width + i + k) * 4;
+ racc += imgd.data[idx] * thisgk[k + radius];
+ gacc += imgd.data[idx + 1] * thisgk[k + radius];
+ bacc += imgd.data[idx + 2] * thisgk[k + radius];
+ aacc += imgd.data[idx + 3] * thisgk[k + radius];
+ wacc += thisgk[k + radius];
+ }
+ }
- module.exports = {
- /**
- * Component names
- * @type {Object.}
- */
- componentNames: _util2.default.keyMirror('IMAGE_LOADER', 'CROPPER', 'FLIP', 'ROTATION', 'FREE_DRAWING', 'LINE', 'TEXT', 'ICON', 'FILTER', 'SHAPE'),
+ idx = (j * imgd.width + i) * 4;
+ imgd2.data[idx] = Math.floor(racc / wacc);
+ imgd2.data[idx + 1] = Math.floor(gacc / wacc);
+ imgd2.data[idx + 2] = Math.floor(bacc / wacc);
+ imgd2.data[idx + 3] = Math.floor(aacc / wacc);
+ }
+ }
+ var himgd = new Uint8ClampedArray(imgd2.data);
+ for (j = 0; j < imgd.height; j++) {
+ for (i = 0; i < imgd.width; i++) {
+ racc = 0;gacc = 0;bacc = 0;aacc = 0;wacc = 0;
+
+ for (k = -radius; k < radius + 1; k++) {
+ if (j + k > 0 && j + k < imgd.height) {
+ idx = ((j + k) * imgd.width + i) * 4;
+ racc += himgd[idx] * thisgk[k + radius];
+ gacc += himgd[idx + 1] * thisgk[k + radius];
+ bacc += himgd[idx + 2] * thisgk[k + radius];
+ aacc += himgd[idx + 3] * thisgk[k + radius];
+ wacc += thisgk[k + radius];
+ }
+ }
- /**
- * Command names
- * @type {Object.}
- */
- commandNames: {
- 'CLEAR_OBJECTS': 'clearObjects',
- 'LOAD_IMAGE': 'loadImage',
- 'FLIP_IMAGE': 'flip',
- 'ROTATE_IMAGE': 'rotate',
- 'ADD_OBJECT': 'addObject',
- 'REMOVE_OBJECT': 'removeObject',
- 'APPLY_FILTER': 'applyFilter',
- 'REMOVE_FILTER': 'removeFilter',
- 'ADD_ICON': 'addIcon',
- 'CHANGE_ICON_COLOR': 'changeIconColor',
- 'ADD_SHAPE': 'addShape',
- 'CHANGE_SHAPE': 'changeShape',
- 'ADD_TEXT': 'addText',
- 'CHANGE_TEXT': 'changeText',
- 'CHANGE_TEXT_STYLE': 'changeTextStyle',
- 'ADD_IMAGE_OBJECT': 'addImageObject',
- 'RESIZE_CANVAS_DIMENSION': 'resizeCanvasDimension',
- 'SET_OBJECT_PROPERTIES': 'setObjectProperties',
- 'SET_OBJECT_POSITION': 'setObjectPosition'
- },
+ idx = (j * imgd.width + i) * 4;
+ imgd2.data[idx] = Math.floor(racc / wacc);
+ imgd2.data[idx + 1] = Math.floor(gacc / wacc);
+ imgd2.data[idx + 2] = Math.floor(bacc / wacc);
+ imgd2.data[idx + 3] = Math.floor(aacc / wacc);
+ }
+ }
+ for (j = 0; j < imgd.height; j++) {
+ for (i = 0; i < imgd.width; i++) {
+ idx = (j * imgd.width + i) * 4;
- /**
- * Event names
- * @type {Object.}
- */
- eventNames: {
- OBJECT_ACTIVATED: 'objectActivated',
- OBJECT_MOVED: 'objectMoved',
- OBJECT_SCALED: 'objectScaled',
- TEXT_EDITING: 'textEditing',
- TEXT_CHANGED: 'textChanged',
- ADD_TEXT: 'addText',
- ADD_OBJECT: 'addObject',
- MOUSE_DOWN: 'mousedown',
- // UNDO/REDO Events
- REDO_STACK_CHANGED: 'redoStackChanged',
- UNDO_STACK_CHANGED: 'undoStackChanged'
- },
+ d = Math.abs(imgd2.data[idx] - imgd.data[idx]) + Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) + Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) + Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]);
- /**
- * Editor states
- * @type {Object.}
- */
- drawingModes: _util2.default.keyMirror('NORMAL', 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'),
+ if (d > delta) {
+ imgd2.data[idx] = imgd.data[idx];
+ imgd2.data[idx + 1] = imgd.data[idx + 1];
+ imgd2.data[idx + 2] = imgd.data[idx + 2];
+ imgd2.data[idx + 3] = imgd.data[idx + 3];
+ }
+ }
+ }
- /**
- * Shortcut key values
- * @type {Object.}
- */
- keyCodes: {
- Z: 90,
- Y: 89,
- SHIFT: 16,
- BACKSPACE: 8,
- DEL: 46
- },
+ return imgd2;
+ }
+ }, {
+ key: 'loadImage',
+ value: function loadImage(url, callback, options) {
+ var img = new Image();
+ if (options && options.corsenabled) {
+ img.crossOrigin = 'Anonymous';
+ }
+ img.src = url;
+ img.onload = function () {
+ var canvas = document.createElement('canvas');
+ canvas.width = img.width;
+ canvas.height = img.height;
+ var context = canvas.getContext('2d');
+ context.drawImage(img, 0, 0);
+ callback(canvas);
+ };
+ }
+ }, {
+ key: 'getImgdata',
+ value: function getImgdata(canvas) {
+ var context = canvas.getContext('2d');
- /**
- * Fabric object options
- * @type {Object.}
- */
- fObjectOptions: {
- SELECTION_STYLE: {
- borderColor: 'red',
- cornerColor: 'green',
- cornerSize: 10,
- originX: 'center',
- originY: 'center',
- transparentCorners: false
+ return context.getImageData(0, 0, canvas.width, canvas.height);
+ }
+ }, {
+ key: 'drawLayers',
+ value: function drawLayers(layers, palette, scale, parentid) {
+ scale = scale || 1;
+ var w = void 0,
+ h = void 0,
+ i = void 0,
+ j = void 0,
+ k = void 0;
+ var div = void 0;
+ if (parentid) {
+ div = document.getElementById(parentid);
+ if (!div) {
+ div = document.createElement('div');
+ div.id = parentid;
+ document.body.appendChild(div);
+ }
+ } else {
+ div = document.createElement('div');
+ document.body.appendChild(div);
+ }
+ for (k in layers) {
+ if (!layers.hasOwnProperty(k)) {
+ continue;
+ }
+
+ w = layers[k][0].length;
+ h = layers[k].length;
+
+ var canvas = document.createElement('canvas');
+ canvas.width = w * scale;
+ canvas.height = h * scale;
+ var context = canvas.getContext('2d');
+
+ for (j = 0; j < h; j += 1) {
+ for (i = 0; i < w; i += 1) {
+ context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]);
+ context.fillRect(i * scale, j * scale, scale, scale);
+ }
+ }
+
+ div.appendChild(canvas);
+ }
}
- },
+ }]);
- /**
- * Promise reject messages
- * @type {Object.}
- */
- rejectMessages: {
- flip: 'The flipX and flipY setting values are not changed.',
- rotation: 'The current angle is same the old angle.',
- loadImage: 'The background image is empty.',
- isLock: 'The executing command state is locked.',
- undo: 'The promise of undo command is reject.',
- redo: 'The promise of redo command is reject.',
- invalidDrawingMode: 'This operation is not supported in the drawing mode',
- invalidParameters: 'Invalid parameters',
- noActiveObject: 'There is no active object.',
- unsupportedType: 'Unsupported object type',
- noObject: 'The object is not in canvas.',
- addedObject: 'The object is already added.'
- }
- }; /**
- * @author NHN Ent. FE Development Team
- * @fileoverview Constants
- */
+ return ImageTracer;
+ }();
+
+ exports.default = ImageTracer;
/***/ }),
-/* 73 */
+/* 104 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -3908,7 +13397,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
@@ -3916,75 +13405,75 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _imageLoader = __webpack_require__(75);
+ var _imageLoader = __webpack_require__(106);
var _imageLoader2 = _interopRequireDefault(_imageLoader);
- var _cropper = __webpack_require__(77);
+ var _cropper = __webpack_require__(108);
var _cropper2 = _interopRequireDefault(_cropper);
- var _flip = __webpack_require__(79);
+ var _flip = __webpack_require__(110);
var _flip2 = _interopRequireDefault(_flip);
- var _rotation = __webpack_require__(80);
+ var _rotation = __webpack_require__(111);
var _rotation2 = _interopRequireDefault(_rotation);
- var _freeDrawing = __webpack_require__(81);
+ var _freeDrawing = __webpack_require__(112);
var _freeDrawing2 = _interopRequireDefault(_freeDrawing);
- var _line = __webpack_require__(82);
+ var _line = __webpack_require__(113);
var _line2 = _interopRequireDefault(_line);
- var _text = __webpack_require__(83);
+ var _text = __webpack_require__(114);
var _text2 = _interopRequireDefault(_text);
- var _icon = __webpack_require__(84);
+ var _icon = __webpack_require__(115);
var _icon2 = _interopRequireDefault(_icon);
- var _filter = __webpack_require__(85);
+ var _filter = __webpack_require__(116);
var _filter2 = _interopRequireDefault(_filter);
- var _shape = __webpack_require__(91);
+ var _shape = __webpack_require__(122);
var _shape2 = _interopRequireDefault(_shape);
- var _cropper3 = __webpack_require__(93);
+ var _cropper3 = __webpack_require__(124);
var _cropper4 = _interopRequireDefault(_cropper3);
- var _freeDrawing3 = __webpack_require__(95);
+ var _freeDrawing3 = __webpack_require__(126);
var _freeDrawing4 = _interopRequireDefault(_freeDrawing3);
- var _lineDrawing = __webpack_require__(96);
+ var _lineDrawing = __webpack_require__(127);
var _lineDrawing2 = _interopRequireDefault(_lineDrawing);
- var _shape3 = __webpack_require__(97);
+ var _shape3 = __webpack_require__(128);
var _shape4 = _interopRequireDefault(_shape3);
- var _text3 = __webpack_require__(98);
+ var _text3 = __webpack_require__(129);
var _text4 = _interopRequireDefault(_text3);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
- var _util = __webpack_require__(71);
+ var _util = __webpack_require__(72);
var _util2 = _interopRequireDefault(_util);
@@ -3994,6 +13483,7 @@ return /******/ (function(modules) { // webpackBootstrap
var components = _consts2.default.componentNames;
var events = _consts2.default.eventNames;
+
var drawingModes = _consts2.default.drawingModes,
fObjectOptions = _consts2.default.fObjectOptions;
var extend = _tuiCodeSnippet2.default.extend,
@@ -4022,11 +13512,21 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {Object} [option] - Canvas max width & height of css
* @param {number} option.cssMaxWidth - Canvas css-max-width
* @param {number} option.cssMaxHeight - Canvas css-max-height
+ * @param {boolean} option.useItext - Use IText in text mode
+ * @param {boolean} option.useDragAddIcon - Use dragable add in icon mode
* @ignore
*/
var Graphics = function () {
- function Graphics(element, cssMaxWidth, cssMaxHeight) {
+ function Graphics(element) {
+ var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+ cssMaxWidth = _ref.cssMaxWidth,
+ cssMaxHeight = _ref.cssMaxHeight,
+ _ref$useItext = _ref.useItext,
+ useItext = _ref$useItext === undefined ? false : _ref$useItext,
+ _ref$useDragAddIcon = _ref.useDragAddIcon,
+ useDragAddIcon = _ref$useDragAddIcon === undefined ? false : _ref$useDragAddIcon;
+
_classCallCheck(this, Graphics);
/**
@@ -4047,6 +13547,24 @@ return /******/ (function(modules) { // webpackBootstrap
*/
this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT;
+ /**
+ * Use Itext mode for text component
+ * @type {boolean}
+ */
+ this.useItext = useItext;
+
+ /**
+ * Use add drag icon mode for icon component
+ * @type {boolean}
+ */
+ this.useDragAddIcon = useDragAddIcon;
+
+ /**
+ * cropper Selection Style
+ * @type {Object}
+ */
+ this.cropSelectionStyle = {};
+
/**
* Image name
* @type {string}
@@ -4100,7 +13618,9 @@ return /******/ (function(modules) { // webpackBootstrap
onObjectMoved: this._onObjectMoved.bind(this),
onObjectScaled: this._onObjectScaled.bind(this),
onObjectSelected: this._onObjectSelected.bind(this),
- onPathCreated: this._onPathCreated.bind(this)
+ onPathCreated: this._onPathCreated.bind(this),
+ onSelectionCleared: this._onSelectionCleared.bind(this),
+ onSelectionCreated: this._onSelectionCreated.bind(this)
};
this._setCanvasElement(element);
@@ -4170,6 +13690,7 @@ return /******/ (function(modules) { // webpackBootstrap
(_canvas = this._canvas).add.apply(_canvas, theArgs);
}
+
/**
* Removes the object or group
* @param {Object} target - graphics object or group
@@ -4296,6 +13817,17 @@ return /******/ (function(modules) { // webpackBootstrap
return this._canvas.getActiveObject();
}
+ /**
+ * Gets an active group object
+ * @returns {Object} active group object instance
+ */
+
+ }, {
+ key: 'getActiveGroupObject',
+ value: function getActiveGroupObject() {
+ return this._canvas.getActiveGroup();
+ }
+
/**
* Activates an object or group
* @param {Object} target - target object or group
@@ -4307,6 +13839,17 @@ return /******/ (function(modules) { // webpackBootstrap
this._canvas.setActiveObject(target);
}
+ /**
+ * Set Crop selection style
+ * @param {Object} style - Selection styles
+ */
+
+ }, {
+ key: 'setCropSelectionStyle',
+ value: function setCropSelectionStyle(style) {
+ this.cropSelectionStyle = style;
+ }
+
/**
* Get component
* @param {string} name - Component name
@@ -4358,6 +13901,7 @@ return /******/ (function(modules) { // webpackBootstrap
return !!drawingModeInstance;
}
+
/**
* Stop the current drawing mode and back to the 'NORMAL' mode
*/
@@ -4651,6 +14195,19 @@ return /******/ (function(modules) { // webpackBootstrap
this.getComponent(components.ICON).registerPaths(pathInfos);
}
+ /**
+ * Change cursor style
+ * @param {string} cursorType - cursor type
+ */
+
+ }, {
+ key: 'changeCursor',
+ value: function changeCursor(cursorType) {
+ var canvas = this.getCanvas();
+ canvas.defaultCursor = cursorType;
+ canvas.renderAll();
+ }
+
/**
* Whether it has the filter or not
* @param {string} type - Filter type
@@ -4978,7 +14535,9 @@ return /******/ (function(modules) { // webpackBootstrap
'object:moving': handler.onObjectMoved,
'object:scaling': handler.onObjectScaled,
'object:selected': handler.onObjectSelected,
- 'path:created': handler.onPathCreated
+ 'path:created': handler.onPathCreated,
+ 'selection:cleared': handler.onSelectionCleared,
+ 'selection:created': handler.onSelectionCreated
});
}
@@ -5090,6 +14649,55 @@ return /******/ (function(modules) { // webpackBootstrap
this.fire(events.ADD_OBJECT, params);
}
+ /**
+ * "selction:cleared" canvas event handler
+ * @private
+ */
+
+ }, {
+ key: '_onSelectionCleared',
+ value: function _onSelectionCleared() {
+ this.fire(events.SELECTION_CLEARED);
+ }
+
+ /**
+ * "selction:created" canvas event handler
+ * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event
+ * @private
+ */
+
+ }, {
+ key: '_onSelectionCreated',
+ value: function _onSelectionCreated(fEvent) {
+ this.fire(events.SELECTION_CREATED, fEvent.target);
+ }
+
+ /**
+ * Canvas discard selection all
+ */
+
+ }, {
+ key: 'discardSelection',
+ value: function discardSelection() {
+ this._canvas.discardActiveGroup();
+ this._canvas.discardActiveObject();
+ this._canvas.renderAll();
+ }
+
+ /**
+ * Canvas Selectable status change
+ * @param {boolean} selectable - expect status
+ */
+
+ }, {
+ key: 'changeSelectableAll',
+ value: function changeSelectableAll(selectable) {
+ this._canvas.forEachObject(function (obj) {
+ obj.selectable = selectable;
+ obj.hoverCursor = selectable ? 'move' : 'crosshair';
+ });
+ }
+
/**
* Return object's properties
* @param {fabric.Object} obj - fabric object
@@ -5107,7 +14715,7 @@ return /******/ (function(modules) { // webpackBootstrap
extend(props, _util2.default.getProperties(obj, predefinedKeys));
- if (obj.type === 'text') {
+ if (['i-text', 'text'].indexOf(obj.type) > -1) {
extend(props, this._createTextProperties(obj, props));
}
@@ -5165,13 +14773,13 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Graphics;
/***/ }),
-/* 74 */
+/* 105 */
/***/ (function(module, exports) {
- module.exports = __WEBPACK_EXTERNAL_MODULE_74__;
+ module.exports = __WEBPACK_EXTERNAL_MODULE_105__;
/***/ }),
-/* 75 */
+/* 106 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -5182,11 +14790,11 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -5303,7 +14911,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = ImageLoader;
/***/ }),
-/* 76 */
+/* 107 */
/***/ (function(module, exports) {
"use strict";
@@ -5489,28 +15097,28 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Component;
/***/ }),
-/* 77 */
+/* 108 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _cropzone = __webpack_require__(78);
+ var _cropzone = __webpack_require__(109);
var _cropzone2 = _interopRequireDefault(_cropzone);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
- var _util = __webpack_require__(71);
+ var _util = __webpack_require__(72);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -5597,10 +15205,12 @@ return /******/ (function(modules) { // webpackBootstrap
return;
}
var canvas = this.getCanvas();
+
canvas.forEachObject(function (obj) {
// {@link http://fabricjs.com/docs/fabric.Object.html#evented}
obj.evented = false;
});
+
this._cropzone = new _cropzone2.default({
left: -10,
top: -10,
@@ -5614,7 +15224,8 @@ return /******/ (function(modules) { // webpackBootstrap
hasBorders: false,
lockScalingFlip: true,
lockRotation: true
- });
+ }, this.graphics.cropSelectionStyle);
+
canvas.deactivateAll();
canvas.add(this._cropzone);
canvas.on('mouse:down', this._listeners.mousedown);
@@ -5860,20 +15471,20 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Cropper;
/***/ }),
-/* 78 */
+/* 109 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _util = __webpack_require__(71);
+ var _util = __webpack_require__(72);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -5904,9 +15515,14 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {Object} options Options object
* @override
*/
- initialize: function initialize(options) {
+ initialize: function initialize(options, extendsOptions) {
+ options = _tuiCodeSnippet2.default.extend(options, extendsOptions);
options.type = 'cropzone';
+
this.callSuper('initialize', options);
+
+ this.options = options;
+
this.on({
'moving': this._onMoving,
'scaling': this._onScaling
@@ -5937,11 +15553,20 @@ return /******/ (function(modules) { // webpackBootstrap
// Render outer rect
this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.55)');
- // Black dash line
- this._strokeBorder(ctx, 'rgb(0, 0, 0)', cropzoneDashLineWidth);
+ if (this.options.lineWidth) {
+ this._fillInnerRect(ctx);
+ } else {
+ // Black dash line
+ this._strokeBorder(ctx, 'rgb(0, 0, 0)', {
+ lineDashWidth: cropzoneDashLineWidth
+ });
- // White dash line
- this._strokeBorder(ctx, 'rgb(255, 255, 255)', cropzoneDashLineWidth, cropzoneDashLineOffset);
+ // White dash line
+ this._strokeBorder(ctx, 'rgb(255, 255, 255)', {
+ lineDashWidth: cropzoneDashLineWidth,
+ lineDashOffset: cropzoneDashLineOffset
+ });
+ }
// Reset scale
ctx.scale(1 / originalScaleX, 1 / originalScaleY);
@@ -5987,7 +15612,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.moveTo(x[0] - 1, y[0] - 1);
ctx.lineTo(x[3] + 1, y[0] - 1);
ctx.lineTo(x[3] + 1, y[3] + 1);
- ctx.lineTo(x[0] - 1, y[3] - 1);
+ ctx.lineTo(x[0] - 1, y[3] + 1);
ctx.lineTo(x[0] - 1, y[0] - 1);
ctx.closePath();
@@ -6004,6 +15629,60 @@ return /******/ (function(modules) { // webpackBootstrap
},
+ /**
+ * Draw Inner grid line
+ * @param {CanvasRenderingContext2D} ctx - Context
+ * @private
+ */
+ _fillInnerRect: function _fillInnerRect(ctx) {
+ var _getCoordinates2 = this._getCoordinates(ctx),
+ outerX = _getCoordinates2.x,
+ outerY = _getCoordinates2.y;
+
+ var x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3);
+ var y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3);
+
+ ctx.save();
+ ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';
+ ctx.lineWidth = this.options.lineWidth;
+ ctx.beginPath();
+
+ ctx.moveTo(x[0], y[1]);
+ ctx.lineTo(x[3], y[1]);
+
+ ctx.moveTo(x[0], y[2]);
+ ctx.lineTo(x[3], y[2]);
+
+ ctx.moveTo(x[1], y[0]);
+ ctx.lineTo(x[1], y[3]);
+
+ ctx.moveTo(x[2], y[0]);
+ ctx.lineTo(x[2], y[3]);
+ ctx.stroke();
+ ctx.closePath();
+
+ ctx.restore();
+ },
+
+
+ /**
+ * Calculate Inner Position
+ * @param {Array} outer - outer position
+ * @param {number} size - interval for calcaulate
+ * @returns {Array} - inner position
+ * @private
+ */
+ _caculateInnerPosition: function _caculateInnerPosition(outer, size) {
+ var position = [];
+ position[0] = outer[1];
+ position[1] = outer[1] + size;
+ position[2] = outer[1] + size * 2;
+ position[3] = outer[2];
+
+ return position;
+ },
+
+
/**
* Get coordinates
* @param {CanvasRenderingContext2D} ctx - Context
@@ -6042,18 +15721,26 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {number} [lineDashOffset] - Dash offset
* @private
*/
- _strokeBorder: function _strokeBorder(ctx, strokeStyle, lineDashWidth, lineDashOffset) {
+ _strokeBorder: function _strokeBorder(ctx, strokeStyle, _ref) {
+ var lineDashWidth = _ref.lineDashWidth,
+ lineDashOffset = _ref.lineDashOffset,
+ lineWidth = _ref.lineWidth;
+
var halfWidth = this.getWidth() / 2,
halfHeight = this.getHeight() / 2;
ctx.save();
ctx.strokeStyle = strokeStyle;
+
if (ctx.setLineDash) {
ctx.setLineDash([lineDashWidth, lineDashWidth]);
}
if (lineDashOffset) {
ctx.lineDashOffset = lineDashOffset;
}
+ if (lineWidth) {
+ ctx.lineWidth = lineWidth;
+ }
ctx.beginPath();
ctx.moveTo(-halfWidth, -halfHeight);
@@ -6246,14 +15933,14 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Cropzone;
/***/ }),
-/* 79 */
+/* 110 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
@@ -6261,11 +15948,11 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -6455,14 +16142,14 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Flip;
/***/ }),
-/* 80 */
+/* 111 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -6470,11 +16157,11 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -6602,22 +16289,22 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Rotation;
/***/ }),
-/* 81 */
+/* 112 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -6715,22 +16402,22 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = FreeDrawing;
/***/ }),
-/* 82 */
+/* 113 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -6939,18 +16626,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Line;
/***/ }),
-/* 83 */
+/* 114 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
@@ -6958,15 +16645,15 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
- var _util = __webpack_require__(71);
+ var _util = __webpack_require__(72);
var _util2 = _interopRequireDefault(_util);
@@ -7097,6 +16784,12 @@ return /******/ (function(modules) { // webpackBootstrap
* @type {boolean}
*/
_this.isPrevEditing = false;
+
+ /**
+ * use itext
+ * @type {boolean}
+ */
+ _this.useItext = graphics.useItext;
return _this;
}
@@ -7116,10 +16809,24 @@ return /******/ (function(modules) { // webpackBootstrap
'mouse:down': this._listeners.mousedown,
'object:selected': this._listeners.select,
'before:selection:cleared': this._listeners.selectClear,
- 'object:scaling': this._listeners.scaling
+ 'object:scaling': this._listeners.scaling,
+ 'text:editing': this._listeners.modify
});
- this._createTextarea();
+ if (this.useItext) {
+ canvas.forEachObject(function (obj) {
+ if (obj.type === 'i-text') {
+ obj.set({
+ left: obj.left - obj.width / 2,
+ top: obj.top - obj.height / 2,
+ originX: 'left',
+ originY: 'top'
+ });
+ }
+ });
+ } else {
+ this._createTextarea();
+ }
this.setCanvasRatio();
}
@@ -7135,15 +16842,34 @@ return /******/ (function(modules) { // webpackBootstrap
canvas.selection = true;
canvas.defaultCursor = 'default';
- canvas.deactivateAllWithDispatch(); // action for undo stack
+
+ if (this.useItext) {
+ canvas.forEachObject(function (obj) {
+ if (obj.type === 'i-text') {
+ if (obj.text === '') {
+ obj.remove();
+ } else {
+ obj.set({
+ left: obj.left + obj.width / 2,
+ top: obj.top + obj.height / 2,
+ originX: 'center',
+ originY: 'center'
+ });
+ }
+ }
+ });
+ } else {
+ canvas.deactivateAllWithDispatch();
+ this._removeTextarea();
+ }
+
canvas.off({
'mouse:down': this._listeners.mousedown,
'object:selected': this._listeners.select,
'before:selection:cleared': this._listeners.selectClear,
- 'object:scaling': this._listeners.scaling
+ 'object:scaling': this._listeners.scaling,
+ 'text:editing': this._listeners.modify
});
-
- this._removeTextarea();
}
/**
@@ -7169,16 +16895,27 @@ return /******/ (function(modules) { // webpackBootstrap
return new _promise2.default(function (resolve) {
var canvas = _this2.getCanvas();
+ var newText = null;
+ var selectionStyle = _consts2.default.fObjectOptions.SELECTION_STYLE;
var styles = _this2._defaultStyles;
_this2._setInitPos(options.position);
if (options.styles) {
- styles = _tuiCodeSnippet2.default.extend(options.styles, styles);
+ styles = _tuiCodeSnippet2.default.extend(styles, options.styles);
+ }
+
+ if (_this2.useItext) {
+ newText = new _fabric2.default.IText(text, styles);
+ selectionStyle = _tuiCodeSnippet2.default.extend({}, selectionStyle, {
+ originX: 'left',
+ originY: 'top'
+ });
+ } else {
+ newText = new _fabric2.default.Text(text, styles);
}
- var newText = new _fabric2.default.Text(text, styles);
- newText.set(_consts2.default.fObjectOptions.SELECTION_STYLE);
+ newText.set(selectionStyle);
newText.on({
mouseup: _this2._onFabricMouseUp.bind(_this2)
});
@@ -7548,6 +17285,7 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_onFabricMouseDown',
value: function _onFabricMouseDown(fEvent) {
var obj = fEvent.target;
+
if (obj && !obj.isType('text')) {
return;
}
@@ -7600,7 +17338,9 @@ return /******/ (function(modules) { // webpackBootstrap
var newClickTime = new Date().getTime();
if (this._isDoubleClick(newClickTime)) {
- this._changeToEditingMode(fEvent.target);
+ if (!this.useItext) {
+ this._changeToEditingMode(fEvent.target);
+ }
this.fire(events.TEXT_EDITING); // fire editing text event
}
@@ -7672,18 +17412,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Text;
/***/ }),
-/* 84 */
+/* 115 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
@@ -7691,11 +17431,11 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -7711,6 +17451,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
+ var events = _consts2.default.eventNames;
var rejectMessages = _consts2.default.rejectMessages;
@@ -7746,6 +17487,12 @@ return /******/ (function(modules) { // webpackBootstrap
* @type {Object}
*/
_this._pathMap = pathMap;
+
+ /**
+ * Option to add icon to drag.
+ * @type {boolean}
+ */
+ _this.useDragAddIcon = graphics.useDragAddIcon;
return _this;
}
@@ -7779,9 +17526,33 @@ return /******/ (function(modules) { // webpackBootstrap
icon.set(_tuiCodeSnippet2.default.extend({
type: 'icon',
fill: _this2._oColor
- }, selectionStyle, options));
+ }, selectionStyle, options, _this2.graphics.controlStyle));
+
+ if (_this2.useDragAddIcon) {
+ canvas.add(icon).setActiveObject(icon);
+ canvas.on({
+ 'mouse:move': function mouseMove(fEvent) {
+ canvas.selection = false;
+
+ _this2.fire(events.ICON_CREATE_RESIZE, {
+ moveOriginPointer: canvas.getPointer(fEvent.e)
+ });
+ },
+ 'mouse:up': function mouseUp(fEvent) {
+ _this2.fire(events.ICON_CREATE_END, {
+ moveOriginPointer: canvas.getPointer(fEvent.e)
+ });
+
+ canvas.defaultCursor = 'default';
+ canvas.off('mouse:up');
+ canvas.off('mouse:move');
+ canvas.selection = true;
+ }
+ });
+ } else {
+ canvas.add(icon).setActiveObject(icon);
+ }
- canvas.add(icon).setActiveObject(icon);
resolve(_this2.graphics.createObjectProperties(icon));
});
}
@@ -7849,48 +17620,48 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Icon;
/***/ }),
-/* 85 */
+/* 116 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _promise = __webpack_require__(4);
var _promise2 = _interopRequireDefault(_promise);
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _mask = __webpack_require__(86);
+ var _mask = __webpack_require__(117);
var _mask2 = _interopRequireDefault(_mask);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
- var _blur = __webpack_require__(87);
+ var _blur = __webpack_require__(118);
var _blur2 = _interopRequireDefault(_blur);
- var _sharpen = __webpack_require__(88);
+ var _sharpen = __webpack_require__(119);
var _sharpen2 = _interopRequireDefault(_sharpen);
- var _emboss = __webpack_require__(89);
+ var _emboss = __webpack_require__(120);
var _emboss2 = _interopRequireDefault(_emboss);
- var _colorFilter = __webpack_require__(90);
+ var _colorFilter = __webpack_require__(121);
var _colorFilter2 = _interopRequireDefault(_colorFilter);
@@ -8171,12 +17942,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Filter;
/***/ }),
-/* 86 */
+/* 117 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8282,12 +18053,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Mask;
/***/ }),
-/* 87 */
+/* 118 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8324,12 +18095,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Blur;
/***/ }),
-/* 88 */
+/* 119 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8366,12 +18137,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Sharpen;
/***/ }),
-/* 89 */
+/* 120 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8408,12 +18179,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Emboss;
/***/ }),
-/* 90 */
+/* 121 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8457,6 +18228,7 @@ return /******/ (function(modules) { // webpackBootstrap
* @param {Object} canvasEl Canvas element to apply filter to
*/
applyTo: function applyTo(canvasEl) {
+ // eslint-disable-line
var context = canvasEl.getContext('2d');
var imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);
var data = imageData.data;
@@ -8525,14 +18297,14 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = ColorFilter;
/***/ }),
-/* 91 */
+/* 122 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _fabric = __webpack_require__(74);
+ var _fabric = __webpack_require__(105);
var _fabric2 = _interopRequireDefault(_fabric);
@@ -8540,19 +18312,19 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _component = __webpack_require__(76);
+ var _component = __webpack_require__(107);
var _component2 = _interopRequireDefault(_component);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
- var _shapeResizeHelper = __webpack_require__(92);
+ var _shapeResizeHelper = __webpack_require__(123);
var _shapeResizeHelper2 = _interopRequireDefault(_shapeResizeHelper);
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -8570,6 +18342,7 @@ return /******/ (function(modules) { // webpackBootstrap
eventNames = _consts2.default.eventNames;
var KEY_CODES = _consts2.default.keyCodes;
+
var DEFAULT_TYPE = 'rect';
var DEFAULT_OPTIONS = {
strokeWidth: 1,
@@ -8698,6 +18471,7 @@ return /******/ (function(modules) { // webpackBootstrap
this._isSelected = false;
canvas.defaultCursor = 'default';
+
canvas.selection = true;
canvas.uniScaleTransform = false;
canvas.off({
@@ -8905,6 +18679,11 @@ return /******/ (function(modules) { // webpackBootstrap
}, {
key: '_onFabricMouseDown',
value: function _onFabricMouseDown(fEvent) {
+ if (!fEvent.target) {
+ this._isSelected = false;
+ this._shapeObj = false;
+ }
+
if (!this._isSelected && !this._shapeObj) {
var canvas = this.getCanvas();
this._startPoint = canvas.getPointer(fEvent.e);
@@ -8968,6 +18747,8 @@ return /******/ (function(modules) { // webpackBootstrap
_shapeResizeHelper2.default.adjustOriginToCenter(shape);
}
+ this.fire(eventNames.ADD_OBJECT_AFTER, this.graphics.createObjectProperties(shape));
+
canvas.off({
'mouse:move': this._handlers.mousemove,
'mouse:up': this._handlers.mouseup
@@ -9017,7 +18798,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = Shape;
/***/ }),
-/* 92 */
+/* 123 */
/***/ (function(module, exports) {
'use strict';
@@ -9278,18 +19059,18 @@ return /******/ (function(modules) { // webpackBootstrap
};
/***/ }),
-/* 93 */
+/* 124 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _drawingMode = __webpack_require__(94);
+ var _drawingMode = __webpack_require__(125);
var _drawingMode2 = _interopRequireDefault(_drawingMode);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9358,7 +19139,7 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = CropperDrawingMode;
/***/ }),
-/* 94 */
+/* 125 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
@@ -9369,7 +19150,7 @@ return /******/ (function(modules) { // webpackBootstrap
*/
- var _errorMessage = __webpack_require__(70);
+ var _errorMessage = __webpack_require__(71);
var _errorMessage2 = _interopRequireDefault(_errorMessage);
@@ -9440,18 +19221,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = DrawingMode;
/***/ }),
-/* 95 */
+/* 126 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _drawingMode = __webpack_require__(94);
+ var _drawingMode = __webpack_require__(125);
var _drawingMode2 = _interopRequireDefault(_drawingMode);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9521,18 +19302,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = FreeDrawingMode;
/***/ }),
-/* 96 */
+/* 127 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _drawingMode = __webpack_require__(94);
+ var _drawingMode = __webpack_require__(125);
var _drawingMode2 = _interopRequireDefault(_drawingMode);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9602,18 +19383,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = LineDrawingMode;
/***/ }),
-/* 97 */
+/* 128 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _drawingMode = __webpack_require__(94);
+ var _drawingMode = __webpack_require__(125);
var _drawingMode2 = _interopRequireDefault(_drawingMode);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9682,18 +19463,18 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = ShapeDrawingMode;
/***/ }),
-/* 98 */
+/* 129 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _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; }; }();
- var _drawingMode = __webpack_require__(94);
+ var _drawingMode = __webpack_require__(125);
var _drawingMode2 = _interopRequireDefault(_drawingMode);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9762,12 +19543,19 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = TextDrawingMode;
/***/ }),
-/* 99 */
+/* 130 */
+/***/ (function(module, exports) {
+
+ // removed by extract-text-webpack-plugin
+
+/***/ }),
+/* 131 */,
+/* 132 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -9775,7 +19563,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9831,12 +19619,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 100 */
+/* 133 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -9844,7 +19632,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9890,12 +19678,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 101 */
+/* 134 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -9903,7 +19691,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -9957,12 +19745,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 102 */
+/* 135 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -9970,7 +19758,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10033,12 +19821,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 103 */
+/* 136 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10046,7 +19834,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10108,16 +19896,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 104 */
+/* 137 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10200,12 +19988,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 105 */
+/* 138 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10213,7 +20001,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10279,16 +20067,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 106 */
+/* 139 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10296,7 +20084,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10371,12 +20159,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 107 */
+/* 140 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10384,7 +20172,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10444,16 +20232,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 108 */
+/* 141 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10461,7 +20249,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10533,12 +20321,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 109 */
+/* 142 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10546,7 +20334,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10591,16 +20379,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 110 */
+/* 143 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10648,16 +20436,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 111 */
+/* 144 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10728,16 +20516,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 112 */
+/* 145 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10788,12 +20576,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 113 */
+/* 146 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10801,7 +20589,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10851,12 +20639,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 114 */
+/* 147 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10864,7 +20652,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10916,16 +20704,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 115 */
+/* 148 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -10976,16 +20764,16 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 116 */
+/* 149 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _tuiCodeSnippet = __webpack_require__(2);
+ var _tuiCodeSnippet = __webpack_require__(3);
var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet);
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -10993,7 +20781,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
@@ -11063,12 +20851,12 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = command;
/***/ }),
-/* 117 */
+/* 150 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
- var _command = __webpack_require__(68);
+ var _command = __webpack_require__(69);
var _command2 = _interopRequireDefault(_command);
@@ -11076,7 +20864,7 @@ return /******/ (function(modules) { // webpackBootstrap
var _promise2 = _interopRequireDefault(_promise);
- var _consts = __webpack_require__(72);
+ var _consts = __webpack_require__(73);
var _consts2 = _interopRequireDefault(_consts);
diff --git a/dist/tui-image-editor.min.css b/dist/tui-image-editor.min.css
new file mode 100644
index 000000000..35d0a5d0e
--- /dev/null
+++ b/dist/tui-image-editor.min.css
@@ -0,0 +1,7 @@
+/*!
+ * tui-image-editor.min.js
+ * @version 3.2.0
+ * @author NHNEnt FE Development Lab
+ * @license MIT
+ */
+body>textarea{position:fixed!important}.tui-image-editor-container{marign:0;padding:0;box-sizing:border-box;min-height:300px;height:100%;position:relative;background-color:#282828;overflow:hidden}.tui-image-editor-container div,.tui-image-editor-container input,.tui-image-editor-container label,.tui-image-editor-container li,.tui-image-editor-container ul{box-sizing:border-box;margin:0;padding:0;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.tui-image-editor-container .tui-image-editor-header{min-width:533px;position:absolute;background-color:#151515;top:0;width:100%}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-header-buttons{float:right;margin:8px}.tui-image-editor-container .tui-image-editor-controls-logo,.tui-image-editor-container .tui-image-editor-header-logo{float:left;width:30%;padding:17px}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-controls-logo{width:270px;height:100%;display:none}.tui-image-editor-container .tui-image-editor-controls-buttons button,.tui-image-editor-container .tui-image-editor-header-buttons button{position:relative;width:120px;height:40px;outline:none;border-radius:20px;border:1px solid #ddd;padding-top:5px;font-family:NotoSans,sans-serif;font-size:12px;font-weight:700;cursor:pointer}.tui-image-editor-container .tui-image-editor-download-btn{background-color:#fdba3b;border-color:#fdba3b;color:#fff}.tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}.tui-image-editor-container .tui-image-editor-main-container{position:absolute;width:100%;top:0;bottom:64px}.tui-image-editor-container .tui-image-editor-main{position:absolute;text-align:center;top:64px;bottom:0;right:0;left:0}.tui-image-editor-container .tui-image-editor-wrap{bottom:150px;width:100%;overflow:auto}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap{display:table;width:100%;height:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap{display:table-cell;vertical-align:middle}.tui-image-editor-container .tui-image-editor{position:static;display:inline-block}.tui-image-editor-container .tui-image-editor-menu{width:auto;list-style:none;padding:0;margin:0 auto;display:table-cell;text-align:center;vertical-align:middle;white-space:nowrap}.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item{position:relative;display:inline-block;border-radius:2px;padding:7px 8px 3px;cursor:pointer;margin:0 4px}.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[title]:hover:before{content:"";display:inline-block;margin:0 auto;width:0;height:0;border-right:7px solid transparent;border-top:7px solid #2f2f2f;border-left:7px solid transparent;position:absolute;left:13px;top:-2px}.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[title]:hover:after{content:attr(title);position:absolute;display:inline-block;background-color:#2f2f2f;color:#fff;padding:5px 8px;font-size:11px;font-weight:lighter;border-radius:3px;max-height:23px;top:-22px;left:0;min-width:24px}.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item.active{background-color:#fff;transition:all .3s ease}.tui-image-editor-container .tui-image-editor-wrap{position:absolute}.tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual{display:block}.tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse;box-shadow:0 0 1px 0 rgba(0,0,0,.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid #fff;box-shadow:0 0 1px 0 rgba(0,0,0,.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:"";position:absolute;width:8px;height:8px;border:1px solid #cdcdcd;border-radius:100%;background-color:#fff}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-4px;left:-4px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-4px;right:-4px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-4px;left:-4px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-4px;right:-4px}.tui-image-editor-container .tui-image-editor-submenu{display:none;position:absolute;bottom:0;width:100%;height:150px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg>use.active{display:block}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li{display:inline-block;vertical-align:top}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline{display:block;margin-top:14px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:400;font-size:11px;margin:0 7px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label{display:inline-block;cursor:pointer;padding-top:5px;font-family:NotoSans,sans-serif;font-size:11px;letter-spacing:.7px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label{vertical-align:7px}.tui-image-editor-container .tui-image-editor-submenu>div{display:none;vertical-align:bottom}.tui-image-editor-container .tui-image-editor-partition>div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 12px 0 14px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition>div{height:108px;margin:0 29px 0 0}.tui-image-editor-container .tui-image-editor-submenu-align{text-align:left;margin-right:30px}.tui-image-editor-container .tui-image-editor-submenu-align label{width:55px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-submenu-align:first-child{margin-right:0}.tui-image-editor-container .tui-image-editor-submenu-align:first-child label{width:70px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu>div.tui-image-editor-menu-crop,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu>div.tui-image-editor-menu-draw,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu>div.tui-image-editor-menu-filter,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu>div.tui-image-editor-menu-flip,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu>div.tui-image-editor-menu-icon,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu>div.tui-image-editor-menu-mask,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu>div.tui-image-editor-menu-rotate,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu>div.tui-image-editor-menu-shape,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu>div.tui-image-editor-menu-text{display:table-cell}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu{display:table}.tui-image-editor-container .filter-color-item{display:inline-block}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{display:block}.tui-image-editor-container .tui-image-editor-checkbox-wrap{display:inline-block!important;text-align:left}.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:187px;white-space:normal}.tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:1px 0}.tui-image-editor-container .tui-image-editor-checkbox input{width:14px;height:14px;opacity:0}.tui-image-editor-container .tui-image-editor-checkbox input+label{color:#fff;height:14px;position:relative}.tui-image-editor-container .tui-image-editor-checkbox input+label:before{content:"";position:absolute;width:14px;height:14px;background-color:#fff;top:4px;left:-19px;display:inline-block;margin:0;text-align:center;font-size:11px;border:0;border-radius:2px;padding-top:1px;box-sizing:border-box}.tui-image-editor-container .tui-image-editor-checkbox input[type=checkbox]:checked+label:before{background-size:cover;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==")}.tui-image-editor-container .tui-image-editor-selectlist-wrap{position:relative}.tui-image-editor-container .tui-image-editor-selectlist-wrap select{width:100%;height:25px;margin-top:9px;border:0;outline:0;border-radius:0;border:1px solid #cbdbdb;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 7px}.tui-image-editor-container .tui-image-editor-selectlist-wrap:after{content:"";position:absolute;display:inline-block;width:14px;height:14px;right:5px;bottom:5px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=");background-size:cover}.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand{display:none}.tui-image-editor-container .tui-image-editor-range{position:relative;top:7px;width:166px;height:17px;display:inline-block}.tui-image-editor-container .tui-image-editor-virtual-range-bar{top:7px;position:absolute;width:100%;height:2px;background-color:#666}.tui-image-editor-container .tui-image-editor-virtual-range-subbar{position:absolute;height:100%;left:0;right:0;background-color:#d1d1d1}.tui-image-editor-container .tui-image-editor-virtual-range-pointer{position:absolute;cursor:pointer;top:-5px;left:0;width:12px;height:12px;background-color:#fff;border-radius:100%}.tui-image-editor-container .tui-image-editor-range-wrap{display:inline-block}.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range{width:100px}.tui-image-editor-container .color-picker-control .tui-image-editor-range{width:108px}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer{background-color:#333}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar{background-color:#ccc}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar{background-color:#606060}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short{margin-top:0;margin-left:17px}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label{color:#8e8e8e;font-weight:400}.tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}.tui-image-editor-container .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:NotoSans,sans-serif;padding-top:2px}.tui-image-editor-container .tui-image-editor-controls{position:absolute;background-color:#151515;width:100%;height:64px;display:table;bottom:0;z-index:1}.tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#282828;width:1px;height:24px}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[title]:before{left:28px;top:11px;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[title]:after{top:7px;left:39px;width:27px}.tui-image-editor-container.left .tui-image-editor-submenu{left:0;height:100%;width:248px}.tui-image-editor-container.left .tui-image-editor-main-container{left:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.left .tui-image-editor-controls{width:64px;height:100%;display:table}.tui-image-editor-container.left .tui-image-editor-menu,.tui-image-editor-container.left .tui-image-editor-submenu,.tui-image-editor-container.right .tui-image-editor-menu,.tui-image-editor-container.right .tui-image-editor-submenu{white-space:normal}.tui-image-editor-container.left .tui-image-editor-submenu>div,.tui-image-editor-container.right .tui-image-editor-submenu>div{vertical-align:middle}.tui-image-editor-container.left .tui-image-editor-controls li,.tui-image-editor-container.right .tui-image-editor-controls li{display:inline-block;margin:4px auto}.tui-image-editor-container.left .tui-image-editor-icpartition,.tui-image-editor-container.right .tui-image-editor-icpartition{position:relative;top:-7px;width:24px;height:1px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition{display:block;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition>div,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition>div{border-left:0;height:10px;border-bottom:1px solid #3c3c3c;width:100%;margin:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align{margin-right:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li{margin-top:15px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li{margin-top:0}.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width{width:182px;white-space:normal}.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range{display:block;text-align:left;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-range,.tui-image-editor-container.right .tui-image-editor-range{width:136px}.tui-image-editor-container.left #tie-icon-add-button .tui-image-editor-button,.tui-image-editor-container.right #tie-icon-add-button .tui-image-editor-button{width:45px}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[title]:before{left:-3px;top:11px;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[title]:after{top:7px;left:-44px;width:27px}.tui-image-editor-container.right .tui-image-editor-submenu{right:0;height:100%;width:248px}.tui-image-editor-container.right .tui-image-editor-main-container{right:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.right .tui-image-editor-controls{right:0;width:64px;height:100%;display:table}.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right{display:none}.tui-image-editor-container.bottom .tui-image-editor-submenu>div{padding-bottom:24px}.tui-image-editor-container.top .color-picker-control .triangle{top:-11px;border-right:12px solid transparent;border-top:0;border-left:12px solid transparent;border-bottom:12px solid #fff}.tui-image-editor-container.top .tui-image-editor-size-wrap{height:calc(100% - 64px)}.tui-image-editor-container.top .tui-image-editor-main-container{bottom:0}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[title]:before{left:13px;border-top:0;border-bottom:7px solid #2f2f2f;top:33px}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[title]:after{top:38px}.tui-image-editor-container.top .tui-image-editor-submenu{top:0;bottom:inherit}.tui-image-editor-container.top .tui-image-editor-submenu>div{padding-top:24px;vertical-align:top}.tui-image-editor-container.top .tui-image-editor-controls-buttons,.tui-image-editor-container.top .tui-image-editor-controls-logo{display:table-cell}.tui-image-editor-container.top .tui-image-editor-main{top:64px;height:100%}.tui-image-editor-container.top .tui-image-editor-controls{top:0;bottom:inherit}.tui-image-editor-container .svg_ic-menu{width:24px;height:24px}.tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}.tui-image-editor-container .svg_img-bi{width:257px;height:26px}.tui-image-editor-container .tui-image-editor-controls svg>use{display:none}.tui-image-editor-container .tui-image-editor-controls .active svg>use.active,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.enabled,.tui-image-editor-container .tui-image-editor-controls svg>use.normal{display:block}.tui-image-editor-container .tui-image-editor-controls .active svg>use.normal,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.normal{display:none}.tui-image-editor-container div.tui-colorpicker-clearfix{width:159px;height:28px;border:1px solid #d5d5d5;border-radius:2px;background-color:#f5f5f5;margin-top:6px;padding:4px 7px}.tui-image-editor-container .tui-colorpicker-palette-hex{width:114px;background-color:#f5f5f5;border:0;font-size:11px;margin-top:2px}.tui-image-editor-container .tui-colorpicker-palette-preview{border-radius:100%;float:left;width:16px;height:16px}.tui-image-editor-container .color-picker-control{position:absolute;display:none;z-index:99;width:188px;height:112px;background-color:#fff;box-shadow:0 3px 22px 0 #000;padding:14px;border-radius:2px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider{display:none}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{border-radius:100%;margin:2px}.tui-image-editor-container .color-picker-control .triangle{width:0;height:0;border-right:12px solid transparent;border-top:12px solid #fff;border-left:12px solid transparent;position:absolute;bottom:-11px;left:77px}.tui-image-editor-container .color-picker-control .tui-colorpicker-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul{width:100%;height:auto}.tui-image-editor-container .filter-color-item .color-picker-control label{font-color:#333;font-weight:400;margin-right:7pxleft}.tui-image-editor-container .color-picker{width:100%;height:auto}.tui-image-editor-container .color-picker-value{width:30px;height:30px;border:0;border-radius:100%;margin:auto;margin-bottom:4px}.tui-image-editor-container .color-picker-value.transparent{border:1px solid #cbcbcb;background-size:cover;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC")}.tui-image-editor-container .color-picker-value+label{color:#fff}.tui-image-editor-container .tui-image-editor-submenu svg>use{display:none}#tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=icon-arrow-2] svg>use.active,#tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=icon-arrow-3] svg>use.active,#tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=icon-arrow] svg>use.active,#tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=icon-bubble] svg>use.active,#tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=icon-heart] svg>use.active,#tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=icon-location] svg>use.active,#tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=icon-polygon] svg>use.active,#tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=icon-star] svg>use.active,.tui-image-editor-container .tui-image-editor-submenu svg>use.normal{display:block}#tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.normal,#tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.normal{display:none}#tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.active,#tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.active{display:block}#tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.normal,#tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.normal,#tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.normal{display:none}#tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.active,#tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.active,#tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.active{display:block}#tie-mask-apply.apply.active .tui-image-editor-button.apply label{color:#fff}#tie-mask-apply.apply.active .tui-image-editor-button.apply svg>use.active{display:block}#tie-crop-button .tui-image-editor-button.apply{margin-right:24px}#tie-crop-button .tui-image-editor-button.apply.active svg>use.active{display:block}#tie-shape-button.circle .tui-image-editor-button.circle svg>use.normal,#tie-shape-button.rect .tui-image-editor-button.rect svg>use.normal,#tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.normal{display:none}#tie-shape-button.circle .tui-image-editor-button.circle svg>use.active,#tie-shape-button.rect .tui-image-editor-button.rect svg>use.active,#tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.active,#tie-text-align-button.center .tui-image-editor-button.center svg>use.active,#tie-text-align-button.left .tui-image-editor-button.left svg>use.active,#tie-text-align-button.right .tui-image-editor-button.right svg>use.active,#tie-text-effect-button .tui-image-editor-button.active svg>use.active{display:block}#tie-icon-image-file,#tie-mask-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid green;cursor:inherit;left:0;top:0}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul{text-align:right}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo{display:none}
\ No newline at end of file
diff --git a/dist/tui-image-editor.min.js b/dist/tui-image-editor.min.js
index 9f31b394a..6c8f89e8a 100644
--- a/dist/tui-image-editor.min.js
+++ b/dist/tui-image-editor.min.js
@@ -1,10 +1,28 @@
/*!
* tui-image-editor.min.js
- * @version 3.1.0
+ * @version 3.2.0
* @author NHNEnt FE Development Lab
* @license MIT
*/
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("fabric/dist/fabric.require"),require("tui-code-snippet")):"function"==typeof define&&define.amd?define(["fabric/dist/fabric.require","tui-code-snippet"],t):"object"==typeof exports?exports.ImageEditor=t(require("fabric/dist/fabric.require"),require("tui-code-snippet")):(e.tui=e.tui||{},e.tui.ImageEditor=t(e.fabric,e.tui&&e.tui.util))}(this,function(e,t){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="dist",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(83),o=r(i);n(41),n(42),n(43),n(44),n(45),n(46),n(47),n(48),n(49),n(50),n(51),n(52),n(53),n(54),n(55),n(56),n(57),n(59),n(58),e.exports=o.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(9),o=r(i);e.exports={componentNames:o.default.keyMirror("IMAGE_LOADER","CROPPER","FLIP","ROTATION","FREE_DRAWING","LINE","TEXT","ICON","FILTER","SHAPE"),commandNames:{CLEAR_OBJECTS:"clearObjects",LOAD_IMAGE:"loadImage",FLIP_IMAGE:"flip",ROTATE_IMAGE:"rotate",ADD_OBJECT:"addObject",REMOVE_OBJECT:"removeObject",APPLY_FILTER:"applyFilter",REMOVE_FILTER:"removeFilter",ADD_ICON:"addIcon",CHANGE_ICON_COLOR:"changeIconColor",ADD_SHAPE:"addShape",CHANGE_SHAPE:"changeShape",ADD_TEXT:"addText",CHANGE_TEXT:"changeText",CHANGE_TEXT_STYLE:"changeTextStyle",ADD_IMAGE_OBJECT:"addImageObject",RESIZE_CANVAS_DIMENSION:"resizeCanvasDimension",SET_OBJECT_PROPERTIES:"setObjectProperties",SET_OBJECT_POSITION:"setObjectPosition"},eventNames:{OBJECT_ACTIVATED:"objectActivated",OBJECT_MOVED:"objectMoved",OBJECT_SCALED:"objectScaled",TEXT_EDITING:"textEditing",TEXT_CHANGED:"textChanged",ADD_TEXT:"addText",ADD_OBJECT:"addObject",MOUSE_DOWN:"mousedown",REDO_STACK_CHANGED:"redoStackChanged",UNDO_STACK_CHANGED:"undoStackChanged"},drawingModes:o.default.keyMirror("NORMAL","CROPPER","FREE_DRAWING","LINE_DRAWING","TEXT","SHAPE"),keyCodes:{Z:90,Y:89,SHIFT:16,BACKSPACE:8,DEL:46},fObjectOptions:{SELECTION_STYLE:{borderColor:"red",cornerColor:"green",cornerSize:10,originX:"center",originY:"center",transparentCorners:!1}},rejectMessages:{flip:"The flipX and flipY setting values are not changed.",rotation:"The current angle is same the old angle.",loadImage:"The background image is empty.",isLock:"The executing command state is locked.",undo:"The promise of undo command is reject.",redo:"The promise of redo command is reject.",invalidDrawingMode:"This operation is not supported in the drawing mode",invalidParameters:"Invalid parameters",noActiveObject:"There is no active object.",unsupportedType:"Unsupported object type",noObject:"The object is not in canvas.",addedObject:"The object is already added."}}},function(e,t,n){n(114),n(116),n(117),n(115),e.exports=n(13).Promise},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e){var t=u[e];if(t){for(var n=arguments.length,r=Array(n>1?n-1:0),i=1;in&&(r=t,t=n,n=r),o(t,i(e,n))},keyMirror:function(){for(var e={},t=arguments.length,n=Array(t),i=0;i0?r:n)(e)}},function(e,t,n){var r=n(92),i=n(22);e.exports=function(e){return r(i(e))}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(9),s=(0,a.keyMirror)("UN_IMPLEMENTATION","NO_COMPONENT_NAME"),u={UN_IMPLEMENTATION:"Should implement a method: ",NO_COMPONENT_NAME:"Should set a component name"},c={UN_IMPLEMENTATION:function(e){return u.UN_IMPLEMENTATION+e},NO_COMPONENT_NAME:function(){return u.NO_COMPONENT_NAME}};e.exports={types:o.default.extend({},s),create:function(e){e=e.toLowerCase();for(var t=c[e],n=arguments.length,r=Array(n>1?n-1:0),i=1;in;)t.push(arguments[n++]);return g[++v]=function(){s("function"==typeof e?e:Function(e),t)},r(v),v},d=function(e){delete g[e]},"process"==n(16)(f)?r=function(e){f.nextTick(a(y,e,1))}:p?(i=new p,o=i.port2,i.port1.onmessage=m,r=a(o.postMessage,o,1)):l.addEventListener&&"function"==typeof postMessage&&!l.importScripts?(r=function(e){l.postMessage(e+"","*")},l.addEventListener("message",m,!1)):r=_ in c("script")?function(e){u.appendChild(c("script"))[_]=function(){u.removeChild(this),y.call(e)}}:function(e){setTimeout(a(y,e,1),0)}),e.exports={set:h,clear:d}},function(e,t,n){var r=n(26),i=Math.min;e.exports=function(e){return e>0?i(r(e),9007199254740991):0}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.componentNames,f=c.default.commandNames,h=l.ICON,d={name:f.ADD_ICON,execute:function(e,t,n){var r=this,i=e.getComponent(h);return i.add(t,n).then(function(t){return r.undoData.object=e.getObject(t.id),t})},undo:function(e){return e.remove(this.undoData.object),s.default.resolve()}};o.default.register(d),e.exports=d},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f={name:l.ADD_IMAGE_OBJECT,execute:function(e,t){var n=this;return e.addImageObject(t).then(function(t){return n.undoData.object=e.getObject(t.id),t})},undo:function(e){return e.remove(this.undoData.object),s.default.resolve()}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f=c.default.rejectMessages,h={name:l.ADD_OBJECT,execute:function(e,t){return new s.default(function(n,r){e.contains(t)?r(f.addedObject):(e.add(t),n(t))})},undo:function(e,t){return new s.default(function(n,r){e.contains(t)?(e.remove(t),n(t)):r(f.noObject)})}};o.default.register(h),e.exports=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.componentNames,f=c.default.commandNames,h=l.SHAPE,d={name:f.ADD_SHAPE,execute:function(e,t,n){var r=this,i=e.getComponent(h);return i.add(t,n).then(function(t){return r.undoData.object=e.getObject(t.id),t})},undo:function(e){return e.remove(this.undoData.object),s.default.resolve()}};o.default.register(d),e.exports=d},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.componentNames,f=c.default.commandNames,h=l.TEXT,d={name:f.ADD_TEXT,execute:function(e,t,n){var r=this,i=e.getComponent(h);return i.add(t,n).then(function(t){return r.undoData.object=e.getObject(t.id),t})},undo:function(e){return e.remove(this.undoData.object),s.default.resolve()}};o.default.register(d),e.exports=d},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(1),s=r(a),u=s.default.componentNames,c=s.default.rejectMessages,l=s.default.commandNames,f=u.FILTER,h={name:l.APPLY_FILTER,execute:function(e,t,n){var r=e.getComponent(f);if("mask"===t){var i=e.getObject(n.maskObjId);if(!i||!i.isType("image"))return Promise.reject(c.invalidParameters);n={mask:i}}return"mask"===t?(this.undoData.object=n.mask,e.remove(n.mask)):this.undoData.options=r.getOptions(t),r.add(t,n)},undo:function(e,t){var n=e.getComponent(f);if("mask"===t){var r=this.undoData.object;return e.add(r),e.setActiveObject(r),n.remove(t)}return this.undoData.options?n.add(t,this.undoData.options):n.remove(t)}};o.default.register(h),e.exports=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.componentNames,f=c.default.rejectMessages,h=c.default.commandNames,d=l.ICON,p={name:h.CHANGE_ICON_COLOR,execute:function(e,t,n){var r=this;return new s.default(function(i,o){var a=e.getComponent(d),s=e.getObject(t);s||o(f.noObject),r.undoData.object=s,r.undoData.color=a.getColor(s),a.setColor(n,s),i()})},undo:function(e){var t=e.getComponent(d),n=this.undoData.object,r=n.object,i=n.color;return t.setColor(i,r),s.default.resolve()}};o.default.register(p),e.exports=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(3),s=r(a),u=n(2),c=r(u),l=n(1),f=r(l),h=f.default.componentNames,d=f.default.rejectMessages,p=f.default.commandNames,v=h.SHAPE,g={name:p.CHANGE_SHAPE,execute:function(e,t,n){var r=this,i=e.getComponent(v),a=e.getObject(t);return a?(this.undoData.object=a,this.undoData.options={},o.default.forEachOwnProperties(n,function(e,t){r.undoData.options[t]=a[t]}),i.change(a,n)):c.default.reject(d.noObject)},undo:function(e){var t=e.getComponent(v),n=this.undoData,r=n.object,i=n.options;return t.change(r,i)}};s.default.register(g),e.exports=g},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.componentNames,f=c.default.rejectMessages,h=c.default.commandNames,d=l.TEXT,p={name:h.CHANGE_TEXT,execute:function(e,t,n){var r=e.getComponent(d),i=e.getObject(t);return i?(this.undoData.object=i,this.undoData.text=r.getText(i),r.change(i,n)):s.default.reject(f.noObject)},undo:function(e){var t=e.getComponent(d),n=this.undoData,r=n.object,i=n.text;return t.change(r,i)}};o.default.register(p),e.exports=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(3),s=r(a),u=n(2),c=r(u),l=n(1),f=r(l),h=f.default.componentNames,d=f.default.rejectMessages,p=f.default.commandNames,v=h.TEXT,g={name:p.CHANGE_TEXT_STYLE,execute:function(e,t,n){var r=this,i=e.getComponent(v),a=e.getObject(t);return a?(this.undoData.object=a,this.undoData.styles={},o.default.forEachOwnProperties(n,function(e,t){r.undoData.styles[t]=a[t]}),i.setStyle(a,n)):c.default.reject(d.noObject)},undo:function(e){var t=e.getComponent(v),n=this.undoData,r=n.object,i=n.styles;return t.setStyle(r,i)}};s.default.register(g),e.exports=g},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f={name:l.CLEAR_OBJECTS,execute:function(e){var t=this;return new s.default(function(n){t.undoData.objects=e.removeAll(),n()})},undo:function(e){return e.add(this.undoData.objects),s.default.resolve()}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(1),s=r(a),u=s.default.componentNames,c=s.default.commandNames,l=u.FLIP,f={name:c.FLIP_IMAGE,execute:function(e,t){var n=e.getComponent(l);return this.undoData.setting=n.getCurrentSetting(),n[t]()},undo:function(e){var t=e.getComponent(l);return t.set(this.undoData.setting)}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(1),s=r(a),u=s.default.componentNames,c=s.default.commandNames,l=u.IMAGE_LOADER,f={name:c.LOAD_IMAGE,execute:function(e,t,n){var r=e.getComponent(l),i=r.getCanvasImage(),o=i?i.width:0,a=i?i.height:0;return this.undoData={name:r.getImageName(),image:i,objects:e.removeAll(!0)},r.load(t,n).then(function(e){return{oldWidth:o,oldHeight:a,newWidth:e.width,newHeight:e.height}})},undo:function(e){var t=e.getComponent(l),n=this.undoData,r=n.objects,i=n.name,o=n.image;return e.removeAll(!0),e.add(r),t.load(i,o)}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(1),s=r(a),u=s.default.componentNames,c=s.default.commandNames,l=u.FILTER,f={name:c.REMOVE_FILTER,execute:function(e,t){var n=e.getComponent(l);return this.undoData.options=n.getOptions(t),n.remove(t)},undo:function(e,t){var n=e.getComponent(l),r=this.undoData.options;return n.add(t,r)}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f=c.default.rejectMessages,h={name:l.REMOVE_OBJECT,execute:function(e,t){var n=this;return new s.default(function(r,i){n.undoData.objects=e.removeObjectById(t),n.undoData.objects.length?r():i(f.noObject)})},undo:function(e){return e.add(this.undoData.objects),s.default.resolve()}};o.default.register(h),e.exports=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f={name:l.RESIZE_CANVAS_DIMENSION,execute:function(e,t){var n=this;return new s.default(function(r){n.undoData.size={width:e.cssMaxWidth,height:e.cssMaxHeight},e.setCssMaxDimension(t),e.adjustCanvasDimension(),r()})},undo:function(e){return e.setCssMaxDimension(this.undoData.size),e.adjustCanvasDimension(),s.default.resolve()}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(1),s=r(a),u=s.default.componentNames,c=s.default.commandNames,l=u.ROTATION,f={name:c.ROTATE_IMAGE,execute:function(e,t,n){var r=e.getComponent(l);return this.undoData.angle=r.getCurrentAngle(),r[t](n)},undo:function(e){var t=e.getComponent(l),n=this.undoData.angle;return t.setAngle(n)}};o.default.register(f),e.exports=f},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(3),o=r(i),a=n(2),s=r(a),u=n(1),c=r(u),l=c.default.commandNames,f=c.default.rejectMessages,h={name:l.SET_OBJECT_POSITION,execute:function(e,t,n){var r=e.getObject(t);return r?(this.undoData.objectId=t,this.undoData.props=e.getObjectProperties(t,["left","top"]),e.setObjectPosition(t,n),e.renderAll(),s.default.resolve()):s.default.reject(f.noObject)},undo:function(e){var t=this.undoData,n=t.objectId,r=t.props;return e.setObjectProperties(n,r),e.renderAll(),s.default.resolve()}};o.default.register(h),e.exports=h},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(3),s=r(a),u=n(2),c=r(u),l=n(1),f=r(l),h=f.default.commandNames,d=f.default.rejectMessages,p={name:h.SET_OBJECT_PROPERTIES,execute:function(e,t,n){var r=this,i=e.getObject(t);return i?(this.undoData.props={},o.default.forEachOwnProperties(n,function(e,t){r.undoData.props[t]=i[t]}),e.setObjectProperties(t,n),c.default.resolve()):c.default.reject(d.noObject)},undo:function(e,t){var n=this.undoData.props;return e.setObjectProperties(t,n),c.default.resolve()}};s.default.register(p),e.exports=p},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=function(){function e(e,t){for(var n=0;ng&&(o.remove(),o.set(this._calcRectDimensionFromPoint(r,i)),t.add(o))}},{key:"_calcRectDimensionFromPoint",value:function(e,t){var n=this.getCanvas(),r=n.getWidth(),i=n.getHeight(),o=this._startX,a=this._startY,s=(0,v.clamp)(e,0,o),u=(0,v.clamp)(t,0,a),c=(0,v.clamp)(e,o,r)-s,l=(0,v.clamp)(t,a,i)-u;return this._withShiftKey&&(c>l?l=c:l>c&&(c=l),o>=e&&(s=o-c),a>=t&&(u=a-l)),{left:s,top:u,width:c,height:l}}},{key:"_onFabricMouseUp",value:function(){var e=this._cropzone,t=this._listeners,n=this.getCanvas();n.setActiveObject(e),n.off({"mouse:move":t.mousemove,"mouse:up":t.mouseup})}},{key:"getCroppedImageData",value:function(e){var t=this.getCanvas(),n=t.contains(this._cropzone);if(!e)return null;n&&this._cropzone.remove();var r={imageName:this.getImageName(),url:t.toDataURL(e)};return n&&t.add(this._cropzone),r}},{key:"getCropzoneRect",value:function(){var e=this._cropzone;return e.isValid()?{left:e.getLeft(),top:e.getTop(),width:e.getWidth(),height:e.getHeight()}:null}},{key:"_onKeyDown",value:function(e){e.keyCode===p.keyCodes.SHIFT&&(this._withShiftKey=!0)}},{key:"_onKeyUp",value:function(e){e.keyCode===p.keyCodes.SHIFT&&(this._withShiftKey=!1)}}]),t}(f.default);e.exports=_},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=function(){function e(e,t){for(var n=0;nn},_getColor:function(e,t,n){var r=[0,0,0,0],i=e.data,o=e.width,a=4,s=(o*n+t)*a;return r[0]=i[s],r[1]=i[s+1],r[2]=i[s+2],r[3]=i[s+3],r}});e.exports=a},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(5),o=r(i),a=n(4),s=r(a),u=n(9),c="tl",l="tr",f="mt",h="ml",d="mr",p="mb",v="bl",g="br",_=s.default.util.createClass(s.default.Rect,{initialize:function(e){e.type="cropzone",this.callSuper("initialize",e),this.on({moving:this._onMoving,scaling:this._onScaling})},_render:function(e){var t=7,n=7;this.callSuper("_render",e);var r=this.flipX?-1:1,i=this.flipY?-1:1,o=r/this.scaleX,a=i/this.scaleY;e.scale(o,a),this._fillOuterRect(e,"rgba(0, 0, 0, 0.55)"),this._strokeBorder(e,"rgb(0, 0, 0)",t),this._strokeBorder(e,"rgb(255, 255, 255)",t,n),e.scale(1/o,1/a)},_fillOuterRect:function(e,t){var n=this._getCoordinates(e),r=n.x,i=n.y;e.save(),e.fillStyle=t,e.beginPath(),e.moveTo(r[0]-1,i[0]-1),e.lineTo(r[3]+1,i[0]-1),e.lineTo(r[3]+1,i[3]+1),e.lineTo(r[0]-1,i[3]-1),e.lineTo(r[0]-1,i[0]-1),e.closePath(),e.moveTo(r[1],i[1]),e.lineTo(r[1],i[2]),e.lineTo(r[2],i[2]),e.lineTo(r[2],i[1]),e.lineTo(r[1],i[1]),e.closePath(),e.fill(),e.restore()},_getCoordinates:function(e){var t=this.getWidth(),n=this.getHeight(),r=t/2,i=n/2,a=this.getLeft(),s=this.getTop(),u=e.canvas;return{x:o.default.map([-(r+a),-r,r,r+(u.width-a-t)],Math.ceil),y:o.default.map([-(i+s),-i,i,i+(u.height-s-n)],Math.ceil)}},_strokeBorder:function(e,t,n,r){var i=this.getWidth()/2,o=this.getHeight()/2;e.save(),e.strokeStyle=t,e.setLineDash&&e.setLineDash([n,n]),r&&(e.lineDashOffset=r),
-e.beginPath(),e.moveTo(-i,-o),e.lineTo(i,-o),e.lineTo(i,o),e.lineTo(-i,o),e.lineTo(-i,-o),e.stroke(),e.restore()},_onMoving:function(){var e=this.getLeft(),t=this.getTop(),n=this.getWidth(),r=this.getHeight(),i=this.canvas.getWidth()-n,o=this.canvas.getHeight()-r;this.setLeft((0,u.clamp)(e,0,i)),this.setTop((0,u.clamp)(t,0,o))},_onScaling:function(e){var t=this.canvas.getPointer(e.e),n=this._calcScalingSizeFromPointer(t);this.scale(1).set(n)},_calcScalingSizeFromPointer:function(e){var t=e.x,n=e.y,r=this._calcTopLeftScalingSizeFromPointer(t,n),i=this._calcBottomRightScalingSizeFromPointer(t,n);return this._makeScalingSettings(r,i)},_calcTopLeftScalingSizeFromPointer:function(e,t){var n=this.getHeight()+this.top,r=this.getWidth()+this.left,i=(0,u.clamp)(t,0,n-1),o=(0,u.clamp)(e,0,r-1);return{top:i,left:o,width:r-o,height:n-i}},_calcBottomRightScalingSizeFromPointer:function(e,t){var n=this.canvas,r=n.width,i=n.height,o=this.left,a=this.top;return{width:(0,u.clamp)(e,o+1,r)-o,height:(0,u.clamp)(t,a+1,i)-a}},_makeScalingSettings:function(e,t){var n=e.width,r=e.height,i=t.height,o=t.width,a=e.left,s=e.top,u=void 0;switch(this.__corner){case c:u=e;break;case l:u={width:o,height:r,top:s};break;case v:u={width:n,height:i,left:a};break;case g:u=t;break;case h:u={width:n,left:a};break;case f:u={height:r,top:s};break;case d:u={width:o};break;case p:u={height:i}}return u},isValid:function(){return this.left>=0&&this.top>=0&&this.width>0&&this.height>0}});e.exports=_},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(4),o=r(i),a=o.default.util.createClass(o.default.Image.filters.Convolute,{type:"Emboss",initialize:function(){var e=[1,1,1,1,.7,-1,-1,-1,-1];this.matrix=e}});e.exports=a},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}var i=n(4),o=r(i),a=o.default.util.createClass(o.default.Image.filters.Mask,{applyTo:function(e){if(this.mask){var t=e.width,n=e.height,r=this._createCanvasOfMask(t,n),i=e.getContext("2d"),o=r.getContext("2d"),a=i.getImageData(0,0,t,n);this._drawMask(o,e,i),this._mapData(o,a,t,n),i.putImageData(a,0,0)}},_createCanvasOfMask:function(e,t){var n=o.default.util.createCanvasElement();return n.width=e,n.height=t,n},_drawMask:function(e){var t=this.mask,n=t.getElement(),r=t.getLeft(),i=t.getTop(),o=t.getAngle();e.save(),e.translate(r,i),e.rotate(o*Math.PI/180),e.scale(t.scaleX,t.scaleY),e.drawImage(n,-n.width/2,-n.height/2),e.restore()},_mapData:function(e,t,n,r){for(var i=t.data,o=e.getImageData(0,0,n,r).data,a=this.channel,s=t.width*t.height*4,u=0;uu?"right":"left",originY:i>c?"bottom":"top"}}function i(e){return"center"===e.getOriginX()&&"center"===e.getOriginY()}function o(e,t){var n=t.getPointByOrigin("center","center"),i=-t.getAngle(),o=r(n,e,i),a=o.originX,s=o.originY,u=t.getPointByOrigin(a,s),c=t.getLeft()-(n.x-u.x),l=t.getTop()-(n.x-u.y);t.set({originX:a,originY:s,left:c,top:l}),t.setCoords()}function a(e,t){var n=t.startPoint,i=-t.getAngle(),o=r(n,e,i),a=o.originX,s=o.originY;t.setPositionByOrigin(n,a,s)}function s(e){var t=e.type,n=e.scaleX,r=e.scaleY,i=l[t],o=e[i.w]*n,a=e[i.h]*r;if(e.isRegular){var s=Math.max(n,r);o=e[i.w]*s,a=e[i.h]*s}var u={hasControls:!1,hasBorders:!1,scaleX:1,scaleY:1};u[i.w]=o,u[i.h]=a,e.set(u)}function u(e,t){var n=t.type,r=t.strokeWidth,i=t.startPoint,o=c[n],a=l[n],s=!("triangle"!==t.type),u={},f=Math.abs(i.x-e.x)/o,h=Math.abs(i.y-e.y)/o;f>r&&(f-=r/o),h>r&&(h-=r/o),t.isRegular&&(f=h=Math.max(f,h),s&&(h=Math.sqrt(3)/2*f)),u[a.w]=f,u[a.h]=h,t.set(u)}var c={rect:1,circle:2,triangle:1},l={rect:{w:"width",h:"height"},circle:{w:"rx",h:"ry"},triangle:{w:"width",h:"height"}};e.exports={setOrigins:function(e){var t=e.getPointByOrigin("left","top"),n=e.getPointByOrigin("right","top"),r=e.getPointByOrigin("right","bottom"),i=e.getPointByOrigin("left","bottom");e.origins={lt:t,rt:n,rb:r,lb:i}},resize:function(e,t,r){i(e)&&(o(t,e),n(e)),r?s(e,t):u(t,e),a(t,e)},adjustOriginToCenter:function(e){var t=e.getPointByOrigin("center","center"),n=e.getOriginX(),r=e.getOriginY(),i=e.getPointByOrigin(n,r),o=e.getLeft()+(t.x-i.x),a=e.getTop()+(t.y-i.y);e.set({hasControls:!0,hasBorders:!0,originX:"center",originY:"center",left:o,top:a}),e.setCoords()}}},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var n=0;n1?n-1:0),i=1;il;)if(s=u[l++],s!=s)return!0}else for(;c>l;l++)if((e||l in u)&&u[l]===n)return e||l||0;return!e&&-1}}},function(e,t,n){var r=n(17),i=n(94),o=n(93),a=n(10),s=n(39),u=n(112),c={},l={},t=e.exports=function(e,t,n,f,h){var d,p,v,g,_=h?function(){return e}:u(e),y=r(n,f,t?2:1),m=0;if("function"!=typeof _)throw TypeError(e+" is not iterable!");if(o(_)){for(d=s(e.length);d>m;m++)if(g=t?y(a(p=e[m])[0],p[1]):y(e[m]),g===c||g===l)return g}else for(v=_.call(e);!(p=v.next()).done;)if(g=i(v,y,p.value,t),g===c||g===l)return g};t.BREAK=c,t.RETURN=l},function(e,t,n){e.exports=!n(14)&&!n(32)(function(){return 7!=Object.defineProperty(n(23)("div"),"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e,t,n){var r=void 0===n;switch(t.length){case 0:return r?e():e.call(n);case 1:return r?e(t[0]):e.call(n,t[0]);case 2:return r?e(t[0],t[1]):e.call(n,t[0],t[1]);case 3:return r?e(t[0],t[1],t[2]):e.call(n,t[0],t[1],t[2]);case 4:return r?e(t[0],t[1],t[2],t[3]):e.call(n,t[0],t[1],t[2],t[3])}return e.apply(n,t)}},function(e,t,n){var r=n(16);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==r(e)?e.split(""):Object(e)}},function(e,t,n){var r=n(15),i=n(6)("iterator"),o=Array.prototype;e.exports=function(e){return void 0!==e&&(r.Array===e||o[i]===e)}},function(e,t,n){var r=n(10);e.exports=function(e,t,n,i){try{return i?t(r(n)[0],n[1]):t(n)}catch(t){var o=e.return;throw void 0!==o&&r(o.call(e)),t}}},function(e,t,n){"use strict";var r=n(99),i=n(36),o=n(24),a={};n(11)(a,n(6)("iterator"),function(){return this}),e.exports=function(e,t,n){e.prototype=r(a,{next:i(1,n)}),o(e,t+" Iterator")}},function(e,t,n){var r=n(6)("iterator"),i=!1;try{var o=[7][r]();o.return=function(){i=!0},Array.from(o,function(){throw 2})}catch(e){}e.exports=function(e,t){if(!t&&!i)return!1;var n=!1;try{var o=[7],a=o[r]();a.next=function(){return{done:n=!0}},o[r]=function(){return a},e(o)}catch(e){}return n}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,n){var r=n(8),i=n(38).set,o=r.MutationObserver||r.WebKitMutationObserver,a=r.process,s=r.Promise,u="process"==n(16)(a);e.exports=function(){var e,t,n,c=function(){var r,i;for(u&&(r=a.domain)&&r.exit();e;){i=e.fn,e=e.next;try{i()}catch(r){throw e?n():t=void 0,r}}t=void 0,r&&r.enter()};if(u)n=function(){a.nextTick(c)};else if(o){var l=!0,f=document.createTextNode("");new o(c).observe(f,{characterData:!0}),n=function(){f.data=l=!l}}else if(s&&s.resolve){var h=s.resolve();n=function(){h.then(c)}}else n=function(){i.call(r,c)};return function(r){var i={fn:r,next:void 0};t&&(t.next=i),e||(e=i,n()),t=i}}},function(e,t,n){var r=n(10),i=n(100),o=n(30),a=n(25)("IE_PROTO"),s=function(){},u="prototype",c=function(){var e,t=n(23)("iframe"),r=o.length,i="<",a=">";for(t.style.display="none",n(33).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write(i+"script"+a+"document.F=Object"+i+"/script"+a),e.close(),c=e.F;r--;)delete c[u][o[r]];return c()};e.exports=Object.create||function(e,t){var n;return null!==e?(s[u]=r(e),n=new s,s[u]=null,n[a]=e):n=c(),void 0===t?n:i(n,t)}},function(e,t,n){var r=n(20),i=n(10),o=n(103);e.exports=n(14)?Object.defineProperties:function(e,t){i(e);for(var n,a=o(t),s=a.length,u=0;s>u;)r.f(e,n=a[u++],t[n]);return e}},function(e,t,n){var r=n(18),i=n(110),o=n(25)("IE_PROTO"),a=Object.prototype;e.exports=Object.getPrototypeOf||function(e){return e=i(e),r(e,o)?e[o]:"function"==typeof e.constructor&&e instanceof e.constructor?e.constructor.prototype:e instanceof Object?a:null}},function(e,t,n){var r=n(18),i=n(27),o=n(88)(!1),a=n(25)("IE_PROTO");e.exports=function(e,t){var n,s=i(e),u=0,c=[];for(n in s)n!=a&&r(s,n)&&c.push(n);for(;t.length>u;)r(s,n=t[u++])&&(~o(c,n)||c.push(n));return c}},function(e,t,n){var r=n(102),i=n(30);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t,n){var r=n(11);e.exports=function(e,t,n){for(var i in t)n&&e[i]?e[i]=t[i]:r(e,i,t[i]);return e}},function(e,t,n){e.exports=n(11)},function(e,t,n){"use strict";var r=n(8),i=n(13),o=n(20),a=n(14),s=n(6)("species");e.exports=function(e){var t="function"==typeof i[e]?i[e]:r[e];a&&t&&!t[s]&&o.f(t,s,{configurable:!0,get:function(){return this}})}},function(e,t,n){var r=n(10),i=n(21),o=n(6)("species");e.exports=function(e,t){var n,a=r(e).constructor;return void 0===a||void 0==(n=r(a)[o])?t:i(n)}},function(e,t,n){var r=n(26),i=n(22);e.exports=function(e){return function(t,n){var o,a,s=String(i(t)),u=r(n),c=s.length;return u<0||u>=c?e?"":void 0:(o=s.charCodeAt(u),o<55296||o>56319||u+1===c||(a=s.charCodeAt(u+1))<56320||a>57343?e?s.charAt(u):o:e?s.slice(u,u+2):(o-55296<<10)+(a-56320)+65536);
-}}},function(e,t,n){var r=n(26),i=Math.max,o=Math.min;e.exports=function(e,t){return e=r(e),e<0?i(e+t,0):o(e,t)}},function(e,t,n){var r=n(22);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(19);e.exports=function(e,t){if(!r(e))return e;var n,i;if(t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;if("function"==typeof(n=e.valueOf)&&!r(i=n.call(e)))return i;if(!t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;throw TypeError("Can't convert object to primitive value")}},function(e,t,n){var r=n(29),i=n(6)("iterator"),o=n(15);e.exports=n(13).getIteratorMethod=function(e){if(void 0!=e)return e[i]||e["@@iterator"]||o[r(e)]}},function(e,t,n){"use strict";var r=n(86),i=n(97),o=n(15),a=n(27);e.exports=n(34)(Array,"Array",function(e,t){this._t=a(e),this._i=0,this._k=t},function(){var e=this._t,t=this._k,n=this._i++;return!e||n>=e.length?(this._t=void 0,i(1)):"keys"==t?i(0,n):"values"==t?i(0,e[n]):i(0,[n,e[n]])},"values"),o.Arguments=o.Array,r("keys"),r("values"),r("entries")},function(e,t){},function(e,t,n){"use strict";var r,i,o,a=n(35),s=n(8),u=n(17),c=n(29),l=n(31),f=n(19),h=n(21),d=n(87),p=n(89),v=n(107),g=n(38).set,_=n(98)(),y="Promise",m=s.TypeError,b=s.process,O=s[y],b=s.process,k="process"==c(b),w=function(){},C=!!function(){try{var e=O.resolve(1),t=(e.constructor={})[n(6)("species")]=function(e){e(w,w)};return(k||"function"==typeof PromiseRejectionEvent)&&e.then(w)instanceof t}catch(e){}}(),E=function(e,t){return e===t||e===O&&t===o},j=function(e){var t;return!(!f(e)||"function"!=typeof(t=e.then))&&t},x=function(e){return E(O,e)?new T(e):new i(e)},T=i=function(e){var t,n;this.promise=new e(function(e,r){if(void 0!==t||void 0!==n)throw m("Bad Promise constructor");t=e,n=r}),this.resolve=h(t),this.reject=h(n)},M=function(e){try{e()}catch(e){return{error:e}}},S=function(e,t){if(!e._n){e._n=!0;var n=e._c;_(function(){for(var r=e._v,i=1==e._s,o=0,a=function(t){var n,o,a=i?t.ok:t.fail,s=t.resolve,u=t.reject,c=t.domain;try{a?(i||(2==e._h&&D(e),e._h=1),a===!0?n=r:(c&&c.enter(),n=a(r),c&&c.exit()),n===t.promise?u(m("Promise-chain cycle")):(o=j(n))?o.call(n,s,u):s(n)):u(r)}catch(e){u(e)}};n.length>o;)a(n[o++]);e._c=[],e._n=!1,t&&!e._h&&P(e)})}},P=function(e){g.call(s,function(){var t,n,r,i=e._v;if(A(e)&&(t=M(function(){k?b.emit("unhandledRejection",i,e):(n=s.onunhandledrejection)?n({promise:e,reason:i}):(r=s.console)&&r.error&&r.error("Unhandled promise rejection",i)}),e._h=k||A(e)?2:1),e._a=void 0,t)throw t.error})},A=function(e){if(1==e._h)return!1;for(var t,n=e._a||e._c,r=0;n.length>r;)if(t=n[r++],t.fail||!A(t.promise))return!1;return!0},D=function(e){g.call(s,function(){var t;k?b.emit("rejectionHandled",e):(t=s.onrejectionhandled)&&t({promise:e,reason:e._v})})},I=function(e){var t=this;t._d||(t._d=!0,t=t._w||t,t._v=e,t._s=2,t._a||(t._a=t._c.slice()),S(t,!0))},N=function(e){var t,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===e)throw m("Promise can't be resolved itself");(t=j(e))?_(function(){var r={_w:n,_d:!1};try{t.call(e,u(N,r,1),u(I,r,1))}catch(e){I.call(r,e)}}):(n._v=e,n._s=1,S(n,!1))}catch(e){I.call({_w:n,_d:!1},e)}}};C||(O=function(e){d(this,O,y,"_h"),h(e),r.call(this);try{e(u(N,this,1),u(I,this,1))}catch(e){I.call(this,e)}},r=function(e){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1},r.prototype=n(104)(O.prototype,{then:function(e,t){var n=x(v(this,O));return n.ok="function"!=typeof e||e,n.fail="function"==typeof t&&t,n.domain=k?b.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&S(this,!1),n.promise},catch:function(e){return this.then(void 0,e)}}),T=function(){var e=new r;this.promise=e,this.resolve=u(N,e,1),this.reject=u(I,e,1)}),l(l.G+l.W+l.F*!C,{Promise:O}),n(24)(O,y),n(106)(y),o=n(13)[y],l(l.S+l.F*!C,y,{reject:function(e){var t=x(this),n=t.reject;return n(e),t.promise}}),l(l.S+l.F*(a||!C),y,{resolve:function(e){if(e instanceof O&&E(e.constructor,this))return e;var t=x(this),n=t.resolve;return n(e),t.promise}}),l(l.S+l.F*!(C&&n(96)(function(e){O.all(e).catch(w)})),y,{all:function(e){var t=this,n=x(t),r=n.resolve,i=n.reject,o=M(function(){var n=[],o=0,a=1;p(e,!1,function(e){var s=o++,u=!1;n.push(void 0),a++,t.resolve(e).then(function(e){u||(u=!0,n[s]=e,--a||r(n))},i)}),--a||r(n)});return o&&i(o.error),n.promise},race:function(e){var t=this,n=x(t),r=n.reject,i=M(function(){p(e,!1,function(e){t.resolve(e).then(n.resolve,r)})});return i&&r(i.error),n.promise}})},function(e,t,n){"use strict";var r=n(108)(!0);n(34)(String,"String",function(e){this._t=String(e),this._i=0},function(){var e,t=this._t,n=this._i;return n>=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t,n){n(113);for(var r=n(8),i=n(11),o=n(15),a=n(6)("toStringTag"),s=["NodeList","DOMTokenList","MediaList","StyleSheetList","CSSRuleList"],u=0;u<5;u++){var c=s[u],l=r[c],f=l&&l.prototype;f&&!f[a]&&i(f,a,c),o[c]=o.Array}}])});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("tui-code-snippet"),require("fabric/dist/fabric.require")):"function"==typeof define&&define.amd?define(["tui-code-snippet","fabric/dist/fabric.require"],t):"object"==typeof exports?exports.ImageEditor=t(require("tui-code-snippet"),require("fabric/dist/fabric.require")):(e.tui=e.tui||{},e.tui.ImageEditor=t(e.tui&&e.tui.util,e.fabric))}(this,function(e,t){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="dist",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}n(91);var o=n(88),r=i(o);n(148),n(45),n(46),n(47),n(48),n(49),n(50),n(51),n(52),n(53),n(54),n(55),n(56),n(57),n(58),n(59),n(60),n(61),n(63),n(62),e.exports=r.default},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var o=n(5),r=i(o);e.exports={componentNames:r.default.keyMirror("IMAGE_LOADER","CROPPER","FLIP","ROTATION","FREE_DRAWING","LINE","TEXT","ICON","FILTER","SHAPE"),commandNames:{CLEAR_OBJECTS:"clearObjects",LOAD_IMAGE:"loadImage",FLIP_IMAGE:"flip",ROTATE_IMAGE:"rotate",ADD_OBJECT:"addObject",REMOVE_OBJECT:"removeObject",APPLY_FILTER:"applyFilter",REMOVE_FILTER:"removeFilter",ADD_ICON:"addIcon",CHANGE_ICON_COLOR:"changeIconColor",ADD_SHAPE:"addShape",CHANGE_SHAPE:"changeShape",ADD_TEXT:"addText",CHANGE_TEXT:"changeText",CHANGE_TEXT_STYLE:"changeTextStyle",ADD_IMAGE_OBJECT:"addImageObject",RESIZE_CANVAS_DIMENSION:"resizeCanvasDimension",SET_OBJECT_PROPERTIES:"setObjectProperties",SET_OBJECT_POSITION:"setObjectPosition"},eventNames:{OBJECT_ACTIVATED:"objectActivated",OBJECT_MOVED:"objectMoved",OBJECT_SCALED:"objectScaled",OBJECT_CREATED:"objectCreated",TEXT_EDITING:"textEditing",TEXT_CHANGED:"textChanged",ICON_CREATE_RESIZE:"iconCreateResize",ICON_CREATE_END:"iconCreateEnd",ADD_TEXT:"addText",ADD_OBJECT:"addObject",ADD_OBJECT_AFTER:"addObjectAfter",MOUSE_DOWN:"mousedown",MOUSE_UP:"mouseup",MOUSE_MOVE:"mousemove",REDO_STACK_CHANGED:"redoStackChanged",UNDO_STACK_CHANGED:"undoStackChanged",SELECTION_CLEARED:"selectionCleared",SELECTION_CREATED:"selectionCreated"},drawingModes:r.default.keyMirror("NORMAL","CROPPER","FREE_DRAWING","LINE_DRAWING","TEXT","SHAPE"),keyCodes:{Z:90,Y:89,SHIFT:16,BACKSPACE:8,DEL:46},fObjectOptions:{SELECTION_STYLE:{borderColor:"red",cornerColor:"green",cornerSize:10,originX:"center",originY:"center",transparentCorners:!1}},rejectMessages:{flip:"The flipX and flipY setting values are not changed.",rotation:"The current angle is same the old angle.",loadImage:"The background image is empty.",isLock:"The executing command state is locked.",undo:"The promise of undo command is reject.",redo:"The promise of redo command is reject.",invalidDrawingMode:"This operation is not supported in the drawing mode",invalidParameters:"Invalid parameters",noActiveObject:"There is no active object.",unsupportedType:"Unsupported object type",noObject:"The object is not in canvas.",addedObject:"The object is already added."},defaultIconPath:{"icon-arrow":"M40 12V0l24 24-24 24V36H0V12h40z","icon-arrow-2":"M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ","icon-arrow-3":"M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ","icon-star":"M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ","icon-star-2":"M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ","icon-polygon":"M3,31 L19,3 h32 l16,28 l-16,28 H19 z ","icon-location":"M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z","icon-heart":"M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ","icon-bubble":"M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z"},defaultRotateRangeValus:{realTimeEvent:!0,min:-360,max:360,value:0},defaultDrawRangeValus:{min:5,max:30,value:12},defaultShapeStrokeValus:{realTimeEvent:!1,min:2,max:300,value:3},defaultTextRangeValus:{realTimeEvent:!0,min:10,max:100,value:50},defaultFilterRangeValus:{tintOpacityRange:{min:0,max:1,value:.7},removewhiteThresholdRange:{min:0,max:255,value:60},removewhiteDistanceRange:{min:0,max:255,value:10},gradientTransparencyRange:{min:0,max:255,value:100},brightnessRange:{min:-255,max:255,value:100},noiseRange:{min:0,max:1e3,value:100},pixelateRange:{min:2,max:20,value:4},colorfilterThresholeRange:{min:0,max:255,value:45}}}},function(e,t,n){n(144),n(146),n(147),n(145),e.exports=n(16).Promise},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e){var t=l[e];if(t){for(var n=arguments.length,i=Array(n>1?n-1:0),o=1;on&&(i=t,t=n,n=i),r(t,o(e,n))},keyMirror:function(){for(var e={},t=arguments.length,n=Array(t),o=0;o1&&void 0!==arguments[1]?arguments[1]:"#7e7e7e",i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"up";o(this,e);var r=t.getAttribute("title");this._show=!1,this._toggleDirection=i,this._makePickerButtonElement(t,n),this._makePickerLayerElement(t,r),this._color=n,this.picker=u.default.create({container:this.pickerElement,preset:d,color:n}),this._addEvent(t)}return r(e,[{key:"_changeColorElement",value:function(e){e?(this.colorElement.classList.remove("transparent"),this.colorElement.style.backgroundColor=e):(this.colorElement.style.backgroundColor="#fff",this.colorElement.classList.add("transparent"))}},{key:"_makePickerButtonElement",value:function(e,t){e.classList.add("tui-image-editor-button"),this.colorElement=document.createElement("div"),this.colorElement.className="color-picker-value",t?this.colorElement.style.backgroundColor=t:this.colorElement.classList.add("transparent")}},{key:"_makePickerLayerElement",value:function(e,t){var n=document.createElement("label"),i=document.createElement("div");this.pickerControl=document.createElement("div"),this.pickerControl.className="color-picker-control",this.pickerElement=document.createElement("div"),this.pickerElement.className="color-picker",n.innerHTML=t,i.className="triangle",this.pickerControl.appendChild(this.pickerElement),this.pickerControl.appendChild(i),e.appendChild(this.pickerControl),e.appendChild(this.colorElement),e.appendChild(n),this._setPickerControlPosition()}},{key:"_addEvent",value:function(e){var t=this;this.picker.on("selectColor",function(e){t._changeColorElement(e.color),t._color=e.color,t.fire("change",e.color)}),e.addEventListener("click",function(e){t._show=!t._show,t.pickerControl.style.display=t._show?"block":"none",e.stopPropagation()}),document.body.addEventListener("click",function(){t._show=!1,t.pickerControl.style.display="none"})}},{key:"_setPickerControlPosition",value:function(){var e=this.pickerControl.style,t=(0,l.toInteger)(window.getComputedStyle(this.pickerControl,null).width)/2-20,n=((0,l.toInteger)(window.getComputedStyle(this.pickerControl,null).height)+12)*-1;"down"===this._toggleDirection&&(n=30),e.top=n+"px",e.left="-"+t+"px"}},{key:"color",get:function(){return this._color},set:function(e){this._color=e,this._changeColorElement(e)}}]),e}();s.default.CustomEvents.mixin(h),t.default=h},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var r=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this._value=n.value||0,this.rangeElement=t,this._drawRangeElement(),this.rangeWidth=(0,l.toInteger)(window.getComputedStyle(t,null).width)-12,this._min=n.min||0,this._max=n.max||100,this._absMax=this._min*-1+this._max,this.realTimeEvent=n.realTimeEvent||!1,this._addClickEvent(),this._addDragEvent(),this.value=n.value,this.trigger("change")}return r(e,[{key:"trigger",value:function(e){this.fire(e,this._value)}},{key:"_drawRangeElement",value:function(){this.rangeElement.classList.add("tui-image-editor-range"),this.bar=document.createElement("div"),this.bar.className="tui-image-editor-virtual-range-bar",this.subbar=document.createElement("div"),this.subbar.className="tui-image-editor-virtual-range-subbar",this.pointer=document.createElement("div"),this.pointer.className="tui-image-editor-virtual-range-pointer",this.bar.appendChild(this.subbar),this.bar.appendChild(this.pointer),this.rangeElement.appendChild(this.bar)}},{key:"_addClickEvent",value:function(){var e=this;this.rangeElement.addEventListener("click",function(t){if(t.stopPropagation(),"tui-image-editor-range"===t.target.className){var n=t.offsetX,i=n/e.rangeWidth,o=e._absMax*i+e._min;e.pointer.style.left=i*e.rangeWidth+"px",e.subbar.style.right=(1-i)*e.rangeWidth+"px",e._value=o,e.fire("change",o)}})}},{key:"_addDragEvent",value:function(){var e=this;this.pointer.addEventListener("mousedown",function(t){e.firstPosition=t.screenX,e.firstLeft=(0,l.toInteger)(e.pointer.style.left)||0,e.dragEventHandler={changeAngle:e._changeAngle.bind(e),stopChangingAngle:e._stopChangingAngle.bind(e)},document.addEventListener("mousemove",e.dragEventHandler.changeAngle),document.addEventListener("mouseup",e.dragEventHandler.stopChangingAngle)})}},{key:"_changeAngle",value:function(e){var t=e.screenX,n=t-this.firstPosition,i=this.firstLeft+n;i=i>this.rangeWidth?this.rangeWidth:i,i=i<0?0:i,this.pointer.style.left=i+"px",this.subbar.style.right=this.rangeWidth-i+"px";var o=i/this.rangeWidth,r=this._absMax*o+this._min;this._value=r,this.realTimeEvent&&this.fire("change",r)}},{key:"_stopChangingAngle",value:function(){this.fire("change",this._value),document.removeEventListener("mousemove",this.dragEventHandler.changeAngle),document.removeEventListener("mouseup",this.dragEventHandler.stopChangingAngle)}},{key:"max",set:function(e){this._max=e,this._absMax=this._min*-1+this._max,this.value=this._value},get:function(){return this._max}},{key:"value",get:function(){return this._value},set:function(e){var t=e-this._min,n=t*this.rangeWidth/this._absMax;this.rangeWidth0?i:n)(e)}},function(e,t,n){var i=n(122),o=n(25);e.exports=function(e){return i(o(e))}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var o=n(3),r=i(o),a=n(5),s=(0,a.keyMirror)("UN_IMPLEMENTATION","NO_COMPONENT_NAME"),l={UN_IMPLEMENTATION:"Should implement a method: ",NO_COMPONENT_NAME:"Should set a component name"},c={UN_IMPLEMENTATION:function(e){return l.UN_IMPLEMENTATION+e},NO_COMPONENT_NAME:function(){return l.NO_COMPONENT_NAME}};e.exports={types:r.default.extend({},s),create:function(e){e=e.toLowerCase();for(var t=c[e],n=arguments.length,i=Array(n>1?n-1:0),o=1;on;)t.push(arguments[n++]);return v[++g]=function(){s("function"==typeof e?e:Function(e),t)},i(g),g},f=function(e){delete v[e]},"process"==n(19)(d)?i=function(e){d.nextTick(a(b,e,1))}:p?(o=new p,r=o.port2,o.port1.onmessage=y,i=a(r.postMessage,r,1)):u.addEventListener&&"function"==typeof postMessage&&!u.importScripts?(i=function(e){u.postMessage(e+"","*")},u.addEventListener("message",y,!1)):i=m in c("script")?function(e){l.appendChild(c("script"))[m]=function(){l.removeChild(this),b.call(e)}}:function(e){setTimeout(a(b,e,1),0)}),e.exports={set:h,clear:f}},function(e,t,n){var i=n(29),o=Math.min;e.exports=function(e){return e>0?o(i(e),9007199254740991):0}},function(e,t){var n=0,i=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+i).toString(36))}},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),r=n(5),a=i(r),s=n(86),l=i(s);t.default={getActions:function(){return{main:this._mainAction(),shape:this._shapeAction(),crop:this._cropAction(),flip:this._flipAction(),rotate:this._rotateAction(),text:this._textAction(),mask:this._maskAction(),draw:this._drawAction(),icon:this._iconAction(),filter:this._filterAction()}},_mainAction:function(){var e=this,t=function(){"crop"===e.ui.submenu&&(e.stopDrawingMode(),e.ui.changeMenu("crop"))};return(0,o.extend)({initLoadImage:function(n,i){return e.loadImageFromURL(n,i).then(function(i){t(),e.ui.initializeImgUrl=n,e.ui.resizeEditor({imageSize:i}),e.clearUndoStack()})},undo:function(){e.isEmptyUndoStack()||(t(),e.undo())},redo:function(){e.isEmptyRedoStack()||(t(),e.redo())},reset:function(){t(),e.loadImageFromURL(e.ui.initializeImgUrl,"resetImage").then(function(n){t(),e.ui.resizeEditor({imageSize:n}),e.clearUndoStack()})},delete:function(){e.ui.changeDeleteButtonEnabled(!1),t(),e.removeActiveObject(),e.activeObjectId=null},deleteAll:function(){t(),e.clearObjects(),e.ui.changeDeleteButtonEnabled(!1),e.ui.changeDeleteAllButtonEnabled(!1)},load:function(n){a.default.isSupportFileApi()||alert("This browser does not support file-api"),e.ui.initializeImgUrl=URL.createObjectURL(n),e.loadImageFromFile(n).then(function(){t(),e.clearUndoStack(),e.ui.resizeEditor()}).catch(function(e){return Promise.reject(e)})},download:function(){var t=e.toDataURL(),n=e.getImageName(),i=void 0,o=void 0,r=void 0;a.default.isSupportFileApi()&&window.saveAs?(i=a.default.base64ToBlob(t),o=i.type.split("/")[1],n.split(".").pop()!==o&&(n+="."+o),saveAs(i,n)):(r=window.open(),r.document.body.innerHTML="![]("+t+")
")}},this._commonAction())},_iconAction:function(){var e=this,t=void 0,n=void 0,i=void 0,r=void 0,a=void 0,s=void 0,c=void 0;this.on({iconCreateResize:function(t){var n=t.moveOriginPointer,o=(n.x-i)/a,l=(n.y-r)/s;e.setObjectPropertiesQuietly(c,{scaleX:Math.abs(2*o),scaleY:Math.abs(2*l)})},iconCreateEnd:function(){e.ui.icon.clearIconType(),e.changeSelectableAll(!0)}});var u=function(o,l){i=l.x,r=l.y,e.addIcon(t,{left:l.x,top:l.y,fill:n}).then(function(e){c=e.id,a=e.width,s=e.height})};return(0,o.extend)({changeColor:function(t){e.activeObjectId&&e.changeIconColor(e.activeObjectId,t)},addIcon:function(i,o){t=i,n=o,e.changeCursor("crosshair"),e.off("mousedown"),e.once("mousedown",u.bind(e))},cancelAddIcon:function(){e.off("mousedown"),e.ui.icon.clearIconType(),e.changeSelectableAll(!0),e.changeCursor("default")},registDefalutIcons:function(t,n){var i={};i[t]=n,e.registerIcons(i)},registCustomIcon:function(t,n){var i=new l.default;i.imageToSVG(t,function(t){var i=t.match(/path[^>]*d="([^"]*)"/),o=i[1],r={};r[n.name]=o,e.registerIcons(r),e.addIcon(n.name,{left:100,top:100})},l.default.tracerDefaultOption())}},this._commonAction())},_drawAction:function(){var e=this;return(0,o.extend)({setDrawMode:function(t,n){e.stopDrawingMode(),"free"===t?e.startDrawingMode("FREE_DRAWING",n):e.startDrawingMode("LINE_DRAWING",n)},setColor:function(t){e.setBrush({color:t})}},this._commonAction())},_maskAction:function(){var e=this;return(0,o.extend)({loadImageFromURL:function(t,n){return e.loadImageFromURL(e.toDataURL(),"FilterImage").then(function(){e.addImageObject(t).then(function(){URL.revokeObjectURL(n)})})},applyFilter:function(){e.applyFilter("mask",{maskObjId:e.activeObjectId})}},this._commonAction())},_textAction:function(){var e=this;return(0,o.extend)({changeTextStyle:function(t){e.activeObjectId&&e.changeTextStyle(e.activeObjectId,t)}},this._commonAction())},_rotateAction:function(){var e=this;return(0,o.extend)({rotate:function(t){e.rotate(t),e.ui.resizeEditor()},setAngle:function(t){e.setAngle(t),e.ui.resizeEditor()}},this._commonAction())},_shapeAction:function(){var e=this;return(0,o.extend)({changeShape:function(t){e.activeObjectId&&e.changeShape(e.activeObjectId,t)},setDrawingShape:function(t){e.setDrawingShape(t)}},this._commonAction())},_cropAction:function(){var e=this;return(0,o.extend)({crop:function(){var t=e.getCropzoneRect();t&&e.crop(t).then(function(){e.stopDrawingMode(),e.ui.resizeEditor(),e.ui.changeMenu("crop")}).catch(function(e){return Promise.reject(e)})},cancel:function(){e.stopDrawingMode(),e.ui.changeMenu("crop")}},this._commonAction())},_flipAction:function(){var e=this;return(0,o.extend)({flip:function(t){return e[t]()}},this._commonAction())},_filterAction:function(){var e=this;return(0,o.extend)({applyFilter:function(t,n,i){t?e.applyFilter(n,i):e.hasFilter(n)&&e.removeFilter(n)}},this._commonAction())},setReAction:function(){var e=this;this.on({undoStackChanged:function(t){t?(e.ui.changeUndoButtonStatus(!0),e.ui.changeResetButtonStatus(!0)):(e.ui.changeUndoButtonStatus(!1),e.ui.changeResetButtonStatus(!1)),e.ui.resizeEditor()},redoStackChanged:function(t){t?e.ui.changeRedoButtonStatus(!0):e.ui.changeRedoButtonStatus(!1),e.ui.resizeEditor()},objectActivated:function(t){e.activeObjectId=t.id,e.ui.changeDeleteButtonEnabled(!0),e.ui.changeDeleteAllButtonEnabled(!0),"cropzone"===t.type?e.ui.crop.changeApplyButtonStatus(!0):["rect","circle","triangle"].indexOf(t.type)>-1?(e.stopDrawingMode(),"shape"!==e.ui.submenu&&e.ui.changeMenu("shape",!1,!1),e.ui.shape.setShapeStatus({strokeColor:t.stroke,strokeWidth:t.strokeWidth,fillColor:t.fill}),e.ui.shape.setMaxStrokeValue(Math.min(t.width,t.height))):"path"===t.type||"line"===t.type?"draw"!==e.ui.submenu&&(e.ui.changeMenu("draw",!1,!1),e.ui.draw.changeStandbyMode()):["i-text","text"].indexOf(t.type)>-1?"text"!==e.ui.submenu&&e.ui.changeMenu("text",!1,!1):"icon"===t.type&&(e.stopDrawingMode(),"icon"!==e.ui.submenu&&e.ui.changeMenu("icon",!1,!1),e.ui.icon.setIconPickerColor(t.fill))},addText:function(t){e.addText("Double Click",{position:t.originPosition,styles:{fill:e.ui.text.textColor,fontSize:a.default.toInteger(e.ui.text.fontSize)}}).then(function(){e.changeCursor("default")})},addObjectAfter:function(t){["rect","circle","triangle"].indexOf(t.type)>-1&&(e.ui.shape.setMaxStrokeValue(Math.min(t.width,t.height)),e.ui.shape.changeStandbyMode())},objectScaled:function(t){if(["i-text","text"].indexOf(t.type)>-1)e.ui.text.fontSize=a.default.toInteger(t.fontSize);else if(["rect","circle","triangle"].indexOf(t.type)>=0){var n=t.width,i=t.height,o=e.ui.shape.getStrokeValue();nv&&(r.remove(),r.set(this._calcRectDimensionFromPoint(i,o)),t.add(r))}},{key:"_calcRectDimensionFromPoint",value:function(e,t){var n=this.getCanvas(),i=n.getWidth(),o=n.getHeight(),r=this._startX,a=this._startY,s=(0,g.clamp)(e,0,r),l=(0,g.clamp)(t,0,a),c=(0,g.clamp)(e,r,i)-s,u=(0,g.clamp)(t,a,o)-l;return this._withShiftKey&&(c>u?u=c:u>c&&(c=u),r>=e&&(s=r-c),a>=t&&(l=a-u)),{left:s,top:l,width:c,height:u}}},{key:"_onFabricMouseUp",value:function(){var e=this._cropzone,t=this._listeners,n=this.getCanvas();n.setActiveObject(e),n.off({"mouse:move":t.mousemove,"mouse:up":t.mouseup})}},{key:"getCroppedImageData",value:function(e){var t=this.getCanvas(),n=t.contains(this._cropzone);if(!e)return null;n&&this._cropzone.remove();var i={imageName:this.getImageName(),url:t.toDataURL(e)};return n&&t.add(this._cropzone),i}},{key:"getCropzoneRect",value:function(){var e=this._cropzone;return e.isValid()?{left:e.getLeft(),top:e.getTop(),width:e.getWidth(),height:e.getHeight()}:null}},{key:"_onKeyDown",value:function(e){e.keyCode===p.keyCodes.SHIFT&&(this._withShiftKey=!0)}},{key:"_onKeyUp",value:function(e){e.keyCode===p.keyCodes.SHIFT&&(this._withShiftKey=!1)}}]),t}(d.default);e.exports=m},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var s=function(){function e(e,t){for(var n=0;nn},_getColor:function(e,t,n){var i=[0,0,0,0],o=e.data,r=e.width,a=4,s=(r*n+t)*a;return i[0]=o[s],i[1]=o[s+1],i[2]=o[s+2],i[3]=o[s+3],i}});e.exports=a},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var o=n(3),r=i(o),a=n(6),s=i(a),l=n(5),c="tl",u="tr",d="mt",h="ml",f="mr",p="mb",g="bl",v="br",m=s.default.util.createClass(s.default.Rect,{initialize:function(e,t){e=r.default.extend(e,t),e.type="cropzone",this.callSuper("initialize",e),this.options=e,this.on({moving:this._onMoving,scaling:this._onScaling})},_render:function(e){var t=7,n=7;this.callSuper("_render",e);var i=this.flipX?-1:1,o=this.flipY?-1:1,r=i/this.scaleX,a=o/this.scaleY;e.scale(r,a),this._fillOuterRect(e,"rgba(0, 0, 0, 0.55)"),this.options.lineWidth?this._fillInnerRect(e):(this._strokeBorder(e,"rgb(0, 0, 0)",{lineDashWidth:t}),this._strokeBorder(e,"rgb(255, 255, 255)",{lineDashWidth:t,lineDashOffset:n})),e.scale(1/r,1/a)},_fillOuterRect:function(e,t){var n=this._getCoordinates(e),i=n.x,o=n.y;e.save(),e.fillStyle=t,e.beginPath(),e.moveTo(i[0]-1,o[0]-1),e.lineTo(i[3]+1,o[0]-1),e.lineTo(i[3]+1,o[3]+1),e.lineTo(i[0]-1,o[3]+1),e.lineTo(i[0]-1,o[0]-1),e.closePath(),e.moveTo(i[1],o[1]),e.lineTo(i[1],o[2]),e.lineTo(i[2],o[2]),e.lineTo(i[2],o[1]),e.lineTo(i[1],o[1]),e.closePath(),e.fill(),e.restore()},_fillInnerRect:function(e){var t=this._getCoordinates(e),n=t.x,i=t.y,o=this._caculateInnerPosition(n,(n[2]-n[1])/3),r=this._caculateInnerPosition(i,(i[2]-i[1])/3);e.save(),e.strokeStyle="rgba(255, 255, 255, 0.7)",e.lineWidth=this.options.lineWidth,e.beginPath(),e.moveTo(o[0],r[1]),e.lineTo(o[3],r[1]),e.moveTo(o[0],r[2]),e.lineTo(o[3],r[2]),e.moveTo(o[1],r[0]),e.lineTo(o[1],r[3]),e.moveTo(o[2],r[0]),e.lineTo(o[2],r[3]),e.stroke(),e.closePath(),e.restore()},_caculateInnerPosition:function(e,t){var n=[];return n[0]=e[1],n[1]=e[1]+t,n[2]=e[1]+2*t,n[3]=e[2],n},_getCoordinates:function(e){var t=this.getWidth(),n=this.getHeight(),i=t/2,o=n/2,a=this.getLeft(),s=this.getTop(),l=e.canvas;return{x:r.default.map([-(i+a),-i,i,i+(l.width-a-t)],Math.ceil),y:r.default.map([-(o+s),-o,o,o+(l.height-s-n)],Math.ceil)}},_strokeBorder:function(e,t,n){var i=n.lineDashWidth,o=n.lineDashOffset,r=n.lineWidth,a=this.getWidth()/2,s=this.getHeight()/2;e.save(),e.strokeStyle=t,e.setLineDash&&e.setLineDash([i,i]),o&&(e.lineDashOffset=o),r&&(e.lineWidth=r),e.beginPath(),e.moveTo(-a,-s),e.lineTo(a,-s),e.lineTo(a,s),e.lineTo(-a,s),e.lineTo(-a,-s),e.stroke(),e.restore()},_onMoving:function(){var e=this.getLeft(),t=this.getTop(),n=this.getWidth(),i=this.getHeight(),o=this.canvas.getWidth()-n,r=this.canvas.getHeight()-i;this.setLeft((0,l.clamp)(e,0,o)),this.setTop((0,l.clamp)(t,0,r))},_onScaling:function(e){var t=this.canvas.getPointer(e.e),n=this._calcScalingSizeFromPointer(t);this.scale(1).set(n)},_calcScalingSizeFromPointer:function(e){var t=e.x,n=e.y,i=this._calcTopLeftScalingSizeFromPointer(t,n),o=this._calcBottomRightScalingSizeFromPointer(t,n);return this._makeScalingSettings(i,o)},_calcTopLeftScalingSizeFromPointer:function(e,t){var n=this.getHeight()+this.top,i=this.getWidth()+this.left,o=(0,l.clamp)(t,0,n-1),r=(0,l.clamp)(e,0,i-1);return{top:o,left:r,width:i-r,height:n-o}},_calcBottomRightScalingSizeFromPointer:function(e,t){var n=this.canvas,i=n.width,o=n.height,r=this.left,a=this.top;return{width:(0,l.clamp)(e,r+1,i)-r,height:(0,l.clamp)(t,a+1,o)-a}},_makeScalingSettings:function(e,t){var n=e.width,i=e.height,o=t.height,r=t.width,a=e.left,s=e.top,l=void 0;switch(this.__corner){case c:l=e;break;case u:l={width:r,height:i,top:s};break;case g:l={width:n,height:o,left:a};break;case v:l=t;break;case h:l={width:n,left:a};break;case d:l={height:i,top:s};break;case f:l={width:r};break;case p:l={height:o}}return l},isValid:function(){return this.left>=0&&this.top>=0&&this.width>0&&this.height>0}});e.exports=m},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var o=n(6),r=i(o),a=r.default.util.createClass(r.default.Image.filters.Convolute,{type:"Emboss",initialize:function(){var e=[1,1,1,1,.7,-1,-1,-1,-1];this.matrix=e}});e.exports=a},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{default:e}}var o=n(6),r=i(o),a=r.default.util.createClass(r.default.Image.filters.Mask,{applyTo:function(e){if(this.mask){var t=e.width,n=e.height,i=this._createCanvasOfMask(t,n),o=e.getContext("2d"),r=i.getContext("2d"),a=o.getImageData(0,0,t,n);this._drawMask(r,e,o),this._mapData(r,a,t,n),o.putImageData(a,0,0)}},_createCanvasOfMask:function(e,t){var n=r.default.util.createCanvasElement();return n.width=e,n.height=t,n},_drawMask:function(e){var t=this.mask,n=t.getElement(),i=t.getLeft(),o=t.getTop(),r=t.getAngle();e.save(),e.translate(i,o),e.rotate(r*Math.PI/180),e.scale(t.scaleX,t.scaleY),e.drawImage(n,-n.width/2,-n.height/2),e.restore()},_mapData:function(e,t,n,i){for(var o=t.data,r=e.getImageData(0,0,n,i).data,a=this.channel,s=t.width*t.height*4,l=0;l1&&void 0!==arguments[1]?arguments[1]:{},i=n.cssMaxWidth,r=n.cssMaxHeight,a=n.useItext,s=void 0!==a&&a,l=n.useDragAddIcon,c=void 0!==l&&l;o(this,e),this.canvasImage=null,this.cssMaxWidth=i||ie,this.cssMaxHeight=r||oe,this.useItext=s,this.useDragAddIcon=c,this.cropSelectionStyle={},this.imageName="",this._objects={},this._canvas=null,this._drawingMode=q.NORMAL,this._drawingModeMap={},this._componentMap={},this._handler={onMouseDown:this._onMouseDown.bind(this),onObjectAdded:this._onObjectAdded.bind(this),onObjectRemoved:this._onObjectRemoved.bind(this),onObjectMoved:this._onObjectMoved.bind(this),onObjectScaled:this._onObjectScaled.bind(this),onObjectSelected:this._onObjectSelected.bind(this),onPathCreated:this._onPathCreated.bind(this),onSelectionCleared:this._onSelectionCleared.bind(this),onSelectionCreated:this._onSelectionCreated.bind(this)},this._setCanvasElement(t),this._createDrawingModeInstances(),this._createComponents(),this._attachCanvasEvents()}return r(e,[{key:"destroy",value:function(){var e=this._canvas.wrapperEl;this._canvas.clear(),e.parentNode.removeChild(e)}},{key:"deactivateAll",value:function(){return this._canvas.deactivateAll(),this}},{key:"renderAll",value:function(){return this._canvas.renderAll(),this}},{key:"add",value:function(e){var t,n=[];$(e)?n=e:n.push(e),(t=this._canvas).add.apply(t,n)}},{key:"contains",value:function(e){return this._canvas.contains(e)}},{key:"getObjects",value:function(){return this._canvas.getObjects().slice()}},{key:"getObject",value:function(e){return this._objects[e]}},{key:"remove",value:function(e){this._canvas.remove(e)}},{key:"removeAll",value:function(e){var t=this._canvas,n=t.getObjects().slice();return t.remove.apply(t,this._canvas.getObjects()),e&&t.clear(),n}},{key:"removeObjectById",value:function(e){var t=[],n=this._canvas,i=this.getObject(e),o=i&&i.isType("group")&&!i.isEmpty();return o?(n.discardActiveGroup(),i.forEachObject(function(e){t.push(e),e.remove()})):n.contains(i)&&(t.push(i),i.remove()),t}},{key:"getObjectId",value:function(e){var t=null;for(t in this._objects)if(this._objects.hasOwnProperty(t)&&e===this._objects[t])return t;return null}},{key:"getActiveObject",value:function(){return this._canvas.getActiveObject()}},{key:"getActiveGroupObject",value:function(){return this._canvas.getActiveGroup()}},{key:"setActiveObject",value:function(e){this._canvas.setActiveObject(e)}},{key:"setCropSelectionStyle",value:function(e){this.cropSelectionStyle=e}},{key:"getComponent",value:function(e){return this._componentMap[e]}},{key:"getDrawingMode",value:function(){return this._drawingMode}},{key:"startDrawingMode",value:function(e,t){if(this._isSameDrawingMode(e))return!0;this.stopDrawingMode();var n=this._getDrawingModeInstance(e);return n&&n.start&&(n.start(this,t),this._drawingMode=e),!!n}},{key:"stopDrawingMode",value:function(){if(!this._isSameDrawingMode(q.NORMAL)){var e=this._getDrawingModeInstance(this.getDrawingMode());e&&e.end&&e.end(this),this._drawingMode=q.NORMAL}}},{key:"toDataURL",value:function(e){return this._canvas&&this._canvas.toDataURL(e)}},{key:"setCanvasImage",value:function(e,t){t&&Z(t),this.imageName=e,this.canvasImage=t}},{key:"setCssMaxDimension",value:function(e){this.cssMaxWidth=e.width||this.cssMaxWidth,this.cssMaxHeight=e.height||this.cssMaxHeight}},{key:"adjustCanvasDimension",value:function(){var e=this.canvasImage.scale(1),t=e.getBoundingRect(),n=t.width,i=t.height,o=this._calcMaxDimension(n,i);this.setCanvasCssDimension({width:"100%",height:"100%","max-width":o.width+"px","max-height":o.height+"px"}),this.setCanvasBackstoreDimension({width:n,height:i}),this._canvas.centerObject(e)}},{key:"setCanvasCssDimension",value:function(e){this._canvas.setDimensions(e,re)}},{key:"setCanvasBackstoreDimension",value:function(e){this._canvas.setDimensions(e,ae)}},{key:"setImageProperties",value:function(e,t){var n=this.canvasImage;n&&(n.set(e).setCoords(),t&&this._canvas.renderAll())}},{key:"getCanvasElement",value:function(){return this._canvas.getElement()}},{key:"getCanvas",value:function(){return this._canvas}},{key:"getCanvasImage",value:function(){return this.canvasImage}},{key:"getImageName",value:function(){return this.imageName}},{key:"addImageObject",value:function(e){var t=this,n=this._callbackAfterLoadingImageObject.bind(this);return new c.default(function(i){d.default.Image.fromURL(e,function(e){n(e),i(t.createObjectProperties(e))},{crossOrigin:"Anonymous"})})}},{key:"getCenter",value:function(){return this._canvas.getCenter()}},{key:"getCropzoneRect",value:function(){return this.getComponent(G.CROPPER).getCropzoneRect()}},{key:"getCroppedImageData",value:function(e){return this.getComponent(G.CROPPER).getCroppedImageData(e)}},{key:"setBrush",value:function(e){var t=this._drawingMode,n=G.FREE_DRAWING;t===q.LINE&&(n=q.LINE),this.getComponent(n).setBrush(e)}},{key:"setDrawingShape",value:function(e,t){this.getComponent(G.SHAPE).setStates(e,t)}},{key:"registerPaths",value:function(e){this.getComponent(G.ICON).registerPaths(e)}},{key:"changeCursor",value:function(e){var t=this.getCanvas();t.defaultCursor=e,t.renderAll()}},{key:"hasFilter",value:function(e){return this.getComponent(G.FILTER).hasFilter(e)}},{key:"setSelectionStyle",value:function(e){J(K.SELECTION_STYLE,e)}},{key:"setObjectProperties",value:function(e,t){var n=this.getObject(e),i=J({},t);return n.set(i),n.setCoords(),this.getCanvas().renderAll(),i}},{key:"getObjectProperties",value:function(e,t){var n=this.getObject(e),i={};return Q(t)?i[t]=n[t]:$(t)?ee(t,function(e){i[e]=n[e]}):te(t,function(e,t){i[t]=n[t]}),i}},{key:"getObjectPosition",value:function(e,t,n){var i=this.getObject(e);return i?i.getPointByOrigin(t,n):null}},{key:"setObjectPosition",value:function(e,t){var n=this.getObject(e),i=t.x,o=t.y,r=t.originX,a=t.originY;if(!n)return!1;var s=n.getPointByOrigin(r,a),l=n.getPointByOrigin("center","center"),c=l.x-s.x,u=l.y-s.y;return n.set({left:i+c,top:o+u}),n.setCoords(),!0}},{key:"getCanvasSize",value:function(){var e=this.getCanvasImage();return{width:e?e.width:0,height:e?e.height:0}}},{key:"_getDrawingModeInstance",value:function(e){return this._drawingModeMap[e]}},{key:"_setCanvasElement",value:function(e){var t=void 0,n=void 0;t=e.jquery?e[0]:e.nodeType?e:document.querySelector(e),"CANVAS"!==t.nodeName.toUpperCase()&&(n=document.createElement("canvas"),t.appendChild(n)),this._canvas=new d.default.Canvas(n,{containerClass:"tui-image-editor-canvas-container",enableRetinaScaling:!1})}},{key:"_createDrawingModeInstances",value:function(){this._register(this._drawingModeMap,new I.default),this._register(this._drawingModeMap,new R.default),this._register(this._drawingModeMap,new N.default),this._register(this._drawingModeMap,new F.default),this._register(this._drawingModeMap,new z.default)}},{key:"_createComponents",value:function(){this._register(this._componentMap,new f.default(this)),this._register(this._componentMap,new g.default(this)),this._register(this._componentMap,new m.default(this)),this._register(this._componentMap,new y.default(this)),this._register(this._componentMap,new k.default(this)),this._register(this._componentMap,new x.default(this)),this._register(this._componentMap,new C.default(this)),this._register(this._componentMap,new S.default(this)),this._register(this._componentMap,new j.default(this)),this._register(this._componentMap,new P.default(this))}},{key:"_register",value:function(e,t){e[t.getName()]=t}},{key:"_isSameDrawingMode",value:function(e){return this.getDrawingMode()===e}},{key:"_calcMaxDimension",value:function(e,t){var n=this.cssMaxWidth/e,i=this.cssMaxHeight/t,o=Math.min(e,this.cssMaxWidth),r=Math.min(t,this.cssMaxHeight);return n<1&&n-1&&J(n,this._createTextProperties(e,n)),n}},{key:"_createTextProperties",value:function(e){var t=["text","fontFamily","fontSize","fontStyle","textAlign","textDecoration"],n={};return J(n,X.default.getProperties(e,t)),n}},{key:"_addFabricObject",value:function(e){var t=Z(e);return this._objects[t]=e,t}},{key:"_removeFabricObject",value:function(e){delete this._objects[e]}}]),e}();ne.mixin(se),e.exports=se},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n0&&(e=this.blur(e,t.blurradius,t.blurdelta)),h=0;h0)for(d=0;d0&&(f[d]={r:Math.floor(s[d].r/s[d].n),g:Math.floor(s[d].g/s[d].n),b:Math.floor(s[d].b/s[d].n),a:Math.floor(s[d].a/s[d].n)}),s[d].n/ln[i].boundingbox[2]&&(n[i].boundingbox[2]=r-1),a-1n[i].boundingbox[3]&&(n[i].boundingbox[3]=a-1),h=this.pathscan_combined_lookup[e[a][r]][c],e[a][r]=h[0],c=h[1],r+=h[2],a+=h[3],r-1===n[i].points[0].x&&a-1===n[i].points[0].y)if(u=!0,n[i].points.lengtht[2]&&e[3]>t[3]}},{key:"batchpathscan",value:function(e,t){var n=[];for(var i in e)e.hasOwnProperty(i)&&(n[i]=this.pathscan(e[i],t));return n}},{key:"internodes",value:function(e,t){var n=[],i=0,o=0,r=0,a=0,s=0,l=void 0,c=void 0;for(l=0;l0&&(n[l].points[n[l].points.length-1].linesegment=this.getdirection(n[l].points[n[l].points.length-1].x,n[l].points[n[l].points.length-1].y,e[l].points[c].x,e[l].points[c].y)),n[l].points.push({x:e[l].points[c].x,y:e[l].points[c].y,linesegment:this.getdirection(e[l].points[c].x,e[l].points[c].y,(e[l].points[c].x+e[l].points[o].x)/2,(e[l].points[c].y+e[l].points[o].y)/2)})),n[l].points.push({x:(e[l].points[c].x+e[l].points[o].x)/2,y:(e[l].points[c].y+e[l].points[o].y)/2,linesegment:this.getdirection((e[l].points[c].x+e[l].points[o].x)/2,(e[l].points[c].y+e[l].points[o].y)/2,(e[l].points[o].x+e[l].points[r].x)/2,(e[l].points[o].y+e[l].points[r].y)/2)});return n}},{key:"testrightangle",value:function(e,t,n,i,o,r){return e.points[i].x===e.points[t].x&&e.points[i].x===e.points[n].x&&e.points[i].y===e.points[o].y&&e.points[i].y===e.points[r].y||e.points[i].y===e.points[t].y&&e.points[i].y===e.points[n].y&&e.points[i].x===e.points[o].x&&e.points[i].x===e.points[r].x}},{key:"getdirection",value:function(e,t,n,i){var o=8;return o=ei?7:0:e>n?ti?5:4:ti?6:8}},{key:"batchinternodes",value:function(e,t){var n=[];for(var i in e)e.hasOwnProperty(i)&&(n[i]=this.internodes(e[i],t));return n}},{key:"tracepath",value:function(e,t,n){var i=0,o=void 0,r=void 0,a=void 0,s={};for(s.segments=[],s.boundingbox=e.boundingbox,s.holechildren=e.holechildren,s.isholepath=e.isholepath;i0?a:e.points.length}return s}},{key:"fitseq",value:function(e,t,n,i,o){if(o>e.points.length||o<0)return[];var r=i,a=0,s=!0,l=void 0,c=void 0,u=void 0,d=o-i;d<0&&(d+=e.points.length);for(var h=(e.points[o].x-e.points[i].x)/d,f=(e.points[o].y-e.points[i].y)/d,p=(i+1)%e.points.length,g=void 0;p!=o;)g=p-i,g<0&&(g+=e.points.length),l=e.points[i].x+h*g,c=e.points[i].y+f*g,u=(e.points[p].x-l)*(e.points[p].x-l)+(e.points[p].y-c)*(e.points[p].y-c),u>t&&(s=!1),u>a&&(r=p,a=u),p=(p+1)%e.points.length;if(s)return[{type:"L",x1:e.points[i].x,y1:e.points[i].y,x2:e.points[o].x,y2:e.points[o].y}];var v=r;s=!0,a=0;var m=(v-i)/d,b=(1-m)*(1-m),y=2*(1-m)*m,_=m*m,k=(b*e.points[i].x+_*e.points[o].x-e.points[v].x)/-y,w=(b*e.points[i].y+_*e.points[o].y-e.points[v].y)/-y;for(p=i+1;p!=o;)m=(p-i)/d,b=(1-m)*(1-m),y=2*(1-m)*m,_=m*m,l=b*e.points[i].x+y*k+_*e.points[o].x,c=b*e.points[i].y+y*w+_*e.points[o].y,u=(e.points[p].x-l)*(e.points[p].x-l)+(e.points[p].y-c)*(e.points[p].y-c),u>n&&(s=!1),u>a&&(r=p,a=u),p=(p+1)%e.points.length;if(s)return[{type:"Q",x1:e.points[i].x,y1:e.points[i].y,x2:k,y2:w,x3:e.points[o].x,y3:e.points[o].y}];var x=v;return this.fitseq(e,t,n,i,x).concat(this.fitseq(e,t,n,x,o))}},{key:"batchtracepaths",value:function(e,t,n){var i=[];for(var o in e)e.hasOwnProperty(o)&&i.push(this.tracepath(e[o],t,n));return i}},{key:"batchtracelayers",value:function(e,t,n){var i=[];for(var o in e)e.hasOwnProperty(o)&&(i[o]=this.batchtracepaths(e[o],t,n));return i}},{key:"roundtodec",value:function(e,t){return Number(e.toFixed(t))}},{key:"svgpathstring",value:function(e,t,n,i){var o=e.layers[t],r=o[n],a="",s=void 0;if(i.linefilter&&r.segments.length<3)return a;if(a="=0;s--)a+=c.segments[s].type+" ",c.segments[s].hasOwnProperty("x3")&&(a+=c.segments[s].x2*i.scale+" "+c.segments[s].y2*i.scale+" "),a+=c.segments[s].x1*i.scale+" "+c.segments[s].y1*i.scale+" ";else for(a+=c.segments[c.segments.length-1].hasOwnProperty("x3")?"M "+this.roundtodec(c.segments[c.segments.length-1].x3*i.scale)+" "+this.roundtodec(c.segments[c.segments.length-1].y3*i.scale)+" ":"M "+this.roundtodec(c.segments[c.segments.length-1].x2*i.scale)+" "+this.roundtodec(c.segments[c.segments.length-1].y2*i.scale)+" ",s=c.segments.length-1;s>=0;s--)a+=c.segments[s].type+" ",c.segments[s].hasOwnProperty("x3")&&(a+=this.roundtodec(c.segments[s].x2*i.scale)+" "+this.roundtodec(c.segments[s].y2*i.scale)+" "),a+=this.roundtodec(c.segments[s].x1*i.scale)+" "+this.roundtodec(c.segments[s].y1*i.scale)+" ";a+="Z "}if(a+='" />',i.lcpr||i.qcpr){for(s=0;s',a+='',a+='',a+=''),!r.segments[s].hasOwnProperty("x3")&&i.lcpr&&(a+='');for(var l=0;l',a+='',a+='',a+=''),!c.segments[s].hasOwnProperty("x3")&&i.lcpr&&(a+='')}}return a}},{key:"getsvgstring",value:function(e,t){t=this.checkoptions(t);for(var n=e.width*t.scale,i=e.height*t.scale,o="