4378250be65d87733039c61338d08fbe.json 18.1 KB
{"ast":null,"code":"/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Add icon module\r\n */\nimport fabric from 'fabric';\nimport snippet from 'tui-code-snippet';\nimport { Promise } from '../util';\nimport Component from '../interface/component';\nimport { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '../consts';\nconst pathMap = {\n  arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',\n  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'\n};\n/**\r\n * Icon\r\n * @class Icon\r\n * @param {Graphics} graphics - Graphics instance\r\n * @extends {Component}\r\n * @ignore\r\n */\n\nclass Icon extends Component {\n  constructor(graphics) {\n    super(componentNames.ICON, graphics);\n    /**\r\n     * Default icon color\r\n     * @type {string}\r\n     */\n\n    this._oColor = '#000000';\n    /**\r\n     * Path value of each icon type\r\n     * @type {Object}\r\n     */\n\n    this._pathMap = pathMap;\n    /**\r\n     * Type of the drawing icon\r\n     * @type {string}\r\n     * @private\r\n     */\n\n    this._type = null;\n    /**\r\n     * Color of the drawing icon\r\n     * @type {string}\r\n     * @private\r\n     */\n\n    this._iconColor = null;\n    /**\r\n     * Event handler list\r\n     * @type {Object}\r\n     * @private\r\n     */\n\n    this._handlers = {\n      mousedown: this._onFabricMouseDown.bind(this),\n      mousemove: this._onFabricMouseMove.bind(this),\n      mouseup: this._onFabricMouseUp.bind(this)\n    };\n  }\n  /**\r\n   * Set states of the current drawing shape\r\n   * @ignore\r\n   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\r\n   * @param {string} iconColor - Icon foreground color\r\n   */\n\n\n  setStates(type, iconColor) {\n    this._type = type;\n    this._iconColor = iconColor;\n  }\n  /**\r\n   * Start to draw the icon on canvas\r\n   * @ignore\r\n   */\n\n\n  start() {\n    const canvas = this.getCanvas();\n    canvas.selection = false;\n    canvas.on('mouse:down', this._handlers.mousedown);\n  }\n  /**\r\n   * End to draw the icon on canvas\r\n   * @ignore\r\n   */\n\n\n  end() {\n    const canvas = this.getCanvas();\n    canvas.selection = true;\n    canvas.off({\n      'mouse:down': this._handlers.mousedown\n    });\n  }\n  /**\r\n   * Add icon\r\n   * @param {string} type - Icon type\r\n   * @param {Object} options - Icon options\r\n   *      @param {string} [options.fill] - Icon foreground color\r\n   *      @param {string} [options.left] - Icon x position\r\n   *      @param {string} [options.top] - Icon y position\r\n   * @returns {Promise}\r\n   */\n\n\n  add(type, options) {\n    return new Promise((resolve, reject) => {\n      const canvas = this.getCanvas();\n      const path = this._pathMap[type];\n      const selectionStyle = fObjectOptions.SELECTION_STYLE;\n      const icon = path ? this._createIcon(path) : null;\n      this._icon = icon;\n\n      if (!icon) {\n        reject(rejectMessages.invalidParameters);\n      }\n\n      icon.set(snippet.extend({\n        type: 'icon',\n        fill: this._oColor\n      }, selectionStyle, options, this.graphics.controlStyle));\n      canvas.add(icon).setActiveObject(icon);\n      resolve(this.graphics.createObjectProperties(icon));\n    });\n  }\n  /**\r\n   * Register icon paths\r\n   * @param {{key: string, value: string}} pathInfos - Path infos\r\n   */\n\n\n  registerPaths(pathInfos) {\n    snippet.forEach(pathInfos, (path, type) => {\n      this._pathMap[type] = path;\n    }, this);\n  }\n  /**\r\n   * Set icon object color\r\n   * @param {string} color - Color to set\r\n   * @param {fabric.Path}[obj] - Current activated path object\r\n   */\n\n\n  setColor(color, obj) {\n    this._oColor = color;\n\n    if (obj && obj.get('type') === 'icon') {\n      obj.set({\n        fill: this._oColor\n      });\n      this.getCanvas().renderAll();\n    }\n  }\n  /**\r\n   * Get icon color\r\n   * @param {fabric.Path}[obj] - Current activated path object\r\n   * @returns {string} color\r\n   */\n\n\n  getColor(obj) {\n    return obj.fill;\n  }\n  /**\r\n   * Create icon object\r\n   * @param {string} path - Path value to create icon\r\n   * @returns {fabric.Path} Path object\r\n   */\n\n\n  _createIcon(path) {\n    return new fabric.Path(path);\n  }\n  /**\r\n   * MouseDown event handler on canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\n\n\n  _onFabricMouseDown(fEvent) {\n    const canvas = this.getCanvas();\n    this._startPoint = canvas.getPointer(fEvent.e);\n    const {\n      x: left,\n      y: top\n    } = this._startPoint;\n    this.add(this._type, {\n      left,\n      top,\n      fill: this._iconColor\n    }).then(() => {\n      this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));\n      canvas.on('mouse:move', this._handlers.mousemove);\n      canvas.on('mouse:up', this._handlers.mouseup);\n    });\n  }\n  /**\r\n   * MouseMove event handler on canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\n\n\n  _onFabricMouseMove(fEvent) {\n    const canvas = this.getCanvas();\n\n    if (!this._icon) {\n      return;\n    }\n\n    const moveOriginPointer = canvas.getPointer(fEvent.e);\n    const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;\n    const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;\n\n    this._icon.set({\n      scaleX: Math.abs(scaleX * 2),\n      scaleY: Math.abs(scaleY * 2)\n    });\n\n    this._icon.setCoords();\n\n    canvas.renderAll();\n  }\n  /**\r\n   * MouseUp event handler on canvas\r\n   * @private\r\n   */\n\n\n  _onFabricMouseUp() {\n    const canvas = this.getCanvas();\n    this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));\n    this._icon = null;\n    canvas.off('mouse:down', this._handlers.mousedown);\n    canvas.off('mouse:move', this._handlers.mousemove);\n    canvas.off('mouse:up', this._handlers.mouseup);\n  }\n\n}\n\nexport default Icon;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/component/icon.js"],"names":["fabric","snippet","Promise","Component","eventNames","events","rejectMessages","componentNames","fObjectOptions","pathMap","arrow","cancel","Icon","constructor","graphics","ICON","_oColor","_pathMap","_type","_iconColor","_handlers","mousedown","_onFabricMouseDown","bind","mousemove","_onFabricMouseMove","mouseup","_onFabricMouseUp","setStates","type","iconColor","start","canvas","getCanvas","selection","on","end","off","add","options","resolve","reject","path","selectionStyle","SELECTION_STYLE","icon","_createIcon","_icon","invalidParameters","set","extend","fill","controlStyle","setActiveObject","createObjectProperties","registerPaths","pathInfos","forEach","setColor","color","obj","get","renderAll","getColor","Path","fEvent","_startPoint","getPointer","e","x","left","y","top","then","fire","ADD_OBJECT","moveOriginPointer","scaleX","width","scaleY","height","Math","abs","setCoords","OBJECT_ADDED"],"mappings":"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","sourcesContent":["/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Add icon module\r\n */\r\nimport fabric from 'fabric';\r\nimport snippet from 'tui-code-snippet';\r\nimport { Promise } from '../util';\r\nimport Component from '../interface/component';\r\nimport { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '../consts';\r\n\r\nconst pathMap = {\r\n  arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',\r\n  cancel:\r\n    'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +\r\n    'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',\r\n};\r\n\r\n/**\r\n * Icon\r\n * @class Icon\r\n * @param {Graphics} graphics - Graphics instance\r\n * @extends {Component}\r\n * @ignore\r\n */\r\nclass Icon extends Component {\r\n  constructor(graphics) {\r\n    super(componentNames.ICON, graphics);\r\n\r\n    /**\r\n     * Default icon color\r\n     * @type {string}\r\n     */\r\n    this._oColor = '#000000';\r\n\r\n    /**\r\n     * Path value of each icon type\r\n     * @type {Object}\r\n     */\r\n    this._pathMap = pathMap;\r\n\r\n    /**\r\n     * Type of the drawing icon\r\n     * @type {string}\r\n     * @private\r\n     */\r\n    this._type = null;\r\n\r\n    /**\r\n     * Color of the drawing icon\r\n     * @type {string}\r\n     * @private\r\n     */\r\n    this._iconColor = null;\r\n\r\n    /**\r\n     * Event handler list\r\n     * @type {Object}\r\n     * @private\r\n     */\r\n    this._handlers = {\r\n      mousedown: this._onFabricMouseDown.bind(this),\r\n      mousemove: this._onFabricMouseMove.bind(this),\r\n      mouseup: this._onFabricMouseUp.bind(this),\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Set states of the current drawing shape\r\n   * @ignore\r\n   * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\r\n   * @param {string} iconColor - Icon foreground color\r\n   */\r\n  setStates(type, iconColor) {\r\n    this._type = type;\r\n    this._iconColor = iconColor;\r\n  }\r\n\r\n  /**\r\n   * Start to draw the icon on canvas\r\n   * @ignore\r\n   */\r\n  start() {\r\n    const canvas = this.getCanvas();\r\n    canvas.selection = false;\r\n    canvas.on('mouse:down', this._handlers.mousedown);\r\n  }\r\n\r\n  /**\r\n   * End to draw the icon on canvas\r\n   * @ignore\r\n   */\r\n  end() {\r\n    const canvas = this.getCanvas();\r\n\r\n    canvas.selection = true;\r\n    canvas.off({\r\n      'mouse:down': this._handlers.mousedown,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Add icon\r\n   * @param {string} type - Icon type\r\n   * @param {Object} options - Icon options\r\n   *      @param {string} [options.fill] - Icon foreground color\r\n   *      @param {string} [options.left] - Icon x position\r\n   *      @param {string} [options.top] - Icon y position\r\n   * @returns {Promise}\r\n   */\r\n  add(type, options) {\r\n    return new Promise((resolve, reject) => {\r\n      const canvas = this.getCanvas();\r\n      const path = this._pathMap[type];\r\n      const selectionStyle = fObjectOptions.SELECTION_STYLE;\r\n      const icon = path ? this._createIcon(path) : null;\r\n      this._icon = icon;\r\n\r\n      if (!icon) {\r\n        reject(rejectMessages.invalidParameters);\r\n      }\r\n\r\n      icon.set(\r\n        snippet.extend(\r\n          {\r\n            type: 'icon',\r\n            fill: this._oColor,\r\n          },\r\n          selectionStyle,\r\n          options,\r\n          this.graphics.controlStyle\r\n        )\r\n      );\r\n\r\n      canvas.add(icon).setActiveObject(icon);\r\n\r\n      resolve(this.graphics.createObjectProperties(icon));\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Register icon paths\r\n   * @param {{key: string, value: string}} pathInfos - Path infos\r\n   */\r\n  registerPaths(pathInfos) {\r\n    snippet.forEach(\r\n      pathInfos,\r\n      (path, type) => {\r\n        this._pathMap[type] = path;\r\n      },\r\n      this\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Set icon object color\r\n   * @param {string} color - Color to set\r\n   * @param {fabric.Path}[obj] - Current activated path object\r\n   */\r\n  setColor(color, obj) {\r\n    this._oColor = color;\r\n\r\n    if (obj && obj.get('type') === 'icon') {\r\n      obj.set({ fill: this._oColor });\r\n      this.getCanvas().renderAll();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get icon color\r\n   * @param {fabric.Path}[obj] - Current activated path object\r\n   * @returns {string} color\r\n   */\r\n  getColor(obj) {\r\n    return obj.fill;\r\n  }\r\n\r\n  /**\r\n   * Create icon object\r\n   * @param {string} path - Path value to create icon\r\n   * @returns {fabric.Path} Path object\r\n   */\r\n  _createIcon(path) {\r\n    return new fabric.Path(path);\r\n  }\r\n\r\n  /**\r\n   * MouseDown event handler on canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\r\n  _onFabricMouseDown(fEvent) {\r\n    const canvas = this.getCanvas();\r\n\r\n    this._startPoint = canvas.getPointer(fEvent.e);\r\n    const { x: left, y: top } = this._startPoint;\r\n\r\n    this.add(this._type, {\r\n      left,\r\n      top,\r\n      fill: this._iconColor,\r\n    }).then(() => {\r\n      this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));\r\n      canvas.on('mouse:move', this._handlers.mousemove);\r\n      canvas.on('mouse:up', this._handlers.mouseup);\r\n    });\r\n  }\r\n\r\n  /**\r\n   * MouseMove event handler on canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\r\n  _onFabricMouseMove(fEvent) {\r\n    const canvas = this.getCanvas();\r\n\r\n    if (!this._icon) {\r\n      return;\r\n    }\r\n    const moveOriginPointer = canvas.getPointer(fEvent.e);\r\n\r\n    const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;\r\n    const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;\r\n\r\n    this._icon.set({\r\n      scaleX: Math.abs(scaleX * 2),\r\n      scaleY: Math.abs(scaleY * 2),\r\n    });\r\n\r\n    this._icon.setCoords();\r\n    canvas.renderAll();\r\n  }\r\n\r\n  /**\r\n   * MouseUp event handler on canvas\r\n   * @private\r\n   */\r\n  _onFabricMouseUp() {\r\n    const canvas = this.getCanvas();\r\n\r\n    this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));\r\n\r\n    this._icon = null;\r\n\r\n    canvas.off('mouse:down', this._handlers.mousedown);\r\n    canvas.off('mouse:move', this._handlers.mousemove);\r\n    canvas.off('mouse:up', this._handlers.mouseup);\r\n  }\r\n}\r\n\r\nexport default Icon;\r\n"]},"metadata":{},"sourceType":"module"}