6b393d5d5e540306cf7df76afcaa3db4.json 12.7 KB
{"ast":null,"code":"import { assignmentForDestroy, getRgb } from '../util';\nimport Colorpicker from './tools/colorpicker';\nimport Range from './tools/range';\nimport Submenu from './submenuBase';\nimport templateHtml from './template/submenu/draw';\nimport { defaultDrawRangeValus } from '../consts';\nconst DRAW_OPACITY = 0.7;\n/**\r\n * Draw ui class\r\n * @class\r\n * @ignore\r\n */\n\nclass Draw extends Submenu {\n  constructor(subMenuElement, {\n    locale,\n    makeSvgIcon,\n    menuBarPosition,\n    usageStatistics\n  }) {\n    super(subMenuElement, {\n      locale,\n      name: 'draw',\n      makeSvgIcon,\n      menuBarPosition,\n      templateHtml,\n      usageStatistics\n    });\n    this._els = {\n      lineSelectButton: this.selector('.tie-draw-line-select-button'),\n      drawColorPicker: new Colorpicker(this.selector('.tie-draw-color'), '#00a9ff', this.toggleDirection, this.usageStatistics),\n      drawRange: new Range({\n        slider: this.selector('.tie-draw-range'),\n        input: this.selector('.tie-draw-range-value')\n      }, defaultDrawRangeValus)\n    };\n    this.type = null;\n    this.color = this._els.drawColorPicker.color;\n    this.width = this._els.drawRange.value;\n  }\n  /**\r\n   * Destroys the instance.\r\n   */\n\n\n  destroy() {\n    this._removeEvent();\n\n    this._els.drawColorPicker.destroy();\n\n    this._els.drawRange.destroy();\n\n    assignmentForDestroy(this);\n  }\n  /**\r\n   * Add event for draw\r\n   * @param {Object} actions - actions for crop\r\n   *   @param {Function} actions.setDrawMode - set draw mode\r\n   */\n\n\n  addEvent(actions) {\n    this.eventHandler.changeDrawType = this._changeDrawType.bind(this);\n    this.actions = actions;\n\n    this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType);\n\n    this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this));\n\n    this._els.drawRange.on('change', this._changeDrawRange.bind(this));\n  }\n  /**\r\n   * Remove event\r\n   * @private\r\n   */\n\n\n  _removeEvent() {\n    this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);\n\n    this._els.drawColorPicker.off();\n\n    this._els.drawRange.off();\n  }\n  /**\r\n   * set draw mode - action runner\r\n   */\n\n\n  setDrawMode() {\n    this.actions.setDrawMode(this.type, {\n      width: this.width,\n      color: getRgb(this.color, DRAW_OPACITY)\n    });\n  }\n  /**\r\n   * Returns the menu to its default state.\r\n   */\n\n\n  changeStandbyMode() {\n    this.type = null;\n    this.actions.stopDrawingMode();\n    this.actions.changeSelectableAll(true);\n\n    this._els.lineSelectButton.classList.remove('free');\n\n    this._els.lineSelectButton.classList.remove('line');\n  }\n  /**\r\n   * Executed when the menu starts.\r\n   */\n\n\n  changeStartMode() {\n    this.type = 'free';\n\n    this._els.lineSelectButton.classList.add('free');\n\n    this.setDrawMode();\n  }\n  /**\r\n   * Change draw type event\r\n   * @param {object} event - line select event\r\n   * @private\r\n   */\n\n\n  _changeDrawType(event) {\n    const button = event.target.closest('.tui-image-editor-button');\n\n    if (button) {\n      const lineType = this.getButtonType(button, ['free', 'line']);\n      this.actions.discardSelection();\n\n      if (this.type === lineType) {\n        this.changeStandbyMode();\n        return;\n      }\n\n      this.changeStandbyMode();\n      this.type = lineType;\n\n      this._els.lineSelectButton.classList.add(lineType);\n\n      this.setDrawMode();\n    }\n  }\n  /**\r\n   * Change drawing color\r\n   * @param {string} color - select drawing color\r\n   * @private\r\n   */\n\n\n  _changeDrawColor(color) {\n    this.color = color || 'transparent';\n\n    if (!this.type) {\n      this.changeStartMode();\n    } else {\n      this.setDrawMode();\n    }\n  }\n  /**\r\n   * Change drawing Range\r\n   * @param {number} value - select drawing range\r\n   * @private\r\n   */\n\n\n  _changeDrawRange(value) {\n    this.width = value;\n\n    if (!this.type) {\n      this.changeStartMode();\n    } else {\n      this.setDrawMode();\n    }\n  }\n\n}\n\nexport default Draw;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/ui/draw.js"],"names":["assignmentForDestroy","getRgb","Colorpicker","Range","Submenu","templateHtml","defaultDrawRangeValus","DRAW_OPACITY","Draw","constructor","subMenuElement","locale","makeSvgIcon","menuBarPosition","usageStatistics","name","_els","lineSelectButton","selector","drawColorPicker","toggleDirection","drawRange","slider","input","type","color","width","value","destroy","_removeEvent","addEvent","actions","eventHandler","changeDrawType","_changeDrawType","bind","addEventListener","on","_changeDrawColor","_changeDrawRange","removeEventListener","off","setDrawMode","changeStandbyMode","stopDrawingMode","changeSelectableAll","classList","remove","changeStartMode","add","event","button","target","closest","lineType","getButtonType","discardSelection"],"mappings":"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","sourcesContent":["import { assignmentForDestroy, getRgb } from '../util';\r\nimport Colorpicker from './tools/colorpicker';\r\nimport Range from './tools/range';\r\nimport Submenu from './submenuBase';\r\nimport templateHtml from './template/submenu/draw';\r\nimport { defaultDrawRangeValus } from '../consts';\r\nconst DRAW_OPACITY = 0.7;\r\n\r\n/**\r\n * Draw ui class\r\n * @class\r\n * @ignore\r\n */\r\nclass Draw extends Submenu {\r\n  constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\r\n    super(subMenuElement, {\r\n      locale,\r\n      name: 'draw',\r\n      makeSvgIcon,\r\n      menuBarPosition,\r\n      templateHtml,\r\n      usageStatistics,\r\n    });\r\n\r\n    this._els = {\r\n      lineSelectButton: this.selector('.tie-draw-line-select-button'),\r\n      drawColorPicker: new Colorpicker(\r\n        this.selector('.tie-draw-color'),\r\n        '#00a9ff',\r\n        this.toggleDirection,\r\n        this.usageStatistics\r\n      ),\r\n      drawRange: new Range(\r\n        {\r\n          slider: this.selector('.tie-draw-range'),\r\n          input: this.selector('.tie-draw-range-value'),\r\n        },\r\n        defaultDrawRangeValus\r\n      ),\r\n    };\r\n\r\n    this.type = null;\r\n    this.color = this._els.drawColorPicker.color;\r\n    this.width = this._els.drawRange.value;\r\n  }\r\n\r\n  /**\r\n   * Destroys the instance.\r\n   */\r\n  destroy() {\r\n    this._removeEvent();\r\n    this._els.drawColorPicker.destroy();\r\n    this._els.drawRange.destroy();\r\n\r\n    assignmentForDestroy(this);\r\n  }\r\n\r\n  /**\r\n   * Add event for draw\r\n   * @param {Object} actions - actions for crop\r\n   *   @param {Function} actions.setDrawMode - set draw mode\r\n   */\r\n  addEvent(actions) {\r\n    this.eventHandler.changeDrawType = this._changeDrawType.bind(this);\r\n\r\n    this.actions = actions;\r\n    this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType);\r\n    this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this));\r\n    this._els.drawRange.on('change', this._changeDrawRange.bind(this));\r\n  }\r\n\r\n  /**\r\n   * Remove event\r\n   * @private\r\n   */\r\n  _removeEvent() {\r\n    this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);\r\n    this._els.drawColorPicker.off();\r\n    this._els.drawRange.off();\r\n  }\r\n\r\n  /**\r\n   * set draw mode - action runner\r\n   */\r\n  setDrawMode() {\r\n    this.actions.setDrawMode(this.type, {\r\n      width: this.width,\r\n      color: getRgb(this.color, DRAW_OPACITY),\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Returns the menu to its default state.\r\n   */\r\n  changeStandbyMode() {\r\n    this.type = null;\r\n    this.actions.stopDrawingMode();\r\n    this.actions.changeSelectableAll(true);\r\n    this._els.lineSelectButton.classList.remove('free');\r\n    this._els.lineSelectButton.classList.remove('line');\r\n  }\r\n\r\n  /**\r\n   * Executed when the menu starts.\r\n   */\r\n  changeStartMode() {\r\n    this.type = 'free';\r\n    this._els.lineSelectButton.classList.add('free');\r\n    this.setDrawMode();\r\n  }\r\n\r\n  /**\r\n   * Change draw type event\r\n   * @param {object} event - line select event\r\n   * @private\r\n   */\r\n  _changeDrawType(event) {\r\n    const button = event.target.closest('.tui-image-editor-button');\r\n    if (button) {\r\n      const lineType = this.getButtonType(button, ['free', 'line']);\r\n      this.actions.discardSelection();\r\n\r\n      if (this.type === lineType) {\r\n        this.changeStandbyMode();\r\n\r\n        return;\r\n      }\r\n\r\n      this.changeStandbyMode();\r\n      this.type = lineType;\r\n      this._els.lineSelectButton.classList.add(lineType);\r\n      this.setDrawMode();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Change drawing color\r\n   * @param {string} color - select drawing color\r\n   * @private\r\n   */\r\n  _changeDrawColor(color) {\r\n    this.color = color || 'transparent';\r\n    if (!this.type) {\r\n      this.changeStartMode();\r\n    } else {\r\n      this.setDrawMode();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Change drawing Range\r\n   * @param {number} value - select drawing range\r\n   * @private\r\n   */\r\n  _changeDrawRange(value) {\r\n    this.width = value;\r\n    if (!this.type) {\r\n      this.changeStartMode();\r\n    } else {\r\n      this.setDrawMode();\r\n    }\r\n  }\r\n}\r\n\r\nexport default Draw;\r\n"]},"metadata":{},"sourceType":"module"}