{"ast":null,"code":"import snippet from 'tui-code-snippet';\nimport { HELP_MENUS } from './consts';\nimport { getSelector, assignmentForDestroy, cls } from './util';\nimport mainContainer from './ui/template/mainContainer';\nimport controls from './ui/template/controls';\nimport Theme from './ui/theme/theme';\nimport Shape from './ui/shape';\nimport Crop from './ui/crop';\nimport Flip from './ui/flip';\nimport Rotate from './ui/rotate';\nimport Text from './ui/text';\nimport Mask from './ui/mask';\nimport Icon from './ui/icon';\nimport Draw from './ui/draw';\nimport Filter from './ui/filter';\nimport Locale from './ui/locale/locale';\nconst SUB_UI_COMPONENT = {\n  Shape,\n  Crop,\n  Flip,\n  Rotate,\n  Text,\n  Mask,\n  Icon,\n  Draw,\n  Filter\n};\nconst BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';\n/**\r\n * Ui class\r\n * @class\r\n * @param {string|HTMLElement} element - Wrapper's element or selector\r\n * @param {Object} [options] - Ui setting options\r\n *   @param {number} options.loadImage - Init default load image\r\n *   @param {number} options.initMenu - Init start menu\r\n *   @param {Boolean} [options.menuBarPosition=bottom] - Let\r\n *   @param {Boolean} [options.applyCropSelectionStyle=false] - Let\r\n *   @param {Boolean} [options.usageStatistics=false] - Use statistics or not\r\n *   @param {Object} [options.uiSize] - ui size of editor\r\n *     @param {string} options.uiSize.width - width of ui\r\n *     @param {string} options.uiSize.height - height of ui\r\n * @param {Object} actions - ui action instance\r\n */\n\nclass Ui {\n  constructor(element, options, actions) {\n    this.options = this._initializeOption(options);\n    this._actions = actions;\n    this.submenu = false;\n    this.imageSize = {};\n    this.uiSize = {};\n    this._locale = new Locale(this.options.locale);\n    this.theme = new Theme(this.options.theme);\n    this.eventHandler = {};\n    this._submenuChangeTransection = false;\n    this._selectedElement = null;\n    this._mainElement = null;\n    this._editorElementWrap = null;\n    this._editorElement = null;\n    this._menuElement = null;\n    this._subMenuElement = null;\n\n    this._makeUiElement(element);\n\n    this._setUiSize();\n\n    this._initMenuEvent = false;\n\n    this._makeSubMenu();\n  }\n  /**\r\n   * Destroys the instance.\r\n   */\n\n\n  destroy() {\n    this._removeUiEvent();\n\n    this._destroyAllMenu();\n\n    this._selectedElement.innerHTML = '';\n    assignmentForDestroy(this);\n  }\n  /**\r\n   * Set Default Selection for includeUI\r\n   * @param {Object} option - imageEditor options\r\n   * @returns {Object} - extends selectionStyle option\r\n   * @ignore\r\n   */\n\n\n  setUiDefaultSelectionStyle(option) {\n    return snippet.extend({\n      applyCropSelectionStyle: true,\n      applyGroupSelectionStyle: true,\n      selectionStyle: {\n        cornerStyle: 'circle',\n        cornerSize: 16,\n        cornerColor: '#fff',\n        cornerStrokeColor: '#fff',\n        transparentCorners: false,\n        lineWidth: 2,\n        borderColor: '#fff'\n      }\n    }, option);\n  }\n  /**\r\n   * Change editor size\r\n   * @param {Object} resizeInfo - ui & image size info\r\n   *   @param {Object} [resizeInfo.uiSize] - image size dimension\r\n   *     @param {string} resizeInfo.uiSize.width - ui width\r\n   *     @param {string} resizeInfo.uiSize.height - ui height\r\n   *   @param {Object} [resizeInfo.imageSize] - image size dimension\r\n   *     @param {Number} resizeInfo.imageSize.oldWidth - old width\r\n   *     @param {Number} resizeInfo.imageSize.oldHeight - old height\r\n   *     @param {Number} resizeInfo.imageSize.newWidth - new width\r\n   *     @param {Number} resizeInfo.imageSize.newHeight - new height\r\n   * @example\r\n   * // Change the image size and ui size, and change the affected ui state together.\r\n   * imageEditor.ui.resizeEditor({\r\n   *     imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700},\r\n   *     uiSize: {width: 1000, height: 1000}\r\n   * });\r\n   * @example\r\n   * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui)\r\n   * imageEditor.ui.resizeEditor();\r\n   */\n\n\n  resizeEditor({\n    uiSize,\n    imageSize = this.imageSize\n  } = {}) {\n    if (imageSize !== this.imageSize) {\n      this.imageSize = imageSize;\n    }\n\n    if (uiSize) {\n      this._setUiSize(uiSize);\n    }\n\n    const {\n      width,\n      height\n    } = this._getCanvasMaxDimension();\n\n    const editorElementStyle = this._editorElement.style;\n    const {\n      menuBarPosition\n    } = this.options;\n    editorElementStyle.height = `${height}px`;\n    editorElementStyle.width = `${width}px`;\n\n    this._setEditorPosition(menuBarPosition);\n\n    this._editorElementWrap.style.bottom = `0px`;\n    this._editorElementWrap.style.top = `0px`;\n    this._editorElementWrap.style.left = `0px`;\n    this._editorElementWrap.style.width = `100%`;\n    const selectElementClassList = this._selectedElement.classList;\n\n    if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION) {\n      selectElementClassList.add('tui-image-editor-top-optimization');\n    } else {\n      selectElementClassList.remove('tui-image-editor-top-optimization');\n    }\n  }\n  /**\r\n   * Change help button status\r\n   * @param {string} buttonType - target button type\r\n   * @param {Boolean} enableStatus - enabled status\r\n   * @ignore\r\n   */\n\n\n  changeHelpButtonEnabled(buttonType, enableStatus) {\n    const buttonClassList = this._buttonElements[buttonType].classList;\n    buttonClassList[enableStatus ? 'add' : 'remove']('enabled');\n  }\n  /**\r\n   * Change delete button status\r\n   * @param {Object} [options] - Ui setting options\r\n   *   @param {object} [options.loadImage] - Init default load image\r\n   *   @param {string} [options.initMenu] - Init start menu\r\n   *   @param {string} [options.menuBarPosition=bottom] - Let\r\n   *   @param {boolean} [options.applyCropSelectionStyle=false] - Let\r\n   *   @param {boolean} [options.usageStatistics=false] - Send statistics ping or not\r\n   * @returns {Object} initialize option\r\n   * @private\r\n   */\n\n\n  _initializeOption(options) {\n    return snippet.extend({\n      loadImage: {\n        path: '',\n        name: ''\n      },\n      locale: {},\n      menuIconPath: '',\n      menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],\n      initMenu: '',\n      uiSize: {\n        width: '100%',\n        height: '100%'\n      },\n      menuBarPosition: 'bottom'\n    }, options);\n  }\n  /**\r\n   * Set ui container size\r\n   * @param {Object} uiSize - ui dimension\r\n   *   @param {string} uiSize.width - css width property\r\n   *   @param {string} uiSize.height - css height property\r\n   * @private\r\n   */\n\n\n  _setUiSize(uiSize = this.options.uiSize) {\n    const elementDimension = this._selectedElement.style;\n    elementDimension.width = uiSize.width;\n    elementDimension.height = uiSize.height;\n  }\n  /**\r\n   * Make submenu dom element\r\n   * @private\r\n   */\n\n\n  _makeSubMenu() {\n    snippet.forEach(this.options.menu, menuName => {\n      const SubComponentClass = SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, $0 => $0.toUpperCase())]; // make menu element\n\n      this._makeMenuElement(menuName); // menu btn element\n\n\n      this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`); // submenu ui instance\n\n      this[menuName] = new SubComponentClass(this._subMenuElement, {\n        locale: this._locale,\n        makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\n        menuBarPosition: this.options.menuBarPosition,\n        usageStatistics: this.options.usageStatistics\n      });\n    });\n  }\n  /**\r\n   * Make primary ui dom element\r\n   * @param {string|HTMLElement} element - Wrapper's element or selector\r\n   * @private\r\n   */\n\n\n  _makeUiElement(element) {\n    let selectedElement;\n    window.snippet = snippet;\n\n    if (element.nodeType) {\n      selectedElement = element;\n    } else {\n      selectedElement = document.querySelector(element);\n    }\n\n    const selector = getSelector(selectedElement);\n    selectedElement.classList.add('tui-image-editor-container');\n    selectedElement.innerHTML = controls({\n      locale: this._locale,\n      biImage: this.theme.getStyle('common.bi'),\n      loadButtonStyle: this.theme.getStyle('loadButton'),\n      downloadButtonStyle: this.theme.getStyle('downloadButton')\n    }) + mainContainer({\n      locale: this._locale,\n      biImage: this.theme.getStyle('common.bi'),\n      commonStyle: this.theme.getStyle('common'),\n      headerStyle: this.theme.getStyle('header'),\n      loadButtonStyle: this.theme.getStyle('loadButton'),\n      downloadButtonStyle: this.theme.getStyle('downloadButton'),\n      submenuStyle: this.theme.getStyle('submenu')\n    });\n    this._selectedElement = selectedElement;\n\n    this._selectedElement.classList.add(this.options.menuBarPosition);\n\n    this._mainElement = selector('.tui-image-editor-main');\n    this._editorElementWrap = selector('.tui-image-editor-wrap');\n    this._editorElement = selector('.tui-image-editor');\n    this._menuElement = selector('.tui-image-editor-menu');\n    this._subMenuElement = selector('.tui-image-editor-submenu');\n    this._buttonElements = {\n      download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),\n      load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn')\n    };\n\n    this._addHelpMenus();\n  }\n  /**\r\n   * make array for help menu output, including partitions.\r\n   * @returns {Array}\r\n   * @private\r\n   */\n\n\n  _makeHelpMenuWithPartition() {\n    const helpMenuWithPartition = [...HELP_MENUS, ''];\n    helpMenuWithPartition.splice(3, 0, '');\n    return helpMenuWithPartition;\n  }\n  /**\r\n   * Add help menu\r\n   * @private\r\n   */\n\n\n  _addHelpMenus() {\n    const helpMenuWithPartition = this._makeHelpMenuWithPartition();\n\n    snippet.forEach(helpMenuWithPartition, menuName => {\n      if (!menuName) {\n        this._makeMenuPartitionElement();\n      } else {\n        this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');\n\n        if (menuName) {\n          this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);\n        }\n      }\n    });\n  }\n  /**\r\n   * Make menu partition element\r\n   * @private\r\n   */\n\n\n  _makeMenuPartitionElement() {\n    const partitionElement = document.createElement('li');\n    const partitionInnerElement = document.createElement('div');\n    partitionElement.className = cls('item');\n    partitionInnerElement.className = cls('icpartition');\n    partitionElement.appendChild(partitionInnerElement);\n\n    this._menuElement.appendChild(partitionElement);\n  }\n  /**\r\n   * Make menu button element\r\n   * @param {string} menuName - menu name\r\n   * @param {Array} useIconTypes - Possible values are  \\['normal', 'active', 'hover', 'disabled'\\]\r\n   * @param {string} menuType - 'normal' or 'help'\r\n   * @private\r\n   */\n\n\n  _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {\n    const btnElement = document.createElement('li');\n    const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);\n\n    this._addTooltipAttribute(btnElement, menuName);\n\n    btnElement.className = `tie-btn-${menuName} ${cls('item')} ${menuType}`;\n    btnElement.innerHTML = menuItemHtml;\n\n    this._menuElement.appendChild(btnElement);\n  }\n  /**\r\n   * Add help action event\r\n   * @private\r\n   */\n\n\n  _addHelpActionEvent() {\n    snippet.forEach(HELP_MENUS, helpName => {\n      this.eventHandler[helpName] = () => this._actions.main[helpName]();\n\n      this._buttonElements[helpName].addEventListener('click', this.eventHandler[helpName]);\n    });\n  }\n  /**\r\n   * Remove help action event\r\n   * @private\r\n   */\n\n\n  _removeHelpActionEvent() {\n    snippet.forEach(HELP_MENUS, helpName => {\n      this._buttonElements[helpName].removeEventListener('click', this.eventHandler[helpName]);\n    });\n  }\n  /**\r\n   * Add attribute for menu tooltip\r\n   * @param {HTMLElement} element - menu element\r\n   * @param {string} tooltipName - tooltipName\r\n   * @private\r\n   */\n\n\n  _addTooltipAttribute(element, tooltipName) {\n    element.setAttribute('tooltip-content', this._locale.localize(tooltipName.replace(/^[a-z]/g, $0 => $0.toUpperCase())));\n  }\n  /**\r\n   * Add download event\r\n   * @private\r\n   */\n\n\n  _addDownloadEvent() {\n    this.eventHandler.download = () => this._actions.main.download();\n\n    snippet.forEach(this._buttonElements.download, element => {\n      element.addEventListener('click', this.eventHandler.download);\n    });\n  }\n\n  _removeDownloadEvent() {\n    snippet.forEach(this._buttonElements.download, element => {\n      element.removeEventListener('click', this.eventHandler.download);\n    });\n  }\n  /**\r\n   * Add load event\r\n   * @private\r\n   */\n\n\n  _addLoadEvent() {\n    this.eventHandler.loadImage = event => this._actions.main.load(event.target.files[0]);\n\n    snippet.forEach(this._buttonElements.load, element => {\n      element.addEventListener('change', this.eventHandler.loadImage);\n    });\n  }\n  /**\r\n   * Remmove load event\r\n   * @private\r\n   */\n\n\n  _removeLoadEvent() {\n    snippet.forEach(this._buttonElements.load, element => {\n      element.removeEventListener('change', this.eventHandler.loadImage);\n    });\n  }\n  /**\r\n   * Add menu event\r\n   * @param {string} menuName - menu name\r\n   * @private\r\n   */\n\n\n  _addMainMenuEvent(menuName) {\n    this.eventHandler[menuName] = () => this.changeMenu(menuName);\n\n    this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]);\n  }\n  /**\r\n   * Add menu event\r\n   * @param {string} menuName - menu name\r\n   * @private\r\n   */\n\n\n  _addSubMenuEvent(menuName) {\n    this[menuName].addEvent(this._actions[menuName]);\n  }\n  /**\r\n   * Add menu event\r\n   * @private\r\n   */\n\n\n  _addMenuEvent() {\n    snippet.forEach(this.options.menu, menuName => {\n      this._addMainMenuEvent(menuName);\n\n      this._addSubMenuEvent(menuName);\n    });\n  }\n  /**\r\n   * Remove menu event\r\n   * @private\r\n   */\n\n\n  _removeMainMenuEvent() {\n    snippet.forEach(this.options.menu, menuName => {\n      this._buttonElements[menuName].removeEventListener('click', this.eventHandler[menuName]);\n    });\n  }\n  /**\r\n   * Get editor area element\r\n   * @returns {HTMLElement} editor area html element\r\n   * @ignore\r\n   */\n\n\n  getEditorArea() {\n    return this._editorElement;\n  }\n  /**\r\n   * Add event for menu items\r\n   * @ignore\r\n   */\n\n\n  activeMenuEvent() {\n    if (this._initMenuEvent) {\n      return;\n    }\n\n    this._addHelpActionEvent();\n\n    this._addDownloadEvent();\n\n    this._addMenuEvent();\n\n    this._initMenu();\n\n    this._initMenuEvent = true;\n  }\n  /**\r\n   * Remove ui event\r\n   * @private\r\n   */\n\n\n  _removeUiEvent() {\n    this._removeHelpActionEvent();\n\n    this._removeDownloadEvent();\n\n    this._removeLoadEvent();\n\n    this._removeMainMenuEvent();\n  }\n  /**\r\n   * Destroy all menu instance\r\n   * @private\r\n   */\n\n\n  _destroyAllMenu() {\n    snippet.forEach(this.options.menu, menuName => {\n      this[menuName].destroy();\n    });\n  }\n  /**\r\n   * Init canvas\r\n   * @ignore\r\n   */\n\n\n  initCanvas() {\n    const loadImageInfo = this._getLoadImage();\n\n    if (loadImageInfo.path) {\n      this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(() => {\n        this.activeMenuEvent();\n      });\n    }\n\n    this._addLoadEvent();\n\n    const gridVisual = document.createElement('div');\n    gridVisual.className = cls('grid-visual');\n    const 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>`;\n    gridVisual.innerHTML = grid;\n    this._editorContainerElement = this._editorElement.querySelector('.tui-image-editor-canvas-container');\n\n    this._editorContainerElement.appendChild(gridVisual);\n  }\n  /**\r\n   * get editor area element\r\n   * @returns {Object} load image option\r\n   * @private\r\n   */\n\n\n  _getLoadImage() {\n    return this.options.loadImage;\n  }\n  /**\r\n   * change menu\r\n   * @param {string} menuName - menu name\r\n   * @param {boolean} toggle - whether toogle or not\r\n   * @param {boolean} discardSelection - discard selection\r\n   * @ignore\r\n   */\n\n\n  changeMenu(menuName, toggle = true, discardSelection = true) {\n    if (!this._submenuChangeTransection) {\n      this._submenuChangeTransection = true;\n\n      this._changeMenu(menuName, toggle, discardSelection);\n\n      this._submenuChangeTransection = false;\n    }\n  }\n  /**\r\n   * change menu\r\n   * @param {string} menuName - menu name\r\n   * @param {boolean} toggle - whether toogle or not\r\n   * @param {boolean} discardSelection - discard selection\r\n   * @private\r\n   */\n\n\n  _changeMenu(menuName, toggle, discardSelection) {\n    if (this.submenu) {\n      this._buttonElements[this.submenu].classList.remove('active');\n\n      this._mainElement.classList.remove(`tui-image-editor-menu-${this.submenu}`);\n\n      if (discardSelection) {\n        this._actions.main.discardSelection();\n      }\n\n      this._actions.main.changeSelectableAll(true);\n\n      this[this.submenu].changeStandbyMode();\n    }\n\n    if (this.submenu === menuName && toggle) {\n      this.submenu = null;\n    } else {\n      this._buttonElements[menuName].classList.add('active');\n\n      this._mainElement.classList.add(`tui-image-editor-menu-${menuName}`);\n\n      this.submenu = menuName;\n      this[this.submenu].changeStartMode();\n    }\n\n    this.resizeEditor();\n  }\n  /**\r\n   * Init menu\r\n   * @private\r\n   */\n\n\n  _initMenu() {\n    if (this.options.initMenu) {\n      const evt = document.createEvent('MouseEvents');\n      evt.initEvent('click', true, false);\n\n      this._buttonElements[this.options.initMenu].dispatchEvent(evt);\n    }\n\n    if (this.icon) {\n      this.icon.registDefaultIcon();\n    }\n  }\n  /**\r\n   * Get canvas max Dimension\r\n   * @returns {Object} - width & height of editor\r\n   * @private\r\n   */\n\n\n  _getCanvasMaxDimension() {\n    const {\n      maxWidth,\n      maxHeight\n    } = this._editorContainerElement.style;\n    const width = parseFloat(maxWidth);\n    const height = parseFloat(maxHeight);\n    return {\n      width,\n      height\n    };\n  }\n  /**\r\n   * Set editor position\r\n   * @param {string} menuBarPosition - top or right or bottom or left\r\n   * @private\r\n   */\n  // eslint-disable-next-line complexity\n\n\n  _setEditorPosition(menuBarPosition) {\n    const {\n      width,\n      height\n    } = this._getCanvasMaxDimension();\n\n    const editorElementStyle = this._editorElement.style;\n    let top = 0;\n    let left = 0;\n\n    if (this.submenu) {\n      if (menuBarPosition === 'bottom') {\n        if (height > this._editorElementWrap.scrollHeight - 150) {\n          top = (height - this._editorElementWrap.scrollHeight) / 2;\n        } else {\n          top = 150 / 2 * -1;\n        }\n      } else if (menuBarPosition === 'top') {\n        if (height > this._editorElementWrap.offsetHeight - 150) {\n          top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2;\n        } else {\n          top = 150 / 2;\n        }\n      } else if (menuBarPosition === 'left') {\n        if (width > this._editorElementWrap.offsetWidth - 248) {\n          left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2;\n        } else {\n          left = 248 / 2;\n        }\n      } else if (menuBarPosition === 'right') {\n        if (width > this._editorElementWrap.scrollWidth - 248) {\n          left = (width - this._editorElementWrap.scrollWidth) / 2;\n        } else {\n          left = 248 / 2 * -1;\n        }\n      }\n    }\n\n    editorElementStyle.top = `${top}px`;\n    editorElementStyle.left = `${left}px`;\n  }\n\n}\n\nexport default Ui;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/ui.js"],"names":["snippet","HELP_MENUS","getSelector","assignmentForDestroy","cls","mainContainer","controls","Theme","Shape","Crop","Flip","Rotate","Text","Mask","Icon","Draw","Filter","Locale","SUB_UI_COMPONENT","BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION","Ui","constructor","element","options","actions","_initializeOption","_actions","submenu","imageSize","uiSize","_locale","locale","theme","eventHandler","_submenuChangeTransection","_selectedElement","_mainElement","_editorElementWrap","_editorElement","_menuElement","_subMenuElement","_makeUiElement","_setUiSize","_initMenuEvent","_makeSubMenu","destroy","_removeUiEvent","_destroyAllMenu","innerHTML","setUiDefaultSelectionStyle","option","extend","applyCropSelectionStyle","applyGroupSelectionStyle","selectionStyle","cornerStyle","cornerSize","cornerColor","cornerStrokeColor","transparentCorners","lineWidth","borderColor","resizeEditor","width","height","_getCanvasMaxDimension","editorElementStyle","style","menuBarPosition","_setEditorPosition","bottom","top","left","selectElementClassList","classList","offsetWidth","add","remove","changeHelpButtonEnabled","buttonType","enableStatus","buttonClassList","_buttonElements","loadImage","path","name","menuIconPath","menu","initMenu","elementDimension","forEach","menuName","SubComponentClass","replace","$0","toUpperCase","_makeMenuElement","querySelector","makeSvgIcon","makeMenSvgIconSet","bind","usageStatistics","selectedElement","window","nodeType","document","selector","biImage","getStyle","loadButtonStyle","downloadButtonStyle","commonStyle","headerStyle","submenuStyle","download","querySelectorAll","load","_addHelpMenus","_makeHelpMenuWithPartition","helpMenuWithPartition","splice","_makeMenuPartitionElement","partitionElement","createElement","partitionInnerElement","className","appendChild","useIconTypes","menuType","btnElement","menuItemHtml","_addTooltipAttribute","_addHelpActionEvent","helpName","main","addEventListener","_removeHelpActionEvent","removeEventListener","tooltipName","setAttribute","localize","_addDownloadEvent","_removeDownloadEvent","_addLoadEvent","event","target","files","_removeLoadEvent","_addMainMenuEvent","changeMenu","_addSubMenuEvent","addEvent","_addMenuEvent","_removeMainMenuEvent","getEditorArea","activeMenuEvent","_initMenu","initCanvas","loadImageInfo","_getLoadImage","initLoadImage","then","gridVisual","grid","_editorContainerElement","toggle","discardSelection","_changeMenu","changeSelectableAll","changeStandbyMode","changeStartMode","evt","createEvent","initEvent","dispatchEvent","icon","registDefaultIcon","maxWidth","maxHeight","parseFloat","scrollHeight","offsetHeight","scrollWidth"],"mappings":"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","sourcesContent":["import snippet from 'tui-code-snippet';\r\nimport { HELP_MENUS } from './consts';\r\nimport { getSelector, assignmentForDestroy, cls } from './util';\r\nimport mainContainer from './ui/template/mainContainer';\r\nimport controls from './ui/template/controls';\r\n\r\nimport Theme from './ui/theme/theme';\r\nimport Shape from './ui/shape';\r\nimport Crop from './ui/crop';\r\nimport Flip from './ui/flip';\r\nimport Rotate from './ui/rotate';\r\nimport Text from './ui/text';\r\nimport Mask from './ui/mask';\r\nimport Icon from './ui/icon';\r\nimport Draw from './ui/draw';\r\nimport Filter from './ui/filter';\r\nimport Locale from './ui/locale/locale';\r\n\r\nconst SUB_UI_COMPONENT = {\r\n  Shape,\r\n  Crop,\r\n  Flip,\r\n  Rotate,\r\n  Text,\r\n  Mask,\r\n  Icon,\r\n  Draw,\r\n  Filter,\r\n};\r\n\r\nconst BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';\r\n\r\n/**\r\n * Ui class\r\n * @class\r\n * @param {string|HTMLElement} element - Wrapper's element or selector\r\n * @param {Object} [options] - Ui setting options\r\n *   @param {number} options.loadImage - Init default load image\r\n *   @param {number} options.initMenu - Init start menu\r\n *   @param {Boolean} [options.menuBarPosition=bottom] - Let\r\n *   @param {Boolean} [options.applyCropSelectionStyle=false] - Let\r\n *   @param {Boolean} [options.usageStatistics=false] - Use statistics or not\r\n *   @param {Object} [options.uiSize] - ui size of editor\r\n *     @param {string} options.uiSize.width - width of ui\r\n *     @param {string} options.uiSize.height - height of ui\r\n * @param {Object} actions - ui action instance\r\n */\r\nclass Ui {\r\n  constructor(element, options, actions) {\r\n    this.options = this._initializeOption(options);\r\n    this._actions = actions;\r\n    this.submenu = false;\r\n    this.imageSize = {};\r\n    this.uiSize = {};\r\n    this._locale = new Locale(this.options.locale);\r\n    this.theme = new Theme(this.options.theme);\r\n    this.eventHandler = {};\r\n    this._submenuChangeTransection = false;\r\n    this._selectedElement = null;\r\n    this._mainElement = null;\r\n    this._editorElementWrap = null;\r\n    this._editorElement = null;\r\n    this._menuElement = null;\r\n    this._subMenuElement = null;\r\n    this._makeUiElement(element);\r\n    this._setUiSize();\r\n    this._initMenuEvent = false;\r\n\r\n    this._makeSubMenu();\r\n  }\r\n\r\n  /**\r\n   * Destroys the instance.\r\n   */\r\n  destroy() {\r\n    this._removeUiEvent();\r\n    this._destroyAllMenu();\r\n    this._selectedElement.innerHTML = '';\r\n\r\n    assignmentForDestroy(this);\r\n  }\r\n\r\n  /**\r\n   * Set Default Selection for includeUI\r\n   * @param {Object} option - imageEditor options\r\n   * @returns {Object} - extends selectionStyle option\r\n   * @ignore\r\n   */\r\n  setUiDefaultSelectionStyle(option) {\r\n    return snippet.extend(\r\n      {\r\n        applyCropSelectionStyle: true,\r\n        applyGroupSelectionStyle: true,\r\n        selectionStyle: {\r\n          cornerStyle: 'circle',\r\n          cornerSize: 16,\r\n          cornerColor: '#fff',\r\n          cornerStrokeColor: '#fff',\r\n          transparentCorners: false,\r\n          lineWidth: 2,\r\n          borderColor: '#fff',\r\n        },\r\n      },\r\n      option\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Change editor size\r\n   * @param {Object} resizeInfo - ui & image size info\r\n   *   @param {Object} [resizeInfo.uiSize] - image size dimension\r\n   *     @param {string} resizeInfo.uiSize.width - ui width\r\n   *     @param {string} resizeInfo.uiSize.height - ui height\r\n   *   @param {Object} [resizeInfo.imageSize] - image size dimension\r\n   *     @param {Number} resizeInfo.imageSize.oldWidth - old width\r\n   *     @param {Number} resizeInfo.imageSize.oldHeight - old height\r\n   *     @param {Number} resizeInfo.imageSize.newWidth - new width\r\n   *     @param {Number} resizeInfo.imageSize.newHeight - new height\r\n   * @example\r\n   * // Change the image size and ui size, and change the affected ui state together.\r\n   * imageEditor.ui.resizeEditor({\r\n   *     imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700},\r\n   *     uiSize: {width: 1000, height: 1000}\r\n   * });\r\n   * @example\r\n   * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui)\r\n   * imageEditor.ui.resizeEditor();\r\n   */\r\n  resizeEditor({ uiSize, imageSize = this.imageSize } = {}) {\r\n    if (imageSize !== this.imageSize) {\r\n      this.imageSize = imageSize;\r\n    }\r\n    if (uiSize) {\r\n      this._setUiSize(uiSize);\r\n    }\r\n\r\n    const { width, height } = this._getCanvasMaxDimension();\r\n    const editorElementStyle = this._editorElement.style;\r\n    const { menuBarPosition } = this.options;\r\n\r\n    editorElementStyle.height = `${height}px`;\r\n    editorElementStyle.width = `${width}px`;\r\n\r\n    this._setEditorPosition(menuBarPosition);\r\n\r\n    this._editorElementWrap.style.bottom = `0px`;\r\n    this._editorElementWrap.style.top = `0px`;\r\n    this._editorElementWrap.style.left = `0px`;\r\n    this._editorElementWrap.style.width = `100%`;\r\n\r\n    const selectElementClassList = this._selectedElement.classList;\r\n\r\n    if (\r\n      menuBarPosition === 'top' &&\r\n      this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION\r\n    ) {\r\n      selectElementClassList.add('tui-image-editor-top-optimization');\r\n    } else {\r\n      selectElementClassList.remove('tui-image-editor-top-optimization');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Change help button status\r\n   * @param {string} buttonType - target button type\r\n   * @param {Boolean} enableStatus - enabled status\r\n   * @ignore\r\n   */\r\n  changeHelpButtonEnabled(buttonType, enableStatus) {\r\n    const buttonClassList = this._buttonElements[buttonType].classList;\r\n\r\n    buttonClassList[enableStatus ? 'add' : 'remove']('enabled');\r\n  }\r\n\r\n  /**\r\n   * Change delete button status\r\n   * @param {Object} [options] - Ui setting options\r\n   *   @param {object} [options.loadImage] - Init default load image\r\n   *   @param {string} [options.initMenu] - Init start menu\r\n   *   @param {string} [options.menuBarPosition=bottom] - Let\r\n   *   @param {boolean} [options.applyCropSelectionStyle=false] - Let\r\n   *   @param {boolean} [options.usageStatistics=false] - Send statistics ping or not\r\n   * @returns {Object} initialize option\r\n   * @private\r\n   */\r\n  _initializeOption(options) {\r\n    return snippet.extend(\r\n      {\r\n        loadImage: {\r\n          path: '',\r\n          name: '',\r\n        },\r\n        locale: {},\r\n        menuIconPath: '',\r\n        menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],\r\n        initMenu: '',\r\n        uiSize: {\r\n          width: '100%',\r\n          height: '100%',\r\n        },\r\n        menuBarPosition: 'bottom',\r\n      },\r\n      options\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Set ui container size\r\n   * @param {Object} uiSize - ui dimension\r\n   *   @param {string} uiSize.width - css width property\r\n   *   @param {string} uiSize.height - css height property\r\n   * @private\r\n   */\r\n  _setUiSize(uiSize = this.options.uiSize) {\r\n    const elementDimension = this._selectedElement.style;\r\n    elementDimension.width = uiSize.width;\r\n    elementDimension.height = uiSize.height;\r\n  }\r\n\r\n  /**\r\n   * Make submenu dom element\r\n   * @private\r\n   */\r\n  _makeSubMenu() {\r\n    snippet.forEach(this.options.menu, (menuName) => {\r\n      const SubComponentClass =\r\n        SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, ($0) => $0.toUpperCase())];\r\n\r\n      // make menu element\r\n      this._makeMenuElement(menuName);\r\n\r\n      // menu btn element\r\n      this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);\r\n\r\n      // submenu ui instance\r\n      this[menuName] = new SubComponentClass(this._subMenuElement, {\r\n        locale: this._locale,\r\n        makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\r\n        menuBarPosition: this.options.menuBarPosition,\r\n        usageStatistics: this.options.usageStatistics,\r\n      });\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Make primary ui dom element\r\n   * @param {string|HTMLElement} element - Wrapper's element or selector\r\n   * @private\r\n   */\r\n  _makeUiElement(element) {\r\n    let selectedElement;\r\n\r\n    window.snippet = snippet;\r\n\r\n    if (element.nodeType) {\r\n      selectedElement = element;\r\n    } else {\r\n      selectedElement = document.querySelector(element);\r\n    }\r\n    const selector = getSelector(selectedElement);\r\n\r\n    selectedElement.classList.add('tui-image-editor-container');\r\n    selectedElement.innerHTML =\r\n      controls({\r\n        locale: this._locale,\r\n        biImage: this.theme.getStyle('common.bi'),\r\n        loadButtonStyle: this.theme.getStyle('loadButton'),\r\n        downloadButtonStyle: this.theme.getStyle('downloadButton'),\r\n      }) +\r\n      mainContainer({\r\n        locale: this._locale,\r\n        biImage: this.theme.getStyle('common.bi'),\r\n        commonStyle: this.theme.getStyle('common'),\r\n        headerStyle: this.theme.getStyle('header'),\r\n        loadButtonStyle: this.theme.getStyle('loadButton'),\r\n        downloadButtonStyle: this.theme.getStyle('downloadButton'),\r\n        submenuStyle: this.theme.getStyle('submenu'),\r\n      });\r\n\r\n    this._selectedElement = selectedElement;\r\n    this._selectedElement.classList.add(this.options.menuBarPosition);\r\n\r\n    this._mainElement = selector('.tui-image-editor-main');\r\n    this._editorElementWrap = selector('.tui-image-editor-wrap');\r\n    this._editorElement = selector('.tui-image-editor');\r\n    this._menuElement = selector('.tui-image-editor-menu');\r\n    this._subMenuElement = selector('.tui-image-editor-submenu');\r\n    this._buttonElements = {\r\n      download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),\r\n      load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn'),\r\n    };\r\n\r\n    this._addHelpMenus();\r\n  }\r\n\r\n  /**\r\n   * make array for help menu output, including partitions.\r\n   * @returns {Array}\r\n   * @private\r\n   */\r\n  _makeHelpMenuWithPartition() {\r\n    const helpMenuWithPartition = [...HELP_MENUS, ''];\r\n    helpMenuWithPartition.splice(3, 0, '');\r\n\r\n    return helpMenuWithPartition;\r\n  }\r\n\r\n  /**\r\n   * Add help menu\r\n   * @private\r\n   */\r\n  _addHelpMenus() {\r\n    const helpMenuWithPartition = this._makeHelpMenuWithPartition();\r\n\r\n    snippet.forEach(helpMenuWithPartition, (menuName) => {\r\n      if (!menuName) {\r\n        this._makeMenuPartitionElement();\r\n      } else {\r\n        this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');\r\n\r\n        if (menuName) {\r\n          this._buttonElements[menuName] = this._menuElement.querySelector(`.tie-btn-${menuName}`);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Make menu partition element\r\n   * @private\r\n   */\r\n  _makeMenuPartitionElement() {\r\n    const partitionElement = document.createElement('li');\r\n    const partitionInnerElement = document.createElement('div');\r\n    partitionElement.className = cls('item');\r\n    partitionInnerElement.className = cls('icpartition');\r\n    partitionElement.appendChild(partitionInnerElement);\r\n\r\n    this._menuElement.appendChild(partitionElement);\r\n  }\r\n\r\n  /**\r\n   * Make menu button element\r\n   * @param {string} menuName - menu name\r\n   * @param {Array} useIconTypes - Possible values are  \\['normal', 'active', 'hover', 'disabled'\\]\r\n   * @param {string} menuType - 'normal' or 'help'\r\n   * @private\r\n   */\r\n  _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {\r\n    const btnElement = document.createElement('li');\r\n    const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);\r\n\r\n    this._addTooltipAttribute(btnElement, menuName);\r\n    btnElement.className = `tie-btn-${menuName} ${cls('item')} ${menuType}`;\r\n    btnElement.innerHTML = menuItemHtml;\r\n\r\n    this._menuElement.appendChild(btnElement);\r\n  }\r\n\r\n  /**\r\n   * Add help action event\r\n   * @private\r\n   */\r\n  _addHelpActionEvent() {\r\n    snippet.forEach(HELP_MENUS, (helpName) => {\r\n      this.eventHandler[helpName] = () => this._actions.main[helpName]();\r\n      this._buttonElements[helpName].addEventListener('click', this.eventHandler[helpName]);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Remove help action event\r\n   * @private\r\n   */\r\n  _removeHelpActionEvent() {\r\n    snippet.forEach(HELP_MENUS, (helpName) => {\r\n      this._buttonElements[helpName].removeEventListener('click', this.eventHandler[helpName]);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add attribute for menu tooltip\r\n   * @param {HTMLElement} element - menu element\r\n   * @param {string} tooltipName - tooltipName\r\n   * @private\r\n   */\r\n  _addTooltipAttribute(element, tooltipName) {\r\n    element.setAttribute(\r\n      'tooltip-content',\r\n      this._locale.localize(tooltipName.replace(/^[a-z]/g, ($0) => $0.toUpperCase()))\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Add download event\r\n   * @private\r\n   */\r\n  _addDownloadEvent() {\r\n    this.eventHandler.download = () => this._actions.main.download();\r\n    snippet.forEach(this._buttonElements.download, (element) => {\r\n      element.addEventListener('click', this.eventHandler.download);\r\n    });\r\n  }\r\n\r\n  _removeDownloadEvent() {\r\n    snippet.forEach(this._buttonElements.download, (element) => {\r\n      element.removeEventListener('click', this.eventHandler.download);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add load event\r\n   * @private\r\n   */\r\n  _addLoadEvent() {\r\n    this.eventHandler.loadImage = (event) => this._actions.main.load(event.target.files[0]);\r\n\r\n    snippet.forEach(this._buttonElements.load, (element) => {\r\n      element.addEventListener('change', this.eventHandler.loadImage);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Remmove load event\r\n   * @private\r\n   */\r\n  _removeLoadEvent() {\r\n    snippet.forEach(this._buttonElements.load, (element) => {\r\n      element.removeEventListener('change', this.eventHandler.loadImage);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add menu event\r\n   * @param {string} menuName - menu name\r\n   * @private\r\n   */\r\n  _addMainMenuEvent(menuName) {\r\n    this.eventHandler[menuName] = () => this.changeMenu(menuName);\r\n    this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]);\r\n  }\r\n\r\n  /**\r\n   * Add menu event\r\n   * @param {string} menuName - menu name\r\n   * @private\r\n   */\r\n  _addSubMenuEvent(menuName) {\r\n    this[menuName].addEvent(this._actions[menuName]);\r\n  }\r\n\r\n  /**\r\n   * Add menu event\r\n   * @private\r\n   */\r\n  _addMenuEvent() {\r\n    snippet.forEach(this.options.menu, (menuName) => {\r\n      this._addMainMenuEvent(menuName);\r\n      this._addSubMenuEvent(menuName);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Remove menu event\r\n   * @private\r\n   */\r\n  _removeMainMenuEvent() {\r\n    snippet.forEach(this.options.menu, (menuName) => {\r\n      this._buttonElements[menuName].removeEventListener('click', this.eventHandler[menuName]);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Get editor area element\r\n   * @returns {HTMLElement} editor area html element\r\n   * @ignore\r\n   */\r\n  getEditorArea() {\r\n    return this._editorElement;\r\n  }\r\n\r\n  /**\r\n   * Add event for menu items\r\n   * @ignore\r\n   */\r\n  activeMenuEvent() {\r\n    if (this._initMenuEvent) {\r\n      return;\r\n    }\r\n\r\n    this._addHelpActionEvent();\r\n    this._addDownloadEvent();\r\n    this._addMenuEvent();\r\n    this._initMenu();\r\n    this._initMenuEvent = true;\r\n  }\r\n\r\n  /**\r\n   * Remove ui event\r\n   * @private\r\n   */\r\n  _removeUiEvent() {\r\n    this._removeHelpActionEvent();\r\n    this._removeDownloadEvent();\r\n    this._removeLoadEvent();\r\n    this._removeMainMenuEvent();\r\n  }\r\n\r\n  /**\r\n   * Destroy all menu instance\r\n   * @private\r\n   */\r\n  _destroyAllMenu() {\r\n    snippet.forEach(this.options.menu, (menuName) => {\r\n      this[menuName].destroy();\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Init canvas\r\n   * @ignore\r\n   */\r\n  initCanvas() {\r\n    const loadImageInfo = this._getLoadImage();\r\n    if (loadImageInfo.path) {\r\n      this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(() => {\r\n        this.activeMenuEvent();\r\n      });\r\n    }\r\n\r\n    this._addLoadEvent();\r\n\r\n    const gridVisual = document.createElement('div');\r\n\r\n    gridVisual.className = cls('grid-visual');\r\n    const grid = `<table>\r\n           <tr><td class=\"dot left-top\"></td><td></td><td class=\"dot right-top\"></td></tr>\r\n           <tr><td></td><td></td><td></td></tr>\r\n           <tr><td class=\"dot left-bottom\"></td><td></td><td class=\"dot right-bottom\"></td></tr>\r\n         </table>`;\r\n    gridVisual.innerHTML = grid;\r\n    this._editorContainerElement = this._editorElement.querySelector(\r\n      '.tui-image-editor-canvas-container'\r\n    );\r\n    this._editorContainerElement.appendChild(gridVisual);\r\n  }\r\n\r\n  /**\r\n   * get editor area element\r\n   * @returns {Object} load image option\r\n   * @private\r\n   */\r\n  _getLoadImage() {\r\n    return this.options.loadImage;\r\n  }\r\n\r\n  /**\r\n   * change menu\r\n   * @param {string} menuName - menu name\r\n   * @param {boolean} toggle - whether toogle or not\r\n   * @param {boolean} discardSelection - discard selection\r\n   * @ignore\r\n   */\r\n  changeMenu(menuName, toggle = true, discardSelection = true) {\r\n    if (!this._submenuChangeTransection) {\r\n      this._submenuChangeTransection = true;\r\n      this._changeMenu(menuName, toggle, discardSelection);\r\n      this._submenuChangeTransection = false;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * change menu\r\n   * @param {string} menuName - menu name\r\n   * @param {boolean} toggle - whether toogle or not\r\n   * @param {boolean} discardSelection - discard selection\r\n   * @private\r\n   */\r\n  _changeMenu(menuName, toggle, discardSelection) {\r\n    if (this.submenu) {\r\n      this._buttonElements[this.submenu].classList.remove('active');\r\n      this._mainElement.classList.remove(`tui-image-editor-menu-${this.submenu}`);\r\n      if (discardSelection) {\r\n        this._actions.main.discardSelection();\r\n      }\r\n      this._actions.main.changeSelectableAll(true);\r\n      this[this.submenu].changeStandbyMode();\r\n    }\r\n\r\n    if (this.submenu === menuName && toggle) {\r\n      this.submenu = null;\r\n    } else {\r\n      this._buttonElements[menuName].classList.add('active');\r\n      this._mainElement.classList.add(`tui-image-editor-menu-${menuName}`);\r\n      this.submenu = menuName;\r\n      this[this.submenu].changeStartMode();\r\n    }\r\n\r\n    this.resizeEditor();\r\n  }\r\n\r\n  /**\r\n   * Init menu\r\n   * @private\r\n   */\r\n  _initMenu() {\r\n    if (this.options.initMenu) {\r\n      const evt = document.createEvent('MouseEvents');\r\n      evt.initEvent('click', true, false);\r\n      this._buttonElements[this.options.initMenu].dispatchEvent(evt);\r\n    }\r\n\r\n    if (this.icon) {\r\n      this.icon.registDefaultIcon();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get canvas max Dimension\r\n   * @returns {Object} - width & height of editor\r\n   * @private\r\n   */\r\n  _getCanvasMaxDimension() {\r\n    const { maxWidth, maxHeight } = this._editorContainerElement.style;\r\n    const width = parseFloat(maxWidth);\r\n    const height = parseFloat(maxHeight);\r\n\r\n    return {\r\n      width,\r\n      height,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Set editor position\r\n   * @param {string} menuBarPosition - top or right or bottom or left\r\n   * @private\r\n   */\r\n  // eslint-disable-next-line complexity\r\n  _setEditorPosition(menuBarPosition) {\r\n    const { width, height } = this._getCanvasMaxDimension();\r\n    const editorElementStyle = this._editorElement.style;\r\n    let top = 0;\r\n    let left = 0;\r\n\r\n    if (this.submenu) {\r\n      if (menuBarPosition === 'bottom') {\r\n        if (height > this._editorElementWrap.scrollHeight - 150) {\r\n          top = (height - this._editorElementWrap.scrollHeight) / 2;\r\n        } else {\r\n          top = (150 / 2) * -1;\r\n        }\r\n      } else if (menuBarPosition === 'top') {\r\n        if (height > this._editorElementWrap.offsetHeight - 150) {\r\n          top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2;\r\n        } else {\r\n          top = 150 / 2;\r\n        }\r\n      } else if (menuBarPosition === 'left') {\r\n        if (width > this._editorElementWrap.offsetWidth - 248) {\r\n          left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2;\r\n        } else {\r\n          left = 248 / 2;\r\n        }\r\n      } else if (menuBarPosition === 'right') {\r\n        if (width > this._editorElementWrap.scrollWidth - 248) {\r\n          left = (width - this._editorElementWrap.scrollWidth) / 2;\r\n        } else {\r\n          left = (248 / 2) * -1;\r\n        }\r\n      }\r\n    }\r\n    editorElementStyle.top = `${top}px`;\r\n    editorElementStyle.left = `${left}px`;\r\n  }\r\n}\r\n\r\nexport default Ui;\r\n"]},"metadata":{},"sourceType":"module"}