1/*! 2 * tui-image-editor.js 3 * @version 3.5.2 4 * @author NHNEnt FE Development Lab <[email protected]> 5 * @license MIT 6 */ 7(function webpackUniversalModuleDefinition(root, factory) { 8 if(typeof exports === 'object' && typeof module === 'object') 9 module.exports = factory(require("tui-code-snippet"), require("tui-color-picker"), require("fabric/dist/fabric.require")); 10 else if(typeof define === 'function' && define.amd) 11 define(["tui-code-snippet", "tui-color-picker", "fabric/dist/fabric.require"], factory); 12 else if(typeof exports === 'object') 13 exports["ImageEditor"] = factory(require("tui-code-snippet"), require("tui-color-picker"), require("fabric/dist/fabric.require")); 14 else 15 root["tui"] = root["tui"] || {}, root["tui"]["ImageEditor"] = factory((root["tui"] && root["tui"]["util"]), (root["tui"] && root["tui"]["colorPicker"]), root["fabric"]); 16})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_82__, __WEBPACK_EXTERNAL_MODULE_106__) { 17return /******/ (function(modules) { // webpackBootstrap 18/******/ // The module cache 19/******/ var installedModules = {}; 20 21/******/ // The require function 22/******/ function __webpack_require__(moduleId) { 23 24/******/ // Check if module is in cache 25/******/ if(installedModules[moduleId]) 26/******/ return installedModules[moduleId].exports; 27 28/******/ // Create a new module (and put it into the cache) 29/******/ var module = installedModules[moduleId] = { 30/******/ exports: {}, 31/******/ id: moduleId, 32/******/ loaded: false 33/******/ }; 34 35/******/ // Execute the module function 36/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 37 38/******/ // Flag the module as loaded 39/******/ module.loaded = true; 40 41/******/ // Return the exports of the module 42/******/ return module.exports; 43/******/ } 44 45 46/******/ // expose the modules object (__webpack_modules__) 47/******/ __webpack_require__.m = modules; 48 49/******/ // expose the module cache 50/******/ __webpack_require__.c = installedModules; 51 52/******/ // __webpack_public_path__ 53/******/ __webpack_require__.p = "dist"; 54 55/******/ // Load entry module and return exports 56/******/ return __webpack_require__(0); 57/******/ }) 58/************************************************************************/ 59/******/ ([ 60/* 0 */ 61/***/ (function(module, exports, __webpack_require__) { 62 63 'use strict'; 64 65 __webpack_require__(1); 66 67 var _imageEditor = __webpack_require__(2); 68 69 var _imageEditor2 = _interopRequireDefault(_imageEditor); 70 71 __webpack_require__(131); 72 73 __webpack_require__(133); 74 75 __webpack_require__(134); 76 77 __webpack_require__(135); 78 79 __webpack_require__(136); 80 81 __webpack_require__(137); 82 83 __webpack_require__(138); 84 85 __webpack_require__(139); 86 87 __webpack_require__(140); 88 89 __webpack_require__(141); 90 91 __webpack_require__(142); 92 93 __webpack_require__(143); 94 95 __webpack_require__(144); 96 97 __webpack_require__(145); 98 99 __webpack_require__(146); 100 101 __webpack_require__(147); 102 103 __webpack_require__(148); 104 105 __webpack_require__(149); 106 107 __webpack_require__(150); 108 109 __webpack_require__(151); 110 111 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 112 113 module.exports = _imageEditor2.default; 114 115 // commands 116 117/***/ }), 118/* 1 */ 119/***/ (function(module, exports) { 120 121 "use strict"; 122 123 // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest 124 // Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/if (!Element.prototype.matches) 125 Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 126 127 if (!Element.prototype.closest) Element.prototype.closest = function (s) { 128 var el = this; 129 if (!document.documentElement.contains(el)) return null; 130 do { 131 if (el.matches(s)) return el; 132 el = el.parentElement || el.parentNode; 133 } while (el !== null && el.nodeType === 1); 134 return null; 135 }; 136 137 /* 138 * classList.js: Cross-browser full element.classList implementation. 139 * 1.1.20170427 140 * 141 * By Eli Grey, http://eligrey.com 142 * License: Dedicated to the public domain. 143 * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md 144 */ 145 146 /*global self, document, DOMException */ 147 148 /*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ 149 150 if ("document" in window.self) { 151 152 // Full polyfill for browsers with no classList support 153 // Including IE < Edge missing SVGElement.classList 154 if (!("classList" in document.createElement("_")) || document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg", "g"))) { 155 156 (function (view) { 157 158 "use strict"; 159 160 if (!('Element' in view)) return; 161 162 var classListProp = "classList", 163 protoProp = "prototype", 164 elemCtrProto = view.Element[protoProp], 165 objCtr = Object, 166 strTrim = String[protoProp].trim || function () { 167 return this.replace(/^\s+|\s+$/g, ""); 168 }, 169 arrIndexOf = Array[protoProp].indexOf || function (item) { 170 var i = 0, 171 len = this.length; 172 for (; i < len; i++) { 173 if (i in this && this[i] === item) { 174 return i; 175 } 176 } 177 return -1; 178 } 179 // Vendors: please allow content code to instantiate DOMExceptions 180 , 181 DOMEx = function DOMEx(type, message) { 182 this.name = type; 183 this.code = DOMException[type]; 184 this.message = message; 185 }, 186 checkTokenAndGetIndex = function checkTokenAndGetIndex(classList, token) { 187 if (token === "") { 188 throw new DOMEx("SYNTAX_ERR", "An invalid or illegal string was specified"); 189 } 190 if (/\s/.test(token)) { 191 throw new DOMEx("INVALID_CHARACTER_ERR", "String contains an invali
vendor: 4,143 bytes, lines 191-293
191d character"); 192 } 193 return arrIndexOf.call(classList, token); 194 }, 195 ClassList = function ClassList(elem) { 196 var trimmedClasses = strTrim.call(elem.getAttribute("class") || ""), 197 classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [], 198 i = 0, 199 len = classes.length; 200 for (; i < len; i++) { 201 this.push(classes[i]); 202 } 203 this._updateClassName = function () { 204 elem.setAttribute("class", this.toString()); 205 }; 206 }, 207 classListProto = ClassList[protoProp] = [], 208 classListGetter = function classListGetter() { 209 return new ClassList(this); 210 }; 211 // Most DOMException implementations don't allow calling DOMException's toString() 212 // on non-DOMExceptions. Error's toString() is sufficient here. 213 DOMEx[protoProp] = Error[protoProp]; 214 classListProto.item = function (i) { 215 return this[i] || null; 216 }; 217 classListProto.contains = function (token) { 218 token += ""; 219 return checkTokenAndGetIndex(this, token) !== -1; 220 }; 221 classListProto.add = function () { 222 var tokens = arguments, 223 i = 0, 224 l = tokens.length, 225 token, 226 updated = false; 227 do { 228 token = tokens[i] + ""; 229 if (checkTokenAndGetIndex(this, token) === -1) { 230 this.push(token); 231 updated = true; 232 } 233 } while (++i < l); 234 235 if (updated) { 236 this._updateClassName(); 237 } 238 }; 239 classListProto.remove = function () { 240 var tokens = arguments, 241 i = 0, 242 l = tokens.length, 243 token, 244 updated = false, 245 index; 246 do { 247 token = tokens[i] + ""; 248 index = checkTokenAndGetIndex(this, token); 249 while (index !== -1) { 250 this.splice(index, 1); 251 updated = true; 252 index = checkTokenAndGetIndex(this, token); 253 } 254 } while (++i < l); 255 256 if (updated) { 257 this._updateClassName(); 258 } 259 }; 260 classListProto.toggle = function (token, force) { 261 token += ""; 262 263 var result = this.contains(token), 264 method = result ? force !== true && "remove" : force !== false && "add"; 265 266 if (method) { 267 this[method](token); 268 } 269 270 if (force === true || force === false) { 271 return force; 272 } else { 273 return !result; 274 } 275 }; 276 classListProto.toString = function () { 277 return this.join(" "); 278 }; 279 280 if (objCtr.defineProperty) { 281 var classListPropDesc = { 282 get: classListGetter, 283 enumerable: true, 284 configurable: true 285 }; 286 try { 287 objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 288 } catch (ex) { 289 // IE 8 doesn't support enumerable:true 290 // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36 291 // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected 292 if (ex.number === undefined || ex.number === -0x7FF5EC54) { 293 classListPropDesc.enumerable = false;
vendor: 8,402 bytes, lines 294-498
294 objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); 295 } 296 } 297 } else if (objCtr[protoProp].__defineGetter__) { 298 elemCtrProto.__defineGetter__(classListProp, classListGetter); 299 } 300 })(window.self); 301 } 302 303 // There is full or partial native classList support, so just check if we need 304 // to normalize the add/remove and toggle APIs. 305 306 (function () { 307 "use strict"; 308 309 var testElement = document.createElement("_"); 310 311 testElement.classList.add("c1", "c2"); 312 313 // Polyfill for IE 10/11 and Firefox <26, where classList.add and 314 // classList.remove exist but support only one argument at a time. 315 if (!testElement.classList.contains("c2")) { 316 var createMethod = function createMethod(method) { 317 var original = DOMTokenList.prototype[method]; 318 319 DOMTokenList.prototype[method] = function (token) { 320 var i, 321 len = arguments.length; 322 323 for (i = 0; i < len; i++) { 324 token = arguments[i]; 325 original.call(this, token); 326 } 327 }; 328 }; 329 createMethod('add'); 330 createMethod('remove'); 331 } 332 333 testElement.classList.toggle("c3", false); 334 335 // Polyfill for IE 10 and Firefox <24, where classList.toggle does not 336 // support the second argument. 337 if (testElement.classList.contains("c3")) { 338 var _toggle = DOMTokenList.prototype.toggle; 339 340 DOMTokenList.prototype.toggle = function (token, force) { 341 if (1 in arguments && !this.contains(token) === !force) { 342 return force; 343 } else { 344 return _toggle.call(this, token); 345 } 346 }; 347 } 348 349 testElement = null; 350 })(); 351 } 352 353 /*! 354 * @copyright Copyright (c) 2017 IcoMoon.io 355 * @license Licensed under MIT license 356 * See https://github.com/Keyamoon/svgxuse 357 * @version 1.2.6 358 */ 359 /*jslint browser: true */ 360 /*global XDomainRequest, MutationObserver, window */ 361 (function () { 362 "use strict"; 363 364 if (typeof window !== "undefined" && window.addEventListener) { 365 var cache = Object.create(null); // holds xhr objects to prevent multiple requests 366 var checkUseElems; 367 var tid; // timeout id 368 var debouncedCheck = function debouncedCheck() { 369 clearTimeout(tid); 370 tid = setTimeout(checkUseElems, 100); 371 }; 372 var unobserveChanges = function unobserveChanges() { 373 return; 374 }; 375 var observeChanges = function observeChanges() { 376 var observer; 377 window.addEventListener("resize", debouncedCheck, false); 378 window.addEventListener("orientationchange", debouncedCheck, false); 379 if (window.MutationObserver) { 380 observer = new MutationObserver(debouncedCheck); 381 observer.observe(document.documentElement, { 382 childList: true, 383 subtree: true, 384 attributes: true 385 }); 386 unobserveChanges = function unobserveChanges() { 387 try { 388 observer.disconnect(); 389 window.removeEventListener("resize", debouncedCheck, false); 390 window.removeEventListener("orientationchange", debouncedCheck, false); 391 } catch (ignore) {} 392 }; 393 } else { 394 document.documentElement.addEventListener("DOMSubtreeModified", debouncedCheck, false); 395 unobserveChanges = function unobserveChanges() { 396 document.documentElement.removeEventListener("DOMSubtreeModified", debouncedCheck, false); 397 window.removeEventListener("resize", debouncedCheck, false); 398 window.removeEventListener("orientationchange", debouncedCheck, false); 399 }; 400 } 401 }; 402 var createRequest = function createRequest(url) { 403 // In IE 9, cross origin requests can only be sent using XDomainRequest. 404 // XDomainRequest would fail if CORS headers are not set. 405 // Therefore, XDomainRequest should only be used with cross origin requests. 406 function getOrigin(loc) { 407 var a; 408 if (loc.protocol !== undefined) { 409 a = loc; 410 } else { 411 a = document.createElement("a"); 412 a.href = loc; 413 } 414 return a.protocol.replace(/:/g, "") + a.host; 415 } 416 var Request; 417 var origin; 418 var origin2; 419 if (window.XMLHttpRequest) { 420 Request = new XMLHttpRequest(); 421 origin = getOrigin(location); 422 origin2 = getOrigin(url); 423 if (Request.withCredentials === undefined && origin2 !== "" && origin2 !== origin) { 424 Request = XDomainRequest || undefined; 425 } else { 426 Request = XMLHttpRequest; 427 } 428 } 429 return Request; 430 }; 431 var xlinkNS = "http://www.w3.org/1999/xlink"; 432 checkUseElems = function checkUseElems() { 433 var base; 434 var bcr; 435 var fallback = ""; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. 436 var hash; 437 var href; 438 var i; 439 var inProgressCount = 0; 440 var isHidden; 441 var Request; 442 var url; 443 var uses; 444 var xhr; 445 function observeIfDone() { 446 // If done with making changes, start watching for chagnes in DOM again 447 inProgressCount -= 1; 448 if (inProgressCount === 0) { 449 // if all xhrs were resolved 450 unobserveChanges(); // make sure to remove old handlers 451 observeChanges(); // watch for changes to DOM 452 } 453 } 454 function attrUpdateFunc(spec) { 455 return function () { 456 if (cache[spec.base] !== true) { 457 spec.useEl.setAttributeNS(xlinkNS, "xlink:href", "#" + spec.hash); 458 if (spec.useEl.hasAttribute("href")) { 459 spec.useEl.setAttribute("href", "#" + spec.hash); 460 } 461 } 462 }; 463 } 464 function onloadFunc(xhr) { 465 return function () { 466 var body = document.body; 467 var x = document.createElement("x"); 468 var svg; 469 xhr.onload = null; 470 x.innerHTML = xhr.responseText; 471 svg = x.getElementsByTagName("svg")[0]; 472 if (svg) { 473 svg.setAttribute("aria-hidden", "true"); 474 svg.style.position = "absolute"; 475 svg.style.width = 0; 476 svg.style.height = 0; 477 svg.style.overflow = "hidden"; 478 body.insertBefore(svg, body.firstChild); 479 } 480 observeIfDone(); 481 }; 482 } 483 function onErrorTimeout(xhr) { 484 return function () { 485 xhr.onerror = null; 486 xhr.ontimeout = null; 487 observeIfDone(); 488 }; 489 } 490 unobserveChanges(); // stop watching for changes to DOM 491 // find all use elements 492 uses = document.getElementsByTagName("use"); 493 for (i = 0; i < uses.length; i += 1) { 494 try { 495 bcr = uses[i].getBoundingClientRect(); 496 } catch (ignore) { 497 // failed to get bounding rectangle of the use element 498 bcr = false;
vendor: 2,394 bytes, lines 499-544
499 } 500 href = uses[i].getAttribute("href") || uses[i].getAttributeNS(xlinkNS, "href") || uses[i].getAttribute("xlink:href"); 501 if (href && href.split) { 502 url = href.split("#"); 503 } else { 504 url = ["", ""]; 505 } 506 base = url[0]; 507 hash = url[1]; 508 isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; 509 if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { 510 // the use element is empty 511 // if there is a reference to an external SVG, try to fetch it 512 // use the optional fallback URL if there is no reference to an external SVG 513 if (fallback && !base.length && hash && !document.getElementById(hash)) { 514 base = fallback; 515 } 516 if (uses[i].hasAttribute("href")) { 517 uses[i].setAttributeNS(xlinkNS, "xlink:href", href); 518 } 519 if (base.length) { 520 // schedule updating xlink:href 521 xhr = cache[base]; 522 if (xhr !== true) { 523 // true signifies that prepending the SVG was not required 524 setTimeout(attrUpdateFunc({ 525 useEl: uses[i], 526 base: base, 527 hash: hash 528 }), 0); 529 } 530 if (xhr === undefined) { 531 Request = createRequest(base); 532 if (Request !== undefined) { 533 xhr = new Request(); 534 cache[base] = xhr; 535 xhr.onload = onloadFunc(xhr); 536 xhr.onerror = onErrorTimeout(xhr); 537 xhr.ontimeout = onErrorTimeout(xhr); 538 xhr.open("GET", base); 539 xhr.send(); 540 inProgressCount += 1; 541 } 542 } 543 } 544 } else {
545 if (!isHidden) { 546 if (cache[base] === undefined) { 547 // remember this URL if the use element was not empty and no request was sent 548 cache[base] = true; 549 } else if (cache[base].onload) { 550 // if it turns out that prepending the SVG is not necessary, 551 // abort the in-progress xhr. 552 cache[base].abort(); 553 delete cache[base].onload; 554 cache[base] = true; 555 } 556 } else if (base.length && cache[base]) { 557 setTimeout(attrUpdateFunc({ 558 useEl: uses[i], 559 base: base, 560 hash: hash 561 }), 0); 562 } 563 } 564 } 565 uses = ""; 566 inProgressCount += 1; 567 observeIfDone(); 568 }; 569 var _winLoad; 570 _winLoad = function winLoad() { 571 window.removeEventListener("load", _winLoad, false); // to prevent memory leaks 572 tid = setTimeout(checkUseElems, 0); 573 }; 574 if (document.readyState !== "complete") { 575 // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. 576 window.addEventListener("load", _winLoad, false); 577 } else { 578 // No need to add a listener if the document is already loaded, initialize immediately. 579 _winLoad(); 580 } 581 } 582 })(); 583 584/***/ }), 585/* 2 */ 586/***/ (function(module, exports, __webpack_require__) { 587 588 'use strict'; 589 590 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; }; }(); /** 591 * @author NHN Ent. FE Development Team <[email protected]> 592 * @fileoverview Image-editor application class 593 */ 594 595 596 var _tuiCodeSnippet = __webpack_require__(3); 597 598 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 599 600 var _promise = __webpack_require__(4); 601 602 var _promise2 = _interopRequireDefault(_promise); 603 604 var _invoker2 = __webpack_require__(68); 605 606 var _invoker3 = _interopRequireDefault(_invoker2); 607 608 var _ui = __webpack_require__(74); 609 610 var _ui2 = _interopRequireDefault(_ui); 611 612 var _action = __webpack_require__(103); 613 614 var _action2 = _interopRequireDefault(_action); 615 616 var _command = __webpack_require__(69); 617 618 var _command2 = _interopRequireDefault(_command); 619 620 var _graphics = __webpack_require__(105); 621 622 var _graphics2 = _interopRequireDefault(_graphics); 623 624 var _consts = __webpack_require__(73); 625 626 var _consts2 = _interopRequireDefault(_consts); 627 628 var _util = __webpack_require__(72); 629 630 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 631 632 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 633 634 var events = _consts2.default.eventNames; 635 var commands = _consts2.default.commandNames; 636 var keyCodes = _consts2.default.keyCodes, 637 rejectMessages = _consts2.default.rejectMessages; 638 var isUndefined = _tuiCodeSnippet2.default.isUndefined,
639 forEach = _tuiCodeSnippet2.default.forEach, 640 CustomEvents = _tuiCodeSnippet2.default.CustomEvents; 641 642 /** 643 * Image editor 644 * @class 645 * @param {string|HTMLElement} wrapper - Wrapper's element or selector 646 * @param {Object} [options] - Canvas max width & height of css 647 * @param {number} [options.includeUI] - Use the provided UI 648 * @param {Object} [options.includeUI.loadImage] - Basic editing image 649 * @param {string} options.includeUI.loadImage.path - image path 650 * @param {string} options.includeUI.loadImage.name - image name 651 * @param {Object} [options.includeUI.theme] - Theme object 652 * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used. [default all] 653 * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started. 654 * @param {Object} [options.includeUI.uiSize] - ui size of editor 655 * @param {string} options.includeUI.uiSize.width - width of ui 656 * @param {string} options.includeUI.uiSize.height - height of ui 657 * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position [top | bottom | left | right] 658 * @param {number} options.cssMaxWidth - Canvas css-max-width 659 * @param {number} options.cssMaxHeight - Canvas css-max-height 660 * @param {Object} [options.selectionStyle] - selection style 661 * @param {string} [options.selectionStyle.cornerStyle] - selection corner style 662 * @param {number} [options.selectionStyle.cornerSize] - selection corner size 663 * @param {string} [options.selectionStyle.cornerColor] - selection corner color 664 * @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color 665 * @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent 666 * @param {number} [options.selectionStyle.lineWidth] - selection line width 667 * @param {string} [options.selectionStyle.borderColor] - selection border color 668 * @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length 669 * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false. 670 * @example 671 * var ImageEditor = require('tui-image-editor'); 672 * var blackTheme = require('./js/theme/black-theme.js'); 673 * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { 674 * includeUI: { 675 * loadImage: { 676 * path: 'img/sampleImage.jpg', 677 * name: 'SampleImage' 678 * }, 679 * theme: blackTheme, // or whiteTheme 680 * menu: ['shape', 'filter'], 681 * initMenu: 'filter', 682 * uiSize: { 683 * width: '1000px', 684 * height: '700px' 685 * }, 686 * menuBarPosition: 'bottom' 687 * }, 688 * cssMaxWidth: 700, 689 * cssMaxHeight: 500, 690 * selectionStyle: { 691 * cornerSize: 20, 692 * rotatingPointOffset: 70 693 * } 694 * }); 695 */ 696 697 var ImageEditor = function () { 698 function ImageEditor(wrapper, options) { 699 _classCallCheck(this, ImageEditor); 700 701 options = _tuiCodeSnippet2.default.extend({ 702 includeUI: false, 703 usageStatistics: true 704 }, options); 705 706 this.mode = null; 707 708 this.activeObjectId = null; 709 710 /** 711 * UI instance 712 * @type {Ui} 713 */ 714 if (options.includeUI) { 715 this.ui = new _ui2.default(wrapper, options.includeUI, this.getActions()); 716 options = this.ui.setUiDefaultSelectionStyle(options); 717 } 718 719 /** 720 * Invoker 721 * @type {Invoker} 722 * @private 723 */ 724 this._invoker = new _invoker3.default(); 725 726 /** 727 * Graphics instance 728 * @type {Graphics} 729 * @private 730 */ 731 this._graphics = new _graphics2.default(this.ui ? this.ui.getEditorArea() : wrapper, { 732 cssMaxWidth: options.cssMaxWidth, 733 cssMaxHeight: options.cssMaxHeight, 734 useItext: !!this.ui, 735 useDragAddIcon: !!this.ui 736 }); 737 738 /** 739 * Event handler list 740 * @type {Object} 741 * @private 742 */ 743 this._handlers = { 744 keydown: this._onKeyDown.bind(this), 745 mousedown: this._onMouseDown.bind(this), 746 objectActivated: this._onObjectActivated.bind(this), 747 objectMoved: this._onObjectMoved.bind(this), 748 objectScaled: this._onObjectScaled.bind(this), 749 createdPath: this._onCreatedPath, 750 addText: this._onAddText.bind(this), 751 addObject: this._onAddObject.bind(this), 752 addObjectAfter: this._onAddObjectAfter.bind(this), 753 textEditing: this._onTextEditing.bind(this), 754 textChanged: this._onTextChanged.bind(this), 755 iconCreateResize: this._onIconCreateResize.bind(this), 756 iconCreateEnd: this._onIconCreateEnd.bind(this), 757 selectionCleared: this._selectionCleared.bind(this), 758 selectionCreated: this._selectionCreated.bind(this) 759 }; 760 761 this._attachInvokerEvents(); 762 this._attachGraphicsEvents(); 763 this._attachDomEvents(); 764 this._setSelectionStyle(options.selectionStyle, { 765 applyCropSelectionStyle: options.applyCropSelectionStyle, 766 applyGroupSelectionStyle: options.applyGroupSelectionStyle 767 }); 768 769 if (options.usageStatistics) { 770 (0, _util.sendHostName)(); 771 } 772 773 if (this.ui) { 774 this.ui.initCanvas(); 775 this.setReAction(); 776 } 777 } 778 779 /** 780 * Image filter result 781 * @typedef {Object} FilterResult 782 * @property {string} type - filter type like 'mask', 'Grayscale' and so on 783 * @property {string} action - action type like 'add', 'remove' 784 */ 785 786 /** 787 * Flip status 788 * @typedef {Object} FlipStatus 789 * @property {boolean} flipX - x axis 790 * @property {boolean} flipY - y axis 791 * @property {Number} angle - angle 792 */ 793 /** 794 * Rotation status 795 * @typedef {Number} RotateStatus 796 * @property {Number} angle - angle 797 */ 798 799 /** 800 * Old and new Size 801 * @typedef {Object} SizeChange 802 * @property {Number} oldWidth - old width 803 * @property {Number} oldHeight - old height 804 * @property {Number} newWidth - new width 805 * @property {Number} newHeight - new height 806 */ 807 808 /** 809 * @typedef {string} ErrorMsg - {string} error message 810 */ 811 812 /** 813 * @typedef {Object} ObjectProps - graphics object properties 814 * @property {number} id - object id 815 * @property {string} type - object type 816 * @property {string} text - text content 817 * @property {(string | number)} left - Left 818 * @property {(string | number)} top - Top 819 * @property {(string | number)} width - Width 820 * @property {(string | number)} height - Height 821 * @property {string} fill - Color 822 * @property {string} stroke - Stroke 823 * @property {(string | number)} strokeWidth - StrokeWidth 824 * @property {string} fontFamily - Font type for text 825 * @property {number} fontSize - Font Size 826 * @property {string} fontStyle - Type of inclination (normal / italic) 827 * @property {string} fontWeight - Type of thicker or thinner looking (normal / bold) 828 * @property {string} textAlign - Type of text align (left / center / right) 829 * @property {string} textDecoraiton - Type of line (underline / line-throgh / overline) 830 */ 831 832 /** 833 * Set selection style by init option 834 * @param {Object} selectionStyle - Selection styles 835 * @param {Object}
835 applyTargets - Selection apply targets 836 * @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not 837 * @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not 838 * @private 839 */ 840 841 842 _createClass(ImageEditor, [{ 843 key: '_setSelectionStyle', 844 value: function _setSelectionStyle(selectionStyle, _ref) { 845 var applyCropSelectionStyle = _ref.applyCropSelectionStyle, 846 applyGroupSelectionStyle = _ref.applyGroupSelectionStyle; 847 848 if (selectionStyle) { 849 this._graphics.setSelectionStyle(selectionStyle); 850 } 851 852 if (applyCropSelectionStyle) { 853 this._graphics.setCropSelectionStyle(selectionStyle); 854 } 855 856 if (applyGroupSelectionStyle) { 857 this.on('selectionCreated', function (eventTarget) { 858 if (eventTarget.type === 'group') { 859 eventTarget.set(selectionStyle); 860 } 861 }); 862 } 863 } 864 865 /** 866 * Attach invoker events 867 * @private 868 */ 869 870 }, { 871 key: '_attachInvokerEvents', 872 value: function _attachInvokerEvents() { 873 var UNDO_STACK_CHANGED = events.UNDO_STACK_CHANGED, 874 REDO_STACK_CHANGED = events.REDO_STACK_CHANGED; 875 876 /** 877 * Undo stack changed event 878 * @event ImageEditor#undoStackChanged 879 * @param {Number} length - undo stack length 880 * @example 881 * imageEditor.on('undoStackChanged', function(length) { 882 * console.log(length); 883 * }); 884 */ 885 886 this._invoker.on(UNDO_STACK_CHANGED, this.fire.bind(this, UNDO_STACK_CHANGED)); 887 /** 888 * Redo stack changed event 889 * @event ImageEditor#redoStackChanged 890 * @param {Number} length - redo stack length 891 * @example 892 * imageEditor.on('redoStackChanged', function(length) { 893 * console.log(length); 894 * }); 895 */ 896 this._invoker.on(REDO_STACK_CHANGED, this.fire.bind(this, REDO_STACK_CHANGED)); 897 } 898 899 /** 900 * Attach canvas events 901 * @private 902 */ 903 904 }, { 905 key: '_attachGraphicsEvents', 906 value: function _attachGraphicsEvents() { 907 this._graphics.on({ 908 'mousedown': this._handlers.mousedown, 909 'objectMoved': this._handlers.objectMoved, 910 'objectScaled': this._handlers.objectScaled, 911 'objectActivated': this._handlers.objectActivated, 912 'addText': this._handlers.addText, 913 'addObject': this._handlers.addObject, 914 'textEditing': this._handlers.textEditing, 915 'textChanged': this._handlers.textChanged, 916 'iconCreateResize': this._handlers.iconCreateResize, 917 'iconCreateEnd': this._handlers.iconCreateEnd, 918 'selectionCleared': this._handlers.selectionCleared, 919 'selectionCreated': this._handlers.selectionCreated, 920 'addObjectAfter': this._handlers.addObjectAfter 921 }); 922 } 923 924 /** 925 * Attach dom events 926 * @private 927 */ 928 929 }, { 930 key: '_attachDomEvents', 931 value: function _attachDomEvents() { 932 // ImageEditor supports IE 9 higher 933 document.addEventListener('keydown', this._handlers.keydown); 934 } 935 936 /** 937 * Detach dom events 938 * @private 939 */ 940 941 }, { 942 key: '_detachDomEvents', 943 value: function _detachDomEvents() { 944 // ImageEditor supports IE 9 higher 945 document.removeEventListener('keydown', this._handlers.keydown); 946 } 947 948 /** 949 * Keydown event handler 950 * @param {KeyboardEvent} e - Event object 951 * @private 952 */ 953 /* eslint-disable complexity */ 954 955 }, { 956 key: '_onKeyDown', 957 value: function _onKeyDown(e) { 958 var activeObject = this._graphics.getActiveObject(); 959 var activeObjectGroup = this._graphics.getActiveGroupObject(); 960 var existRemoveObject = activeObject || activeObjectGroup; 961 962 if ((e.ctrlKey || e.metaKey) && e.keyCode === keyCodes.Z) { 963 // There is no error message on shortcut when it's empty 964 this.undo()['catch'](function () {}); 965 } 966 967 if ((e.ctrlKey || e.metaKey) && e.keyCode === keyCodes.Y) { 968 // There is no error message on shortcut when it's empty 969 this.redo()['catch'](function () {}); 970 } 971 972 if ((e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DEL) && existRemoveObject) { 973 e.preventDefault(); 974 this.removeActiveObject(); 975 } 976 } 977 /* eslint-enable complexity */ 978 979 /** 980 * Remove Active Object 981 */ 982 983 }, { 984 key: 'removeActiveObject', 985 value: function removeActiveObject() { 986 var activeObject = this._graphics.getActiveObject(); 987 var activeObjectGroup = this._graphics.getActiveGroupObject(); 988 989 if (activeObjectGroup) { 990 var objects = activeObjectGroup.getObjects(); 991 this.discardSelection(); 992 this._removeObjectStream(objects); 993 } else if (activeObject) { 994 var activeObjectId = this._graphics.getObjectId(activeObject); 995 this.removeObject(activeObjectId); 996 } 997 } 998 999 /** 1000 * RemoveObject Sequential processing for prevent invoke lock 1001 * @param {Array.<Object>} targetObjects - target Objects for remove 1002 * @returns {object} targetObjects 1003 * @private 1004 */ 1005 1006 }, { 1007 key: '_removeObjectStream', 1008 value: function _removeObjectStream(targetObjects) { 1009 var _this = this; 1010 1011 if (!targetObjects.length) { 1012 return true; 1013 } 1014 1015 var targetObject = targetObjects.pop(); 1016 1017 return this.removeObject(this._graphics.getObjectId(targetObject)).then(function () { 1018 return _this._removeObjectStream(targetObjects); 1019 }); 1020 } 1021 1022 /** 1023 * mouse down event handler 1024 * @param {Event} event mouse down event 1025 * @param {Object} originPointer origin pointer 1026 * @param {Number} originPointer.x x position 1027 * @param {Number}
1027 originPointer.y y position 1028 * @private 1029 */ 1030 1031 }, { 1032 key: '_onMouseDown', 1033 value: function _onMouseDown(event, originPointer) { 1034 /** 1035 * The mouse down event with position x, y on canvas 1036 * @event ImageEditor#mousedown 1037 * @param {Object} event - browser mouse event object 1038 * @param {Object} originPointer origin pointer 1039 * @param {Number} originPointer.x x position 1040 * @param {Number} originPointer.y y position 1041 * @example 1042 * imageEditor.on('mousedown', function(event, originPointer) { 1043 * console.log(event); 1044 * console.log(originPointer); 1045 * if (imageEditor.hasFilter('colorFilter')) { 1046 * imageEditor.applyFilter('colorFilter', { 1047 * x: parseInt(originPointer.x, 10), 1048 * y: parseInt(originPointer.y, 10) 1049 * }); 1050 * } 1051 * }); 1052 */ 1053 this.fire(events.MOUSE_DOWN, event, originPointer); 1054 } 1055 1056 /** 1057 * Add a 'addObject' command 1058 * @param {Object} obj - Fabric object 1059 * @private 1060 */ 1061 1062 }, { 1063 key: '_pushAddObjectCommand', 1064 value: function _pushAddObjectCommand(obj) { 1065 var command = _command2.default.create(commands.ADD_OBJECT, this._graphics, obj); 1066 this._invoker.pushUndoStack(command); 1067 } 1068 1069 /** 1070 * 'objectActivated' event handler 1071 * @param {ObjectProps} props - object properties 1072 * @private 1073 */ 1074 1075 }, { 1076 key: '_onObjectActivated', 1077 value: function _onObjectActivated(props) { 1078 /** 1079 * The event when object is selected(aka activated). 1080 * @event ImageEditor#objectActivated 1081 * @param {ObjectProps} objectProps - object properties 1082 * @example 1083 * imageEditor.on('objectActivated', function(props) { 1084 * console.log(props); 1085 * console.log(props.type); 1086 * console.log(props.id); 1087 * }); 1088 */ 1089 this.fire(events.OBJECT_ACTIVATED, props); 1090 } 1091 1092 /** 1093 * 'objectMoved' event handler 1094 * @param {ObjectProps} props - object properties 1095 * @private 1096 */ 1097 1098 }, { 1099 key: '_onObjectMoved', 1100 value: function _onObjectMoved(props) { 1101 /** 1102 * The event when object is moved 1103 * @event ImageEditor#objectMoved 1104 * @param {ObjectProps} props - object properties 1105 * @example 1106 * imageEditor.on('objectMoved', function(props) { 1107 * console.log(props); 1108 * console.log(props.type); 1109 * }); 1110 */ 1111 this.fire(events.OBJECT_MOVED, props); 1112 } 1113 1114 /** 1115 * 'objectScaled' event handler 1116 * @param {ObjectProps} props - object properties 1117 * @private 1118 */ 1119 1120 }, { 1121 key: '_onObjectScaled', 1122 value: function _onObjectScaled(props) { 1123 /** 1124 * The event when scale factor is changed 1125 * @event ImageEditor#objectScaled 1126 * @param {ObjectProps} props - object properties 1127 * @example 1128 * imageEditor.on('objectScaled', function(props) { 1129 * console.log(props); 1130 * console.log(props.type); 1131 * }); 1132 */ 1133 this.fire(events.OBJECT_SCALED, props); 1134 } 1135 1136 /** 1137 * Get current drawing mode 1138 * @returns {string} 1139 * @example 1140 * // Image editor drawing mode 1141 * // 1142 * // NORMAL: 'NORMAL' 1143 * // CROPPER: 'CROPPER' 1144 * // FREE_DRAWING: 'FREE_DRAWING' 1145 * // LINE_DRAWING: 'LINE_DRAWING' 1146 * // TEXT: 'TEXT' 1147 * // 1148 * if (imageEditor.getDrawingMode() === 'FREE_DRAWING') { 1149 * imageEditor.stopDrawingMode(); 1150 * } 1151 */ 1152 1153 }, { 1154 key: 'getDrawingMode', 1155 value: function getDrawingMode() { 1156 return this._graphics.getDrawingMode(); 1157 } 1158 1159 /** 1160 * Clear all objects 1161 * @returns {Promise} 1162 * @example 1163 * imageEditor.clearObjects(); 1164 */ 1165 1166 }, { 1167 key: 'clearObjects', 1168 value: function clearObjects() { 1169 return this.execute(commands.CLEAR_OBJECTS); 1170 } 1171 1172 /** 1173 * Deactivate all objects 1174 * @example 1175 * imageEditor.deactivateAll(); 1176 */ 1177 1178 }, { 1179 key: 'deactivateAll', 1180 value: function deactivateAll() { 1181 this._graphics.deactivateAll(); 1182 this._graphics.renderAll(); 1183 } 1184 1185 /** 1186 * discard selction 1187 * @example 1188 * imageEditor.discardSelection(); 1189 */ 1190 1191 }, { 1192 key: 'discardSelection', 1193 value: function discardSelection() { 1194 this._graphics.discardSelection(); 1195 } 1196 1197 /** 1198 * selectable status change 1199 * @param {boolean} selectable - selctable status 1200 * @example 1201 * imageEditor.changeSelectableAll(false); // or true 1202 */ 1203 1204 }, { 1205 key: 'changeSelectableAll', 1206 value: function changeSelectableAll(selectable) { 1207 this._graphics.changeSelectableAll(selectable); 1208 } 1209 1210 /** 1211 * Invoke command 1212 * @param {String} commandName - Command name 1213 * @param {...*} args - Arguments for creating command 1214 * @returns {Promise} 1215 * @private 1216 */ 1217 1218 }, { 1219 key: 'execute', 1220 value: function execute(commandName) { 1221 var _invoker; 1222 1223 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 1224 args[_key - 1] = arguments[_key]; 1225 } 1226 1227 // Inject an Graphics instance as first parameter 1228 var theArgs = [this._graphics].concat(args); 1229 1230 return (_invoker = this._invoker).execute.apply(_invoker, [commandName].concat(theArgs)); 1231 } 1232 1233 /** 1234 * Undo 1235 * @returns {Promise} 1236 * @example 1237 * imageEditor.undo(); 1238 */ 1239 1240 }, { 1241 key: 'undo', 1242 value: function undo() { 1243 return this._invoker.undo(); 1244 } 1245 1246 /** 1247 * Redo 1248 * @returns {Promise} 1249 * @example 1250 * imageEditor.redo(); 1251 */ 1252 1253 }, { 1254 key: 'redo', 1255 value: function redo() { 1256 return this._invoker.redo(); 1257 } 1258 1259 /** 1260 * Load image from file 1261 * @param {File} imgFile - Image file 1262 * @param {string} [imageName] - imageName 1263 * @returns {Promise<SizeChange, ErrorMsg>} 1264 * @example 1265 * imageEditor.loadImageFromFile(file).then(result => { 1266 * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); 1267 * console.log('new : ' + result.newWidth + ', ' + result.newHeight); 1268 * }); 1269 */ 1270 1271 }, { 1272 key: 'loadImageFromFile', 1273 value: function loadImageFromFile(imgFile, imageName) { 1274 if (!imgFile) { 1275 return _promise2.default.reject(rejectMessages.invalidParameters); 1276 } 1277 1278 var imgUrl = URL.createObjectURL(imgFile); 1279 imageName = imageName || imgFile.name; 1280 1281 return this.loadImageFromURL(imgUrl, imageName).then(function (value) { 1282 URL.revokeObjectURL(imgFile); 1283 1284 return value; 1285 }); 1286 } 1287 1288 /** 1289 * Load image from url 1290 * @param {string} url - File url 1291 * @param {string} imageName - imageName 1292 * @returns {Promise<SizeChange, ErrorMsg>} 1293 * @example 1294 * imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => { 1295 * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); 1296 * console.log('new : ' + result.newWidth + ', ' + result.newHeight); 1297 * }); 1298 */ 1299 1300 }, { 1301 key: 'loadImageFromURL', 1302 value: function loadImageFromURL(url, imageName) { 1303 if (!imageName || !url) { 1304 return _promise2.default.reject(rejectMessages.invalidParameters); 1305 } 1306 1307 return this.execute(commands.LOAD_IMAGE, imageName, url); 1308 } 1309 1310 /** 1311 * Add image object on canvas 1312 * @param {string} imgUrl - Image url to make object 1313 * @returns {Promise<ObjectProps, ErrorMsg>} 1314 * @example 1315 * imageEditor.addImageObject('path/fileName.jpg').then(objectProps => { 1316 * console.log(ojectProps.id); 1317 * }); 1318 */ 1319 1320 }, { 1321 key: 'addImageObject', 1322 value: function addImageObject(imgUrl) { 1323 if (!imgUrl) { 1324 return _promise2.default.reject(rejectMessages.invalidParameters); 1325 } 1326 1327 return this.execute(commands.ADD_IMAGE_OBJECT, imgUrl); 1328 } 1329 1330 /** 1331 * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. 1332 * @param {String} mode Can be one of <I>'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'</I> 1333 * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' 1334 * @param {Number} [option.width] brush width 1335 * @param {String} [option.color] brush color 1336 * @returns {boolean} true if success or false 1337 * @example 1338 * imageEditor.startDrawingMode('FREE_DRAWING', { 1339 * width: 10, 1340 * color: 'rgba(255,0,0,0.5)' 1341 * }); 1342 */ 1343 1344 }, { 1345 key: 'startDrawingMode', 1346 value: function startDrawingMode(mode, option) { 1347 return this._graphics.startDrawingMode(mode, option); 1348 } 1349 1350 /** 1351 * Stop the current drawing mode and back to the 'NORMAL' mode 1352 * @example 1353 * imageEditor.stopDrawingMode(); 1354 */ 1355 1356 }, { 1357 key: 'stopDrawingMode', 1358 value: function stopDrawingMode() { 1359 this._graphics.stopDrawingMode(); 1360 } 1361 1362 /** 1363 * Crop this image with rect 1364 * @param {Object} rect crop rect 1365 * @param {Number} rect.left left position 1366 * @param {Number} rect.top top position 1367 * @param {Number} rect.width width 1368 * @param {Number} rect.height height 1369 * @returns {Promise} 1370 * @example 1371 * imageEditor.crop(imageEditor.getCropzoneRect()); 1372 */ 1373 1374 }, { 1375 key: 'crop', 1376 value: function crop(rect) { 1377 var data = this._graphics.getCroppedImageData(rect); 1378 if (!data) { 1379 return _promise2.default.reject(rejectMessages.invalidParameters); 1380 } 1381 1382 return this.loadImageFromURL(data.url, data.imageName); 1383 } 1384 1385 /** 1386 * Get the cropping rect 1387 * @returns {Object} {{left: number, top: number, width: number, height: number}} rect 1388 */ 1389 1390 }, { 1391 key: 'getCropzoneRect', 1392 value: function getCropzoneRect() { 1393 return this._graphics.getCropzoneRect(); 1394 } 1395 1396 /** 1397 * Set the cropping rect 1398 * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777] 1399 */ 1400 1401 }, { 1402 key: 'setCropzoneRect', 1403 value: function setCropzoneRect(mode) { 1404 this._graphics.setCropzoneRect(mode); 1405 } 1406 1407 /** 1408 * Flip 1409 * @returns {Promise} 1410 * @param {string} type - 'flipX' or 'flipY' or 'reset' 1411 * @returns {Promise<FlipStatus, ErrorMsg>} 1412 * @private 1413 */ 1414 1415 }, { 1416 key: '_flip', 1417 value: function _flip(type) { 1418 return this.execute(commands.FLIP_IMAGE, type); 1419 } 1420 1421 /** 1422 * Flip x 1423 * @returns {Promise<FlipStatus, ErrorMsg>} 1424 * @example 1425 * imageEditor.flipX().then((status => { 1426 * console.log('flipX: ', status.flipX); 1427 * console.log('flipY: ', status.flipY); 1428 * console.log('angle: ', status.angle); 1429 * }).catch(message => { 1430 * console.log('error: ', message); 1431 * }); 1432 */ 1433 1434 }, { 1435 key: 'flipX', 1436 value: function flipX() { 1437 return this._flip('flipX'); 1438 } 1439 1440 /** 1441 * Flip y 1442 * @returns {Promise<FlipStatus, ErrorMsg>} 1443 * @example 1444 * imageEditor.flipY().then(status => { 1445 * console.log('flipX: ', status.flipX); 1446 * console.log('flipY: ', status.flipY); 1447 * console.log('angle: ', status.angle); 1448 * }).catch(message => { 1449 * console.log('error: ', message); 1450 * }); 1451 */ 1452 1453 }, { 1454 key: 'flipY', 1455 value: function flipY() { 1456 return this._flip('flipY'); 1457 } 1458 1459 /** 1460 * Reset flip 1461 * @returns {Promise<FlipStatus, ErrorMsg>} 1462 * @example 1463 * imageEditor.resetFlip().then(status => { 1464 * console.log('flipX: ', status.flipX); 1465 * console.log('flipY: ', status.flipY); 1466 * console.log('angle: ', status.angle); 1467 * }).catch(message => { 1468 * console.log('error: ', message); 1469 * });; 1470 */ 1471 1472 }, { 1473 key: 'resetFlip', 1474 value: function resetFlip() { 1475 return this._flip('reset'); 1476 } 1477 1478 /** 1479 * @param {string} type - 'rotate' or 'setAngle' 1480 * @param {number} angle - angle value (degree) 1481 * @returns {Promise<RotateStatus, ErrorMsg>} 1482 * @private 1483 */ 1484 1485 }, { 1486 key: '_rotate', 1487 value: function _rotate(type, angle) { 1488 return this.execute(commands.ROTATE_IMAGE, type, angle); 1489 } 1490 1491 /** 1492 * Rotate image 1493 * @returns {Promise} 1494 * @param {number} angle - Additional angle to rotate image 1495 * @returns {Promise<RotateStatus, ErrorMsg>} 1496 * @example 1497 * imageEditor.setAngle(10); // angle = 10 1498 * imageEditor.rotate(10); // angle = 20 1499 * imageEidtor.setAngle(5); // angle = 5 1500 * imageEidtor.rotate(-95); // angle = -90 1501 * imageEditor.rotate(10).then(status => { 1502 * console.log('angle: ', status.angle); 1503 * })).catch(message => { 1504 * console.log('error: ', message); 1505 * }); 1506 */ 1507 1508 }, { 1509 key: 'rotate', 1510 value: function rotate(angle) { 1511 return this._rotate('rotate', angle); 1512 } 1513 1514 /** 1515 * Set angle 1516 * @param {number} angle - Angle of image 1517 * @returns {Promise<RotateStatus, ErrorMsg>} 1518 * @example 1519 * imageEditor.setAngle(10); // angle = 10 1520 * imageEditor.rotate(10); // angle = 20 1521 * imageEidtor.setAngle(5); // angle = 5 1522 * imageEidtor.rotate(50); // angle = 55 1523 * imageEidtor.setAngle(-40); // angle = -40 1524 * imageEditor.setAngle(10).then(status => { 1525 * console.log('angle: ', status.angle); 1526 * })).catch(message => { 1527 * console.log('error: ', message); 1528 * }); 1529 */ 1530 1531 }, { 1532 key: 'setAngle', 1533 value: function setAngle(angle) { 1534 return this._rotate('setAngle', angle); 1535 } 1536 1537 /** 1538 * Set drawing brush 1539 * @param {Object} option brush option 1540 * @param {Number} option.width width 1541 * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' 1542 * @example 1543 * imageEditor.startDrawingMode('FREE_DRAWING'); 1544 * imageEditor.setBrush({ 1545 * width: 12, 1546 * color: 'rgba(0, 0, 0, 0.5)' 1547 * }); 1548
1548 * imageEditor.setBrush({ 1549 * width: 8, 1550 * color: 'FFFFFF' 1551 * }); 1552 */ 1553 1554 }, { 1555 key: 'setBrush', 1556 value: function setBrush(option) { 1557 this._graphics.setBrush(option); 1558 } 1559 1560 /** 1561 * Set states of current drawing shape 1562 * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') 1563 * @param {Object} [options] - Shape options 1564 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 1565 * @param {string} [options.stoke] - Shape outline color 1566 * @param {number} [options.strokeWidth] - Shape outline width 1567 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 1568 * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) 1569 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 1570 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 1571 * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 1572 * @example 1573 * imageEditor.setDrawingShape('rect', { 1574 * fill: 'red', 1575 * width: 100, 1576 * height: 200 1577 * }); 1578 * @example 1579 * imageEditor.setDrawingShape('circle', { 1580 * fill: 'transparent', 1581 * stroke: 'blue', 1582 * strokeWidth: 3, 1583 * rx: 10, 1584 * ry: 100 1585 * }); 1586 * @example 1587 * imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio 1588 * width: 1, 1589 * height: 1, 1590 * isRegular: true 1591 * }); 1592 * @example 1593 * imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio 1594 * rx: 10, 1595 * ry: 10, 1596 * isRegular: true 1597 * }); 1598 */ 1599 1600 }, { 1601 key: 'setDrawingShape', 1602 value: function setDrawingShape(type, options) { 1603 this._graphics.setDrawingShape(type, options); 1604 } 1605 1606 /** 1607 * Add shape 1608 * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') 1609 * @param {Object} options - Shape options 1610 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 1611 * @param {string} [options.stroke] - Shape outline color 1612 * @param {number} [options.strokeWidth] - Shape outline width 1613 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 1614 * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) 1615 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 1616 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 1617 * @param {number} [options.left] - Shape x position 1618 * @param {number} [options.top] - Shape y position 1619 * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 1620 * @returns {Promise<ObjectProps, ErrorMsg>} 1621 * @example 1622 * imageEditor.addShape('rect', { 1623 * fill: 'red', 1624 * stroke: 'blue', 1625 * strokeWidth: 3, 1626 * width: 100, 1627 * height: 200, 1628 * left: 10, 1629 * top: 10, 1630 * isRegular: true 1631 * }); 1632 * @example 1633 * imageEditor.addShape('circle', { 1634 * fill: 'red', 1635 * stroke: 'blue', 1636 * strokeWidth: 3, 1637 * rx: 10, 1638 * ry: 100, 1639 * isRegular: false 1640 * }).then(objectProps => { 1641 * console.log(objectProps.id); 1642 * }); 1643 */ 1644 1645 }, { 1646 key: 'addShape', 1647 value: function addShape(type, options) { 1648 options = options || {}; 1649 1650 this._setPositions(options); 1651 1652 return this.execute(commands.ADD_SHAPE, type, options); 1653 } 1654 1655 /** 1656 * Change shape 1657 * @param {number} id - object id 1658 * @param {Object} options - Shape options 1659 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 1660 * @param {string} [options.stroke] - Shape outline color 1661 * @param {number} [options.strokeWidth] - Shape outline width 1662 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 1663 * @param {number}
1663 [options.height] - Height value (When type option is 'rect', this options can use) 1664 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 1665 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 1666 * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 1667 * @returns {Promise} 1668 * @example 1669 * // call after selecting shape object on canvas 1670 * imageEditor.changeShape(id, { // change rectagle or triangle 1671 * fill: 'red', 1672 * stroke: 'blue', 1673 * strokeWidth: 3, 1674 * width: 100, 1675 * height: 200 1676 * }); 1677 * @example 1678 * // call after selecting shape object on canvas 1679 * imageEditor.changeShape(id, { // change circle 1680 * fill: 'red', 1681 * stroke: 'blue', 1682 * strokeWidth: 3, 1683 * rx: 10, 1684 * ry: 100 1685 * }); 1686 */ 1687 1688 }, { 1689 key: 'changeShape', 1690 value: function changeShape(id, options) { 1691 return this.execute(commands.CHANGE_SHAPE, id, options); 1692 } 1693 1694 /** 1695 * Add text on image 1696 * @param {string} text - Initial input text 1697 * @param {Object} [options] Options for generating text 1698 * @param {Object} [options.styles] Initial styles 1699 * @param {string} [options.styles.fill] Color 1700 * @param {string} [options.styles.fontFamily] Font type for text 1701 * @param {number} [options.styles.fontSize] Size 1702 * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) 1703 * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) 1704 * @param {string} [options.styles.textAlign] Type of text align (left / center / right) 1705 * @param {string} [options.styles.textDecoraiton] Type of line (underline / line-throgh / overline) 1706 * @param {{x: number, y: number}} [options.position] - Initial position 1707 * @returns {Promise} 1708 * @example 1709 * imageEditor.addText('init text'); 1710 * @example 1711 * imageEditor.addText('init text', { 1712 * styles: { 1713 * fill: '#000', 1714 * fontSize: 20, 1715 * fontWeight: 'bold' 1716 * }, 1717 * position: { 1718 * x: 10, 1719 * y: 10 1720 * } 1721 * }).then(objectProps => { 1722 * console.log(objectProps.id); 1723 * }); 1724 */ 1725 1726 }, { 1727 key: 'addText', 1728 value: function addText(text, options) { 1729 text = text || ''; 1730 options = options || {}; 1731 1732 return this.execute(commands.ADD_TEXT, text, options); 1733 } 1734 1735 /** 1736 * Change contents of selected text object on image 1737 * @param {number} id - object id 1738 * @param {string} text - Changing text 1739 * @returns {Promise<ObjectProps, ErrorMsg>} 1740 * @example 1741 * imageEditor.changeText(id, 'change text'); 1742 */ 1743 1744 }, { 1745 key: 'changeText', 1746 value: function changeText(id, text) { 1747 text = text || ''; 1748 1749 return this.execute(commands.CHANGE_TEXT, id, text); 1750 } 1751 1752 /** 1753 * Set style 1754 * @param {number} id - object id 1755 * @param {Object} styleObj - text styles 1756 * @param {string} [styleObj.fill] Color 1757 * @param {string} [styleObj.fontFamily] Font type for text 1758 * @param {number} [styleObj.fontSize] Size 1759 * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) 1760 * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) 1761 * @param {string} [styleObj.textAlign] Type of text align (left / center / right) 1762 * @param {string}
1762 [styleObj.textDecoraiton] Type of line (underline / line-throgh / overline) 1763 * @returns {Promise} 1764 * @example 1765 * imageEditor.changeTextStyle(id, { 1766 * fontStyle: 'italic' 1767 * }); 1768 */ 1769 1770 }, { 1771 key: 'changeTextStyle', 1772 value: function changeTextStyle(id, styleObj) { 1773 return this.execute(commands.CHANGE_TEXT_STYLE, id, styleObj); 1774 } 1775 1776 /** 1777 * change text mode 1778 * @param {string} type - change type 1779 * @private 1780 */ 1781 1782 }, { 1783 key: '_changeActivateMode', 1784 value: function _changeActivateMode(type) { 1785 if (type !== 'ICON' && this.getDrawingMode() !== type) { 1786 this.startDrawingMode(type); 1787 } 1788 } 1789 1790 /** 1791 * 'textChanged' event handler 1792 * @param {Object} objectProps changed object properties 1793 * @private 1794 */ 1795 1796 }, { 1797 key: '_onTextChanged', 1798 value: function _onTextChanged(objectProps) { 1799 this.changeText(objectProps.id, objectProps.text); 1800 } 1801 1802 /** 1803 * 'iconCreateResize' event handler 1804 * @param {Object} originPointer origin pointer 1805 * @param {Number} originPointer.x x position 1806 * @param {Number} originPointer.y y position 1807 * @private 1808 */ 1809 1810 }, { 1811 key: '_onIconCreateResize', 1812 value: function _onIconCreateResize(originPointer) { 1813 this.fire(events.ICON_CREATE_RESIZE, originPointer); 1814 } 1815 1816 /** 1817 * 'iconCreateEnd' event handler 1818 * @param {Object} originPointer origin pointer 1819 * @param {Number} originPointer.x x position 1820 * @param {Number} originPointer.y y position 1821 * @private 1822 */ 1823 1824 }, { 1825 key: '_onIconCreateEnd', 1826 value: function _onIconCreateEnd(originPointer) { 1827 this.fire(events.ICON_CREATE_END, originPointer); 1828 } 1829 1830 /** 1831 * 'textEditing' event handler 1832 * @private 1833 */ 1834 1835 }, { 1836 key: '_onTextEditing', 1837 value: function _onTextEditing() { 1838 /** 1839 * The event which starts to edit text object 1840 * @event ImageEditor#textEditing 1841 * @example 1842 * imageEditor.on('textEditing', function() { 1843 * console.log('text editing'); 1844 * }); 1845 */ 1846 this.fire(events.TEXT_EDITING); 1847 } 1848 1849 /** 1850 * Mousedown event handler in case of 'TEXT' drawing mode 1851 * @param {fabric.Event} event - Current mousedown event object 1852 * @private 1853 */ 1854 1855 }, { 1856 key: '_onAddText', 1857 value: function _onAddText(event) { 1858 /** 1859 * The event when 'TEXT' drawing mode is enabled and click non-object area. 1860 * @event ImageEditor#addText 1861 * @param {Object} pos 1862 * @param {Object} pos.originPosition - Current position on origin canvas 1863 * @param {Number} pos.originPosition.x - x 1864 * @param {Number} pos.originPosition.y - y 1865 * @param {Object} pos.clientPosition - Current position on client area 1866 * @param {Number} pos.clientPosition.x - x 1867 * @param {Number} pos.clientPosition.y - y 1868 * @example 1869 * imageEditor.on('addText', function(pos) { 1870 * console.log('text position on canvas: ' + pos.originPosition); 1871 * console.log('text position on brwoser: ' + pos.clientPosition); 1872 * }); 1873 */ 1874 this.fire(events.ADD_TEXT, { 1875 originPosition: event.originPosition, 1876 clientPosition: event.clientPosition 1877 }); 1878 } 1879 1880 /** 1881 * 'addObject' event handler 1882 * @param {Object} objectProps added object properties 1883 * @private 1884 */ 1885 1886 }, { 1887 key: '_onAddObject', 1888 value: function _onAddObject(objectProps) { 1889 var obj = this._graphics.getObject(objectProps.id);
vendor: 8,155 bytes, lines 1890-2155
1890 this._pushAddObjectCommand(obj); 1891 } 1892 1893 /** 1894 * 'addObjectAfter' event handler 1895 * @param {Object} objectProps added object properties 1896 * @private 1897 */ 1898 1899 }, { 1900 key: '_onAddObjectAfter', 1901 value: function _onAddObjectAfter(objectProps) { 1902 this.fire(events.ADD_OBJECT_AFTER, objectProps); 1903 } 1904 1905 /** 1906 * 'selectionCleared' event handler 1907 * @private 1908 */ 1909 1910 }, { 1911 key: '_selectionCleared', 1912 value: function _selectionCleared() { 1913 this.fire(events.SELECTION_CLEARED); 1914 } 1915 1916 /** 1917 * 'selectionCreated' event handler 1918 * @param {Object} eventTarget - Fabric object 1919 * @private 1920 */ 1921 1922 }, { 1923 key: '_selectionCreated', 1924 value: function _selectionCreated(eventTarget) { 1925 this.fire(events.SELECTION_CREATED, eventTarget); 1926 } 1927 1928 /** 1929 * Register custom icons 1930 * @param {{iconType: string, pathValue: string}} infos - Infos to register icons 1931 * @example 1932 * imageEditor.registerIcons({ 1933 * customIcon: 'M 0 0 L 20 20 L 10 10 Z', 1934 * customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z' 1935 * }); 1936 */ 1937 1938 }, { 1939 key: 'registerIcons', 1940 value: function registerIcons(infos) { 1941 this._graphics.registerPaths(infos); 1942 } 1943 1944 /** 1945 * Change canvas cursor type 1946 * @param {string} cursorType - cursor type 1947 * @example 1948 * imageEditor.changeCursor('crosshair'); 1949 */ 1950 1951 }, { 1952 key: 'changeCursor', 1953 value: function changeCursor(cursorType) { 1954 this._graphics.changeCursor(cursorType); 1955 } 1956 1957 /** 1958 * Add icon on canvas 1959 * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) 1960 * @param {Object} options - Icon options 1961 * @param {string} [options.fill] - Icon foreground color 1962 * @param {number} [options.left] - Icon x position 1963 * @param {number} [options.top] - Icon y position 1964 * @returns {Promise<ObjectProps, ErrorMsg>} 1965 * @example 1966 * imageEditor.addIcon('arrow'); // The position is center on canvas 1967 * @example 1968 * imageEditor.addIcon('arrow', { 1969 * left: 100, 1970 * top: 100 1971 * }).then(objectProps => { 1972 * console.log(objectProps.id); 1973 * }); 1974 */ 1975 1976 }, { 1977 key: 'addIcon', 1978 value: function addIcon(type, options) { 1979 options = options || {}; 1980 1981 this._setPositions(options); 1982 1983 return this.execute(commands.ADD_ICON, type, options); 1984 } 1985 1986 /** 1987 * Change icon color 1988 * @param {number} id - object id 1989 * @param {string} color - Color for icon 1990 * @returns {Promise} 1991 * @example 1992 * imageEditor.changeIconColor(id, '#000000'); 1993 */ 1994 1995 }, { 1996 key: 'changeIconColor', 1997 value: function changeIconColor(id, color) { 1998 return this.execute(commands.CHANGE_ICON_COLOR, id, color); 1999 } 2000 2001 /** 2002 * Remove an object or group by id 2003 * @param {number} id - object id 2004 * @returns {Promise} 2005 * @example 2006 * imageEditor.removeObject(id); 2007 */ 2008 2009 }, { 2010 key: 'removeObject', 2011 value: function removeObject(id) { 2012 return this.execute(commands.REMOVE_OBJECT, id); 2013 } 2014 2015 /** 2016 * Whether it has the filter or not 2017 * @param {string} type - Filter type 2018 * @returns {boolean} true if it has the filter 2019 */ 2020 2021 }, { 2022 key: 'hasFilter', 2023 value: function hasFilter(type) { 2024 return this._graphics.hasFilter(type); 2025 } 2026 2027 /** 2028 * Remove filter on canvas image 2029 * @param {string} type - Filter type 2030 * @returns {Promise<FilterResult, ErrorMsg>} 2031 * @example 2032 * imageEditor.removeFilter('Grayscale').then(obj => { 2033 * console.log('filterType: ', obj.type); 2034 * console.log('actType: ', obj.action); 2035 * }).catch(message => { 2036 * console.log('error: ', message); 2037 * }); 2038 */ 2039 2040 }, { 2041 key: 'removeFilter', 2042 value: function removeFilter(type) { 2043 return this.execute(commands.REMOVE_FILTER, type); 2044 } 2045 2046 /** 2047 * Apply filter on canvas image 2048 * @param {string} type - Filter type 2049 * @param {Object} options - Options to apply filter 2050 * @param {number} options.maskObjId - masking image object id 2051 * @returns {Promise<FilterResult, ErrorMsg>} 2052 * @example 2053 * imageEditor.applyFilter('Grayscale'); 2054 * @example 2055 * imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => { 2056 * console.log('filterType: ', obj.type); 2057 * console.log('actType: ', obj.action); 2058 * }).catch(message => { 2059 * console.log('error: ', message); 2060 * });; 2061 */ 2062 2063 }, { 2064 key: 'applyFilter', 2065 value: function applyFilter(type, options) { 2066 return this.execute(commands.APPLY_FILTER, type, options); 2067 } 2068 2069 /** 2070 * Get data url 2071 * @param {Object} options - options for toDataURL 2072 * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" 2073 * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. 2074 * @param {Number} [options.multiplier=1] Multiplier to scale by 2075 * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 2076 * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 2077 * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 2078 * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 2079 * @returns {string} A DOMString containing the requested data URI 2080 * @example 2081 * imgEl.src = imageEditor.toDataURL(); 2082 * 2083 * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => { 2084 * imageEditor.addImageObject(imgUrl); 2085 * }); 2086 */ 2087 2088 }, { 2089 key: 'toDataURL', 2090 value: function toDataURL(options) { 2091 return this._graphics.toDataURL(options); 2092 } 2093 2094 /** 2095 * Get image name 2096 * @returns {string} image name 2097 * @example 2098 * console.log(imageEditor.getImageName()); 2099 */ 2100 2101 }, { 2102 key: 'getImageName', 2103 value: function getImageName() { 2104 return this._graphics.getImageName(); 2105 } 2106 2107 /** 2108 * Clear undoStack 2109 * @example 2110 * imageEditor.clearUndoStack(); 2111 */ 2112 2113 }, { 2114 key: 'clearUndoStack', 2115 value: function clearUndoStack() { 2116 this._invoker.clearUndoStack(); 2117 } 2118 2119 /** 2120 * Clear redoStack 2121 * @example 2122 * imageEditor.clearRedoStack(); 2123 */ 2124 2125 }, { 2126 key: 'clearRedoStack', 2127 value: function clearRedoStack() { 2128 this._invoker.clearRedoStack(); 2129 } 2130 2131 /** 2132 * Whehter the undo stack is empty or not 2133 * @returns {boolean} 2134 * imageEditor.isEmptyUndoStack(); 2135 */ 2136 2137 }, { 2138 key: 'isEmptyUndoStack', 2139 value: function isEmptyUndoStack() { 2140 return this._invoker.isEmptyUndoStack(); 2141 } 2142 2143 /** 2144 * Whehter the redo stack is empty or not 2145 * @returns {boolean} 2146 * imageEditor.isEmptyRedoStack(); 2147 */ 2148 2149 }, { 2150 key: 'isEmptyRedoStack', 2151 value: function isEmptyRedoStack() { 2152 return this._invoker.isEmptyRedoStack(); 2153 } 2154 2155 /**
2156 * Resize canvas dimension 2157 * @param {{width: number, height: number}} dimension - Max width & height 2158 * @returns {Promise} 2159 */ 2160 2161 }, { 2162 key: 'resizeCanvasDimension', 2163 value: function resizeCanvasDimension(dimension) { 2164 if (!dimension) { 2165 return _promise2.default.reject(rejectMessages.invalidParameters); 2166 } 2167 2168 return this.execute(commands.RESIZE_CANVAS_DIMENSION, dimension); 2169 } 2170 2171 /** 2172 * Destroy 2173 */ 2174 2175 }, { 2176 key: 'destroy', 2177 value: function destroy() { 2178 var _this2 = this; 2179 2180 this.stopDrawingMode(); 2181 this._detachDomEvents(); 2182 this._graphics.destroy(); 2183 this._graphics = null; 2184 2185 forEach(this, function (value, key) { 2186 _this2[key] = null; 2187 }, this); 2188 } 2189 2190 /** 2191 * Set position 2192 * @param {Object} options - Position options (left or top) 2193 * @private 2194 */ 2195 2196 }, { 2197 key: '_setPositions', 2198 value: function _setPositions(options) { 2199 var centerPosition = this._graphics.getCenter(); 2200 2201 if (isUndefined(options.left)) { 2202 options.left = centerPosition.left; 2203 } 2204 2205 if (isUndefined(options.top)) { 2206 options.top = centerPosition.top; 2207 } 2208 } 2209 2210 /** 2211 * Set properties of active object 2212 * @param {number} id - object id 2213 * @param {Object} keyValue - key & value 2214 * @returns {Promise} 2215 * @example 2216 * imageEditor.setObjectProperties(id, { 2217 * left:100, 2218 * top:100, 2219 * width: 200, 2220 * height: 200, 2221 * opacity: 0.5 2222 * }); 2223 */ 2224 2225 }, { 2226 key: 'setObjectProperties', 2227 value: function setObjectProperties(id, keyValue) { 2228 return this.execute(commands.SET_OBJECT_PROPERTIES, id, keyValue); 2229 } 2230 2231 /** 2232 * Set properties of active object, Do not leave an invoke history. 2233 * @param {number} id - object id 2234 * @param {Object} keyValue - key & value 2235 * @example 2236 * imageEditor.setObjectPropertiesQuietly(id, { 2237 * left:100, 2238 * top:100, 2239 * width: 200, 2240 * height: 200, 2241 * opacity: 0.5 2242 * }); 2243 */ 2244 2245 }, { 2246 key: 'setObjectPropertiesQuietly', 2247 value: function setObjectPropertiesQuietly(id, keyValue) { 2248 this._graphics.setObjectProperties(id, keyValue); 2249 } 2250 2251 /** 2252 * Get properties of active object corresponding key 2253 * @param {number} id - object id 2254 * @param {Array<string>|ObjectProps|string} keys - property's key 2255 * @returns {ObjectProps} properties if id is valid or null 2256 * @example 2257 * var props = imageEditor.getObjectProperties(id, 'left'); 2258 * console.log(props); 2259 * @example 2260 * var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']); 2261 * console.log(props); 2262 * @example 2263 * var props = imageEditor.getObjectProperties(id, { 2264 * left: null, 2265 * top: null, 2266 * width: null, 2267 * height: null, 2268 * opacity: null 2269 * }); 2270 * console.log(props); 2271 */ 2272 2273 }, { 2274 key: 'getObjectProperties', 2275 value: function getObjectProperties(id, keys) { 2276 var object = this._graphics.getObject(id); 2277 if (!object) { 2278 return null; 2279 } 2280 2281 return this._graphics.getObjectProperties(id, keys); 2282 } 2283 2284 /** 2285 * Get the canvas size 2286 * @returns {Object} {{width: number, height: number}} canvas size 2287 * @example 2288 * var canvasSize = imageEditor.getCanvasSize(); 2289 * console.log(canvasSize.width); 2290 * console.height(canvasSize.height); 2291 */ 2292 2293 }, { 2294 key: 'getCanvasSize', 2295 value: function getCanvasSize() { 2296 return this._graphics.getCanvasSize(); 2297 } 2298 2299 /** 2300 * Get object position by originX, originY 2301 * @param {number} id - object id 2302 * @param {string} originX - can be 'left', 'center', 'right' 2303 * @param {string} originY - can be 'top', 'center', 'bottom' 2304 * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null 2305 * @example 2306 * var position = imageEditor.getObjectPosition(id, 'left', 'top'); 2307 * console.log(position); 2308 */ 2309 2310 }, { 2311 key: 'getObjectPosition', 2312 value: function getObjectPosition(id, originX, originY) { 2313 return this._graphics.getObjectPosition(id, originX, originY); 2314 } 2315 2316 /** 2317 * Set object position by originX, originY 2318 * @param {number} id - object id 2319 * @param {Object} posInfo - position object 2320 * @param {number} posInfo.x - x position 2321 * @param {number} posInfo.y - y position 2322 * @param {string} posInfo.originX - can be 'left', 'center', 'right' 2323 * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' 2324 * @returns {Promise} 2325 * @example 2326 * // align the object to 'left', 'top' 2327 * imageEditor.setObjectPosition(id, { 2328 * x: 0, 2329 * y: 0, 2330 * originX: 'left', 2331 * originY: 'top' 2332 * }); 2333 * @example 2334 * // align the object to 'right', 'top' 2335 * var canvasSize = imageEditor.getCanvasSize(); 2336 * imageEditor.setObjectPosition(id, { 2337 * x: canvasSize.width, 2338 * y: 0, 2339 * originX: 'right', 2340 * originY: 'top' 2341 * }); 2342 * @example 2343 * // align the object to 'left', 'bottom' 2344 * var canvasSize = imageEditor.getCanvasSize(); 2345 * imageEditor.setObjectPosition(id, { 2346 * x: 0, 2347 * y: canvasSize.height, 2348 * originX: 'left', 2349 * originY: 'bottom' 2350 * }); 2351 * @example 2352 * // align the object to 'right', 'bottom' 2353 * var canvasSize = imageEditor.getCanvasSize(); 2354 * imageEditor.setObjectPosition(id, { 2355 * x: canvasSize.width, 2356 * y: canvasSize.height, 2357 * originX: 'right', 2358 * originY: 'bottom' 2359 * }); 2360 */ 2361 2362 }, { 2363 key: 'setObjectPosition', 2364 value: function setObjectPosition(id, posInfo) { 2365 return this.execute(commands.SET_OBJECT_POSITION, id, posInfo); 2366 } 2367 }]); 2368 2369 return ImageEditor; 2370 }(); 2371 2372 _action2.default.mixin(ImageEditor); 2373 CustomEvents.mixin(ImageEditor); 2374 2375 module.exports = ImageEditor; 2376 2377/***/ }), 2378/* 3 */
2379/***/ (function(module, exports) { 2380 2381 module.exports = __WEBPACK_EXTERNAL_MODULE_3__; 2382 2383/***/ }), 2384/* 4 */ 2385/***/ (function(module, exports, __webpack_require__) { 2386 2387 __webpack_require__(5); 2388 __webpack_require__(6); 2389 __webpack_require__(50); 2390 __webpack_require__(54); 2391 module.exports = __webpack_require__(14).Promise; 2392 2393/***/ }), 2394/* 5 */ 2395/***/ (function(module, exports) { 2396 2397
vendor: 23,435 bytes, lines 2397-3179
2397 2398 2399/***/ }), 2400/* 6 */ 2401/***/ (function(module, exports, __webpack_require__) { 2402 2403 'use strict'; 2404 var $at = __webpack_require__(7)(true); 2405 2406 // 21.1.3.27 String.prototype[@@iterator]() 2407 __webpack_require__(10)(String, 'String', function(iterated){ 2408 this._t = String(iterated); // target 2409 this._i = 0; // next index 2410 // 21.1.5.2.1 %StringIteratorPrototype%.next() 2411 }, function(){ 2412 var O = this._t 2413 , index = this._i 2414 , point; 2415 if(index >= O.length)return {value: undefined, done: true}; 2416 point = $at(O, index); 2417 this._i += point.length; 2418 return {value: point, done: false}; 2419 }); 2420 2421/***/ }), 2422/* 7 */ 2423/***/ (function(module, exports, __webpack_require__) { 2424 2425 var toInteger = __webpack_require__(8) 2426 , defined = __webpack_require__(9); 2427 // true -> String#at 2428 // false -> String#codePointAt 2429 module.exports = function(TO_STRING){ 2430 return function(that, pos){ 2431 var s = String(defined(that)) 2432 , i = toInteger(pos) 2433 , l = s.length 2434 , a, b; 2435 if(i < 0 || i >= l)return TO_STRING ? '' : undefined; 2436 a = s.charCodeAt(i); 2437 return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff 2438 ? TO_STRING ? s.charAt(i) : a 2439 : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000; 2440 }; 2441 }; 2442 2443/***/ }), 2444/* 8 */ 2445/***/ (function(module, exports) { 2446 2447 // 7.1.4 ToInteger 2448 var ceil = Math.ceil 2449 , floor = Math.floor; 2450 module.exports = function(it){ 2451 return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it); 2452 }; 2453 2454/***/ }), 2455/* 9 */ 2456/***/ (function(module, exports) { 2457 2458 // 7.2.1 RequireObjectCoercible(argument) 2459 module.exports = function(it){ 2460 if(it == undefined)throw TypeError("Can't call method on " + it); 2461 return it; 2462 }; 2463 2464/***/ }), 2465/* 10 */ 2466/***/ (function(module, exports, __webpack_require__) { 2467 2468 'use strict'; 2469 var LIBRARY = __webpack_require__(11) 2470 , $export = __webpack_require__(12) 2471 , redefine = __webpack_require__(27) 2472 , hide = __webpack_require__(17) 2473 , has = __webpack_require__(28) 2474 , Iterators = __webpack_require__(29) 2475 , $iterCreate = __webpack_require__(30) 2476 , setToStringTag = __webpack_require__(46) 2477 , getPrototypeOf = __webpack_require__(48) 2478 , ITERATOR = __webpack_require__(47)('iterator') 2479 , BUGGY = !([].keys && 'next' in [].keys()) // Safari has buggy iterators w/o `next` 2480 , FF_ITERATOR = '@@iterator' 2481 , KEYS = 'keys' 2482 , VALUES = 'values'; 2483 2484 var returnThis = function(){ return this; }; 2485 2486 module.exports = function(Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED){ 2487 $iterCreate(Constructor, NAME, next); 2488 var getMethod = function(kind){ 2489 if(!BUGGY && kind in proto)return proto[kind]; 2490 switch(kind){ 2491 case KEYS: return function keys(){ return new Constructor(this, kind); }; 2492 case VALUES: return function values(){ return new Constructor(this, kind); }; 2493 } return function entries(){ return new Constructor(this, kind); }; 2494 }; 2495 var TAG = NAME + ' Iterator' 2496 , DEF_VALUES = DEFAULT == VALUES 2497 , VALUES_BUG = false 2498 , proto = Base.prototype 2499 , $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT] 2500 , $default = $native || getMethod(DEFAULT) 2501 , $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined 2502 , $anyNative = NAME == 'Array' ? proto.entries || $native : $native 2503 , methods, key, IteratorPrototype; 2504 // Fix native 2505 if($anyNative){ 2506 IteratorPrototype = getPrototypeOf($anyNative.call(new Base)); 2507 if(IteratorPrototype !== Object.prototype){ 2508 // Set @@toStringTag to native iterators 2509 setToStringTag(IteratorPrototype, TAG, true); 2510 // fix for some old engines 2511 if(!LIBRARY && !has(IteratorPrototype, ITERATOR))hide(IteratorPrototype, ITERATOR, returnThis); 2512 } 2513 } 2514 // fix Array#{values, @@iterator}.name in V8 / FF 2515 if(DEF_VALUES && $native && $native.name !== VALUES){ 2516 VALUES_BUG = true; 2517 $default = function values(){ return $native.call(this); }; 2518 } 2519 // Define iterator 2520 if((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])){ 2521 hide(proto, ITERATOR, $default); 2522 } 2523 // Plug for library 2524 Iterators[NAME] = $default; 2525 Iterators[TAG] = returnThis; 2526 if(DEFAULT){ 2527 methods = { 2528 values: DEF_VALUES ? $default : getMethod(VALUES), 2529 keys: IS_SET ? $default : getMethod(KEYS), 2530 entries: $entries 2531 }; 2532 if(FORCED)for(key in methods){ 2533 if(!(key in proto))redefine(proto, key, methods[key]); 2534 } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods); 2535 } 2536 return methods; 2537 }; 2538 2539/***/ }), 2540/* 11 */ 2541/***/ (function(module, exports) { 2542 2543 module.exports = true; 2544 2545/***/ }), 2546/* 12 */ 2547/***/ (function(module, exports, __webpack_require__) { 2548 2549 var global = __webpack_require__(13) 2550 , core = __webpack_require__(14) 2551 , ctx = __webpack_require__(15) 2552 , hide = __webpack_require__(17) 2553 , PROTOTYPE = 'prototype'; 2554 2555 var $export = function(type, name, source){ 2556 var IS_FORCED = type & $export.F 2557 , IS_GLOBAL = type & $export.G 2558 , IS_STATIC = type & $export.S 2559 , IS_PROTO = type & $export.P 2560 , IS_BIND = type & $export.B 2561 , IS_WRAP = type & $export.W 2562 , exports = IS_GLOBAL ? core : core[name] || (core[name] = {}) 2563 , expProto = exports[PROTOTYPE] 2564 , target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE] 2565 , key, own, out; 2566 if(IS_GLOBAL)source = name; 2567 for(key in source){ 2568 // contains in native 2569 own = !IS_FORCED && target && target[key] !== undefined; 2570 if(own && key in exports)continue; 2571 // export native or passed 2572 out = own ? target[key] : source[key]; 2573 // prevent global pollution for namespaces 2574 exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key] 2575 // bind timers to global for call from export context 2576 : IS_BIND && own ? ctx(out, global) 2577 // wrap global constructors for prevent change them in library 2578 : IS_WRAP && target[key] == out ? (function(C){ 2579 var F = function(a, b, c){ 2580 if(this instanceof C){ 2581 switch(arguments.length){ 2582 case 0: return new C; 2583 case 1: return new C(a); 2584 case 2: return new C(a, b); 2585 } return new C(a, b, c); 2586 } return C.apply(this, arguments); 2587 }; 2588 F[PROTOTYPE] = C[PROTOTYPE]; 2589 return F; 2590 // make static versions for prototype methods 2591 })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out; 2592 // export proto methods to core.%CONSTRUCTOR%.methods.%NAME% 2593 if(IS_PROTO){ 2594 (exports.virtual || (exports.virtual = {}))[key] = out; 2595 // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME% 2596 if(type & $export.R && expProto && !expProto[key])hide(expProto, key, out); 2597 } 2598 } 2599 }; 2600 // type bitmap 2601 $export.F = 1; // forced 2602 $export.G = 2; // global 2603 $export.S = 4; // static 2604 $export.P = 8; // proto 2605 $export.B = 16; // bind 2606 $export.W = 32; // wrap 2607 $export.U = 64; // safe 2608 $export.R = 128; // real proto method for `library` 2609 module.exports = $export; 2610 2611/***/ }), 2612/* 13 */ 2613/***/ (function(module, exports) { 2614 2615 // https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 2616 var global = module.exports = typeof window != 'undefined' && window.Math == Math 2617 ? window : typeof self != 'undefined' && self.Math == Math ? self : Function('return this')(); 2618 if(typeof __g == 'number')__g = global; // eslint-disable-line no-undef 2619 2620/***/ }), 2621/* 14 */ 2622/***/ (function(module, exports) { 2623 2624 var core = module.exports = {version: '2.4.0'}; 2625 if(typeof __e == 'number')__e = core; // eslint-disable-line no-undef 2626 2627/***/ }), 2628/* 15 */ 2629/***/ (function(module, exports, __webpack_require__) { 2630 2631 // optional / simple context binding 2632 var aFunction = __webpack_require__(16); 2633 module.exports = function(fn, that, length){ 2634 aFunction(fn); 2635 if(that === undefined)return fn; 2636 switch(length){ 2637 case 1: return function(a){ 2638 return fn.call(that, a); 2639 }; 2640 case 2: return function(a, b){ 2641 return fn.call(that, a, b); 2642 }; 2643 case 3: return function(a, b, c){ 2644 return fn.call(that, a, b, c); 2645 }; 2646 } 2647 return function(/* ...args */){ 2648 return fn.apply(that, arguments); 2649 }; 2650 }; 2651 2652/***/ }), 2653/* 16 */ 2654/***/ (function(module, exports) { 2655 2656 module.exports = function(it){ 2657 if(typeof it != 'function')throw TypeError(it + ' is not a function!'); 2658 return it; 2659 }; 2660 2661/***/ }), 2662/* 17 */ 2663/***/ (function(module, exports, __webpack_require__) { 2664 2665 var dP = __webpack_require__(18) 2666 , createDesc = __webpack_require__(26); 2667 module.exports = __webpack_require__(22) ? function(object, key, value){ 2668 return dP.f(object, key, createDesc(1, value)); 2669 } : function(object, key, value){ 2670 object[key] = value; 2671 return object; 2672 }; 2673 2674/***/ }), 2675/* 18 */ 2676/***/ (function(module, exports, __webpack_require__) { 2677 2678 var anObject = __webpack_require__(19) 2679 , IE8_DOM_DEFINE = __webpack_require__(21) 2680 , toPrimitive = __webpack_require__(25) 2681 , dP = Object.defineProperty; 2682 2683 exports.f = __webpack_require__(22) ? Object.defineProperty : function defineProperty(O, P, Attributes){ 2684 anObject(O); 2685 P = toPrimitive(P, true); 2686 anObject(Attributes); 2687 if(IE8_DOM_DEFINE)try { 2688 return dP(O, P, Attributes); 2689 } catch(e){ /* empty */ } 2690 if('get' in Attributes || 'set' in Attributes)throw TypeError('Accessors not supported!'); 2691 if('value' in Attributes)O[P] = Attributes.value; 2692 return O; 2693 }; 2694 2695/***/ }), 2696/* 19 */ 2697/***/ (function(module, exports, __webpack_require__) { 2698 2699 var isObject = __webpack_require__(20); 2700 module.exports = function(it){ 2701 if(!isObject(it))throw TypeError(it + ' is not an object!'); 2702 return it; 2703 }; 2704 2705/***/ }), 2706/* 20 */ 2707/***/ (function(module, exports) { 2708 2709 module.exports = function(it){ 2710 return typeof it === 'object' ? it !== null : typeof it === 'function'; 2711 }; 2712 2713/***/ }), 2714/* 21 */ 2715/***/ (function(module, exports, __webpack_require__) { 2716 2717 module.exports = !__webpack_require__(22) && !__webpack_require__(23)(function(){ 2718 return Object.defineProperty(__webpack_require__(24)('div'), 'a', {get: function(){ return 7; }}).a != 7; 2719 }); 2720 2721/***/ }), 2722/* 22 */ 2723/***/ (function(module, exports, __webpack_require__) { 2724 2725 // Thank's IE8 for his funny defineProperty 2726 module.exports = !__webpack_require__(23)(function(){ 2727 return Object.defineProperty({}, 'a', {get: function(){ return 7; }}).a != 7; 2728 }); 2729 2730/***/ }), 2731/* 23 */ 2732/***/ (function(module, exports) { 2733 2734 module.exports = function(exec){ 2735 try { 2736 return !!exec(); 2737 } catch(e){ 2738 return true; 2739 } 2740 }; 2741 2742/***/ }), 2743/* 24 */ 2744/***/ (function(module, exports, __webpack_require__) { 2745 2746 var isObject = __webpack_require__(20) 2747 , document = __webpack_require__(13).document 2748 // in old IE typeof document.createElement is 'object' 2749 , is = isObject(document) && isObject(document.createElement); 2750 module.exports = function(it){ 2751 return is ? document.createElement(it) : {}; 2752 }; 2753 2754/***/ }), 2755/* 25 */ 2756/***/ (function(module, exports, __webpack_require__) { 2757 2758 // 7.1.1 ToPrimitive(input [, PreferredType]) 2759 var isObject = __webpack_require__(20); 2760 // instead of the ES6 spec version, we didn't implement @@toPrimitive case 2761 // and the second argument - flag - preferred type is a string 2762 module.exports = function(it, S){ 2763 if(!isObject(it))return it; 2764 var fn, val; 2765 if(S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val; 2766 if(typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it)))return val; 2767 if(!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it)))return val; 2768 throw TypeError("Can't convert object to primitive value"); 2769 }; 2770 2771/***/ }), 2772/* 26 */ 2773/***/ (function(module, exports) { 2774 2775 module.exports = function(bitmap, value){ 2776 return { 2777 enumerable : !(bitmap & 1), 2778 configurable: !(bitmap & 2), 2779 writable : !(bitmap & 4), 2780 value : value 2781 }; 2782 }; 2783 2784/***/ }), 2785/* 27 */ 2786/***/ (function(module, exports, __webpack_require__) { 2787 2788 module.exports = __webpack_require__(17); 2789 2790/***/ }), 2791/* 28 */ 2792/***/ (function(module, exports) { 2793 2794 var hasOwnProperty = {}.hasOwnProperty; 2795 module.exports = function(it, key){ 2796 return hasOwnProperty.call(it, key); 2797 }; 2798 2799/***/ }), 2800/* 29 */ 2801/***/ (function(module, exports) { 2802 2803 module.exports = {}; 2804 2805/***/ }), 2806/* 30 */ 2807/***/ (function(module, exports, __webpack_require__) { 2808 2809 'use strict'; 2810 var create = __webpack_require__(31) 2811 , descriptor = __webpack_require__(26) 2812 , setToStringTag = __webpack_require__(46) 2813 , IteratorPrototype = {}; 2814 2815 // 25.1.2.1.1 %IteratorPrototype%[@@iterator]() 2816 __webpack_require__(17)(IteratorPrototype, __webpack_require__(47)('iterator'), function(){ return this; }); 2817 2818 module.exports = function(Constructor, NAME, next){ 2819 Constructor.prototype = create(IteratorPrototype, {next: descriptor(1, next)}); 2820 setToStringTag(Constructor, NAME + ' Iterator'); 2821 }; 2822 2823/***/ }), 2824/* 31 */ 2825/***/ (function(module, exports, __webpack_require__) { 2826 2827 // 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties]) 2828 var anObject = __webpack_require__(19) 2829 , dPs = __webpack_require__(32) 2830 , enumBugKeys = __webpack_require__(44) 2831 , IE_PROTO = __webpack_require__(41)('IE_PROTO') 2832 , Empty = function(){ /* empty */ } 2833 , PROTOTYPE = 'prototype'; 2834 2835 // Create object with fake `null` prototype: use iframe Object with cleared prototype 2836 var createDict = function(){ 2837 // Thrash, waste and sodomy: IE GC bug 2838 var iframe = __webpack_require__(24)('iframe') 2839 , i = enumBugKeys.length 2840 , lt = '<' 2841 , gt = '>' 2842 , iframeDocument; 2843 iframe.style.display = 'none'; 2844 __webpack_require__(45).appendChild(iframe); 2845 iframe.src = 'javascript:'; // eslint-disable-line no-script-url 2846 // createDict = iframe.contentWindow.Object; 2847 // html.removeChild(iframe); 2848 iframeDocument = iframe.contentWindow.document; 2849 iframeDocument.open(); 2850 iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt); 2851 iframeDocument.close(); 2852 createDict = iframeDocument.F; 2853 while(i--)delete createDict[PROTOTYPE][enumBugKeys[i]]; 2854 return createDict(); 2855 }; 2856 2857 module.exports = Object.create || function create(O, Properties){ 2858 var result; 2859 if(O !== null){ 2860 Empty[PROTOTYPE] = anObject(O); 2861 result = new Empty; 2862 Empty[PROTOTYPE] = null; 2863 // add "__proto__" for Object.getPrototypeOf polyfill 2864 result[IE_PROTO] = O; 2865 } else result = createDict(); 2866 return Properties === undefined ? result : dPs(result, Properties); 2867 }; 2868 2869 2870/***/ }), 2871/* 32 */ 2872/***/ (function(module, exports, __webpack_require__) { 2873 2874 var dP = __webpack_require__(18) 2875 , anObject = __webpack_require__(19) 2876 , getKeys = __webpack_require__(33); 2877 2878 module.exports = __webpack_require__(22) ? Object.defineProperties : function defineProperties(O, Properties){ 2879 anObject(O); 2880 var keys = getKeys(Properties) 2881 , length = keys.length 2882 , i = 0 2883 , P; 2884 while(length > i)dP.f(O, P = keys[i++], Properties[P]); 2885 return O; 2886 }; 2887 2888/***/ }), 2889/* 33 */ 2890/***/ (function(module, exports, __webpack_require__) { 2891 2892 // 19.1.2.14 / 15.2.3.14 Object.keys(O) 2893 var $keys = __webpack_require__(34) 2894 , enumBugKeys = __webpack_require__(44); 2895 2896 module.exports = Object.keys || function keys(O){ 2897 return $keys(O, enumBugKeys); 2898 }; 2899 2900/***/ }), 2901/* 34 */ 2902/***/ (function(module, exports, __webpack_require__) { 2903 2904 var has = __webpack_require__(28) 2905 , toIObject = __webpack_require__(35) 2906 , arrayIndexOf = __webpack_require__(38)(false) 2907 , IE_PROTO = __webpack_require__(41)('IE_PROTO'); 2908 2909 module.exports = function(object, names){ 2910 var O = toIObject(object) 2911 , i = 0 2912 , result = [] 2913 , key; 2914 for(key in O)if(key != IE_PROTO)has(O, key) && result.push(key); 2915 // Don't enum bug & hidden keys 2916 while(names.length > i)if(has(O, key = names[i++])){ 2917 ~arrayIndexOf(result, key) || result.push(key); 2918 } 2919 return result; 2920 }; 2921 2922/***/ }), 2923/* 35 */ 2924/***/ (function(module, exports, __webpack_require__) { 2925 2926 // to indexed object, toObject with fallback for non-array-like ES3 strings 2927 var IObject = __webpack_require__(36) 2928 , defined = __webpack_require__(9); 2929 module.exports = function(it){ 2930 return IObject(defined(it)); 2931 }; 2932 2933/***/ }), 2934/* 36 */ 2935/***/ (function(module, exports, __webpack_require__) { 2936 2937 // fallback for non-array-like ES3 and non-enumerable old V8 strings 2938 var cof = __webpack_require__(37); 2939 module.exports = Object('z').propertyIsEnumerable(0) ? Object : function(it){ 2940 return cof(it) == 'String' ? it.split('') : Object(it); 2941 }; 2942 2943/***/ }), 2944/* 37 */ 2945/***/ (function(module, exports) { 2946 2947 var toString = {}.toString; 2948 2949 module.exports = function(it){ 2950 return toString.call(it).slice(8, -1); 2951 }; 2952 2953/***/ }), 2954/* 38 */ 2955/***/ (function(module, exports, __webpack_require__) { 2956 2957 // false -> Array#indexOf 2958 // true -> Array#includes 2959 var toIObject = __webpack_require__(35) 2960 , toLength = __webpack_require__(39) 2961 , toIndex = __webpack_require__(40); 2962 module.exports = function(IS_INCLUDES){ 2963 return function($this, el, fromIndex){ 2964 var O = toIObject($this) 2965 , length = toLength(O.length) 2966 , index = toIndex(fromIndex, length) 2967 , value; 2968 // Array#includes uses SameValueZero equality algorithm 2969 if(IS_INCLUDES && el != el)while(length > index){ 2970 value = O[index++]; 2971 if(value != value)return true; 2972 // Array#toIndex ignores holes, Array#includes - not 2973 } else for(;length > index; index++)if(IS_INCLUDES || index in O){ 2974 if(O[index] === el)return IS_INCLUDES || index || 0; 2975 } return !IS_INCLUDES && -1; 2976 }; 2977 }; 2978 2979/***/ }), 2980/* 39 */ 2981/***/ (function(module, exports, __webpack_require__) { 2982 2983 // 7.1.15 ToLength 2984 var toInteger = __webpack_require__(8) 2985 , min = Math.min; 2986 module.exports = function(it){ 2987 return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991 2988 }; 2989 2990/***/ }), 2991/* 40 */ 2992/***/ (function(module, exports, __webpack_require__) { 2993 2994 var toInteger = __webpack_require__(8) 2995 , max = Math.max 2996 , min = Math.min; 2997 module.exports = function(index, length){ 2998 index = toInteger(index); 2999 return index < 0 ? max(index + length, 0) : min(index, length); 3000 }; 3001 3002/***/ }), 3003/* 41 */ 3004/***/ (function(module, exports, __webpack_require__) { 3005 3006 var shared = __webpack_require__(42)('keys') 3007 , uid = __webpack_require__(43); 3008 module.exports = function(key){ 3009 return shared[key] || (shared[key] = uid(key)); 3010 }; 3011 3012/***/ }), 3013/* 42 */ 3014/***/ (function(module, exports, __webpack_require__) { 3015 3016 var global = __webpack_require__(13) 3017 , SHARED = '__core-js_shared__' 3018 , store = global[SHARED] || (global[SHARED] = {}); 3019 module.exports = function(key){ 3020 return store[key] || (store[key] = {}); 3021 }; 3022 3023/***/ }), 3024/* 43 */ 3025/***/ (function(module, exports) { 3026 3027 var id = 0 3028 , px = Math.random(); 3029 module.exports = function(key){ 3030 return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36)); 3031 }; 3032 3033/***/ }), 3034/* 44 */ 3035/***/ (function(module, exports) { 3036 3037 // IE 8- don't enum bug keys 3038 module.exports = ( 3039 'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf' 3040 ).split(','); 3041 3042/***/ }), 3043/* 45 */ 3044/***/ (function(module, exports, __webpack_require__) { 3045 3046 module.exports = __webpack_require__(13).document && document.documentElement; 3047 3048/***/ }), 3049/* 46 */ 3050/***/ (function(module, exports, __webpack_require__) { 3051 3052 var def = __webpack_require__(18).f 3053 , has = __webpack_require__(28) 3054 , TAG = __webpack_require__(47)('toStringTag'); 3055 3056 module.exports = function(it, tag, stat){ 3057 if(it && !has(it = stat ? it : it.prototype, TAG))def(it, TAG, {configurable: true, value: tag}); 3058 }; 3059 3060/***/ }), 3061/* 47 */ 3062/***/ (function(module, exports, __webpack_require__) { 3063 3064 var store = __webpack_require__(42)('wks') 3065 , uid = __webpack_require__(43) 3066 , Symbol = __webpack_require__(13).Symbol 3067 , USE_SYMBOL = typeof Symbol == 'function'; 3068 3069 var $exports = module.exports = function(name){ 3070 return store[name] || (store[name] = 3071 USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name)); 3072 }; 3073 3074 $exports.store = store; 3075 3076/***/ }), 3077/* 48 */ 3078/***/ (function(module, exports, __webpack_require__) { 3079 3080 // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O) 3081 var has = __webpack_require__(28) 3082 , toObject = __webpack_require__(49) 3083 , IE_PROTO = __webpack_require__(41)('IE_PROTO') 3084 , ObjectProto = Object.prototype; 3085 3086 module.exports = Object.getPrototypeOf || function(O){ 3087 O = toObject(O); 3088 if(has(O, IE_PROTO))return O[IE_PROTO]; 3089 if(typeof O.constructor == 'function' && O instanceof O.constructor){ 3090 return O.constructor.prototype; 3091 } return O instanceof Object ? ObjectProto : null; 3092 }; 3093 3094/***/ }), 3095/* 49 */ 3096/***/ (function(module, exports, __webpack_require__) { 3097 3098 // 7.1.13 ToObject(argument) 3099 var defined = __webpack_require__(9); 3100 module.exports = function(it){ 3101 return Object(defined(it)); 3102 }; 3103 3104/***/ }), 3105/* 50 */ 3106/***/ (function(module, exports, __webpack_require__) { 3107 3108 __webpack_require__(51); 3109 var global = __webpack_require__(13) 3110 , hide = __webpack_require__(17) 3111 , Iterators = __webpack_require__(29) 3112 , TO_STRING_TAG = __webpack_require__(47)('toStringTag'); 3113 3114 for(var collections = ['NodeList', 'DOMTokenList', 'MediaList', 'StyleSheetList', 'CSSRuleList'], i = 0; i < 5; i++){ 3115 var NAME = collections[i] 3116 , Collection = global[NAME] 3117 , proto = Collection && Collection.prototype; 3118 if(proto && !proto[TO_STRING_TAG])hide(proto, TO_STRING_TAG, NAME); 3119 Iterators[NAME] = Iterators.Array; 3120 } 3121 3122/***/ }), 3123/* 51 */ 3124/***/ (function(module, exports, __webpack_require__) { 3125 3126 'use strict'; 3127 var addToUnscopables = __webpack_require__(52) 3128 , step = __webpack_require__(53) 3129 , Iterators = __webpack_require__(29) 3130 , toIObject = __webpack_require__(35); 3131 3132 // 22.1.3.4 Array.prototype.entries() 3133 // 22.1.3.13 Array.prototype.keys() 3134 // 22.1.3.29 Array.prototype.values() 3135 // 22.1.3.30 Array.prototype[@@iterator]() 3136 module.exports = __webpack_require__(10)(Array, 'Array', function(iterated, kind){ 3137 this._t = toIObject(iterated); // target 3138 this._i = 0; // next index 3139 this._k = kind; // kind 3140 // 22.1.5.2.1 %ArrayIteratorPrototype%.next() 3141 }, function(){ 3142 var O = this._t 3143 , kind = this._k 3144 , index = this._i++; 3145 if(!O || index >= O.length){ 3146 this._t = undefined; 3147 return step(1); 3148 } 3149 if(kind == 'keys' )return step(0, index); 3150 if(kind == 'values')return step(0, O[index]); 3151 return step(0, [index, O[index]]); 3152 }, 'values'); 3153 3154 // argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7) 3155 Iterators.Arguments = Iterators.Array; 3156 3157 addToUnscopables('keys'); 3158 addToUnscopables('values'); 3159 addToUnscopables('entries'); 3160 3161/***/ }), 3162/* 52 */ 3163/***/ (function(module, exports) { 3164 3165 module.exports = function(){ /* empty */ }; 3166 3167/***/ }), 3168/* 53 */ 3169/***/ (function(module, exports) { 3170 3171 module.exports = function(done, value){ 3172 return {value: value, done: !!done}; 3173 }; 3174 3175/***/ }), 3176/* 54 */ 3177/***/ (function(module, exports, __webpack_require__) { 3178 3179
3179'use strict'; 3180 var LIBRARY = __webpack_require__(11) 3181 , global = __webpack_require__(13) 3182 , ctx = __webpack_require__(15) 3183 , classof = __webpack_require__(55) 3184 , $export = __webpack_require__(12) 3185 , isObject = __webpack_require__(20) 3186 , aFunction = __webpack_require__(16) 3187 , anInstance = __webpack_require__(56) 3188 , forOf = __webpack_require__(57) 3189 , speciesConstructor = __webpack_require__(61) 3190 , task = __webpack_require__(62).set 3191 , microtask = __webpack_require__(64)() 3192 , PROMISE = 'Promise' 3193 , TypeError = global.TypeError 3194 , process = global.process 3195 , $Promise = global[PROMISE] 3196 , process = global.process 3197 , isNode = classof(process) == 'process' 3198 , empty = function(){ /* empty */ } 3199 , Internal, GenericPromiseCapability, Wrapper; 3200 3201 var USE_NATIVE = !!function(){ 3202 try { 3203 // correct subclassing with @@species support 3204 var promise = $Promise.resolve(1) 3205 , FakePromise = (promise.constructor = {})[__webpack_require__(47)('species')] = function(exec){ exec(empty, empty); }; 3206 // unhandled rejections tracking support, NodeJS Promise without it fails @@species test 3207 return (isNode || typeof PromiseRejectionEvent == 'function') && promise.then(empty) instanceof FakePromise; 3208 } catch(e){ /* empty */ } 3209 }(); 3210 3211 // helpers 3212 var sameConstructor = function(a, b){ 3213 // with library wrapper special case 3214 return a === b || a === $Promise && b === Wrapper; 3215 }; 3216 var isThenable = function(it){ 3217 var then; 3218 return isObject(it) && typeof (then = it.then) == 'function' ? then : false; 3219 }; 3220 var newPromiseCapability = function(C){ 3221 return sameConstructor($Promise, C) 3222 ? new PromiseCapability(C) 3223 : new GenericPromiseCapability(C); 3224 }; 3225 var PromiseCapability = GenericPromiseCapability = function(C){ 3226 var resolve, reject; 3227 this.promise = new C(function($$resolve, $$reject){ 3228 if(resolve !== undefined || reject !== undefined)throw TypeError('Bad Promise constructor'); 3229 resolve = $$resolve; 3230 reject = $$reject; 3231 }); 3232 this.resolve = aFunction(resolve); 3233 this.reject = aFunction(reject); 3234 }; 3235 var perform = function(exec){ 3236 try { 3237 exec(); 3238 } catch(e){ 3239 return {error: e}; 3240 } 3241 }; 3242 var notify = function(promise, isReject){ 3243 if(promise._n)return; 3244 promise._n = true; 3245 var chain = promise._c; 3246 microtask(function(){ 3247 var value = promise._v 3248 , ok = promise._s == 1 3249 , i = 0; 3250 var run = function(reaction){ 3251 var handler = ok ? reaction.ok : reaction.fail 3252 , resolve = reaction.resolve 3253 , reject = reaction.reject 3254 , domain = reaction.domain 3255 , result, then; 3256 try { 3257 if(handler){ 3258 if(!ok){ 3259 if(promise._h == 2)onHandleUnhandled(promise); 3260 promise._h = 1; 3261 } 3262 if(handler === true)result = value; 3263 else { 3264 if(domain)domain.enter(); 3265 result = handler(value); 3266 if(domain)domain.exit(); 3267 } 3268 if(result === reaction.promise){ 3269 reject(TypeError('Promise-chain cycle')); 3270 } else if(then = isThenable(result)){ 3271 then.call(result, resolve, reject); 3272 } else resolve(result); 3273 } else reject(value); 3274 } catch(e){ 3275 reject(e); 3276 } 3277 }; 3278 while(chain.length > i)run(chain[i++]); // variable length - can't use forEach 3279 promise._c = []; 3280 promise._n = false; 3281 if(isReject && !promise._h)onUnhandled(promise); 3282 }); 3283 }; 3284 var onUnhandled = function(promise){ 3285 task.call(global, function(){ 3286 var value = promise._v 3287 , abrupt, handler, console; 3288 if(isUnhandled(promise)){ 3289 abrupt = perform(function(){ 3290 if(isNode){ 3291 process.emit('unhandledRejection', value, promise); 3292 } else if(handler = global.onunhandledrejection){ 3293 handler({promise: promise, reason: value}); 3294 } else if((console = global.console) && console.error){ 3295 console.error('Unhandled promise rejection', value); 3296 } 3297 }); 3298 // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should 3299 promise._h = isNode || isUnhandled(promise) ? 2 : 1; 3300 } promise._a = undefined; 3301 if(abrupt)throw abrupt.error; 3302 }); 3303 }; 3304 var isUnhandled = function(promise){ 3305 if(promise._h == 1)return false;
vendor: 4,875 bytes, lines 3306-3449
3306 var chain = promise._a || promise._c 3307 , i = 0 3308 , reaction; 3309 while(chain.length > i){ 3310 reaction = chain[i++]; 3311 if(reaction.fail || !isUnhandled(reaction.promise))return false; 3312 } return true; 3313 }; 3314 var onHandleUnhandled = function(promise){ 3315 task.call(global, function(){ 3316 var handler; 3317 if(isNode){ 3318 process.emit('rejectionHandled', promise); 3319 } else if(handler = global.onrejectionhandled){ 3320 handler({promise: promise, reason: promise._v}); 3321 } 3322 }); 3323 }; 3324 var $reject = function(value){ 3325 var promise = this; 3326 if(promise._d)return; 3327 promise._d = true; 3328 promise = promise._w || promise; // unwrap 3329 promise._v = value; 3330 promise._s = 2; 3331 if(!promise._a)promise._a = promise._c.slice(); 3332 notify(promise, true); 3333 }; 3334 var $resolve = function(value){ 3335 var promise = this 3336 , then; 3337 if(promise._d)return; 3338 promise._d = true; 3339 promise = promise._w || promise; // unwrap 3340 try { 3341 if(promise === value)throw TypeError("Promise can't be resolved itself"); 3342 if(then = isThenable(value)){ 3343 microtask(function(){ 3344 var wrapper = {_w: promise, _d: false}; // wrap 3345 try { 3346 then.call(value, ctx($resolve, wrapper, 1), ctx($reject, wrapper, 1)); 3347 } catch(e){ 3348 $reject.call(wrapper, e); 3349 } 3350 }); 3351 } else { 3352 promise._v = value; 3353 promise._s = 1; 3354 notify(promise, false); 3355 } 3356 } catch(e){ 3357 $reject.call({_w: promise, _d: false}, e); // wrap 3358 } 3359 }; 3360 3361 // constructor polyfill 3362 if(!USE_NATIVE){ 3363 // 25.4.3.1 Promise(executor) 3364 $Promise = function Promise(executor){ 3365 anInstance(this, $Promise, PROMISE, '_h'); 3366 aFunction(executor); 3367 Internal.call(this); 3368 try { 3369 executor(ctx($resolve, this, 1), ctx($reject, this, 1)); 3370 } catch(err){ 3371 $reject.call(this, err); 3372 } 3373 }; 3374 Internal = function Promise(executor){ 3375 this._c = []; // <- awaiting reactions 3376 this._a = undefined; // <- checked in isUnhandled reactions 3377 this._s = 0; // <- state 3378 this._d = false; // <- done 3379 this._v = undefined; // <- value 3380 this._h = 0; // <- rejection state, 0 - default, 1 - handled, 2 - unhandled 3381 this._n = false; // <- notify 3382 }; 3383 Internal.prototype = __webpack_require__(65)($Promise.prototype, { 3384 // 25.4.5.3 Promise.prototype.then(onFulfilled, onRejected) 3385 then: function then(onFulfilled, onRejected){ 3386 var reaction = newPromiseCapability(speciesConstructor(this, $Promise)); 3387 reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true; 3388 reaction.fail = typeof onRejected == 'function' && onRejected; 3389 reaction.domain = isNode ? process.domain : undefined; 3390 this._c.push(reaction); 3391 if(this._a)this._a.push(reaction); 3392 if(this._s)notify(this, false); 3393 return reaction.promise; 3394 }, 3395 // 25.4.5.1 Promise.prototype.catch(onRejected) 3396 'catch': function(onRejected){ 3397 return this.then(undefined, onRejected); 3398 } 3399 }); 3400 PromiseCapability = function(){ 3401 var promise = new Internal; 3402 this.promise = promise; 3403 this.resolve = ctx($resolve, promise, 1); 3404 this.reject = ctx($reject, promise, 1); 3405 }; 3406 } 3407 3408 $export($export.G + $export.W + $export.F * !USE_NATIVE, {Promise: $Promise}); 3409 __webpack_require__(46)($Promise, PROMISE); 3410 __webpack_require__(66)(PROMISE); 3411 Wrapper = __webpack_require__(14)[PROMISE]; 3412 3413 // statics 3414 $export($export.S + $export.F * !USE_NATIVE, PROMISE, { 3415 // 25.4.4.5 Promise.reject(r) 3416 reject: function reject(r){ 3417 var capability = newPromiseCapability(this) 3418 , $$reject = capability.reject; 3419 $$reject(r); 3420 return capability.promise; 3421 } 3422 }); 3423 $export($export.S + $export.F * (LIBRARY || !USE_NATIVE), PROMISE, { 3424 // 25.4.4.6 Promise.resolve(x) 3425 resolve: function resolve(x){ 3426 // instanceof instead of internal slot check because we should fix it without replacement native Promise core 3427 if(x instanceof $Promise && sameConstructor(x.constructor, this))return x; 3428 var capability = newPromiseCapability(this) 3429 , $$resolve = capability.resolve; 3430 $$resolve(x); 3431 return capability.promise; 3432 } 3433 }); 3434 $export($export.S + $export.F * !(USE_NATIVE && __webpack_require__(67)(function(iter){ 3435 $Promise.all(iter)['catch'](empty); 3436 })), PROMISE, { 3437 // 25.4.4.1 Promise.all(iterable) 3438 all: function all(iterable){ 3439 var C = this 3440 , capability = newPromiseCapability(C) 3441 , resolve = capability.resolve 3442 , reject = capability.reject; 3443 var abrupt = perform(function(){ 3444 var values = [] 3445 , index = 0 3446 , remaining = 1; 3447 forOf(iterable, false, function(promise){ 3448 var $index = index++ 3449 , alreadyCalled = false;
vendor: 5,384 bytes, lines 3450-3614
3450 values.push(undefined); 3451 remaining++; 3452 C.resolve(promise).then(function(value){ 3453 if(alreadyCalled)return; 3454 alreadyCalled = true; 3455 values[$index] = value; 3456 --remaining || resolve(values); 3457 }, reject); 3458 }); 3459 --remaining || resolve(values); 3460 }); 3461 if(abrupt)reject(abrupt.error); 3462 return capability.promise; 3463 }, 3464 // 25.4.4.4 Promise.race(iterable) 3465 race: function race(iterable){ 3466 var C = this 3467 , capability = newPromiseCapability(C) 3468 , reject = capability.reject; 3469 var abrupt = perform(function(){ 3470 forOf(iterable, false, function(promise){ 3471 C.resolve(promise).then(capability.resolve, reject); 3472 }); 3473 }); 3474 if(abrupt)reject(abrupt.error); 3475 return capability.promise; 3476 } 3477 }); 3478 3479/***/ }), 3480/* 55 */ 3481/***/ (function(module, exports, __webpack_require__) { 3482 3483 // getting tag from 19.1.3.6 Object.prototype.toString() 3484 var cof = __webpack_require__(37) 3485 , TAG = __webpack_require__(47)('toStringTag') 3486 // ES3 wrong here 3487 , ARG = cof(function(){ return arguments; }()) == 'Arguments'; 3488 3489 // fallback for IE11 Script Access Denied error 3490 var tryGet = function(it, key){ 3491 try { 3492 return it[key]; 3493 } catch(e){ /* empty */ } 3494 }; 3495 3496 module.exports = function(it){ 3497 var O, T, B; 3498 return it === undefined ? 'Undefined' : it === null ? 'Null' 3499 // @@toStringTag case 3500 : typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T 3501 // builtinTag case 3502 : ARG ? cof(O) 3503 // ES3 arguments fallback 3504 : (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B; 3505 }; 3506 3507/***/ }), 3508/* 56 */ 3509/***/ (function(module, exports) { 3510 3511 module.exports = function(it, Constructor, name, forbiddenField){ 3512 if(!(it instanceof Constructor) || (forbiddenField !== undefined && forbiddenField in it)){ 3513 throw TypeError(name + ': incorrect invocation!'); 3514 } return it; 3515 }; 3516 3517/***/ }), 3518/* 57 */ 3519/***/ (function(module, exports, __webpack_require__) { 3520 3521 var ctx = __webpack_require__(15) 3522 , call = __webpack_require__(58) 3523 , isArrayIter = __webpack_require__(59) 3524 , anObject = __webpack_require__(19) 3525 , toLength = __webpack_require__(39) 3526 , getIterFn = __webpack_require__(60) 3527 , BREAK = {} 3528 , RETURN = {}; 3529 var exports = module.exports = function(iterable, entries, fn, that, ITERATOR){ 3530 var iterFn = ITERATOR ? function(){ return iterable; } : getIterFn(iterable) 3531 , f = ctx(fn, that, entries ? 2 : 1) 3532 , index = 0 3533 , length, step, iterator, result; 3534 if(typeof iterFn != 'function')throw TypeError(iterable + ' is not iterable!'); 3535 // fast case for arrays with default iterator 3536 if(isArrayIter(iterFn))for(length = toLength(iterable.length); length > index; index++){ 3537 result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]); 3538 if(result === BREAK || result === RETURN)return result; 3539 } else for(iterator = iterFn.call(iterable); !(step = iterator.next()).done; ){ 3540 result = call(iterator, f, step.value, entries); 3541 if(result === BREAK || result === RETURN)return result; 3542 } 3543 }; 3544 exports.BREAK = BREAK; 3545 exports.RETURN = RETURN; 3546 3547/***/ }), 3548/* 58 */ 3549/***/ (function(module, exports, __webpack_require__) { 3550 3551 // call something on iterator step with safe closing on error 3552 var anObject = __webpack_require__(19); 3553 module.exports = function(iterator, fn, value, entries){ 3554 try { 3555 return entries ? fn(anObject(value)[0], value[1]) : fn(value); 3556 // 7.4.6 IteratorClose(iterator, completion) 3557 } catch(e){ 3558 var ret = iterator['return']; 3559 if(ret !== undefined)anObject(ret.call(iterator)); 3560 throw e; 3561 } 3562 }; 3563 3564/***/ }), 3565/* 59 */ 3566/***/ (function(module, exports, __webpack_require__) { 3567 3568 // check on default Array iterator 3569 var Iterators = __webpack_require__(29) 3570 , ITERATOR = __webpack_require__(47)('iterator') 3571 , ArrayProto = Array.prototype; 3572 3573 module.exports = function(it){ 3574 return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it); 3575 }; 3576 3577/***/ }), 3578/* 60 */ 3579/***/ (function(module, exports, __webpack_require__) { 3580 3581 var classof = __webpack_require__(55) 3582 , ITERATOR = __webpack_require__(47)('iterator') 3583 , Iterators = __webpack_require__(29); 3584 module.exports = __webpack_require__(14).getIteratorMethod = function(it){ 3585 if(it != undefined)return it[ITERATOR] 3586 || it['@@iterator'] 3587 || Iterators[classof(it)]; 3588 }; 3589 3590/***/ }), 3591/* 61 */ 3592/***/ (function(module, exports, __webpack_require__) { 3593 3594 // 7.3.20 SpeciesConstructor(O, defaultConstructor) 3595 var anObject = __webpack_require__(19) 3596 , aFunction = __webpack_require__(16) 3597 , SPECIES = __webpack_require__(47)('species'); 3598 module.exports = function(O, D){ 3599 var C = anObject(O).constructor, S; 3600 return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? D : aFunction(S); 3601 }; 3602 3603/***/ }), 3604/* 62 */ 3605/***/ (function(module, exports, __webpack_require__) { 3606 3607 var ctx = __webpack_require__(15) 3608 , invoke = __webpack_require__(63) 3609 , html = __webpack_require__(45) 3610 , cel = __webpack_require__(24) 3611 , global = __webpack_require__(13) 3612 , process = global.process 3613 , setTask = global.setImmediate 3614 , clearTask = global.clearImmediate
vendor: 5,687 bytes, lines 3615-3813
3615 , MessageChannel = global.MessageChannel 3616 , counter = 0 3617 , queue = {} 3618 , ONREADYSTATECHANGE = 'onreadystatechange' 3619 , defer, channel, port; 3620 var run = function(){ 3621 var id = +this; 3622 if(queue.hasOwnProperty(id)){ 3623 var fn = queue[id]; 3624 delete queue[id]; 3625 fn(); 3626 } 3627 }; 3628 var listener = function(event){ 3629 run.call(event.data); 3630 }; 3631 // Node.js 0.9+ & IE10+ has setImmediate, otherwise: 3632 if(!setTask || !clearTask){ 3633 setTask = function setImmediate(fn){ 3634 var args = [], i = 1; 3635 while(arguments.length > i)args.push(arguments[i++]); 3636 queue[++counter] = function(){ 3637 invoke(typeof fn == 'function' ? fn : Function(fn), args); 3638 }; 3639 defer(counter); 3640 return counter; 3641 }; 3642 clearTask = function clearImmediate(id){ 3643 delete queue[id]; 3644 }; 3645 // Node.js 0.8- 3646 if(__webpack_require__(37)(process) == 'process'){ 3647 defer = function(id){ 3648 process.nextTick(ctx(run, id, 1)); 3649 }; 3650 // Browsers with MessageChannel, includes WebWorkers 3651 } else if(MessageChannel){ 3652 channel = new MessageChannel; 3653 port = channel.port2; 3654 channel.port1.onmessage = listener; 3655 defer = ctx(port.postMessage, port, 1); 3656 // Browsers with postMessage, skip WebWorkers 3657 // IE8 has postMessage, but it's sync & typeof its postMessage is 'object' 3658 } else if(global.addEventListener && typeof postMessage == 'function' && !global.importScripts){ 3659 defer = function(id){ 3660 global.postMessage(id + '', '*'); 3661 }; 3662 global.addEventListener('message', listener, false); 3663 // IE8- 3664 } else if(ONREADYSTATECHANGE in cel('script')){ 3665 defer = function(id){ 3666 html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function(){ 3667 html.removeChild(this); 3668 run.call(id); 3669 }; 3670 }; 3671 // Rest old browsers 3672 } else { 3673 defer = function(id){ 3674 setTimeout(ctx(run, id, 1), 0); 3675 }; 3676 } 3677 } 3678 module.exports = { 3679 set: setTask, 3680 clear: clearTask 3681 }; 3682 3683/***/ }), 3684/* 63 */ 3685/***/ (function(module, exports) { 3686 3687 // fast apply, http://jsperf.lnkit.com/fast-apply/5 3688 module.exports = function(fn, args, that){ 3689 var un = that === undefined; 3690 switch(args.length){ 3691 case 0: return un ? fn() 3692 : fn.call(that); 3693 case 1: return un ? fn(args[0]) 3694 : fn.call(that, args[0]); 3695 case 2: return un ? fn(args[0], args[1]) 3696 : fn.call(that, args[0], args[1]); 3697 case 3: return un ? fn(args[0], args[1], args[2]) 3698 : fn.call(that, args[0], args[1], args[2]); 3699 case 4: return un ? fn(args[0], args[1], args[2], args[3]) 3700 : fn.call(that, args[0], args[1], args[2], args[3]); 3701 } return fn.apply(that, args); 3702 }; 3703 3704/***/ }), 3705/* 64 */ 3706/***/ (function(module, exports, __webpack_require__) { 3707 3708 var global = __webpack_require__(13) 3709 , macrotask = __webpack_require__(62).set 3710 , Observer = global.MutationObserver || global.WebKitMutationObserver 3711 , process = global.process 3712 , Promise = global.Promise 3713 , isNode = __webpack_require__(37)(process) == 'process'; 3714 3715 module.exports = function(){ 3716 var head, last, notify; 3717 3718 var flush = function(){ 3719 var parent, fn; 3720 if(isNode && (parent = process.domain))parent.exit(); 3721 while(head){ 3722 fn = head.fn; 3723 head = head.next; 3724 try { 3725 fn(); 3726 } catch(e){ 3727 if(head)notify(); 3728 else last = undefined; 3729 throw e; 3730 } 3731 } last = undefined; 3732 if(parent)parent.enter(); 3733 }; 3734 3735 // Node.js 3736 if(isNode){ 3737 notify = function(){ 3738 process.nextTick(flush); 3739 }; 3740 // browsers with MutationObserver 3741 } else if(Observer){ 3742 var toggle = true 3743 , node = document.createTextNode(''); 3744 new Observer(flush).observe(node, {characterData: true}); // eslint-disable-line no-new 3745 notify = function(){ 3746 node.data = toggle = !toggle; 3747 }; 3748 // environments with maybe non-completely correct, but existent Promise 3749 } else if(Promise && Promise.resolve){ 3750 var promise = Promise.resolve(); 3751 notify = function(){ 3752 promise.then(flush); 3753 }; 3754 // for other environments - macrotask based on: 3755 // - setImmediate 3756 // - MessageChannel 3757 // - window.postMessag 3758 // - onreadystatechange 3759 // - setTimeout 3760 } else { 3761 notify = function(){ 3762 // strange IE + webpack dev server bug - use .call(global) 3763 macrotask.call(global, flush); 3764 }; 3765 } 3766 3767 return function(fn){ 3768 var task = {fn: fn, next: undefined}; 3769 if(last)last.next = task; 3770 if(!head){ 3771 head = task; 3772 notify(); 3773 } last = task; 3774 }; 3775 }; 3776 3777/***/ }), 3778/* 65 */ 3779/***/ (function(module, exports, __webpack_require__) { 3780 3781 var hide = __webpack_require__(17); 3782 module.exports = function(target, src, safe){ 3783 for(var key in src){ 3784 if(safe && target[key])target[key] = src[key]; 3785 else hide(target, key, src[key]); 3786 } return target; 3787 }; 3788 3789/***/ }), 3790/* 66 */ 3791/***/ (function(module, exports, __webpack_require__) { 3792 3793 'use strict'; 3794 var global = __webpack_require__(13) 3795 , core = __webpack_require__(14) 3796 , dP = __webpack_require__(18) 3797 , DESCRIPTORS = __webpack_require__(22) 3798 , SPECIES = __webpack_require__(47)('species'); 3799 3800 module.exports = function(KEY){ 3801 var C = typeof core[KEY] == 'function' ? core[KEY] : global[KEY]; 3802 if(DESCRIPTORS && C && !C[SPECIES])dP.f(C, SPECIES, { 3803 configurable: true, 3804 get: function(){ return this; } 3805 }); 3806 }; 3807 3808/***/ }), 3809/* 67 */ 3810/***/ (function(module, exports, __webpack_require__) { 3811 3812 var ITERATOR = __webpack_require__(47)('iterator') 3813 , SAFE_CLOSING = false;
vendor: 4,165 bytes, lines 3814-3886
3814 3815 try { 3816 var riter = [7][ITERATOR](); 3817 riter['return'] = function(){ SAFE_CLOSING = true; }; 3818 Array.from(riter, function(){ throw 2; }); 3819 } catch(e){ /* empty */ } 3820 3821 module.exports = function(exec, skipClosing){ 3822 if(!skipClosing && !SAFE_CLOSING)return false; 3823 var safe = false; 3824 try { 3825 var arr = [7] 3826 , iter = arr[ITERATOR](); 3827 iter.next = function(){ return {done: safe = true}; }; 3828 arr[ITERATOR] = function(){ return iter; }; 3829 exec(arr); 3830 } catch(e){ /* empty */ } 3831 return safe; 3832 }; 3833 3834/***/ }), 3835/* 68 */ 3836/***/ (function(module, exports, __webpack_require__) { 3837 3838 'use strict'; 3839 3840 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; }; }(); /** 3841 * @author NHN Ent. FE Development Team <[email protected]> 3842 * @fileoverview Invoker - invoke commands 3843 */ 3844 3845 3846 var _tuiCodeSnippet = __webpack_require__(3); 3847 3848 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 3849 3850 var _promise = __webpack_require__(4); 3851 3852 var _promise2 = _interopRequireDefault(_promise); 3853 3854 var _command = __webpack_require__(69); 3855 3856 var _command2 = _interopRequireDefault(_command); 3857 3858 var _consts = __webpack_require__(73); 3859 3860 var _consts2 = _interopRequireDefault(_consts); 3861 3862 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 3863 3864 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 3865 3866 var eventNames = _consts2.default.eventNames, 3867 rejectMessages = _consts2.default.rejectMessages; 3868 var isFunction = _tuiCodeSnippet2.default.isFunction, 3869 isString = _tuiCodeSnippet2.default.isString, 3870 CustomEvents = _tuiCodeSnippet2.default.CustomEvents; 3871 3872 /** 3873 * Invoker 3874 * @class 3875 * @ignore 3876 */ 3877 3878 var Invoker = function () { 3879 function Invoker() { 3880 _classCallCheck(this, Invoker); 3881 3882 /** 3883 * Undo stack 3884 * @type {Array.<Command>} 3885 * @private 3886 */
3887 this._undoStack = []; 3888 3889 /** 3890 * Redo stack 3891 * @type {Array.<Command>} 3892 * @private 3893 */ 3894 this._redoStack = []; 3895 3896 /** 3897 * Lock-flag for executing command 3898 * @type {boolean} 3899 * @private 3900 */ 3901 this._isLocked = false; 3902 } 3903 3904 /** 3905 * Invoke command execution 3906 * @param {Command} command - Command 3907 * @returns {Promise} 3908 * @private 3909 */ 3910 3911 3912 _createClass(Invoker, [{ 3913 key: '_invokeExecution', 3914 value: function _invokeExecution(command) { 3915 var _this = this; 3916 3917 this.lock(); 3918 3919 var args = command.args; 3920 3921 if (!args) { 3922 args = []; 3923 } 3924 3925 return command.execute.apply(command, args).then(function (value) { 3926 _this.pushUndoStack(command); 3927 _this.unlock(); 3928 if (isFunction(command.executeCallback)) { 3929 command.executeCallback(value); 3930 } 3931 3932 return value; 3933 })['catch'](function (message) { 3934 _this.unlock(); 3935 3936 return _promise2.default.reject(message); 3937 }); 3938 } 3939 3940 /** 3941 * Invoke command undo 3942 * @param {Command} command - Command 3943 * @returns {Promise} 3944 * @private 3945 */ 3946 3947 }, { 3948 key: '_invokeUndo', 3949 value: function _invokeUndo(command) { 3950 var _this2 = this; 3951 3952 this.lock(); 3953 3954 var args = command.args; 3955 3956 if (!args) { 3957 args = []; 3958 } 3959 3960 return command.undo.apply(command, args).then(function (value) { 3961 _this2.pushRedoStack(command); 3962 _this2.unlock(); 3963 if (isFunction(command.undoCallback)) { 3964 command.undoCallback(value); 3965 } 3966 3967 return value; 3968 })['catch'](function (message) { 3969 _this2.unlock(); 3970 3971 return _promise2.default.reject(message); 3972 }); 3973 } 3974 3975 /** 3976 * fire REDO_STACK_CHANGED event 3977 * @private 3978 */ 3979 3980 }, { 3981 key: '_fireRedoStackChanged', 3982 value: function _fireRedoStackChanged() { 3983 this.fire(eventNames.REDO_STACK_CHANGED, this._redoStack.length); 3984 } 3985 3986 /** 3987 * fire UNDO_STACK_CHANGED event 3988 * @private 3989 */ 3990 3991 }, { 3992 key: '_fireUndoStackChanged', 3993 value: function _fireUndoStackChanged() { 3994 this.fire(eventNames.UNDO_STACK_CHANGED, this._undoStack.length); 3995 } 3996 3997 /** 3998 * Lock this invoker 3999 */ 4000 4001 }, { 4002 key: 'lock', 4003 value: function lock() {
4004 this._isLocked = true; 4005 } 4006 4007 /** 4008 * Unlock this invoker 4009 */ 4010 4011 }, { 4012 key: 'unlock', 4013 value: function unlock() { 4014 this._isLocked = false; 4015 } 4016 4017 /** 4018 * Invoke command 4019 * Store the command to the undoStack 4020 * Clear the redoStack 4021 * @param {String} commandName - Command name 4022 * @param {...*} args - Arguments for creating command 4023 * @returns {Promise} 4024 */ 4025 4026 }, { 4027 key: 'execute', 4028 value: function execute() { 4029 var _this3 = this; 4030 4031 if (this._isLocked) { 4032 return _promise2.default.reject(rejectMessages.isLock); 4033 } 4034 4035 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 4036 args[_key] = arguments[_key]; 4037 } 4038 4039 var command = args[0]; 4040 4041 if (isString(command)) { 4042 command = _command2.default.create.apply(_command2.default, args); 4043 } 4044 4045 return this._invokeExecution(command).then(function (value) { 4046 _this3.clearRedoStack(); 4047 4048 return value; 4049 }); 4050 } 4051 4052 /** 4053 * Undo command 4054 * @returns {Promise} 4055 */ 4056 4057 }, { 4058 key: 'undo', 4059 value: function undo() { 4060 var command = this._undoStack.pop(); 4061 var promise = void 0; 4062 var message = ''; 4063 4064 if (command && this._isLocked) { 4065 this.pushUndoStack(command, true); 4066 command = null; 4067 } 4068 if (command) { 4069 if (this.isEmptyUndoStack()) { 4070 this._fireUndoStackChanged(); 4071 } 4072 promise = this._invokeUndo(command); 4073 } else { 4074 message = rejectMessages.undo; 4075 if (this._isLocked) { 4076 message = message + ' Because ' + rejectMessages.isLock; 4077 } 4078 promise = _promise2.default.reject(message); 4079 } 4080 4081 return promise; 4082 } 4083 4084 /** 4085 * Redo command 4086 * @returns {Promise} 4087 */ 4088 4089 }, { 4090 key: 'redo', 4091 value: function redo() { 4092 var command = this._redoStack.pop(); 4093 var promise = void 0; 4094 var message = ''; 4095 4096 if (command && this._isLocked) { 4097 this.pushRedoStack(command, true); 4098 command = null; 4099 } 4100 if (command) { 4101 if (this.isEmptyRedoStack()) { 4102 this._fireRedoStackChanged(); 4103 } 4104 promise = this._invokeExecution(command); 4105 } else { 4106 message = rejectMessages.redo; 4107 if (this._isLocked) { 4108 message = message + ' Because ' + rejectMessages.isLock; 4109 } 4110 promise = _promise2.default.reject(message); 4111 } 4112 4113 return promise; 4114 } 4115 4116 /** 4117 * Push undo stack 4118 * @param {Command} command - command 4119 * @param {boolean} [isSilent] - Fire event or not 4120 */ 4121 4122 }, { 4123 key: 'pushUndoStack', 4124 value: function pushUndoStack(command, isSilent) { 4125 this._undoStack.push(command); 4126 if (!isSilent) { 4127 this._fireUndoStackChanged(); 4128 } 4129 } 4130 4131 /** 4132 * Push redo stack 4133 * @param {Command} command - command 4134 * @param {boolean} [isSilent] - Fire event or not 4135 */ 4136 4137 }, { 4138 key: 'pushRedoStack', 4139 value: function pushRedoStack(command, isSilent) { 4140 this._redoStack.push(command); 4141 if (!isSilent) { 4142 this._fireRedoStackChanged(); 4143 } 4144 } 4145 4146 /** 4147 * Return whether the redoStack is empty 4148 * @returns {boolean} 4149 */ 4150 4151 }, { 4152 key: 'isEmptyRedoStack', 4153 value: function isEmptyRedoStack() { 4154 return this._redoStack.length === 0; 4155 } 4156 4157 /** 4158 * Return whether the undoStack is empty 4159 * @returns {boolean} 4160 */ 4161 4162 }, { 4163 key: 'isEmptyUndoStack', 4164 value: function isEmptyUndoStack() {
4165 return this._undoStack.length === 0; 4166 } 4167 4168 /** 4169 * Clear undoStack 4170 */ 4171 4172 }, { 4173 key: 'clearUndoStack', 4174 value: function clearUndoStack() { 4175 if (!this.isEmptyUndoStack()) { 4176 this._undoStack = []; 4177 this._fireUndoStackChanged(); 4178 } 4179 } 4180 4181 /** 4182 * Clear redoStack 4183 */ 4184 4185 }, { 4186 key: 'clearRedoStack', 4187 value: function clearRedoStack() { 4188 if (!this.isEmptyRedoStack()) { 4189 this._redoStack = []; 4190 this._fireRedoStackChanged(); 4191 } 4192 } 4193 }]); 4194 4195 return Invoker; 4196 }(); 4197 4198 CustomEvents.mixin(Invoker); 4199 module.exports = Invoker; 4200 4201/***/ }), 4202/* 69 */ 4203/***/ (function(module, exports, __webpack_require__) { 4204 4205 'use strict'; 4206 4207 var _command = __webpack_require__(70); 4208 4209 var _command2 = _interopRequireDefault(_command); 4210 4211 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 4212 4213 var commands = {}; 4214 4215 /** 4216 * Create a command 4217 * @param {string} name - Command name 4218 * @param {...*} args - Arguments for creating command 4219 * @returns {Command} 4220 * @ignore 4221 */ 4222 /** 4223 * @author NHN Ent. FE Development Team <[email protected]> 4224 * @fileoverview Command factory 4225 */ 4226 function create(name) { 4227 var actions = commands[name]; 4228 if (actions) { 4229 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 4230 args[_key - 1] = arguments[_key]; 4231 } 4232 4233 return new _command2.default(actions, args); 4234 } 4235 4236 return null; 4237 } 4238 4239 /** 4240 * Register a command with name as a key 4241 * @param {Object} command - {name:{string}, execute: {function}, undo: {function}} 4242 * @param {string} command.name - command name 4243 * @param {function} command.execute - executable function 4244 * @param {function} command.undo - undo function 4245 * @ignore 4246 */ 4247 function register(command) { 4248 commands[command.name] = command; 4249 } 4250 4251 module.exports = { 4252 create: create, 4253 register: register 4254 }; 4255 4256/***/ }), 4257/* 70 */ 4258/***/ (function(module, exports, __webpack_require__) { 4259 4260 'use strict'; 4261 4262 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; }; }(); /** 4263 * @author NHN Ent. FE Development Team <[email protected]> 4264 * @fileoverview Command interface 4265 */ 4266 4267 4268 var _errorMessage = __webpack_require__(71); 4269 4270 var _errorMessage2 = _interopRequireDefault(_errorMessage); 4271 4272 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 4273 4274 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 4275 4276 var createMessage = _errorMessage2.default.create; 4277 var errorTypes = _errorMessage2.default.types; 4278 4279 /** 4280 * Command class 4281 * @class 4282 * @param {{name:function, execute: function, undo: function, 4283 * executeCallback: function, undoCallback: function}} actions - Command actions 4284 * @param {Array} args - passing arguments on execute, undo 4285 * @ignore 4286 */ 4287 4288 var Command = function () { 4289 function Command(actions, args) { 4290 _classCallCheck(this, Command); 4291 4292 /** 4293 * command name 4294 * @type {string} 4295 */ 4296 this.name = actions.name; 4297 4298 /** 4299 * arguments 4300 * @type {Array} 4301 */ 4302 this.args = args; 4303 4304 /** 4305 * Execute function 4306 * @type {function} 4307 */ 4308 this.execute = actions.execute; 4309 4310 /** 4311 * Undo function 4312 * @type {function} 4313 */ 4314 this.undo = actions.undo; 4315 4316 /** 4317 * executeCallback 4318 * @type {function} 4319 */ 4320 this.executeCallback = actions.executeCallback || null; 4321 4322 /** 4323 * undoCallback 4324 * @type {function} 4325 */ 4326 this.undoCallback = actions.undoCallback || null; 4327 4328 /** 4329 * data for undo 4330 * @type {Object} 4331 */ 4332 this.undoData = {}; 4333 } 4334 4335 /** 4336 * Execute action 4337 * @param {Object.<string, Component>} compMap - Components injection 4338 * @abstract 4339 */ 4340 4341 4342 _createClass(Command, [{ 4343 key: 'execute', 4344 value: function execute() { 4345 throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute')); 4346 } 4347 4348 /** 4349 * Undo action 4350 * @param {Object.<string, Component>} compMap - Components injection 4351 * @abstract 4352 */ 4353 4354 }, { 4355 key: 'undo', 4356 value: function undo() { 4357 throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo')); 4358 } 4359 4360 /** 4361 * Attach execute callabck 4362 * @param {function} callback - Callback after execution 4363 * @returns {Command} this 4364 */ 4365 4366 }, { 4367 key: 'setExecuteCallback', 4368 value: function setExecuteCallback(callback) { 4369 this.executeCallback = callback; 4370 4371 return this; 4372 } 4373 4374 /** 4375 * Attach undo callback 4376 * @param {function} callback - Callback after undo 4377 * @returns {Command} this 4378 */ 4379 4380 }, { 4381 key: 'setUndoCallback', 4382 value: function setUndoCallback(callback) { 4383 this.undoCallback = callback; 4384 4385 return this; 4386 } 4387 }]); 4388 4389 return Command; 4390 }(); 4391 4392 module.exports = Command; 4393 4394/***/ }), 4395/* 71 */ 4396/***/ (function(module, exports, __webpack_require__) { 4397 4398 'use strict'; 4399 4400 var _tuiCodeSnippet = __webpack_require__(3); 4401 4402 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 4403 4404 var _util = __webpack_require__(72); 4405 4406 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 4407 4408 /** 4409 * @author NHN Ent. FE Development Team <[email protected]> 4410 * @fileoverview Error-message factory 4411 */ 4412 var types = (0, _util.keyMirror)('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME'); 4413 var messages = { 4414 UN_IMPLEMENTATION: 'Should implement a method: ', 4415 NO_COMPONENT_NAME: 'Should set a component name' 4416 }; 4417 var map = { 4418 UN_IMPLEMENTATION: function UN_IMPLEMENTATION(methodName) { 4419 return messages.UN_IMPLEMENTATION + methodName; 4420 }, 4421 NO_COMPONENT_NAME: function NO_COMPONENT_NAME() { 4422 return messages.NO_COMPONENT_NAME; 4423 } 4424 }; 4425 4426 module.exports = { 4427 types: _tuiCodeSnippet2.default.extend({}, types), 4428 4429 create: function create(type) { 4430 type = type.toLowerCase(); 4431 var func = map[type]; 4432 4433 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 4434 args[_key - 1] = arguments[_key]; 4435 } 4436 4437 return func.apply(undefined, args); 4438 } 4439 }; 4440 4441/***/ }), 4442/* 72 */ 4443/***/ (function(module, exports, __webpack_require__) { 4444 4445 'use strict'; 4446 4447 var _tuiCodeSnippet = __webpack_require__(3); 4448 4449 var min = Math.min, 4450 max = Math.max; /** 4451 * @author NHN Ent. FE Development Team <[email protected]> 4452 * @fileoverview Util 4453 */ 4454 4455 var hostnameSent = false;
4456 4457 module.exports = { 4458 4459 /** 4460 * Clamp value 4461 * @param {number} value - Value 4462 * @param {number} minValue - Minimum value 4463 * @param {number} maxValue - Maximum value 4464 * @returns {number} clamped value 4465 */ 4466 clamp: function clamp(value, minValue, maxValue) { 4467 var temp = void 0; 4468 if (minValue > maxValue) { 4469 temp = minValue; 4470 minValue = maxValue; 4471 maxValue = temp; 4472 } 4473 4474 return max(minValue, min(value, maxValue)); 4475 }, 4476 4477 4478 /** 4479 * Make key-value object from arguments 4480 * @returns {object.<string, string>} 4481 */ 4482 keyMirror: function keyMirror() { 4483 var obj = {}; 4484 4485 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 4486 args[_key] = arguments[_key]; 4487 } 4488 4489 (0, _tuiCodeSnippet.forEach)(args, function (key) { 4490 obj[key] = key; 4491 }); 4492 4493 return obj; 4494 }, 4495 4496 4497 /** 4498 * Make CSSText 4499 * @param {Object} styleObj - Style info object 4500 * @returns {string} Connected string of style 4501 */ 4502 makeStyleText: function makeStyleText(styleObj) { 4503 var styleStr = ''; 4504 4505 (0, _tuiCodeSnippet.forEach)(styleObj, function (value, prop) { 4506 styleStr += prop + ': ' + value + ';'; 4507 }); 4508 4509 return styleStr; 4510 }, 4511 4512 4513 /** 4514 * Get object's properties 4515 * @param {Object} obj - object 4516 * @param {Array} keys - keys 4517 * @returns {Object} properties object 4518 */ 4519 getProperties: function getProperties(obj, keys) { 4520 var props = {}; 4521 var length = keys.length; 4522 4523 var i = 0; 4524 var key = void 0; 4525 4526 for (i = 0; i < length; i += 1) { 4527 key = keys[i]; 4528 props[key] = obj[key]; 4529 } 4530 4531 return props; 4532 }, 4533 4534 4535 /** 4536 * ParseInt simpliment 4537 * @param {number} value - Value 4538 * @returns {number} 4539 */ 4540 toInteger: function toInteger(value) { 4541 return parseInt(value, 10); 4542 }, 4543 4544 4545 /** 4546 * String to camelcase string 4547 * @param {string} targetString - change target 4548 * @returns {string} 4549 * @private 4550 */ 4551 toCamelCase: function toCamelCase(targetString) { 4552 return targetString.replace(/-([a-z])/g, function ($0, $1) { 4553 return $1.toUpperCase(); 4554 }); 4555 }, 4556 4557 4558 /** 4559 * Check browser file api support 4560 * @returns {boolean} 4561 * @private 4562 */ 4563 isSupportFileApi: function isSupportFileApi() { 4564 return !!(window.File && window.FileList && window.FileReader); 4565 }, 4566 4567 4568 /** 4569 * hex to rgb 4570 * @param {string} color - hex color 4571 * @param {string} alpha - color alpha value 4572 * @returns {string} rgb expression 4573 */ 4574 getRgb: function getRgb(color, alpha) { 4575 if (color.length === 4) { 4576 color = '' + color + color.slice(1, 4); 4577 } 4578 var r = parseInt(color.slice(1, 3), 16); 4579 var g = parseInt(color.slice(3, 5), 16); 4580 var b = parseInt(color.slice(5, 7), 16); 4581 var a = alpha || 1; 4582 4583 return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'; 4584 }, 4585 4586 4587 /** 4588 * send hostname 4589 */ 4590 sendHostName: function sendHostName() { 4591 if (hostnameSent) { 4592 return; 4593 } 4594 hostnameSent = true; 4595 4596 (0, _tuiCodeSnippet.sendHostname)('image-editor', 'UA-129999381-1'); 4597 }, 4598 4599 4600 /** 4601 * Apply css resource 4602 * @param {string} styleBuffer - serialized css text 4603 * @param {string} tagId - style tag id 4604 */ 4605 styleLoad: function styleLoad(styleBuffer, tagId) { 4606 var _document$getElements = document.getElementsByTagName('head'), 4607 head = _document$getElements[0]; 4608 4609 var linkElement = document.createElement('link'); 4610 var styleData = encodeURIComponent(styleBuffer); 4611 if (tagId) { 4612 linkElement.id = tagId; 4613 // linkElement.id = 'tui-image-editor-theme-style'; 4614 } 4615 linkElement.setAttribute('rel', 'stylesheet'); 4616 linkElement.setAttribute('type', 'text/css'); 4617 linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + styleData); 4618 head.appendChild(linkElement); 4619 }, 4620 4621 4622 /** 4623 * Get selector 4624 * @param {HTMLElement} targetElement - target element 4625 * @returns {Function} selector 4626 */ 4627 getSelector: function getSelector(targetElement) { 4628 return function (str) { 4629 return targetElement.querySelector(str); 4630 }; 4631 }, 4632 4633 4634 /** 4635 * Change base64 to blob 4636 * @param {String} data - base64 string data 4637 * @returns {Blob} Blob Data 4638 */ 4639 base64ToBlob: function base64ToBlob(data) { 4640 var rImageType = /data:(image\/.+);base64,/; 4641 var mimeString = ''; 4642 var raw = void 0, 4643 uInt8Array = void 0, 4644 i = void 0; 4645 4646 raw = data.replace(rImageType, function (header, imageType) { 4647 mimeString = imageType; 4648 4649 return ''; 4650 }); 4651 4652 raw = atob(raw); 4653 var rawLength = raw.length; 4654 uInt8Array = new Uint8Array(rawLength); // eslint-disable-line 4655 4656 for (i = 0; i < rawLength; i += 1) { 4657 uInt8Array[i] = raw.charCodeAt(i); 4658 } 4659 4660 return new Blob([uInt8Array], { type: mimeString }); 4661 } 4662 }; 4663 4664/***/ }), 4665/* 73 */ 4666/***/ (function(module, exports, __webpack_require__) { 4667 4668 'use strict'; 4669 4670 var _util = __webpack_require__(72); 4671 4672 var _util2 = _interopRequireDefault(_util); 4673 4674 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 4675 4676 module.exports = { 4677 /** 4678 * Component names 4679 * @type {Object.<string, string>} 4680 */ 4681 componentNames: _util2.default.keyMirror('IMAGE_LOADER', 'CROPPER', 'FLIP', 'ROTATION', 'FREE_DRAWING', 'LINE', 'TEXT', 'ICON', 'FILTER', 'SHAPE'), 4682 4683 /** 4684 * Command names 4685 * @type {Object.<string, string>} 4686 */ 4687 commandNames: { 4688 'CLEAR_OBJECTS': 'clearObjects', 4689 'LOAD_IMAGE': 'loadImage', 4690 'FLIP_IMAGE': 'flip', 4691 'ROTATE_IMAGE': 'rotate', 4692 'ADD_OBJECT': 'addObject', 4693 'REMOVE_OBJECT': 'removeObject', 4694 'APPLY_FILTER': 'applyFilter', 4695 'REMOVE_FILTER': 'removeFilter', 4696 'ADD_ICON': 'addIcon', 4697 'CHANGE_ICON_COLOR': 'changeIconColor', 4698 'ADD_SHAPE': 'addShape', 4699 'CHANGE_SHAPE': 'changeShape', 4700 'ADD_TEXT': 'addText', 4701 'CHANGE_TEXT': 'changeText', 4702 'CHANGE_TEXT_STYLE': 'changeTextStyle', 4703 'ADD_IMAGE_OBJECT': 'addImageObject', 4704 'RESIZE_CANVAS_DIMENSION': 'resizeCanvasDimension', 4705 'SET_OBJECT_PROPERTIES': 'setObjectProperties', 4706 'SET_OBJECT_POSITION': 'setObjectPosition' 4707 }, 4708 4709 /** 4710 * Event names 4711 * @type {Object.<string, string>} 4712 */ 4713 eventNames: { 4714 OBJECT_ACTIVATED: 'objectActivated', 4715 OBJECT_MOVED: 'objectMoved', 4716 OBJECT_SCALED: 'objectScaled', 4717 OBJECT_CREATED: 'objectCreated', 4718 TEXT_EDITING: 'textEditing', 4719 TEXT_CHANGED: 'textChanged', 4720 ICON_CREATE_RESIZE: 'iconCreateResize', 4721 ICON_CREATE_END: 'iconCreateEnd', 4722 ADD_TEXT: 'addText', 4723 ADD_OBJECT: 'addObject', 4724 ADD_OBJECT_AFTER: 'addObjectAfter', 4725 MOUSE_DOWN: 'mousedown', 4726 MOUSE_UP: 'mouseup', 4727 MOUSE_MOVE: 'mousemove', 4728 // UNDO/REDO Events 4729 REDO_STACK_CHANGED: 'redoStackChanged', 4730 UNDO_STACK_CHANGED: 'undoStackChanged', 4731 SELECTION_CLEARED: 'selectionCleared', 4732 SELECTION_CREATED: 'selectionCreated' 4733 }, 4734 4735 /** 4736 * Editor states 4737 * @type {Object.<string, string>} 4738 */ 4739 drawingModes: _util2.default.keyMirror('NORMAL', 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'), 4740 4741 /** 4742 * Shortcut key values 4743 * @type {Object.<string, number>} 4744 */ 4745 keyCodes: { 4746 Z: 90, 4747 Y: 89, 4748 SHIFT: 16, 4749 BACKSPACE: 8, 4750 DEL: 46 4751 }, 4752 4753 /** 4754 * Fabric object options 4755 * @type {Object.<string, Object>} 4756 */ 4757 fObjectOptions: { 4758 SELECTION_STYLE: { 4759 borderColor: 'red', 4760 cornerColor: 'green', 4761 cornerSize: 10, 4762 originX: 'center', 4763 originY: 'center', 4764 transparentCorners: false 4765 } 4766 }, 4767 4768 /** 4769 * Promise reject messages 4770 * @type {Object.<string, string>} 4771 */ 4772 rejectMessages: { 4773 addedObject: 'The object is already added.', 4774 flip: 'The flipX and flipY setting values are not changed.', 4775 invalidDrawingMode: 'This operation is not supported in the drawing mode.', 4776 invalidParameters: 'Invalid parameters.', 4777 isLock: 'The executing command state is locked.', 4778 loadImage: 'The background image is empty.', 4779 loadingImageFailed: 'Invalid image loaded.', 4780 noActiveObject: 'There is no active object.', 4781 noObject: 'The object is not in canvas.', 4782 redo: 'The promise of redo command is reject.', 4783 rotation: 'The current angle is same the old angle.', 4784 undo: 'The promise of undo command is reject.', 4785 unsupportedOperation: 'Unsupported operation.', 4786 unsupportedType: 'Unsupported object type.' 4787 }, 4788 4789 /** 4790 * Default icon menu svg path 4791 * @type {Object.<string, string>} 4792 */ 4793 defaultIconPath: { 4794 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z', 4795 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ', 4796 'icon-arrow-3': 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ',
4797 '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 ', 4798 '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 ', 4799 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ', 4800 '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', 4801 '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 ', 4802 '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' 4803 }, 4804 4805 defaultRotateRangeValus: { 4806 realTimeEvent: true, 4807 min: -360, 4808 max: 360, 4809 value: 0 4810 }, 4811 4812 defaultDrawRangeValus: { 4813 min: 5, 4814 max: 30, 4815 value: 12 4816 }, 4817 4818 defaultShapeStrokeValus: { 4819 realTimeEvent: false, 4820 min: 2, 4821 max: 300, 4822 value: 3 4823 }, 4824 4825 defaultTextRangeValus: { 4826 realTimeEvent: true, 4827 min: 10, 4828 max: 100, 4829 value: 50 4830 }, 4831 4832 defaultFilterRangeValus: { 4833 tintOpacityRange: { 4834 min: 0, 4835 max: 1, 4836 value: 0.7 4837 }, 4838 removewhiteThresholdRange: { 4839 min: 0, 4840 max: 255, 4841 value: 60 4842 }, 4843 removewhiteDistanceRange: { 4844 min: 0, 4845 max: 255, 4846 value: 10 4847 }, 4848 gradientTransparencyRange: { 4849 min: 0, 4850 max: 255, 4851 value: 100 4852 }, 4853 brightnessRange: { 4854 min: -255, 4855 max: 255, 4856 value: 100 4857 }, 4858 noiseRange: { 4859 min: 0, 4860 max: 1000, 4861 value: 100 4862 }, 4863 pixelateRange: { 4864 min: 2, 4865 max: 20, 4866 value: 4 4867 }, 4868 colorfilterThresholeRange: { 4869 min: 0, 4870 max: 255, 4871 value: 45 4872 } 4873 } 4874 }; /** 4875 * @author NHN Ent. FE Development Team <[email protected]> 4876 * @fileoverview Constants 4877 */ 4878 4879/***/ }), 4880/* 74 */ 4881/***/ (function(module, exports, __webpack_require__) { 4882 4883 'use strict'; 4884 4885 Object.defineProperty(exports, "__esModule", { 4886 value: true 4887 }); 4888 4889 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; }; }(); 4890 4891 var _tuiCodeSnippet = __webpack_require__(3); 4892 4893 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 4894 4895 var _util = __webpack_require__(72); 4896 4897 var _util2 = _interopRequireDefault(_util); 4898 4899 var _mainContainer = __webpack_require__(75); 4900 4901 var _mainContainer2 = _interopRequireDefault(_mainContainer); 4902 4903 var _controls = __webpack_require__(76); 4904 4905 var _controls2 = _interopRequireDefault(_controls); 4906 4907 var _theme = __webpack_require__(77); 4908 4909 var _theme2 = _interopRequireDefault(_theme); 4910 4911 var _shape = __webpack_require__(80); 4912 4913 var _shape2 = _interopRequireDefault(_shape); 4914 4915 var _crop = __webpack_require__(86); 4916 4917 var _crop2 = _interopRequireDefault(_crop); 4918 4919 var _flip = __webpack_require__(88); 4920 4921 var _flip2 = _interopRequireDefault(_flip); 4922 4923 var _rotate = __webpack_require__(90); 4924 4925 var _rotate2 = _interopRequireDefault(_rotate); 4926 4927 var _text = __webpack_require__(92); 4928 4929 var _text2 = _interopRequireDefault(_text); 4930 4931 var _mask = __webpack_require__(94); 4932 4933 var _mask2 = _interopRequireDefault(_mask); 4934 4935 var _icon = __webpack_require__(96); 4936 4937 var _icon2 = _interopRequireDefault(_icon); 4938 4939 var _draw = __webpack_require__(98); 4940 4941 var _draw2 = _interopRequireDefault(_draw); 4942 4943 var _filter = __webpack_require__(100); 4944 4945 var _filter2 = _interopRequireDefault(_filter); 4946 4947 var _locale = __webpack_require__(102); 4948 4949 var _locale2 = _interopRequireDefault(_locale); 4950 4951 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 4952 4953 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 4954 4955 var SUB_UI_COMPONENT = { 4956 Shape: _shape2.default, 4957 Crop: _crop2.default, 4958 Flip: _flip2.default, 4959 Rotate: _rotate2.default, 4960 Text: _text2.default, 4961 Mask: _mask2.default, 4962 Icon: _icon2.default, 4963 Draw: _draw2.default, 4964 Filter: _filter2.default 4965 }; 4966 4967 var BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300'; 4968 4969 /** 4970 * Ui class 4971 * @class 4972 * @param {string|HTMLElement} element - Wrapper's element or selector 4973 * @param {Object} [options] - Ui setting options 4974 * @param {number} option.loadImage - Init default load image 4975 * @param {number} option.initMenu - Init start menu 4976 * @param {Boolean} [option.menuBarPosition=bottom] - Let 4977 * @param {Boolean} [option.applyCropSelectionStyle=false] - Let 4978 * @param {Object} [options.uiSize] - ui size of editor 4979 * @param {string} options.uiSize.width - width of ui 4980 * @param {string} options.uiSize.height - height of ui 4981 * @param {Objecdt} actions - ui action instance 4982 */ 4983 4984 var Ui = function () { 4985 function Ui(element, options, actions) { 4986 _classCallCheck(this, Ui); 4987 4988 this.options = this._initializeOption(options); 4989 this._actions = actions; 4990 this.submenu = false;
4991 this.imageSize = {}; 4992 this.uiSize = {}; 4993 this._locale = new _locale2.default(this.options.locale); 4994 this.theme = new _theme2.default(this.options.theme); 4995 4996 this._submenuChangeTransection = false; 4997 this._selectedElement = null; 4998 this._mainElement = null; 4999 this._editorElementWrap = null; 5000 this._editorElement = null; 5001 this._menuElement = null; 5002 this._subMenuElement = null; 5003 this._makeUiElement(element); 5004 this._setUiSize(); 5005 this._initMenuEvent = false; 5006 5007 this._els = { 5008 'undo': this._menuElement.querySelector('#tie-btn-undo'), 5009 'redo': this._menuElement.querySelector('#tie-btn-redo'), 5010 'reset': this._menuElement.querySelector('#tie-btn-reset'), 5011 'delete': this._menuElement.querySelector('#tie-btn-delete'), 5012 'deleteAll': this._menuElement.querySelector('#tie-btn-delete-all'), 5013 'download': this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'), 5014 'load': this._selectedElement.querySelectorAll('.tui-image-editor-load-btn') 5015 }; 5016 5017 this._makeSubMenu(); 5018 } 5019 5020 /** 5021 * Set Default Selection for includeUI 5022 * @param {Object} option - imageEditor options 5023 * @returns {Object} - extends selectionStyle option 5024 * @ignore 5025 */ 5026 5027 5028 _createClass(Ui, [{ 5029 key: 'setUiDefaultSelectionStyle', 5030 value: function setUiDefaultSelectionStyle(option) { 5031 return _tuiCodeSnippet2.default.extend({ 5032 applyCropSelectionStyle: true, 5033 applyGroupSelectionStyle: true, 5034 selectionStyle: { 5035 cornerStyle: 'circle', 5036 cornerSize: 16, 5037 cornerColor: '#fff', 5038 cornerStrokeColor: '#fff', 5039 transparentCorners: false, 5040 lineWidth: 2, 5041 borderColor: '#fff' 5042 } 5043 }, option); 5044 } 5045 5046 /** 5047 * Change editor size 5048 * @param {Object} resizeInfo - ui & image size info 5049 * @param {Object} resizeInfo.uiSize - image size dimension 5050 * @param {Number} resizeInfo.uiSize.width - ui width 5051 * @param {Number} resizeInfo.uiSize.height - ui height 5052 * @param {Object} resizeInfo.imageSize - image size dimension 5053 * @param {Number} resizeInfo.imageSize.oldWidth - old width 5054 * @param {Number} resizeInfo.imageSize.oldHeight - old height 5055 * @param {Number} resizeInfo.imageSize.newWidth - new width 5056 * @param {Number} resizeInfo.imageSize.newHeight - new height 5057 * @example 5058 * // Change the image size and ui size, and change the affected ui state together. 5059 * imageEditor.ui.resizeEditor({ 5060 * imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700}, 5061 * uiSize: {width: 1000, height: 1000} 5062 * }); 5063 * @example 5064 * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui) 5065 * imageEditor.ui.resizeEditor(); 5066 */ 5067 5068 }, { 5069 key: 'resizeEditor', 5070 value: function resizeEditor() { 5071 var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, 5072 uiSize = _ref.uiSize, 5073 _ref$imageSize = _ref.imageSize, 5074 imageSize = _ref$imageSize === undefined ? this.imageSize : _ref$imageSize; 5075 5076 if (imageSize !== this.imageSize) { 5077 this.imageSize = imageSize; 5078 } 5079 if (uiSize) { 5080 this._setUiSize(uiSize); 5081 } 5082 5083 var _getEditorDimension2 = this._getEditorDimension(), 5084 width = _getEditorDimension2.width, 5085 height = _getEditorDimension2.height; 5086 5087 var editorElementStyle = this._editorElement.style; 5088 var menuBarPosition = this.options.menuBarPosition; 5089 5090 5091 editorElementStyle.height = height + 'px'; 5092 editorElementStyle.width = width + 'px'; 5093 5094 this._setEditorPosition(menuBarPosition); 5095 5096 this._editorElementWrap.style.bottom = '0px'; 5097 this._editorElementWrap.style.top = '0px'; 5098 this._editorElementWrap.style.left = '0px'; 5099 this._editorElementWrap.style.width = '100%'; 5100 5101 var selectElementClassList = this._selectedElement.classList; 5102 5103 if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION) { 5104 selectElementClassList.add('tui-image-editor-top-optimization'); 5105 } else { 5106 selectElementClassList.remove('tui-image-editor-top-optimization'); 5107 } 5108 } 5109 5110 /** 5111 * Change undo button status 5112 * @param {Boolean} enableStatus - enabled status 5113 * @ignore 5114 */ 5115 5116 }, { 5117 key: 'changeUndoButtonStatus', 5118 value: function changeUndoButtonStatus(enableStatus) { 5119 if (enableStatus) { 5120 this._els.undo.classList.add('enabled'); 5121 } else { 5122 this._els.undo.classList.remove('enabled'); 5123 } 5124 } 5125 5126 /** 5127 * Change redo button status 5128 * @param {Boolean} enableStatus - enabled status 5129 * @ignore 5130 */ 5131 5132 }, { 5133 key: 'changeRedoButtonStatus', 5134 value: function changeRedoButtonStatus(enableStatus) { 5135 if (enableStatus) { 5136 this._els.redo.classList.add('enabled'); 5137 } else { 5138 this._els.redo.classList.remove('enabled'); 5139 } 5140 } 5141 5142 /** 5143 * Change reset button status 5144 * @param {Boolean} enableStatus - enabled status 5145 * @ignore 5146 */ 5147 5148 }, { 5149 key: 'changeResetButtonStatus', 5150 value: function changeResetButtonStatus(enableStatus) { 5151 if (enableStatus) { 5152 this._els.reset.classList.add('enabled'); 5153 } else { 5154 this._els.reset.classList.remove('enabled'); 5155 } 5156 } 5157 5158 /** 5159 * Change delete-all button status 5160 * @param {Boolean} enableStatus - enabled status 5161 * @ignore 5162 */ 5163 5164 }, { 5165 key: 'changeDeleteAllButtonEnabled', 5166 value: function changeDeleteAllButtonEnabled(enableStatus) { 5167 if (enableStatus) { 5168 this._els.deleteAll.classList.add('enabled'); 5169 } else { 5170 this._els.deleteAll.classList.remove('enabled'); 5171 } 5172 } 5173 5174 /** 5175 * Change delete button status 5176 * @param {Boolean} enableStatus - enabled status 5177 * @ignore 5178 */ 5179 5180 }, { 5181 key: 'changeDeleteButtonEnabled', 5182 value: function changeDeleteButtonEnabled(enableStatus) { 5183 if (enableStatus) { 5184 this._els['delete'].classList.add('enabled'); 5185 } else { 5186 this._els['delete'].classList.remove('enabled'); 5187 } 5188 } 5189 5190 /** 5191 * Change delete button status 5192 * @param {Object} [options] - Ui setting options 5193 * @param {object} [option.loadImage] - Init default load image 5194 * @param {string} [option.initMenu] - Init start menu 5195 * @param {string} [option.menuBarPosition=bottom] - Let 5196 * @param {boolean} [option.applyCropSelectionStyle=false] - Let 5197 * @returns {Object} initialize option 5198 * @private 5199 */ 5200 5201 }, { 5202 key: '_initializeOption', 5203 value: function _initializeOption(options) { 5204 return _tuiCodeSnippet2.default.extend({ 5205 loadImage: { 5206 path: '', 5207 name: '' 5208 }, 5209 locale: {}, 5210 menuIconPath: '', 5211 menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'], 5212 initMenu: '', 5213 uiSize: { 5214 width: '100%', 5215 height: '100%' 5216 }, 5217 menuBarPosition: 'bottom' 5218 }, options); 5219 } 5220 5221 /** 5222 * Set ui container size 5223 * @param {Object} uiSize - ui dimension 5224 * @param {number} width - width 5225 * @param {number} height - height 5226 * @private 5227 */ 5228 5229 }, { 5230 key: '_setUiSize', 5231 value: function _setUiSize() { 5232 var uiSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.uiSize; 5233 5234 var elementDimension = this._selectedElement.style; 5235 elementDimension.width = uiSize.width; 5236 elementDimension.height = uiSize.height; 5237 } 5238 5239 /** 5240 * Make submenu dom element 5241 * @private 5242 */ 5243 5244 }, { 5245 key: '_makeSubMenu', 5246 value: function _makeSubMenu() { 5247 var _this = this; 5248 5249 _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { 5250 var SubComponentClass = SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, function ($0) { 5251 return $0.toUpperCase(); 5252 })]; 5253 5254 // make menu element 5255 _this._makeMenuElement(menuName); 5256 5257 // menu btn element 5258 _this._els[menuName] = _this._menuElement.querySelector('#tie-btn-' + menuName); 5259 5260 // submenu ui instance 5261 _this[menuName] = new SubComponentClass(_this._subMenuElement, { 5262 locale: _this._locale, 5263 iconStyle: _this.theme.getStyle('submenu.icon'), 5264 menuBarPosition: _this.options.menuBarPosition 5265 }); 5266 }); 5267 } 5268 5269 /** 5270 * Make primary ui dom element 5271 * @param {string|HTMLElement} element - Wrapper's element or selector 5272 * @private 5273 */ 5274 5275 }, { 5276 key: '_makeUiElement', 5277 value: function _makeUiElement(element) { 5278 var selectedElement = void 0; 5279 5280 window.snippet = _tuiCodeSnippet2.default; 5281 5282 if (element.nodeType) { 5283 selectedElement = element; 5284 } else { 5285 selectedElement = document.querySelector(element); 5286 } 5287 var selector = _util2.default.getSelector(selectedElement); 5288 5289 selectedElement.classList.add('tui-image-editor-container'); 5290 selectedElement.innerHTML = (0, _controls2.default)({ 5291 locale: this._locale, 5292 biImage: this.theme.getStyle('common.bi'), 5293 iconStyle: this.theme.getStyle('menu.icon'), 5294 loadButtonStyle: this.theme.getStyle('loadButton'),
5295 downloadButtonStyle: this.theme.getStyle('downloadButton') 5296 }) + (0, _mainContainer2.default)({ 5297 locale: this._locale, 5298 biImage: this.theme.getStyle('common.bi'), 5299 commonStyle: this.theme.getStyle('common'), 5300 headerStyle: this.theme.getStyle('header'), 5301 loadButtonStyle: this.theme.getStyle('loadButton'), 5302 downloadButtonStyle: this.theme.getStyle('downloadButton'), 5303 submenuStyle: this.theme.getStyle('submenu') 5304 }); 5305 5306 this._selectedElement = selectedElement; 5307 this._selectedElement.classList.add(this.options.menuBarPosition); 5308 5309 this._mainElement = selector('.tui-image-editor-main'); 5310 this._editorElementWrap = selector('.tui-image-editor-wrap'); 5311 this._editorElement = selector('.tui-image-editor'); 5312 this._menuElement = selector('.tui-image-editor-menu'); 5313 this._subMenuElement = selector('.tui-image-editor-submenu'); 5314 } 5315 5316 /** 5317 * Make menu ui dom element 5318 * @param {string} menuName - menu name 5319 * @private 5320 */ 5321 5322 }, { 5323 key: '_makeMenuElement', 5324 value: function _makeMenuElement(menuName) { 5325 var btnElement = document.createElement('li'); 5326 5327 var _theme$getStyle = this.theme.getStyle('menu.icon'), 5328 normal = _theme$getStyle.normal, 5329 active = _theme$getStyle.active, 5330 hover = _theme$getStyle.hover; 5331 5332 var menuItemHtml = '\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-' + menuName + '" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-' + menuName + '" class="active"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-' + menuName + '" class="hover"/>\n </svg>\n '; 5333 5334 btnElement.id = 'tie-btn-' + menuName; 5335 btnElement.className = 'tui-image-editor-item normal'; 5336 btnElement.title = this._locale.localize(menuName.replace(/^[a-z]/g, function ($0) { 5337 return $0.toUpperCase(); 5338 })); 5339 btnElement.innerHTML = menuItemHtml; 5340 5341 this._menuElement.appendChild(btnElement); 5342 } 5343 5344 /** 5345 * Add help action event 5346 * @param {string} helpName - help menu name 5347 * @private 5348 */ 5349 5350 }, { 5351 key: '_addHelpActionEvent', 5352 value: function _addHelpActionEvent(helpName) { 5353 var _this2 = this; 5354 5355 this._els[helpName].addEventListener('click', function () { 5356 _this2._actions.main[helpName](); 5357 }); 5358 } 5359 5360 /** 5361 * Add download event 5362 * @private 5363 */ 5364 5365 }, { 5366 key: '_addDownloadEvent', 5367 value: function _addDownloadEvent() { 5368 var _this3 = this; 5369 5370 _tuiCodeSnippet2.default.forEach(this._els.download, function (element) { 5371 element.addEventListener('click', function () { 5372 _this3._actions.main.download(); 5373 }); 5374 }); 5375 } 5376 5377 /** 5378 * Add load event 5379 * @private 5380 */ 5381 5382 }, { 5383 key: '_addLoadEvent', 5384 value: function _addLoadEvent() { 5385 var _this4 = this; 5386 5387 _tuiCodeSnippet2.default.forEach(this._els.load, function (element) { 5388 element.addEventListener('change', function (event) { 5389 _this4._actions.main.load(event.target.files[0]); 5390 }); 5391 }); 5392 } 5393 5394 /** 5395 * Add menu event 5396 * @param {string} menuName - menu name 5397 * @private 5398 */ 5399 5400 }, { 5401 key: '_addMenuEvent', 5402 value: function _addMenuEvent(menuName) { 5403 var _this5 = this; 5404 5405 this._els[menuName].addEventListener('click', function () { 5406 _this5.changeMenu(menuName); 5407 }); 5408 } 5409 5410 /** 5411 * Add menu event 5412 * @param {string} menuName - menu name 5413 * @private 5414 */ 5415 5416 }, { 5417 key: '_addSubMenuEvent', 5418 value: function _addSubMenuEvent(menuName) { 5419 this[menuName].addEvent(this._actions[menuName]); 5420 } 5421 5422 /** 5423 * get editor area element 5424 * @returns {HTMLElement} editor area html element 5425 * @ignore 5426 */ 5427 5428 }, { 5429 key: 'getEditorArea', 5430 value: function getEditorArea() { 5431 return this._editorElement; 5432 } 5433 5434 /** 5435 * Add event for menu items 5436 * @ignore 5437 */ 5438 5439 }, { 5440 key: 'activeMenuEvent', 5441 value: function activeMenuEvent() { 5442 var _this6 = this; 5443 5444 if (this._initMenuEvent) { 5445 return; 5446 } 5447 5448 this._addHelpActionEvent('undo'); 5449 this._addHelpActionEvent('redo'); 5450 this._addHelpActionEvent('reset'); 5451 this._addHelpActionEvent('delete'); 5452 this._addHelpActionEvent('deleteAll'); 5453 5454 this._addDownloadEvent(); 5455 5456 _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { 5457 _this6._addMenuEvent(menuName); 5458 _this6._addSubMenuEvent(menuName); 5459 }); 5460 this._initMenu(); 5461 this._initMenuEvent = true; 5462 } 5463 5464 /** 5465 * Init canvas 5466 * @ignore 5467 */ 5468 5469 }, { 5470 key: 'initCanvas', 5471 value: function initCanvas() { 5472 var _this7 = this; 5473 5474 var loadImageInfo = this._getLoadImage(); 5475 if (loadImageInfo.path) { 5476 this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(function () { 5477 _this7.activeMenuEvent(); 5478 }); 5479 } 5480 5481 this._addLoadEvent(); 5482 5483 var gridVisual = document.createElement('div'); 5484 gridVisual.className = 'tui-image-editor-grid-visual'; 5485 var grid = '<table>\n <tr><td class="dot left-top"></td><td></td><td class="dot right-top"></td></tr>\n <tr><td></td><td></td><td></td></tr>\n <tr><td class="dot left-bottom"></td><td></td><td class="dot right-bottom"></td></tr>\n </table>'; 5486 gridVisual.innerHTML = grid; 5487 this._editorContainerElement = this._editorElement.querySelector('.tui-image-editor-canvas-container'); 5488 this._editorContainerElement.appendChild(gridVisual); 5489 } 5490 5491 /** 5492 * get editor area element 5493 * @returns {Object} load image option 5494 * @private 5495 */ 5496 5497 }, { 5498 key: '_getLoadImage', 5499 value: function _getLoadImage() { 5500 return this.options.loadImage; 5501 } 5502 5503 /** 5504 * change menu 5505 * @param {string} menuName - menu name 5506 * @param {boolean} toggle - whether toogle or not 5507 * @param {boolean} discardSelection - discard selection 5508 * @ignore 5509 */ 5510 5511 }, { 5512 key: 'changeMenu', 5513 value: function changeMenu(menuName) { 5514 var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; 5515 var discardSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; 5516 5517 if (!this._submenuChangeTransection) { 5518 this._submenuChangeTransection = true; 5519 this._changeMenu(menuName, toggle, discardSelection); 5520 this._submenuChangeTransection = false;
5521 } 5522 } 5523 5524 /** 5525 * change menu 5526 * @param {string} menuName - menu name 5527 * @param {boolean} toggle - whether toogle or not 5528 * @param {boolean} discardSelection - discard selection 5529 * @private 5530 */ 5531 5532 }, { 5533 key: '_changeMenu', 5534 value: function _changeMenu(menuName, toggle, discardSelection) { 5535 if (this.submenu) { 5536 this._els[this.submenu].classList.remove('active'); 5537 this._mainElement.classList.remove('tui-image-editor-menu-' + this.submenu); 5538 if (discardSelection) { 5539 this._actions.main.discardSelection(); 5540 } 5541 this._actions.main.changeSelectableAll(true); 5542 this[this.submenu].changeStandbyMode(); 5543 } 5544 5545 if (this.submenu === menuName && toggle) { 5546 this.submenu = null; 5547 } else { 5548 this._els[menuName].classList.add('active'); 5549 this._mainElement.classList.add('tui-image-editor-menu-' + menuName); 5550 this.submenu = menuName; 5551 this[this.submenu].changeStartMode(); 5552 } 5553 5554 this.resizeEditor(); 5555 } 5556 5557 /** 5558 * Init menu 5559 * @private 5560 */ 5561 5562 }, { 5563 key: '_initMenu', 5564 value: function _initMenu() { 5565 if (this.options.initMenu) { 5566 var evt = document.createEvent('MouseEvents'); 5567 evt.initEvent('click', true, false); 5568 this._els[this.options.initMenu].dispatchEvent(evt); 5569 } 5570 5571 if (this.icon) { 5572 this.icon.registDefaultIcon(); 5573 } 5574 } 5575 5576 /** 5577 * Get editor dimension 5578 * @returns {Object} - width & height of editor 5579 * @private 5580 */ 5581 5582 }, { 5583 key: '_getEditorDimension', 5584 value: function _getEditorDimension() { 5585 var maxHeight = parseFloat(this._editorContainerElement.style.maxHeight); 5586 var height = this.imageSize.newHeight > maxHeight ? maxHeight : this.imageSize.newHeight; 5587 5588 var maxWidth = parseFloat(this._editorContainerElement.style.maxWidth); 5589 var width = this.imageSize.newWidth > maxWidth ? maxWidth : this.imageSize.newWidth; 5590 5591 return { 5592 width: width, 5593 height: height 5594 }; 5595 } 5596 5597 /** 5598 * Set editor position 5599 * @param {string} menuBarPosition - top or right or bottom or left 5600 * @private 5601 */ 5602 5603 }, { 5604 key: '_setEditorPosition', 5605 value: function _setEditorPosition(menuBarPosition) { 5606 var _getEditorDimension3 = this._getEditorDimension(), 5607 width = _getEditorDimension3.width, 5608 height = _getEditorDimension3.height; 5609 5610 var editorElementStyle = this._editorElement.style; 5611 var top = 0; 5612 var left = 0; 5613 5614 if (this.submenu) { 5615 if (menuBarPosition === 'bottom') { 5616 if (height > this._editorElementWrap.scrollHeight - 150) { 5617 top = (height - this._editorElementWrap.scrollHeight) / 2; 5618 } else { 5619 top = 150 / 2 * -1; 5620 } 5621 } else if (menuBarPosition === 'top') { 5622 if (height > this._editorElementWrap.offsetHeight - 150) { 5623 top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2; 5624 } else { 5625 top = 150 / 2; 5626 } 5627 } else if (menuBarPosition === 'left') { 5628 if (width > this._editorElementWrap.offsetWidth - 248) { 5629 left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2; 5630 } else { 5631 left = 248 / 2; 5632 } 5633 } else if (menuBarPosition === 'right') { 5634 if (width > this._editorElementWrap.scrollWidth - 248) { 5635 left = (width - this._editorElementWrap.scrollWidth) / 2; 5636 } else { 5637 left = 248 / 2 * -1; 5638 } 5639 } 5640 } 5641 editorElementStyle.top = top + 'px'; 5642 editorElementStyle.left = left + 'px'; 5643 } 5644 }]); 5645 5646 return Ui; 5647 }(); 5648 5649 exports.default = Ui; 5650 5651/***/ }), 5652/* 75 */
5653/***/ (function(module, exports) { 5654 5655 'use strict'; 5656 5657 Object.defineProperty(exports, "__esModule", { 5658 value: true 5659 }); 5660 5661 exports.default = function (_ref) { 5662 var locale = _ref.locale, 5663 biImage = _ref.biImage, 5664 commonStyle = _ref.commonStyle, 5665 headerStyle = _ref.headerStyle, 5666 loadButtonStyle = _ref.loadButtonStyle, 5667 downloadButtonStyle = _ref.downloadButtonStyle, 5668 submenuStyle = _ref.submenuStyle; 5669 return '\n <div class="tui-image-editor-main-container" style="' + commonStyle + '">\n <div class="tui-image-editor-header" style="' + headerStyle + '">\n <div class="tui-image-editor-header-logo">\n <img src="' + biImage + '" />\n </div>\n <div class="tui-image-editor-header-buttons">\n <div style="' + loadButtonStyle + '">\n ' + locale.localize('Load') + '\n <input type="file" class="tui-image-editor-load-btn" />\n </div>\n <button class="tui-image-editor-download-btn" style="' + downloadButtonStyle + '">\n ' + locale.localize('Download') + '\n </button>\n </div>\n </div>\n <div class="tui-image-editor-main">\n <div class="tui-image-editor-submenu">\n <div class="tui-image-editor-submenu-style" style="' + submenuStyle + '"></div>\n </div>\n <div class="tui-image-editor-wrap">\n <div class="tui-image-editor-size-wrap">\n <div class="tui-image-editor-align-wrap">\n <div class="tui-image-editor"></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n'; 5670 }; 5671 5672/***/ }), 5673/* 76 */ 5674/***/ (function(module, exports) { 5675 5676 'use strict'; 5677 5678 Object.defineProperty(exports, "__esModule", { 5679 value: true 5680 }); 5681 5682 exports.default = function (_ref) { 5683 var locale = _ref.locale, 5684 biImage = _ref.biImage, 5685 _ref$iconStyle = _ref.iconStyle, 5686 normal = _ref$iconStyle.normal, 5687 hover = _ref$iconStyle.hover, 5688 disabled = _ref$iconStyle.disabled, 5689 loadButtonStyle = _ref.loadButtonStyle, 5690 downloadButtonStyle = _ref.downloadButtonStyle; 5691 return '\n <div class="tui-image-editor-controls">\n <div class="tui-image-editor-controls-logo">\n <img src="' + biImage + '" />\n </div>\n <ul class="tui-image-editor-menu">\n <li id="tie-btn-undo" class="tui-image-editor-item" title="' + locale.localize('Undo') + '">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-undo" class="enabled"/>\n <use xlink:href="' + disabled.path + '#' + disabled.name + '-ic-undo" class="normal"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-undo" class="hover"/>\n </svg>\n </li>\n <li id="tie-btn-redo" class="tui-image-editor-item" title="' + locale.localize('Redo') + '">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-redo" class="enabled"/>\n <use xlink:href="' + disabled.path + '#' + disabled.name + '-ic-redo" class="normal"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-redo" class="hover"/>\n </svg>\n </li>\n <li id="tie-btn-reset" class="tui-image-editor-item" title="' + locale.localize('Reset') + '">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-reset" class="enabled"/>\n <use xlink:href="' + disabled.path + '#' + disabled.name + '-ic-reset" class="normal"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-reset" class="hover"/>\n </svg>\n </li>\n <li class="tui-image-editor-item">\n <div class="tui-image-editor-icpartition"></div>\n </li>\n <li id="tie-btn-delete" class="tui-image-editor-item" title="' + locale.localize('Delete') + '">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-delete" class="enabled"/>\n <use xlink:href="' + disabled.path + '#' + disabled.name + '-ic-delete" class="normal"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-delete" class="hover"/>
5691\n </svg>\n </li>\n <li id="tie-btn-delete-all" class="tui-image-editor-item" title="' + locale.localize('Delete-all') + '">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-delete-all" class="enabled"/>\n <use xlink:href="' + disabled.path + '#' + disabled.name + '-ic-delete-all" class="normal"/>\n <use xlink:href="' + hover.path + '#' + hover.name + '-ic-delete-all" class="hover"/>\n </svg>\n </li>\n <li class="tui-image-editor-item">\n <div class="tui-image-editor-icpartition"></div>\n </li>\n </ul>\n\n <div class="tui-image-editor-controls-buttons">\n <div style="' + loadButtonStyle + '">\n ' + locale.localize('Load') + '\n <input type="file" class="tui-image-editor-load-btn" />\n </div>\n <button class="tui-image-editor-download-btn" style="' + downloadButtonStyle + '">\n ' + locale.localize('Download') + '\n </button>\n </div>\n </div>\n'; 5692 }; 5693 5694/***/ }), 5695/* 77 */ 5696/***/ (function(module, exports, __webpack_require__) { 5697 5698 'use strict'; 5699 5700 Object.defineProperty(exports, "__esModule", { 5701 value: true 5702 }); 5703 5704 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; }; }(); 5705 5706 var _tuiCodeSnippet = __webpack_require__(3); 5707 5708 var _util = __webpack_require__(72); 5709 5710 var _style = __webpack_require__(78); 5711 5712 var _style2 = _interopRequireDefault(_style); 5713 5714 var _standard = __webpack_require__(79); 5715 5716 var _standard2 = _interopRequireDefault(_standard); 5717 5718 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 5719 5720 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 5721 5722 /** 5723 * Theme manager 5724 * @class 5725 * @param {Object} customTheme - custom theme 5726 * @ignore 5727 */ 5728 var Theme = function () { 5729 function Theme(customTheme) { 5730 _classCallCheck(this, Theme); 5731 5732 this.styles = this._changeToObject((0, _tuiCodeSnippet.extend)(_standard2.default, customTheme)); 5733 (0, _util.styleLoad)(this._styleMaker()); 5734 } 5735 5736 /** 5737 * Get a Style cssText or StyleObject 5738 * @param {string} type - style type 5739 * @returns {string|object} - cssText or StyleObject 5740 */ 5741 5742 5743 _createClass(Theme, [{ 5744 key: 'getStyle', 5745 value: function getStyle(type) { 5746 // eslint-disable-line 5747 var result = null; 5748 var firstProperty = type.replace(/\..+$/, ''); 5749 var option = this.styles[type]; 5750 switch (type) { 5751 case 'common.bi': 5752 result = this.styles[type].image; 5753 break; 5754 case 'menu.icon': 5755 case 'submenu.icon': 5756 result = { 5757 active: this.styles[firstProperty + '.activeIcon'], 5758 normal: this.styles[firstProperty + '.normalIcon'], 5759 hover: this.styles[firstProperty + '.hoverIcon'], 5760 disabled: this.styles[firstProperty + '.disabledIcon'] 5761 }; 5762 break; 5763 case 'submenu.label': 5764 result = { 5765 active: this._makeCssText(this.styles[firstProperty + '.activeLabel']), 5766 normal: this._makeCssText(this.styles[firstProperty + '.normalLabel']) 5767 }; 5768 break; 5769 case 'submenu.partition': 5770 result = { 5771 vertical: this._makeCssText((0, _tuiCodeSnippet.extend)({}, option, { borderLeft: '1px solid ' + option.color })), 5772 horizontal: this._makeCssText((0, _tuiCodeSnippet.extend)({}, option, { borderBottom: '1px solid ' + option.color })) 5773 }; 5774 break; 5775 5776 case 'range.disabledPointer': 5777 case 'range.disabledBar': 5778 case 'range.disabledSubbar': 5779 case 'range.pointer': 5780 case 'range.bar': 5781 case 'range.subbar': 5782 option.backgroundColor = option.color;
5783 result = this._makeCssText(option); 5784 break; 5785 default: 5786 result = this._makeCssText(option); 5787 break; 5788 } 5789 5790 return result; 5791 } 5792 5793 /** 5794 * Make css resource 5795 * @returns {string} - serialized css text 5796 * @private 5797 */ 5798 5799 }, { 5800 key: '_styleMaker', 5801 value: function _styleMaker() { 5802 var submenuLabelStyle = this.getStyle('submenu.label'); 5803 var submenuPartitionStyle = this.getStyle('submenu.partition'); 5804 5805 return (0, _style2.default)({ 5806 subMenuLabelActive: submenuLabelStyle.active, 5807 subMenuLabelNormal: submenuLabelStyle.normal, 5808 submenuPartitionVertical: submenuPartitionStyle.vertical, 5809 submenuPartitionHorizontal: submenuPartitionStyle.horizontal, 5810 biSize: this.getStyle('common.bisize'), 5811 subMenuRangeTitle: this.getStyle('range.title'), 5812 submenuRangePointer: this.getStyle('range.pointer'), 5813 submenuRangeBar: this.getStyle('range.bar'), 5814 submenuRangeSubbar: this.getStyle('range.subbar'), 5815 5816 submenuDisabledRangePointer: this.getStyle('range.disabledPointer'), 5817 submenuDisabledRangeBar: this.getStyle('range.disabledBar'), 5818 submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'), 5819 5820 submenuRangeValue: this.getStyle('range.value'), 5821 submenuColorpickerTitle: this.getStyle('colorpicker.title'), 5822 submenuColorpickerButton: this.getStyle('colorpicker.button'), 5823 submenuCheckbox: this.getStyle('checkbox'), 5824 menuIconSize: this.getStyle('menu.iconSize'), 5825 submenuIconSize: this.getStyle('submenu.iconSize') 5826 }); 5827 } 5828 5829 /** 5830 * Change to low dimensional object. 5831 * @param {object} styleOptions - style object of user interface 5832 * @returns {object} low level object for style apply 5833 * @private 5834 */ 5835 5836 }, { 5837 key: '_changeToObject', 5838 value: function _changeToObject(styleOptions) { 5839 var styleObject = {}; 5840 (0, _tuiCodeSnippet.forEach)(styleOptions, function (value, key) { 5841 var keyExplode = key.match(/^(.+)\.([a-z]+)$/i); 5842 var property = keyExplode[1], 5843 subProperty = keyExplode[2]; 5844 5845 5846 if (!styleObject[property]) { 5847 styleObject[property] = {}; 5848 } 5849 styleObject[property][subProperty] = value; 5850 }); 5851 5852 return styleObject; 5853 } 5854 5855 /** 5856 * Style object to Csstext serialize 5857 * @param {object} styleObject - style object 5858 * @returns {string} - css text string 5859 * @private 5860 */ 5861 5862 }, { 5863 key: '_makeCssText', 5864 value: function _makeCssText(styleObject) { 5865 var _this = this; 5866 5867 var converterStack = []; 5868 5869 (0, _tuiCodeSnippet.forEach)(styleObject, function (value, key) { 5870 if (['backgroundImage'].indexOf(key) > -1 && value !== 'none') { 5871 value = 'url(' + value + ')'; 5872 } 5873 5874 converterStack.push(_this._toUnderScore(key) + ': ' + value); 5875 }); 5876 5877 return converterStack.join(';'); 5878 } 5879 5880 /** 5881 * Camel key string to Underscore string 5882 * @param {string} targetString - change target 5883 * @returns {string} 5884 * @private 5885 */ 5886 5887 }, { 5888 key: '_toUnderScore', 5889 value: function _toUnderScore(targetString) { 5890 return targetString.replace(/([A-Z])/g, function ($0, $1) { 5891 return '-' + $1.toLowerCase(); 5892 }); 5893 } 5894 }]); 5895 5896 return Theme; 5897 }(); 5898 5899 exports.default = Theme; 5900 5901/***/ }), 5902/* 78 */ 5903/***/ (function(module, exports) { 5904 5905 "use strict"; 5906 5907 Object.defineProperty(exports, "__esModule", { 5908 value: true 5909 }); 5910 5911 exports.default = function (_ref) { 5912 var subMenuLabelActive = _ref.subMenuLabelActive, 5913 subMenuLabelNormal = _ref.subMenuLabelNormal, 5914 subMenuRangeTitle = _ref.subMenuRangeTitle, 5915 submenuPartitionVertical = _ref.submenuPartitionVertical, 5916 submenuPartitionHorizontal = _ref.submenuPartitionHorizontal, 5917 submenuCheckbox = _ref.submenuCheckbox, 5918 submenuRangePointer = _ref.submenuRangePointer, 5919 submenuRangeValue = _ref.submenuRangeValue, 5920 submenuColorpickerTitle = _ref.submenuColorpickerTitle, 5921 submenuColorpickerButton = _ref.submenuColorpickerButton, 5922 submenuRangeBar = _ref.submenuRangeBar, 5923 submenuRangeSubbar = _ref.submenuRangeSubbar, 5924 submenuDisabledRangePointer = _ref.submenuDisabledRangePointer, 5925 submenuDisabledRangeBar = _ref.submenuDisabledRangeBar, 5926 submenuDisabledRangeSubbar = _ref.submenuDisabledRangeSubbar, 5927 submenuIconSize = _ref.submenuIconSize, 5928 menuIconSize = _ref.menuIconSize, 5929 biSize = _ref.biSize; 5930 return "\n #tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n #tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] label,\n #tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] label,\n #tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] label,\n #tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] label,\n #tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] label,\n #tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] label,\n #tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] label,\n #tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] label,\n #tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n #tie-draw-line-select-button.line .tui-image-editor-button.line label,\n #tie-draw-line-select-button.free .tui-image-editor-button.free label,\n #tie-flip-button.flipX .tui-image-editor-button.flipX label,\n #tie-flip-button.flipY .tui-image-editor-button.flipY label,\n #tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n #tie-crop-button .tui-image-editor-button.apply.active label,\n #tie-crop-preset-button .tui-image-editor-button.preset.active label,\n #tie-shape-button.rect .tui-image-editor-button.rect label,\n #tie-shape-button.circle .tui-image-editor-button.circle label,\n #tie-shape-button.triangle .tui-image-editor-button.triangle label,\n #tie-text-effect-button .tui-image-editor-button.active label,\n #tie-text-align-button.left .tui-image-editor-button.left label,\n #tie-text-align-button.center .tui-image-editor-button.center label,\n #tie-text-align-button.right .tui-image-editor-button.right label,\n #tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox input + label {\n " + subMenuLabelActive + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {\n " + subMenuLabelNormal + "\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label {\n " + subMenuRangeTitle + "\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n " + submenuPartitionVertical + "\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n " + submenuPartitionHorizontal + "\n }\n .tui-image-editor-container .tui-image-editor-checkbox input + label:before {\n " + submenuCheckbox + "\n }\n .tui-image-editor-container .tui-image-editor-checkbox input:checked + label:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n " + submenuRangePointer + "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n " + submenuRangeBar + "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n " + submenuRangeSubbar + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n " + submenuDisabledRangePointer + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n " + submenuDisabledRangeSubbar + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n " + submenuDisabledRangeBar + "\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n " + submenuRangeValue + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n " + submenuColorpickerTitle + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n " + submenuColorpickerButton + "\n }\n .tui-image-editor-container .svg_ic-menu {\n " + menuIconSize + "\n }\n .tui-image-editor-container .svg_ic-submenu {\n " + submenuIconSize + "\n }
5930\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n " + biSize + "\n }\n\n"; 5931 }; 5932 5933/***/ }), 5934/* 79 */ 5935/***/ (function(module, exports) { 5936 5937 'use strict'; 5938 5939 Object.defineProperty(exports, "__esModule", { 5940 value: true 5941 }); 5942 /** 5943 * @fileoverview The standard theme 5944 * @author NHN Ent. FE Development Team <[email protected]> 5945 */ 5946 5947 /** 5948 * Full configuration for theme.<br> 5949 * @typedef {object} themeConfig 5950 * @property {string} common.bi.image - Brand icon image 5951 * @property {string} common.bisize.width - Icon image width 5952 * @property {string} common.bisize.height - Icon Image Height 5953 * @property {string} common.backgroundImage - Background image 5954 * @property {string} common.backgroundColor - Background color 5955 * @property {string} common.border - Full area border style 5956 * @property {string} header.backgroundImage - header area background 5957 * @property {string} header.backgroundColor - header area background color 5958 * @property {string} header.border - header area border style 5959 * @property {string} loadButton.backgroundColor - load button background color 5960 * @property {string} loadButton.border - load button border style 5961 * @property {string} loadButton.color - load button foreground color 5962 * @property {string} loadButton.fontFamily - load button font type 5963 * @property {string} loadButton.fontSize - load button font size 5964 * @property {string} downloadButton.backgroundColor - download button background color 5965 * @property {string} downloadButton.border - download button border style 5966 * @property {string} downloadButton.color - download button foreground color 5967 * @property {string} downloadButton.fontFamily - download button font type 5968 * @property {string} downloadButton.fontSize - download button font size 5969 * @property {string} menu.normalIcon.path - Menu default icon svg bundle file path 5970 * @property {string} menu.normalIcon.name - Menu default icon svg bundle name 5971 * @property {string} menu.activeIcon.path - Menu active icon svg bundle file path 5972 * @property {string} menu.activeIcon.name - Menu active icon svg bundle name 5973 * @property {string} menu.iconSize.width - Menu icon Size Width 5974 * @property {string} menu.iconSize.height - Menu Icon Size Height 5975 * @property {string} submenu.backgroundColor - Sub-menu area background color 5976 * @property {string} submenu.partition.color - Submenu partition line color 5977 * @property {string} submenu.normalIcon.path - Submenu default icon svg bundle file path 5978 * @property {string} submenu.normalIcon.name - Submenu default icon svg bundle name 5979 * @property {string} submenu.activeIcon.path - Submenu active icon svg bundle file path 5980 * @property {string} submenu.activeIcon.name - Submenu active icon svg bundle name 5981 * @property {string} submenu.iconSize.width - Submenu icon Size Width 5982 * @property {string} submenu.iconSize.height - Submenu Icon Size Height 5983 * @property {string} submenu.normalLabel.color - Submenu default label color 5984 * @property {string} submenu.normalLabel.fontWeight - Sub Menu Default Label Font Thickness 5985 * @property {string} submenu.activeLabel.color - Submenu active label color 5986 * @property {string} submenu.activeLabel.fontWeight - Submenu active label Font thickness 5987 * @property {string} checkbox.border - Checkbox border style 5988 * @property {string} checkbox.backgroundColor - Checkbox background color 5989 * @property {string} range.pointer.color - range control pointer color 5990 * @property {string} range.bar.color - range control bar color 5991 * @property {string} range.subbar.color - range control subbar color 5992 * @property {string} range.value.color - range number box font color 5993 * @property {string} range.value.fontWeight - range number box font thickness 5994 * @property {string} range.value.fontSize - range number box font size 5995 * @property {string} range.value.border - range number box border style 5996 * @property {string} range.value.backgroundColor - range number box background color 5997 * @property {string} range.title.color - range title font color 5998 * @property {string} range.title.fontWeight - range title font weight 5999 * @property {string} colorpicker.button.border - colorpicker button border style 6000 * @property {string} colorpicker.title.color - colorpicker button title font color 6001 * @example 6002 // default keys and styles 6003 var customTheme = { 6004 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', 6005 'common.bisize.width': '251px', 6006 'common.bisize.height': '21px', 6007 'common.backgroundImage': 'none', 6008 'common.backgroundColor': '#1e1e1e', 6009 'common.border': '0px', 6010 6011 // header 6012 'header.backgroundImage': 'none', 6013 'header.backgroundColor': 'transparent', 6014 'header.border': '0px', 6015 6016 // load button 6017 'loadButton.backgroundColor': '#fff', 6018 'loadButton.border': '1px solid #ddd', 6019 'loadButton.color': '#222', 6020 'loadButton.fontFamily': 'NotoSans, sans-serif', 6021 'loadButton.fontSize': '12px', 6022 6023 // download button 6024 'downloadButton.backgroundColor': '#fdba3b', 6025 'downloadButton.border': '1px solid #fdba3b', 6026 'downloadButton.color': '#fff', 6027 'downloadButton.fontFamily': 'NotoSans, sans-serif', 6028 'downloadButton.fontSize': '12px', 6029 6030 // main icons 6031 'menu.normalIcon.path': '../dist/svg/icon-b.svg', 6032 'menu.normalIcon.name': 'icon-b', 6033 'menu.activeIcon.path': '../dist/svg/icon-a.svg', 6034 'menu.activeIcon.name': 'icon-a', 6035 'menu.iconSize.width': '24px', 6036 'menu.iconSize.height': '24px', 6037 6038 // submenu primary color 6039 'submenu.backgroundColor': '#1e1e1e', 6040 'submenu.partition.color': '#858585', 6041 6042 // submenu icons 6043 'submenu.normalIcon.path': '../dist/svg/icon-a.svg', 6044 'submenu.normalIcon.name': 'icon-a', 6045 'submenu.activeIcon.path': '../dist/svg/icon-c.svg', 6046 'submenu.activeIcon.name': 'icon-c', 6047 'submenu.iconSize.width': '32px', 6048 'submenu.iconSize.height': '32px', 6049 6050 // submenu labels 6051 'submenu.normalLabel.color': '#858585', 6052 'submenu.normalLabel.fontWeight': 'lighter', 6053 'submenu.activeLabel.color': '#fff', 6054 'submenu.activeLabel.fontWeight': 'lighter', 6055 6056 // checkbox style 6057 'checkbox.border': '1px solid #ccc', 6058 'checkbox.backgroundColor': '#fff', 6059 6060 // rango style 6061 'range.pointer.color': '#fff', 6062 'range.bar.color': '#666', 6063 'range.subbar.color': '#d1d1d1', 6064 'range.value.color': '#fff', 6065 'range.value.fontWeight': 'lighter', 6066 'range.value.fontSize': '11px', 6067 'range.value.border': '1px solid #353535', 6068 'range.value.backgroundColor': '#151515', 6069 'range.title.color': '#fff', 6070 'range.title.fontWeight': 'lighter', 6071 6072 // colorpicker style 6073 'colorpicker.button.border': '1px solid #1e1e1e', 6074 'colorpicker.title.color': '#fff' 6075 }; 6076 */ 6077 exports.default = { 6078 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', 6079 'common.bisize.width': '251px', 6080 'common.bisize.height': '21px', 6081 'common.backgroundImage': 'none', 6082 'common.backgroundColor': '#1e1e1e', 6083 'common.border': '0px', 6084 6085 // header 6086 'header.backgroundImage': 'none', 6087 'header.backgroundColor': 'transparent', 6088 'header.border': '0px', 6089 6090 // load button 6091 'loadButton.backgroundColor': '#fff', 6092 'loadButton.border': '1px solid #ddd', 6093 'loadButton.color': '#222', 6094 'loadButton.fontFamily': '\'Noto Sans\', sans-serif', 6095 'loadButton.fontSize': '12px', 6096 6097 // download button 6098 'downloadButton.backgroundColor': '#fdba3b', 6099 'downloadButton.border': '1px solid #fdba3b', 6100 'downloadButton.color': '#fff', 6101 'downloadButton.fontFamily': '\'Noto Sans\', sans-serif', 6102 'downloadButton.fontSize': '12px', 6103 6104 // main icons 6105 'menu.normalIcon.path': 'icon-d.svg', 6106 'menu.normalIcon.name': 'icon-d', 6107 'menu.activeIcon.path': 'icon-b.svg', 6108 'menu.activeIcon.name': 'icon-b', 6109 'menu.disabledIcon.path': 'icon-a.svg', 6110 'menu.disabledIcon.name': 'icon-a', 6111 'menu.hoverIcon.path': 'icon-c.svg', 6112 'menu.hoverIcon.name': 'icon-c', 6113 'menu.iconSize.width': '24px', 6114 'menu.iconSize.height': '24px', 6115 6116 // submenu primary color 6117 'submenu.backgroundColor': '#1e1e1e', 6118 'submenu.partition.color': '#3c3c3c', 6119 6120 // submenu icons 6121 'submenu.normalIcon.path': 'icon-d.svg', 6122 'submenu.normalIcon.name': 'icon-d', 6123 'submenu.activeIcon.path': 'icon-c.svg', 6124 'submenu.activeIcon.name': 'icon-c', 6125 'submenu.iconSize.width': '32px', 6126 'submenu.iconSize.height': '32px', 6127 6128 // submenu labels 6129 'submenu.normalLabel.color': '#8a8a8a', 6130 'submenu.normalLabel.fontWeight': 'lighter', 6131 'submenu.activeLabel.color': '#fff', 6132 'submenu.activeLabel.fontWeight': 'lighter', 6133 6134 // checkbox style 6135 'checkbox.border': '0px', 6136 'checkbox.backgroundColor': '#fff', 6137 6138 // range style 6139 'range.pointer.color': '#fff', 6140 'range.bar.color': '#666', 6141 'range.subbar.color': '#d1d1d1', 6142 6143 'range.disabledPointer.color': '#414141', 6144 'range.disabledBar.color': '#282828', 6145 'range.disabledSubbar.color': '#414141', 6146 6147 'range.value.color': '#fff', 6148 'range.value.fontWeight': 'lighter', 6149 'range.value.fontSize': '11px', 6150 'range.value.border': '1px solid #353535', 6151 'range.value.backgroundColor': '#151515', 6152 'range.title.color': '#fff', 6153 'range.title.fontWeight': 'lighter', 6154 6155 // colorpicker style 6156 'colorpicker.button.border': '1px solid #1e1e1e', 6157 'colorpicker.title.color': '#fff' 6158 }; 6159 6160/***/ }), 6161/* 80 */ 6162/***/ (function(module, exports, __webpack_require__) { 6163 6164 'use strict'; 6165 6166 Object.defineProperty(exports, "__esModule", { 6167 value: true 6168 }); 6169 6170 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; }; }(); 6171 6172 var _colorpicker = __webpack_require__(81); 6173 6174 var _colorpicker2 = _interopRequireDefault(_colorpicker); 6175 6176 var _range = __webpack_require__(83); 6177 6178 var _range2 = _interopRequireDefault(_range); 6179 6180 var _submenuBase = __webpack_require__(84); 6181 6182 var _submenuBase2 = _interopRequireDefault(_submenuBase); 6183 6184 var _shape = __webpack_require__(85); 6185 6186 var _shape2 = _interopRequireDefault(_shape); 6187 6188 var _util = __webpack_require__(72); 6189 6190 var _consts = __webpack_require__(73); 6191 6192 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 6193 6194 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6195 6196 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; } 6197 6198 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, { c
6198onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 6199 6200 var SHAPE_DEFAULT_OPTION = { 6201 stroke: '#ffbb3b', 6202 fill: '', 6203 strokeWidth: 3 6204 }; 6205 6206 /** 6207 * Shape ui class 6208 * @class 6209 * @ignore 6210 */ 6211 6212 var Shape = function (_Submenu) { 6213 _inherits(Shape, _Submenu); 6214 6215 function Shape(subMenuElement, _ref) { 6216 var locale = _ref.locale, 6217 iconStyle = _ref.iconStyle, 6218 menuBarPosition = _ref.menuBarPosition; 6219 6220 _classCallCheck(this, Shape); 6221 6222 var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, subMenuElement, { 6223 locale: locale, 6224 name: 'shape', 6225 iconStyle: iconStyle, 6226 menuBarPosition: menuBarPosition, 6227 templateHtml: _shape2.default 6228 })); 6229 6230 _this.type = null; 6231 _this.options = SHAPE_DEFAULT_OPTION; 6232 6233 _this._els = { 6234 shapeSelectButton: _this.selector('#tie-shape-button'), 6235 shapeColorButton: _this.selector('#tie-shape-color-button'), 6236 strokeRange: new _range2.default(_this.selector('#tie-stroke-range'), _consts.defaultShapeStrokeValus), 6237 strokeRangeValue: _this.selector('#tie-stroke-range-value'), 6238 fillColorpicker: new _colorpicker2.default(_this.selector('#tie-color-fill'), '', _this.toggleDirection), 6239 strokeColorpicker: new _colorpicker2.default(_this.selector('#tie-color-stroke'), '#ffbb3b', _this.toggleDirection) 6240 }; 6241 6242 _this.colorPickerControls.push(_this._els.fillColorpicker); 6243 _this.colorPickerControls.push(_this._els.strokeColorpicker); 6244 return _this; 6245 } 6246 6247 /** 6248 * Add event for shape 6249 * @param {Object} actions - actions for shape 6250 * @param {Function} actions.changeShape - change shape mode 6251 * @param {Function} actions.setDrawingShape - set dreawing shape 6252 */ 6253 6254 6255 _createClass(Shape, [{ 6256 key: 'addEvent', 6257 value: function addEvent(actions) { 6258 this.actions = actions; 6259 6260 this._els.shapeSelectButton.addEventListener('click', this._changeShapeHandler.bind(this)); 6261 this._els.strokeRange.on('change', this._changeStrokeRangeHandler.bind(this)); 6262 this._els.fillColorpicker.on('change', this._changeFillColorHandler.bind(this)); 6263 this._els.strokeColorpicker.on('change', this._changeStrokeColorHandler.bind(this)); 6264 this._els.fillColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this)); 6265 this._els.strokeColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this)); 6266 this._els.strokeRangeValue.value = this._els.strokeRange.value; 6267 this._els.strokeRangeValue.setAttribute('readonly', true); 6268 } 6269 6270 /** 6271 * Set Shape status 6272 * @param {Object} options - options of shape status 6273 * @param {string} strokeWidth - stroke width 6274 * @param {string} strokeColor - stroke color 6275 * @param {string} fillColor - fill color 6276 */ 6277 6278 }, { 6279 key: 'setShapeStatus', 6280 value: function setShapeStatus(_ref2) { 6281 var strokeWidth = _ref2.strokeWidth, 6282 strokeColor = _ref2.strokeColor, 6283 fillColor = _ref2.fillColor; 6284 6285 this._els.strokeRange.value = strokeWidth; 6286 this._els.strokeRange.trigger('change'); 6287 6288 this._els.strokeColorpicker.color = strokeColor; 6289 this._els.fillColorpicker.color = fillColor; 6290 this.options.stroke = strokeColor; 6291 this.options.fill = fillColor; 6292 this.options.strokeWidth = strokeWidth; 6293 } 6294 6295 /** 6296 * Executed when the menu starts. 6297 */ 6298 6299 }, { 6300 key: 'changeStartMode', 6301 value: function changeStartMode() { 6302 this.actions.stopDrawingMode(); 6303 } 6304 6305 /** 6306 * Returns the menu to its default state. 6307 */ 6308 6309 }, { 6310 key: 'changeStandbyMode', 6311 value: function changeStandbyMode() { 6312 this.type = null; 6313 this.actions.changeSelectableAll(true); 6314 this._els.shapeSelectButton.classList.remove('circle'); 6315 this._els.shapeSelectButton.classList.remove('triangle'); 6316 this._els.shapeSelectButton.classList.remove('rect'); 6317 } 6318 6319 /** 6320 * set range stroke max value 6321 * @param {number} maxValue - expect max value for change 6322 */ 6323 6324 }, { 6325 key: 'setMaxStrokeValue', 6326 value: function setMaxStrokeValue(maxValue) { 6327 var strokeMaxValue = maxValue; 6328 if (strokeMaxValue <= 0) { 6329 strokeMaxValue = _consts.defaultShapeStrokeValus.max; 6330 } 6331 this._els.strokeRange.max = strokeMaxValue; 6332 } 6333 6334 /** 6335 * Set stroke value 6336 * @param {number} value - expect value for strokeRange change 6337 */ 6338 6339 }, { 6340 key: 'setStrokeValue', 6341 value: function setStrokeValue(value) { 6342 this._els.strokeRange.value = value; 6343 this._els.strokeRange.trigger('change'); 6344 } 6345 6346 /** 6347 * Get stroke value 6348 * @returns {number} - stroke range value 6349 */ 6350 6351 }, { 6352 key: 'getStrokeValue', 6353 value: function getStrokeValue() { 6354 return this._els.strokeRange.value; 6355 } 6356 6357 /** 6358 * Change icon color 6359 * @param {object} event - add button event object 6360 * @private 6361 */ 6362 6363 }, { 6364 key: '_changeShapeHandler', 6365 value: function _changeShapeHandler(event) { 6366 var button = event.target.closest('.tui-image-editor-button'); 6367 if (button) { 6368 this.actions.stopDrawingMode(); 6369 this.actions.discardSelection(); 6370 var shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']); 6371
6372 if (this.type === shapeType) { 6373 this.changeStandbyMode(); 6374 6375 return; 6376 } 6377 this.changeStandbyMode(); 6378 this.type = shapeType; 6379 event.currentTarget.classList.add(shapeType); 6380 this.actions.changeSelectableAll(false); 6381 this.actions.modeChange('shape'); 6382 } 6383 } 6384 6385 /** 6386 * Change stroke range 6387 * @param {number} value - stroke range value 6388 * @private 6389 */ 6390 6391 }, { 6392 key: '_changeStrokeRangeHandler', 6393 value: function _changeStrokeRangeHandler(value) { 6394 this.options.strokeWidth = (0, _util.toInteger)(value); 6395 this._els.strokeRangeValue.value = (0, _util.toInteger)(value); 6396 6397 this.actions.changeShape({ 6398 strokeWidth: value 6399 }); 6400 6401 this.actions.setDrawingShape(this.type, this.options); 6402 } 6403 6404 /** 6405 * Change shape color 6406 * @param {string} color - fill color 6407 * @private 6408 */ 6409 6410 }, { 6411 key: '_changeFillColorHandler', 6412 value: function _changeFillColorHandler(color) { 6413 color = color || 'transparent'; 6414 this.options.fill = color; 6415 this.actions.changeShape({ 6416 fill: color 6417 }); 6418 } 6419 6420 /** 6421 * Change shape stroke color 6422 * @param {string} color - fill color 6423 * @private 6424 */ 6425 6426 }, { 6427 key: '_changeStrokeColorHandler', 6428 value: function _changeStrokeColorHandler(color) { 6429 color = color || 'transparent'; 6430 this.options.stroke = color; 6431 this.actions.changeShape({ 6432 stroke: color 6433 }); 6434 } 6435 }]); 6436 6437 return Shape; 6438 }(_submenuBase2.default); 6439 6440 exports.default = Shape; 6441 6442/***/ }), 6443/* 81 */ 6444/***/ (function(module, exports, __webpack_require__) { 6445 6446 'use strict'; 6447 6448 Object.defineProperty(exports, "__esModule", { 6449 value: true 6450 }); 6451 6452 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; }; }(); 6453 6454 var _tuiCodeSnippet = __webpack_require__(3); 6455 6456 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 6457 6458 var _tuiColorPicker = __webpack_require__(82); 6459 6460 var _tuiColorPicker2 = _interopRequireDefault(_tuiColorPicker); 6461 6462 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 6463 6464 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6465 6466 var PICKER_COLOR = ['#000000', '#2a2a2a', '#545454', '#7e7e7e', '#a8a8a8', '#d2d2d2', '#ffffff', '', '#ff4040', '#ff6518', '#ffbb3b', '#03bd9e', '#00a9ff', '#515ce6', '#9e5fff', '#ff5583']; 6467 6468 /** 6469 * Colorpicker control class 6470 * @class 6471 * @ignore 6472 */ 6473 6474 var Colorpicker = function () { 6475 function Colorpicker(colorpickerElement) { 6476 var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#7e7e7e'; 6477 var toggleDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up'; 6478 6479 _classCallCheck(this, Colorpicker); 6480 6481 var title = colorpickerElement.getAttribute('title'); 6482 6483 this._show = false; 6484 6485 this._colorpickerElement = colorpickerElement; 6486 this._toggleDirection = toggleDirection; 6487 this._makePickerButtonElement(colorpickerElement, defaultColor); 6488 this._makePickerLayerElement(colorpickerElement, title); 6489 this._color = defaultColor; 6490 this.picker = _tuiColorPicker2.default.create({ 6491 container: this.pickerElement, 6492 preset: PICKER_COLOR, 6493 color: defaultColor 6494 }); 6495 6496 this._addEvent(colorpickerElement); 6497 } 6498 6499 /** 6500 * Get color 6501 * @returns {Number} color value 6502 */ 6503 6504 6505 _createClass(Colorpicker, [{ 6506 key: '_changeColorElement', 6507 6508 6509 /** 6510 * Change color element 6511 * @param {string} color color value 6512 * #private 6513 */ 6514 value: function _changeColorElement(color) { 6515 if (color) { 6516 this.colorElement.classList.remove('transparent'); 6517 this.colorElement.style.backgroundColor = color; 6518 } else { 6519 this.colorElement.style.backgroundColor = '#fff'; 6520 this.colorElement.classList.add('transparent'); 6521 } 6522 } 6523 6524 /** 6525 * Make picker button element 6526 * @param {HTMLElement} colorpickerElement color picker element 6527 * @param {string} defaultColor color value 6528 * @private 6529 */ 6530 6531 }, { 6532 key: '_makePickerButtonElement', 6533 value: function _makePickerButtonElement(colorpickerElement, defaultColor) { 6534 colorpickerElement.classList.add('tui-image-editor-button'); 6535 6536 this.colorElement = document.createElement('div'); 6537 this.colorElement.className = 'color-picker-value';
6538 if (defaultColor) { 6539 this.colorElement.style.backgroundColor = defaultColor; 6540 } else { 6541 this.colorElement.classList.add('transparent'); 6542 } 6543 } 6544 6545 /** 6546 * Make picker layer element 6547 * @param {HTMLElement} colorpickerElement color picker element 6548 * @param {string} title picker title 6549 * @private 6550 */ 6551 6552 }, { 6553 key: '_makePickerLayerElement', 6554 value: function _makePickerLayerElement(colorpickerElement, title) { 6555 var label = document.createElement('label'); 6556 var triangle = document.createElement('div'); 6557 6558 this.pickerControl = document.createElement('div'); 6559 this.pickerControl.className = 'color-picker-control'; 6560 6561 this.pickerElement = document.createElement('div'); 6562 this.pickerElement.className = 'color-picker'; 6563 6564 label.innerHTML = title; 6565 triangle.className = 'triangle'; 6566 6567 this.pickerControl.appendChild(this.pickerElement); 6568 this.pickerControl.appendChild(triangle); 6569 6570 colorpickerElement.appendChild(this.pickerControl); 6571 colorpickerElement.appendChild(this.colorElement); 6572 colorpickerElement.appendChild(label); 6573 } 6574 6575 /** 6576 * Add event 6577 * @param {HTMLElement} colorpickerElement color picker element 6578 * @private 6579 */ 6580 6581 }, { 6582 key: '_addEvent', 6583 value: function _addEvent(colorpickerElement) { 6584 var _this = this; 6585 6586 this.picker.on('selectColor', function (value) { 6587 _this._changeColorElement(value.color); 6588 _this._color = value.color; 6589 _this.fire('change', value.color); 6590 }); 6591 colorpickerElement.addEventListener('click', function (event) { 6592 var target = event.target; 6593 6594 var isInPickerControl = target && _this._isElementInColorPickerControl(target); 6595 6596 if (!isInPickerControl || isInPickerControl && _this._isPaletteButton(target)) { 6597 _this._show = !_this._show; 6598 _this.pickerControl.style.display = _this._show ? 'block' : 'none'; 6599 _this._setPickerControlPosition(); 6600 _this.fire('changeShow', _this); 6601 } 6602 event.stopPropagation(); 6603 }); 6604 document.body.addEventListener('click', function () { 6605 _this.hide(); 6606 }); 6607 } 6608 6609 /** 6610 * Check hex input or not 6611 * @param {Element} target - Event target element 6612 * @returns {boolean} 6613 * @private 6614 */ 6615 6616 }, { 6617 key: '_isPaletteButton', 6618 value: function _isPaletteButton(target) { 6619 return target.className === 'tui-colorpicker-palette-button'; 6620 } 6621 6622 /** 6623 * Check given element is in pickerControl element 6624 * @param {Element} element - element to check 6625 * @returns {boolean} 6626 * @private 6627 */ 6628 6629 }, { 6630 key: '_isElementInColorPickerControl', 6631 value: function _isElementInColorPickerControl(element) { 6632 var parentNode = element; 6633 6634 while (parentNode !== document.body) { 6635 if (!parentNode) { 6636 break; 6637 } 6638 6639 if (parentNode === this.pickerControl) { 6640 return true; 6641 } 6642 6643 parentNode = parentNode.parentNode; 6644 } 6645 6646 return false; 6647 } 6648 }, { 6649 key: 'hide', 6650 value: function hide() { 6651 this._show = false; 6652 this.pickerControl.style.display = 'none'; 6653 } 6654 6655 /** 6656 * Set picker control position 6657 * @private 6658 */ 6659 6660 }, { 6661 key: '_setPickerControlPosition', 6662 value: function _setPickerControlPosition() { 6663 var controlStyle = this.pickerControl.style; 6664 var halfPickerWidth = this._colorpickerElement.clientWidth / 2 + 2; 6665 var left = this.pickerControl.offsetWidth / 2 - halfPickerWidth; 6666 var top = (this.pickerControl.offsetHeight + 10) * -1; 6667 6668 if (this._toggleDirection === 'down') { 6669 top = 30; 6670 } 6671 6672 controlStyle.top = top + 'px'; 6673 controlStyle.left = '-' + left + 'px'; 6674 } 6675 }, { 6676 key: 'color', 6677 get: function get() { 6678 return this._color; 6679 } 6680 6681 /** 6682 * Set color 6683 * @param {string} color color value 6684 */ 6685 , 6686 set: function set(color) { 6687 this._color = color; 6688 this._changeColorElement(color); 6689 } 6690 }]); 6691 6692 return Colorpicker; 6693 }(); 6694 6695 _tuiCodeSnippet2.default.CustomEvents.mixin(Colorpicker); 6696 exports.default = Colorpicker; 6697 6698/***/ }), 6699/* 82 */
6700/***/ (function(module, exports) { 6701 6702 module.exports = __WEBPACK_EXTERNAL_MODULE_82__; 6703 6704/***/ }), 6705/* 83 */ 6706/***/ (function(module, exports, __webpack_require__) { 6707 6708 'use strict'; 6709 6710 Object.defineProperty(exports, "__esModule", { 6711 value: true 6712 }); 6713 6714 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; }; }(); 6715 6716 var _tuiCodeSnippet = __webpack_require__(3); 6717 6718 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 6719 6720 var _util = __webpack_require__(72); 6721 6722 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 6723 6724 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6725 6726 /** 6727 * Range control class 6728 * @class 6729 * @ignore 6730 */ 6731 var Range = function () { 6732 function Range(rangeElement) { 6733 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 6734 6735 _classCallCheck(this, Range); 6736 6737 this._value = options.value || 0; 6738 this.rangeElement = rangeElement; 6739 this._drawRangeElement(); 6740 6741 this.rangeWidth = (0, _util.toInteger)(window.getComputedStyle(rangeElement, null).width) - 12; 6742 this._min = options.min || 0; 6743 this._max = options.max || 100; 6744 this._absMax = this._min * -1 + this._max; 6745 this.realTimeEvent = options.realTimeEvent || false; 6746 6747 this._addClickEvent(); 6748 this._addDragEvent(); 6749 this.value = options.value; 6750 this.trigger('change'); 6751 } 6752 6753 /** 6754 * Set range max value and re position cursor 6755 * @param {number} maxValue - max value 6756 */ 6757 6758 6759 _createClass(Range, [{ 6760 key: 'trigger', 6761 6762 6763 /** 6764 * event tirigger 6765 * @param {string} type - type 6766 */ 6767 value: function trigger(type) { 6768 this.fire(type, this._value); 6769 } 6770 6771 /** 6772 * Make range element 6773 * @private 6774 */ 6775 6776 }, { 6777 key: '_drawRangeElement', 6778 value: function _drawRangeElement() { 6779 this.rangeElement.classList.add('tui-image-editor-range'); 6780 6781 this.bar = document.createElement('div'); 6782 this.bar.className = 'tui-image-editor-virtual-range-bar'; 6783 6784 this.subbar = document.createElement('div'); 6785 this.subbar.className = 'tui-image-editor-virtual-range-subbar'; 6786 6787 this.pointer = document.createElement('div'); 6788 this.pointer.className = 'tui-image-editor-virtual-range-pointer'; 6789 6790 this.bar.appendChild(this.subbar); 6791 this.bar.appendChild(this.pointer); 6792 this.rangeElement.appendChild(this.bar); 6793 } 6794 6795 /** 6796 * Add Range click event 6797 * @private 6798 */ 6799 6800 }, { 6801 key: '_addClickEvent', 6802 value: function _addClickEvent() { 6803 var _this = this; 6804 6805 this.rangeElement.addEventListener('click', function (event) { 6806 event.stopPropagation(); 6807 if (event.target.className !== 'tui-image-editor-range') { 6808 return; 6809 } 6810 var touchPx = event.offsetX; 6811 var ratio = touchPx / _this.rangeWidth; 6812 var value = _this._absMax * ratio + _this._min; 6813 _this.pointer.style.left = ratio * _this.rangeWidth + 'px'; 6814 _this.subbar.style.right = (1 - ratio) * _this.rangeWidth + 'px'; 6815 _this._value = value; 6816 6817 _this.fire('change', value); 6818 }); 6819 } 6820 6821 /** 6822 * Add Range drag event 6823 * @private 6824 */ 6825 6826 }, { 6827 key: '_addDragEvent', 6828 value: function _addDragEvent() { 6829 var _this2 = this; 6830 6831 this.pointer.addEventListener('mousedown', function (event) { 6832 _this2.firstPosition = event.screenX; 6833 _this2.firstLeft = (0, _util.toInteger)(_this2.pointer.style.left) || 0; 6834 _this2.dragEventHandler = { 6835 changeAngle: _this2._changeAngle.bind(_this2), 6836 stopChangingAngle: _this2._stopChangingAngle.bind(_this2) 6837 }; 6838 6839 document.addEventListener('mousemove', _this2.dragEventHandler.changeAngle); 6840 document.addEventListener('mouseup', _this2.dragEventHandler.stopChangingAngle); 6841 }); 6842 } 6843 6844 /** 6845 * change angle event 6846 * @param {object} event - change event 6847 * @private 6848 */ 6849 6850 }, { 6851 key: '_changeAngle', 6852 value: function _changeAngle(event) { 6853 var changePosition = event.screenX; 6854 var diffPosition = changePosition - this.firstPosition; 6855 var touchPx = this.firstLeft + diffPosition; 6856 touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx; 6857 touchPx = touchPx < 0 ? 0 : touchPx; 6858 6859 this.pointer.style.left = touchPx + 'px'; 6860 this.subbar.style.right = this.rangeWidth - touchPx + 'px'; 6861 var ratio = touchPx / this.rangeWidth; 6862 var value = this._absMax * ratio + this._min; 6863 6864 this._value = value; 6865 6866 if (this.realTimeEvent) { 6867 this.fire('change', value); 6868 } 6869 } 6870 6871 /** 6872 * stop change angle event 6873 * @private 6874 */ 6875 6876 }, { 6877 key: '_stopChangingAngle', 6878 value: function _stopChangingAngle() { 6879 this.fire('change', this._value); 6880 document.removeEventListener('mousemove', this.dragEventHandler.changeAngle); 6881 document.removeEventListener('mouseup', this.dragEventHandler.stopChangingAngle); 6882 } 6883 }, { 6884 key: 'max', 6885 set: function set(maxValue) { 6886 this._max = maxValue; 6887 this._absMax = this._min * -1 + this._max; 6888 this.value = this._value; 6889 }, 6890 get: function get() { 6891 return this._max; 6892 } 6893 6894 /** 6895 * Get range value 6896 * @returns {Number} range value 6897 */ 6898 6899 }, { 6900 key: 'value', 6901 get: function get() { 6902 return this._value; 6903 } 6904 6905 /** 6906 * Set range value 6907 * @param {Number} value range value 6908 * @param {Boolean} fire whether fire custom event or not 6909 */ 6910 , 6911 set: function set(value) { 6912 var absValue = value - this._min; 6913 var leftPosition = absValue * this.rangeWidth / this._absMax; 6914 6915 if (this.rangeWidth < leftPosition) { 6916 leftPosition = this.rangeWidth; 6917 } 6918 6919 this.pointer.style.left = leftPosition + 'px'; 6920 this.subbar.style.right = this.rangeWidth - leftPosition + 'px'; 6921 this._value = value; 6922 } 6923 }]); 6924 6925 return Range; 6926 }(); 6927 6928 _tuiCodeSnippet2.default.CustomEvents.mixin(Range); 6929 exports.default = Range; 6930 6931/***/ }), 6932/* 84 */
6933/***/ (function(module, exports) { 6934 6935 'use strict'; 6936 6937 Object.defineProperty(exports, "__esModule", { 6938 value: true 6939 }); 6940 6941 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; }; }(); 6942 6943 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6944 6945 /** 6946 * Submenu Base Class 6947 * @class 6948 * @ignore 6949 */ 6950 var Submenu = function () { 6951 /** 6952 * @param {HTMLElement} subMenuElement - submenu dom element 6953 * @param {Locale} locale - translate text 6954 * @param {string} name - name of sub menu 6955 * @param {Object} iconStyle - style of icon 6956 * @param {string} menuBarPosition - position of menu 6957 * @param {*} templateHtml - template for SubMenuElement 6958 */ 6959 function Submenu(subMenuElement, _ref) { 6960 var locale = _ref.locale, 6961 name = _ref.name, 6962 iconStyle = _ref.iconStyle, 6963 menuBarPosition = _ref.menuBarPosition, 6964 templateHtml = _ref.templateHtml; 6965 6966 _classCallCheck(this, Submenu); 6967 6968 this.selector = function (str) { 6969 return subMenuElement.querySelector(str); 6970 }; 6971 this.menuBarPosition = menuBarPosition; 6972 this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up'; 6973 this.colorPickerControls = []; 6974 this._makeSubMenuElement(subMenuElement, { 6975 locale: locale, 6976 name: name, 6977 iconStyle: iconStyle, 6978 templateHtml: templateHtml 6979 }); 6980 } 6981 6982 _createClass(Submenu, [{ 6983 key: 'colorPickerChangeShow', 6984 value: function colorPickerChangeShow(occurredControl) { 6985 this.colorPickerControls.forEach(function (pickerControl) { 6986 if (occurredControl !== pickerControl) { 6987 pickerControl.hide(); 6988 } 6989 }); 6990 } 6991 6992 /** 6993 * Get butten type 6994 * @param {HTMLElement} button - event target element 6995 * @param {array} buttonNames - Array of button names 6996 * @returns {string} - button type 6997 */ 6998 6999 }, { 7000 key: 'getButtonType', 7001 value: function getButtonType(button, buttonNames) { 7002 return button.className.match(RegExp('(' + buttonNames.join('|') + ')'))[0]; 7003 } 7004 7005 /** 7006 * Get butten type 7007 * @param {HTMLElement} target - event target element 7008 * @param {string} removeClass - remove class name 7009 * @param {string} addClass - add class name 7010 */ 7011 7012 }, { 7013 key: 'changeClass', 7014 value: function changeClass(target, removeClass, addClass) { 7015 target.classList.remove(removeClass); 7016 target.classList.add(addClass); 7017 } 7018 7019 /** 7020 * Interface method whose implementation is optional. 7021 * Returns the menu to its default state. 7022 */ 7023 7024 }, { 7025 key: 'changeStandbyMode', 7026 value: function changeStandbyMode() {} 7027 7028 /** 7029 * Interface method whose implementation is optional. 7030 * Executed when the menu starts. 7031 */ 7032 7033 }, { 7034 key: 'changeStartMode', 7035 value: function changeStartMode() {} 7036 7037 /** 7038 * Make submenu dom element 7039 * @param {HTMLElement} subMenuElement - submenu dom element 7040 * @param {Locale} locale - translate text 7041 * @param {string} name - submenu name 7042 * @param {Object} iconStyle - icon style 7043 * @param {*} templateHtml - template for SubMenuElement 7044 * @private 7045 */ 7046 7047 }, { 7048 key: '_makeSubMenuElement', 7049 value: function _makeSubMenuElement(subMenuElement, _ref2) { 7050 var locale = _ref2.locale, 7051 name = _ref2.name, 7052 iconStyle = _ref2.iconStyle, 7053 templateHtml = _ref2.templateHtml; 7054 7055 var iconSubMenu = document.createElement('div'); 7056 iconSubMenu.className = 'tui-image-editor-menu-' + name; 7057 iconSubMenu.innerHTML = templateHtml({ 7058 locale: locale, 7059 iconStyle: iconStyle 7060 }); 7061 7062 subMenuElement.appendChild(iconSubMenu); 7063 } 7064 }]); 7065 7066 return Submenu; 7067 }(); 7068 7069 exports.default = Submenu; 7070 7071/***/ }), 7072/* 85 */
7073/***/ (function(module, exports) { 7074 7075 'use strict'; 7076 7077 Object.defineProperty(exports, "__esModule", { 7078 value: true 7079 }); 7080 7081 /** 7082 * @param {Locale} locale - Translate text 7083 * @param {Object} normal - iconStyle 7084 * @param {Object} active - iconStyle 7085 * @returns {string} 7086 */ 7087 exports.default = function (_ref) { 7088 var locale = _ref.locale, 7089 _ref$iconStyle = _ref.iconStyle, 7090 normal = _ref$iconStyle.normal, 7091 active = _ref$iconStyle.active; 7092 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-shape-button">\n <div class="tui-image-editor-button rect">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-shape-rectangle"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-shape-rectangle"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Rectangle') + ' </label>\n </div>\n <div class="tui-image-editor-button circle">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-shape-circle"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-shape-circle"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Circle') + ' </label>\n </div>\n <div class="tui-image-editor-button triangle">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-shape-triangle"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-shape-triangle"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Triangle') + ' </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li id="tie-shape-color-button">\n <div id="tie-color-fill" title="' + locale.localize('Fill') + '"></div>\n <div id="tie-color-stroke" title="' + locale.localize('Stroke') + '"></div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li class="tui-image-editor-newline tui-image-editor-range-wrap">\n <label class="range">' + locale.localize('Stroke') + '</label>\n <div id="tie-stroke-range"></div>\n <input id="tie-stroke-range-value" class="tui-image-editor-range-value" value="0" />\n </li>\n </ul>\n'; 7093 }; 7094 7095/***/ }), 7096/* 86 */ 7097/***/ (function(module, exports, __webpack_require__) { 7098 7099 'use strict'; 7100 7101 Object.defineProperty(exports, "__esModule", { 7102 value: true 7103 }); 7104 7105 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; }; }(); 7106 7107 var _tuiCodeSnippet = __webpack_require__(3); 7108 7109 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 7110 7111 var _submenuBase = __webpack_require__(84); 7112 7113 var _submenuBase2 = _interopRequireDefault(_submenuBase); 7114 7115 var _crop = __webpack_require__(87); 7116 7117 var _crop2 = _interopRequireDefault(_crop); 7118 7119 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 7120 7121 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7122 7123 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; } 7124 7125 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, { c
7125onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 7126 7127 /** 7128 * Crop ui class 7129 * @class 7130 * @ignore 7131 */ 7132 var Crop = function (_Submenu) { 7133 _inherits(Crop, _Submenu); 7134 7135 function Crop(subMenuElement, _ref) { 7136 var locale = _ref.locale, 7137 iconStyle = _ref.iconStyle, 7138 menuBarPosition = _ref.menuBarPosition; 7139 7140 _classCallCheck(this, Crop); 7141 7142 var _this = _possibleConstructorReturn(this, (Crop.__proto__ || Object.getPrototypeOf(Crop)).call(this, subMenuElement, { 7143 locale: locale, 7144 name: 'crop', 7145 iconStyle: iconStyle, 7146 menuBarPosition: menuBarPosition, 7147 templateHtml: _crop2.default 7148 })); 7149 7150 _this.status = 'active'; 7151 7152 _this._els = { 7153 apply: _this.selector('#tie-crop-button .apply'), 7154 cancel: _this.selector('#tie-crop-button .cancel'), 7155 preset: _this.selector('#tie-crop-preset-button') 7156 }; 7157 7158 _this.defaultPresetButton = _this._els.preset.querySelector('.preset-none'); 7159 return _this; 7160 } 7161 7162 /** 7163 * Add event for crop 7164 * @param {Object} actions - actions for crop 7165 * @param {Function} actions.crop - crop action 7166 * @param {Function} actions.cancel - cancel action 7167 * @param {Function} actions.preset - draw rectzone at a predefined ratio 7168 */ 7169 7170 7171 _createClass(Crop, [{ 7172 key: 'addEvent', 7173 value: function addEvent(actions) { 7174 var _this2 = this; 7175 7176 this.actions = actions; 7177 this._els.apply.addEventListener('click', function () { 7178 _this2.actions.crop(); 7179 _this2._els.apply.classList.remove('active'); 7180 }); 7181 7182 this._els.cancel.addEventListener('click', function () { 7183 _this2.actions.cancel(); 7184 _this2._els.apply.classList.remove('active'); 7185 }); 7186 7187 this._els.preset.addEventListener('click', function (event) { 7188 var button = event.target.closest('.tui-image-editor-button.preset'); 7189 if (button) { 7190 var _button$className$mat = button.className.match(/preset-[^\s]+/), 7191 presetType = _button$className$mat[0]; 7192 7193 _this2._setPresetButtonActive(button); 7194 _this2.actions.preset(presetType); 7195 } 7196 }); 7197 } 7198 7199 /** 7200 * Executed when the menu starts. 7201 */ 7202 7203 }, { 7204 key: 'changeStartMode', 7205 value: function changeStartMode() { 7206 this.actions.modeChange('crop'); 7207 } 7208 7209 /** 7210 * Returns the menu to its default state. 7211 */ 7212 7213 }, { 7214 key: 'changeStandbyMode', 7215 value: function changeStandbyMode() { 7216 this.actions.stopDrawingMode(); 7217 this._setPresetButtonActive(); 7218 } 7219 7220 /** 7221 * Change apply button status 7222 * @param {Boolean} enableStatus - apply button status 7223 */ 7224 7225 }, { 7226 key: 'changeApplyButtonStatus', 7227 value: function changeApplyButtonStatus(enableStatus) { 7228 if (enableStatus) { 7229 this._els.apply.classList.add('active'); 7230 } else { 7231 this._els.apply.classList.remove('active'); 7232 } 7233 } 7234 7235 /** 7236 * Set preset button to active status 7237 * @param {HTMLElement} button - event target element 7238 * @private 7239 */ 7240 7241 }, { 7242 key: '_setPresetButtonActive', 7243 value: function _setPresetButtonActive() { 7244 var button = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.defaultPresetButton; 7245 7246 _tuiCodeSnippet2.default.forEach([].slice.call(this._els.preset.querySelectorAll('.preset')), function (presetButton) { 7247 presetButton.classList.remove('active'); 7248 }); 7249 7250 if (button) { 7251 button.classList.add('active'); 7252 } 7253 } 7254 }]); 7255 7256 return Crop; 7257 }(_submenuBase2.default); 7258 7259 exports.default = Crop; 7260 7261/***/ }), 7262/* 87 */
7263/***/ (function(module, exports) { 7264 7265 'use strict'; 7266 7267 Object.defineProperty(exports, "__esModule", { 7268 value: true 7269 }); 7270 7271 /** 7272 * @param {Locale} locale - Translate text 7273 * @param {Object} normal - iconStyle 7274 * @param {Object} active - iconStyle 7275 * @returns {string} 7276 */ 7277 exports.default = function (_ref) { 7278 var locale = _ref.locale, 7279 _ref$iconStyle = _ref.iconStyle, 7280 normal = _ref$iconStyle.normal, 7281 active = _ref$iconStyle.active; 7282 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-crop-preset-button">\n <div class="tui-image-editor-button preset preset-none active">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-shape-rectangle"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-shape-rectangle"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Custom') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-square">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Square') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-3-2">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('3:2') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-4-3">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('4:3') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-5-4">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('5:4') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-7-5">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('7:5') + ' </label>\n </div>\n <div class="tui-image-editor-button preset preset-16-9">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-crop"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-crop"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('16:9') + ' </label>\n </div>\n </li>\n <li class="tui-image-editor-partition tui-image-editor-newline">\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li id="tie-crop-button" class="action">\n <div class="tui-image-editor-button apply">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-apply" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-apply" class="active"/>\n </svg>\n <label>\n ' + locale.localize('Apply') + '\n </label>\n </div>\n <div class="tui-image-editor-button cancel">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-cancel" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-cancel" class="active"/>\n </svg>\n <label>\n ' + locale.localize('Cancel') + '\n </label>\n </div>\n </li>\n </ul>\n'; 7283 }; 7284 7285/***/ }), 7286/* 88 */ 7287/***/ (function(module, exports, __webpack_require__) { 7288 7289 'use strict'; 7290 7291 Object.defineProperty(exports, "__esModule", { 7292 value: true 7293 }); 7294 7295 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; }; }(); 7296 7297 var _tuiCodeSnippet = __webpack_require__(3); 7298 7299 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 7300 7301 var _submenuBase = __webpack_require__(84); 7302 7303 var _submenuBase2 = _interopRequireDefault(_submenuBase); 7304 7305 var _flip = __webpack_require__(89); 7306 7307 var _flip2 = _interopRequireDefault(_flip); 7308 7309 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 7310 7311 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7312 7313 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; } 7314 7315 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, { c
7315onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 7316 7317 /** 7318 * Flip ui class 7319 * @class 7320 * @ignore 7321 */ 7322 var Flip = function (_Submenu) { 7323 _inherits(Flip, _Submenu); 7324 7325 function Flip(subMenuElement, _ref) { 7326 var locale = _ref.locale, 7327 iconStyle = _ref.iconStyle, 7328 menuBarPosition = _ref.menuBarPosition; 7329 7330 _classCallCheck(this, Flip); 7331 7332 var _this = _possibleConstructorReturn(this, (Flip.__proto__ || Object.getPrototypeOf(Flip)).call(this, subMenuElement, { 7333 locale: locale, 7334 name: 'flip', 7335 iconStyle: iconStyle, 7336 menuBarPosition: menuBarPosition, 7337 templateHtml: _flip2.default 7338 })); 7339 7340 _this.flipStatus = false; 7341 7342 _this._els = { 7343 flipButton: _this.selector('#tie-flip-button') 7344 }; 7345 return _this; 7346 } 7347 7348 /** 7349 * Add event for flip 7350 * @param {Object} actions - actions for flip 7351 * @param {Function} actions.flip - flip action 7352 */ 7353 7354 7355 _createClass(Flip, [{ 7356 key: 'addEvent', 7357 value: function addEvent(actions) { 7358 this._actions = actions; 7359 this._els.flipButton.addEventListener('click', this._changeFlip.bind(this)); 7360 } 7361 7362 /** 7363 * change Flip status 7364 * @param {object} event - change event 7365 * @private 7366 */ 7367 7368 }, { 7369 key: '_changeFlip', 7370 value: function _changeFlip(event) { 7371 var _this2 = this; 7372 7373 var button = event.target.closest('.tui-image-editor-button'); 7374 if (button) { 7375 var flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']); 7376 if (!this.flipStatus && flipType === 'resetFlip') { 7377 return; 7378 } 7379 7380 this._actions.flip(flipType).then(function (flipStatus) { 7381 var flipClassList = _this2._els.flipButton.classList; 7382 _this2.flipStatus = false; 7383 7384 flipClassList.remove('resetFlip'); 7385 _tuiCodeSnippet2.default.forEach(['flipX', 'flipY'], function (type) { 7386 flipClassList.remove(type); 7387 if (flipStatus[type]) { 7388 flipClassList.add(type); 7389 flipClassList.add('resetFlip'); 7390 _this2.flipStatus = true; 7391 } 7392 }); 7393 }); 7394 } 7395 } 7396 }]); 7397 7398 return Flip; 7399 }(_submenuBase2.default); 7400 7401 exports.default = Flip; 7402 7403/***/ }), 7404/* 89 */ 7405/***/ (function(module, exports) { 7406 7407 'use strict'; 7408 7409 Object.defineProperty(exports, "__esModule", { 7410 value: true 7411 }); 7412 7413 /** 7414 * @param {Locale} locale - Translate text 7415 * @param {Object} normal - iconStyle 7416 * @param {Object} active - iconStyle 7417 * @returns {string} 7418 */ 7419 exports.default = function (_ref) { 7420 var locale = _ref.locale, 7421 _ref$iconStyle = _ref.iconStyle, 7422 normal = _ref$iconStyle.normal, 7423 active = _ref$iconStyle.active; 7424 return '\n <ul id="tie-flip-button" class="tui-image-editor-submenu-item">\n <li>\n <div class="tui-image-editor-button flipX">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-flip-x" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-flip-x" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Flip X') + '\n </label>\n </div>\n <div class="tui-image-editor-button flipY">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-flip-y" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-flip-y" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Flip Y') + '\n </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li>\n <div class="tui-image-editor-button resetFlip">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-flip-reset"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-flip-reset"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Reset') + '\n </label>\n </div>\n </li>\n </ul>\n'; 7425 }; 7426 7427/***/ }), 7428/* 90 */ 7429/***/ (function(module, exports, __webpack_require__) { 7430 7431 'use strict'; 7432 7433 Object.defineProperty(exports, "__esModule", { 7434 value: true 7435 }); 7436 7437 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; }; }(); 7438 7439 var _range = __webpack_require__(83); 7440 7441 var _range2 = _interopRequireDefault(_range); 7442 7443 var _submenuBase = __webpack_require__(84); 7444 7445 var _submenuBase2 = _interopRequireDefault(_submenuBase); 7446 7447 var _rotate = __webpack_require__(91); 7448 7449 var _rotate2 = _interopRequireDefault(_rotate); 7450 7451 var _util = __webpack_require__(72); 7452 7453 var _consts = __webpack_require__(73); 7454 7455 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 7456 7457 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7458 7459 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; } 7460 7461 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, { c
7461onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 7462 7463 var CLOCKWISE = 30; 7464 var COUNTERCLOCKWISE = -30; 7465 7466 /** 7467 * Rotate ui class 7468 * @class 7469 * @ignore 7470 */ 7471 7472 var Rotate = function (_Submenu) { 7473 _inherits(Rotate, _Submenu); 7474 7475 function Rotate(subMenuElement, _ref) { 7476 var locale = _ref.locale, 7477 iconStyle = _ref.iconStyle, 7478 menuBarPosition = _ref.menuBarPosition; 7479 7480 _classCallCheck(this, Rotate); 7481 7482 var _this = _possibleConstructorReturn(this, (Rotate.__proto__ || Object.getPrototypeOf(Rotate)).call(this, subMenuElement, { 7483 locale: locale, 7484 name: 'rotate', 7485 iconStyle: iconStyle, 7486 menuBarPosition: menuBarPosition, 7487 templateHtml: _rotate2.default 7488 })); 7489 7490 _this._els = { 7491 rotateButton: _this.selector('#tie-retate-button'), 7492 rotateRange: new _range2.default(_this.selector('#tie-rotate-range'), _consts.defaultRotateRangeValus), 7493 rotateRangeValue: _this.selector('#tie-ratate-range-value') 7494 }; 7495 return _this; 7496 } 7497 7498 /** 7499 * Add event for rotate 7500 * @param {Object} actions - actions for crop 7501 * @param {Function} actions.rotate - rotate action 7502 * @param {Function} actions.setAngle - set angle action 7503 */ 7504 7505 7506 _createClass(Rotate, [{ 7507 key: 'addEvent', 7508 value: function addEvent(actions) { 7509 // {rotate, setAngle} 7510 this.actions = actions; 7511 this._els.rotateButton.addEventListener('click', this._changeRotateForButton.bind(this)); 7512 this._els.rotateRange.on('change', this._changeRotateForRange.bind(this)); 7513 this._els.rotateRangeValue.setAttribute('readonly', true); 7514 } 7515 7516 /** 7517 * Change rotate for range 7518 * @param {number} value - angle value 7519 * @private 7520 */ 7521 7522 }, { 7523 key: '_changeRotateForRange', 7524 value: function _changeRotateForRange(value) { 7525 var angle = (0, _util.toInteger)(value); 7526 this._els.rotateRangeValue.value = angle; 7527 this.actions.setAngle(angle); 7528 } 7529 7530 /** 7531 * Change rotate for button 7532 * @param {object} event - add button event object 7533 * @private 7534 */ 7535 7536 }, { 7537 key: '_changeRotateForButton', 7538 value: function _changeRotateForButton(event) { 7539 var button = event.target.closest('.tui-image-editor-button'); 7540 if (button) { 7541 var rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']); 7542 var rotateAngle = { 7543 clockwise: CLOCKWISE, 7544 counterclockwise: COUNTERCLOCKWISE 7545 }[rotateType]; 7546 this.actions.rotate(rotateAngle); 7547 } 7548 } 7549 }]); 7550 7551 return Rotate; 7552 }(_submenuBase2.default); 7553 7554 exports.default = Rotate; 7555 7556/***/ }), 7557/* 91 */ 7558/***/ (function(module, exports) { 7559 7560 'use strict'; 7561 7562 Object.defineProperty(exports, "__esModule", { 7563 value: true 7564 }); 7565 7566 /** 7567 * @param {Locale} locale - Translate text 7568 * @param {Object} normal - iconStyle 7569 * @param {Object} active - iconStyle 7570 * @returns {string} 7571 */ 7572 exports.default = function (_ref) { 7573 var locale = _ref.locale, 7574 _ref$iconStyle = _ref.iconStyle, 7575 normal = _ref$iconStyle.normal, 7576 active = _ref$iconStyle.active; 7577 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-retate-button">\n <div class="tui-image-editor-button clockwise">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-rotate-clockwise"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-rotate-clockwise"\n class="active"/>\n </svg>\n </div>\n <label> 30 </label>\n </div>\n <div class="tui-image-editor-button counterclockwise">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-rotate-counterclockwise"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-rotate-counterclockwise"\n class="active"/>\n </svg>\n </div>\n <label> -30 </label>\n </div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li class="tui-image-editor-newline tui-image-editor-range-wrap">\n <label class="range">' + locale.localize('Range') + '</label>\n <div id="tie-rotate-range"></div>\n <input id="tie-ratate-range-value" class="tui-image-editor-range-value" value="
vendor: 2,912 bytes, lines 7577-7643
75770" />\n </li>\n </ul>\n'; 7578 }; 7579 7580/***/ }), 7581/* 92 */ 7582/***/ (function(module, exports, __webpack_require__) { 7583 7584 'use strict'; 7585 7586 Object.defineProperty(exports, "__esModule", { 7587 value: true 7588 }); 7589 7590 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; }; }(); 7591 7592 var _range = __webpack_require__(83); 7593 7594 var _range2 = _interopRequireDefault(_range); 7595 7596 var _colorpicker = __webpack_require__(81); 7597 7598 var _colorpicker2 = _interopRequireDefault(_colorpicker); 7599 7600 var _submenuBase = __webpack_require__(84); 7601 7602 var _submenuBase2 = _interopRequireDefault(_submenuBase); 7603 7604 var _text = __webpack_require__(93); 7605 7606 var _text2 = _interopRequireDefault(_text); 7607 7608 var _util = __webpack_require__(72); 7609 7610 var _consts = __webpack_require__(73); 7611 7612 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 7613 7614 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7615 7616 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; } 7617 7618 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; } 7619 7620 /** 7621 * Crop ui class 7622 * @class 7623 * @ignore 7624 */ 7625 var Text = function (_Submenu) { 7626 _inherits(Text, _Submenu); 7627 7628 function Text(subMenuElement, _ref) { 7629 var locale = _ref.locale, 7630 iconStyle = _ref.iconStyle, 7631 menuBarPosition = _ref.menuBarPosition; 7632 7633 _classCallCheck(this, Text); 7634 7635 var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, subMenuElement, { 7636 locale: locale, 7637 name: 'text', 7638 iconStyle: iconStyle, 7639 menuBarPosition: menuBarPosition, 7640 templateHtml: _text2.default 7641 })); 7642 7643 _this.effect = {
7644 bold: false, 7645 italic: false, 7646 underline: false 7647 }; 7648 _this.align = 'left'; 7649 _this._els = { 7650 textEffectButton: _this.selector('#tie-text-effect-button'), 7651 textAlignButton: _this.selector('#tie-text-align-button'), 7652 textColorpicker: new _colorpicker2.default(_this.selector('#tie-text-color'), '#ffbb3b', _this.toggleDirection), 7653 textRange: new _range2.default(_this.selector('#tie-text-range'), _consts.defaultTextRangeValus), 7654 textRangeValue: _this.selector('#tie-text-range-value') 7655 }; 7656 return _this; 7657 } 7658 7659 /** 7660 * Add event for text 7661 * @param {Object} actions - actions for text 7662 * @param {Function} actions.changeTextStyle - change text style 7663 */ 7664 7665 7666 _createClass(Text, [{ 7667 key: 'addEvent', 7668 value: function addEvent(actions) { 7669 this.actions = actions; 7670 this._els.textEffectButton.addEventListener('click', this._setTextEffectHandler.bind(this)); 7671 this._els.textAlignButton.addEventListener('click', this._setTextAlignHandler.bind(this)); 7672 this._els.textRange.on('change', this._changeTextRnageHandler.bind(this)); 7673 this._els.textRangeValue.value = this._els.textRange.value; 7674 this._els.textRangeValue.setAttribute('readonly', true); 7675 this._els.textColorpicker.on('change', this._changeColorHandler.bind(this)); 7676 } 7677 7678 /** 7679 * Returns the menu to its default state. 7680 */ 7681 7682 }, { 7683 key: 'changeStandbyMode', 7684 value: function changeStandbyMode() { 7685 this.actions.stopDrawingMode(); 7686 } 7687 7688 /** 7689 * Executed when the menu starts. 7690 */ 7691 7692 }, { 7693 key: 'changeStartMode', 7694 value: function changeStartMode() { 7695 this.actions.modeChange('text'); 7696 } 7697 7698 /** 7699 * Get text color 7700 * @returns {string} - text color 7701 */ 7702 7703 }, { 7704 key: '_setTextEffectHandler', 7705 7706 7707 /** 7708 * text effect set handler 7709 * @param {object} event - add button event object 7710 * @private 7711 */ 7712 value: function _setTextEffectHandler(event) { 7713 var button = event.target.closest('.tui-image-editor-button'); 7714 7715 var _button$className$mat = button.className.match(/(bold|italic|underline)/), 7716 styleType = _button$className$mat[0]; 7717 7718 var styleObj = { 7719 'bold': { fontWeight: 'bold' }, 7720 'italic': { fontStyle: 'italic' }, 7721 'underline': { textDecoration: 'underline' } 7722 }[styleType]; 7723 7724 this.effect[styleType] = !this.effect[styleType]; 7725 button.classList.toggle('active'); 7726 this.actions.changeTextStyle(styleObj); 7727 } 7728 7729 /** 7730 * text effect set handler 7731 * @param {object} event - add button event object 7732 * @private 7733 */ 7734 7735 }, { 7736 key: '_setTextAlignHandler', 7737 value: function _setTextAlignHandler(event) { 7738 var button = event.target.closest('.tui-image-editor-button'); 7739 if (button) { 7740 var styleType = this.getButtonType(button, ['left', 'center', 'right']); 7741 7742 event.currentTarget.classList.remove(this.align); 7743 if (this.align !== styleType) { 7744 event.currentTarget.classList.add(styleType); 7745 } 7746 this.actions.changeTextStyle({ textAlign: styleType }); 7747 7748 this.align = styleType; 7749 } 7750 } 7751 7752 /** 7753 * text align set handler 7754 * @param {number} value - range value 7755 * @private 7756 */ 7757 7758 }, { 7759 key: '_changeTextRnageHandler', 7760 value: function _changeTextRnageHandler(value) { 7761 value = (0, _util.toInteger)(value); 7762 if ((0, _util.toInteger)(this._els.textRangeValue.value) !== value) { 7763 this.actions.changeTextStyle({ 7764 fontSize: value 7765 }); 7766 this._els.textRangeValue.value = value; 7767 } 7768 } 7769 7770 /** 7771 * change color handler 7772 * @param {string} color - change color string 7773 * @private 7774 */ 7775 7776 }, { 7777 key: '_changeColorHandler', 7778 value: function _changeColorHandler(color) { 7779 color = color || 'transparent'; 7780 this.actions.changeTextStyle({ 7781 'fill': color 7782 }); 7783 } 7784 }, { 7785 key: 'textColor', 7786 get: function get() { 7787 return this._els.textColorpicker.color; 7788 } 7789 7790 /** 7791 * Get text size 7792 * @returns {string} - text size 7793 */ 7794 7795 }, { 7796 key: 'fontSize', 7797 get: function get() { 7798 return this._els.textRange.value; 7799 } 7800 7801 /** 7802 * Set text size 7803 * @param {Number} value - text size 7804 */ 7805 , 7806 set: function set(value) { 7807 this._els.textRange.value = value; 7808 this._els.textRangeValue.value = value; 7809 } 7810 }]); 7811 7812 return Text; 7813 }(_submenuBase2.default); 7814 7815 exports.default = Text; 7816 7817/***/ }), 7818/* 93 */
7819/***/ (function(module, exports) { 7820 7821 'use strict'; 7822 7823 Object.defineProperty(exports, "__esModule", { 7824 value: true 7825 }); 7826 7827 /** 7828 * @param {Locale} locale - Translate text 7829 * @param {Object} normal - iconStyle 7830 * @param {Object} active - iconStyle 7831 * @returns {string} 7832 */ 7833 exports.default = function (_ref) { 7834 var locale = _ref.locale, 7835 _ref$iconStyle = _ref.iconStyle, 7836 normal = _ref$iconStyle.normal, 7837 active = _ref$iconStyle.active; 7838 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-text-effect-button">\n <div class="tui-image-editor-button bold">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-bold" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-bold" class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Bold') + ' </label>\n </div>\n <div class="tui-image-editor-button italic">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-italic" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-italic" class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Italic') + ' </label>\n </div>\n <div class="tui-image-editor-button underline">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-underline"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-underline"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Underline') + ' </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li id="tie-text-align-button">\n <div class="tui-image-editor-button left">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-align-left"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-align-left"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Left') + ' </label>\n </div>\n <div class="tui-image-editor-button center">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-align-center"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-align-center"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Center') + ' </label>\n </div>\n <div class="tui-image-editor-button right">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-text-align-right"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-text-align-right"\n class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Right') + ' </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li>\n <div id="tie-text-color" title="' + locale.localize('Color') + '"></div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li class="tui-image-editor-newline tui-image-editor-range-wrap">\n <label class="range">' + locale.localize('Text size') + '</label>\n <div id="tie-text-range"></div>\n <input id="tie-text-range-value" class="tui-image-editor-range-value" value="
78380" />\n </li>\n </ul>\n'; 7839 }; 7840 7841/***/ }), 7842/* 94 */ 7843/***/ (function(module, exports, __webpack_require__) { 7844 7845 'use strict'; 7846 7847 Object.defineProperty(exports, "__esModule", { 7848 value: true 7849 }); 7850 7851 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; }; }(); 7852 7853 var _submenuBase = __webpack_require__(84); 7854 7855 var _submenuBase2 = _interopRequireDefault(_submenuBase); 7856 7857 var _util = __webpack_require__(72); 7858 7859 var _util2 = _interopRequireDefault(_util); 7860 7861 var _mask = __webpack_require__(95); 7862 7863 var _mask2 = _interopRequireDefault(_mask); 7864 7865 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 7866 7867 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7868 7869 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; } 7870 7871 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; } 7872 7873 /** 7874 * Mask ui class 7875 * @class 7876 * @ignore 7877 */ 7878 var Mask = function (_Submenu) { 7879 _inherits(Mask, _Submenu); 7880 7881 function Mask(subMenuElement, _ref) { 7882 var locale = _ref.locale, 7883 iconStyle = _ref.iconStyle, 7884 menuBarPosition = _ref.menuBarPosition; 7885 7886 _classCallCheck(this, Mask); 7887 7888 var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, subMenuElement, { 7889 locale: locale, 7890 name: 'mask', 7891 iconStyle: iconStyle, 7892 menuBarPosition: menuBarPosition, 7893 templateHtml: _mask2.default 7894 })); 7895 7896 _this._els = { 7897 applyButton: _this.selector('#tie-mask-apply'), 7898 maskImageButton: _this.selector('#tie-mask-image-file') 7899 }; 7900 return _this; 7901 } 7902 7903 /** 7904 * Add event for mask 7905 * @param {Object} actions - actions for crop 7906 * @param {Function} actions.loadImageFromURL - load image action 7907 * @param {Function} actions.applyFilter - apply filter action 7908 */ 7909 7910 7911 _createClass(Mask, [{ 7912 key: 'addEvent', 7913 value: function addEvent(actions) { 7914 this.actions = actions; 7915 this._els.maskImageButton.addEventListener('change', this._loadMaskFile.bind(this)); 7916 this._els.applyButton.addEventListener('click', this._applyMask.bind(this)); 7917 } 7918 7919 /** 7920 * Apply mask 7921 * @private 7922 */ 7923 7924 }, { 7925 key: '_applyMask', 7926 value: function _applyMask() { 7927 this.actions.applyFilter(); 7928 this._els.applyButton.classList.remove('active'); 7929 } 7930 7931 /** 7932 * Load mask file 7933 * @param {object} event - File change event object 7934 * @private 7935 */ 7936 7937 }, { 7938 key: '_loadMaskFile', 7939 value: function _loadMaskFile(event) { 7940 var imgUrl = void 0; 7941 7942 if (!_util2.default.isSupportFileApi()) { 7943 alert('This browser does not support file-api'); 7944 } 7945 7946 var _event$target$files = event.target.files, 7947 file = _event$target$files[0]; 7948 7949 7950 if (file) { 7951 imgUrl = URL.createObjectURL(file); 7952 this.actions.loadImageFromURL(imgUrl, file); 7953 this._els.applyButton.classList.add('active'); 7954 } 7955 } 7956 }]); 7957 7958 return Mask; 7959 }(_submenuBase2.default); 7960 7961 exports.default = Mask; 7962 7963/***/ }), 7964/* 95 */
vendor: 4,124 bytes, lines 7965-8031
7965/***/ (function(module, exports) { 7966 7967 'use strict'; 7968 7969 Object.defineProperty(exports, "__esModule", { 7970 value: true 7971 }); 7972 7973 /** 7974 * @param {Locale} locale - Translate text 7975 * @param {Object} normal - iconStyle 7976 * @param {Object} active - iconStyle 7977 * @returns {string} 7978 */ 7979 exports.default = function (_ref) { 7980 var locale = _ref.locale, 7981 _ref$iconStyle = _ref.iconStyle, 7982 normal = _ref$iconStyle.normal, 7983 active = _ref$iconStyle.active; 7984 return '\n <ul class="tui-image-editor-submenu-item">\n <li>\n <div class="tui-image-editor-button">\n <div>\n <input type="file" accept="image/*" id="tie-mask-image-file">\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-mask-load" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-mask-load" class="active"/>\n </svg>\n </div>\n <label> ' + locale.localize('Load Mask Image') + ' </label>\n </div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li id="tie-mask-apply" class="tui-image-editor-newline apply" style="margin-top: 22px;margin-bottom: 5px">\n <div class="tui-image-editor-button apply">\n <svg class="svg_ic-menu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-apply" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-apply" class="active"/>\n </svg>\n <label>\n ' + locale.localize('Apply') + '\n </label>\n </div>\n </li>\n </ul>\n'; 7985 }; 7986 7987/***/ }), 7988/* 96 */ 7989/***/ (function(module, exports, __webpack_require__) { 7990 7991 'use strict'; 7992 7993 Object.defineProperty(exports, "__esModule", { 7994 value: true 7995 }); 7996 7997 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; }; }(); 7998 7999 var _tuiCodeSnippet = __webpack_require__(3); 8000 8001 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 8002 8003 var _colorpicker = __webpack_require__(81); 8004 8005 var _colorpicker2 = _interopRequireDefault(_colorpicker); 8006 8007 var _submenuBase = __webpack_require__(84); 8008 8009 var _submenuBase2 = _interopRequireDefault(_submenuBase); 8010 8011 var _icon = __webpack_require__(97); 8012 8013 var _icon2 = _interopRequireDefault(_icon); 8014 8015 var _util = __webpack_require__(72); 8016 8017 var _consts = __webpack_require__(73); 8018 8019 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 8020 8021 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 8022 8023 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; } 8024 8025 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; } 8026 8027 /** 8028 * Icon ui class 8029 * @class 8030 * @ignore 8031 */
8032 var Icon = function (_Submenu) { 8033 _inherits(Icon, _Submenu); 8034 8035 function Icon(subMenuElement, _ref) { 8036 var locale = _ref.locale, 8037 iconStyle = _ref.iconStyle, 8038 menuBarPosition = _ref.menuBarPosition; 8039 8040 _classCallCheck(this, Icon); 8041 8042 var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, subMenuElement, { 8043 locale: locale, 8044 name: 'icon', 8045 iconStyle: iconStyle, 8046 menuBarPosition: menuBarPosition, 8047 templateHtml: _icon2.default 8048 })); 8049 8050 _this.iconType = null; 8051 _this._iconMap = {}; 8052 8053 _this._els = { 8054 registIconButton: _this.selector('#tie-icon-image-file'), 8055 addIconButton: _this.selector('#tie-icon-add-button'), 8056 iconColorpicker: new _colorpicker2.default(_this.selector('#tie-icon-color'), '#ffbb3b', _this.toggleDirection) 8057 }; 8058 return _this; 8059 } 8060 8061 /** 8062 * Add event for icon 8063 * @param {Object} actions - actions for icon 8064 * @param {Function} actions.registCustomIcon - register icon 8065 * @param {Function} actions.addIcon - add icon 8066 * @param {Function} actions.changeColor - change icon color 8067 */ 8068 8069 8070 _createClass(Icon, [{ 8071 key: 'addEvent', 8072 value: function addEvent(actions) { 8073 this.actions = actions; 8074 8075 this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this)); 8076 this._els.registIconButton.addEventListener('change', this._registeIconHandler.bind(this)); 8077 this._els.addIconButton.addEventListener('click', this._addIconHandler.bind(this)); 8078 } 8079 8080 /** 8081 * Clear icon type 8082 */ 8083 8084 }, { 8085 key: 'clearIconType', 8086 value: function clearIconType() { 8087 this._els.addIconButton.classList.remove(this.iconType); 8088 this.iconType = null; 8089 } 8090 8091 /** 8092 * Register default icon 8093 */ 8094 8095 }, { 8096 key: 'registDefaultIcon', 8097 value: function registDefaultIcon() { 8098 var _this2 = this; 8099 8100 _tuiCodeSnippet2.default.forEach(_consts.defaultIconPath, function (path, type) { 8101 _this2.actions.registDefalutIcons(type, path); 8102 }); 8103 } 8104 8105 /** 8106 * Set icon picker color 8107 * @param {string} iconColor - rgb color string 8108 */ 8109 8110 }, { 8111 key: 'setIconPickerColor', 8112 value: function setIconPickerColor(iconColor) { 8113 this._els.iconColorpicker.color = iconColor; 8114 } 8115 8116 /** 8117 * Returns the menu to its default state. 8118 */ 8119 8120 }, { 8121 key: 'changeStandbyMode', 8122 value: function changeStandbyMode() { 8123 this.clearIconType(); 8124 this.actions.cancelAddIcon(); 8125 } 8126 8127 /** 8128 * Change icon color 8129 * @param {string} color - color for change 8130 * @private 8131 */ 8132 8133 }, { 8134 key: '_changeColorHandler', 8135 value: function _changeColorHandler(color) { 8136 color = color || 'transparent'; 8137 this.actions.changeColor(color); 8138 } 8139 8140 /** 8141 * Change icon color 8142 * @param {object} event - add button event object 8143 * @private 8144 */ 8145 8146 }, { 8147 key: '_addIconHandler', 8148 value: function _addIconHandler(event) { 8149 var button = event.target.closest('.tui-image-editor-button'); 8150 8151 if (button) { 8152 var iconType = button.getAttribute('data-icontype'); 8153 var iconColor = this._els.iconColorpicker.color; 8154 this.actions.discardSelection(); 8155 this.actions.changeSelectableAll(false); 8156 this._els.addIconButton.classList.remove(this.iconType); 8157 this._els.addIconButton.classList.add(iconType); 8158 8159 if (this.iconType === iconType) { 8160 this.changeStandbyMode(); 8161 } else { 8162 this.actions.addIcon(iconType, iconColor); 8163 this.iconType = iconType; 8164 } 8165 } 8166 } 8167 8168 /** 8169 * register icon 8170 * @param {object}
8170 event - file change event object 8171 * @private 8172 */ 8173 8174 }, { 8175 key: '_registeIconHandler', 8176 value: function _registeIconHandler(event) { 8177 var imgUrl = void 0; 8178 8179 if (!_util.isSupportFileApi) { 8180 alert('This browser does not support file-api'); 8181 } 8182 8183 var _event$target$files = event.target.files, 8184 file = _event$target$files[0]; 8185 8186 8187 if (file) { 8188 imgUrl = URL.createObjectURL(file); 8189 this.actions.registCustomIcon(imgUrl, file); 8190 } 8191 } 8192 }]); 8193 8194 return Icon; 8195 }(_submenuBase2.default); 8196 8197 exports.default = Icon; 8198 8199/***/ }), 8200/* 97 */ 8201/***/ (function(module, exports) { 8202 8203 'use strict'; 8204 8205 Object.defineProperty(exports, "__esModule", { 8206 value: true 8207 }); 8208 8209 /** 8210 * @param {Locale} locale - Translate text 8211 * @param {Object} normal - iconStyle 8212 * @param {Object} active - iconStyle 8213 * @returns {string} 8214 */ 8215 exports.default = function (_ref) { 8216 var locale = _ref.locale, 8217 _ref$iconStyle = _ref.iconStyle, 8218 normal = _ref$iconStyle.normal, 8219 active = _ref$iconStyle.active; 8220 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-icon-add-button">\n <div class="tui-image-editor-button" data-icontype="icon-arrow">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-arrow"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-arrow"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Arrow') + '\n </label>\n </div>\n <div class="tui-image-editor-button" data-icontype="icon-arrow-2">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-arrow-2"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-arrow-2"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Arrow-2') + '\n </label>\n </div>\n <div class="tui-image-editor-button" data-icontype="icon-arrow-3">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-arrow-3"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-arrow-3"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Arrow-3') + '\n </label>\n </div>\n <div class="tui-image-editor-button" data-icontype="icon-star">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-star" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-star" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Star-1') + '\n </label>\n </div>\n <div class="tui-image-editor-button" data-icontype="icon-star-2">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-star-2"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-star-2"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Star-2') + '\n </label>\n </div>\n\n <div class="tui-image-editor-button" data-icontype="icon-polygon">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-polygon"\n class="normal"/>\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-polygon"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Polygon') + '\n </label>\n </div>\n\n <div class="tui-image-editor-button" data-icontype="icon-location">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-location"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-location"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Location') + '\n </label>\n </div>\n\n <div class="tui-image-editor-button" data-icontype="icon-heart">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-heart"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-heart"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Heart') + '\n </label>\n </div>\n\n <div class="tui-image-editor-button" data-icontype="icon-bubble">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-bubble"\n class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-bubble"\n class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Bubble') + '\n </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li id="tie-icon-add-button">\n <div class="tui-image-editor-button" style="margin:0">\n <div>\n <input type="file" accept="image/*" id="tie-icon-image-file">\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-icon-load" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-icon-load" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Custom icon') + '\n </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li>\n <div id="tie-icon-color" title="' + locale.localize('Color') + '"></div>\n </li>\n </ul>\n'; 8221 }; 8222 8223/***/ }), 8224/* 98 */ 8225/***/ (function(module, exports, __webpack_require__) { 8226 8227 'use strict'; 8228 8229 Object.defineProperty(exports, "__esModule", { 8230 value: true 8231 }); 8232 8233 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; }; }(); 8234 8235 var _util = __webpack_require__(72); 8236 8237 var _util2 = _interopRequireDefault(_util); 8238 8239 var _colorpicker = __webpack_require__(81); 8240 8241 var _colorpicker2 = _interopRequireDefault(_colorpicker); 8242 8243 var _range = __webpack_require__(83); 8244 8245 var _range2 = _interopRequireDefault(_range); 8246 8247 var _submenuBase = __webpack_require__(84); 8248 8249 var _submenuBase2 = _interopRequireDefault(_submenuBase); 8250 8251 var _draw = __webpack_require__(99); 8252 8253 var _draw2 = _interopRequireDefault(_draw); 8254 8255 var _consts = __webpack_require__(73); 8256 8257 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 8258 8259 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 8260 8261 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; } 8262 8263 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, { c
8263onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 8264 8265 var DRAW_OPACITY = 0.7; 8266 8267 /** 8268 * Draw ui class 8269 * @class 8270 * @ignore 8271 */ 8272 8273 var Draw = function (_Submenu) { 8274 _inherits(Draw, _Submenu); 8275 8276 function Draw(subMenuElement, _ref) { 8277 var locale = _ref.locale, 8278 iconStyle = _ref.iconStyle, 8279 menuBarPosition = _ref.menuBarPosition; 8280 8281 _classCallCheck(this, Draw); 8282 8283 var _this = _possibleConstructorReturn(this, (Draw.__proto__ || Object.getPrototypeOf(Draw)).call(this, subMenuElement, { 8284 locale: locale, 8285 name: 'draw', 8286 iconStyle: iconStyle, 8287 menuBarPosition: menuBarPosition, 8288 templateHtml: _draw2.default 8289 })); 8290 8291 _this._els = { 8292 lineSelectButton: _this.selector('#tie-draw-line-select-button'), 8293 drawColorpicker: new _colorpicker2.default(_this.selector('#tie-draw-color'), '#00a9ff', _this.toggleDirection), 8294 drawRange: new _range2.default(_this.selector('#tie-draw-range'), _consts.defaultDrawRangeValus), 8295 drawRangeValue: _this.selector('#tie-draw-range-value') 8296 }; 8297 8298 _this.type = null; 8299 _this.color = _this._els.drawColorpicker.color; 8300 _this.width = _this._els.drawRange.value; 8301 return _this; 8302 } 8303 8304 /** 8305 * Add event for draw 8306 * @param {Object} actions - actions for crop 8307 * @param {Function} actions.setDrawMode - set draw mode 8308 */ 8309 8310 8311 _createClass(Draw, [{ 8312 key: 'addEvent', 8313 value: function addEvent(actions) { 8314 this.actions = actions; 8315 8316 this._els.lineSelectButton.addEventListener('click', this._changeDrawType.bind(this)); 8317 this._els.drawColorpicker.on('change', this._changeDrawColor.bind(this)); 8318 this._els.drawRange.on('change', this._changeDrawRange.bind(this)); 8319 this._els.drawRangeValue.value = this._els.drawRange.value; 8320 this._els.drawRangeValue.setAttribute('readonly', true); 8321 } 8322 8323 /** 8324 * set draw mode - action runner 8325 */ 8326 8327 }, { 8328 key: 'setDrawMode', 8329 value: function setDrawMode() { 8330 this.actions.setDrawMode(this.type, { 8331 width: this.width, 8332 color: _util2.default.getRgb(this.color, DRAW_OPACITY) 8333 }); 8334 } 8335 8336 /** 8337 * Returns the menu to its default state. 8338 */ 8339 8340 }, { 8341 key: 'changeStandbyMode', 8342 value: function changeStandbyMode() { 8343 this.type = null; 8344 this.actions.stopDrawingMode(); 8345 this.actions.changeSelectableAll(true); 8346 this._els.lineSelectButton.classList.remove('free'); 8347 this._els.lineSelectButton.classList.remove('line'); 8348 } 8349 8350 /** 8351 * Executed when the menu starts. 8352 */ 8353 8354 }, { 8355 key: 'changeStartMode', 8356 value: function changeStartMode() { 8357 this.type = 'free'; 8358 this._els.lineSelectButton.classList.add('free'); 8359 this.setDrawMode(); 8360 } 8361 8362 /** 8363 * Change draw type event 8364 * @param {object} event - line select event 8365 * @private 8366 */ 8367 8368 }, { 8369 key: '_changeDrawType', 8370 value: function _changeDrawType(event) { 8371 var button = event.target.closest('.tui-image-editor-button'); 8372 if (button) { 8373 var lineType = this.getButtonType(button, ['free', 'line']); 8374 this.actions.discardSelection(); 8375 8376 if (this.type === lineType) { 8377 this.changeStandbyMode(); 8378 8379 return; 8380 } 8381 8382 this.changeStandbyMode(); 8383 this.type = lineType; 8384 this._els.lineSelectButton.classList.add(lineType); 8385 this.setDrawMode(); 8386 } 8387 } 8388 8389 /** 8390 * Change drawing color 8391 * @param {string} color - select drawing color 8392 * @private 8393 */ 8394 8395 }, { 8396 key: '_changeDrawColor', 8397 value: function _changeDrawColor(color) { 8398 this.color = color || 'transparent'; 8399 if (!this.type) { 8400 this.changeStartMode(); 8401 } else { 8402 this.setDrawMode(); 8403 } 8404 } 8405 8406 /** 8407 * Change drawing Range 8408 * @param {number} value - select drawing range 8409 * @private 8410 */ 8411 8412 }, { 8413 key: '_changeDrawRange', 8414 value: function _changeDrawRange(value) { 8415 value = _util2.default.toInteger(value); 8416 this._els.drawRangeValue.value = value; 8417 this.width = value; 8418 if (!this.type) { 8419 this.changeStartMode(); 8420 } else { 8421 this.setDrawMode(); 8422 } 8423 } 8424 }]); 8425 8426 return Draw; 8427 }(_submenuBase2.default); 8428 8429 exports.default = Draw; 8430 8431/***/ }), 8432/* 99 */
8433/***/ (function(module, exports) { 8434 8435 'use strict'; 8436 8437 Object.defineProperty(exports, "__esModule", { 8438 value: true 8439 }); 8440 8441 /** 8442 * @param {Locale} locale - Translate text 8443 * @param {Object} normal - iconStyle 8444 * @param {Object} active - iconStyle 8445 * @returns {string} 8446 */ 8447 exports.default = function (_ref) { 8448 var locale = _ref.locale, 8449 _ref$iconStyle = _ref.iconStyle, 8450 normal = _ref$iconStyle.normal, 8451 active = _ref$iconStyle.active; 8452 return '\n <ul class="tui-image-editor-submenu-item">\n <li id="tie-draw-line-select-button">\n <div class="tui-image-editor-button free">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-draw-free" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-draw-free" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Free') + '\n </label>\n </div>\n <div class="tui-image-editor-button line">\n <div>\n <svg class="svg_ic-submenu">\n <use xlink:href="' + normal.path + '#' + normal.name + '-ic-draw-line" class="normal"/>\n <use xlink:href="' + active.path + '#' + active.name + '-ic-draw-line" class="active"/>\n </svg>\n </div>\n <label>\n ' + locale.localize('Straight') + '\n </label>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li>\n <div id="tie-draw-color" title="' + locale.localize('Color') + '"></div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li class="tui-image-editor-newline tui-image-editor-range-wrap">\n <label class="range">' + locale.localize('Range') + '</label>\n <div id="tie-draw-range"></div>\n <input id="tie-draw-range-value" class="tui-image-editor-range-value" value="0" />\n </li>\n </ul>\n'; 8453 }; 8454 8455/***/ }), 8456/* 100 */ 8457/***/ (function(module, exports, __webpack_require__) { 8458 8459 'use strict'; 8460 8461 Object.defineProperty(exports, "__esModule", { 8462 value: true 8463 }); 8464 8465 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; }; }(); 8466 8467 var _tuiCodeSnippet = __webpack_require__(3); 8468 8469 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 8470 8471 var _colorpicker = __webpack_require__(81); 8472 8473 var _colorpicker2 = _interopRequireDefault(_colorpicker); 8474 8475 var _range = __webpack_require__(83); 8476 8477 var _range2 = _interopRequireDefault(_range); 8478 8479 var _submenuBase = __webpack_require__(84); 8480 8481 var _submenuBase2 = _interopRequireDefault(_submenuBase); 8482 8483 var _filter = __webpack_require__(101); 8484 8485 var _filter2 = _interopRequireDefault(_filter); 8486 8487 var _util = __webpack_require__(72); 8488 8489 var _consts = __webpack_require__(73); 8490 8491 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 8492 8493 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 8494 8495 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; } 8496 8497 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, { c
8497onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 8498 8499 var PICKER_CONTROL_HEIGHT = '130px'; 8500 var BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken']; 8501 var FILTER_OPTIONS = ['grayscale', 'invert', 'sepia', 'sepia2', 'blur', 'sharpen', 'emboss', 'remove-white', 'gradient-transparency', 'brightness', 'noise', 'pixelate', 'color-filter', 'tint', 'multiply', 'blend']; 8502 8503 /** 8504 * Filter ui class 8505 * @class 8506 * @ignore 8507 */ 8508 8509 var Filter = function (_Submenu) { 8510 _inherits(Filter, _Submenu); 8511 8512 function Filter(subMenuElement, _ref) { 8513 var locale = _ref.locale, 8514 iconStyle = _ref.iconStyle, 8515 menuBarPosition = _ref.menuBarPosition; 8516 8517 _classCallCheck(this, Filter); 8518 8519 var _this = _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, subMenuElement, { 8520 locale: locale, 8521 name: 'filter', 8522 iconStyle: iconStyle, 8523 menuBarPosition: menuBarPosition, 8524 templateHtml: _filter2.default 8525 })); 8526 8527 _this.selectBoxShow = false; 8528 8529 _this.checkedMap = {}; 8530 _this._makeControlElement(); 8531 return _this; 8532 } 8533 8534 /** 8535 * Add event for filter 8536 * @param {Object} actions - actions for crop 8537 * @param {Function} actions.applyFilter - apply filter option 8538 */ 8539 8540 8541 _createClass(Filter, [{ 8542 key: 'addEvent', 8543 value: function addEvent(_ref2) { 8544 var _this2 = this; 8545 8546 var applyFilter = _ref2.applyFilter; 8547 8548 var changeRangeValue = this._changeRangeValue.bind(this, applyFilter); 8549 8550 _tuiCodeSnippet2.default.forEach(FILTER_OPTIONS, function (filterName) { 8551 var filterCheckElement = _this2.selector('#tie-' + filterName); 8552 var filterNameCamelCase = (0, _util.toCamelCase)(filterName); 8553 _this2.checkedMap[filterNameCamelCase] = filterCheckElement; 8554 8555 filterCheckElement.addEventListener('change', function () { 8556 return changeRangeValue(filterNameCamelCase); 8557 }); 8558 }); 8559 8560 this._els.removewhiteThresholdRange.on('change', function () { 8561 return changeRangeValue('removeWhite'); 8562 }); 8563 this._els.removewhiteDistanceRange.on('change', function () { 8564 return changeRangeValue('removeWhite'); 8565 }); 8566 this._els.gradientTransparencyRange.on('change', function () { 8567 return changeRangeValue('gradientTransparency'); 8568 }); 8569 this._els.colorfilterThresholeRange.on('change', function () { 8570 return changeRangeValue('colorFilter'); 8571 }); 8572 this._els.pixelateRange.on('change', function () { 8573 return changeRangeValue('pixelate'); 8574 }); 8575 this._els.noiseRange.on('change', function () { 8576 return changeRangeValue('noise'); 8577 }); 8578 this._els.brightnessRange.on('change', function () { 8579 return changeRangeValue('brightness'); 8580 }); 8581 this._els.blendType.addEventListener('change', function () { 8582 return changeRangeValue('blend'); 8583 }); 8584 this._els.filterBlendColor.on('change', function () { 8585 return changeRangeValue('blend'); 8586 }); 8587 this._els.filterMultiplyColor.on('change', function () { 8588 return changeRangeValue('multiply'); 8589 }); 8590 this._els.tintOpacity.on('change', function () { 8591 return changeRangeValue('tint'); 8592 }); 8593 this._els.filterTintColor.on('change', function () { 8594 return changeRangeValue('tint'); 8595 }); 8596 this._els.blendType.addEventListener('click', function (event) { 8597 return event.stopPropagation(); 8598 }); 8599 this._els.filterMultiplyColor.on('changeShow', this.colorPickerChangeShow.bind(this)); 8600 this._els.filterTintColor.on('changeShow', this.colorPickerChangeShow.bind(this)); 8601 this._els.filterBlendColor.on('changeShow', this.colorPickerChangeShow.bind(this)); 8602 } 8603 8604 /** 8605 * Add event for filter 8606 * @param {Function} applyFilter - actions for firter 8607 * @param {string} filterName - filter name 8608 */ 8609 8610 }, { 8611 key: '_changeRangeValue',
8612 value: function _changeRangeValue(applyFilter, filterName) { 8613 var apply = this.checkedMap[filterName].checked; 8614 var type = filterName; 8615 8616 var checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group'); 8617 if (checkboxGroup) { 8618 if (apply) { 8619 checkboxGroup.classList.remove('tui-image-editor-disabled'); 8620 } else { 8621 checkboxGroup.classList.add('tui-image-editor-disabled'); 8622 } 8623 } 8624 applyFilter(apply, type, this._getFilterOption(type)); 8625 } 8626 8627 /** 8628 * Get filter option 8629 * @param {String} type - filter type 8630 * @returns {Object} filter option object 8631 * @private 8632 */ 8633 8634 }, { 8635 key: '_getFilterOption', 8636 value: function _getFilterOption(type) { 8637 // eslint-disable-line 8638 var option = {}; 8639 switch (type) { 8640 case 'removeWhite': 8641 option.threshold = (0, _util.toInteger)(this._els.removewhiteThresholdRange.value); 8642 option.distance = (0, _util.toInteger)(this._els.removewhiteDistanceRange.value); 8643 break; 8644 case 'gradientTransparency': 8645 option.threshold = (0, _util.toInteger)(this._els.gradientTransparencyRange.value); 8646 break; 8647 case 'colorFilter': 8648 option.color = '#FFFFFF'; 8649 option.threshold = this._els.colorfilterThresholeRange.value; 8650 break; 8651 case 'pixelate': 8652 option.blocksize = (0, _util.toInteger)(this._els.pixelateRange.value); 8653 break; 8654 case 'noise': 8655 option.noise = (0, _util.toInteger)(this._els.noiseRange.value); 8656 break; 8657 case 'brightness': 8658 option.brightness = (0, _util.toInteger)(this._els.brightnessRange.value); 8659 break; 8660 case 'blend': 8661 option.color = this._els.filterBlendColor.color; 8662 option.mode = this._els.blendType.value; 8663 break; 8664 case 'multiply': 8665 option.color = this._els.filterMultiplyColor.color; 8666 break; 8667 case 'tint': 8668 option.color = this._els.filterTintColor.color; 8669 option.opacity = this._els.tintOpacity.value; 8670 break; 8671 default: 8672 break; 8673 } 8674 8675 return option; 8676 } 8677 8678 /** 8679 * Make submenu range and colorpicker control 8680 * @private 8681 */ 8682 8683 }, { 8684 key: '_makeControlElement', 8685 value: function _makeControlElement() { 8686 var selector = this.selector; 8687 8688 this._els = { 8689 removewhiteThresholdRange: new _range2.default(selector('#tie-removewhite-threshold-range'), _consts.defaultFilterRangeValus.removewhiteThresholdRange), 8690 removewhiteDistanceRange: new _range2.default(selector('#tie-removewhite-distance-range'), _consts.defaultFilterRangeValus.removewhiteDistanceRange), 8691 gradientTransparencyRange: new _range2.default(selector('#tie-gradient-transparency-range'), _consts.defaultFilterRangeValus.gradientTransparencyRange), 8692 brightnessRange: new _range2.default(selector('#tie-brightness-range'), _consts.defaultFilterRangeValus.brightnessRange), 8693 noiseRange: new _range2.default(selector('#tie-noise-range'), _consts.defaultFilterRangeValus.noiseRange), 8694 pixelateRange: new _range2.default(selector('#tie-pixelate-range'), _consts.defaultFilterRangeValus.pixelateRange), 8695 colorfilterThresholeRange: new _range2.default(selector('#tie-colorfilter-threshole-range'), _consts.defaultFilterRangeValus.colorfilterThresholeRange), 8696 filterTintColor: new _colorpicker2.default(selector('#tie-filter-tint-color'), '#03bd9e', this.toggleDirection), 8697 filterMultiplyColor: new _colorpicker2.default(selector('#tie-filter-multiply-color'), '#515ce6', this.toggleDirection), 8698 filterBlendColor: new _colorpicker2.default(selector('#tie-filter-blend-color'), '#ffbb3b', this.toggleDirection) 8699 }; 8700 8701 this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl); 8702 this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl); 8703 8704 this.colorPickerControls.push(this._els.filterTintColor); 8705 this.colorPickerControls.push(this._els.filterMultiplyColor); 8706 this.colorPickerControls.push(this._els.filterBlendColor); 8707 } 8708 8709 /**
8710 * Make submenu control for picker & range mixin 8711 * @param {HTMLElement} pickerControl - pickerControl dom element 8712 * @returns {Range} 8713 * @private 8714 */ 8715 8716 }, { 8717 key: '_pickerWithRange', 8718 value: function _pickerWithRange(pickerControl) { 8719 var rangeWrap = document.createElement('div'); 8720 var rangelabel = document.createElement('label'); 8721 var range = document.createElement('div'); 8722 8723 range.id = 'tie-filter-tint-opacity'; 8724 rangelabel.innerHTML = 'Opacity'; 8725 rangeWrap.appendChild(rangelabel); 8726 rangeWrap.appendChild(range); 8727 pickerControl.appendChild(rangeWrap); 8728 pickerControl.style.height = PICKER_CONTROL_HEIGHT; 8729 8730 return new _range2.default(range, _consts.defaultFilterRangeValus.tintOpacityRange); 8731 } 8732 8733 /** 8734 * Make submenu control for picker & selectbox 8735 * @param {HTMLElement} pickerControl - pickerControl dom element 8736 * @returns {HTMLElement} 8737 * @private 8738 */ 8739 8740 }, { 8741 key: '_pickerWithSelectbox', 8742 value: function _pickerWithSelectbox(pickerControl) { 8743 var selectlistWrap = document.createElement('div'); 8744 var selectlist = document.createElement('select'); 8745 var optionlist = document.createElement('ul'); 8746 8747 selectlistWrap.className = 'tui-image-editor-selectlist-wrap'; 8748 optionlist.className = 'tui-image-editor-selectlist'; 8749 8750 selectlistWrap.appendChild(selectlist); 8751 selectlistWrap.appendChild(optionlist); 8752 8753 this._makeSelectOptionList(selectlist); 8754 8755 pickerControl.appendChild(selectlistWrap); 8756 pickerControl.style.height = PICKER_CONTROL_HEIGHT; 8757 8758 this._drawSelectOptionList(selectlist, optionlist); 8759 this._pickerWithSelectboxForAddEvent(selectlist, optionlist); 8760 8761 return selectlist; 8762 } 8763 8764 /** 8765 * Make selectbox option list custom style 8766 * @param {HTMLElement} selectlist - selectbox element 8767 * @param {HTMLElement} optionlist - custom option list item element 8768 * @private 8769 */ 8770 8771 }, { 8772 key: '_drawSelectOptionList', 8773 value: function _drawSelectOptionList(selectlist, optionlist) { 8774 var options = selectlist.querySelectorAll('option'); 8775 _tuiCodeSnippet2.default.forEach(options, function (option) { 8776 var optionElement = document.createElement('li'); 8777 optionElement.innerHTML = option.innerHTML; 8778 optionElement.setAttribute('data-item', option.value); 8779 optionlist.appendChild(optionElement); 8780 }); 8781 } 8782 8783 /** 8784 * custome selectbox custom event 8785 * @param {HTMLElement} selectlist - selectbox element 8786 * @param {HTMLElement} optionlist - custom option list item element 8787 * @private 8788 */ 8789 8790 }, { 8791 key: '_pickerWithSelectboxForAddEvent', 8792 value: function _pickerWithSelectboxForAddEvent(selectlist, optionlist) { 8793 var _this3 = this; 8794 8795 optionlist.addEventListener('click', function (event) { 8796 var optionValue = event.target.getAttribute('data-item'); 8797 var fireEvent = document.createEvent('HTMLEvents'); 8798 8799 selectlist.querySelector('[value="' + optionValue + '"]').selected = true; 8800 fireEvent.initEvent('change', true, true); 8801 8802 selectlist.dispatchEvent(fireEvent); 8803 8804 _this3.selectBoxShow = false; 8805 optionlist.style.display = 'none'; 8806 }); 8807 8808 selectlist.addEventListener('mousedown', function (event) { 8809 event.preventDefault(); 8810 _this3.selectBoxShow = !_this3.selectBoxShow; 8811 optionlist.style.display = _this3.selectBoxShow ? 'block' : 'none'; 8812 optionlist.setAttribute('data-selectitem', selectlist.value); 8813 optionlist.querySelector('[data-item=\'' + selectlist.value + '\']').classList.add('active'); 8814 }); 8815 } 8816 8817 /** 8818 * Make option list for select control 8819 * @param {HTMLElement} selectlist - blend option select list element 8820 * @private 8821 */ 8822 8823 }, { 8824 key: '_makeSelectOptionList', 8825 value: function _makeSelectOptionList(selectlist) { 8826 _tuiCodeSnippet2.default.forEach(BLEND_OPTIONS, function (option) { 8827 var selectOption = document.createElement('option'); 8828 selectOption.setAttribute('value', option); 8829 selectOption.innerHTML = option.replace(/^[a-z]/, function ($0) { 8830 return $0.toUpperCase(); 8831 }); 8832 selectlist.appendChild(selectOption); 8833 }); 8834 } 8835 }]); 8836 8837 return Filter; 8838 }(_submenuBase2.default); 8839 8840 exports.default = Filter; 8841 8842/***/ }), 8843/* 101 */
8844/***/ (function(module, exports) { 8845 8846 'use strict'; 8847 8848 Object.defineProperty(exports, "__esModule", { 8849 value: true 8850 }); 8851 8852 /** 8853 * @param {Locale} locale - Translate text 8854 * @returns {string} 8855 */ 8856 exports.default = function (_ref) { 8857 var locale = _ref.locale; 8858 return '\n <ul class="tui-image-editor-submenu-item">\n <li class="tui-image-editor-submenu-align">\n <div class="tui-image-editor-checkbox-wrap fixed-width">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-grayscale">\n <label for="tie-grayscale">' + locale.localize('Grayscale') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-invert">\n <label for="tie-invert">' + locale.localize('Invert') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-sepia">\n <label for="tie-sepia">' + locale.localize('Sepia') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-sepia2">\n <label for="tie-sepia2">' + locale.localize('Sepia2') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-blur">\n <label for="tie-blur">' + locale.localize('Blur') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-sharpen">\n <label for="tie-sharpen">' + locale.localize('Sharpen') + '</label>\n </div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-emboss">\n <label for="tie-emboss">' + locale.localize('Emboss') + '</label>\n </div>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li class="tui-image-editor-submenu-align">\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled" style="margin-bottom: 7px;">\n <div class="tui-image-editor-checkbox-wrap">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-remove-white">\n <label for="tie-remove-white">' + locale.localize('Remove White') + '</label>\n </div>\n </div>\n <div class="tui-image-editor-newline tui-image-editor-range-wrap short">\n <label>' + locale.localize('Threshold') + '</label>\n <div id="tie-removewhite-threshold-range"></div>\n </div>\n <div class="tui-image-editor-newline tui-image-editor-range-wrap short">\n <label>' + locale.localize('Distance') + '</label>\n <div id="tie-removewhite-distance-range"></div>\n </div>\n </div>\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">\n <div class="tui-image-editor-newline tui-image-editor-checkbox-wrap">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-gradient-transparency">\n <label for="tie-gradient-transparency">' + locale.localize('Gradient transparency') + '</label>\n </div>\n </div>\n <div class="tui-image-editor-newline tui-image-editor-range-wrap short">\n <label>' + locale.localize('Value') + '</label>\n <div id="tie-gradient-transparency-range"></div>\n </div>\n </div>\n </li>\n <li class="tui-image-editor-partition only-left-right">\n <div></div>\n </li>\n <li class="tui-image-editor-submenu-align">\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-brightness">\n <label for="tie-brightness">' + locale.localize('Brightness') + '</label>\n </div>\n <div class="tui-image-editor-range-wrap short">\n <div id="tie-brightness-range"></div>\n </div>\n </div>\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-noise">\n <label for="tie-noise">' + locale.localize('Noise') + '</label>\n </div>\n <div class="tui-image-editor-range-wrap short">\n <div id="tie-noise-range"></div>\n </div>\n </div>\n\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-pixelate">\n <label for="tie-pixelate">' + locale.localize('Pixelate') + '</label>\n </div>\n <div class="tui-image-editor-range-wrap short">\n <div id="tie-pixelate-range"></div>\n </div>\n </div>\n <div class="tui-image-editor-checkbox-group tui-image-editor-disabled">\n <div class="tui-image-editor-newline tui-image-editor-checkbox-wrap">\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-color-filter">\n <label for="tie-color-filter">
8858' + locale.localize('Color Filter') + '</label>\n </div>\n </div>\n <div class="tui-image-editor-newline tui-image-editor-range-wrap short">\n <label>' + locale.localize('Threshold') + '</label>\n <div id="tie-colorfilter-threshole-range"></div>\n </div>\n </div>\n </li>\n <li class="tui-image-editor-partition">\n <div></div>\n </li>\n <li>\n <div class="filter-color-item">\n <div id="tie-filter-tint-color" title="' + locale.localize('Tint') + '"></div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-tint">\n <label for="tie-tint"></label>\n </div>\n </div>\n <div class="filter-color-item">\n <div id="tie-filter-multiply-color" title="' + locale.localize('Multiply') + '"></div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-multiply">\n <label for="tie-multiply"></label>\n </div>\n </div>\n <div class="filter-color-item">\n <div id="tie-filter-blend-color" title="' + locale.localize('Blend') + '"></div>\n <div class="tui-image-editor-checkbox">\n <input type="checkbox" id="tie-blend">\n <label for="tie-blend"></label>\n </div>\n </div>\n </li>\n </ul>\n'; 8859 }; 8860 8861/***/ }), 8862/* 102 */ 8863/***/ (function(module, exports) { 8864 8865 "use strict"; 8866 8867 Object.defineProperty(exports, "__esModule", { 8868 value: true 8869 }); 8870 8871 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; }; }(); 8872 8873 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 8874 8875 /** 8876 * Translate messages 8877 */ 8878 var Locale = function () { 8879 function Locale(locale) { 8880 _classCallCheck(this, Locale); 8881 8882 this._locale = locale; 8883 } 8884 8885 /** 8886 * localize message 8887 * @param {string} message - message who will be localized 8888 * @returns {string} 8889 */ 8890 8891 8892 _createClass(Locale, [{ 8893 key: "localize", 8894 value: function localize(message) { 8895 return this._locale[message] || message; 8896 } 8897 }]); 8898 8899 return Locale; 8900 }(); 8901 8902 exports.default = Locale; 8903 8904/***/ }), 8905/* 103 */ 8906/***/ (function(module, exports, __webpack_require__) { 8907 8908 'use strict'; 8909 8910 Object.defineProperty(exports, "__esModule", { 8911 value: true 8912 }); 8913 8914 var _tuiCodeSnippet = __webpack_require__(3); 8915 8916 var _util = __webpack_require__(72); 8917 8918 var _util2 = _interopRequireDefault(_util); 8919 8920 var _imagetracer = __webpack_require__(104); 8921 8922 var _imagetracer2 = _interopRequireDefault(_imagetracer); 8923 8924 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 8925 8926 exports.default = { 8927 8928 /** 8929 * Get ui actions 8930 * @returns {Object} actions for ui 8931 * @private 8932 */ 8933 getActions: function getActions() { 8934 return { 8935 main: this._mainAction(), 8936 shape: this._shapeAction(), 8937 crop: this._cropAction(), 8938 flip: this._flipAction(), 8939 rotate: this._rotateAction(), 8940 text: this._textAction(), 8941 mask: this._maskAction(), 8942 draw: this._drawAction(), 8943 icon: this._iconAction(), 8944 filter: this._filterAction() 8945 }; 8946 }, 8947 8948 8949 /** 8950 * Main Action 8951 * @returns {Object} actions for ui main 8952 * @private 8953 */ 8954 _mainAction: function _mainAction() { 8955 var _this = this; 8956 8957 var exitCropOnAction = function exitCropOnAction() { 8958 if (_this.ui.submenu === 'crop') { 8959 _this.stopDrawingMode(); 8960 _this.ui.changeMenu('crop'); 8961 } 8962 }; 8963 8964 return (0, _tuiCodeSnippet.extend)({ 8965 initLoadImage: function initLoadImage(imagePath, imageName) { 8966 return _this.loadImageFromURL(imagePath, imageName).then(function (sizeValue) { 8967 exitCropOnAction(); 8968 _this.ui.initializeImgUrl = imagePath; 8969 _this.ui.resizeEditor({ imageSize: sizeValue }); 8970 _this.clearUndoStack(); 8971 }); 8972 }, 8973 undo: function undo() { 8974 if (!_this.isEmptyUndoStack()) { 8975 exitCropOnAction(); 8976 _this.undo(); 8977 } 8978 }, 8979 redo: function redo() { 8980 if (!_this.isEmptyRedoStack()) { 8981 exitCropOnAction(); 8982 _this.redo(); 8983 } 8984 }, 8985 reset: function reset() { 8986 exitCropOnAction(); 8987 _this.loadImageFromURL(_this.ui.initializeImgUrl, 'resetImage').then(function (sizeValue) { 8988 exitCropOnAction(); 8989 _this.ui.resizeEditor({ imageSize: sizeValue }); 8990 _this.clearUndoStack(); 8991 }); 8992 }, 8993 delete: function _delete() { 8994 _this.ui.changeDeleteButtonEnabled(false); 8995 exitCropOnAction(); 8996 _this.removeActiveObject(); 8997 _this.activeObjectId = null; 8998 }, 8999 deleteAll: function deleteAll() { 9000 exitCropOnAction(); 9001 _this.clearObjects(); 9002 _this.ui.changeDeleteButtonEnabled(false); 9003 _this.ui.changeDeleteAllButtonEnabled(false); 9004 }, 9005 load: function load(file) { 9006 if (!_util2.default.isSupportFileApi()) { 9007 alert('This browser does not support file-api'); 9008 } 9009 9010 _this.ui.initializeImgUrl = URL.createObjectURL(file); 9011 _this.loadImageFromFile(file).then(function (sizeValue) { 9012 exitCropOnAction(); 9013 _this.clearUndoStack(); 9014 _this.ui.activeMenuEvent(); 9015 _this.ui.resizeEditor({ imageSize: sizeValue }); 9016 })['catch'](function (message) { 9017 return Promise.reject(message); 9018 }); 9019 }, 9020 download: function download() { 9021 var dataURL = _this.toDataURL(); 9022 var imageName = _this.getImageName(); 9023 var blob = void 0, 9024 type = void 0, 9025 w = void 0; 9026 9027 if (_util2.default.isSupportFileApi() && window.saveAs) { 9028 blob = _util2.default.base64ToBlob(dataURL); 9029 type = blob.type.split('/')[1]; 9030 if (imageName.split('.').pop() !== type) { 9031 imageName += '.' + type; 9032 } 9033 saveAs(blob, imageName); // eslint-disable-line 9034 } else { 9035 w = window.open(); 9036 w.document.body.innerHTML = '<img src=\'' + dataURL + '\'>'; 9037 } 9038 } 9039 }, this._commonAction()); 9040 }, 9041 9042 9043 /** 9044 * Icon Action 9045 * @returns {Object} actions for ui icon 9046 * @private 9047 */ 9048 _iconAction: function _iconAction() { 9049 var _this2 = this; 9050 9051 var cacheIconType = void 0; 9052 var cacheIconColor = void 0; 9053 var startX = void 0; 9054 var startY = void 0; 9055 var iconWidth = void 0; 9056 var iconHeight = void 0; 9057 var objId = void 0; 9058 9059 this.on({ 9060 'iconCreateResize': function iconCreateResize(_ref) { 9061 var moveOriginPointer = _ref.moveOriginPointer; 9062 9063 var scaleX = (moveOriginPointer.x - startX) / iconWidth;
9064 var scaleY = (moveOriginPointer.y - startY) / iconHeight; 9065 9066 _this2.setObjectPropertiesQuietly(objId, { 9067 scaleX: Math.abs(scaleX * 2), 9068 scaleY: Math.abs(scaleY * 2) 9069 }); 9070 }, 9071 'iconCreateEnd': function iconCreateEnd() { 9072 _this2.ui.icon.clearIconType(); 9073 _this2.changeSelectableAll(true); 9074 } 9075 }); 9076 9077 var mouseDown = function mouseDown(e, originPointer) { 9078 startX = originPointer.x; 9079 startY = originPointer.y; 9080 9081 _this2.addIcon(cacheIconType, { 9082 left: originPointer.x, 9083 top: originPointer.y, 9084 fill: cacheIconColor 9085 }).then(function (obj) { 9086 objId = obj.id; 9087 iconWidth = obj.width; 9088 iconHeight = obj.height; 9089 }); 9090 }; 9091 9092 return (0, _tuiCodeSnippet.extend)({ 9093 changeColor: function changeColor(color) { 9094 if (_this2.activeObjectId) { 9095 _this2.changeIconColor(_this2.activeObjectId, color); 9096 } 9097 }, 9098 addIcon: function addIcon(iconType, iconColor) { 9099 cacheIconType = iconType; 9100 cacheIconColor = iconColor; 9101 // this.readyAddIcon(); 9102 _this2.changeCursor('crosshair'); 9103 _this2.off('mousedown'); 9104 _this2.once('mousedown', mouseDown.bind(_this2)); 9105 }, 9106 cancelAddIcon: function cancelAddIcon() { 9107 _this2.off('mousedown'); 9108 _this2.ui.icon.clearIconType(); 9109 _this2.changeSelectableAll(true); 9110 _this2.changeCursor('default'); 9111 }, 9112 registDefalutIcons: function registDefalutIcons(type, path) { 9113 var iconObj = {}; 9114 iconObj[type] = path; 9115 _this2.registerIcons(iconObj); 9116 }, 9117 registCustomIcon: function registCustomIcon(imgUrl, file) { 9118 var imagetracer = new _imagetracer2.default(); 9119 imagetracer.imageToSVG(imgUrl, function (svgstr) { 9120 var _svgstr$match = svgstr.match(/path[^>]*d="([^"]*)"/), 9121 svgPath = _svgstr$match[1]; 9122 9123 var iconObj = {}; 9124 iconObj[file.name] = svgPath; 9125 _this2.registerIcons(iconObj); 9126 _this2.addIcon(file.name, { 9127 left: 100, 9128 top: 100 9129 }); 9130 }, _imagetracer2.default.tracerDefaultOption()); 9131 } 9132 }, this._commonAction()); 9133 }, 9134 9135 9136 /** 9137 * Draw Action 9138 * @returns {Object} actions for ui draw 9139 * @private 9140 */ 9141 _drawAction: function _drawAction() { 9142 var _this3 = this; 9143 9144 return (0, _tuiCodeSnippet.extend)({ 9145 setDrawMode: function setDrawMode(type, settings) { 9146 _this3.stopDrawingMode(); 9147 if (type === 'free') { 9148 _this3.startDrawingMode('FREE_DRAWING', settings); 9149 } else { 9150 _this3.startDrawingMode('LINE_DRAWING', settings); 9151 } 9152 }, 9153 setColor: function setColor(color) { 9154 _this3.setBrush({ 9155 color: color 9156 }); 9157 } 9158 }, this._commonAction()); 9159 }, 9160 9161 9162 /** 9163 * Mask Action 9164 * @returns {Object} actions for ui mask 9165 * @private 9166 */ 9167 _maskAction: function _maskAction() { 9168 var _this4 = this; 9169 9170 return (0, _tuiCodeSnippet.extend)({ 9171 loadImageFromURL: function loadImageFromURL(imgUrl, file) { 9172 return _this4.loadImageFromURL(_this4.toDataURL(), 'FilterImage').then(function () { 9173 _this4.addImageObject(imgUrl).then(function () { 9174 URL.revokeObjectURL(file); 9175 }); 9176 }); 9177 }, 9178 applyFilter: function applyFilter() { 9179 _this4.applyFilter('mask', { 9180 maskObjId: _this4.activeObjectId 9181 }); 9182 } 9183 }, this._commonAction()); 9184 }, 9185 9186 9187 /** 9188 * Text Action 9189 * @returns {Object} actions for ui text 9190 * @private 9191 */ 9192 _textAction: function _textAction() { 9193 var _this5 = this; 9194 9195 return (0, _tuiCodeSnippet.extend)({ 9196 changeTextStyle: function changeTextStyle(styleObj) { 9197 if (_this5.activeObjectId) { 9198 _this5.changeTextStyle(_this5.activeObjectId, styleObj); 9199 } 9200 } 9201 }, this._commonAction()); 9202 }, 9203 9204 9205 /** 9206 * Rotate Action 9207 * @returns {Object} actions for ui rotate 9208 * @private 9209 */ 9210 _rotateAction: function _rotateAction() { 9211 var _this6 = this; 9212 9213 return (0, _tuiCodeSnippet.extend)({ 9214 rotate: function rotate(angle) { 9215 _this6.rotate(angle); 9216 _this6.ui.resizeEditor(); 9217 }, 9218 setAngle: function setAngle(angle) { 9219 _this6.setAngle(angle); 9220 _this6.ui.resizeEditor(); 9221 } 9222 }, this._commonAction()); 9223 }, 9224 9225 9226 /** 9227 * Shape Action 9228 * @returns {Object} actions for ui shape 9229 * @private 9230 */ 9231 _shapeAction: function _shapeAction() { 9232 var _this7 = this; 9233 9234 return (0, _tuiCodeSnippet.extend)({ 9235 changeShape: function changeShape(changeShapeObject) { 9236 if (_this7.activeObjectId) { 9237 _this7.changeShape(_this7.activeObjectId, changeShapeObject); 9238 } 9239 }, 9240 setDrawingShape: function setDrawingShape(shapeType) { 9241 _this7.setDrawingShape(shapeType); 9242 } 9243 }, this._commonAction()); 9244 }, 9245 9246 9247 /** 9248 * Crop Action 9249 * @returns {Object} actions for ui crop 9250 * @private 9251 */ 9252 _cropAction: function _cropAction() { 9253 var _this8 = this; 9254 9255 return (0, _tuiCodeSnippet.extend)({ 9256 crop: function crop() { 9257 var cropRect = _this8.getCropzoneRect(); 9258 if (cropRect) { 9259 _this8.crop(cropRect).then(function () { 9260 _this8.stopDrawingMode(); 9261 _this8.ui.resizeEditor(); 9262 _this8.ui.changeMenu('crop'); 9263 })['catch'](function (message) { 9264 return Promise.reject(message); 9265 }); 9266 } 9267 }, 9268 cancel: function cancel() { 9269 _this8.stopDrawingMode(); 9270 _this8.ui.changeMenu('crop'); 9271 }, 9272 preset: function preset(presetType) { 9273 switch (presetType) { 9274 case 'preset-square': 9275 _this8.setCropzoneRect(1 / 1); 9276 break; 9277 case 'preset-3-2': 9278 _this8.setCropzoneRect(3 / 2); 9279 break; 9280 case 'preset-4-3': 9281 _this8.setCropzoneRect(4 / 3); 9282 break; 9283 case 'preset-5-4': 9284 _this8.setCropzoneRect(5 / 4); 9285 break; 9286 case 'preset-7-5': 9287 _this8.setCropzoneRect(7 / 5); 9288 break; 9289 case 'preset-16-9': 9290 _this8.setCropzoneRect(16 / 9); 9291 break; 9292 default: 9293 _this8.setCropzoneRect(); 9294 _this8.ui.crop.changeApplyButtonStatus(false); 9295 break; 9296 } 9297 } 9298 }, this._commonAction()); 9299 }, 9300 9301 9302 /** 9303 * Flip Action 9304 * @returns {Object} actions for ui flip 9305 * @private 9306 */ 9307 _flipAction: function _flipAction() { 9308 var _this9 = this; 9309 9310 return (0, _tuiCodeSnippet.extend)({ 9311 flip: function flip(flipType) { 9312 return _this9[flipType](); 9313 } 9314 }, this._commonAction()); 9315 }, 9316 9317 9318 /** 9319 * Filter Action 9320 * @returns {Object} actions for ui filter 9321 * @private 9322 */ 9323 _filterAction: function _filterAction() { 9324 var _this10 = this; 9325 9326 return (0, _tuiCodeSnippet.extend)({ 9327 applyFilter: function applyFilter(applying, type, options) {
9328 if (applying) { 9329 _this10.applyFilter(type, options); 9330 } else if (_this10.hasFilter(type)) { 9331 _this10.removeFilter(type); 9332 } 9333 } 9334 }, this._commonAction()); 9335 }, 9336 9337 9338 /** 9339 * Image Editor Event Observer 9340 */ 9341 setReAction: function setReAction() { 9342 var _this11 = this; 9343 9344 this.on({ 9345 undoStackChanged: function undoStackChanged(length) { 9346 if (length) { 9347 _this11.ui.changeUndoButtonStatus(true); 9348 _this11.ui.changeResetButtonStatus(true); 9349 } else { 9350 _this11.ui.changeUndoButtonStatus(false); 9351 _this11.ui.changeResetButtonStatus(false); 9352 } 9353 _this11.ui.resizeEditor(); 9354 }, 9355 redoStackChanged: function redoStackChanged(length) { 9356 if (length) { 9357 _this11.ui.changeRedoButtonStatus(true); 9358 } else { 9359 _this11.ui.changeRedoButtonStatus(false); 9360 } 9361 _this11.ui.resizeEditor(); 9362 }, 9363 /* eslint-disable complexity */ 9364 objectActivated: function objectActivated(obj) { 9365 _this11.activeObjectId = obj.id; 9366 9367 _this11.ui.changeDeleteButtonEnabled(true); 9368 _this11.ui.changeDeleteAllButtonEnabled(true); 9369 9370 if (obj.type === 'cropzone') { 9371 _this11.ui.crop.changeApplyButtonStatus(true); 9372 } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) { 9373 _this11.stopDrawingMode(); 9374 if (_this11.ui.submenu !== 'shape') { 9375 _this11.ui.changeMenu('shape', false, false); 9376 } 9377 _this11.ui.shape.setShapeStatus({ 9378 strokeColor: obj.stroke, 9379 strokeWidth: obj.strokeWidth, 9380 fillColor: obj.fill 9381 }); 9382 9383 _this11.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); 9384 } else if (obj.type === 'path' || obj.type === 'line') { 9385 if (_this11.ui.submenu !== 'draw') { 9386 _this11.ui.changeMenu('draw', false, false); 9387 _this11.ui.draw.changeStandbyMode(); 9388 } 9389 } else if (['i-text', 'text'].indexOf(obj.type) > -1) { 9390 if (_this11.ui.submenu !== 'text') { 9391 _this11.ui.changeMenu('text', false, false); 9392 } 9393 } else if (obj.type === 'icon') { 9394 _this11.stopDrawingMode(); 9395 if (_this11.ui.submenu !== 'icon') { 9396 _this11.ui.changeMenu('icon', false, false); 9397 } 9398 _this11.ui.icon.setIconPickerColor(obj.fill); 9399 } 9400 }, 9401 /* eslint-enable complexity */ 9402 addText: function addText(pos) { 9403 _this11.addText('Double Click', { 9404 position: pos.originPosition, 9405 styles: { 9406 fill: _this11.ui.text.textColor, 9407 fontSize: _util2.default.toInteger(_this11.ui.text.fontSize), 9408 fontFamily: 'Noto Sans' 9409 } 9410 }).then(function () { 9411 _this11.changeCursor('default'); 9412 }); 9413 }, 9414 addObjectAfter: function addObjectAfter(obj) { 9415 if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) { 9416 _this11.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); 9417 _this11.ui.shape.changeStandbyMode(); 9418 } 9419 }, 9420 objectScaled: function objectScaled(obj) { 9421 if (['i-text', 'text'].indexOf(obj.type) > -1) { 9422 _this11.ui.text.fontSize = _util2.default.toInteger(obj.fontSize); 9423 } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) { 9424 var width = obj.width, 9425 height = obj.height; 9426 9427 var strokeValue = _this11.ui.shape.getStrokeValue(); 9428 9429 if (width < strokeValue) { 9430 _this11.ui.shape.setStrokeValue(width); 9431 } 9432 if (height < strokeValue) { 9433 _this11.ui.shape.setStrokeValue(height); 9434 } 9435 } 9436 }, 9437 selectionCleared: function selectionCleared() { 9438 _this11.activeObjectId = null; 9439 if (_this11.ui.submenu === 'text') { 9440 _this11.changeCursor('text'); 9441 } else if (_this11.ui.submenu !== 'draw' && _this11.ui.submenu !== 'crop') { 9442 _this11.stopDrawingMode(); 9443 } 9444 } 9445 }); 9446 }, 9447 9448 9449 /** 9450 * Common Action 9451 * @returns {Object} common actions for ui 9452 * @private 9453 */ 9454 _commonAction: function _commonAction() { 9455 var _this12 = this; 9456 9457 return { 9458 modeChange: function modeChange(menu) { 9459 switch (menu) { 9460 case 'text': 9461 _this12._changeActivateMode('TEXT'); 9462 break; 9463 case 'crop': 9464 _this12.startDrawingMode('CROPPER'); 9465 break; 9466 case 'shape': 9467 _this12._changeActivateMode('SHAPE'); 9468 _this12.setDrawingShape(_this12.ui.shape.type, _this12.ui.shape.options); 9469 break; 9470 default: 9471 break; 9472 } 9473 }, 9474 deactivateAll: this.deactivateAll.bind(this), 9475 changeSelectableAll: this.changeSelectableAll.bind(this), 9476 discardSelection: this.discardSelection.bind(this), 9477 stopDrawingMode: this.stopDrawingMode.bind(this) 9478 }; 9479 }, 9480 9481 9482 /** 9483 * Mixin 9484 * @param {ImageEditor} ImageEditor instance 9485 */ 9486 mixin: function mixin(ImageEditor) { 9487 (0, _tuiCodeSnippet.extend)(ImageEditor.prototype, this); 9488 } 9489 }; 9490 9491/***/ }), 9492/* 104 */
vendor: 35,035 bytes, lines 9493-10288
9493/***/ (function(module, exports) { 9494 9495 'use strict'; 9496 9497 Object.defineProperty(exports, "__esModule", { 9498 value: true 9499 }); 9500 9501 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; }; }(); 9502 9503 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 9504 9505 /* 9506 imagetracer.js version 1.2.4 9507 Simple raster image tracer and vectorizer written in JavaScript. 9508 [email protected] 9509 */ 9510 9511 /* 9512 The Unlicense / PUBLIC DOMAIN 9513 This is free and unencumbered software released into the public domain. 9514 Anyone is free to copy, modify, publish, use, compile, sell, or 9515 distribute this software, either in source code form or as a compiled 9516 binary, for any purpose, commercial or non-commercial, and by any 9517 means. 9518 In jurisdictions that recognize copyright laws, the author or authors 9519 of this software dedicate any and all copyright interest in the 9520 software to the public domain. We make this dedication for the benefit 9521 of the public at large and to the detriment of our heirs and 9522 successors. We intend this dedication to be an overt act of 9523 relinquishment in perpetuity of all present and future rights to this 9524 software under copyright law. 9525 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 9526 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 9527 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 9528 IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 9529 OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 9530 ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 9531 OTHER DEALINGS IN THE SOFTWARE. 9532 For more information, please refer to http://unlicense.org/ 9533 */ 9534 var ImageTracer = function () { 9535 _createClass(ImageTracer, null, [{ 9536 key: 'tracerDefaultOption', 9537 value: function tracerDefaultOption() { 9538 return { 9539 pathomit: 100, 9540 ltres: 0.1, 9541 qtres: 1, 9542 9543 scale: 1, 9544 strokewidth: 5, 9545 viewbox: false, 9546 linefilter: true, 9547 desc: false, 9548 rightangleenhance: false, 9549 pal: [{ 9550 r: 0, 9551 g: 0, 9552 b: 0, 9553 a: 255 9554 }, { 9555 r: 255, 9556 g: 255, 9557 b: 255, 9558 a: 255 9559 }] 9560 }; 9561 } 9562 /* eslint-disable */ 9563 9564 }]); 9565 9566 function ImageTracer() { 9567 _classCallCheck(this, ImageTracer); 9568 9569 this.versionnumber = '1.2.4'; 9570 this.optionpresets = { 9571 default: { 9572 corsenabled: false, 9573 ltres: 1, 9574 qtres: 1, 9575 pathomit: 8, 9576 rightangleenhance: true, 9577 colorsampling: 2, 9578 numberofcolors: 16, 9579 mincolorratio: 0, 9580 colorquantcycles: 3, 9581 layering: 0, 9582 strokewidth: 1, 9583 linefilter: false, 9584 scale: 1, 9585 roundcoords: 1, 9586 viewbox: false, 9587 desc: false, 9588 lcpr: 0, 9589 qcpr: 0, 9590 blurradius: 0, 9591 blurdelta: 20 9592 }, 9593 'posterized1': { 9594 colorsampling: 0, 9595 numberofcolors: 2 9596 }, 9597 'posterized2': { 9598 numberofcolors: 4, 9599 blurradius: 5 9600 }, 9601 'curvy': { 9602 ltres: 0.01, 9603 linefilter: true, 9604 rightangleenhance: false }, 9605 'sharp': { qtres: 0.01, 9606 linefilter: false }, 9607 'detailed': { pathomit: 0, 9608 roundcoords: 2, 9609 ltres: 0.5, 9610 qtres: 0.5, 9611 numberofcolors: 64 }, 9612 'smoothed': { blurradius: 5, 9613 blurdelta: 64 }, 9614 'grayscale': { colorsampling: 0, 9615 colorquantcycles: 1, 9616 numberofcolors: 7 }, 9617 'fixedpalette': { colorsampling: 0, 9618 colorquantcycles: 1, 9619 numberofcolors: 27 }, 9620 'randomsampling1': { colorsampling: 1, 9621 numberofcolors: 8 }, 9622 'randomsampling2': { colorsampling: 1, 9623 numberofcolors: 64 }, 9624 'artistic1': { colorsampling: 0, 9625 colorquantcycles: 1, 9626 pathomit: 0, 9627 blurradius: 5, 9628 blurdelta: 64, 9629 ltres: 0.01, 9630 linefilter: true, 9631 numberofcolors: 16, 9632 strokewidth: 2 }, 9633 'artistic2': { qtres: 0.01, 9634 colorsampling: 0, 9635 colorquantcycles: 1, 9636 numberofcolors: 4, 9637 strokewidth: 0 }, 9638 'artistic3': { qtres: 10, 9639 ltres: 10, 9640 numberofcolors: 8 }, 9641 'artistic4': { qtres: 10, 9642 ltres: 10, 9643 numberofcolors: 64, 9644 blurradius: 5, 9645 blurdelta: 256, 9646 strokewidth: 2 }, 9647 'posterized3': { ltres: 1, 9648 qtres: 1, 9649 pathomit: 20, 9650 rightangleenhance: true, 9651 colorsampling: 0, 9652 numberofcolors: 3, 9653 mincolorratio: 0, 9654 colorquantcycles: 3, 9655 blurradius: 3, 9656 blurdelta: 20, 9657 strokewidth: 0, 9658 linefilter: false, 9659 roundcoords: 1, 9660 pal: [{ r: 0, 9661 g: 0, 9662 b: 100, 9663 a: 255 }, { r: 255, 9664 g: 255, 9665 b: 255, 9666 a: 255 }] } 9667 }; 9668 9669 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]]]; 9670 9671 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]]; 9672 9673 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 }]; 9674 } 9675 9676 _createClass(ImageTracer, [{ 9677 key: 'imageToSVG', 9678 value: function imageToSVG(url, callback, options) { 9679 var _this = this; 9680 9681 options = this.checkoptions(options); 9682 this.loadImage(url, function (canvas) { 9683 callback(_this.imagedataToSVG(_this.getImgdata(canvas), options)); 9684 }, options); 9685 } 9686 }, { 9687 key: 'imagedataToSVG', 9688 value: function imagedataToSVG(imgd, options) { 9689 options = this.checkoptions(options); 9690 var td = this.imagedataToTracedata(imgd, options); 9691 9692 return this.getsvgstring(td, options); 9693 } 9694 }, { 9695 key: 'imageToTracedata', 9696 value: function imageToTracedata(url, callback, options) { 9697 var _this2 = this; 9698 9699 options = this.checkoptions(options); 9700 this.loadImage(url, function (canvas) { 9701 callback(_this2.imagedataToTracedata(_this2.getImgdata(canvas), options)); 9702 }, options); 9703 } 9704 }, { 9705 key: 'imagedataToTracedata', 9706 value: function imagedataToTracedata(imgd, options) { 9707 options = this.checkoptions(options); 9708 var ii = this.colorquantization(imgd, options); 9709 var tracedata = void 0; 9710 if (options.layering === 0) { 9711 tracedata = { 9712 layers: [], 9713 palette: ii.palette, 9714 width: ii.array[0].length - 2, 9715 height: ii.array.length - 2 9716 }; 9717 9718 for (var colornum = 0; colornum < ii.palette.length; colornum += 1) { 9719 var tracedlayer = this.batchtracepaths(this.internodes(this.pathscan(this.layeringstep(ii, colornum), options.pathomit), options), options.ltres, options.qtres); 9720 tracedata.layers.push(tracedlayer); 9721 } 9722 } else { 9723 var ls = this.layering(ii); 9724 if (options.layercontainerid) { 9725 this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid); 9726 } 9727 var bps = this.batchpathscan(ls, options.pathomit); 9728 var bis = this.batchinternodes(bps, options); 9729 tracedata = { 9730 layers: this.batchtracelayers(bis, options.ltres, options.qtres), 9731 palette: ii.palette, 9732 width: imgd.width, 9733 height: imgd.height 9734 }; 9735 } 9736 9737 return tracedata; 9738 } 9739 }, { 9740 key: 'checkoptions', 9741 value: function checkoptions(options) { 9742 options = options || {}; 9743 if (typeof options === 'string') { 9744 options = options.toLowerCase(); 9745 if (this.optionpresets[options]) { 9746 options = this.optionpresets[options]; 9747 } else { 9748 options = {}; 9749 } 9750 } 9751 var ok = Object.keys(this.optionpresets['default']); 9752 for (var k = 0; k < ok.length; k += 1) { 9753 if (!options.hasOwnProperty(ok[k])) { 9754 options[ok[k]] = this.optionpresets['default'][ok[k]]; 9755 } 9756 } 9757 9758 return options; 9759 } 9760 }, { 9761 key: 'colorquantization', 9762 value: function colorquantization(imgd, options) { 9763 var arr = []; 9764 var idx = 0; 9765 var cd = void 0; 9766 var cdl = void 0; 9767 var ci = void 0; 9768 var paletteacc = []; 9769 var pixelnum = imgd.width * imgd.height; 9770 var i = void 0; 9771 var j = void 0; 9772 var k = void 0; 9773 var cnt = void 0; 9774 var palette = void 0; 9775 9776 for (j = 0; j < imgd.height + 2; j += 1) { 9777 arr[j] = []; 9778 for (i = 0; i < imgd.width + 2; i += 1) { 9779 arr[j][i] = -1; 9780 } 9781 } 9782 if (options.pal) { 9783 palette = options.pal; 9784 } else if (options.colorsampling === 0) { 9785 palette = this.generatepalette(options.numberofcolors); 9786 } else if (options.colorsampling === 1) { 9787 palette = this.samplepalette(options.numberofcolors, imgd); 9788 } else { 9789 palette = this.samplepalette2(options.numberofcolors, imgd); 9790 } 9791 if (options.blurradius > 0) { 9792 imgd = this.blur(imgd, options.blurradius, options.blurdelta); 9793 } 9794 for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) { 9795 if (cnt > 0) { 9796 for (k = 0; k < palette.length; k += 1) { 9797 if (paletteacc[k].n > 0) { 9798 palette[k] = { r: Math.floor(paletteacc[k].r / paletteacc[k].n), 9799 g: Math.floor(paletteacc[k].g / paletteacc[k].n), 9800 b: Math.floor(paletteacc[k].b / paletteacc[k].n), 9801 a: Math.floor(paletteacc[k].a / paletteacc[k].n) }; 9802 } 9803 9804 if (paletteacc[k].n / pixelnum < options.mincolorratio && cnt < options.colorquantcycles - 1) { 9805 palette[k] = { r: Math.floor(Math.random() * 255), 9806 g: Math.floor(Math.random() * 255), 9807 b: Math.floor(Math.random() * 255), 9808 a: Math.floor(Math.random() * 255) }; 9809 } 9810 } 9811 } 9812 9813 for (i = 0; i < palette.length; i += 1) { 9814 paletteacc[i] = { r: 0, 9815 g: 0, 9816 b: 0, 9817 a: 0, 9818 n: 0 }; 9819 } 9820 9821 for (j = 0; j < imgd.height; j += 1) { 9822 for (i = 0; i < imgd.width; i += 1) { 9823 idx = (j * imgd.width + i) * 4; 9824 9825 ci = 0; 9826 cdl = 1024; 9827 for (k = 0; k < palette.length; k += 1) { 9828 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]); 9829 9830 if (cd < cdl) { 9831 cdl = cd; 9832 ci = k; 9833 } 9834 } 9835 9836 paletteacc[ci].r += imgd.data[idx]; 9837 paletteacc[ci].g += imgd.data[idx + 1]; 9838 paletteacc[ci].b += imgd.data[idx + 2]; 9839 paletteacc[ci].a += imgd.data[idx + 3]; 9840 paletteacc[ci].n += 1; 9841 9842 arr[j + 1][i + 1] = ci; 9843 } 9844 } 9845 } 9846 9847 return { array: arr, 9848 palette: palette }; 9849 } 9850 }, { 9851 key: 'samplepalette', 9852 value: function samplepalette(numberofcolors, imgd) { 9853 var idx = void 0; 9854 var palette = []; 9855 for (var i = 0; i < numberofcolors; i += 1) { 9856 idx = Math.floor(Math.random() * imgd.data.length / 4) * 4; 9857 palette.push({ r: imgd.data[idx], 9858 g: imgd.data[idx + 1], 9859 b: imgd.data[idx + 2], 9860 a: imgd.data[idx + 3] }); 9861 } 9862 9863 return palette; 9864 } 9865 }, { 9866 key: 'samplepalette2', 9867 value: function samplepalette2(numberofcolors, imgd) { 9868 var idx = void 0; 9869 var palette = []; 9870 var ni = Math.ceil(Math.sqrt(numberofcolors)); 9871 var nj = Math.ceil(numberofcolors / ni); 9872 var vx = imgd.width / (ni + 1); 9873 var vy = imgd.height / (nj + 1); 9874 for (var j = 0; j < nj; j += 1) { 9875 for (var i = 0; i < ni; i += 1) { 9876 if (palette.length === numberofcolors) { 9877 break; 9878 } else { 9879 idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4; 9880 palette.push({ r: imgd.data[idx], 9881 g: imgd.data[idx + 1], 9882 b: imgd.data[idx + 2], 9883 a: imgd.data[idx + 3] }); 9884 } 9885 } 9886 } 9887 9888 return palette; 9889 } 9890 }, { 9891 key: 'generatepalette', 9892 value: function generatepalette(numberofcolors) { 9893 var palette = []; 9894 var rcnt = void 0; 9895 var gcnt = void 0; 9896 var bcnt = void 0; 9897 if (numberofcolors < 8) { 9898 var graystep = Math.floor(255 / (numberofcolors - 1)); 9899 for (var i = 0; i < numberofcolors; i += 1) { 9900 palette.push({ r: i * graystep, 9901 g: i * graystep, 9902 b: i * graystep, 9903 a: 255 }); 9904 } 9905 } else { 9906 var colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3)); 9907 var colorstep = Math.floor(255 / (colorqnum - 1)); 9908 var rndnum = numberofcolors - colorqnum * colorqnum * colorqnum; 9909 for (rcnt = 0; rcnt < colorqnum; rcnt += 1) { 9910 for (gcnt = 0; gcnt < colorqnum; gcnt += 1) { 9911 for (bcnt = 0; bcnt < colorqnum; bcnt += 1) { 9912 palette.push({ r: rcnt * colorstep, 9913 g: gcnt * colorstep, 9914 b: bcnt * colorstep, 9915 a: 255 }); 9916 } 9917 } 9918 } 9919 for (rcnt = 0; rcnt < rndnum; rcnt += 1) { 9920 palette.push({ r: Math.floor(Math.random() * 255), 9921 g: Math.floor(Math.random() * 255), 9922 b: Math.floor(Math.random() * 255), 9923 a: Math.floor(Math.random() * 255) }); 9924 } 9925 } 9926 9927 return palette; 9928 } 9929 }, { 9930 key: 'layering', 9931 value: function layering(ii) { 9932 var layers = []; 9933 var val = 0; 9934 var ah = ii.array.length; 9935 var aw = ii.array[0].length; 9936 var n1 = void 0; 9937 var n2 = void 0; 9938 var n3 = void 0; 9939 var n4 = void 0; 9940 var n5 = void 0; 9941 var n6 = void 0; 9942 var n7 = void 0; 9943 var n8 = void 0; 9944 var i = void 0; 9945 var j = void 0; 9946 var k = void 0; 9947 for (k = 0; k < ii.palette.length; k += 1) { 9948 layers[k] = []; 9949 for (j = 0; j < ah; j += 1) { 9950 layers[k][j] = []; 9951 for (i = 0; i < aw; i += 1) { 9952 layers[k][j][i] = 0; 9953 } 9954 } 9955 } 9956 for (j = 1; j < ah - 1; j += 1) { 9957 for (i = 1; i < aw - 1; i += 1) { 9958 val = ii.array[j][i]; 9959 9960 n1 = ii.array[j - 1][i - 1] === val ? 1 : 0; 9961 n2 = ii.array[j - 1][i] === val ? 1 : 0; 9962 n3 = ii.array[j - 1][i + 1] === val ? 1 : 0; 9963 n4 = ii.array[j][i - 1] === val ? 1 : 0; 9964 n5 = ii.array[j][i + 1] === val ? 1 : 0; 9965 n6 = ii.array[j + 1][i - 1] === val ? 1 : 0; 9966 n7 = ii.array[j + 1][i] === val ? 1 : 0; 9967 n8 = ii.array[j + 1][i + 1] === val ? 1 : 0; 9968 9969 layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8; 9970 if (!n4) { 9971 layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8; 9972 } 9973 if (!n2) { 9974 layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8; 9975 } 9976 if (!n1) { 9977 layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8; 9978 } 9979 } 9980 } 9981 9982 return layers; 9983 } 9984 }, { 9985 key: 'layeringstep', 9986 value: function layeringstep(ii, cnum) { 9987 var layer = []; 9988 var ah = ii.array.length; 9989 var aw = ii.array[0].length; 9990 var i = void 0; 9991 var j = void 0; 9992 for (j = 0; j < ah; j += 1) { 9993 layer[j] = []; 9994 for (i = 0; i < aw; i += 1) { 9995 layer[j][i] = 0; 9996 } 9997 } 9998 for (j = 1; j < ah; j += 1) { 9999 for (i = 1; i < aw; i += 1) { 10000 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); 10001 } 10002 } 10003 10004 return layer; 10005 } 10006 }, { 10007 key: 'pathscan', 10008 value: function pathscan(arr, pathomit) { 10009 var paths = []; 10010 var pacnt = 0; 10011 var pcnt = 0; 10012 var px = 0; 10013 var py = 0; 10014 var w = arr[0].length; 10015 var h = arr.length; 10016 var dir = 0; 10017 var pathfinished = true; 10018 var holepath = false; 10019 var lookuprow = void 0; 10020 for (var j = 0; j < h; j += 1) { 10021 for (var i = 0; i < w; i += 1) { 10022 if (arr[j][i] === 4 || arr[j][i] === 11) { 10023 px = i; 10024 py = j; 10025 paths[pacnt] = {}; 10026 paths[pacnt].points = []; 10027 paths[pacnt].boundingbox = [px, py, px, py]; 10028 paths[pacnt].holechildren = []; 10029 pathfinished = false; 10030 pcnt = 0; 10031 holepath = arr[j][i] === 11; 10032 dir = 1; 10033 10034 while (!pathfinished) { 10035 paths[pacnt].points[pcnt] = {}; 10036 paths[pacnt].points[pcnt].x = px - 1; 10037 paths[pacnt].points[pcnt].y = py - 1; 10038 paths[pacnt].points[pcnt].t = arr[py][px]; 10039 10040 if (px - 1 < paths[pacnt].boundingbox[0]) { 10041 paths[pacnt].boundingbox[0] = px - 1; 10042 } 10043 if (px - 1 > paths[pacnt].boundingbox[2]) { 10044 paths[pacnt].boundingbox[2] = px - 1; 10045 } 10046 if (py - 1 < paths[pacnt].boundingbox[1]) { 10047 paths[pacnt].boundingbox[1] = py - 1; 10048 } 10049 if (py - 1 > paths[pacnt].boundingbox[3]) { 10050 paths[pacnt].boundingbox[3] = py - 1; 10051 } 10052 10053 lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir]; 10054 arr[py][px] = lookuprow[0];dir = lookuprow[1];px += lookuprow[2];py += lookuprow[3]; 10055 10056 if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) { 10057 pathfinished = true; 10058 10059 if (paths[pacnt].points.length < pathomit) { 10060 paths.pop(); 10061 } else { 10062 paths[pacnt].isholepath = !!holepath; 10063 10064 if (holepath) { 10065 var parentidx = 0, 10066 parentbbox = [-1, -1, w + 1, h + 1]; 10067 for (var parentcnt = 0; parentcnt < pacnt; parentcnt++) { 10068 if (!paths[parentcnt].isholepath && this.boundingboxincludes(paths[parentcnt].boundingbox, paths[pacnt].boundingbox) && this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)) { 10069 parentidx = parentcnt; 10070 parentbbox = paths[parentcnt].boundingbox; 10071 } 10072 } 10073 paths[parentidx].holechildren.push(pacnt); 10074 } 10075 pacnt += 1; 10076 } 10077 } 10078 pcnt += 1; 10079 } 10080 } 10081 } 10082 } 10083 10084 return paths; 10085 } 10086 }, { 10087 key: 'boundingboxincludes', 10088 value: function boundingboxincludes(parentbbox, childbbox) { 10089 return parentbbox[0] < childbbox[0] && parentbbox[1] < childbbox[1] && parentbbox[2] > childbbox[2] && parentbbox[3] > childbbox[3]; 10090 } 10091 }, { 10092 key: 'batchpathscan', 10093 value: function batchpathscan(layers, pathomit) { 10094 var bpaths = []; 10095 for (var k in layers) { 10096 if (!layers.hasOwnProperty(k)) { 10097 continue; 10098 } 10099 bpaths[k] = this.pathscan(layers[k], pathomit); 10100 } 10101 10102 return bpaths; 10103 } 10104 }, { 10105 key: 'internodes', 10106 value: function internodes(paths, options) { 10107 var ins = []; 10108 var palen = 0; 10109 var nextidx = 0; 10110 var nextidx2 = 0; 10111 var previdx = 0; 10112 var previdx2 = 0; 10113 var pacnt = void 0; 10114 var pcnt = void 0; 10115 for (pacnt = 0; pacnt < paths.length; pacnt += 1) { 10116 ins[pacnt] = {}; 10117 ins[pacnt].points = []; 10118 ins[pacnt].boundingbox = paths[pacnt].boundingbox; 10119 ins[pacnt].holechildren = paths[pacnt].holechildren; 10120 ins[pacnt].isholepath = paths[pacnt].isholepath; 10121 palen = paths[pacnt].points.length; 10122 10123 for (pcnt = 0; pcnt < palen; pcnt += 1) { 10124 nextidx = (pcnt + 1) % palen;nextidx2 = (pcnt + 2) % palen;previdx = (pcnt - 1 + palen) % palen;previdx2 = (pcnt - 2 + palen) % palen; 10125 10126 if (options.rightangleenhance && this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)) { 10127 if (ins[pacnt].points.length > 0) { 10128 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); 10129 } 10130 10131 ins[pacnt].points.push({ 10132 x: paths[pacnt].points[pcnt].x, 10133 y: paths[pacnt].points[pcnt].y, 10134 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) 10135 }); 10136 } 10137 10138 ins[pacnt].points.push({ 10139 x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, 10140 y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, 10141 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) 10142 }); 10143 } 10144 } 10145 10146 return ins; 10147 } 10148 }, { 10149 key: 'testrightangle', 10150 value: function testrightangle(path, idx1, idx2, idx3, idx4, idx5) { 10151 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; 10152 } 10153 }, { 10154 key: 'getdirection', 10155 value: function getdirection(x1, y1, x2, y2) { 10156 var val = 8; 10157 if (x1 < x2) { 10158 if (y1 < y2) { 10159 val = 1; 10160 } else if (y1 > y2) { 10161 val = 7; 10162 } else { 10163 val = 0; 10164 } 10165 } else if (x1 > x2) { 10166 if (y1 < y2) { 10167 val = 3; 10168 } else if (y1 > y2) { 10169 val = 5; 10170 } else { 10171 val = 4; 10172 } 10173 } else if (y1 < y2) { 10174 val = 2; 10175 } else if (y1 > y2) { 10176 val = 6; 10177 } else { 10178 val = 8; 10179 } 10180 10181 return val; 10182 } 10183 }, { 10184 key: 'batchinternodes', 10185 value: function batchinternodes(bpaths, options) { 10186 var binternodes = []; 10187 for (var k in bpaths) { 10188 if (!bpaths.hasOwnProperty(k)) { 10189 continue; 10190 } 10191 binternodes[k] = this.internodes(bpaths[k], options); 10192 } 10193 10194 return binternodes; 10195 } 10196 }, { 10197 key: 'tracepath', 10198 value: function tracepath(path, ltres, qtres) { 10199 var pcnt = 0; 10200 var segtype1 = void 0; 10201 var segtype2 = void 0; 10202 var seqend = void 0; 10203 var smp = {}; 10204 smp.segments = []; 10205 smp.boundingbox = path.boundingbox; 10206 smp.holechildren = path.holechildren; 10207 smp.isholepath = path.isholepath; 10208 10209 while (pcnt < path.points.length) { 10210 segtype1 = path.points[pcnt].linesegment; 10211 segtype2 = -1; 10212 seqend = pcnt + 1; 10213 while ((path.points[seqend].linesegment === segtype1 || path.points[seqend].linesegment === segtype2 || segtype2 === -1) && seqend < path.points.length - 1) { 10214 if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) { 10215 segtype2 = path.points[seqend].linesegment; 10216 } 10217 seqend += 1; 10218 } 10219 if (seqend === path.points.length - 1) { 10220 seqend = 0; 10221 } 10222 10223 smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend)); 10224 10225 if (seqend > 0) { 10226 pcnt = seqend; 10227 } else { 10228 pcnt = path.points.length; 10229 } 10230 } 10231 10232 return smp; 10233 } 10234 }, { 10235 key: 'fitseq', 10236 value: function fitseq(path, ltres, qtres, seqstart, seqend) { 10237 if (seqend > path.points.length || seqend < 0) { 10238 return []; 10239 } 10240 var errorpoint = seqstart, 10241 errorval = 0, 10242 curvepass = true, 10243 px = void 0, 10244 py = void 0, 10245 dist2 = void 0; 10246 var tl = seqend - seqstart;if (tl < 0) { 10247 tl += path.points.length; 10248 } 10249 var vx = (path.points[seqend].x - path.points[seqstart].x) / tl, 10250 vy = (path.points[seqend].y - path.points[seqstart].y) / tl; 10251 var pcnt = (seqstart + 1) % path.points.length, 10252 pl = void 0; 10253 while (pcnt != seqend) { 10254 pl = pcnt - seqstart;if (pl < 0) { 10255 pl += path.points.length; 10256 } 10257 px = path.points[seqstart].x + vx * pl;py = path.points[seqstart].y + vy * pl; 10258 dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); 10259 if (dist2 > ltres) { 10260 curvepass = false; 10261 } 10262 if (dist2 > errorval) { 10263 errorpoint = pcnt;errorval = dist2; 10264 } 10265 pcnt = (pcnt + 1) % path.points.length; 10266 } 10267 if (curvepass) { 10268 return [{ type: 'L', 10269 x1: path.points[seqstart].x, 10270 y1: path.points[seqstart].y, 10271 x2: path.points[seqend].x, 10272 y2: path.points[seqend].y }]; 10273 } 10274 var fitpoint = errorpoint;curvepass = true;errorval = 0; 10275 var t = (fitpoint - seqstart) / tl, 10276 t1 = (1 - t) * (1 - t), 10277 t2 = 2 * (1 - t) * t, 10278 t3 = t * t; 10279 var cpx = (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2, 10280 cpy = (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2; 10281 pcnt = seqstart + 1; 10282 while (pcnt != seqend) { 10283 t = (pcnt - seqstart) / tl;t1 = (1 - t) * (1 - t);t2 = 2 * (1 - t) * t;t3 = t * t; 10284 px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x; 10285 py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y; 10286 dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); 10287 if (dist2 > qtres) { 10288 curvepass = false;
10289 } 10290 if (dist2 > errorval) { 10291 errorpoint = pcnt;errorval = dist2; 10292 } 10293 pcnt = (pcnt + 1) % path.points.length; 10294 } 10295 if (curvepass) { 10296 return [{ type: 'Q', 10297 x1: path.points[seqstart].x, 10298 y1: path.points[seqstart].y, 10299 x2: cpx, 10300 y2: cpy, 10301 x3: path.points[seqend].x, 10302 y3: path.points[seqend].y }]; 10303 } 10304 var splitpoint = fitpoint; 10305 10306 return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(this.fitseq(path, ltres, qtres, splitpoint, seqend)); 10307 } 10308 }, { 10309 key: 'batchtracepaths', 10310 value: function batchtracepaths(internodepaths, ltres, qtres) { 10311 var btracedpaths = []; 10312 for (var k in internodepaths) { 10313 if (!internodepaths.hasOwnProperty(k)) { 10314 continue; 10315 } 10316 btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres)); 10317 } 10318 10319 return btracedpaths; 10320 } 10321 }, { 10322 key: 'batchtracelayers', 10323 value: function batchtracelayers(binternodes, ltres, qtres) { 10324 var btbis = []; 10325 for (var k in binternodes) { 10326 if (!binternodes.hasOwnProperty(k)) { 10327 continue; 10328 } 10329 btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres); 10330 } 10331 10332 return btbis; 10333 } 10334 }, { 10335 key: 'roundtodec', 10336 value: function roundtodec(val, places) { 10337 return Number(val.toFixed(places)); 10338 } 10339 }, { 10340 key: 'svgpathstring', 10341 value: function svgpathstring(tracedata, lnum, pathnum, options) { 10342 var layer = tracedata.layers[lnum], 10343 smp = layer[pathnum], 10344 str = '', 10345 pcnt = void 0; 10346 if (options.linefilter && smp.segments.length < 3) { 10347 return str; 10348 } 10349 str = '<path ' + (options.desc ? 'desc="l ' + lnum + ' p ' + pathnum + '" ' : '') + this.tosvgcolorstr(tracedata.palette[lnum], options) + 'd="'; 10350 if (options.roundcoords === -1) { 10351 str += 'M ' + smp.segments[0].x1 * options.scale + ' ' + smp.segments[0].y1 * options.scale + ' '; 10352 for (pcnt = 0; pcnt < smp.segments.length; pcnt++) { 10353 str += smp.segments[pcnt].type + ' ' + smp.segments[pcnt].x2 * options.scale + ' ' + smp.segments[pcnt].y2 * options.scale + ' '; 10354 if (smp.segments[pcnt].hasOwnProperty('x3')) { 10355 str += smp.segments[pcnt].x3 * options.scale + ' ' + smp.segments[pcnt].y3 * options.scale + ' '; 10356 } 10357 } 10358 str += 'Z '; 10359 } else { 10360 str += 'M ' + this.roundtodec(smp.segments[0].x1 * options.scale, options.roundcoords) + ' ' + this.roundtodec(smp.segments[0].y1 * options.scale, options.roundcoords) + ' '; 10361 for (pcnt = 0; pcnt < smp.segments.length; pcnt++) { 10362 str += smp.segments[pcnt].type + ' ' + this.roundtodec(smp.segments[pcnt].x2 * options.scale, options.roundcoords) + ' ' + this.roundtodec(smp.segments[pcnt].y2 * options.scale, options.roundcoords) + ' '; 10363 if (smp.segments[pcnt].hasOwnProperty('x3')) { 10364 str += this.roundtodec(smp.segments[pcnt].x3 * options.scale, options.roundcoords) + ' ' + this.roundtodec(smp.segments[pcnt].y3 * options.scale, options.roundcoords) + ' '; 10365 } 10366 } 10367 str += 'Z '; 10368 } 10369 for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) { 10370 var hsmp = layer[smp.holechildren[hcnt]]; 10371 10372 if (options.roundcoords === -1) { 10373 if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) { 10374 str += 'M ' + hsmp.segments[hsmp.segments.length - 1].x3 * o
10374ptions.scale + ' ' + hsmp.segments[hsmp.segments.length - 1].y3 * options.scale + ' '; 10375 } else { 10376 str += 'M ' + hsmp.segments[hsmp.segments.length - 1].x2 * options.scale + ' ' + hsmp.segments[hsmp.segments.length - 1].y2 * options.scale + ' '; 10377 } 10378 for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) { 10379 str += hsmp.segments[pcnt].type + ' '; 10380 if (hsmp.segments[pcnt].hasOwnProperty('x3')) { 10381 str += hsmp.segments[pcnt].x2 * options.scale + ' ' + hsmp.segments[pcnt].y2 * options.scale + ' '; 10382 } 10383 str += hsmp.segments[pcnt].x1 * options.scale + ' ' + hsmp.segments[pcnt].y1 * options.scale + ' '; 10384 } 10385 } else { 10386 if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) { 10387 str += 'M ' + this.roundtodec(hsmp.segments[hsmp.segments.length - 1].x3 * options.scale) + ' ' + this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y3 * options.scale) + ' '; 10388 } else { 10389 str += 'M ' + this.roundtodec(hsmp.segments[hsmp.segments.length - 1].x2 * options.scale) + ' ' + this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y2 * options.scale) + ' '; 10390 } 10391 for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) { 10392 str += hsmp.segments[pcnt].type + ' '; 10393 if (hsmp.segments[pcnt].hasOwnProperty('x3')) { 10394 str += this.roundtodec(hsmp.segments[pcnt].x2 * options.scale) + ' ' + this.roundtodec(hsmp.segments[pcnt].y2 * options.scale) + ' '; 10395 } 10396 str += this.roundtodec(hsmp.segments[pcnt].x1 * options.scale) + ' ' + this.roundtodec(hsmp.segments[pcnt].y1 * options.scale) + ' '; 10397 } 10398 } 10399 str += 'Z '; 10400 } 10401 str += '" />'; 10402 if (options.lcpr || options.qcpr) { 10403 for (pcnt = 0; pcnt < smp.segments.length; pcnt++) { 10404 if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { 10405 str += '<circle cx="' + smp.segments[pcnt].x2 * options.scale + '" cy="' + smp.segments[pcnt].y2 * options.scale + '" r="' + options.qcpr + '" fill="cyan" stroke-width="' + options.qcpr * 0.2 + '" stroke="black" />'; 10406 str += '<circle cx="' + smp.segments[pcnt].x3 * options.scale + '" cy="' + smp.segments[pcnt].y3 * options.scale + '" r="' + options.qcpr + '" fill="white" stroke-width="' + options.qcpr * 0.2 + '" stroke="black" />'; 10407 str += '<line x1="' + smp.segments[pcnt].x1 * options.scale + '" y1="' + smp.segments[pcnt].y1 * options.scale + '" x2="' + smp.segments[pcnt].x2 * options.scale + '" y2="' + smp.segments[pcnt].y2 * options.scale + '" stroke-width="' + options.qcpr * 0.2 + '" stroke="cyan" />'; 10408 str += '<line x1="' + smp.segments[pcnt].x2 * options.scale + '" y1="' + smp.segments[pcnt].y2 * options.scale + '" x2="' + smp.segments[pcnt].x3 * options.scale + '" y2="' + smp.segments[pcnt].y3 * options.scale + '" stroke-width="' + options.qcpr * 0.2 + '" stroke="cyan" />'; 10409 } 10410 if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { 10411 str += '<circle cx="' + smp.segments[pcnt].x2 * options.scale + '" cy="' + smp.segments[pcnt].y2 * options.scale + '" r="' + options.lcpr + '" fill="white" stroke-width="' + options.lcpr * 0.2 + '" stroke="black" />'; 10412 } 10413 } 10414 10415 for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) { 10416 var hsmp = layer[smp.holechildren[hcnt]]; 10417 for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) { 10418 if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { 10419 str += '<circle cx="' + hsmp.segments[pcnt].x2 * options.scale + '" cy="' + hsmp.segments[pcnt].y2 * options.scale + '" r="' + options.qcpr + '" fill="cyan" stroke-width="' + options.qcpr * 0.2 + '" stroke="black" />'; 10420 str += '<circle cx="' + hsmp.segments[pcnt].x3 * options.scale + '" cy="' + hsmp.segments[pcnt].y3 * options.scale + '" r="' + options.qcpr + '" fill="white" stroke-width="' + options.qcpr * 0.2 + '" stroke="black" />'; 10421 str += '<line x1="' + hsmp.segments[pcnt].x1 * options.scale + '" y1="' + hsmp.segments[pcnt].y1 * options.scale + '" x2="' + hsmp.segments[pcnt].x2 * options.scale + '" y2="' + hsmp.segments[pcnt].y2 * options.scale + '" stroke-width="' + options.qcpr * 0.2 + '" stroke="cyan" />'; 10422 str += '<line x1="' + hsmp.segments[pcnt].x2 * options.scale + '" y1="' + hsmp.segments[pcnt].y2 * options.scale + '" x2="' + hsmp.segments[pcnt].x3 * options.scale + '" y2="' + hsmp.segments[pcnt].y3 * options.scale + '" stroke-width="' + options.qcpr * 0.2 + '" stroke="cyan" />'; 10423 } 10424 if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { 10425 str += '<circle cx="' + hsmp.segments[pcnt].x2 * options.scale + '" cy="' + hsmp.segments[pcnt].y2 * options.scale + '" r="' + options.lcpr + '" fill="white" stroke-width="' + options.lcpr * 0.2 + '" stroke="black" />'; 10426 } 10427 } 10428 } 10429 } 10430 10431 return str; 10432 } 10433 }, { 10434 key: 'getsvgstring', 10435 value: function getsvgstring(tracedata, options) { 10436 options = this.checkoptions(options); 10437 var w = tracedata.width * options.scale; 10438 var h = tracedata.height * options.scale; 10439 10440 var svgstr = '<svg ' + (options.viewbox ? 'viewBox="0 0 ' + w + ' ' + h + '" ' : 'width="' + w + '" height="' + h + '" ') + 'version="1.1" xmlns="http://www.w3.org/2000/svg" desc="Created with imagetracer.js version ' + this.versionnumber + '" >'; 10441 for (var lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) { 10442 for (var pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) { 10443 if (!tracedata.layers[lcnt][pcnt].isholepath) { 10444 svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options); 10445 } 10446 } 10447 } 10448 svgstr += '</svg>'; 10449 10450 return svgstr; 10451 } 10452 }, { 10453 key: 'compareNumbers', 10454 value: function compareNumbers(a, b) { 10455 return a - b; 10456 } 10457 }, { 10458 key: 'torgbastr', 10459 value: function torgbastr(c) { 10460 return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; 10461 } 10462 }, { 10463 key: 'tosvgcolorstr', 10464 value: function tosvgcolorstr(c, options) { 10465 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 + '" '; 10466 } 10467 }, { 10468 key: 'appendSVGString', 10469 value: function appendSVGString(svgstr, parentid) { 10470 var div = void 0; 10471 if (parentid) { 10472 div = document.getElementById(parentid); 10473 if (!div) { 10474 div = document.createElement('div'); 10475 div.id = parentid; 10476 document.body.appendChild(div); 10477 } 10478 } else { 10479 div = document.createElement('div'); 10480 document.body.appendChild(div); 10481 } 10482 div.innerHTML += svgstr; 10483 } 10484 }, { 10485 key: 'blur', 10486 value: function blur(imgd, radius, delta) { 10487 var i = void 0, 10488 j = void 0, 10489 k = void 0, 10490 d = void 0, 10491 idx = void 0, 10492 racc = void 0, 10493 gacc = void 0, 10494 bacc = void 0, 10495 aacc = void 0, 10496 wacc = void 0; 10497 var imgd2 = { width: imgd.width, 10498 height: imgd.height, 10499 data: [] }; 10500 radius = Math.floor(radius);if (radius < 1) { 10501 return imgd; 10502 }if (radius > 5) { 10503 radius = 5; 10504 }delta = Math.abs(delta);if (delta > 1024) { 10505 delta = 1024; 10506 } 10507 var thisgk = this.gks[radius - 1]; 10508 for (j = 0; j < imgd.height; j++) { 10509 for (i = 0; i < imgd.width; i++) { 10510 racc = 0;gacc = 0;bacc = 0;aacc = 0;wacc = 0; 10511 10512 for (k = -radius; k < radius + 1; k++) { 10513 if (i + k > 0 && i + k < imgd.width) { 10514 idx = (j * imgd.width + i + k) * 4; 10515 racc += imgd.data[idx] * thisgk[k + radius]; 10516 gacc += imgd.data[idx + 1] * thisgk[k + radius]; 10517 bacc += imgd.data[idx + 2] * thisgk[k + radius]; 10518 aacc += imgd.data[idx + 3] * thisgk[k + radius]; 10519 wacc += thisgk[k + radius]; 10520 } 10521 } 10522 10523 idx = (j * imgd.width + i) * 4; 10524 imgd2.data[idx] = Math.floor(racc / wacc); 10525 imgd2.data[idx + 1] = Math.floor(gacc / wacc); 10526 imgd2.data[idx + 2] = Math.floor(bacc / wacc); 10527 imgd2.data[idx + 3] = Math.floor(aacc / wacc); 10528 } 10529 } 10530 var himgd = new Uint8ClampedArray(imgd2.data); 10531 for (j = 0; j < imgd.height; j++) { 10532 for (i = 0; i < imgd.width; i++) { 10533 racc = 0;gacc = 0;bacc = 0;aacc = 0;wacc = 0; 10534 10535 for (k = -radius; k < radius + 1; k++) { 10536 if (j + k > 0 && j + k < imgd.height) { 10537 idx = ((j + k) * imgd.width + i) * 4; 10538 racc += himgd[idx] * thisgk[k + radius]; 10539 gacc += himgd[idx + 1] * thisgk[k + radius]; 10540 bacc += himgd[idx + 2] * thisgk[k + radius]; 10541 aacc += himgd[idx + 3] * thisgk[k + radius]; 10542 wacc += thisgk[k + radius]; 10543 } 10544 } 10545 10546 idx = (j * imgd.width + i) * 4; 10547 imgd2.data[idx] = Math.floor(racc / wacc); 10548 imgd2.data[idx + 1] = Math.floor(gacc / wacc); 10549 imgd2.data[idx + 2] = Math.floor(bacc / wacc); 10550 imgd2.data[idx + 3] = Math.floor(aacc / wacc); 10551 } 10552 } 10553 for (j = 0; j < imgd.height; j++) { 10554 for (i = 0; i < imgd.width; i++) { 10555 idx = (j * imgd.width + i) * 4; 10556 10557 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]); 10558 10559 if (d > delta) { 10560 imgd2.data[idx] = imgd.data[idx]; 10561 imgd2.data[idx + 1] = imgd.data[idx + 1]; 10562 imgd2.data[idx + 2] = imgd.data[idx + 2]; 10563 imgd2.data[idx + 3] = imgd.data[idx + 3]; 10564 } 10565 } 10566 } 10567 10568 return imgd2; 10569 } 10570 }, { 10571 key: 'loadImage', 10572 value: function loadImage(url, callback, options) { 10573 var img = new Image(); 10574 if (options && options.corsenabled) { 10575 img.crossOrigin = 'Anonymous'; 10576 } 10577 img.src = url; 10578 img.onload = function () { 10579 var canvas = document.createElement('canvas'); 10580 canvas.width = img.width;
10581 canvas.height = img.height; 10582 var context = canvas.getContext('2d'); 10583 context.drawImage(img, 0, 0); 10584 callback(canvas); 10585 }; 10586 } 10587 }, { 10588 key: 'getImgdata', 10589 value: function getImgdata(canvas) { 10590 var context = canvas.getContext('2d'); 10591 10592 return context.getImageData(0, 0, canvas.width, canvas.height); 10593 } 10594 }, { 10595 key: 'drawLayers', 10596 value: function drawLayers(layers, palette, scale, parentid) { 10597 scale = scale || 1; 10598 var w = void 0, 10599 h = void 0, 10600 i = void 0, 10601 j = void 0, 10602 k = void 0; 10603 var div = void 0; 10604 if (parentid) { 10605 div = document.getElementById(parentid); 10606 if (!div) { 10607 div = document.createElement('div'); 10608 div.id = parentid; 10609 document.body.appendChild(div); 10610 } 10611 } else { 10612 div = document.createElement('div'); 10613 document.body.appendChild(div); 10614 } 10615 for (k in layers) { 10616 if (!layers.hasOwnProperty(k)) { 10617 continue; 10618 } 10619 10620 w = layers[k][0].length; 10621 h = layers[k].length; 10622 10623 var canvas = document.createElement('canvas'); 10624 canvas.width = w * scale; 10625 canvas.height = h * scale; 10626 var context = canvas.getContext('2d'); 10627 10628 for (j = 0; j < h; j += 1) { 10629 for (i = 0; i < w; i += 1) { 10630 context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]); 10631 context.fillRect(i * scale, j * scale, scale, scale); 10632 } 10633 } 10634 10635 div.appendChild(canvas); 10636 } 10637 } 10638 }]); 10639 10640 return ImageTracer; 10641 }(); 10642 10643 exports.default = ImageTracer; 10644 10645/***/ }), 10646/* 105 */ 10647/***/ (function(module, exports, __webpack_require__) { 10648 10649 'use strict'; 10650 10651 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; }; }(); /** 10652 * @author NHN Ent. FE Development Team <[email protected]> 10653 * @fileoverview Graphics module 10654 */ 10655 10656 10657 var _tuiCodeSnippet = __webpack_require__(3); 10658 10659 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 10660 10661 var _promise = __webpack_require__(4); 10662 10663 var _promise2 = _interopRequireDefault(_promise); 10664 10665 var _fabric = __webpack_require__(106); 10666 10667 var _fabric2 = _interopRequireDefault(_fabric); 10668 10669 var _imageLoader = __webpack_require__(107); 10670 10671 var _imageLoader2 = _interopRequireDefault(_imageLoader); 10672 10673 var _cropper = __webpack_require__(109); 10674 10675 var _cropper2 = _interopRequireDefault(_cropper); 10676 10677 var _flip = __webpack_require__(111); 10678 10679 var _flip2 = _interopRequireDefault(_flip); 10680 10681 var _rotation = __webpack_require__(112); 10682 10683 var _rotation2 = _interopRequireDefault(_rotation); 10684 10685 var _freeDrawing = __webpack_require__(113); 10686 10687 var _freeDrawing2 = _interopRequireDefault(_freeDrawing); 10688 10689 var _line = __webpack_require__(114); 10690 10691 var _line2 = _interopRequireDefault(_line); 10692 10693 var _text = __webpack_require__(115); 10694 10695 var _text2 = _interopRequireDefault(_text); 10696 10697 var _icon = __webpack_require__(116); 10698 10699 var _icon2 = _interopRequireDefault(_icon); 10700 10701 var _filter = __webpack_require__(117); 10702 10703 var _filter2 = _interopRequireDefault(_filter); 10704 10705 var _shape = __webpack_require__(123); 10706 10707 var _shape2 = _interopRequireDefault(_shape); 10708 10709 var _cropper3 = __webpack_require__(125); 10710 10711 var _cropper4 = _interopRequireDefault(_cropper3); 10712 10713 var _freeDrawing3 = __webpack_require__(127); 10714 10715 var _freeDrawing4 = _interopRequireDefault(_freeDrawing3); 10716 10717 var _lineDrawing = __webpack_require__(128); 10718 10719 var _lineDrawing2 = _interopRequireDefault(_lineDrawing); 10720 10721 var _shape3 = __webpack_require__(129); 10722 10723 var _shape4 = _interopRequireDefault(_shape3); 10724 10725 var _text3 = __webpack_require__(130); 10726 10727 var _text4 = _interopRequireDefault(_text3); 10728 10729 var _consts = __webpack_require__(73); 10730 10731 var _consts2 = _interopRequireDefault(_consts); 10732 10733 var _util = __webpack_require__(72); 10734 10735 var _util2 = _interopRequireDefault(_util); 10736 10737 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 10738 10739 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 10740 10741 var components = _consts2.default.componentNames; 10742 var events = _consts2.default.eventNames; 10743 10744 var drawingModes = _consts2.default.drawingModes, 10745 fObjectOptions = _consts2.default.fObjectOptions; 10746 var extend = _tuiCodeSnippet2.default.extend, 10747 stamp = _tuiCodeSnippet2.default.stamp, 10748 isArray = _tuiCodeSnippet2.default.isArray, 10749 isString = _tuiCodeSnippet2.default.isString,
10750 forEachArray = _tuiCodeSnippet2.default.forEachArray, 10751 forEachOwnProperties = _tuiCodeSnippet2.default.forEachOwnProperties, 10752 CustomEvents = _tuiCodeSnippet2.default.CustomEvents; 10753 10754 10755 var DEFAULT_CSS_MAX_WIDTH = 1000; 10756 var DEFAULT_CSS_MAX_HEIGHT = 800; 10757 10758 var cssOnly = { 10759 cssOnly: true 10760 }; 10761 var backstoreOnly = { 10762 backstoreOnly: true 10763 }; 10764 10765 /** 10766 * Graphics class 10767 * @class 10768 * @param {string|HTMLElement} wrapper - Wrapper's element or selector 10769 * @param {Object} [option] - Canvas max width & height of css 10770 * @param {number} option.cssMaxWidth - Canvas css-max-width 10771 * @param {number} option.cssMaxHeight - Canvas css-max-height 10772 * @param {boolean} option.useItext - Use IText in text mode 10773 * @param {boolean} option.useDragAddIcon - Use dragable add in icon mode 10774 * @ignore 10775 */ 10776 10777 var Graphics = function () { 10778 function Graphics(element) { 10779 var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, 10780 cssMaxWidth = _ref.cssMaxWidth, 10781 cssMaxHeight = _ref.cssMaxHeight, 10782 _ref$useItext = _ref.useItext, 10783 useItext = _ref$useItext === undefined ? false : _ref$useItext, 10784 _ref$useDragAddIcon = _ref.useDragAddIcon, 10785 useDragAddIcon = _ref$useDragAddIcon === undefined ? false : _ref$useDragAddIcon; 10786 10787 _classCallCheck(this, Graphics); 10788 10789 /** 10790 * Fabric image instance 10791 * @type {fabric.Image} 10792 */ 10793 this.canvasImage = null; 10794 10795 /** 10796 * Max width of canvas elements 10797 * @type {number} 10798 */ 10799 this.cssMaxWidth = cssMaxWidth || DEFAULT_CSS_MAX_WIDTH; 10800 10801 /** 10802 * Max height of canvas elements 10803 * @type {number} 10804 */ 10805 this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT; 10806 10807 /** 10808 * Use Itext mode for text component 10809 * @type {boolean} 10810 */ 10811 this.useItext = useItext; 10812 10813 /** 10814 * Use add drag icon mode for icon component 10815 * @type {boolean} 10816 */ 10817 this.useDragAddIcon = useDragAddIcon; 10818 10819 /** 10820 * cropper Selection Style 10821 * @type {Object} 10822 */ 10823 this.cropSelectionStyle = {}; 10824 10825 /** 10826 * Image name 10827 * @type {string} 10828 */ 10829 this.imageName = ''; 10830 10831 /** 10832 * Object Map 10833 * @type {Object} 10834 * @private 10835 */ 10836 this._objects = {}; 10837 10838 /** 10839 * Fabric-Canvas instance 10840 * @type {fabric.Canvas} 10841 * @private 10842 */ 10843 this._canvas = null; 10844 10845 /** 10846 * Drawing mode 10847 * @type {string} 10848 * @private 10849 */ 10850 this._drawingMode = drawingModes.NORMAL; 10851 10852 /** 10853 * DrawingMode map 10854 * @type {Object.<string, DrawingMode>} 10855 * @private 10856 */ 10857 this._drawingModeMap = {}; 10858 10859 /** 10860 * Component map 10861 * @type {Object.<string, Component>} 10862 * @private 10863 */ 10864 this._componentMap = {}; 10865 10866 /** 10867 * fabric event handlers 10868 * @type {Object.<string, function>} 10869 * @private 10870 */ 10871 this._handler = { 10872 onMouseDown: this._onMouseDown.bind(this), 10873 onObjectAdded: this._onObjectAdded.bind(this), 10874 onObjectRemoved: this._onObjectRemoved.bind(this), 10875 onObjectMoved: this._onObjectMoved.bind(this), 10876 onObjectScaled: this._onObjectScaled.bind(this), 10877 onObjectSelected: this._onObjectSelected.bind(this), 10878 onPathCreated: this._onPathCreated.bind(this), 10879 onSelectionCleared: this._onSelectionCleared.bind(this), 10880 onSelectionCreated: this._onSelectionCreated.bind(this) 10881 }; 10882 10883 this._setCanvasElement(element); 10884 this._createDrawingModeInstances(); 10885 this._createComponents(); 10886 this._attachCanvasEvents(); 10887 } 10888 10889 /** 10890 * Destroy canvas element 10891 */ 10892 10893 10894 _createClass(Graphics, [{ 10895 key: 'destroy', 10896 value: function destroy() { 10897 var wrapperEl = this._canvas.wrapperEl; 10898 10899 10900 this._canvas.clear(); 10901 10902 wrapperEl.parentNode.removeChild(wrapperEl); 10903 } 10904 10905 /** 10906 * Deactivates all objects on canvas 10907 * @returns {Graphics} this 10908 */ 10909 10910 }, { 10911 key: 'deactivateAll', 10912 value: function deactivateAll() { 10913 this._canvas.deactivateAll(); 10914 10915 return this; 10916 } 10917 10918 /**
10919 * Renders all objects on canvas 10920 * @returns {Graphics} this 10921 */ 10922 10923 }, { 10924 key: 'renderAll', 10925 value: function renderAll() { 10926 this._canvas.renderAll(); 10927 10928 return this; 10929 } 10930 10931 /** 10932 * Adds objects on canvas 10933 * @param {Object|Array} objects - objects 10934 */ 10935 10936 }, { 10937 key: 'add', 10938 value: function add(objects) { 10939 var _canvas; 10940 10941 var theArgs = []; 10942 if (isArray(objects)) { 10943 theArgs = objects; 10944 } else { 10945 theArgs.push(objects); 10946 } 10947 10948 (_canvas = this._canvas).add.apply(_canvas, theArgs); 10949 } 10950 10951 /** 10952 * Removes the object or group 10953 * @param {Object} target - graphics object or group 10954 * @returns {boolean} true if contains or false 10955 */ 10956 10957 }, { 10958 key: 'contains', 10959 value: function contains(target) { 10960 return this._canvas.contains(target); 10961 } 10962 10963 /** 10964 * Gets all objects or group 10965 * @returns {Array} all objects, shallow copy 10966 */ 10967 10968 }, { 10969 key: 'getObjects', 10970 value: function getObjects() { 10971 return this._canvas.getObjects().slice(); 10972 } 10973 10974 /** 10975 * Get an object by id 10976 * @param {number} id - object id 10977 * @returns {fabric.Object}
vendor: 6,949 bytes, lines 10977-11199
10977 object corresponding id 10978 */ 10979 10980 }, { 10981 key: 'getObject', 10982 value: function getObject(id) { 10983 return this._objects[id]; 10984 } 10985 10986 /** 10987 * Removes the object or group 10988 * @param {Object} target - graphics object or group 10989 */ 10990 10991 }, { 10992 key: 'remove', 10993 value: function remove(target) { 10994 this._canvas.remove(target); 10995 } 10996 10997 /** 10998 * Removes all object or group 10999 * @param {boolean} includesBackground - remove the background image or not 11000 * @returns {Array} all objects array which is removed 11001 */ 11002 11003 }, { 11004 key: 'removeAll', 11005 value: function removeAll(includesBackground) { 11006 var canvas = this._canvas; 11007 var objects = canvas.getObjects().slice(); 11008 canvas.remove.apply(canvas, this._canvas.getObjects()); 11009 11010 if (includesBackground) { 11011 canvas.clear(); 11012 } 11013 11014 return objects; 11015 } 11016 11017 /** 11018 * Removes an object or group by id 11019 * @param {number} id - object id 11020 * @returns {Array} removed objects 11021 */ 11022 11023 }, { 11024 key: 'removeObjectById', 11025 value: function removeObjectById(id) { 11026 var objects = []; 11027 var canvas = this._canvas; 11028 var target = this.getObject(id); 11029 var isValidGroup = target && target.isType('group') && !target.isEmpty(); 11030 11031 if (isValidGroup) { 11032 canvas.discardActiveGroup(); // restore states for each objects 11033 target.forEachObject(function (obj) { 11034 objects.push(obj); 11035 obj.remove(); 11036 }); 11037 } else if (canvas.contains(target)) { 11038 objects.push(target); 11039 target.remove(); 11040 } 11041 11042 return objects; 11043 } 11044 11045 /** 11046 * Get an id by object instance 11047 * @param {fabric.Object} object object 11048 * @returns {number} object id if it exists or null 11049 */ 11050 11051 }, { 11052 key: 'getObjectId', 11053 value: function getObjectId(object) { 11054 var key = null; 11055 for (key in this._objects) { 11056 if (this._objects.hasOwnProperty(key)) { 11057 if (object === this._objects[key]) { 11058 return key; 11059 } 11060 } 11061 } 11062 11063 return null; 11064 } 11065 11066 /** 11067 * Gets an active object or group 11068 * @returns {Object} active object or group instance 11069 */ 11070 11071 }, { 11072 key: 'getActiveObject', 11073 value: function getActiveObject() { 11074 return this._canvas.getActiveObject(); 11075 } 11076 11077 /** 11078 * Gets an active group object 11079 * @returns {Object} active group object instance 11080 */ 11081 11082 }, { 11083 key: 'getActiveGroupObject', 11084 value: function getActiveGroupObject() { 11085 return this._canvas.getActiveGroup(); 11086 } 11087 11088 /** 11089 * Activates an object or group 11090 * @param {Object} target - target object or group 11091 */ 11092 11093 }, { 11094 key: 'setActiveObject', 11095 value: function setActiveObject(target) { 11096 this._canvas.setActiveObject(target); 11097 } 11098 11099 /** 11100 * Set Crop selection style 11101 * @param {Object} style - Selection styles 11102 */ 11103 11104 }, { 11105 key: 'setCropSelectionStyle', 11106 value: function setCropSelectionStyle(style) { 11107 this.cropSelectionStyle = style; 11108 } 11109 11110 /** 11111 * Get component 11112 * @param {string} name - Component name 11113 * @returns {Component} 11114 */ 11115 11116 }, { 11117 key: 'getComponent', 11118 value: function getComponent(name) { 11119 return this._componentMap[name]; 11120 } 11121 11122 /** 11123 * Get current drawing mode 11124 * @returns {string} 11125 */ 11126 11127 }, { 11128 key: 'getDrawingMode', 11129 value: function getDrawingMode() { 11130 return this._drawingMode; 11131 } 11132 11133 /** 11134 * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. 11135 * @param {String} mode Can be one of <I>'CROPPER', 'FREE_DRAWING', 'LINE', 'TEXT', 'SHAPE'</I> 11136 * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' 11137 * @param {Number} [option.width] brush width 11138 * @param {String} [option.color] brush color 11139 * @returns {boolean} true if success or false 11140 */ 11141 11142 }, { 11143 key: 'startDrawingMode', 11144 value: function startDrawingMode(mode, option) { 11145 if (this._isSameDrawingMode(mode)) { 11146 return true; 11147 } 11148 11149 // If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. 11150 this.stopDrawingMode(); 11151 11152 var drawingModeInstance = this._getDrawingModeInstance(mode); 11153 if (drawingModeInstance && drawingModeInstance.start) { 11154 drawingModeInstance.start(this, option); 11155 11156 this._drawingMode = mode; 11157 } 11158 11159 return !!drawingModeInstance; 11160 } 11161 11162 /** 11163 * Stop the current drawing mode and back to the 'NORMAL' mode 11164 */ 11165 11166 }, { 11167 key: 'stopDrawingMode', 11168 value: function stopDrawingMode() { 11169 if (this._isSameDrawingMode(drawingModes.NORMAL)) { 11170 return; 11171 } 11172 11173 var drawingModeInstance = this._getDrawingModeInstance(this.getDrawingMode()); 11174 if (drawingModeInstance && drawingModeInstance.end) { 11175 drawingModeInstance.end(this); 11176 } 11177 this._drawingMode = drawingModes.NORMAL; 11178 } 11179 11180 /** 11181 * To data url from canvas 11182 * @param {Object} options - options for toDataURL 11183 * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" 11184 * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. 11185 * @param {Number} [options.multiplier=1] Multiplier to scale by 11186 * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 11187 * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 11188 * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 11189 * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 11190 * @returns {string} A DOMString containing the requested data URI. 11191 */ 11192 11193 }, { 11194 key: 'toDataURL', 11195 value: function toDataURL(options) { 11196 return this._canvas && this._canvas.toDataURL(options); 11197 } 11198 11199 /**
11200 * Save image(background) of canvas 11201 * @param {string} name - Name of image 11202 * @param {?fabric.Image} canvasImage - Fabric image instance 11203 */ 11204 11205 }, { 11206 key: 'setCanvasImage', 11207 value: function setCanvasImage(name, canvasImage) { 11208 if (canvasImage) { 11209 stamp(canvasImage); 11210 } 11211 this.imageName = name; 11212 this.canvasImage = canvasImage; 11213 } 11214 11215 /** 11216 * Set css max dimension 11217 * @param {{width: number, height: number}} maxDimension - Max width & Max height 11218 */ 11219 11220 }, { 11221 key: 'setCssMaxDimension', 11222 value: function setCssMaxDimension(maxDimension) { 11223 this.cssMaxWidth = maxDimension.width || this.cssMaxWidth; 11224 this.cssMaxHeight = maxDimension.height || this.cssMaxHeight; 11225 } 11226 11227 /** 11228 * Adjust canvas dimension with scaling image 11229 */ 11230 11231 }, { 11232 key: 'adjustCanvasDimension', 11233 value: function adjustCanvasDimension() { 11234 var canvasImage = this.canvasImage.scale(1); 11235 11236 var _canvasImage$getBound = canvasImage.getBoundingRect(), 11237 width = _canvasImage$getBound.width, 11238 height = _canvasImage$getBound.height; 11239 11240 var maxDimension = this._calcMaxDimension(width, height); 11241 11242 this.setCanvasCssDimension({ 11243 width: '100%', 11244 height: '100%', // Set height '' for IE9 11245 'max-width': maxDimension.width + 'px', 11246 'max-height': maxDimension.height + 'px' 11247 }); 11248 11249 this.setCanvasBackstoreDimension({ 11250 width: width, 11251 height: height 11252 }); 11253 this._canvas.centerObject(canvasImage); 11254 } 11255 11256 /** 11257 * Set canvas dimension - css only 11258 * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} 11259 * @param {Object} dimension - Canvas css dimension 11260 */ 11261 11262 }, { 11263 key: 'setCanvasCssDimension', 11264 value: function setCanvasCssDimension(dimension) { 11265 this._canvas.setDimensions(dimension, cssOnly); 11266 } 11267 11268 /** 11269 * Set canvas dimension - backstore only 11270 * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} 11271 * @param {Object} dimension - Canvas backstore dimension 11272 */ 11273 11274 }, { 11275 key: 'setCanvasBackstoreDimension', 11276 value: function setCanvasBackstoreDimension(dimension) { 11277 this._canvas.setDimensions(dimension, backstoreOnly); 11278 } 11279 11280 /** 11281 * Set image properties 11282 * {@link http://fabricjs.com/docs/fabric.Image.html#set} 11283 * @param {Object} setting - Image properties 11284 * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas 11285 */ 11286 11287 }, { 11288 key: 'setImageProperties', 11289 value: function setImageProperties(setting, withRendering) { 11290 var canvasImage = this.canvasImage; 11291 11292 11293 if (!canvasImage) { 11294 return; 11295 } 11296 11297 canvasImage.set(setting).setCoords(); 11298 if (withRendering) { 11299 this._canvas.renderAll(); 11300 } 11301 } 11302 11303 /** 11304 * Returns canvas element of fabric.Canvas[[lower-canvas]] 11305 * @returns {HTMLCanvasElement} 11306 */ 11307 11308 }, { 11309 key: 'getCanvasElement', 11310 value: function getCanvasElement() { 11311 return this._canvas.getElement(); 11312 } 11313 11314 /** 11315 * Get fabric.Canvas instance 11316 * @returns {fabric.Canvas} 11317 * @private 11318 */ 11319 11320 }, { 11321 key: 'getCanvas', 11322 value: function getCanvas() { 11323 return this._canvas; 11324 } 11325 11326 /** 11327 * Get canvasImage (fabric.Image instance) 11328 * @returns {fabric.Image} 11329 */ 11330 11331 }, { 11332 key: 'getCanvasImage', 11333 value: function getCanvasImage() { 11334 return this.canvasImage; 11335 } 11336 11337 /** 11338 * Get image name 11339 * @returns {string} 11340 */ 11341 11342 }, { 11343 key: 'getImageName', 11344 value: function getImageName() { 11345 return this.imageName; 11346 } 11347 11348 /** 11349 * Add image object on canvas 11350 * @param {string} imgUrl - Image url to make object 11351 * @returns {Promise} 11352 */ 11353 11354 }, { 11355 key: 'addImageObject', 11356 value: function addImageObject(imgUrl) { 11357 var _this = this; 11358 11359 var callback = this._callbackAfterLoadingImageObject.bind(this); 11360 11361 return new _promise2.default(function (resolve) { 11362 _fabric2.default.Image.fromURL(imgUrl, function (image) { 11363 callback(image); 11364 resolve(_this.createObjectProperties(image)); 11365 }, { 11366 crossOrigin: 'Anonymous' 11367 }); 11368 }); 11369 } 11370 11371 /** 11372 * Get center position of canvas 11373 * @returns {Object} {left, top} 11374 */ 11375 11376 }, { 11377 key: 'getCenter', 11378 value: function getCenter() { 11379 return this._canvas.getCenter(); 11380 } 11381 11382 /** 11383 * Get cropped rect 11384 * @returns {Object} rect 11385 */ 11386 11387 }, { 11388 key: 'getCropzoneRect', 11389 value: function getCropzoneRect() { 11390 return this.getComponent(components.CROPPER).getCropzoneRect(); 11391 } 11392 11393 /** 11394 * Get cropped rect 11395 * @param {number} [mode] cropzone rect mode 11396 */ 11397 11398 }, { 11399 key: 'setCropzoneRect', 11400 value: function setCropzoneRect(mode) { 11401 this.getComponent(components.CROPPER).setCropzoneRect(mode); 11402 } 11403 11404 /** 11405 * Get cropped image data 11406 * @param {Object} cropRect cropzone rect
11407 * @param {Number} cropRect.left left position 11408 * @param {Number} cropRect.top top position 11409 * @param {Number} cropRect.width width 11410 * @param {Number} cropRect.height height 11411 * @returns {?{imageName: string, url: string}} cropped Image data 11412 */ 11413 11414 }, { 11415 key: 'getCroppedImageData', 11416 value: function getCroppedImageData(cropRect) { 11417 return this.getComponent(components.CROPPER).getCroppedImageData(cropRect); 11418 } 11419 11420 /** 11421 * Set brush option 11422 * @param {Object} option brush option 11423 * @param {Number} option.width width 11424 * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' 11425 */ 11426 11427 }, { 11428 key: 'setBrush', 11429 value: function setBrush(option) { 11430 var drawingMode = this._drawingMode; 11431 var compName = components.FREE_DRAWING; 11432 11433 if (drawingMode === drawingModes.LINE) { 11434 compName = drawingModes.LINE; 11435 } 11436 11437 this.getComponent(compName).setBrush(option); 11438 } 11439 11440 /** 11441 * Set states of current drawing shape 11442 * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') 11443 * @param {Object} [options] - Shape options 11444 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 11445 * @param {string} [options.stoke] - Shape outline color 11446 * @param {number} [options.strokeWidth] - Shape outline width 11447 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 11448 * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) 11449 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 11450 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 11451 * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 11452 */ 11453 11454 }, { 11455 key: 'setDrawingShape', 11456 value: function setDrawingShape(type, options) { 11457 this.getComponent(components.SHAPE).setStates(type, options); 11458 } 11459 11460 /** 11461 * Register icon paths 11462 * @param {Object} pathInfos - Path infos 11463 * @param {string} pathInfos.key - key 11464 * @param {string} pathInfos.value - value 11465 */ 11466 11467 }, { 11468 key: 'registerPaths', 11469 value: function registerPaths(pathInfos) { 11470 this.getComponent(components.ICON).registerPaths(pathInfos); 11471 } 11472 11473 /** 11474 * Change cursor style 11475 * @param {string} cursorType - cursor type 11476 */ 11477 11478 }, { 11479 key: 'changeCursor', 11480 value: function changeCursor(cursorType) { 11481 var canvas = this.getCanvas(); 11482 canvas.defaultCursor = cursorType; 11483 canvas.renderAll(); 11484 } 11485 11486 /** 11487 * Whether it has the filter or not 11488 * @param {string} type - Filter type 11489 * @returns {boolean} true if it has the filter 11490 */ 11491 11492 }, { 11493 key: 'hasFilter', 11494 value: function hasFilter(type) { 11495 return this.getComponent(components.FILTER).hasFilter(type); 11496 } 11497 11498 /** 11499 * Set selection style of fabric object by init option 11500 * @param {Object} styles - Selection styles 11501 */ 11502 11503 }, { 11504 key: 'setSelectionStyle', 11505 value: function setSelectionStyle(styles) { 11506 extend(fObjectOptions.SELECTION_STYLE, styles); 11507 } 11508 11509 /** 11510 * Set object properties 11511 * @param {number} id - object id 11512 * @param {Object} props - props 11513 * @param {string} [props.fill] Color 11514 * @param {string} [props.fontFamily] Font type for text 11515 * @param {number} [props.fontSize] Size 11516 * @param {string} [props.fontStyle] Type of inclination (normal / italic) 11517 * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) 11518 * @param {string} [props.textAlign] Type of text align (left / center / right) 11519 * @param {string}
11519 [props.textDecoraiton] Type of line (underline / line-throgh / overline) 11520 * @returns {Object} applied properties 11521 */ 11522 11523 }, { 11524 key: 'setObjectProperties', 11525 value: function setObjectProperties(id, props) { 11526 var object = this.getObject(id); 11527 var clone = extend({}, props); 11528 11529 object.set(clone); 11530 11531 object.setCoords(); 11532 11533 this.getCanvas().renderAll(); 11534 11535 return clone; 11536 } 11537 11538 /** 11539 * Get object properties corresponding key 11540 * @param {number} id - object id 11541 * @param {Array<string>|ObjectProps|string} keys - property's key 11542 * @returns {Object} properties 11543 */ 11544 11545 }, { 11546 key: 'getObjectProperties', 11547 value: function getObjectProperties(id, keys) { 11548 var object = this.getObject(id); 11549 var props = {}; 11550 11551 if (isString(keys)) { 11552 props[keys] = object[keys]; 11553 } else if (isArray(keys)) { 11554 forEachArray(keys, function (value) { 11555 props[value] = object[value]; 11556 }); 11557 } else { 11558 forEachOwnProperties(keys, function (value, key) { 11559 props[key] = object[key]; 11560 }); 11561 } 11562 11563 return props; 11564 } 11565 11566 /** 11567 * Get object position by originX, originY 11568 * @param {number} id - object id 11569 * @param {string} originX - can be 'left', 'center', 'right' 11570 * @param {string} originY - can be 'top', 'center', 'bottom' 11571 * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null 11572 */ 11573 11574 }, { 11575 key: 'getObjectPosition', 11576 value: function getObjectPosition(id, originX, originY) { 11577 var targetObj = this.getObject(id); 11578 if (!targetObj) { 11579 return null; 11580 } 11581 11582 return targetObj.getPointByOrigin(originX, originY); 11583 } 11584 11585 /** 11586 * Set object position by originX, originY 11587 * @param {number} id - object id 11588 * @param {Object} posInfo - position object 11589 * @param {number} posInfo.x - x position 11590 * @param {number} posInfo.y - y position 11591 * @param {string} posInfo.originX - can be 'left', 'center', 'right' 11592 * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' 11593 * @returns {boolean} true if target id is valid or false 11594 */ 11595 11596 }, { 11597 key: 'setObjectPosition', 11598 value: function setObjectPosition(id, posInfo) { 11599 var targetObj = this.getObject(id); 11600 var x = posInfo.x, 11601 y = posInfo.y, 11602 originX = posInfo.originX, 11603 originY = posInfo.originY; 11604 11605 if (!targetObj) { 11606 return false; 11607 } 11608 11609 var targetOrigin = targetObj.getPointByOrigin(originX, originY); 11610 var centerOrigin = targetObj.getPointByOrigin('center', 'center'); 11611 var diffX = centerOrigin.x - targetOrigin.x; 11612 var diffY = centerOrigin.y - targetOrigin.y; 11613 11614 targetObj.set({ 11615 left: x + diffX, 11616 top: y + diffY 11617 }); 11618 11619 targetObj.setCoords(); 11620 11621 return true; 11622 } 11623 11624 /** 11625 * Get the canvas size 11626 * @returns {Object} {{width: number, height: number}} image size 11627 */ 11628 11629 }, { 11630 key: 'getCanvasSize', 11631 value: function getCanvasSize() { 11632 var image = this.getCanvasImage(); 11633 11634 return { 11635 width: image ? image.width : 0, 11636 height: image ? image.height : 0 11637 }; 11638 } 11639 11640 /** 11641 * Get a DrawingMode instance 11642 * @param {string} modeName - DrawingMode Class Name 11643 * @returns {DrawingMode} DrawingMode instance 11644 * @private 11645 */ 11646 11647 }, { 11648 key: '_getDrawingModeInstance', 11649 value: function _getDrawingModeInstance(modeName) { 11650 return this._drawingModeMap[modeName]; 11651 } 11652 11653 /** 11654 * Set canvas element to fabric.Canvas 11655 * @param {Element|string} element - Wrapper or canvas element or selector 11656 * @private 11657 */ 11658 11659 }, { 11660 key: '_setCanvasElement', 11661 value: function _setCanvasElement(element) { 11662 var selectedElement = void 0; 11663 var canvasElement = void 0; 11664 11665 if (element.nodeType) { 11666 selectedElement = element; 11667 } else { 11668 selectedElement = document.querySelector(element); 11669 } 11670 11671 if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') { 11672 canvasElement = document.createElement('canvas'); 11673 selectedElement.appendChild(canvasElement); 11674 } 11675 11676 this._canvas = new _fabric2.default.Canvas(canvasElement, { 11677 containerClass: 'tui-image-editor-canvas-container', 11678 enableRetinaScaling: false 11679 }); 11680 } 11681 11682 /** 11683 * Creates DrawingMode instances 11684 * @private 11685 */ 11686 11687 }, { 11688 key: '_createDrawingModeInstances', 11689 value: function _createDrawingModeInstances() { 11690 this._register(this._drawingModeMap, new _cropper4.default()); 11691 this._register(this._drawingModeMap, new _freeDrawing4.default()); 11692 this._register(this._drawingModeMap, new _lineDrawing2.default()); 11693 this._register(this._drawingModeMap, new _shape4.default()); 11694 this._register(this._drawingModeMap, new _text4.default()); 11695 } 11696 11697 /** 11698 * Create components 11699 * @private 11700 */ 11701 11702 }, { 11703 key: '_createComponents', 11704 value: function _createComponents() { 11705 this._register(this._componentMap, new _imageLoader2.default(this)); 11706 this._register(this._componentMap, new _cropper2.default(this)); 11707 this._register(this._componentMap, new _flip2.default(this)); 11708 this._register(this._componentMap, new _rotation2.default(this)); 11709 this._register(this._componentMap, new _freeDrawing2.default(this)); 11710 this._register(this._componentMap, new _line2.default(this)); 11711 this._register(this._componentMap, new _text2.default(this)); 11712 this._register(this._componentMap, new _icon2.default(this)); 11713 this._register(this._componentMap, new _filter2.default(this)); 11714 this._register(this._componentMap, new _shape2.default(this)); 11715 } 11716 11717 /** 11718 * Register component 11719 * @param {Object} map - map object 11720 * @param {Object} module - module which has getName method 11721 * @private 11722 */ 11723 11724 }, { 11725 key: '_register', 11726 value: function _register(map, module) { 11727 map[module.getName()] = module; 11728 } 11729 11730 /** 11731 * Get the current drawing mode is same with given mode 11732 * @param {string} mode drawing mode 11733 * @returns {boolean} true if same or false 11734 */ 11735 11736 }, { 11737 key: '_isSameDrawingMode', 11738 value: function _isSameDrawingMode(mode) { 11739 return this.getDrawingMode() === mode; 11740 } 11741 11742 /** 11743 * Calculate max dimension of canvas 11744 * The css-max dimension is dynamically decided with maintaining image ratio 11745 * The css-max dimension is lower than canvas dimension (attribute of canvas, not css) 11746 * @param {number} width - Canvas width 11747 * @param {number} height - Canvas height 11748 * @returns {{width: number, height: number}} - Max width & Max height 11749 * @private 11750 */ 11751 11752 }, { 11753 key: '_calcMaxDimension', 11754 value: function _calcMaxDimension(width, height) { 11755 var wScaleFactor = this.cssMaxWidth / width; 11756 var hScaleFactor = this.cssMaxHeight / height; 11757 var cssMaxWidth = Math.min(width, this.cssMaxWidth); 11758 var cssMaxHeight = Math.min(height, this.cssMaxHeight); 11759 11760 if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) { 11761 cssMaxWidth = width * wScaleFactor; 11762 cssMaxHeight = height * wScaleFactor; 11763 } else if (hScaleFactor < 1 && hScaleFactor < wScaleFactor) { 11764 cssMaxWidth = width * hScaleFactor; 11765 cssMaxHeight = height * hScaleFactor; 11766 } 11767 11768 return { 11769 width: Math.floor(cssMaxWidth), 11770 height: Math.floor(cssMaxHeight) 11771 }; 11772 } 11773 11774 /** 11775 * Callback function after loading image 11776 * @param {fabric.Image} obj - Fabric image object 11777 * @private 11778 */ 11779 11780 }, { 11781 key: '_callbackAfterLoadingImageObject', 11782 value: function _callbackAfterLoadingImageObject(obj) { 11783 var centerPos = this.getCanvasImage().getCenterPoint(); 11784 11785 obj.set(_consts2.default.fObjectOptions.SELECTION_STYLE); 11786 obj.set({ 11787 left: centerPos.x, 11788 top: centerPos.y, 11789 crossOrigin: 'Anonymous' 11790 }); 11791 11792 this.getCanvas().add(obj).setActiveObject(obj); 11793 } 11794 11795 /** 11796 * Attach canvas's events 11797 */ 11798 11799 }, { 11800 key: '_attachCanvasEvents', 11801 value: function _attachCanvasEvents() { 11802 var canvas = this._canvas; 11803 var handler = this._handler; 11804 canvas.on({ 11805 'mouse:down': handler.onMouseDown, 11806 'object:added': handler.onObjectAdded, 11807 'object:removed': handler.onObjectRemoved, 11808 'object:moving': handler.onObjectMoved, 11809 'object:scaling': handler.onObjectScaled, 11810 'object:selected': handler.onObjectSelected, 11811 'path:created': handler.onPathCreated, 11812 'selection:cleared': handler.onSelectionCleared, 11813 'selection:created': handler.onSelectionCreated 11814 }); 11815 } 11816 11817 /** 11818 * "mouse:down" canvas event handler 11819 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11820 * @private 11821 */ 11822 11823 }, { 11824 key: '_onMouseDown', 11825 value: function _onMouseDown(fEvent) { 11826 var originPointer = this._canvas.getPointer(fEvent.e); 11827 this.fire(events.MOUSE_DOWN, fEvent.e, originPointer); 11828 } 11829 11830 /** 11831 * "object:added" canvas event handler 11832 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11833 * @private 11834 */ 11835 11836 }, { 11837 key: '_onObjectAdded', 11838 value: function _onObjectAdded(fEvent) { 11839 var obj = fEvent.target; 11840 if (obj.isType('cropzone')) { 11841 return; 11842 } 11843 11844 this._addFabricObject(obj); 11845 } 11846 11847 /** 11848 * "object:removed" canvas event handler 11849 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11850 * @private 11851 */ 11852 11853 }, { 11854 key: '_onObjectRemoved', 11855 value: function _onObjectRemoved(fEvent) { 11856 var obj = fEvent.target; 11857 11858 this._removeFabricObject(stamp(obj)); 11859 } 11860 11861 /** 11862 * "object:moving" canvas event handler 11863 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11864 * @private 11865 */ 11866 11867 }, { 11868 key: '_onObjectMoved', 11869 value: function _onObjectMoved(fEvent) { 11870 var target = fEvent.target; 11871 11872 var params = this.createObjectProperties(target); 11873 11874 this.fire(events.OBJECT_MOVED, params); 11875 } 11876 11877 /** 11878 * "object:scaling" canvas event handler 11879 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11880 * @private 11881 */ 11882 11883 }, { 11884 key: '_onObjectScaled', 11885 value: function _onObjectScaled(fEvent) { 11886 var target = fEvent.target; 11887 11888 var params = this.createObjectProperties(target); 11889 11890 this.fire(events.OBJECT_SCALED, params); 11891 } 11892 11893 /** 11894 * "object:selected" canvas event handler 11895 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11896 * @private 11897 */ 11898 11899 }, { 11900 key: '_onObjectSelected', 11901 value: function _onObjectSelected(fEvent) { 11902 var target = fEvent.target; 11903 11904 var params = this.createObjectProperties(target); 11905 11906 this.fire(events.OBJECT_ACTIVATED, params); 11907 } 11908 11909 /** 11910 * "path:created" canvas event handler 11911 * @param {{path: fabric.Path}} obj - Path object 11912 * @private 11913 */ 11914 11915 }, { 11916 key: '_onPathCreated', 11917 value: function _onPathCreated(obj) { 11918 obj.path.set(_consts2.default.fObjectOptions.SELECTION_STYLE); 11919 11920 var params = this.createObjectProperties(obj.path); 11921 11922 this.fire(events.ADD_OBJECT, params); 11923 } 11924 11925 /**
11926 * "selction:cleared" canvas event handler 11927 * @private 11928 */ 11929 11930 }, { 11931 key: '_onSelectionCleared', 11932 value: function _onSelectionCleared() { 11933 this.fire(events.SELECTION_CLEARED); 11934 } 11935 11936 /** 11937 * "selction:created" canvas event handler 11938 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 11939 * @private 11940 */ 11941 11942 }, { 11943 key: '_onSelectionCreated', 11944 value: function _onSelectionCreated(fEvent) { 11945 this.fire(events.SELECTION_CREATED, fEvent.target); 11946 } 11947 11948 /** 11949 * Canvas discard selection all 11950 */ 11951 11952 }, { 11953 key: 'discardSelection', 11954 value: function discardSelection() { 11955 this._canvas.discardActiveGroup(); 11956 this._canvas.discardActiveObject(); 11957 this._canvas.renderAll(); 11958 } 11959 11960 /** 11961 * Canvas Selectable status change 11962 * @param {boolean} selectable - expect status 11963 */ 11964 11965 }, { 11966 key: 'changeSelectableAll', 11967 value: function changeSelectableAll(selectable) { 11968 this._canvas.forEachObject(function (obj) { 11969 obj.selectable = selectable; 11970 obj.hoverCursor = selectable ? 'move' : 'crosshair'; 11971 }); 11972 } 11973 11974 /** 11975 * Return object's properties 11976 * @param {fabric.Object} obj - fabric object 11977 * @returns {Object} properties object 11978 */ 11979 11980 }, { 11981 key: 'createObjectProperties', 11982 value: function createObjectProperties(obj) { 11983 var predefinedKeys = ['left', 'top', 'width', 'height', 'fill', 'stroke', 'strokeWidth', 'opacity']; 11984 var props = { 11985 id: stamp(obj), 11986 type: obj.type 11987 }; 11988 11989 extend(props, _util2.default.getProperties(obj, predefinedKeys)); 11990 11991 if (['i-text', 'text'].indexOf(obj.type) > -1) { 11992 extend(props, this._createTextProperties(obj, props)); 11993 } 11994 11995 return props; 11996 } 11997 11998 /** 11999 * Get text object's properties 12000 * @param {fabric.Object} obj - fabric text object 12001 * @param {Object} props - properties 12002 * @returns {Object} properties object 12003 */ 12004 12005 }, { 12006 key: '_createTextProperties', 12007 value: function _createTextProperties(obj) { 12008 var predefinedKeys = ['text', 'fontFamily', 'fontSize', 'fontStyle', 'textAlign', 'textDecoration']; 12009 var props = {}; 12010 extend(props, _util2.default.getProperties(obj, predefinedKeys)); 12011 12012 return props; 12013 } 12014 12015 /** 12016 * Add object array by id 12017 * @param {fabric.Object} obj - fabric object 12018 * @returns {number} object id 12019 */ 12020 12021 }, { 12022 key: '_addFabricObject', 12023 value: function _addFabricObject(obj) { 12024 var id = stamp(obj); 12025 this._objects[id] = obj; 12026 12027 return id; 12028 } 12029 12030 /** 12031 * Remove an object in array yb id 12032 * @param {number} id - object id 12033 */ 12034 12035 }, { 12036 key: '_removeFabricObject', 12037 value: function _removeFabricObject(id) { 12038 delete this._objects[id]; 12039 } 12040 }]); 12041 12042 return Graphics; 12043 }(); 12044 12045 CustomEvents.mixin(Graphics); 12046 module.exports = Graphics; 12047 12048/***/ }), 12049/* 106 */ 12050/***/ (function(module, exports) { 12051 12052 module.exports = __WEBPACK_EXTERNAL_MODULE_106__; 12053 12054/***/ }), 12055/* 107 */ 12056/***/ (function(module, exports, __webpack_require__) { 12057 12058 'use strict'; 12059 12060 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; }; }(); 12061 12062 var _promise = __webpack_require__(4); 12063 12064 var _promise2 = _interopRequireDefault(_promise); 12065 12066 var _component = __webpack_require__(108); 12067 12068 var _component2 = _interopRequireDefault(_component); 12069 12070 var _consts = __webpack_require__(73); 12071 12072 var _consts2 = _interopRequireDefault(_consts); 12073 12074 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12075 12076 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 12077 12078 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; } 12079 12080 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, { c
12080onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 12081 * @author NHN Ent. FE Development Team <[email protected]> 12082 * @fileoverview Image loader 12083 */ 12084 12085 12086 var componentNames = _consts2.default.componentNames, 12087 rejectMessages = _consts2.default.rejectMessages; 12088 12089 var imageOption = { 12090 padding: 0, 12091 crossOrigin: 'Anonymous' 12092 }; 12093 12094 /** 12095 * ImageLoader components 12096 * @extends {Component} 12097 * @class ImageLoader 12098 * @param {Graphics} graphics - Graphics instance 12099 * @ignore 12100 */ 12101 12102 var ImageLoader = function (_Component) { 12103 _inherits(ImageLoader, _Component); 12104 12105 function ImageLoader(graphics) { 12106 _classCallCheck(this, ImageLoader); 12107 12108 return _possibleConstructorReturn(this, (ImageLoader.__proto__ || Object.getPrototypeOf(ImageLoader)).call(this, componentNames.IMAGE_LOADER, graphics)); 12109 } 12110 12111 /** 12112 * Load image from url 12113 * @param {?string} imageName - File name 12114 * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image 12115 * @returns {Promise} 12116 */ 12117 12118 12119 _createClass(ImageLoader, [{ 12120 key: 'load', 12121 value: function load(imageName, img) { 12122 var _this2 = this; 12123 12124 var promise = void 0; 12125 12126 if (!imageName && !img) { 12127 // Back to the initial state, not error. 12128 var canvas = this.getCanvas(); 12129 12130 canvas.backgroundImage = null; 12131 canvas.renderAll(); 12132 12133 promise = new _promise2.default(function (resolve) { 12134 _this2.setCanvasImage('', null); 12135 resolve(); 12136 }); 12137 } else { 12138 promise = this._setBackgroundImage(img).then(function (oImage) { 12139 _this2.setCanvasImage(imageName, oImage); 12140 _this2.adjustCanvasDimension(); 12141 12142 return oImage; 12143 }); 12144 } 12145 12146 return promise; 12147 } 12148 12149 /** 12150 * Set background image 12151 * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to 12152 * @returns {Promise} 12153 * @private 12154 */ 12155 12156 }, { 12157 key: '_setBackgroundImage', 12158 value: function _setBackgroundImage(img) { 12159 var _this3 = this; 12160 12161 if (!img) { 12162 return _promise2.default.reject(rejectMessages.loadImage); 12163 } 12164 12165 return new _promise2.default(function (resolve, reject) { 12166 var canvas = _this3.getCanvas(); 12167
12168 canvas.setBackgroundImage(img, function () { 12169 var oImage = canvas.backgroundImage; 12170 12171 if (oImage && oImage.getElement()) { 12172 resolve(oImage); 12173 } else { 12174 reject(rejectMessages.loadingImageFailed); 12175 } 12176 }, imageOption); 12177 }); 12178 } 12179 }]); 12180 12181 return ImageLoader; 12182 }(_component2.default); 12183 12184 module.exports = ImageLoader; 12185 12186/***/ }), 12187/* 108 */ 12188/***/ (function(module, exports) { 12189 12190 "use strict"; 12191 12192 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; }; }(); 12193 12194 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 12195 12196 /** 12197 * @author NHN Ent. FE Development Team <[email protected]> 12198 * @fileoverview Component interface 12199 */ 12200 12201 /** 12202 * Component interface 12203 * @class 12204 * @param {string} name - component name 12205 * @param {Graphics} graphics - Graphics instance 12206 * @ignore 12207 */ 12208 var Component = function () { 12209 function Component(name, graphics) { 12210 _classCallCheck(this, Component); 12211 12212 /** 12213 * Component name 12214 * @type {string} 12215 */ 12216 this.name = name; 12217 12218 /** 12219 * Graphics instance 12220 * @type {Graphics} 12221 */ 12222 this.graphics = graphics; 12223 } 12224 12225 /** 12226 * Fire Graphics event 12227 * @returns {Object} return value 12228 */ 12229 12230 12231 _createClass(Component, [{ 12232 key: "fire", 12233 value: function fire() { 12234 var context = this.graphics; 12235 12236 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 12237 args[_key] = arguments[_key]; 12238 } 12239 12240 return this.graphics.fire.apply(context, args); 12241 } 12242 12243 /**
12244 * Save image(background) of canvas 12245 * @param {string} name - Name of image 12246 * @param {fabric.Image} oImage - Fabric image instance 12247 */ 12248 12249 }, { 12250 key: "setCanvasImage", 12251 value: function setCanvasImage(name, oImage) { 12252 this.graphics.setCanvasImage(name, oImage); 12253 } 12254 12255 /** 12256 * Returns canvas element of fabric.Canvas[[lower-canvas]] 12257 * @returns {HTMLCanvasElement} 12258 */ 12259 12260 }, { 12261 key: "getCanvasElement", 12262 value: function getCanvasElement() { 12263 return this.graphics.getCanvasElement(); 12264 } 12265 12266 /** 12267 * Get fabric.Canvas instance 12268 * @returns {fabric.Canvas} 12269 */ 12270 12271 }, { 12272 key: "getCanvas", 12273 value: function getCanvas() { 12274 return this.graphics.getCanvas(); 12275 } 12276 12277 /** 12278 * Get canvasImage (fabric.Image instance) 12279 * @returns {fabric.Image} 12280 */ 12281 12282 }, { 12283 key: "getCanvasImage", 12284 value: function getCanvasImage() { 12285 return this.graphics.getCanvasImage(); 12286 } 12287 12288 /** 12289 * Get image name 12290 * @returns {string} 12291 */ 12292 12293 }, { 12294 key: "getImageName", 12295 value: function getImageName() { 12296 return this.graphics.getImageName(); 12297 } 12298 12299 /** 12300 * Get image editor 12301 * @returns {ImageEditor} 12302 */ 12303 12304 }, { 12305 key: "getEditor", 12306 value: function getEditor() { 12307 return this.graphics.getEditor(); 12308 } 12309 12310 /** 12311 * Return component name 12312 * @returns {string} 12313 */ 12314 12315 }, { 12316 key: "getName", 12317 value: function getName() { 12318 return this.name; 12319 } 12320 12321 /** 12322 * Set image properties 12323 * @param {Object} setting - Image properties 12324 * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas 12325 */ 12326 12327 }, { 12328 key: "setImageProperties", 12329 value: function setImageProperties(setting, withRendering) { 12330 this.graphics.setImageProperties(setting, withRendering); 12331 } 12332 12333 /** 12334 * Set canvas dimension - css only 12335 * @param {Object} dimension - Canvas css dimension 12336 */ 12337 12338 }, { 12339 key: "setCanvasCssDimension", 12340 value: function setCanvasCssDimension(dimension) { 12341 this.graphics.setCanvasCssDimension(dimension); 12342 } 12343 12344 /** 12345 * Set canvas dimension - css only 12346 * @param {Object} dimension - Canvas backstore dimension 12347 */ 12348 12349 }, { 12350 key: "setCanvasBackstoreDimension", 12351 value: function setCanvasBackstoreDimension(dimension) { 12352 this.graphics.setCanvasBackstoreDimension(dimension); 12353 } 12354 12355 /** 12356 * Adjust canvas dimension with scaling image 12357 */ 12358 12359 }, { 12360 key: "adjustCanvasDimension", 12361 value: function adjustCanvasDimension() { 12362 this.graphics.adjustCanvasDimension(); 12363 } 12364 }]); 12365 12366 return Component; 12367 }(); 12368 12369 module.exports = Component; 12370 12371/***/ }), 12372/* 109 */ 12373/***/ (function(module, exports, __webpack_require__) { 12374 12375 'use strict'; 12376 12377 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; }; }(); 12378 12379 var _tuiCodeSnippet = __webpack_require__(3); 12380 12381 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 12382 12383 var _fabric = __webpack_require__(106); 12384 12385 var _fabric2 = _interopRequireDefault(_fabric); 12386 12387 var _component = __webpack_require__(108); 12388 12389 var _component2 = _interopRequireDefault(_component); 12390 12391 var _cropzone = __webpack_require__(110); 12392 12393 var _cropzone2 = _interopRequireDefault(_cropzone); 12394 12395 var _consts = __webpack_require__(73); 12396 12397 var _util = __webpack_require__(72); 12398 12399 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12400 12401 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 12402 12403 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; } 12404 12405 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, { c
12405onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 12406 * @author NHN Ent. FE Development Team <[email protected]> 12407 * @fileoverview Image crop module (start cropping, end cropping) 12408 */ 12409 12410 12411 var MOUSE_MOVE_THRESHOLD = 10; 12412 var DEFAULT_OPTION = { 12413 top: -10, 12414 left: -10, 12415 height: 1, 12416 width: 1 12417 }; 12418 12419 /** 12420 * Cropper components 12421 * @param {Graphics} graphics - Graphics instance 12422 * @extends {Component} 12423 * @class Cropper 12424 * @ignore 12425 */ 12426 12427 var Cropper = function (_Component) { 12428 _inherits(Cropper, _Component); 12429 12430 function Cropper(graphics) { 12431 _classCallCheck(this, Cropper); 12432 12433 /** 12434 * Cropzone 12435 * @type {Cropzone} 12436 * @private 12437 */ 12438 var _this = _possibleConstructorReturn(this, (Cropper.__proto__ || Object.getPrototypeOf(Cropper)).call(this, _consts.componentNames.CROPPER, graphics)); 12439 12440 _this._cropzone = null; 12441 12442 /** 12443 * StartX of Cropzone 12444 * @type {number} 12445 * @private 12446 */ 12447 _this._startX = null; 12448 12449 /** 12450 * StartY of Cropzone 12451 * @type {number} 12452 * @private 12453 */ 12454 _this._startY = null; 12455 12456 /** 12457 * State whether shortcut key is pressed or not 12458 * @type {boolean} 12459 * @private 12460 */ 12461 _this._withShiftKey = false; 12462 12463 /** 12464 * Listeners 12465 * @type {object.<string, function>} 12466 * @private 12467 */ 12468 _this._listeners = { 12469 keydown: _this._onKeyDown.bind(_this), 12470 keyup: _this._onKeyUp.bind(_this), 12471 mousedown: _this._onFabricMouseDown.bind(_this), 12472 mousemove: _this._onFabricMouseMove.bind(_this), 12473 mouseup: _this._onFabricMouseUp.bind(_this) 12474 }; 12475 return _this; 12476 } 12477 12478 /** 12479 * Start cropping 12480 */ 12481 12482 12483 _createClass(Cropper, [{ 12484 key: 'start', 12485 value: function start() { 12486 if (this._cropzone) { 12487 return; 12488 } 12489 var canvas = this.getCanvas(); 12490 12491 canvas.forEachObject(function (obj) { 12492 // {@link http://fabricjs.com/docs/fabric.Object.html#evented} 12493 obj.evented = false; 12494 }); 12495 12496 this._cropzone = new _cropzone2.default({ 12497 left: -10, 12498 top: -10, 12499 width: 1, 12500 height: 1, 12501 strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860} 12502 cornerSize: 10, 12503 cornerColor: 'black', 12504 fill: 'transparent', 12505 hasRotatingPoint: false, 12506 hasBorders: false, 12507 lockScalingFlip: true, 12508 lockRotation: true 12509 }, this.graphics.cropSelectionStyle); 12510 12511 canvas.deactivateAll(); 12512 canvas.add(this._cropzone); 12513 canvas.on('mouse:down', this._listeners.mousedown); 12514 canvas.selection = false;
12515 canvas.defaultCursor = 'crosshair'; 12516 12517 _fabric2.default.util.addListener(document, 'keydown', this._listeners.keydown); 12518 _fabric2.default.util.addListener(document, 'keyup', this._listeners.keyup); 12519 } 12520 12521 /** 12522 * End cropping 12523 */ 12524 12525 }, { 12526 key: 'end', 12527 value: function end() { 12528 var canvas = this.getCanvas(); 12529 var cropzone = this._cropzone; 12530 12531 if (!cropzone) { 12532 return; 12533 } 12534 cropzone.remove(); 12535 canvas.selection = true; 12536 canvas.defaultCursor = 'default'; 12537 canvas.off('mouse:down', this._listeners.mousedown); 12538 canvas.forEachObject(function (obj) { 12539 obj.evented = true; 12540 }); 12541 12542 this._cropzone = null; 12543 12544 _fabric2.default.util.removeListener(document, 'keydown', this._listeners.keydown); 12545 _fabric2.default.util.removeListener(document, 'keyup', this._listeners.keyup); 12546 } 12547 12548 /** 12549 * onMousedown handler in fabric canvas 12550 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 12551 * @private 12552 */ 12553 12554 }, { 12555 key: '_onFabricMouseDown', 12556 value: function _onFabricMouseDown(fEvent) { 12557 var canvas = this.getCanvas(); 12558 12559 if (fEvent.target) { 12560 return; 12561 } 12562 12563 canvas.selection = false; 12564 var coord = canvas.getPointer(fEvent.e); 12565 12566 this._startX = coord.x; 12567 this._startY = coord.y; 12568 12569 canvas.on({ 12570 'mouse:move': this._listeners.mousemove, 12571 'mouse:up': this._listeners.mouseup 12572 }); 12573 } 12574 12575 /** 12576 * onMousemove handler in fabric canvas 12577 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 12578 * @private 12579 */ 12580 12581 }, { 12582 key: '_onFabricMouseMove', 12583 value: function _onFabricMouseMove(fEvent) { 12584 var canvas = this.getCanvas(); 12585 var pointer = canvas.getPointer(fEvent.e); 12586 var x = pointer.x, 12587 y = pointer.y; 12588 12589 var cropzone = this._cropzone; 12590 12591 if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) { 12592 cropzone.remove(); 12593 cropzone.set(this._calcRectDimensionFromPoint(x, y)); 12594 12595 canvas.add(cropzone); 12596 } 12597 } 12598 12599 /** 12600 * Get rect dimension setting from Canvas-Mouse-Position(x, y) 12601 * @param {number} x - Canvas-Mouse-Position x 12602 * @param {number} y - Canvas-Mouse-Position Y 12603 * @returns {{left: number, top: number, width: number, height: number}} 12604 * @private 12605 */ 12606 12607 }, { 12608 key: '_calcRectDimensionFromPoint', 12609 value: function _calcRectDimensionFromPoint(x, y) { 12610 var canvas = this.getCanvas(); 12611 var canvasWidth = canvas.getWidth(); 12612 var canvasHeight = canvas.getHeight(); 12613 var startX = this._startX; 12614 var startY = this._startY; 12615 var left = (0, _util.clamp)(x, 0, startX); 12616 var top = (0, _util.clamp)(y, 0, startY); 12617 var width = (0, _util.clamp)(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left 12618 var height = (0, _util.clamp)(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top 12619 12620 if (this._withShiftKey) { 12621 // make fixed ratio cropzone 12622 if (width > height) { 12623 height = width; 12624 } else if (height > width) { 12625 width = height; 12626 } 12627 12628 if (startX >= x) { 12629 left = startX - width; 12630 } 12631 12632 if (startY >= y) { 12633 top = startY - height; 12634 } 12635 } 12636 12637 return { 12638 left: left, 12639 top: top, 12640 width: width, 12641 height: height 12642 }; 12643 } 12644 12645 /** 12646 * onMouseup handler in fabric canvas 12647 * @private 12648 */ 12649 12650 }, { 12651 key: '_onFabricMouseUp', 12652 value: function _onFabricMouseUp() { 12653 var cropzone = this._cropzone; 12654 var listeners = this._listeners; 12655 var canvas = this.getCanvas(); 12656 12657 canvas.setActiveObject(cropzone); 12658 canvas.off({ 12659 'mouse:move': listeners.mousemove, 12660 'mouse:up': listeners.mouseup 12661 }); 12662 } 12663 12664 /** 12665 * Get cropped image data 12666 * @param {Object} cropRect cropzone rect
12667 * @param {Number} cropRect.left left position 12668 * @param {Number} cropRect.top top position 12669 * @param {Number} cropRect.width width 12670 * @param {Number} cropRect.height height 12671 * @returns {?{imageName: string, url: string}} cropped Image data 12672 */ 12673 12674 }, { 12675 key: 'getCroppedImageData', 12676 value: function getCroppedImageData(cropRect) { 12677 var canvas = this.getCanvas(); 12678 var containsCropzone = canvas.contains(this._cropzone); 12679 if (!cropRect) { 12680 return null; 12681 } 12682 12683 if (containsCropzone) { 12684 this._cropzone.remove(); 12685 } 12686 12687 var imageData = { 12688 imageName: this.getImageName(), 12689 url: canvas.toDataURL(cropRect) 12690 }; 12691 12692 if (containsCropzone) { 12693 canvas.add(this._cropzone); 12694 } 12695 12696 return imageData; 12697 } 12698 12699 /** 12700 * Get cropped rect 12701 * @returns {Object} rect 12702 */ 12703 12704 }, { 12705 key: 'getCropzoneRect', 12706 value: function getCropzoneRect() { 12707 var cropzone = this._cropzone; 12708 12709 if (!cropzone.isValid()) { 12710 return null; 12711 } 12712 12713 return { 12714 left: cropzone.getLeft(), 12715 top: cropzone.getTop(), 12716 width: cropzone.getWidth(), 12717 height: cropzone.getHeight() 12718 }; 12719 } 12720 12721 /** 12722 * Set a cropzone square 12723 * @param {number} [presetRatio] - preset ratio 12724 */ 12725 12726 }, { 12727 key: 'setCropzoneRect', 12728 value: function setCropzoneRect(presetRatio) { 12729 var canvas = this.getCanvas(); 12730 var cropzone = this._cropzone; 12731 12732 canvas.deactivateAll(); 12733 canvas.selection = false; 12734 cropzone.remove(); 12735 12736 cropzone.set(presetRatio ? this._getPresetCropSizePosition(presetRatio) : DEFAULT_OPTION); 12737 12738 canvas.add(cropzone); 12739 canvas.selection = true; 12740 12741 if (presetRatio) { 12742 canvas.setActiveObject(cropzone); 12743 } 12744 } 12745 12746 /** 12747 * Set a cropzone square 12748 * @param {number} presetRatio - preset ratio 12749 * @returns {{left: number, top: number, width: number, height: number}} 12750 * @private 12751 */ 12752 12753 }, { 12754 key: '_getPresetCropSizePosition', 12755 value: function _getPresetCropSizePosition(presetRatio) { 12756 var canvas = this.getCanvas(); 12757 var originalWidth = canvas.getWidth(); 12758 var originalHeight = canvas.getHeight(); 12759 12760 var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight; 12761 var getScale = function getScale(value, orignalValue) { 12762 return value > orignalValue ? orignalValue / value : 1; 12763 }; 12764 12765 var width = standardSize * presetRatio; 12766 var height = standardSize; 12767 12768 var scaleWidth = getScale(width, originalWidth); 12769 12770 var _snippet$map = _tuiCodeSnippet2.default.map([width, height], function (sizeValue) { 12771 return sizeValue * scaleWidth; 12772 }); 12773 12774 width = _snippet$map[0]; 12775 height = _snippet$map[1]; 12776 12777 12778 var scaleHeight = getScale(height, originalHeight); 12779 12780 var _snippet$map2 = _tuiCodeSnippet2.default.map([width, height], function (sizeValue) { 12781 return sizeValue * scaleHeight; 12782 }); 12783 12784 width = _snippet$map2[0]; 12785 height = _snippet$map2[1]; 12786 12787 12788 return { 12789 top: (originalHeight - height) / 2, 12790 left: (originalWidth - width) / 2, 12791 width: width, 12792 height: height 12793 }; 12794 } 12795 12796 /** 12797 * Keydown event handler 12798 * @param {KeyboardEvent} e - Event object 12799 * @private 12800 */ 12801 12802 }, { 12803 key: '_onKeyDown', 12804 value: function _onKeyDown(e) { 12805 if (e.keyCode === _consts.keyCodes.SHIFT) { 12806 this._withShiftKey = true; 12807 } 12808 } 12809 12810 /** 12811 * Keyup event handler 12812 * @param {KeyboardEvent} e - Event object 12813 * @private 12814 */ 12815 12816 }, { 12817 key: '_onKeyUp', 12818 value: function _onKeyUp(e) { 12819 if (e.keyCode === _consts.keyCodes.SHIFT) { 12820 this._withShiftKey = false;
12821 } 12822 } 12823 }]); 12824 12825 return Cropper; 12826 }(_component2.default); 12827 12828 module.exports = Cropper; 12829 12830/***/ }), 12831/* 110 */ 12832/***/ (function(module, exports, __webpack_require__) { 12833 12834 'use strict'; 12835 12836 var _tuiCodeSnippet = __webpack_require__(3); 12837 12838 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 12839 12840 var _fabric = __webpack_require__(106); 12841 12842 var _fabric2 = _interopRequireDefault(_fabric); 12843 12844 var _util = __webpack_require__(72); 12845 12846 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 12847 12848 var CORNER_TYPE_TOP_LEFT = 'tl'; /** 12849 * @author NHN Ent. FE Development Team <[email protected]> 12850 * @fileoverview Cropzone extending fabric.Rect 12851 */ 12852 12853 var CORNER_TYPE_TOP_RIGHT = 'tr'; 12854 var CORNER_TYPE_MIDDLE_TOP = 'mt'; 12855 var CORNER_TYPE_MIDDLE_LEFT = 'ml'; 12856 var CORNER_TYPE_MIDDLE_RIGHT = 'mr'; 12857 var CORNER_TYPE_MIDDLE_BOTTOM = 'mb'; 12858 var CORNER_TYPE_BOTTOM_LEFT = 'bl'; 12859 var CORNER_TYPE_BOTTOM_RIGHT = 'br'; 12860 12861 /** 12862 * Cropzone object 12863 * Issue: IE7, 8(with excanvas) 12864 * - Cropzone is a black zone without transparency. 12865 * @class Cropzone 12866 * @extends {fabric.Rect} 12867 * @ignore 12868 */ 12869 var Cropzone = _fabric2.default.util.createClass(_fabric2.default.Rect, /** @lends Cropzone.prototype */{ 12870 /** 12871 * Constructor 12872 * @param {Object} options Options object 12873 * @override 12874 */ 12875 initialize: function initialize(options, extendsOptions) { 12876 options = _tuiCodeSnippet2.default.extend(options, extendsOptions); 12877 options.type = 'cropzone'; 12878 12879 this.callSuper('initialize', options); 12880 12881 this.options = options; 12882 12883 this.on({ 12884 'moving': this._onMoving, 12885 'scaling': this._onScaling 12886 }); 12887 }, 12888 12889 12890 /**
vendor: 4,168 bytes, lines 12891-13023
12891 * Render Crop-zone 12892 * @param {CanvasRenderingContext2D} ctx - Context 12893 * @private 12894 * @override 12895 */ 12896 _render: function _render(ctx) { 12897 var cropzoneDashLineWidth = 7; 12898 var cropzoneDashLineOffset = 7; 12899 this.callSuper('_render', ctx); 12900 12901 // Calc original scale 12902 var originalFlipX = this.flipX ? -1 : 1; 12903 var originalFlipY = this.flipY ? -1 : 1; 12904 var originalScaleX = originalFlipX / this.scaleX; 12905 var originalScaleY = originalFlipY / this.scaleY; 12906 12907 // Set original scale 12908 ctx.scale(originalScaleX, originalScaleY); 12909 12910 // Render outer rect 12911 this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.55)'); 12912 12913 if (this.options.lineWidth) { 12914 this._fillInnerRect(ctx); 12915 this._strokeBorder(ctx, 'rgb(255, 255, 255)', { 12916 lineWidth: this.options.lineWidth 12917 }); 12918 } else { 12919 // Black dash line 12920 this._strokeBorder(ctx, 'rgb(0, 0, 0)', { 12921 lineDashWidth: cropzoneDashLineWidth 12922 }); 12923 12924 // White dash line 12925 this._strokeBorder(ctx, 'rgb(255, 255, 255)', { 12926 lineDashWidth: cropzoneDashLineWidth, 12927 lineDashOffset: cropzoneDashLineOffset 12928 }); 12929 } 12930 12931 // Reset scale 12932 ctx.scale(1 / originalScaleX, 1 / originalScaleY); 12933 }, 12934 12935 12936 /** 12937 * Cropzone-coordinates with outer rectangle 12938 * 12939 * x0 x1 x2 x3 12940 * y0 +--------------------------+ 12941 * |///////|//////////|///////| // <--- "Outer-rectangle" 12942 * |///////|//////////|///////| 12943 * y1 +-------+----------+-------+ 12944 * |///////| Cropzone |///////| Cropzone is the "Inner-rectangle" 12945 * |///////| (0, 0) |///////| Center point (0, 0) 12946 * y2 +-------+----------+-------+ 12947 * |///////|//////////|///////| 12948 * |///////|//////////|///////| 12949 * y3 +--------------------------+ 12950 * 12951 * @typedef {{x: Array<number>, y: Array<number>}} cropzoneCoordinates 12952 * @ignore 12953 */ 12954 12955 /** 12956 * Fill outer rectangle 12957 * @param {CanvasRenderingContext2D} ctx - Context 12958 * @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style 12959 * @private 12960 */ 12961 _fillOuterRect: function _fillOuterRect(ctx, fillStyle) { 12962 var _getCoordinates = this._getCoordinates(ctx), 12963 x = _getCoordinates.x, 12964 y = _getCoordinates.y; 12965 12966 ctx.save(); 12967 ctx.fillStyle = fillStyle; 12968 ctx.beginPath(); 12969 12970 // Outer rectangle 12971 // Numbers are +/-1 so that overlay edges don't get blurry. 12972 ctx.moveTo(x[0] - 1, y[0] - 1); 12973 ctx.lineTo(x[3] + 1, y[0] - 1); 12974 ctx.lineTo(x[3] + 1, y[3] + 1); 12975 ctx.lineTo(x[0] - 1, y[3] + 1); 12976 ctx.lineTo(x[0] - 1, y[0] - 1); 12977 ctx.closePath(); 12978 12979 // Inner rectangle 12980 ctx.moveTo(x[1], y[1]); 12981 ctx.lineTo(x[1], y[2]); 12982 ctx.lineTo(x[2], y[2]); 12983 ctx.lineTo(x[2], y[1]); 12984 ctx.lineTo(x[1], y[1]); 12985 ctx.closePath(); 12986 12987 ctx.fill(); 12988 ctx.restore(); 12989 }, 12990 12991 12992 /** 12993 * Draw Inner grid line 12994 * @param {CanvasRenderingContext2D} ctx - Context 12995 * @private 12996 */ 12997 _fillInnerRect: function _fillInnerRect(ctx) { 12998 var _getCoordinates2 = this._getCoordinates(ctx), 12999 outerX = _getCoordinates2.x, 13000 outerY = _getCoordinates2.y; 13001 13002 var x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3); 13003 var y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3); 13004 13005 ctx.save(); 13006 ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; 13007 ctx.lineWidth = this.options.lineWidth; 13008 ctx.beginPath(); 13009 13010 ctx.moveTo(x[0], y[1]); 13011 ctx.lineTo(x[3], y[1]); 13012 13013 ctx.moveTo(x[0], y[2]); 13014 ctx.lineTo(x[3], y[2]); 13015 13016 ctx.moveTo(x[1], y[0]); 13017 ctx.lineTo(x[1], y[3]); 13018 13019 ctx.moveTo(x[2], y[0]); 13020 ctx.lineTo(x[2], y[3]); 13021 ctx.stroke(); 13022 ctx.closePath(); 13023
13024 ctx.restore(); 13025 }, 13026 13027 13028 /** 13029 * Calculate Inner Position 13030 * @param {Array} outer - outer position 13031 * @param {number} size - interval for calcaulate 13032 * @returns {Array} - inner position 13033 * @private 13034 */ 13035 _caculateInnerPosition: function _caculateInnerPosition(outer, size) { 13036 var position = []; 13037 position[0] = outer[1]; 13038 position[1] = outer[1] + size; 13039 position[2] = outer[1] + size * 2; 13040 position[3] = outer[2]; 13041 13042 return position; 13043 }, 13044 13045 13046 /** 13047 * Get coordinates 13048 * @param {CanvasRenderingContext2D} ctx - Context 13049 * @returns {cropzoneCoordinates} - {@link cropzoneCoordinates} 13050 * @private 13051 */ 13052 _getCoordinates: function _getCoordinates(ctx) { 13053 var width = this.getWidth(), 13054 height = this.getHeight(), 13055 halfWidth = width / 2, 13056 halfHeight = height / 2, 13057 left = this.getLeft(), 13058 top = this.getTop(), 13059 canvasEl = ctx.canvas; // canvas element, not fabric object 13060 13061 return { 13062 x: _tuiCodeSnippet2.default.map([-(halfWidth + left), // x0 13063 -halfWidth, // x1 13064 halfWidth, // x2 13065 halfWidth + (canvasEl.width - left - width) // x3 13066 ], Math.ceil), 13067 y: _tuiCodeSnippet2.default.map([-(halfHeight + top), // y0 13068 -halfHeight, // y1 13069 halfHeight, // y2 13070 halfHeight + (canvasEl.height - top - height) // y3 13071 ], Math.ceil) 13072 }; 13073 }, 13074 13075 13076 /** 13077 * Stroke border 13078 * @param {CanvasRenderingContext2D} ctx - Context 13079 * @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style 13080 * @param {number} lineDashWidth - Dash width 13081 * @param {number} [lineDashOffset] - Dash offset 13082 * @private 13083 */ 13084 _strokeBorder: function _strokeBorder(ctx, strokeStyle, _ref) { 13085 var lineDashWidth = _ref.lineDashWidth, 13086 lineDashOffset = _ref.lineDashOffset, 13087 lineWidth = _ref.lineWidth; 13088 13089 var halfWidth = this.getWidth() / 2, 13090 halfHeight = this.getHeight() / 2; 13091 13092 ctx.save(); 13093 ctx.strokeStyle = strokeStyle; 13094 13095 if (ctx.setLineDash) { 13096 ctx.setLineDash([lineDashWidth, lineDashWidth]); 13097 } 13098 if (lineDashOffset) { 13099 ctx.lineDashOffset = lineDashOffset; 13100 } 13101 if (lineWidth) { 13102 ctx.lineWidth = lineWidth; 13103 } 13104 13105 ctx.beginPath(); 13106 ctx.moveTo(-halfWidth, -halfHeight); 13107 ctx.lineTo(halfWidth, -halfHeight); 13108 ctx.lineTo(halfWidth, halfHeight); 13109 ctx.lineTo(-halfWidth, halfHeight); 13110 ctx.lineTo(-halfWidth, -halfHeight); 13111 ctx.stroke(); 13112 13113 ctx.restore(); 13114 }, 13115 13116 13117 /** 13118 * onMoving event listener 13119 * @private 13120 */ 13121 _onMoving: function _onMoving() { 13122 var left = this.getLeft(), 13123 top = this.getTop(), 13124 width = this.getWidth(), 13125 height = this.getHeight(), 13126 maxLeft = this.canvas.getWidth() - width, 13127 maxTop = this.canvas.getHeight() - height; 13128 13129 this.setLeft((0, _util.clamp)(left, 0, maxLeft)); 13130 this.setTop((0, _util.clamp)(top, 0, maxTop)); 13131 }, 13132 13133 13134 /** 13135 * onScaling event listener 13136 * @param {{e: MouseEvent}} fEvent - Fabric event 13137 * @private 13138 */ 13139 _onScaling: function _onScaling(fEvent) { 13140 var pointer = this.canvas.getPointer(fEvent.e), 13141 settings = this._calcScalingSizeFromPointer(pointer); 13142 13143 // On scaling cropzone, 13144 // change real width and height and fix scaleFactor to 1 13145 this.scale(1).set(settings); 13146 }, 13147 13148 13149 /** 13150 * Calc scaled size from mouse pointer with selected corner 13151 * @param {{x: number, y: number}} pointer - Mouse position 13152 * @returns {Object} Having left or(and) top or(and) width or(and) height. 13153 * @private 13154 */ 13155 _calcScalingSizeFromPointer: function _calcScalingSizeFromPointer(pointer) { 13156 var pointerX = pointer.x, 13157 pointerY = pointer.y, 13158 tlScalingSize = this._calcTopLeftScalingSizeFromPointer(pointerX, pointerY),
13159 brScalingSize = this._calcBottomRightScalingSizeFromPointer(pointerX, pointerY); 13160 13161 /* 13162 * @todo: ì¼ë° ê°ì²´ìì shift ì¡°í©í¤ë¥¼ ë르면 free size scalingì´ ë¨ --> íì¸í´ë³¼ê² 13163 * canvas.class.js // _scaleObject: function(...){...} 13164 */ 13165 return this._makeScalingSettings(tlScalingSize, brScalingSize); 13166 }, 13167 13168 13169 /** 13170 * Calc scaling size(position + dimension) from left-top corner 13171 * @param {number} x - Mouse position X 13172 * @param {number} y - Mouse position Y 13173 * @returns {{top: number, left: number, width: number, height: number}} 13174 * @private 13175 */ 13176 _calcTopLeftScalingSizeFromPointer: function _calcTopLeftScalingSizeFromPointer(x, y) { 13177 var bottom = this.getHeight() + this.top, 13178 right = this.getWidth() + this.left, 13179 top = (0, _util.clamp)(y, 0, bottom - 1), 13180 // 0 <= top <= (bottom - 1) 13181 left = (0, _util.clamp)(x, 0, right - 1); // 0 <= left <= (right - 1) 13182 13183 // When scaling "Top-Left corner": It fixes right and bottom coordinates 13184 return { 13185 top: top, 13186 left: left, 13187 width: right - left, 13188 height: bottom - top 13189 }; 13190 }, 13191 13192 13193 /** 13194 * Calc scaling size from right-bottom corner 13195 * @param {number} x - Mouse position X 13196 * @param {number} y - Mouse position Y 13197 * @returns {{width: number, height: number}} 13198 * @private 13199 */ 13200 _calcBottomRightScalingSizeFromPointer: function _calcBottomRightScalingSizeFromPointer(x, y) { 13201 var _canvas = this.canvas, 13202 maxX = _canvas.width, 13203 maxY = _canvas.height; 13204 var left = this.left, 13205 top = this.top; 13206 13207 // When scaling "Bottom-Right corner": It fixes left and top coordinates 13208 13209 return { 13210 width: (0, _util.clamp)(x, left + 1, maxX) - left, // (width = x - left), (left + 1 <= x <= maxX) 13211 height: (0, _util.clamp)(y, top + 1, maxY) - top // (height = y - top), (top + 1 <= y <= maxY) 13212 }; 13213 }, 13214 13215 13216 /* eslint-disable complexity */ 13217 /** 13218 * Make scaling settings 13219 * @param {{width: number, height: number, left: number, top: number}} tl - Top-Left setting 13220 * @param {{width: number, height: number}} br - Bottom-Right setting 13221 * @returns {{width: ?number, height: ?number, left: ?number, top: ?number}} Position setting 13222 * @private 13223 */ 13224 _makeScalingSettings: function _makeScalingSettings(tl, br) { 13225 var tlWidth = tl.width; 13226 var tlHeight = tl.height; 13227 var brHeight = br.height; 13228 var brWidth = br.width; 13229 var tlLeft = tl.left; 13230 var tlTop = tl.top; 13231 var settings = void 0; 13232 13233 switch (this.__corner) { 13234 case CORNER_TYPE_TOP_LEFT: 13235 settings = tl; 13236 break; 13237 case CORNER_TYPE_TOP_RIGHT: 13238 settings = { 13239 width: brWidth, 13240 height: tlHeight, 13241 top: tlTop 13242 }; 13243 break; 13244 case CORNER_TYPE_BOTTOM_LEFT: 13245 settings = { 13246 width: tlWidth, 13247 height: brHeight, 13248 left: tlLeft 13249 }; 13250 break; 13251 case CORNER_TYPE_BOTTOM_RIGHT: 13252 settings = br; 13253 break; 13254 case CORNER_TYPE_MIDDLE_LEFT: 13255 settings = { 13256 width: tlWidth, 13257 left: tlLeft 13258 }; 13259 break; 13260 case CORNER_TYPE_MIDDLE_TOP: 13261 settings = { 13262 height: tlHeight, 13263 top: tlTop 13264 }; 13265 break; 13266 case CORNER_TYPE_MIDDLE_RIGHT: 13267 settings = { 13268 width: brWidth 13269 }; 13270 break; 13271 case CORNER_TYPE_MIDDLE_BOTTOM: 13272 settings = { 13273 height: brHeight 13274 }; 13275 break; 13276 default: 13277 break; 13278 } 13279 13280 return settings; 13281 }, 13282 /* eslint-enable complexity */ 13283 13284 /** 13285 * Return the whether this cropzone is valid 13286 * @returns {boolean} 13287 */ 13288 isValid: function isValid() { 13289 return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0; 13290 } 13291 }); 13292 13293 module.exports = Cropzone; 13294 13295/***/ }), 13296/* 111 */ 13297/***/ (function(module, exports, __webpack_require__) { 13298 13299 'use strict'; 13300 13301 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; }; }(); 13302 13303 var _tuiCodeSnippet = __webpack_require__(3); 13304 13305 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 13306 13307 var _promise = __webpack_require__(4); 13308 13309 var _promise2 = _interopRequireDefault(_promise); 13310 13311 var _component = __webpack_require__(108); 13312 13313 var _component2 = _interopRequireDefault(_component); 13314 13315 var _consts = __webpack_require__(73); 13316 13317 var _consts2 = _interopRequireDefault(_consts); 13318 13319 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 13320 13321 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13322 13323 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; } 13324 13325 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, { c
13325onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 13326 * @author NHN Ent. FE Development Team <[email protected]> 13327 * @fileoverview Image flip module 13328 */ 13329 13330 13331 var componentNames = _consts2.default.componentNames, 13332 rejectMessages = _consts2.default.rejectMessages; 13333 13334 /** 13335 * Flip 13336 * @class Flip 13337 * @param {Graphics} graphics - Graphics instance 13338 * @extends {Component} 13339 * @ignore 13340 */ 13341 13342 var Flip = function (_Component) { 13343 _inherits(Flip, _Component); 13344 13345 function Flip(graphics) { 13346 _classCallCheck(this, Flip); 13347 13348 return _possibleConstructorReturn(this, (Flip.__proto__ || Object.getPrototypeOf(Flip)).call(this, componentNames.FLIP, graphics)); 13349 } 13350 13351 /** 13352 * Get current flip settings 13353 * @returns {{flipX: Boolean, flipY: Boolean}} 13354 */ 13355 13356 13357 _createClass(Flip, [{ 13358 key: 'getCurrentSetting', 13359 value: function getCurrentSetting() { 13360 var canvasImage = this.getCanvasImage(); 13361 13362 return { 13363 flipX: canvasImage.flipX, 13364 flipY: canvasImage.flipY 13365 }; 13366 } 13367 13368 /** 13369 * Set flipX, flipY 13370 * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting 13371 * @returns {Promise} 13372 */ 13373 13374 }, { 13375 key: 'set', 13376 value: function set(newSetting) { 13377 var setting = this.getCurrentSetting(); 13378 var isChangingFlipX = setting.flipX !== newSetting.flipX; 13379 var isChangingFlipY = setting.flipY !== newSetting.flipY; 13380 13381 if (!isChangingFlipX && !isChangingFlipY) { 13382 return _promise2.default.reject(rejectMessages.flip); 13383 } 13384 13385 _tuiCodeSnippet2.default.extend(setting, newSetting); 13386 this.setImageProperties(setting, true); 13387 this._invertAngle(isChangingFlipX, isChangingFlipY); 13388 this._flipObjects(isChangingFlipX, isChangingFlipY); 13389 13390 return _promise2.default.resolve({ 13391 flipX: setting.flipX, 13392 flipY: setting.flipY, 13393 angle: this.getCanvasImage().angle 13394 }); 13395 } 13396 13397 /** 13398 * Invert image angle for flip 13399 * @param {boolean} isChangingFlipX - Change flipX 13400 * @param {boolean} isChangingFlipY - Change flipY 13401 */ 13402 13403 }, { 13404 key: '_invertAngle', 13405 value: function _invertAngle(isChangingFlipX, isChangingFlipY) { 13406 var canvasImage = this.getCanvasImage(); 13407 var angle = canvasImage.angle; 13408 13409 13410 if (isChangingFlipX) { 13411 angle *= -1; 13412 } 13413 if (isChangingFlipY) { 13414 angle *= -1; 13415 } 13416 canvasImage.setAngle(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0 13417 } 13418 13419 /** 13420 * Flip objects 13421 * @param {boolean} isChangingFlipX - Change flipX 13422 * @param {boolean} isChangingFlipY - Change flipY 13423 * @private 13424 */ 13425 13426 }, { 13427 key: '_flipObjects', 13428 value: function _flipObjects(isChangingFlipX, isChangingFlipY) { 13429 var canvas = this.getCanvas(); 13430 13431 if (isChangingFlipX) { 13432 canvas.forEachObject(function (obj) { 13433 obj.set({ 13434 angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0 13435 flipX: !obj.flipX, 13436 left: canvas.width - obj.left 13437 }).setCoords(); 13438 }); 13439 } 13440 if (isChangingFlipY) { 13441 canvas.forEachObject(function (obj) { 13442 obj.set({ 13443 angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0 13444 flipY: !obj.flipY, 13445 top: canvas.height - obj.top 13446 }).setCoords(); 13447 }); 13448 } 13449 canvas.renderAll(); 13450 } 13451 13452 /** 13453 * Reset flip settings 13454 * @returns {Promise} 13455 */ 13456 13457 }, { 13458 key: 'reset', 13459 value: function reset() { 13460 return this.set({ 13461 flipX: false, 13462 flipY: false 13463 }); 13464 } 13465 13466 /** 13467 * Flip x 13468 * @returns {Promise} 13469 */ 13470 13471 }, { 13472 key: 'flipX', 13473 value: function flipX() { 13474 var current = this.getCurrentSetting(); 13475 13476 return this.set({ 13477 flipX: !current.flipX, 13478 flipY: current.flipY 13479 }); 13480 } 13481 13482 /** 13483 * Flip y 13484 * @returns {Promise} 13485 */ 13486 13487 }, { 13488 key: 'flipY', 13489 value: function flipY() { 13490 var current = this.getCurrentSetting(); 13491 13492 return this.set({ 13493 flipX: current.flipX, 13494 flipY: !current.flipY 13495 }); 13496 } 13497 }]); 13498 13499 return Flip; 13500 }(_component2.default); 13501 13502 module.exports = Flip; 13503 13504/***/ }), 13505/* 112 */ 13506/***/ (function(module, exports, __webpack_require__) { 13507 13508 'use strict'; 13509 13510 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; }; }(); 13511 13512 var _fabric = __webpack_require__(106); 13513 13514 var _fabric2 = _interopRequireDefault(_fabric); 13515 13516 var _promise = __webpack_require__(4); 13517 13518 var _promise2 = _interopRequireDefault(_promise); 13519 13520 var _component = __webpack_require__(108); 13521 13522 var _component2 = _interopRequireDefault(_component); 13523 13524 var _consts = __webpack_require__(73); 13525 13526 var _consts2 = _interopRequireDefault(_consts); 13527 13528 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 13529 13530 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13531 13532 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; } 13533 13534 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, { c
13534onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 13535 * @author NHN Ent. FE Development Team <[email protected]> 13536 * @fileoverview Image rotation module 13537 */ 13538 13539 13540 var componentNames = _consts2.default.componentNames; 13541 13542 /** 13543 * Image Rotation component 13544 * @class Rotation 13545 * @extends {Component} 13546 * @param {Graphics} graphics - Graphics instance 13547 * @ignore 13548 */ 13549 13550 var Rotation = function (_Component) { 13551 _inherits(Rotation, _Component); 13552 13553 function Rotation(graphics) { 13554 _classCallCheck(this, Rotation); 13555 13556 return _possibleConstructorReturn(this, (Rotation.__proto__ || Object.getPrototypeOf(Rotation)).call(this, componentNames.ROTATION, graphics)); 13557 } 13558 13559 /** 13560 * Get current angle 13561 * @returns {Number} 13562 */ 13563 13564 13565 _createClass(Rotation, [{ 13566 key: 'getCurrentAngle', 13567 value: function getCurrentAngle() { 13568 return this.getCanvasImage().angle; 13569 } 13570 13571 /** 13572 * Set angle of the image 13573 * 13574 * Do not call "this.setImageProperties" for setting angle directly. 13575 * Before setting angle, The originX,Y of image should be set to center. 13576 * See "http://fabricjs.com/docs/fabric.Object.html#setAngle" 13577 * 13578 * @param {number} angle - Angle value 13579 * @returns {Promise} 13580 */ 13581 13582 }, { 13583 key: 'setAngle', 13584 value: function setAngle(angle) { 13585 var oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees) 13586 13587 angle %= 360; 13588 13589 var canvasImage = this.getCanvasImage(); 13590 var oldImageCenter = canvasImage.getCenterPoint(); 13591 canvasImage.setAngle(angle).setCoords(); 13592 this.adjustCanvasDimension(); 13593 var newImageCenter = canvasImage.getCenterPoint(); 13594 this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle); 13595 13596 return _promise2.default.resolve(angle); 13597 } 13598 13599 /** 13600 * Rotate for each object 13601 * @param {fabric.Point} oldImageCenter - Image center point before rotation 13602 * @param {fabric.Point} newImageCenter - Image center point after rotation 13603 * @param {number} angleDiff - Image angle difference after rotation 13604 * @private 13605 */ 13606 13607 }, { 13608 key: '_rotateForEachObject', 13609 value: function _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) { 13610 var canvas = this.getCanvas(); 13611 var centerDiff = { 13612 x: oldImageCenter.x - newImageCenter.x, 13613 y: oldImageCenter.y - newImageCenter.y 13614 }; 13615 13616 canvas.forEachObject(function (obj) { 13617 var objCenter = obj.getCenterPoint(); 13618 var radian = _fabric2.default.util.degreesToRadians(angleDiff); 13619 var newObjCenter = _fabric2.default.util.rotatePoint(objCenter, oldImageCenter, radian); 13620 13621 obj.set({ 13622 left: newObjCenter.x - centerDiff.x, 13623 top: newObjCenter.y - centerDiff.y, 13624 angle: (obj.angle + angleDiff) % 360 13625 }); 13626 obj.setCoords(); 13627 }); 13628 canvas.renderAll(); 13629 } 13630 13631 /** 13632 * Rotate the image 13633 * @param {number} additionalAngle - Additional angle 13634 * @returns {Promise} 13635 */ 13636 13637 }, { 13638 key: 'rotate', 13639 value: function rotate(additionalAngle) { 13640 var current = this.getCurrentAngle(); 13641 13642 return this.setAngle(current + additionalAngle); 13643 } 13644 }]); 13645 13646 return Rotation; 13647 }(_component2.default); 13648 13649 module.exports = Rotation; 13650 13651/***/ }), 13652/* 113 */ 13653/***/ (function(module, exports, __webpack_require__) { 13654 13655 'use strict'; 13656 13657 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; }; }(); 13658 13659 var _fabric = __webpack_require__(106); 13660 13661 var _fabric2 = _interopRequireDefault(_fabric); 13662 13663 var _component = __webpack_require__(108); 13664 13665 var _component2 = _interopRequireDefault(_component); 13666 13667 var _consts = __webpack_require__(73); 13668 13669 var _consts2 = _interopRequireDefault(_consts); 13670 13671 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 13672 13673 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13674 13675 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; } 13676 13677 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, { c
13677onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 13678 * @author NHN Ent. FE Development Team <[email protected]> 13679 * @fileoverview Free drawing module, Set brush 13680 */ 13681 13682 13683 /** 13684 * FreeDrawing 13685 * @class FreeDrawing 13686 * @param {Graphics} graphics - Graphics instance 13687 * @extends {Component} 13688 * @ignore 13689 */ 13690 var FreeDrawing = function (_Component) { 13691 _inherits(FreeDrawing, _Component); 13692 13693 function FreeDrawing(graphics) { 13694 _classCallCheck(this, FreeDrawing); 13695 13696 /** 13697 * Brush width 13698 * @type {number} 13699 */ 13700 var _this = _possibleConstructorReturn(this, (FreeDrawing.__proto__ || Object.getPrototypeOf(FreeDrawing)).call(this, _consts2.default.componentNames.FREE_DRAWING, graphics)); 13701 13702 _this.width = 12; 13703 13704 /** 13705 * fabric.Color instance for brush color 13706 * @type {fabric.Color} 13707 */ 13708 _this.oColor = new _fabric2.default.Color('rgba(0, 0, 0, 0.5)'); 13709 return _this; 13710 } 13711 13712 /** 13713 * Start free drawing mode 13714 * @param {{width: ?number, color: ?string}} [setting] - Brush width & color 13715 */ 13716 13717 13718 _createClass(FreeDrawing, [{ 13719 key: 'start', 13720 value: function start(setting) { 13721 var canvas = this.getCanvas(); 13722 13723 canvas.isDrawingMode = true; 13724 this.setBrush(setting); 13725 } 13726 13727 /** 13728 * Set brush 13729 * @param {{width: ?number, color: ?string}} [setting] - Brush width & color 13730 */ 13731 13732 }, { 13733 key: 'setBrush', 13734 value: function setBrush(setting) { 13735 var brush = this.getCanvas().freeDrawingBrush; 13736 13737 setting = setting || {}; 13738 this.width = setting.width || this.width; 13739 if (setting.color) { 13740 this.oColor = new _fabric2.default.Color(setting.color); 13741 } 13742 brush.width = this.width; 13743 brush.color = this.oColor.toRgba(); 13744 } 13745 13746 /** 13747 * End free drawing mode 13748 */ 13749 13750 }, { 13751 key: 'end', 13752 value: function end() { 13753 var canvas = this.getCanvas(); 13754 13755 canvas.isDrawingMode = false; 13756 } 13757 }]); 13758 13759 return FreeDrawing; 13760 }(_component2.default); 13761 13762 module.exports = FreeDrawing; 13763 13764/***/ }), 13765/* 114 */ 13766/***/ (function(module, exports, __webpack_require__) { 13767 13768 'use strict'; 13769 13770 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; }; }(); 13771 13772 var _fabric = __webpack_require__(106); 13773 13774 var _fabric2 = _interopRequireDefault(_fabric); 13775 13776 var _component = __webpack_require__(108); 13777 13778 var _component2 = _interopRequireDefault(_component); 13779 13780 var _consts = __webpack_require__(73); 13781 13782 var _consts2 = _interopRequireDefault(_consts); 13783 13784 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 13785 13786 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13787 13788 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; } 13789 13790 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, { c
13790onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 13791 * @author NHN Ent. FE Development Team <[email protected]> 13792 * @fileoverview Free drawing module, Set brush 13793 */ 13794 13795 13796 var eventNames = _consts2.default.eventNames; 13797 13798 /** 13799 * Line 13800 * @class Line 13801 * @param {Graphics} graphics - Graphics instance 13802 * @extends {Component} 13803 * @ignore 13804 */ 13805 13806 var Line = function (_Component) { 13807 _inherits(Line, _Component); 13808 13809 function Line(graphics) { 13810 _classCallCheck(this, Line); 13811 13812 /** 13813 * Brush width 13814 * @type {number} 13815 * @private 13816 */ 13817 var _this = _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).call(this, _consts2.default.componentNames.LINE, graphics)); 13818 13819 _this._width = 12; 13820 13821 /** 13822 * fabric.Color instance for brush color 13823 * @type {fabric.Color} 13824 * @private 13825 */ 13826 _this._oColor = new _fabric2.default.Color('rgba(0, 0, 0, 0.5)'); 13827 13828 /** 13829 * Listeners 13830 * @type {object.<string, function>} 13831 * @private 13832 */ 13833 _this._listeners = { 13834 mousedown: _this._onFabricMouseDown.bind(_this), 13835 mousemove: _this._onFabricMouseMove.bind(_this), 13836 mouseup: _this._onFabricMouseUp.bind(_this) 13837 }; 13838 return _this; 13839 } 13840 13841 /** 13842 * Start drawing line mode 13843 * @param {{width: ?number, color: ?string}} [setting] - Brush width & color 13844 */ 13845 13846 13847 _createClass(Line, [{ 13848 key: 'start', 13849 value: function start(setting) { 13850 var canvas = this.getCanvas(); 13851 13852 canvas.defaultCursor = 'crosshair'; 13853 canvas.selection = false; 13854 13855 this.setBrush(setting); 13856 13857 canvas.forEachObject(function (obj) { 13858 obj.set({ 13859 evented: false 13860 }); 13861 }); 13862 13863 canvas.on({ 13864 'mouse:down': this._listeners.mousedown 13865 }); 13866 } 13867 13868 /** 13869 * Set brush 13870 * @param {{width: ?number, color: ?string}} [setting] - Brush width & color 13871 */ 13872 13873 }, { 13874 key: 'setBrush', 13875 value: function setBrush(setting) { 13876 var brush = this.getCanvas().freeDrawingBrush; 13877 13878 setting = setting || {}; 13879 this._width = setting.width || this._width; 13880 13881 if (setting.color) { 13882 this._oColor = new _fabric2.default.Color(setting.color); 13883 } 13884 brush.width = this._width; 13885 brush.color = this._oColor.toRgba(); 13886 } 13887 13888 /** 13889 * End drawing line mode 13890 */ 13891 13892 }, { 13893 key: 'end', 13894 value: function end() { 13895 var canvas = this.getCanvas(); 13896 13897 canvas.defaultCursor = 'default'; 13898 canvas.selection = true; 13899 13900 canvas.forEachObject(function (obj) { 13901 obj.set({ 13902 evented: true 13903 }); 13904 }); 13905 13906 canvas.off('mouse:down', this._listeners.mousedown); 13907 } 13908 13909 /** 13910 * Mousedown event handler in fabric canvas 13911 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object 13912 * @private 13913 */ 13914 13915 }, { 13916 key: '_onFabricMouseDown', 13917 value: function _onFabricMouseDown(fEvent) { 13918 var canvas = this.getCanvas(); 13919 var pointer = canvas.getPointer(fEvent.e); 13920 var points = [pointer.x, pointer.y, pointer.x, pointer.y]; 13921 13922 this._line = new _fabric2.default.Line(points, { 13923 stroke: this._oColor.toRgba(), 13924 strokeWidth: this._width, 13925 evented: false 13926 }); 13927 13928 this._line.set(_consts2.default.fObjectOptions.SELECTION_STYLE); 13929 13930 canvas.add(this._line); 13931 13932 canvas.on({ 13933 'mouse:move': this._listeners.mousemove, 13934 'mouse:up': this._listeners.mouseup 13935 }); 13936 } 13937 13938 /** 13939 * Mousemove event handler in fabric canvas 13940 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object 13941 * @private 13942 */ 13943 13944 }, { 13945 key: '_onFabricMouseMove', 13946 value: function _onFabricMouseMove(fEvent) { 13947 var canvas = this.getCanvas(); 13948 var pointer = canvas.getPointer(fEvent.e); 13949 13950 this._line.set({ 13951 x2: pointer.x, 13952 y2: pointer.y 13953 }); 13954 13955 this._line.setCoords(); 13956 13957 canvas.renderAll(); 13958 } 13959 13960 /** 13961 * Mouseup event handler in fabric canvas 13962 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object 13963 * @private 13964 */ 13965 13966 }, { 13967 key: '_onFabricMouseUp', 13968 value: function _onFabricMouseUp() { 13969 var canvas = this.getCanvas(); 13970 var params = this.graphics.createObjectProperties(this._line); 13971 13972 this.fire(eventNames.ADD_OBJECT, params); 13973 13974 this._line = null; 13975 13976 canvas.off({ 13977 'mouse:move': this._listeners.mousemove, 13978 'mouse:up': this._listeners.mouseup 13979 }); 13980 } 13981 }]); 13982 13983 return Line; 13984 }(_component2.default); 13985 13986 module.exports = Line; 13987 13988/***/ }), 13989/* 115 */ 13990/***/ (function(module, exports, __webpack_require__) { 13991 13992 'use strict'; 13993 13994 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; }; }(); 13995 13996 var _fabric = __webpack_require__(106); 13997 13998 var _fabric2 = _interopRequireDefault(_fabric); 13999 14000 var _tuiCodeSnippet = __webpack_require__(3); 14001 14002 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 14003 14004 var _promise = __webpack_require__(4); 14005 14006 var _promise2 = _interopRequireDefault(_promise); 14007 14008 var _component = __webpack_require__(108); 14009 14010 var _component2 = _interopRequireDefault(_component); 14011 14012 var _consts = __webpack_require__(73); 14013 14014 var _consts2 = _interopRequireDefault(_consts); 14015 14016 var _util = __webpack_require__(72); 14017 14018 var _util2 = _interopRequireDefault(_util); 14019 14020 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14021 14022 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 14023 14024 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; } 14025 14026 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, { c
14026onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 14027 * @author NHN Ent. FE Development Team <[email protected]> 14028 * @fileoverview Text module 14029 */ 14030 14031 14032 var events = _consts2.default.eventNames; 14033 14034 var defaultStyles = { 14035 fill: '#000000', 14036 left: 0, 14037 top: 0 14038 }; 14039 var resetStyles = { 14040 fill: '#000000', 14041 fontStyle: 'normal', 14042 fontWeight: 'normal', 14043 textAlign: 'left', 14044 textDecoraiton: '' 14045 }; 14046 var browser = _tuiCodeSnippet2.default.browser; 14047 14048 14049 var TEXTAREA_CLASSNAME = 'tui-image-eidtor-textarea'; 14050 var TEXTAREA_STYLES = _util2.default.makeStyleText({ 14051 position: 'absolute', 14052 padding: 0, 14053 display: 'none', 14054 border: '1px dotted red', 14055 overflow: 'hidden', 14056 resize: 'none', 14057 outline: 'none', 14058 'border-radius': 0, 14059 'background-color': 'transparent', 14060 '-webkit-appearance': 'none', 14061 'z-index': 9999, 14062 'white-space': 'pre' 14063 }); 14064 var EXTRA_PIXEL_LINEHEIGHT = 0.1; 14065 var DBCLICK_TIME = 500; 14066 14067 /** 14068 * Text 14069 * @class Text 14070 * @param {Graphics} graphics - Graphics instance 14071 * @extends {Component} 14072 * @ignore 14073 */ 14074 14075 var Text = function (_Component) { 14076 _inherits(Text, _Component); 14077 14078 function Text(graphics) { 14079 _classCallCheck(this, Text); 14080 14081 /** 14082 * Default text style 14083 * @type {Object} 14084 */ 14085 var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, _consts2.default.componentNames.TEXT, graphics)); 14086 14087 _this._defaultStyles = defaultStyles; 14088 14089 /** 14090 * Selected state 14091 * @type {boolean} 14092 */ 14093 _this._isSelected = false; 14094 14095 /** 14096 * Selected text object 14097 * @type {Object} 14098 */ 14099 _this._selectedObj = {}; 14100 14101 /** 14102 * Editing text object 14103 * @type {Object} 14104 */ 14105 _this._editingObj = {}; 14106 14107 /** 14108 * Listeners for fabric event 14109 * @type {Object} 14110 */ 14111 _this._listeners = { 14112 mousedown: _this._onFabricMouseDown.bind(_this), 14113 select: _this._onFabricSelect.bind(_this), 14114 selectClear: _this._onFabricSelectClear.bind(_this), 14115 scaling: _this._onFabricScaling.bind(_this) 14116 }; 14117 14118 /** 14119 * Textarea element for editing 14120 * @type {HTMLElement} 14121 */ 14122 _this._textarea = null; 14123 14124 /** 14125 * Ratio of current canvas 14126 * @type {number} 14127 */ 14128 _this._ratio = 1; 14129 14130 /** 14131 * Last click time 14132 * @type {Date} 14133 */ 14134 _this._lastClickTime = new Date().getTime(); 14135 14136 /** 14137 * Text object infos before editing 14138 * @type {Object} 14139 */ 14140 _this._editingObjInfos = {}; 14141 14142 /** 14143 * Previous state of editing 14144 * @type {boolean} 14145 */ 14146 _this.isPrevEditing = false;
14147 14148 /** 14149 * use itext 14150 * @type {boolean} 14151 */ 14152 _this.useItext = graphics.useItext; 14153 return _this; 14154 } 14155 14156 /** 14157 * Start input text mode 14158 */ 14159 14160 14161 _createClass(Text, [{ 14162 key: 'start', 14163 value: function start() { 14164 var canvas = this.getCanvas(); 14165 14166 canvas.selection = false; 14167 canvas.defaultCursor = 'text'; 14168 canvas.on({ 14169 'mouse:down': this._listeners.mousedown, 14170 'object:selected': this._listeners.select, 14171 'before:selection:cleared': this._listeners.selectClear, 14172 'object:scaling': this._listeners.scaling, 14173 'text:editing': this._listeners.modify 14174 }); 14175 14176 if (this.useItext) { 14177 canvas.forEachObject(function (obj) { 14178 if (obj.type === 'i-text') { 14179 obj.set({ 14180 left: obj.left - obj.width / 2, 14181 top: obj.top - obj.height / 2, 14182 originX: 'left', 14183 originY: 'top' 14184 }); 14185 } 14186 }); 14187 } else { 14188 this._createTextarea(); 14189 } 14190 14191 this.setCanvasRatio(); 14192 } 14193 14194 /** 14195 * End input text mode 14196 */ 14197 14198 }, { 14199 key: 'end', 14200 value: function end() { 14201 var canvas = this.getCanvas(); 14202 14203 canvas.selection = true; 14204 canvas.defaultCursor = 'default'; 14205 14206 if (this.useItext) { 14207 canvas.forEachObject(function (obj) { 14208 if (obj.type === 'i-text') { 14209 if (obj.text === '') { 14210 obj.remove(); 14211 } else { 14212 obj.set({ 14213 left: obj.left + obj.width / 2, 14214 top: obj.top + obj.height / 2, 14215 originX: 'center', 14216 originY: 'center' 14217 }); 14218 } 14219 } 14220 }); 14221 } else { 14222 canvas.deactivateAllWithDispatch(); 14223 this._removeTextarea(); 14224 } 14225 14226 canvas.off({ 14227 'mouse:down': this._listeners.mousedown, 14228 'object:selected': this._listeners.select, 14229 'before:selection:cleared': this._listeners.selectClear, 14230 'object:scaling': this._listeners.scaling, 14231 'text:editing': this._listeners.modify 14232 }); 14233 } 14234 14235 /** 14236 * Add new text on canvas image 14237 * @param {string} text - Initial input text 14238 * @param {Object} options - Options for generating text 14239 * @param {Object} [options.styles] Initial styles 14240 * @param {string} [options.styles.fill] Color 14241 * @param {string} [options.styles.fontFamily] Font type for text 14242 * @param {number} [options.styles.fontSize] Size 14243 * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) 14244 * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) 14245 * @param {string} [options.styles.textAlign] Type of text align (left / center / right) 14246 * @param {string} [options.styles.textDecoraiton] Type of line (underline / line-throgh / overline) 14247 * @param {{x: number, y: number}} [options.position] - Initial position 14248 * @returns {Promise} 14249 */ 14250 14251 }, { 14252 key: 'add', 14253 value: function add(text, options) { 14254 var _this2 = this; 14255 14256 return new _promise2.default(function (resolve) { 14257 var canvas = _this2.getCanvas(); 14258 var newText = null; 14259 var selectionStyle = _consts2.default.fObjectOptions.SELECTION_STYLE; 14260 var styles = _this2._defaultStyles; 14261 14262 _this2._setInitPos(options.position); 14263 14264 if (options.styles) { 14265 styles = _tuiCodeSnippet2.default.extend(styles, options.styles); 14266 } 14267 14268 if (_this2.useItext) { 14269 newText = new _fabric2.default.IText(text, styles); 14270 selectionStyle = _tuiCodeSnippet2.default.extend({}, selectionStyle, { 14271 originX: 'left', 14272 originY: 'top' 14273 }); 14274 } else { 14275 newText = new _fabric2.default.Text(text, styles); 14276 } 14277 14278 newText.set(selectionStyle); 14279 newText.on({ 14280 mouseup: _this2._onFabricMouseUp.bind(_this2) 14281 }); 14282 14283 canvas.add(newText); 14284 14285 if (!canvas.getActiveObject()) { 14286 canvas.setActiveObject(newText); 14287 } 14288 14289 _this2.isPrevEditing = true; 14290 resolve(_this2.graphics.createObjectProperties(newText)); 14291 }); 14292 } 14293 14294 /** 14295 * Change text of activate object on canvas image 14296 * @param {Object} activeObj - Current selected text object 14297 * @param {string} text - Changed text 14298 * @returns {Promise} 14299 */ 14300 14301 }, { 14302 key: 'change', 14303 value: function change(activeObj, text) { 14304 var _this3 = this; 14305 14306 return new _promise2.default(function (resolve) { 14307 activeObj.set('text', text); 14308 14309 _this3.getCanvas().renderAll(); 14310 resolve(); 14311 }); 14312 } 14313 14314 /** 14315 * Set style 14316 * @param {Object} activeObj - Current selected text object 14317 * @param {Object} styleObj - Initial styles 14318 * @param {string} [styleObj.fill] Color 14319 * @param {string} [styleObj.fontFamily] Font type for text 14320 * @param {number} [styleObj.fontSize] Size 14321 * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) 14322 * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) 14323 * @param {string} [styleObj.textAlign] Type of text align (left / center / right) 14324 * @param {string}
14324 [styleObj.textDecoraiton] Type of line (underline / line-throgh / overline) 14325 * @returns {Promise} 14326 */ 14327 14328 }, { 14329 key: 'setStyle', 14330 value: function setStyle(activeObj, styleObj) { 14331 var _this4 = this; 14332 14333 return new _promise2.default(function (resolve) { 14334 _tuiCodeSnippet2.default.forEach(styleObj, function (val, key) { 14335 if (activeObj[key] === val) { 14336 styleObj[key] = resetStyles[key] || ''; 14337 } 14338 }, _this4); 14339 14340 activeObj.set(styleObj); 14341 14342 _this4.getCanvas().renderAll(); 14343 resolve(); 14344 }); 14345 } 14346 14347 /** 14348 * Get the text 14349 * @param {Object} activeObj - Current selected text object 14350 * @returns {String} text 14351 */ 14352 14353 }, { 14354 key: 'getText', 14355 value: function getText(activeObj) { 14356 return activeObj.getText(); 14357 } 14358 14359 /** 14360 * Set infos of the current selected object 14361 * @param {fabric.Text} obj - Current selected text object 14362 * @param {boolean} state - State of selecting 14363 */ 14364 14365 }, { 14366 key: 'setSelectedInfo', 14367 value: function setSelectedInfo(obj, state) { 14368 this._selectedObj = obj; 14369 this._isSelected = state; 14370 } 14371 14372 /** 14373 * Whether object is selected or not 14374 * @returns {boolean} State of selecting 14375 */ 14376 14377 }, { 14378 key: 'isSelected', 14379 value: function isSelected() { 14380 return this._isSelected; 14381 } 14382 14383 /** 14384 * Get current selected text object 14385 * @returns {fabric.Text} Current selected text object 14386 */ 14387 14388 }, { 14389 key: 'getSelectedObj', 14390 value: function getSelectedObj() { 14391 return this._selectedObj; 14392 } 14393 14394 /** 14395 * Set ratio value of canvas 14396 */ 14397 14398 }, { 14399 key: 'setCanvasRatio', 14400 value: function setCanvasRatio() { 14401 var canvasElement = this.getCanvasElement(); 14402 var cssWidth = parseInt(canvasElement.style.maxWidth, 10); 14403 var originWidth = canvasElement.width; 14404 var ratio = originWidth / cssWidth; 14405 14406 this._ratio = ratio; 14407 } 14408 14409 /** 14410 * Get ratio value of canvas 14411 * @returns {number} Ratio value 14412 */ 14413 14414 }, { 14415 key: 'getCanvasRatio', 14416 value: function getCanvasRatio() { 14417 return this._ratio; 14418 } 14419 14420 /** 14421 * Set initial position on canvas image 14422 * @param {{x: number, y: number}} [position] - Selected position 14423 * @private 14424 */ 14425 14426 }, { 14427 key: '_setInitPos', 14428 value: function _setInitPos(position) { 14429 position = position || this.getCanvasImage().getCenterPoint(); 14430 14431 this._defaultStyles.left = position.x; 14432 this._defaultStyles.top = position.y; 14433 } 14434 14435 /** 14436 * Create textarea element on canvas container 14437 * @private 14438 */ 14439 14440 }, { 14441 key: '_createTextarea', 14442 value: function _createTextarea() { 14443 var container = this.getCanvasElement().parentNode; 14444 var textarea = document.createElement('textarea'); 14445 14446 textarea.className = TEXTAREA_CLASSNAME; 14447 textarea.setAttribute('style', TEXTAREA_STYLES); 14448 textarea.setAttribute('wrap', 'off'); 14449 14450 container.appendChild(textarea); 14451 14452 this._textarea = textarea; 14453 14454 this._listeners = _tuiCodeSnippet2.default.extend(this._listeners, { 14455 input: this._onInput.bind(this), 14456 keydown: this._onKeyDown.bind(this), 14457 blur: this._onBlur.bind(this), 14458 scroll: this._onScroll.bind(this) 14459 }); 14460 14461 if (browser.msie && browser.version === 9) { 14462 _fabric2.default.util.addListener(textarea, 'keydown', this._listeners.keydown); 14463 } else { 14464 _fabric2.default.util.addListener(textarea, 'input', this._listeners.input); 14465 } 14466 _fabric2.default.util.addListener(textarea, 'blur', this._listeners.blur); 14467 _fabric2.default.util.addListener(textarea, 'scroll', this._listeners.scroll); 14468 } 14469 14470 /** 14471 * Remove textarea element on canvas container 14472 * @private 14473 */ 14474 14475 }, { 14476 key: '_removeTextarea', 14477 value: function _removeTextarea() { 14478 var container = this.getCanvasElement().parentNode; 14479 var textarea = container.querySelector('textarea'); 14480 14481 container.removeChild(textarea); 14482 14483 this._textarea = null; 14484 14485 if (browser.msie && browser.version < 10) { 14486 _fabric2.default.util.removeListener(textarea, 'keydown', this._listeners.keydown); 14487 } else { 14488 _fabric2.default.util.removeListener(textarea, 'input', this._listeners.input); 14489 } 14490 _fabric2.default.util.removeListener(textarea, 'blur', this._listeners.blur); 14491 _fabric2.default.util.removeListener(textarea, 'scroll', this._listeners.scroll); 14492 } 14493 14494 /** 14495 * Input event handler 14496 * @private 14497 */ 14498 14499 }, { 14500 key: '_onInput', 14501 value: function _onInput() { 14502 var ratio = this.getCanvasRatio(); 14503 var obj = this._editingObj; 14504 var textareaStyle = this._textarea.style; 14505 14506 textareaStyle.width = Math.ceil(obj.getWidth() / ratio) + 'px';
14507 textareaStyle.height = Math.ceil(obj.getHeight() / ratio) + 'px'; 14508 } 14509 14510 /** 14511 * Keydown event handler 14512 * @private 14513 */ 14514 14515 }, { 14516 key: '_onKeyDown', 14517 value: function _onKeyDown() { 14518 var _this5 = this; 14519 14520 var ratio = this.getCanvasRatio(); 14521 var obj = this._editingObj; 14522 var textareaStyle = this._textarea.style; 14523 14524 setTimeout(function () { 14525 obj.setText(_this5._textarea.value); 14526 14527 textareaStyle.width = Math.ceil(obj.getWidth() / ratio) + 'px'; 14528 textareaStyle.height = Math.ceil(obj.getHeight() / ratio) + 'px'; 14529 }, 0); 14530 } 14531 14532 /** 14533 * Blur event handler 14534 * @private 14535 */ 14536 14537 }, { 14538 key: '_onBlur', 14539 value: function _onBlur() { 14540 var ratio = this.getCanvasRatio(); 14541 var editingObj = this._editingObj; 14542 var editingObjInfos = this._editingObjInfos; 14543 var textContent = this._textarea.value; 14544 var transWidth = editingObj.getWidth() / ratio - editingObjInfos.width / ratio; 14545 var transHeight = editingObj.getHeight() / ratio - editingObjInfos.height / ratio; 14546 14547 if (ratio === 1) { 14548 transWidth /= 2; 14549 transHeight /= 2; 14550 } 14551 14552 this._textarea.style.display = 'none'; 14553 14554 editingObj.set({ 14555 left: editingObjInfos.left + transWidth, 14556 top: editingObjInfos.top + transHeight 14557 }); 14558 14559 if (textContent.length) { 14560 this.getCanvas().add(editingObj); 14561 14562 var params = { 14563 id: _tuiCodeSnippet2.default.stamp(editingObj), 14564 type: editingObj.type, 14565 text: textContent 14566 }; 14567 14568 this.fire(events.TEXT_CHANGED, params); 14569 } 14570 } 14571 14572 /** 14573 * Scroll event handler 14574 * @private 14575 */ 14576 14577 }, { 14578 key: '_onScroll', 14579 value: function _onScroll() { 14580 this._textarea.scrollLeft = 0; 14581 this._textarea.scrollTop = 0; 14582 } 14583 14584 /** 14585 * Fabric scaling event handler 14586 * @param {fabric.Event} fEvent - Current scaling event on selected object 14587 * @private 14588 */ 14589 14590 }, { 14591 key: '_onFabricScaling', 14592 value: function _onFabricScaling(fEvent) { 14593 var obj = fEvent.target; 14594 var scalingSize = obj.getFontSize() * obj.getScaleY(); 14595 14596 obj.setFontSize(scalingSize); 14597 obj.setScaleX(1); 14598 obj.setScaleY(1); 14599 } 14600 14601 /** 14602 * onSelectClear handler in fabric canvas 14603 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 14604 * @private 14605 */ 14606 14607 }, { 14608 key: '_onFabricSelectClear', 14609 value: function _onFabricSelectClear(fEvent) { 14610 var obj = this.getSelectedObj(); 14611 14612 this.isPrevEditing = true; 14613 14614 this.setSelectedInfo(fEvent.target, false); 14615 14616 if (obj) { 14617 // obj is empty object at initial time, will be set fabric object 14618 if (obj.text === '') { 14619 obj.remove(); 14620 } 14621 } 14622 } 14623 14624 /** 14625 * onSelect handler in fabric canvas 14626 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event 14627 * @private 14628 */ 14629 14630 }, { 14631 key: '_onFabricSelect', 14632 value: function _onFabricSelect(fEvent) { 14633 this.isPrevEditing = true; 14634 14635 this.setSelectedInfo(fEvent.target, true); 14636 } 14637 14638 /** 14639 * Fabric 'mousedown' event handler 14640 * @param {fabric.Event} fEvent - Current mousedown event on selected object 14641 * @private 14642 */ 14643 14644 }, { 14645 key: '_onFabricMouseDown', 14646 value: function _onFabricMouseDown(fEvent) { 14647 var obj = fEvent.target; 14648 14649 if (obj && !obj.isType('text')) { 14650 return; 14651 } 14652 14653 if (this.isPrevEditing) { 14654 this.isPrevEditing = false;
14655 14656 return; 14657 } 14658 14659 this._fireAddText(fEvent); 14660 } 14661 14662 /** 14663 * Fire 'addText' event if object is not selected. 14664 * @param {fabric.Event} fEvent - Current mousedown event on selected object 14665 * @private 14666 */ 14667 14668 }, { 14669 key: '_fireAddText', 14670 value: function _fireAddText(fEvent) { 14671 var obj = fEvent.target; 14672 var e = fEvent.e || {}; 14673 var originPointer = this.getCanvas().getPointer(e); 14674 14675 if (!obj) { 14676 this.fire(events.ADD_TEXT, { 14677 originPosition: { 14678 x: originPointer.x, 14679 y: originPointer.y 14680 }, 14681 clientPosition: { 14682 x: e.clientX || 0, 14683 y: e.clientY || 0 14684 } 14685 }); 14686 } 14687 } 14688 14689 /** 14690 * Fabric mouseup event handler 14691 * @param {fabric.Event} fEvent - Current mousedown event on selected object 14692 * @private 14693 */ 14694 14695 }, { 14696 key: '_onFabricMouseUp', 14697 value: function _onFabricMouseUp(fEvent) { 14698 var newClickTime = new Date().getTime(); 14699 14700 if (this._isDoubleClick(newClickTime)) { 14701 if (!this.useItext) { 14702 this._changeToEditingMode(fEvent.target); 14703 } 14704 this.fire(events.TEXT_EDITING); // fire editing text event 14705 } 14706 14707 this._lastClickTime = newClickTime; 14708 } 14709 14710 /** 14711 * Get state of firing double click event 14712 * @param {Date} newClickTime - Current clicked time 14713 * @returns {boolean} Whether double clicked or not 14714 * @private 14715 */ 14716 14717 }, { 14718 key: '_isDoubleClick', 14719 value: function _isDoubleClick(newClickTime) { 14720 return newClickTime - this._lastClickTime < DBCLICK_TIME; 14721 } 14722 14723 /** 14724 * Change state of text object for editing 14725 * @param {fabric.Text} obj - Text object fired event 14726 * @private 14727 */ 14728 14729 }, { 14730 key: '_changeToEditingMode', 14731 value: function _changeToEditingMode(obj) { 14732 var ratio = this.getCanvasRatio(); 14733 var textareaStyle = this._textarea.style; 14734 14735 this.isPrevEditing = true; 14736 14737 obj.remove(); 14738 14739 this._editingObj = obj; 14740 this._textarea.value = obj.getText(); 14741 14742 this._editingObjInfos = { 14743 left: this._editingObj.getLeft(), 14744 top: this._editingObj.getTop(), 14745 width: this._editingObj.getWidth(), 14746 height: this._editingObj.getHeight() 14747 }; 14748 14749 textareaStyle.display = 'block'; 14750 textareaStyle.left = obj.oCoords.tl.x / ratio + 'px'; 14751 textareaStyle.top = obj.oCoords.tl.y / ratio + 'px'; 14752 textareaStyle.width = Math.ceil(obj.getWidth() / ratio) + 'px'; 14753 textareaStyle.height = Math.ceil(obj.getHeight() / ratio) + 'px'; 14754 textareaStyle.transform = 'rotate(' + obj.getAngle() + 'deg)'; 14755 textareaStyle.color = obj.getFill(); 14756 14757 textareaStyle['font-size'] = obj.getFontSize() / ratio + 'px'; 14758 textareaStyle['font-family'] = obj.getFontFamily(); 14759 textareaStyle['font-style'] = obj.getFontStyle(); 14760 textareaStyle['font-weight'] = obj.getFontWeight(); 14761 textareaStyle['text-align'] = obj.getTextAlign(); 14762 textareaStyle['line-height'] = obj.getLineHeight() + EXTRA_PIXEL_LINEHEIGHT; 14763 textareaStyle['transform-origin'] = 'left top'; 14764 14765 this._textarea.focus(); 14766 } 14767 }]); 14768 14769 return Text; 14770 }(_component2.default); 14771 14772 module.exports = Text; 14773 14774/***/ }), 14775/* 116 */ 14776/***/ (function(module, exports, __webpack_require__) { 14777 14778 'use strict'; 14779 14780 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; }; }(); 14781 14782 var _fabric = __webpack_require__(106); 14783 14784 var _fabric2 = _interopRequireDefault(_fabric); 14785 14786 var _tuiCodeSnippet = __webpack_require__(3); 14787 14788 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 14789 14790 var _promise = __webpack_require__(4); 14791 14792 var _promise2 = _interopRequireDefault(_promise); 14793 14794 var _component = __webpack_require__(108); 14795 14796 var _component2 = _interopRequireDefault(_component); 14797 14798 var _consts = __webpack_require__(73); 14799 14800 var _consts2 = _interopRequireDefault(_consts); 14801 14802 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 14803 14804 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 14805 14806 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; } 14807 14808 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, { c
14808onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 14809 * @author NHN Ent. FE Development Team <[email protected]> 14810 * @fileoverview Add icon module 14811 */ 14812 14813 14814 var events = _consts2.default.eventNames; 14815 var rejectMessages = _consts2.default.rejectMessages; 14816 14817 14818 var pathMap = { 14819 arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z', 14820 cancel: 'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' + 'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z' 14821 }; 14822 14823 /** 14824 * Icon 14825 * @class Icon 14826 * @param {Graphics} graphics - Graphics instance 14827 * @extends {Component} 14828 * @ignore 14829 */ 14830 14831 var Icon = function (_Component) { 14832 _inherits(Icon, _Component); 14833 14834 function Icon(graphics) { 14835 _classCallCheck(this, Icon); 14836 14837 /** 14838 * Default icon color 14839 * @type {string} 14840 */ 14841 var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, _consts2.default.componentNames.ICON, graphics)); 14842 14843 _this._oColor = '#000000'; 14844 14845 /** 14846 * Path value of each icon type 14847 * @type {Object} 14848 */ 14849 _this._pathMap = pathMap; 14850 14851 /** 14852 * Option to add icon to drag. 14853 * @type {boolean} 14854 */ 14855 _this.useDragAddIcon = graphics.useDragAddIcon; 14856 return _this; 14857 } 14858 14859 /** 14860 * Add icon 14861 * @param {string} type - Icon type 14862 * @param {Object} options - Icon options 14863 * @param {string} [options.fill] - Icon foreground color 14864 * @param {string} [options.left] - Icon x position 14865 * @param {string} [options.top] - Icon y position 14866 * @returns {Promise} 14867 */ 14868 14869 14870 _createClass(Icon, [{ 14871 key: 'add', 14872 value: function add(type, options) { 14873 var _this2 = this; 14874 14875 return new _promise2.default(function (resolve, reject) { 14876 var canvas = _this2.getCanvas(); 14877 var path = _this2._pathMap[type]; 14878 var selectionStyle = _consts2.default.fObjectOptions.SELECTION_STYLE; 14879 var registerdIcon = Object.keys(_consts2.default.defaultIconPath).indexOf(type) >= 0; 14880 var useDragAddIcon = _this2.useDragAddIcon && registerdIcon; 14881 var icon = path ? _this2._createIcon(path) : null; 14882 14883 if (!icon) { 14884 reject(rejectMessages.invalidParameters); 14885 } 14886 14887 icon.set(_tuiCodeSnippet2.default.extend({ 14888 type: 'icon', 14889 fill: _this2._oColor 14890 }, selectionStyle, options, _this2.graphics.controlStyle)); 14891 14892 canvas.add(icon).setActiveObject(icon); 14893 14894 if (useDragAddIcon) { 14895 _this2._addWithDragEvent(canvas); 14896 } 14897 14898 resolve(_this2.graphics.createObjectProperties(icon)); 14899 }); 14900 } 14901 14902 /** 14903 * Added icon drag event 14904 * @param {fabric.Canvas} canvas - Canvas instance 14905 * @private 14906 */ 14907 14908 }, { 14909 key: '_addWithDragEvent', 14910 value: function _addWithDragEvent(canvas) { 14911 var _this3 = this; 14912 14913 canvas.on({ 14914 'mouse:move': function mouseMove(fEvent) { 14915 canvas.selection = false;
14916 14917 _this3.fire(events.ICON_CREATE_RESIZE, { 14918 moveOriginPointer: canvas.getPointer(fEvent.e) 14919 }); 14920 }, 14921 'mouse:up': function mouseUp(fEvent) { 14922 _this3.fire(events.ICON_CREATE_END, { 14923 moveOriginPointer: canvas.getPointer(fEvent.e) 14924 }); 14925 14926 canvas.defaultCursor = 'default'; 14927 canvas.off('mouse:up'); 14928 canvas.off('mouse:move'); 14929 canvas.selection = true; 14930 } 14931 }); 14932 } 14933 14934 /** 14935 * Register icon paths 14936 * @param {{key: string, value: string}} pathInfos - Path infos 14937 */ 14938 14939 }, { 14940 key: 'registerPaths', 14941 value: function registerPaths(pathInfos) { 14942 var _this4 = this; 14943 14944 _tuiCodeSnippet2.default.forEach(pathInfos, function (path, type) { 14945 _this4._pathMap[type] = path; 14946 }, this); 14947 } 14948 14949 /** 14950 * Set icon object color 14951 * @param {string} color - Color to set 14952 * @param {fabric.Path}[obj] - Current activated path object 14953 */ 14954 14955 }, { 14956 key: 'setColor', 14957 value: function setColor(color, obj) { 14958 this._oColor = color; 14959 14960 if (obj && obj.get('type') === 'icon') { 14961 obj.setFill(this._oColor); 14962 this.getCanvas().renderAll(); 14963 } 14964 } 14965 14966 /** 14967 * Get icon color 14968 * @param {fabric.Path}[obj] - Current activated path object 14969 * @returns {string} color 14970 */ 14971 14972 }, { 14973 key: 'getColor', 14974 value: function getColor(obj) { 14975 return obj.fill; 14976 } 14977 14978 /** 14979 * Create icon object 14980 * @param {string} path - Path value to create icon 14981 * @returns {fabric.Path} Path object 14982 */ 14983 14984 }, { 14985 key: '_createIcon', 14986 value: function _createIcon(path) { 14987 return new _fabric2.default.Path(path); 14988 } 14989 }]); 14990 14991 return Icon; 14992 }(_component2.default); 14993 14994 module.exports = Icon; 14995 14996/***/ }), 14997/* 117 */ 14998/***/ (function(module, exports, __webpack_require__) { 14999 15000 'use strict'; 15001 15002 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; }; }(); 15003 15004 var _tuiCodeSnippet = __webpack_require__(3); 15005 15006 var _promise = __webpack_require__(4); 15007 15008 var _promise2 = _interopRequireDefault(_promise); 15009 15010 var _fabric = __webpack_require__(106); 15011 15012 var _fabric2 = _interopRequireDefault(_fabric); 15013 15014 var _component = __webpack_require__(108); 15015 15016 var _component2 = _interopRequireDefault(_component); 15017 15018 var _mask = __webpack_require__(118); 15019 15020 var _mask2 = _interopRequireDefault(_mask); 15021 15022 var _consts = __webpack_require__(73); 15023 15024 var _consts2 = _interopRequireDefault(_consts); 15025 15026 var _blur = __webpack_require__(119); 15027 15028 var _blur2 = _interopRequireDefault(_blur); 15029 15030 var _sharpen = __webpack_require__(120); 15031 15032 var _sharpen2 = _interopRequireDefault(_sharpen); 15033 15034 var _emboss = __webpack_require__(121); 15035 15036 var _emboss2 = _interopRequireDefault(_emboss); 15037 15038 var _colorFilter = __webpack_require__(122); 15039 15040 var _colorFilter2 = _interopRequireDefault(_colorFilter); 15041 15042 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15043 15044 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 15045 15046 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; } 15047 15048 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, { c
15048onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 15049 * @author NHN Ent. FE Development Team <[email protected]> 15050 * @fileoverview Add filter module 15051 */ 15052 15053 15054 var rejectMessages = _consts2.default.rejectMessages; 15055 var filters = _fabric2.default.Image.filters; 15056 15057 filters.Mask = _mask2.default; 15058 filters.Blur = _blur2.default; 15059 filters.Sharpen = _sharpen2.default; 15060 filters.Emboss = _emboss2.default; 15061 filters.ColorFilter = _colorFilter2.default; 15062 15063 /** 15064 * Filter 15065 * @class Filter 15066 * @param {Graphics} graphics - Graphics instance 15067 * @extends {Component} 15068 * @ignore 15069 */ 15070 15071 var Filter = function (_Component) { 15072 _inherits(Filter, _Component); 15073 15074 function Filter(graphics) { 15075 _classCallCheck(this, Filter); 15076 15077 return _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, _consts2.default.componentNames.FILTER, graphics)); 15078 } 15079 15080 /** 15081 * Add filter to source image (a specific filter is added on fabric.js) 15082 * @param {string} type - Filter type 15083 * @param {Object} [options] - Options of filter 15084 * @returns {Promise} 15085 */ 15086 15087 15088 _createClass(Filter, [{ 15089 key: 'add', 15090 value: function add(type, options) { 15091 var _this2 = this; 15092 15093 return new _promise2.default(function (resolve, reject) { 15094 var sourceImg = _this2._getSourceImage(); 15095 var canvas = _this2.getCanvas(); 15096 var imgFilter = _this2._getFilter(sourceImg, type); 15097 if (!imgFilter) { 15098 imgFilter = _this2._createFilter(sourceImg, type, options); 15099 } 15100 15101 if (!imgFilter) { 15102 reject(rejectMessages.invalidParameters); 15103 } 15104 15105 _this2._changeFilterValues(imgFilter, options); 15106 15107 _this2._apply(sourceImg, function () { 15108 canvas.renderAll(); 15109 resolve({ 15110 type: type, 15111 action: 'add' 15112 }); 15113 }); 15114 }); 15115 } 15116 15117 /** 15118 * Remove filter to source image 15119 * @param {string} type - Filter type 15120 * @returns {Promise} 15121 */ 15122 15123 }, { 15124 key: 'remove', 15125 value: function remove(type) { 15126 var _this3 = this; 15127 15128 return new _promise2.default(function (resolve, reject) {
15129 var sourceImg = _this3._getSourceImage(); 15130 var canvas = _this3.getCanvas(); 15131 15132 if (!sourceImg.filters.length) { 15133 reject(rejectMessages.unsupportedOperation); 15134 } 15135 15136 _this3._removeFilter(sourceImg, type); 15137 15138 _this3._apply(sourceImg, function () { 15139 canvas.renderAll(); 15140 resolve({ 15141 type: type, 15142 action: 'remove' 15143 }); 15144 }); 15145 }); 15146 } 15147 15148 /** 15149 * Whether this has the filter or not 15150 * @param {string} type - Filter type 15151 * @returns {boolean} true if it has the filter 15152 */ 15153 15154 }, { 15155 key: 'hasFilter', 15156 value: function hasFilter(type) { 15157 return !!this._getFilter(this._getSourceImage(), type); 15158 } 15159 15160 /** 15161 * Get a filter options 15162 * @param {string} type - Filter type 15163 * @returns {Object} filter options or null if there is no that filter 15164 */ 15165 15166 }, { 15167 key: 'getOptions', 15168 value: function getOptions(type) { 15169 var sourceImg = this._getSourceImage(); 15170 var imgFilter = this._getFilter(sourceImg, type); 15171 if (!imgFilter) { 15172 return null; 15173 } 15174 15175 return (0, _tuiCodeSnippet.extend)({}, imgFilter.options); 15176 } 15177 15178 /** 15179 * Change filter values 15180 * @param {Object} imgFilter object of filter 15181 * @param {Object} options object 15182 * @private 15183 */ 15184 15185 }, { 15186 key: '_changeFilterValues', 15187 value: function _changeFilterValues(imgFilter, options) { 15188 (0, _tuiCodeSnippet.forEach)(options, function (value, key) { 15189 if (!(0, _tuiCodeSnippet.isUndefined)(imgFilter[key])) { 15190 imgFilter[key] = value; 15191 } 15192 }); 15193 (0, _tuiCodeSnippet.forEach)(imgFilter.options, function (value, key) { 15194 if (!(0, _tuiCodeSnippet.isUndefined)(options[key])) { 15195 imgFilter.options[key] = options[key]; 15196 } 15197 }); 15198 } 15199 15200 /** 15201 * Apply filter 15202 * @param {fabric.Image} sourceImg - Source image to apply filter 15203 * @param {function} callback - Executed function after applying filter 15204 * @private 15205 */ 15206 15207 }, { 15208 key: '_apply', 15209 value: function _apply(sourceImg, callback) { 15210 sourceImg.applyFilters(callback); 15211 } 15212 15213 /** 15214 * Get source image on canvas 15215 * @returns {fabric.Image} Current source image on canvas 15216 * @private 15217 */ 15218 15219 }, { 15220 key: '_getSourceImage', 15221 value: function _getSourceImage() { 15222 return this.getCanvasImage(); 15223 } 15224 15225 /** 15226 * Create filter instance 15227 * @param {fabric.Image} sourceImg - Source image to apply filter 15228 * @param {string} type - Filter type 15229 * @param {Object} [options] - Options of filter 15230 * @returns {Object} Fabric object of filter 15231 * @private 15232 */ 15233 15234 }, { 15235 key: '_createFilter', 15236 value: function _createFilter(sourceImg, type, options) { 15237 var filterObj = void 0; 15238 // capitalize first letter for matching with fabric image filter name 15239 var fabricType = this._getFabricFilterType(type); 15240 var ImageFilter = _fabric2.default.Image.filters[fabricType]; 15241 if (ImageFilter) { 15242 filterObj = new ImageFilter(options); 15243 filterObj.options = options; 15244 sourceImg.filters.push(filterObj); 15245 } 15246 15247 return filterObj; 15248 } 15249 15250 /** 15251 * Get applied filter instance 15252 * @param {fabric.Image} sourceImg - Source image to apply filter 15253 * @param {string} type - Filter type 15254 * @returns {Object} Fabric object of filter 15255 * @private 15256 */ 15257 15258 }, { 15259 key: '_getFilter', 15260 value: function _getFilter(sourceImg, type) { 15261 var imgFilter = null; 15262 15263 if (sourceImg) { 15264 var fabricType = this._getFabricFilterType(type); 15265 var length = sourceImg.filters.length; 15266 15267 var item = void 0, 15268 i = void 0; 15269 15270 for (i = 0; i < length; i += 1) { 15271 item = sourceImg.filters[i]; 15272 if (item.type === fabricType) { 15273 imgFilter = item; 15274 break; 15275 } 15276 } 15277 } 15278 15279 return imgFilter; 15280 } 15281 15282 /** 15283 * Remove applied filter instance 15284 * @param {fabric.Image} sourceImg - Source image to apply filter 15285 * @param {string} type - Filter type 15286 * @private 15287 */ 15288 15289 }, { 15290 key: '_removeFilter', 15291 value: function _removeFilter(sourceImg, type) { 15292 var fabricType = this._getFabricFilterType(type); 15293 sourceImg.filters = (0, _tuiCodeSnippet.filter)(sourceImg.filters, function (value) { 15294 return value.type !== fabricType; 15295 }); 15296 } 15297 15298 /** 15299 * Change filter class name to fabric's, especially capitalizing first letter 15300 * @param {string} type - Filter type 15301 * @example 15302 * 'grayscale' -> 'Grayscale' 15303 * @returns {string} Fabric filter class name 15304 */ 15305 15306 }, { 15307 key: '_getFabricFilterType', 15308 value: function _getFabricFilterType(type) { 15309 return type.charAt(0).toUpperCase() + type.slice(1); 15310 } 15311 }]); 15312 15313 return Filter; 15314 }(_component2.default); 15315 15316 module.exports = Filter; 15317 15318/***/ }), 15319/* 118 */ 15320/***/ (function(module, exports, __webpack_require__) { 15321 15322 'use strict'; 15323 15324 var _fabric = __webpack_require__(106); 15325 15326 var _fabric2 = _interopRequireDefault(_fabric); 15327 15328 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15329 15330 /** 15331 * Mask object 15332 * @class Mask 15333 * @extends {fabric.Image.filters.Mask} 15334 * @ignore 15335 */ 15336 var Mask = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Mask, /** @lends Mask.prototype */{ 15337 /** 15338 * Apply filter to canvas element 15339 * @param {Object} canvasEl - Canvas element to apply filter 15340 * @override 15341 */ 15342 applyTo: function applyTo(canvasEl) { 15343 if (!this.mask) { 15344 return; 15345 } 15346 15347 var width = canvasEl.width, 15348 height = canvasEl.height; 15349 15350 var maskCanvasEl = this._createCanvasOfMask(width, height); 15351 var ctx = canvasEl.getContext('2d'); 15352 var maskCtx = maskCanvasEl.getContext('2d'); 15353 var imageData = ctx.getImageData(0, 0, width, height); 15354 15355 this._drawMask(maskCtx, canvasEl, ctx); 15356 this._mapData(maskCtx, imageData, width, height); 15357 15358 ctx.putImageData(imageData, 0, 0); 15359 }, 15360 15361 15362 /** 15363 * Create canvas of mask image 15364 * @param {number} width - Width of main canvas 15365 * @param {number} height - Height of main canvas 15366 * @returns {HTMLElement} Canvas element 15367 * @private 15368 */ 15369 _createCanvasOfMask: function _createCanvasOfMask(width, height) { 15370 var maskCanvasEl = _fabric2.default.util.createCanvasElement(); 15371 15372 maskCanvasEl.width = width; 15373 maskCanvasEl.height = height; 15374 15375 return maskCanvasEl; 15376 }, 15377 15378 15379 /** 15380 * Draw mask image on canvas element 15381 * @param {Object} maskCtx - Context of mask canvas 15382 * @private 15383 */ 15384 _drawMask: function _drawMask(maskCtx) { 15385 var mask = this.mask; 15386 15387 var maskImg = mask.getElement(); 15388 15389 var left = mask.getLeft(); 15390 var top = mask.getTop(); 15391 var angle = mask.getAngle(); 15392 15393 maskCtx.save(); 15394 maskCtx.translate(left, top); 15395 maskCtx.rotate(angle * Math.PI / 180); 15396 maskCtx.scale(mask.scaleX, mask.scaleY); 15397 maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2);
15398 maskCtx.restore(); 15399 }, 15400 15401 15402 /** 15403 * Map mask image data to source image data 15404 * @param {Object} maskCtx - Context of mask canvas 15405 * @param {Object} imageData - Data of source image 15406 * @param {number} width - Width of main canvas 15407 * @param {number} height - Height of main canvas 15408 * @private 15409 */ 15410 _mapData: function _mapData(maskCtx, imageData, width, height) { 15411 var sourceData = imageData.data; 15412 var maskData = maskCtx.getImageData(0, 0, width, height).data; 15413 var channel = this.channel; 15414 15415 var len = imageData.width * imageData.height * 4; 15416 15417 for (var i = 0; i < len; i += 4) { 15418 sourceData[i + 3] = maskData[i + channel]; // adjust value of alpha data 15419 } 15420 } 15421 }); /** 15422 * @author NHN Ent. FE Development Team <[email protected]> 15423 * @fileoverview Mask extending fabric.Image.filters.Mask 15424 */ 15425 15426 15427 module.exports = Mask; 15428 15429/***/ }), 15430/* 119 */ 15431/***/ (function(module, exports, __webpack_require__) { 15432 15433 'use strict'; 15434 15435 var _fabric = __webpack_require__(106); 15436 15437 var _fabric2 = _interopRequireDefault(_fabric); 15438 15439 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15440 15441 /** 15442 * Blur object 15443 * @class Blur 15444 * @extends {fabric.Image.filters.Convolute} 15445 * @ignore 15446 */ 15447 var Blur = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Convolute, /** @lends Convolute.prototype */{ 15448 /** 15449 * Filter type 15450 * @param {String} type 15451 * @default 15452 */ 15453 type: 'Blur', 15454 15455 /** 15456 * constructor 15457 * @override 15458 */ 15459 initialize: function initialize() { 15460 var matrix = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9]; 15461 this.matrix = matrix; 15462 } 15463 }); /** 15464 * @author NHN Ent. FE Development Team <[email protected]> 15465 * @fileoverview Blur extending fabric.Image.filters.Convolute 15466 */ 15467 15468 15469 module.exports = Blur; 15470 15471/***/ }), 15472/* 120 */ 15473/***/ (function(module, exports, __webpack_require__) { 15474 15475 'use strict'; 15476 15477 var _fabric = __webpack_require__(106); 15478 15479 var _fabric2 = _interopRequireDefault(_fabric); 15480 15481 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15482 15483 /** 15484 * Sharpen object 15485 * @class Sharpen 15486 * @extends {fabric.Image.filters.Convolute} 15487 * @ignore 15488 */ 15489 var Sharpen = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Convolute, /** @lends Convolute.prototype */{ 15490 /** 15491 * Filter type 15492 * @param {String} type 15493 * @default 15494 */ 15495 type: 'Sharpen', 15496 15497 /** 15498 * constructor 15499 * @override 15500 */ 15501 initialize: function initialize() { 15502 var matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0]; 15503 this.matrix = matrix; 15504 } 15505 }); /** 15506 * @author NHN Ent. FE Development Team <[email protected]> 15507 * @fileoverview Sharpen extending fabric.Image.filters.Convolute 15508 */ 15509 15510 15511 module.exports = Sharpen; 15512 15513/***/ }), 15514/* 121 */ 15515/***/ (function(module, exports, __webpack_require__) { 15516 15517 'use strict'; 15518 15519 var _fabric = __webpack_require__(106); 15520 15521 var _fabric2 = _interopRequireDefault(_fabric); 15522 15523 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15524 15525 /** 15526 * Emboss object 15527 * @class Emboss 15528 * @extends {fabric.Image.filters.Convolute} 15529 * @ignore 15530 */ 15531 var Emboss = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Convolute, /** @lends Convolute.prototype */{ 15532 /** 15533 * Filter type 15534 * @param {String} type 15535 * @default 15536 */ 15537 type: 'Emboss', 15538 15539 /** 15540 * constructor 15541 * @override 15542 */ 15543 initialize: function initialize() { 15544 var matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1]; 15545 this.matrix = matrix; 15546 } 15547 }); /** 15548 * @author NHN Ent. FE Development Team <[email protected]> 15549 * @fileoverview Emboss extending fabric.Image.filters.Convolute 15550 */ 15551 15552 15553 module.exports = Emboss; 15554 15555/***/ }), 15556/* 122 */ 15557/***/ (function(module, exports, __webpack_require__) { 15558 15559 'use strict'; 15560 15561 var _fabric = __webpack_require__(106); 15562 15563 var _fabric2 = _interopRequireDefault(_fabric); 15564 15565 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15566 15567 /** 15568 * ColorFilter object 15569 * @class ColorFilter 15570 * @extends {fabric.Image.filters.BaseFilter} 15571 * @ignore 15572 */ 15573 var ColorFilter = _fabric2.default.util.createClass(_fabric2.default.Image.filters.BaseFilter, /** @lends BaseFilter.prototype */{ 15574 /** 15575 * Filter type 15576 * @param {String} type 15577 * @default 15578 */ 15579 type: 'ColorFilter', 15580 15581 /** 15582 * Constructor 15583 * @member fabric.Image.filters.ColorFilter.prototype 15584 * @param {Object} [options] Options object 15585 * @param {Number} [options.color='#FFFFFF'] Value of color (0...255) 15586 * @param {Number} [options.threshold=45] Value of threshold (0...255) 15587 * @override 15588 */ 15589 initialize: function initialize(options) { 15590 if (!options) { 15591 options = {}; 15592 } 15593 this.color = options.color || '#FFFFFF'; 15594 this.threshold = options.threshold || 45; 15595 this.x = options.x || null; 15596 this.y = options.y || null; 15597 }, 15598 15599 15600 /** 15601 * Applies filter to canvas element 15602 * @param {Object} canvasEl Canvas element to apply filter to 15603 */ 15604 applyTo: function applyTo(canvasEl) { 15605 // eslint-disable-line 15606 var context = canvasEl.getContext('2d'); 15607 var imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height); 15608 var data = imageData.data; 15609 var threshold = this.threshold; 15610 15611 var filterColor = _fabric2.default.Color.sourceFromHex(this.color); 15612 var i = void 0, 15613 len = void 0; 15614 15615 if (this.x && this.y) { 15616 filterColor = this._getColor(imageData, this.x, this.y); 15617 } 15618 15619 for (i = 0, len = data.length; i < len; i += 4) { 15620 if (this._isOutsideThreshold(data[i], filterColor[0], threshold) || this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) || this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)) { 15621 continue; 15622 } 15623 data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0; 15624 } 15625 context.putImageData(imageData, 0, 0); 15626 }, 15627 15628 15629 /**
15630 * Check color if it is within threshold 15631 * @param {Number} color1 source color 15632 * @param {Number} color2 filtering color 15633 * @param {Number} threshold threshold 15634 * @returns {boolean} true if within threshold or false 15635 */ 15636 _isOutsideThreshold: function _isOutsideThreshold(color1, color2, threshold) { 15637 var diff = color1 - color2; 15638 15639 return Math.abs(diff) > threshold; 15640 }, 15641 15642 15643 /** 15644 * Get color at (x, y) 15645 * @param {Object} imageData of canvas 15646 * @param {Number} x left position 15647 * @param {Number} y top position 15648 * @returns {Array} color array 15649 */ 15650 _getColor: function _getColor(imageData, x, y) { 15651 var color = [0, 0, 0, 0]; 15652 var data = imageData.data, 15653 width = imageData.width; 15654 15655 var bytes = 4; 15656 var position = (width * y + x) * bytes; 15657 15658 color[0] = data[position]; 15659 color[1] = data[position + 1]; 15660 color[2] = data[position + 2]; 15661 color[3] = data[position + 3]; 15662 15663 return color; 15664 } 15665 }); /** 15666 * @author NHN Ent. FE Development Team <[email protected]> 15667 * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter 15668 */ 15669 15670 15671 module.exports = ColorFilter; 15672 15673/***/ }), 15674/* 123 */ 15675/***/ (function(module, exports, __webpack_require__) { 15676 15677 'use strict'; 15678 15679 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; }; }(); 15680 15681 var _fabric = __webpack_require__(106); 15682 15683 var _fabric2 = _interopRequireDefault(_fabric); 15684 15685 var _promise = __webpack_require__(4); 15686 15687 var _promise2 = _interopRequireDefault(_promise); 15688 15689 var _component = __webpack_require__(108); 15690 15691 var _component2 = _interopRequireDefault(_component); 15692 15693 var _consts = __webpack_require__(73); 15694 15695 var _consts2 = _interopRequireDefault(_consts); 15696 15697 var _shapeResizeHelper = __webpack_require__(124); 15698 15699 var _shapeResizeHelper2 = _interopRequireDefault(_shapeResizeHelper); 15700 15701 var _tuiCodeSnippet = __webpack_require__(3); 15702 15703 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 15704 15705 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 15706 15707 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; } 15708 15709 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; } /** 15710 * @author NHN Ent. FE Development Team <[email protected]> 15711 * @fileoverview Shape component 15712 */ 15713 15714 15715 var rejectMessages = _consts2.default.rejectMessages, 15716 eventNames = _consts2.default.eventNames; 15717 15718 var KEY_CODES = _consts2.default.keyCodes; 15719 15720 var DEFAULT_TYPE = 'rect'; 15721 var DEFAULT_WIDTH = 20; 15722 var DEFAULT_HEIGHT = 20; 15723 15724 var DEFAULT_OPTIONS = { 15725 strokeWidth: 1, 15726 stroke: '#000000', 15727 fill: '#ffffff', 15728 width: 1, 15729 height: 1, 15730 rx: 0, 15731 ry: 0, 15732 lockSkewingX: true, 15733 lockSkewingY: true, 15734 lockUniScaling: false, 15735 bringForward: true, 15736 isRegular: false 15737 }; 15738 15739 var shapeType = ['rect', 'circle', 'triangle']; 15740 15741 /** 15742 * Shape 15743 * @class Shape 15744 * @param {Graphics} graphics - Graphics instance 15745 * @extends {Component} 15746 * @ignore 15747 */ 15748 15749 var Shape = function (_Component) { 15750 _inherits(Shape, _Component); 15751
15752 function Shape(graphics) { 15753 _classCallCheck(this, Shape); 15754 15755 /** 15756 * Object of The drawing shape 15757 * @type {fabric.Object} 15758 * @private 15759 */ 15760 var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, _consts2.default.componentNames.SHAPE, graphics)); 15761 15762 _this._shapeObj = null; 15763 15764 /** 15765 * Type of the drawing shape 15766 * @type {string} 15767 * @private 15768 */ 15769 _this._type = DEFAULT_TYPE; 15770 15771 /** 15772 * Options to draw the shape 15773 * @type {Object} 15774 * @private 15775 */ 15776 _this._options = (0, _tuiCodeSnippet.extend)({}, DEFAULT_OPTIONS); 15777 15778 /** 15779 * Whether the shape object is selected or not 15780 * @type {boolean} 15781 * @private 15782 */ 15783 _this._isSelected = false; 15784 15785 /** 15786 * Pointer for drawing shape (x, y) 15787 * @type {Object} 15788 * @private 15789 */ 15790 _this._startPoint = {}; 15791 15792 /** 15793 * Using shortcut on drawing shape 15794 * @type {boolean} 15795 * @private 15796 */ 15797 _this._withShiftKey = false; 15798 15799 /** 15800 * Event handler list 15801 * @type {Object} 15802 * @private 15803 */ 15804 _this._handlers = { 15805 mousedown: _this._onFabricMouseDown.bind(_this), 15806 mousemove: _this._onFabricMouseMove.bind(_this), 15807 mouseup: _this._onFabricMouseUp.bind(_this), 15808 keydown: _this._onKeyDown.bind(_this), 15809 keyup: _this._onKeyUp.bind(_this) 15810 }; 15811 return _this; 15812 } 15813 15814 /** 15815 * Start to draw the shape on canvas 15816 * @ignore 15817 */ 15818 15819 15820 _createClass(Shape, [{ 15821 key: 'start', 15822 value: function start() { 15823 var canvas = this.getCanvas(); 15824 15825 this._isSelected = false; 15826 15827 canvas.defaultCursor = 'crosshair'; 15828 canvas.selection = false; 15829 canvas.uniScaleTransform = true; 15830 canvas.on({ 15831 'mouse:down': this._handlers.mousedown 15832 }); 15833 15834 _fabric2.default.util.addListener(document, 'keydown', this._handlers.keydown); 15835 _fabric2.default.util.addListener(document, 'keyup', this._handlers.keyup); 15836 } 15837 15838 /** 15839 * End to draw the shape on canvas 15840 * @ignore 15841 */ 15842 15843 }, { 15844 key: 'end', 15845 value: function end() { 15846 var canvas = this.getCanvas(); 15847 15848 this._isSelected = false; 15849 15850 canvas.defaultCursor = 'default'; 15851 15852 canvas.selection = true; 15853 canvas.uniScaleTransform = false; 15854 canvas.off({ 15855 'mouse:down': this._handlers.mousedown 15856 }); 15857 15858 _fabric2.default.util.removeListener(document, 'keydown', this._handlers.keydown); 15859 _fabric2.default.util.removeListener(document, 'keyup', this._handlers.keyup); 15860 } 15861 15862 /** 15863 * Set states of the current drawing shape 15864 * @ignore 15865 * @param {string} type - Shape type (ex: 'rect', 'circle') 15866 * @param {Object} [options] - Shape options 15867 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 15868 * @param {string} [options.stoke] - Shape outline color 15869 * @param {number} [options.strokeWidth] - Shape outline width 15870 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 15871 * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) 15872 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 15873 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 15874 */ 15875 15876 }, { 15877 key: 'setStates', 15878 value: function setStates(type, options) { 15879 this._type = type; 15880 15881 if (options) { 15882 this._options = (0, _tuiCodeSnippet.extend)(this._options, options); 15883 } 15884 } 15885 15886 /** 15887 * Add the shape 15888 * @ignore 15889 * @param {string} type - Shape type (ex: 'rect', 'circle') 15890 * @param {Object} options - Shape options 15891 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 15892 * @param {string} [options.stroke] - Shape outline color 15893 * @param {number} [options.strokeWidth] - Shape outline width 15894 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 15895 * @param {number}
15895 [options.height] - Height value (When type option is 'rect', this options can use) 15896 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 15897 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 15898 * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not 15899 * @returns {Promise} 15900 */ 15901 15902 }, { 15903 key: 'add', 15904 value: function add(type, options) { 15905 var _this2 = this; 15906 15907 return new _promise2.default(function (resolve) { 15908 var canvas = _this2.getCanvas(); 15909 options = _this2._extendOptions(options); 15910 var shapeObj = _this2._createInstance(type, options); 15911 15912 _this2._bindEventOnShape(shapeObj); 15913 15914 canvas.add(shapeObj).setActiveObject(shapeObj); 15915 15916 var objectProperties = _this2.graphics.createObjectProperties(shapeObj); 15917 15918 resolve(objectProperties); 15919 }); 15920 } 15921 15922 /** 15923 * Change the shape 15924 * @ignore 15925 * @param {fabric.Object} shapeObj - Selected shape object on canvas 15926 * @param {Object} options - Shape options 15927 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 15928 * @param {string} [options.stroke] - Shape outline color 15929 * @param {number} [options.strokeWidth] - Shape outline width 15930 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 15931 * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) 15932 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 15933 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 15934 * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not 15935 * @returns {Promise} 15936 */ 15937 15938 }, { 15939 key: 'change', 15940 value: function change(shapeObj, options) { 15941 var _this3 = this; 15942 15943 return new _promise2.default(function (resolve, reject) { 15944 if ((0, _tuiCodeSnippet.inArray)(shapeObj.get('type'), shapeType) < 0) { 15945 reject(rejectMessages.unsupportedType); 15946 } 15947 15948 shapeObj.set(options); 15949 _this3.getCanvas().renderAll(); 15950 resolve(); 15951 }); 15952 } 15953 15954 /** 15955 * Create the instance of shape 15956 * @param {string} type - Shape type 15957 * @param {Object} options - Options to creat the shape 15958 * @returns {fabric.Object} Shape instance 15959 * @private 15960 */ 15961 15962 }, { 15963 key: '_createInstance', 15964 value: function _createInstance(type, options) { 15965 var instance = void 0; 15966 15967 switch (type) { 15968 case 'rect': 15969 instance = new _fabric2.default.Rect(options); 15970 break; 15971 case 'circle': 15972 instance = new _fabric2.default.Ellipse((0, _tuiCodeSnippet.extend)({ 15973 type: 'circle' 15974 }, options)); 15975 break; 15976 case 'triangle': 15977 instance = new _fabric2.default.Triangle(options); 15978 break; 15979 default: 15980 instance = {}; 15981 } 15982 15983 return instance; 15984 } 15985 15986 /** 15987 * Get the options to create the shape 15988 * @param {Object} options - Options to creat the shape 15989 * @returns {Object} Shape options 15990 * @private 15991 */ 15992 15993 }, { 15994 key: '_extendOptions', 15995 value: function _extendOptions(options) { 15996 var selectionStyles = _consts2.default.fObjectOptions.SELECTION_STYLE; 15997 15998 options = (0, _tuiCodeSnippet.extend)({}, DEFAULT_OPTIONS, this._options, selectionStyles, options); 15999 16000 if (options.isRegular) { 16001 options.lockUniScaling = true; 16002 } 16003 16004 return options; 16005 } 16006 16007 /** 16008 * Bind fabric events on the creating shape object 16009 * @param {fabric.Object} shapeObj - Shape object 16010 * @private 16011 */ 16012 16013 }, { 16014 key: '_bindEventOnShape', 16015 value: function _bindEventOnShape(shapeObj) { 16016 var self = this; 16017 var canvas = this.getCanvas(); 16018 16019 shapeObj.on({ 16020 added: function added() { 16021 self._shapeObj = this; 16022 _shapeResizeHelper2.default.setOrigins(self._shapeObj); 16023 }, 16024 selected: function selected() { 16025 self._isSelected = true; 16026 self._shapeObj = this; 16027 canvas.uniScaleTransform = true; 16028 canvas.defaultCursor = 'default'; 16029 _shapeResizeHelper2.default.setOrigins(self._shapeObj); 16030 }, 16031 deselected: function deselected() { 16032 self._isSelected = false;
16033 self._shapeObj = null; 16034 canvas.defaultCursor = 'crosshair'; 16035 canvas.uniScaleTransform = false; 16036 }, 16037 modified: function modified() { 16038 var currentObj = self._shapeObj; 16039 16040 _shapeResizeHelper2.default.adjustOriginToCenter(currentObj); 16041 _shapeResizeHelper2.default.setOrigins(currentObj); 16042 }, 16043 scaling: function scaling(fEvent) { 16044 var pointer = canvas.getPointer(fEvent.e); 16045 var currentObj = self._shapeObj; 16046 16047 canvas.setCursor('crosshair'); 16048 _shapeResizeHelper2.default.resize(currentObj, pointer, true); 16049 } 16050 }); 16051 } 16052 16053 /** 16054 * MouseDown event handler on canvas 16055 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object 16056 * @private 16057 */ 16058 16059 }, { 16060 key: '_onFabricMouseDown', 16061 value: function _onFabricMouseDown(fEvent) { 16062 if (!fEvent.target) { 16063 this._isSelected = false; 16064 this._shapeObj = false; 16065 } 16066 16067 if (!this._isSelected && !this._shapeObj) { 16068 var canvas = this.getCanvas(); 16069 this._startPoint = canvas.getPointer(fEvent.e); 16070 16071 canvas.on({ 16072 'mouse:move': this._handlers.mousemove, 16073 'mouse:up': this._handlers.mouseup 16074 }); 16075 } 16076 } 16077 16078 /** 16079 * MouseDown event handler on canvas 16080 * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object 16081 * @private 16082 */ 16083 16084 }, { 16085 key: '_onFabricMouseMove', 16086 value: function _onFabricMouseMove(fEvent) { 16087 var _this4 = this; 16088 16089 var canvas = this.getCanvas(); 16090 var pointer = canvas.getPointer(fEvent.e); 16091 var startPointX = this._startPoint.x; 16092 var startPointY = this._startPoint.y; 16093 var width = startPointX - pointer.x; 16094 var height = startPointY - pointer.y; 16095 var shape = this._shapeObj; 16096 16097 if (!shape) { 16098 this.add(this._type, { 16099 left: startPointX, 16100 top: startPointY, 16101 width: width, 16102 height: height 16103 }).then(function (objectProps) { 16104 _this4.fire(eventNames.ADD_OBJECT, objectProps); 16105 }); 16106 } else { 16107 this._shapeObj.set({ 16108 isRegular: this._withShiftKey 16109 }); 16110 _shapeResizeHelper2.default.resize(shape, pointer); 16111 canvas.renderAll(); 16112 } 16113 } 16114 16115 /** 16116 * MouseUp event handler on canvas 16117 * @private 16118 */ 16119 16120 }, { 16121 key: '_onFabricMouseUp', 16122 value: function _onFabricMouseUp() { 16123 var _this5 = this; 16124 16125 var canvas = this.getCanvas(); 16126 var startPointX = this._startPoint.x; 16127 var startPointY = this._startPoint.y; 16128 var shape = this._shapeObj; 16129 16130 if (!shape) { 16131 this.add(this._type, { 16132 left: startPointX, 16133 top: startPointY, 16134 width: DEFAULT_WIDTH, 16135 height: DEFAULT_HEIGHT 16136 }).then(function (objectProps) { 16137 _this5.fire(eventNames.ADD_OBJECT, objectProps); 16138 }); 16139 } else if (shape) { 16140 _shapeResizeHelper2.default.adjustOriginToCenter(shape); 16141 this.fire(eventNames.ADD_OBJECT_AFTER, this.graphics.createObjectProperties(shape)); 16142 } 16143 16144 canvas.off({ 16145 'mouse:move': this._handlers.mousemove, 16146 'mouse:up': this._handlers.mouseup 16147 }); 16148 } 16149 16150 /** 16151 * Keydown event handler on document 16152 * @param {KeyboardEvent} e - Event object 16153 * @private 16154 */ 16155 16156 }, { 16157 key: '_onKeyDown', 16158 value: function _onKeyDown(e) { 16159 if (e.keyCode === KEY_CODES.SHIFT) { 16160 this._withShiftKey = true; 16161 16162 if (this._shapeObj) { 16163 this._shapeObj.isRegular = true; 16164 } 16165 } 16166 } 16167 16168 /** 16169 * Keyup event handler on document 16170 * @param {KeyboardEvent} e - Event object 16171 * @private 16172 */ 16173 16174 }, { 16175 key: '_onKeyUp', 16176 value: function _onKeyUp(e) { 16177 if (e.keyCode === KEY_CODES.SHIFT) { 16178 this._withShiftKey = false;
16179 16180 if (this._shapeObj) { 16181 this._shapeObj.isRegular = false; 16182 } 16183 } 16184 } 16185 }]); 16186 16187 return Shape; 16188 }(_component2.default); 16189 16190 module.exports = Shape; 16191 16192/***/ }), 16193/* 124 */ 16194/***/ (function(module, exports) { 16195 16196 'use strict'; 16197 16198 /** 16199 * @author NHN Ent. FE Development Team <[email protected]> 16200 * @fileoverview Shape resize helper 16201 */ 16202 var DIVISOR = { 16203 rect: 1, 16204 circle: 2, 16205 triangle: 1 16206 }; 16207 var DIMENSION_KEYS = { 16208 rect: { 16209 w: 'width', 16210 h: 'height' 16211 }, 16212 circle: { 16213 w: 'rx', 16214 h: 'ry' 16215 }, 16216 triangle: { 16217 w: 'width', 16218 h: 'height' 16219 } 16220 }; 16221 16222 /** 16223 * Set the start point value to the shape object 16224 * @param {fabric.Object} shape - Shape object 16225 * @ignore 16226 */ 16227 function setStartPoint(shape) { 16228 var originX = shape.getOriginX(); 16229 var originY = shape.getOriginY(); 16230 var originKey = originX.substring(0, 1) + originY.substring(0, 1); 16231 16232 shape.startPoint = shape.origins[originKey]; 16233 } 16234 16235 /** 16236 * Get the positions of ratated origin by the pointer value 16237 * @param {{x: number, y: number}} origin - Origin value 16238 * @param {{x: number, y: number}} pointer - Pointer value 16239 * @param {number} angle - Rotating angle 16240 * @returns {Object} Postions of origin 16241 * @ignore 16242 */ 16243 function getPositionsOfRotatedOrigin(origin, pointer, angle) { 16244 var sx = origin.x; 16245 var sy = origin.y; 16246 var px = pointer.x; 16247 var py = pointer.y; 16248 var r = angle * Math.PI / 180; 16249 var rx = (px - sx) * Math.cos(r) - (py - sy) * Math.sin(r) + sx; 16250 var ry = (px - sx) * Math.sin(r) + (py - sy) * Math.cos(r) + sy; 16251 16252 return { 16253 originX: sx > rx ? 'right' : 'left', 16254 originY: sy > ry ? 'bottom' : 'top' 16255 }; 16256 } 16257 16258 /** 16259 * Whether the shape has the center origin or not 16260 * @param {fabric.Object} shape - Shape object 16261 * @returns {boolean} State 16262 * @ignore 16263 */ 16264 function hasCenterOrigin(shape) { 16265 return shape.getOriginX() === 'center' && shape.getOriginY() === 'center'; 16266 } 16267 16268 /** 16269 * Adjust the origin of shape by the start point 16270 * @param {{x: number, y: number}} pointer - Pointer value 16271 * @param {fabric.Object} shape - Shape object 16272 * @ignore 16273 */ 16274 function adjustOriginByStartPoint(pointer, shape) { 16275 var centerPoint = shape.getPointByOrigin('center', 'center'); 16276 var angle = -shape.getAngle(); 16277 var originPositions = getPositionsOfRotatedOrigin(centerPoint, pointer, angle); 16278 var originX = originPositions.originX, 16279 originY = originPositions.originY; 16280 16281 var origin = shape.getPointByOrigin(originX, originY); 16282 var left = shape.getLeft() - (centerPoint.x - origin.x); 16283 var top = shape.getTop() - (centerPoint.x - origin.y); 16284 16285 shape.set({ 16286 originX: originX, 16287 originY: originY, 16288 left: left, 16289 top: top 16290 }); 16291 16292 shape.setCoords(); 16293 } 16294 16295 /** 16296 * Adjust the origin of shape by the moving pointer value 16297 * @param {{x: number, y: number}} pointer - Pointer value 16298 * @param {fabric.Object} shape - Shape object 16299 * @ignore 16300 */ 16301 function adjustOriginByMovingPointer(pointer, shape) { 16302 var origin = shape.startPoint; 16303 var angle = -shape.getAngle(); 16304 var originPositions = getPositionsOfRotatedOrigin(origin, pointer, angle); 16305 var originX = originPositions.originX, 16306 originY = originPositions.originY; 16307 16308 16309 shape.setPositionByOrigin(origin, originX, originY); 16310 } 16311 16312 /** 16313 * Adjust the dimension of shape on firing scaling event 16314 * @param {fabric.Object} shape - Shape object 16315 * @ignore 16316 */ 16317 function adjustDimensionOnScaling(shape) { 16318 var type = shape.type, 16319 scaleX = shape.scaleX, 16320 scaleY = shape.scaleY; 16321 16322 var dimensionKeys = DIMENSION_KEYS[type]; 16323 var width = shape[dimensionKeys.w] * scaleX; 16324 var height = shape[dimensionKeys.h] * scaleY; 16325 16326 if (shape.isRegular) { 16327 var maxScale = Math.max(scaleX, scaleY); 16328 16329 width = shape[dimensionKeys.w] * maxScale; 16330 height = shape[dimensionKeys.h] * maxScale; 16331 } 16332 16333 var options = { 16334 hasControls: false, 16335 hasBorders: false, 16336 scaleX: 1, 16337 scaleY: 1 16338 }; 16339 16340 options[dimensionKeys.w] = width; 16341 options[dimensionKeys.h] = height; 16342 16343 shape.set(options); 16344 } 16345 16346 /** 16347 * Adjust the dimension of shape on firing mouse move event 16348 * @param {{x: number, y: number}} pointer - Pointer value 16349 * @param {fabric.Object} shape - Shape object 16350 * @ignore 16351 */ 16352 function adjustDimensionOnMouseMove(pointer, shape) { 16353 var type = shape.type, 16354 strokeWidth = shape.strokeWidth, 16355 origin = shape.startPoint; 16356 16357 var divisor = DIVISOR[type]; 16358 var dimensionKeys = DIMENSION_KEYS[type]; 16359 var isTriangle = !!(shape.type === 'triangle'); 16360 var options = {}; 16361 var width = Math.abs(origin.x - pointer.x) / divisor; 16362 var height = Math.abs(origin.y - pointer.y) / divisor; 16363 16364 if (width > strokeWidth) { 16365 width -= strokeWidth / divisor; 16366 } 16367 16368 if (height > strokeWidth) { 16369 height -= strokeWidth / divisor; 16370 } 16371 16372 if (shape.isRegular) { 16373 width = height = Math.max(width, height); 16374 16375 if (isTriangle) {
16376 height = Math.sqrt(3) / 2 * width; 16377 } 16378 } 16379 16380 options[dimensionKeys.w] = width; 16381 options[dimensionKeys.h] = height; 16382 16383 shape.set(options); 16384 } 16385 16386 module.exports = { 16387 /** 16388 * Set each origin value to shape 16389 * @param {fabric.Object} shape - Shape object 16390 */ 16391 setOrigins: function setOrigins(shape) { 16392 var leftTopPoint = shape.getPointByOrigin('left', 'top'); 16393 var rightTopPoint = shape.getPointByOrigin('right', 'top'); 16394 var rightBottomPoint = shape.getPointByOrigin('right', 'bottom'); 16395 var leftBottomPoint = shape.getPointByOrigin('left', 'bottom'); 16396 16397 shape.origins = { 16398 lt: leftTopPoint, 16399 rt: rightTopPoint, 16400 rb: rightBottomPoint, 16401 lb: leftBottomPoint 16402 }; 16403 }, 16404 16405 16406 /** 16407 * Resize the shape 16408 * @param {fabric.Object} shape - Shape object 16409 * @param {{x: number, y: number}} pointer - Mouse pointer values on canvas 16410 * @param {boolean} isScaling - Whether the resizing action is scaling or not 16411 */ 16412 resize: function resize(shape, pointer, isScaling) { 16413 if (hasCenterOrigin(shape)) { 16414 adjustOriginByStartPoint(pointer, shape); 16415 setStartPoint(shape); 16416 } 16417 16418 if (isScaling) { 16419 adjustDimensionOnScaling(shape, pointer); 16420 } else { 16421 adjustDimensionOnMouseMove(pointer, shape); 16422 } 16423 16424 adjustOriginByMovingPointer(pointer, shape); 16425 }, 16426 16427 16428 /** 16429 * Adjust the origin position of shape to center 16430 * @param {fabric.Object} shape - Shape object 16431 */ 16432 adjustOriginToCenter: function adjustOriginToCenter(shape) { 16433 var centerPoint = shape.getPointByOrigin('center', 'center'); 16434 var originX = shape.getOriginX(); 16435 var originY = shape.getOriginY(); 16436 var origin = shape.getPointByOrigin(originX, originY); 16437 var left = shape.getLeft() + (centerPoint.x - origin.x); 16438 var top = shape.getTop() + (centerPoint.y - origin.y); 16439 16440 shape.set({ 16441 hasControls: true, 16442 hasBorders: true, 16443 originX: 'center', 16444 originY: 'center', 16445 left: left, 16446 top: top 16447 }); 16448 16449 shape.setCoords(); // For left, top properties 16450 } 16451 }; 16452 16453/***/ }), 16454/* 125 */ 16455/***/ (function(module, exports, __webpack_require__) { 16456 16457 'use strict'; 16458 16459 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; }; }(); 16460 16461 var _drawingMode = __webpack_require__(126); 16462 16463 var _drawingMode2 = _interopRequireDefault(_drawingMode); 16464 16465 var _consts = __webpack_require__(73); 16466 16467 var _consts2 = _interopRequireDefault(_consts); 16468 16469 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16470 16471 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16472 16473 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; } 16474 16475 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; } /** 16476 * @author NHN Ent. FE Development Team <[email protected]> 16477 * @fileoverview CropperDrawingMode class 16478 */ 16479 16480 16481 var drawingModes = _consts2.default.drawingModes; 16482 16483 var components = _consts2.default.componentNames; 16484 16485 /** 16486 * CropperDrawingMode class 16487 * @class 16488 * @ignore 16489 */ 16490 16491 var CropperDrawingMode = function (_DrawingMode) { 16492 _inherits(CropperDrawingMode, _DrawingMode); 16493 16494 function CropperDrawingMode() { 16495 _classCallCheck(this, CropperDrawingMode); 16496 16497 return _possibleConstructorReturn(this, (CropperDrawingMode.__proto__ || Object.getPrototypeOf(CropperDrawingMode)).call(this, drawingModes.CROPPER)); 16498 } 16499 16500 /** 16501 * start this drawing mode 16502 * @param {Graphics} graphics - Graphics instance 16503 * @override 16504 */ 16505 16506 16507 _createClass(CropperDrawingMode, [{ 16508 key: 'start', 16509 value: function start(graphics) { 16510 var cropper = graphics.getComponent(components.CROPPER); 16511 cropper.start(); 16512 } 16513 16514 /** 16515 * stop this drawing mode 16516 * @param {Graphics} graphics - Graphics instance 16517 * @override 16518 */ 16519 16520 }, { 16521 key: 'end', 16522 value: function end(graphics) { 16523 var cropper = graphics.getComponent(components.CROPPER); 16524 cropper.end(); 16525 } 16526 }]); 16527 16528 return CropperDrawingMode; 16529 }(_drawingMode2.default); 16530 16531 module.exports = CropperDrawingMode; 16532 16533/***/ }), 16534/* 126 */ 16535/***/ (function(module, exports, __webpack_require__) { 16536 16537 'use strict'; 16538 16539 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; }; }(); /** 16540 * @author NHN Ent. FE Development Team <[email protected]> 16541 * @fileoverview DrawingMode interface 16542 */ 16543 16544 16545 var _errorMessage = __webpack_require__(71); 16546 16547 var _errorMessage2 = _interopRequireDefault(_errorMessage); 16548 16549 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16550 16551 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16552 16553 var createMessage = _errorMessage2.default.create; 16554 var errorTypes = _errorMessage2.default.types; 16555 16556 /** 16557 * DrawingMode interface 16558 * @class 16559 * @param {string} name - drawing mode name 16560 * @ignore 16561 */ 16562 16563 var DrawingMode = function () { 16564 function DrawingMode(name) { 16565 _classCallCheck(this, DrawingMode); 16566 16567 /** 16568 * the name of drawing mode 16569 * @type {string} 16570 */ 16571 this.name = name; 16572 } 16573 16574 /** 16575 * Get this drawing mode name; 16576 * @returns {string} drawing mode name 16577 */ 16578 16579 16580 _createClass(DrawingMode, [{ 16581 key: 'getName', 16582 value: function getName() { 16583 return this.name; 16584 } 16585 16586 /** 16587 * start this drawing mode 16588 * @param {Object} options - drawing mode options 16589 * @abstract 16590 */ 16591 16592 }, { 16593 key: 'start', 16594 value: function start() { 16595 throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start')); 16596 } 16597 16598 /** 16599 * stop this drawing mode 16600 * @abstract 16601 */ 16602 16603 }, { 16604 key: 'stop', 16605 value: function stop() { 16606 throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop')); 16607 } 16608 }]); 16609 16610 return DrawingMode; 16611 }(); 16612 16613 module.exports = DrawingMode; 16614 16615/***/ }), 16616/* 127 */ 16617/***/ (function(module, exports, __webpack_require__) { 16618 16619 'use strict'; 16620 16621 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; }; }(); 16622 16623 var _drawingMode = __webpack_require__(126); 16624 16625 var _drawingMode2 = _interopRequireDefault(_drawingMode); 16626 16627 var _consts = __webpack_require__(73); 16628 16629 var _consts2 = _interopRequireDefault(_consts); 16630 16631 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16632 16633 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16634 16635 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; } 16636 16637 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, { c
vendor: 14,418 bytes, lines 16637-16879
16637onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 16638 * @author NHN Ent. FE Development Team <[email protected]> 16639 * @fileoverview FreeDrawingMode class 16640 */ 16641 16642 16643 var drawingModes = _consts2.default.drawingModes; 16644 16645 var components = _consts2.default.componentNames; 16646 16647 /** 16648 * FreeDrawingMode class 16649 * @class 16650 * @ignore 16651 */ 16652 16653 var FreeDrawingMode = function (_DrawingMode) { 16654 _inherits(FreeDrawingMode, _DrawingMode); 16655 16656 function FreeDrawingMode() { 16657 _classCallCheck(this, FreeDrawingMode); 16658 16659 return _possibleConstructorReturn(this, (FreeDrawingMode.__proto__ || Object.getPrototypeOf(FreeDrawingMode)).call(this, drawingModes.FREE_DRAWING)); 16660 } 16661 16662 /** 16663 * start this drawing mode 16664 * @param {Graphics} graphics - Graphics instance 16665 * @param {{width: ?number, color: ?string}} [options] - Brush width & color 16666 * @override 16667 */ 16668 16669 16670 _createClass(FreeDrawingMode, [{ 16671 key: 'start', 16672 value: function start(graphics, options) { 16673 var freeDrawing = graphics.getComponent(components.FREE_DRAWING); 16674 freeDrawing.start(options); 16675 } 16676 16677 /** 16678 * stop this drawing mode 16679 * @param {Graphics} graphics - Graphics instance 16680 * @override 16681 */ 16682 16683 }, { 16684 key: 'end', 16685 value: function end(graphics) { 16686 var freeDrawing = graphics.getComponent(components.FREE_DRAWING); 16687 freeDrawing.end(); 16688 } 16689 }]); 16690 16691 return FreeDrawingMode; 16692 }(_drawingMode2.default); 16693 16694 module.exports = FreeDrawingMode; 16695 16696/***/ }), 16697/* 128 */ 16698/***/ (function(module, exports, __webpack_require__) { 16699 16700 'use strict'; 16701 16702 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; }; }(); 16703 16704 var _drawingMode = __webpack_require__(126); 16705 16706 var _drawingMode2 = _interopRequireDefault(_drawingMode); 16707 16708 var _consts = __webpack_require__(73); 16709 16710 var _consts2 = _interopRequireDefault(_consts); 16711 16712 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16713 16714 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16715 16716 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; } 16717 16718 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; } /** 16719 * @author NHN Ent. FE Development Team <[email protected]> 16720 * @fileoverview LineDrawingMode class 16721 */ 16722 16723 16724 var drawingModes = _consts2.default.drawingModes; 16725 16726 var components = _consts2.default.componentNames; 16727 16728 /** 16729 * LineDrawingMode class 16730 * @class 16731 * @ignore 16732 */ 16733 16734 var LineDrawingMode = function (_DrawingMode) { 16735 _inherits(LineDrawingMode, _DrawingMode); 16736 16737 function LineDrawingMode() { 16738 _classCallCheck(this, LineDrawingMode); 16739 16740 return _possibleConstructorReturn(this, (LineDrawingMode.__proto__ || Object.getPrototypeOf(LineDrawingMode)).call(this, drawingModes.LINE_DRAWING)); 16741 } 16742 16743 /** 16744 * start this drawing mode 16745 * @param {Graphics} graphics - Graphics instance 16746 * @param {{width: ?number, color: ?string}} [options] - Brush width & color 16747 * @override 16748 */ 16749 16750 16751 _createClass(LineDrawingMode, [{ 16752 key: 'start', 16753 value: function start(graphics, options) { 16754 var lineDrawing = graphics.getComponent(components.LINE); 16755 lineDrawing.start(options); 16756 } 16757 16758 /** 16759 * stop this drawing mode 16760 * @param {Graphics} graphics - Graphics instance 16761 * @override 16762 */ 16763 16764 }, { 16765 key: 'end', 16766 value: function end(graphics) { 16767 var lineDrawing = graphics.getComponent(components.LINE); 16768 lineDrawing.end(); 16769 } 16770 }]); 16771 16772 return LineDrawingMode; 16773 }(_drawingMode2.default); 16774 16775 module.exports = LineDrawingMode; 16776 16777/***/ }), 16778/* 129 */ 16779/***/ (function(module, exports, __webpack_require__) { 16780 16781 'use strict'; 16782 16783 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; }; }(); 16784 16785 var _drawingMode = __webpack_require__(126); 16786 16787 var _drawingMode2 = _interopRequireDefault(_drawingMode); 16788 16789 var _consts = __webpack_require__(73); 16790 16791 var _consts2 = _interopRequireDefault(_consts); 16792 16793 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16794 16795 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16796 16797 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; } 16798 16799 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; } /** 16800 * @author NHN Ent. FE Development Team <[email protected]> 16801 * @fileoverview ShapeDrawingMode class 16802 */ 16803 16804 16805 var drawingModes = _consts2.default.drawingModes; 16806 16807 var components = _consts2.default.componentNames; 16808 16809 /** 16810 * ShapeDrawingMode class 16811 * @class 16812 * @ignore 16813 */ 16814 16815 var ShapeDrawingMode = function (_DrawingMode) { 16816 _inherits(ShapeDrawingMode, _DrawingMode); 16817 16818 function ShapeDrawingMode() { 16819 _classCallCheck(this, ShapeDrawingMode); 16820 16821 return _possibleConstructorReturn(this, (ShapeDrawingMode.__proto__ || Object.getPrototypeOf(ShapeDrawingMode)).call(this, drawingModes.SHAPE)); 16822 } 16823 16824 /** 16825 * start this drawing mode 16826 * @param {Graphics} graphics - Graphics instance 16827 * @override 16828 */ 16829 16830 16831 _createClass(ShapeDrawingMode, [{ 16832 key: 'start', 16833 value: function start(graphics) { 16834 var shape = graphics.getComponent(components.SHAPE); 16835 shape.start(); 16836 } 16837 16838 /** 16839 * stop this drawing mode 16840 * @param {Graphics} graphics - Graphics instance 16841 * @override 16842 */ 16843 16844 }, { 16845 key: 'end', 16846 value: function end(graphics) { 16847 var shape = graphics.getComponent(components.SHAPE); 16848 shape.end(); 16849 } 16850 }]); 16851 16852 return ShapeDrawingMode; 16853 }(_drawingMode2.default); 16854 16855 module.exports = ShapeDrawingMode; 16856 16857/***/ }), 16858/* 130 */ 16859/***/ (function(module, exports, __webpack_require__) { 16860 16861 'use strict'; 16862 16863 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; }; }(); 16864 16865 var _drawingMode = __webpack_require__(126); 16866 16867 var _drawingMode2 = _interopRequireDefault(_drawingMode); 16868 16869 var _consts = __webpack_require__(73); 16870 16871 var _consts2 = _interopRequireDefault(_consts); 16872 16873 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16874 16875 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 16876 16877 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; } 16878 16879 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, { c
16879onstructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** 16880 * @author NHN Ent. FE Development Team <[email protected]> 16881 * @fileoverview TextDrawingMode class 16882 */ 16883 16884 16885 var drawingModes = _consts2.default.drawingModes; 16886 16887 var components = _consts2.default.componentNames; 16888 16889 /** 16890 * TextDrawingMode class 16891 * @class 16892 * @ignore 16893 */ 16894 16895 var TextDrawingMode = function (_DrawingMode) { 16896 _inherits(TextDrawingMode, _DrawingMode); 16897 16898 function TextDrawingMode() { 16899 _classCallCheck(this, TextDrawingMode); 16900 16901 return _possibleConstructorReturn(this, (TextDrawingMode.__proto__ || Object.getPrototypeOf(TextDrawingMode)).call(this, drawingModes.TEXT)); 16902 } 16903 16904 /** 16905 * start this drawing mode 16906 * @param {Graphics} graphics - Graphics instance 16907 * @override 16908 */ 16909 16910 16911 _createClass(TextDrawingMode, [{ 16912 key: 'start', 16913 value: function start(graphics) { 16914 var text = graphics.getComponent(components.TEXT); 16915 text.start(); 16916 } 16917 16918 /** 16919 * stop this drawing mode 16920 * @param {Graphics} graphics - Graphics instance 16921 * @override 16922 */ 16923 16924 }, { 16925 key: 'end', 16926 value: function end(graphics) { 16927 var text = graphics.getComponent(components.TEXT); 16928 text.end(); 16929 } 16930 }]); 16931 16932 return TextDrawingMode; 16933 }(_drawingMode2.default); 16934 16935 module.exports = TextDrawingMode; 16936 16937/***/ }), 16938/* 131 */ 16939/***/ (function(module, exports) { 16940 16941 // removed by extract-text-webpack-plugin 16942 16943/***/ }), 16944/* 132 */, 16945/* 133 */ 16946/***/ (function(module, exports, __webpack_require__) { 16947 16948 'use strict'; 16949 16950 var _command = __webpack_require__(69); 16951 16952 var _command2 = _interopRequireDefault(_command); 16953 16954 var _promise = __webpack_require__(4); 16955 16956 var _promise2 = _interopRequireDefault(_promise); 16957 16958 var _consts = __webpack_require__(73); 16959 16960 var _consts2 = _interopRequireDefault(_consts); 16961 16962 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16963 16964 var componentNames = _consts2.default.componentNames, 16965 commandNames = _consts2.default.commandNames; /** 16966 * @author NHN Ent. FE Development Team <[email protected]> 16967 * @fileoverview Add an icon 16968 */ 16969 16970 var ICON = componentNames.ICON; 16971 16972 16973 var command = { 16974 name: commandNames.ADD_ICON, 16975 16976 /** 16977 * Add an icon 16978 * @param {Graphics} graphics - Graphics instance 16979 * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) 16980 * @param {Object} options - Icon options 16981 * @param {string} [options.fill] - Icon foreground color 16982 * @param {string} [options.left] - Icon x position 16983 * @param {string} [options.top] - Icon y position 16984 * @returns {Promise} 16985 */ 16986 execute: function execute(graphics, type, options) { 16987 var _this = this; 16988 16989 var iconComp = graphics.getComponent(ICON); 16990 16991 return iconComp.add(type, options).then(function (objectProps) { 16992 _this.undoData.object = graphics.getObject(objectProps.id); 16993 16994 return objectProps; 16995 }); 16996 }, 16997 16998 /** 16999 * @param {Graphics} graphics - Graphics instance 17000 * @returns {Promise} 17001 */ 17002 undo: function undo(graphics) { 17003 graphics.remove(this.undoData.object); 17004 17005 return _promise2.default.resolve(); 17006 } 17007 }; 17008 17009 _command2.default.register(command); 17010 17011 module.exports = command; 17012 17013/***/ }), 17014/* 134 */ 17015/***/ (function(module, exports, __webpack_require__) { 17016 17017 'use strict'; 17018 17019 var _command = __webpack_require__(69); 17020 17021 var _command2 = _interopRequireDefault(_command); 17022 17023 var _promise = __webpack_require__(4); 17024 17025 var _promise2 = _interopRequireDefault(_promise); 17026 17027 var _consts = __webpack_require__(73); 17028 17029 var _consts2 = _interopRequireDefault(_consts); 17030 17031 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17032 17033 var commandNames = _consts2.default.commandNames; /** 17034 * @author NHN Ent. FE Development Team <[email protected]> 17035 * @fileoverview Add an image object 17036 */ 17037 17038 var command = { 17039 name: commandNames.ADD_IMAGE_OBJECT, 17040 17041 /** 17042 * Add an image object 17043 * @param {Graphics} graphics - Graphics instance 17044 * @param {string} imgUrl - Image url to make object 17045 * @returns {Promise} 17046 */ 17047 execute: function execute(graphics, imgUrl) { 17048 var _this = this; 17049 17050 return graphics.addImageObject(imgUrl).then(function (objectProps) { 17051 _this.undoData.object = graphics.getObject(objectProps.id); 17052 17053 return objectProps; 17054 }); 17055 }, 17056 17057 /** 17058 * @param {Graphics} graphics - Graphics instance 17059 * @returns {Promise} 17060 */ 17061 undo: function undo(graphics) { 17062 graphics.remove(this.undoData.object); 17063 17064 return _promise2.default.resolve(); 17065 } 17066 }; 17067 17068 _command2.default.register(command); 17069 17070 module.exports = command; 17071 17072/***/ }), 17073/* 135 */ 17074/***/ (function(module, exports, __webpack_require__) { 17075 17076 'use strict'; 17077 17078 var _command = __webpack_require__(69); 17079 17080 var _command2 = _interopRequireDefault(_command); 17081 17082 var _promise = __webpack_require__(4); 17083 17084 var _promise2 = _interopRequireDefault(_promise); 17085 17086 var _consts = __webpack_require__(73); 17087 17088 var _consts2 = _interopRequireDefault(_consts); 17089 17090 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17091 17092 var commandNames = _consts2.default.commandNames, 17093 rejectMessages = _consts2.default.rejectMessages; /** 17094 * @author NHN Ent. FE Development Team <[email protected]> 17095 * @fileoverview Add an object 17096 */ 17097 17098 var command = { 17099 name: commandNames.ADD_OBJECT, 17100 17101 /** 17102 * Add an object 17103 * @param {Graphics} graphics - Graphics instance 17104 * @param {Object} object - Fabric object 17105 * @returns {Promise} 17106 */ 17107 execute: function execute(graphics, object) { 17108 return new _promise2.default(function (resolve, reject) { 17109 if (!graphics.contains(object)) { 17110 graphics.add(object); 17111 resolve(object); 17112 } else { 17113 reject(rejectMessages.addedObject); 17114 } 17115 }); 17116 }, 17117 17118 /** 17119 * @param {Graphics} graphics - Graphics instance 17120 * @param {Object} object - Fabric object 17121 * @returns {Promise} 17122 */ 17123 undo: function undo(graphics, object) { 17124 return new _promise2.default(function (resolve, reject) { 17125 if (graphics.contains(object)) { 17126 graphics.remove(object); 17127 resolve(object); 17128 } else { 17129 reject(rejectMessages.noObject); 17130 } 17131 }); 17132 } 17133 }; 17134 17135 _command2.default.register(command); 17136 17137 module.exports = command; 17138 17139/***/ }), 17140/* 136 */ 17141/***/ (function(module, exports, __webpack_require__) { 17142 17143 'use strict'; 17144 17145 var _command = __webpack_require__(69); 17146 17147 var _command2 = _interopRequireDefault(_command); 17148 17149 var _promise = __webpack_require__(4); 17150 17151 var _promise2 = _interopRequireDefault(_promise); 17152 17153 var _consts = __webpack_require__(73); 17154 17155 var _consts2 = _interopRequireDefault(_consts); 17156 17157 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17158 17159 var componentNames = _consts2.default.componentNames, 17160 commandNames = _consts2.default.commandNames; /** 17161 * @author NHN Ent. FE Development Team <[email protected]> 17162 * @fileoverview Add a shape 17163 */ 17164 17165 var SHAPE = componentNames.SHAPE; 17166 17167 17168 var command = { 17169 name: commandNames.ADD_SHAPE, 17170 17171 /** 17172 * Add a shape 17173 * @param {Graphics} graphics - Graphics instance 17174 * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') 17175 * @param {Object} options - Shape options 17176 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 17177 * @param {string} [options.stroke] - Shape outline color 17178 * @param {number} [options.strokeWidth] - Shape outline width 17179 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 17180 * @param {number}
17180 [options.height] - Height value (When type option is 'rect', this options can use) 17181 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 17182 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 17183 * @param {number} [options.left] - Shape x position 17184 * @param {number} [options.top] - Shape y position 17185 * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 17186 * @returns {Promise} 17187 */ 17188 execute: function execute(graphics, type, options) { 17189 var _this = this; 17190 17191 var shapeComp = graphics.getComponent(SHAPE); 17192 17193 return shapeComp.add(type, options).then(function (objectProps) { 17194 _this.undoData.object = graphics.getObject(objectProps.id); 17195 17196 return objectProps; 17197 }); 17198 }, 17199 17200 /** 17201 * @param {Graphics} graphics - Graphics instance 17202 * @returns {Promise} 17203 */ 17204 undo: function undo(graphics) { 17205 graphics.remove(this.undoData.object); 17206 17207 return _promise2.default.resolve(); 17208 } 17209 }; 17210 17211 _command2.default.register(command); 17212 17213 module.exports = command; 17214 17215/***/ }), 17216/* 137 */ 17217/***/ (function(module, exports, __webpack_require__) { 17218 17219 'use strict'; 17220 17221 var _command = __webpack_require__(69); 17222 17223 var _command2 = _interopRequireDefault(_command); 17224 17225 var _promise = __webpack_require__(4); 17226 17227 var _promise2 = _interopRequireDefault(_promise); 17228 17229 var _consts = __webpack_require__(73); 17230 17231 var _consts2 = _interopRequireDefault(_consts); 17232 17233 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17234 17235 var componentNames = _consts2.default.componentNames, 17236 commandNames = _consts2.default.commandNames; /** 17237 * @author NHN Ent. FE Development Team <[email protected]> 17238 * @fileoverview Add a text object 17239 */ 17240 17241 var TEXT = componentNames.TEXT; 17242 17243 17244 var command = { 17245 name: commandNames.ADD_TEXT, 17246 17247 /** 17248 * Add a text object 17249 * @param {Graphics} graphics - Graphics instance 17250 * @param {string} text - Initial input text 17251 * @param {Object} [options] Options for text styles 17252 * @param {Object} [options.styles] Initial styles 17253 * @param {string} [options.styles.fill] Color 17254 * @param {string} [options.styles.fontFamily] Font type for text 17255 * @param {number} [options.styles.fontSize] Size 17256 * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) 17257 * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) 17258 * @param {string} [options.styles.textAlign] Type of text align (left / center / right) 17259 * @param {string} [options.styles.textDecoraiton] Type of line (underline / line-throgh / overline) 17260 * @param {{x: number, y: number}} [options.position] - Initial position 17261 * @returns {Promise} 17262 */ 17263 execute: function execute(graphics, text, options) { 17264 var _this = this; 17265 17266 var textComp = graphics.getComponent(TEXT); 17267 17268 return textComp.add(text, options).then(function (objectProps) { 17269 _this.undoData.object = graphics.getObject(objectProps.id); 17270 17271 return objectProps; 17272 }); 17273 }, 17274 17275 /** 17276 * @param {Graphics} graphics - Graphics instance 17277 * @returns {Promise} 17278 */ 17279 undo: function undo(graphics) { 17280 graphics.remove(this.undoData.object); 17281 17282 return _promise2.default.resolve(); 17283 } 17284 }; 17285 17286 _command2.default.register(command); 17287 17288 module.exports = command; 17289 17290/***/ }), 17291/* 138 */ 17292/***/ (function(module, exports, __webpack_require__) { 17293 17294 'use strict'; 17295 17296 var _command = __webpack_require__(69); 17297 17298 var _command2 = _interopRequireDefault(_command); 17299 17300 var _consts = __webpack_require__(73); 17301 17302 var _consts2 = _interopRequireDefault(_consts); 17303 17304 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17305 17306 /** 17307 * @author NHN Ent. FE Development Team <[email protected]> 17308 * @fileoverview Apply a filter into an image 17309 */ 17310 var componentNames = _consts2.default.componentNames, 17311 rejectMessages = _consts2.default.rejectMessages, 17312 commandNames = _consts2.default.commandNames; 17313 var FILTER = componentNames.FILTER; 17314 17315 17316 var command = { 17317 name: commandNames.APPLY_FILTER, 17318 17319 /** 17320 * Apply a filter into an image 17321 * @param {Graphics} graphics - Graphics instance 17322 * @param {string} type - Filter type 17323 * @param {Object} options - Filter options 17324 * @param {number} options.maskObjId - masking image object id 17325 * @returns {Promise} 17326 */ 17327 execute: function execute(graphics, type, options) { 17328 var filterComp = graphics.getComponent(FILTER); 17329 17330 if (type === 'mask') { 17331 var maskObj = graphics.getObject(options.maskObjId); 17332 17333 if (!(maskObj && maskObj.isType('image'))) { 17334 return Promise.reject(rejectMessages.invalidParameters); 17335 } 17336 17337 options = { 17338 mask: maskObj 17339 }; 17340 } 17341 17342 if (type === 'mask') { 17343 this.undoData.object = options.mask; 17344 graphics.remove(options.mask); 17345 } else { 17346 this.undoData.options = filterComp.getOptions(type); 17347 } 17348 17349 return filterComp.add(type, options); 17350 }, 17351 17352 /** 17353 * @param {Graphics} graphics - Graphics instance 17354 * @param {string} type - Filter type 17355 * @returns {Promise} 17356 */ 17357 undo: function undo(graphics, type) { 17358 var filterComp = graphics.getComponent(FILTER); 17359 17360 if (type === 'mask') { 17361 var mask = this.undoData.object; 17362 graphics.add(mask); 17363 graphics.setActiveObject(mask); 17364 17365 return filterComp.remove(type); 17366 } 17367 17368 // options changed case 17369 if (this.undoData.options) { 17370 return filterComp.add(type, this.undoData.options); 17371 } 17372 17373 // filter added case 17374 return filterComp.remove(type); 17375 } 17376 }; 17377 17378 _command2.default.register(command); 17379 17380 module.exports = command; 17381 17382/***/ }), 17383/* 139 */ 17384/***/ (function(module, exports, __webpack_require__) { 17385 17386 'use strict'; 17387 17388 var _command = __webpack_require__(69); 17389 17390 var _command2 = _interopRequireDefault(_command); 17391 17392 var _promise = __webpack_require__(4); 17393 17394 var _promise2 = _interopRequireDefault(_promise); 17395 17396 var _consts = __webpack_require__(73); 17397 17398 var _consts2 = _interopRequireDefault(_consts); 17399 17400 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17401 17402 var componentNames = _consts2.default.componentNames, 17403 rejectMessages = _consts2.default.rejectMessages, 17404 commandNames = _consts2.default.commandNames; /** 17405 * @author NHN Ent. FE Development Team <[email protected]> 17406 * @fileoverview Change icon color 17407 */ 17408 17409 var ICON = componentNames.ICON; 17410 17411 17412 var command = { 17413 name: commandNames.CHANGE_ICON_COLOR, 17414 17415 /** 17416 * Change icon color 17417 * @param {Graphics} graphics - Graphics instance 17418 * @param {number} id - object id 17419 * @param {string} color - Color for icon 17420 * @returns {Promise} 17421 */ 17422 execute: function execute(graphics, id, color) { 17423 var _this = this; 17424 17425 return new _promise2.default(function (resolve, reject) { 17426 var iconComp = graphics.getComponent(ICON); 17427 var targetObj = graphics.getObject(id); 17428 17429 if (!targetObj) { 17430 reject(rejectMessages.noObject); 17431 } 17432 17433 _this.undoData.object = targetObj; 17434 _this.undoData.color = iconComp.getColor(targetObj); 17435 iconComp.setColor(color, targetObj); 17436 resolve(); 17437 }); 17438 }, 17439 17440 /** 17441 * @param {Graphics} graphics - Graphics instance 17442 * @returns {Promise} 17443 */ 17444 undo: function undo(graphics) { 17445 var iconComp = graphics.getComponent(ICON); 17446 var _undoData$object = this.undoData.object, 17447 icon = _undoData$object.object, 17448 color = _undoData$object.color; 17449 17450 17451 iconComp.setColor(color, icon); 17452 17453 return _promise2.default.resolve(); 17454 } 17455 }; 17456 17457 _command2.default.register(command); 17458 17459 module.exports = command; 17460 17461/***/ }), 17462/* 140 */ 17463/***/ (function(module, exports, __webpack_require__) { 17464 17465 'use strict'; 17466 17467 var _tuiCodeSnippet = __webpack_require__(3); 17468 17469 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 17470 17471 var _command = __webpack_require__(69); 17472 17473 var _command2 = _interopRequireDefault(_command); 17474 17475 var _promise = __webpack_require__(4); 17476 17477 var _promise2 = _interopRequireDefault(_promise); 17478 17479 var _consts = __webpack_require__(73); 17480 17481 var _consts2 = _interopRequireDefault(_consts); 17482 17483 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17484 17485 /** 17486 * @author NHN Ent. FE Development Team <[email protected]> 17487 * @fileoverview change a shape 17488 */ 17489 var componentNames = _consts2.default.componentNames, 17490 rejectMessages = _consts2.default.rejectMessages, 17491 commandNames = _consts2.default.commandNames; 17492 var SHAPE = componentNames.SHAPE; 17493 17494 17495 var command = { 17496 name: commandNames.CHANGE_SHAPE, 17497 17498 /** 17499 * Change a shape 17500 * @param {Graphics} graphics - Graphics instance 17501 * @param {number} id - object id 17502 * @param {Object} options - Shape options 17503 * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') 17504 * @param {string} [options.stroke] - Shape outline color 17505 * @param {number} [options.strokeWidth] - Shape outline width 17506 * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) 17507 * @param {number}
17507 [options.height] - Height value (When type option is 'rect', this options can use) 17508 * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) 17509 * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) 17510 * @param {number} [options.left] - Shape x position 17511 * @param {number} [options.top] - Shape y position 17512 * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not 17513 * @returns {Promise} 17514 */ 17515 execute: function execute(graphics, id, options) { 17516 var _this = this; 17517 17518 var shapeComp = graphics.getComponent(SHAPE); 17519 var targetObj = graphics.getObject(id); 17520 17521 if (!targetObj) { 17522 return _promise2.default.reject(rejectMessages.noObject); 17523 } 17524 17525 this.undoData.object = targetObj; 17526 this.undoData.options = {}; 17527 _tuiCodeSnippet2.default.forEachOwnProperties(options, function (value, key) { 17528 _this.undoData.options[key] = targetObj[key]; 17529 }); 17530 17531 return shapeComp.change(targetObj, options); 17532 }, 17533 17534 /** 17535 * @param {Graphics} graphics - Graphics instance 17536 * @returns {Promise} 17537 */ 17538 undo: function undo(graphics) { 17539 var shapeComp = graphics.getComponent(SHAPE); 17540 var _undoData = this.undoData, 17541 shape = _undoData.object, 17542 options = _undoData.options; 17543 17544 17545 return shapeComp.change(shape, options); 17546 } 17547 }; 17548 17549 _command2.default.register(command); 17550 17551 module.exports = command; 17552 17553/***/ }), 17554/* 141 */ 17555/***/ (function(module, exports, __webpack_require__) { 17556 17557 'use strict'; 17558 17559 var _command = __webpack_require__(69); 17560 17561 var _command2 = _interopRequireDefault(_command); 17562 17563 var _promise = __webpack_require__(4); 17564 17565 var _promise2 = _interopRequireDefault(_promise); 17566 17567 var _consts = __webpack_require__(73); 17568 17569 var _consts2 = _interopRequireDefault(_consts); 17570 17571 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17572 17573 var componentNames = _consts2.default.componentNames, 17574 rejectMessages = _consts2.default.rejectMessages, 17575 commandNames = _consts2.default.commandNames; /** 17576 * @author NHN Ent. FE Development Team <[email protected]> 17577 * @fileoverview Change a text 17578 */ 17579 17580 var TEXT = componentNames.TEXT; 17581 17582 17583 var command = { 17584 name: commandNames.CHANGE_TEXT, 17585 17586 /** 17587 * Change a text 17588 * @param {Graphics} graphics - Graphics instance 17589 * @param {number} id - object id 17590 * @param {string} text - Changing text 17591 * @returns {Promise} 17592 */ 17593 execute: function execute(graphics, id, text) { 17594 var textComp = graphics.getComponent(TEXT); 17595 var targetObj = graphics.getObject(id); 17596 17597 if (!targetObj) { 17598 return _promise2.default.reject(rejectMessages.noObject); 17599 } 17600 17601 this.undoData.object = targetObj; 17602 this.undoData.text = textComp.getText(targetObj); 17603 17604 return textComp.change(targetObj, text); 17605 }, 17606 17607 /** 17608 * @param {Graphics} graphics - Graphics instance 17609 * @returns {Promise} 17610 */ 17611 undo: function undo(graphics) { 17612 var textComp = graphics.getComponent(TEXT); 17613 var _undoData = this.undoData, 17614 textObj = _undoData.object, 17615 text = _undoData.text; 17616 17617 17618 return textComp.change(textObj, text); 17619 } 17620 }; 17621 17622 _command2.default.register(command); 17623 17624 module.exports = command; 17625 17626/***/ }), 17627/* 142 */ 17628/***/ (function(module, exports, __webpack_require__) { 17629 17630 'use strict'; 17631 17632 var _tuiCodeSnippet = __webpack_require__(3); 17633 17634 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 17635 17636 var _command = __webpack_require__(69); 17637 17638 var _command2 = _interopRequireDefault(_command); 17639 17640 var _promise = __webpack_require__(4); 17641 17642 var _promise2 = _interopRequireDefault(_promise); 17643 17644 var _consts = __webpack_require__(73); 17645 17646 var _consts2 = _interopRequireDefault(_consts); 17647 17648 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17649 17650 /** 17651 * @author NHN Ent. FE Development Team <[email protected]> 17652 * @fileoverview Change text styles 17653 */ 17654 var componentNames = _consts2.default.componentNames, 17655 rejectMessages = _consts2.default.rejectMessages, 17656 commandNames = _consts2.default.commandNames; 17657 var TEXT = componentNames.TEXT; 17658 17659 17660 var command = { 17661 name: commandNames.CHANGE_TEXT_STYLE, 17662 17663 /** 17664 * Change text styles 17665 * @param {Graphics} graphics - Graphics instance 17666 * @param {number} id - object id 17667 * @param {Object} styles - text styles 17668 * @param {string} [styles.fill] Color 17669 * @param {string} [styles.fontFamily] Font type for text 17670 * @param {number} [styles.fontSize] Size 17671 * @param {string} [styles.fontStyle] Type of inclination (normal / italic) 17672 * @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold) 17673 * @param {string} [styles.textAlign] Type of text align (left / center / right) 17674 * @param {string}
17674 [styles.textDecoraiton] Type of line (underline / line-throgh / overline) 17675 * @returns {Promise} 17676 */ 17677 execute: function execute(graphics, id, styles) { 17678 var _this = this; 17679 17680 var textComp = graphics.getComponent(TEXT); 17681 var targetObj = graphics.getObject(id); 17682 17683 if (!targetObj) { 17684 return _promise2.default.reject(rejectMessages.noObject); 17685 } 17686 17687 this.undoData.object = targetObj; 17688 this.undoData.styles = {}; 17689 _tuiCodeSnippet2.default.forEachOwnProperties(styles, function (value, key) { 17690 _this.undoData.styles[key] = targetObj[key]; 17691 }); 17692 17693 return textComp.setStyle(targetObj, styles); 17694 }, 17695 17696 /** 17697 * @param {Graphics} graphics - Graphics instance 17698 * @returns {Promise} 17699 */ 17700 undo: function undo(graphics) { 17701 var textComp = graphics.getComponent(TEXT); 17702 var _undoData = this.undoData, 17703 textObj = _undoData.object, 17704 styles = _undoData.styles; 17705 17706 17707 return textComp.setStyle(textObj, styles); 17708 } 17709 }; 17710 17711 _command2.default.register(command); 17712 17713 module.exports = command; 17714 17715/***/ }), 17716/* 143 */ 17717/***/ (function(module, exports, __webpack_require__) { 17718 17719 'use strict'; 17720 17721 var _command = __webpack_require__(69); 17722 17723 var _command2 = _interopRequireDefault(_command); 17724 17725 var _promise = __webpack_require__(4); 17726 17727 var _promise2 = _interopRequireDefault(_promise); 17728 17729 var _consts = __webpack_require__(73); 17730 17731 var _consts2 = _interopRequireDefault(_consts); 17732 17733 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17734 17735 var commandNames = _consts2.default.commandNames; /** 17736 * @author NHN Ent. FE Development Team <[email protected]> 17737 * @fileoverview Clear all objects 17738 */ 17739 17740 var command = { 17741 name: commandNames.CLEAR_OBJECTS, 17742 17743 /** 17744 * Clear all objects without background (main) image 17745 * @param {Graphics} graphics - Graphics instance 17746 * @returns {Promise} 17747 */ 17748 execute: function execute(graphics) { 17749 var _this = this; 17750 17751 return new _promise2.default(function (resolve) { 17752 _this.undoData.objects = graphics.removeAll(); 17753 resolve(); 17754 }); 17755 }, 17756 17757 /** 17758 * @param {Graphics} graphics - Graphics instance 17759 * @returns {Promise} 17760 * @ignore 17761 */ 17762 undo: function undo(graphics) { 17763 graphics.add(this.undoData.objects); 17764 17765 return _promise2.default.resolve(); 17766 } 17767 }; 17768 17769 _command2.default.register(command); 17770 17771 module.exports = command; 17772 17773/***/ }), 17774/* 144 */ 17775/***/ (function(module, exports, __webpack_require__) { 17776 17777 'use strict'; 17778 17779 var _command = __webpack_require__(69); 17780 17781 var _command2 = _interopRequireDefault(_command); 17782 17783 var _consts = __webpack_require__(73); 17784 17785 var _consts2 = _interopRequireDefault(_consts); 17786 17787 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17788 17789 /** 17790 * @author NHN Ent. FE Development Team <[email protected]> 17791 * @fileoverview Flip an image 17792 */ 17793 var componentNames = _consts2.default.componentNames, 17794 commandNames = _consts2.default.commandNames; 17795 var FLIP = componentNames.FLIP; 17796 17797 17798 var command = { 17799 name: commandNames.FLIP_IMAGE, 17800 17801 /** 17802 * flip an image 17803 * @param {Graphics} graphics - Graphics instance 17804 * @param {string} type - 'flipX' or 'flipY' or 'reset' 17805 * @returns {Promise} 17806 */ 17807 execute: function execute(graphics, type) { 17808 var flipComp = graphics.getComponent(FLIP); 17809 17810 this.undoData.setting = flipComp.getCurrentSetting(); 17811 17812 return flipComp[type](); 17813 }, 17814 17815 /** 17816 * @param {Graphics} graphics - Graphics instance 17817 * @returns {Promise} 17818 */ 17819 undo: function undo(graphics) { 17820 var flipComp = graphics.getComponent(FLIP); 17821 17822 return flipComp.set(this.undoData.setting); 17823 } 17824 }; 17825 17826 _command2.default.register(command); 17827 17828 module.exports = command; 17829 17830/***/ }), 17831/* 145 */ 17832/***/ (function(module, exports, __webpack_require__) { 17833 17834 'use strict'; 17835 17836 var _command = __webpack_require__(69); 17837 17838 var _command2 = _interopRequireDefault(_command); 17839 17840 var _consts = __webpack_require__(73); 17841 17842 var _consts2 = _interopRequireDefault(_consts); 17843 17844 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17845 17846 /** 17847 * @author NHN Ent. FE Development Team <[email protected]> 17848 * @fileoverview Load a background (main) image 17849 */ 17850 var componentNames = _consts2.default.componentNames, 17851 commandNames = _consts2.default.commandNames; 17852 var IMAGE_LOADER = componentNames.IMAGE_LOADER; 17853 17854 17855 var command = { 17856 name: commandNames.LOAD_IMAGE, 17857 17858 /** 17859 * Load a background (main) image 17860 * @param {Graphics} graphics - Graphics instance 17861 * @param {string} imageName - Image name 17862 * @param {string} imgUrl - Image Url 17863 * @returns {Promise} 17864 */ 17865 execute: function execute(graphics, imageName, imgUrl) { 17866 var loader = graphics.getComponent(IMAGE_LOADER); 17867 var prevImage = loader.getCanvasImage(); 17868 var prevImageWidth = prevImage ? prevImage.width : 0; 17869 var prevImageHeight = prevImage ? prevImage.height : 0; 17870 var objects = graphics.removeAll(true).filter(function (objectItem) { 17871 return objectItem.type !== 'cropzone'; 17872 }); 17873
17874 objects.forEach(function (objectItem) { 17875 objectItem.evented = true; 17876 }); 17877 17878 this.undoData = { 17879 name: loader.getImageName(), 17880 image: prevImage, 17881 objects: objects 17882 }; 17883 17884 return loader.load(imageName, imgUrl).then(function (newImage) { 17885 return { 17886 oldWidth: prevImageWidth, 17887 oldHeight: prevImageHeight, 17888 newWidth: newImage.width, 17889 newHeight: newImage.height 17890 }; 17891 }); 17892 }, 17893 17894 17895 /** 17896 * @param {Graphics} graphics - Graphics instance 17897 * @returns {Promise} 17898 */ 17899 undo: function undo(graphics) { 17900 var loader = graphics.getComponent(IMAGE_LOADER); 17901 var _undoData = this.undoData, 17902 objects = _undoData.objects, 17903 name = _undoData.name, 17904 image = _undoData.image; 17905 17906 17907 graphics.removeAll(true); 17908 graphics.add(objects); 17909 17910 return loader.load(name, image); 17911 } 17912 }; 17913 17914 _command2.default.register(command); 17915 17916 module.exports = command; 17917 17918/***/ }), 17919/* 146 */ 17920/***/ (function(module, exports, __webpack_require__) { 17921 17922 'use strict'; 17923 17924 var _command = __webpack_require__(69); 17925 17926 var _command2 = _interopRequireDefault(_command); 17927 17928 var _consts = __webpack_require__(73); 17929 17930 var _consts2 = _interopRequireDefault(_consts); 17931 17932 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17933 17934 /** 17935 * @author NHN Ent. FE Development Team <[email protected]> 17936 * @fileoverview Remove a filter from an image 17937 */ 17938 var componentNames = _consts2.default.componentNames, 17939 commandNames = _consts2.default.commandNames; 17940 var FILTER = componentNames.FILTER; 17941 17942 17943 var command = { 17944 name: commandNames.REMOVE_FILTER, 17945 17946 /** 17947 * Remove a filter from an image 17948 * @param {Graphics} graphics - Graphics instance 17949 * @param {string} type - Filter type 17950 * @returns {Promise} 17951 */ 17952 execute: function execute(graphics, type) { 17953 var filterComp = graphics.getComponent(FILTER); 17954 17955 this.undoData.options = filterComp.getOptions(type); 17956 17957 return filterComp.remove(type); 17958 }, 17959 17960 /** 17961 * @param {Graphics} graphics - Graphics instance 17962 * @param {string} type - Filter type 17963 * @returns {Promise} 17964 */ 17965 undo: function undo(graphics, type) { 17966 var filterComp = graphics.getComponent(FILTER); 17967 var options = this.undoData.options; 17968 17969 17970 return filterComp.add(type, options); 17971 } 17972 }; 17973 17974 _command2.default.register(command); 17975 17976 module.exports = command; 17977 17978/***/ }), 17979/* 147 */ 17980/***/ (function(module, exports, __webpack_require__) { 17981 17982 'use strict'; 17983 17984 var _command = __webpack_require__(69); 17985 17986 var _command2 = _interopRequireDefault(_command); 17987 17988 var _promise = __webpack_require__(4); 17989 17990 var _promise2 = _interopRequireDefault(_promise); 17991 17992 var _consts = __webpack_require__(73); 17993 17994 var _consts2 = _interopRequireDefault(_consts); 17995 17996 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 17997 17998 var commandNames = _consts2.default.commandNames, 17999 rejectMessages = _consts2.default.rejectMessages; /** 18000 * @author NHN Ent. FE Development Team <[email protected]> 18001 * @fileoverview Remove an object 18002 */ 18003 18004 var command = { 18005 name: commandNames.REMOVE_OBJECT, 18006 18007 /** 18008 * Remove an object 18009 * @param {Graphics} graphics - Graphics instance 18010 * @param {number} id - object id 18011 * @returns {Promise} 18012 */ 18013 execute: function execute(graphics, id) { 18014 var _this = this; 18015 18016 return new _promise2.default(function (resolve, reject) { 18017 _this.undoData.objects = graphics.removeObjectById(id); 18018 if (_this.undoData.objects.length) { 18019 resolve(); 18020 } else { 18021 reject(rejectMessages.noObject); 18022 } 18023 }); 18024 }, 18025 18026 /** 18027 * @param {Graphics} graphics - Graphics instance 18028 * @returns {Promise} 18029 */ 18030 undo: function undo(graphics) { 18031 graphics.add(this.undoData.objects); 18032 18033 return _promise2.default.resolve(); 18034 } 18035 }; 18036 18037 _command2.default.register(command); 18038 18039 module.exports = command; 18040 18041/***/ }), 18042/* 148 */ 18043/***/ (function(module, exports, __webpack_require__) { 18044 18045 'use strict'; 18046 18047 var _command = __webpack_require__(69); 18048 18049 var _command2 = _interopRequireDefault(_command); 18050 18051 var _promise = __webpack_require__(4); 18052 18053 var _promise2 = _interopRequireDefault(_promise); 18054 18055 var _consts = __webpack_require__(73); 18056 18057 var _consts2 = _interopRequireDefault(_consts); 18058 18059 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18060 18061 var commandNames = _consts2.default.commandNames; /** 18062 * @author NHN Ent. FE Development Team <[email protected]> 18063 * @fileoverview Resize a canvas 18064 */ 18065 18066 var command = { 18067 name: commandNames.RESIZE_CANVAS_DIMENSION, 18068 18069 /** 18070 * resize the canvas with given dimension 18071 * @param {Graphics} graphics - Graphics instance 18072 * @param {{width: number, height: number}} dimension - Max width & height 18073 * @returns {Promise} 18074 */ 18075 execute: function execute(graphics, dimension) { 18076 var _this = this; 18077 18078 return new _promise2.default(function (resolve) { 18079 _this.undoData.size = { 18080 width: graphics.cssMaxWidth, 18081 height: graphics.cssMaxHeight 18082 }; 18083 18084 graphics.setCssMaxDimension(dimension); 18085 graphics.adjustCanvasDimension(); 18086 resolve(); 18087 }); 18088 }, 18089 18090 /** 18091 * @param {Graphics} graphics - Graphics instance 18092 * @returns {Promise} 18093 */ 18094 undo: function undo(graphics) { 18095 graphics.setCssMaxDimension(this.undoData.size); 18096 graphics.adjustCanvasDimension(); 18097 18098 return _promise2.default.resolve(); 18099 } 18100 }; 18101 18102 _command2.default.register(command); 18103 18104 module.exports = command; 18105 18106/***/ }), 18107/* 149 */ 18108/***/ (function(module, exports, __webpack_require__) { 18109 18110 'use strict'; 18111 18112 var _command = __webpack_require__(69); 18113 18114 var _command2 = _interopRequireDefault(_command); 18115 18116 var _consts = __webpack_require__(73); 18117 18118 var _consts2 = _interopRequireDefault(_consts); 18119 18120 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18121 18122 /** 18123 * @author NHN Ent. FE Development Team <[email protected]> 18124 * @fileoverview Rotate an image 18125 */ 18126 var componentNames = _consts2.default.componentNames, 18127 commandNames = _consts2.default.commandNames; 18128 var ROTATION = componentNames.ROTATION; 18129 18130 18131 var command = { 18132 name: commandNames.ROTATE_IMAGE, 18133 18134 /** 18135 * Rotate an image 18136 * @param {Graphics} graphics - Graphics instance 18137 * @param {string} type - 'rotate' or 'setAngle' 18138 * @param {number} angle - angle value (degree) 18139 * @returns {Promise} 18140 */ 18141 execute: function execute(graphics, type, angle) { 18142 var rotationComp = graphics.getComponent(ROTATION); 18143 18144 this.undoData.angle = rotationComp.getCurrentAngle(); 18145 18146 return rotationComp[type](angle); 18147 }, 18148 18149 /** 18150 * @param {Graphics} graphics - Graphics instance 18151 * @returns {Promise} 18152 */ 18153 undo: function undo(graphics) { 18154 var rotationComp = graphics.getComponent(ROTATION); 18155 var angle = this.undoData.angle; 18156 18157 18158 return rotationComp.setAngle(angle); 18159 } 18160 }; 18161 18162 _command2.default.register(command); 18163 18164 module.exports = command; 18165 18166/***/ }), 18167/* 150 */ 18168/***/ (function(module, exports, __webpack_require__) { 18169 18170 'use strict'; 18171 18172 var _tuiCodeSnippet = __webpack_require__(3); 18173 18174 var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); 18175 18176 var _command = __webpack_require__(69); 18177 18178 var _command2 = _interopRequireDefault(_command); 18179 18180 var _promise = __webpack_require__(4); 18181 18182 var _promise2 = _interopRequireDefault(_promise); 18183 18184 var _consts = __webpack_require__(73); 18185 18186 var _consts2 = _interopRequireDefault(_consts); 18187 18188 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18189 18190 /** 18191 * @author NHN Ent. FE Development Team <[email protected]> 18192 * @fileoverview Set object properties 18193 */ 18194 var commandNames = _consts2.default.commandNames, 18195 rejectMessages = _consts2.default.rejectMessages; 18196 18197 18198 var command = { 18199 name: commandNames.SET_OBJECT_PROPERTIES, 18200 18201 /** 18202 * Set object properties 18203 * @param {Graphics} graphics - Graphics instance 18204 * @param {number} id - object id 18205 * @param {Object} props - properties 18206 * @param {string} [props.fill] Color 18207 * @param {string} [props.fontFamily] Font type for text 18208 * @param {number} [props.fontSize] Size 18209 * @param {string} [props.fontStyle] Type of inclination (normal / italic) 18210 * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) 18211 * @param {string} [props.textAlign] Type of text align (left / center / right) 18212 * @param {string}
18212 [props.textDecoraiton] Type of line (underline / line-throgh / overline) 18213 * @returns {Promise} 18214 */ 18215 execute: function execute(graphics, id, props) { 18216 var _this = this; 18217 18218 var targetObj = graphics.getObject(id); 18219 18220 if (!targetObj) { 18221 return _promise2.default.reject(rejectMessages.noObject); 18222 } 18223 18224 this.undoData.props = {}; 18225 _tuiCodeSnippet2.default.forEachOwnProperties(props, function (value, key) { 18226 _this.undoData.props[key] = targetObj[key]; 18227 }); 18228 18229 graphics.setObjectProperties(id, props); 18230 18231 return _promise2.default.resolve(); 18232 }, 18233 18234 /** 18235 * @param {Graphics} graphics - Graphics instance 18236 * @param {number} id - object id 18237 * @returns {Promise} 18238 */ 18239 undo: function undo(graphics, id) { 18240 var props = this.undoData.props; 18241 18242 18243 graphics.setObjectProperties(id, props); 18244 18245 return _promise2.default.resolve(); 18246 } 18247 }; 18248 18249 _command2.default.register(command); 18250 18251 module.exports = command; 18252 18253/***/ }), 18254/* 151 */ 18255/***/ (function(module, exports, __webpack_require__) { 18256 18257 'use strict'; 18258 18259 var _command = __webpack_require__(69); 18260 18261 var _command2 = _interopRequireDefault(_command); 18262 18263 var _promise = __webpack_require__(4); 18264 18265 var _promise2 = _interopRequireDefault(_promise); 18266 18267 var _consts = __webpack_require__(73); 18268 18269 var _consts2 = _interopRequireDefault(_consts); 18270 18271 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 18272 18273 var commandNames = _consts2.default.commandNames, 18274 rejectMessages = _consts2.default.rejectMessages; /** 18275 * @author NHN Ent. FE Development Team <[email protected]> 18276 * @fileoverview Set object properties 18277 */ 18278 18279 var command = { 18280 name: commandNames.SET_OBJECT_POSITION, 18281 18282 /** 18283 * Set object properties 18284 * @param {Graphics} graphics - Graphics instance 18285 * @param {number} id - object id 18286 * @param {Object} posInfo - position object 18287 * @param {number} posInfo.x - x position 18288 * @param {number} posInfo.y - y position 18289 * @param {string} posInfo.originX - can be 'left', 'center', 'right' 18290 * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' 18291 * @returns {Promise} 18292 */ 18293 execute: function execute(graphics, id, posInfo) { 18294 var targetObj = graphics.getObject(id); 18295 18296 if (!targetObj) { 18297 return _promise2.default.reject(rejectMessages.noObject); 18298 } 18299 18300 this.undoData.objectId = id; 18301 this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']); 18302 18303 graphics.setObjectPosition(id, posInfo); 18304 graphics.renderAll(); 18305 18306 return _promise2.default.resolve(); 18307 }, 18308 18309 /** 18310 * @param {Graphics} graphics - Graphics instance 18311 * @returns {Promise} 18312 */ 18313 undo: function undo(graphics) { 18314 var _undoData = this.undoData, 18315 objectId = _undoData.objectId, 18316 props = _undoData.props; 18317 18318 18319 graphics.setObjectProperties(objectId, props); 18320 graphics.renderAll(); 18321 18322 return _promise2.default.resolve(); 18323 } 18324 }; 18325 18326 _command2.default.register(command); 18327 18328 module.exports = command; 18329 18330/***/ }) 18331/******/ ]) 18332}); 18333;
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.