{"ast":null,"code":"/**\r\n * @author NHN. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Free drawing module, Set brush\r\n */\nimport fabric from 'fabric';\nimport snippet from 'tui-code-snippet';\nimport Component from '../interface/component';\nimport ArrowLine from '../extension/arrowLine';\nimport { eventNames, componentNames, fObjectOptions } from '../consts';\n/**\r\n * Line\r\n * @class Line\r\n * @param {Graphics} graphics - Graphics instance\r\n * @extends {Component}\r\n * @ignore\r\n */\n\nclass Line extends Component {\n  constructor(graphics) {\n    super(componentNames.LINE, graphics);\n    /**\r\n     * Brush width\r\n     * @type {number}\r\n     * @private\r\n     */\n\n    this._width = 12;\n    /**\r\n     * fabric.Color instance for brush color\r\n     * @type {fabric.Color}\r\n     * @private\r\n     */\n\n    this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\n    /**\r\n     * Listeners\r\n     * @type {object.<string, function>}\r\n     * @private\r\n     */\n\n    this._listeners = {\n      mousedown: this._onFabricMouseDown.bind(this),\n      mousemove: this._onFabricMouseMove.bind(this),\n      mouseup: this._onFabricMouseUp.bind(this)\n    };\n  }\n  /**\r\n   * Start drawing line mode\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\n\n\n  setHeadOption(setting) {\n    const {\n      arrowType = {\n        head: null,\n        tail: null\n      }\n    } = setting;\n    this._arrowType = arrowType;\n  }\n  /**\r\n   * Start drawing line mode\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\n\n\n  start(setting = {}) {\n    const canvas = this.getCanvas();\n    canvas.defaultCursor = 'crosshair';\n    canvas.selection = false;\n    this.setHeadOption(setting);\n    this.setBrush(setting);\n    canvas.forEachObject(obj => {\n      obj.set({\n        evented: false\n      });\n    });\n    canvas.on({\n      'mouse:down': this._listeners.mousedown\n    });\n  }\n  /**\r\n   * Set brush\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\n\n\n  setBrush(setting) {\n    const brush = this.getCanvas().freeDrawingBrush;\n    setting = setting || {};\n    this._width = setting.width || this._width;\n\n    if (setting.color) {\n      this._oColor = new fabric.Color(setting.color);\n    }\n\n    brush.width = this._width;\n    brush.color = this._oColor.toRgba();\n  }\n  /**\r\n   * End drawing line mode\r\n   */\n\n\n  end() {\n    const canvas = this.getCanvas();\n    canvas.defaultCursor = 'default';\n    canvas.selection = true;\n    canvas.forEachObject(obj => {\n      obj.set({\n        evented: true\n      });\n    });\n    canvas.off('mouse:down', this._listeners.mousedown);\n  }\n  /**\r\n   * Mousedown event handler in fabric 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    const {\n      x,\n      y\n    } = canvas.getPointer(fEvent.e);\n    const points = [x, y, x, y];\n    this._line = new ArrowLine(points, {\n      stroke: this._oColor.toRgba(),\n      strokeWidth: this._width,\n      arrowType: this._arrowType,\n      evented: false\n    });\n\n    this._line.set(fObjectOptions.SELECTION_STYLE);\n\n    canvas.add(this._line);\n    canvas.on({\n      'mouse:move': this._listeners.mousemove,\n      'mouse:up': this._listeners.mouseup\n    });\n    this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties());\n  }\n  /**\r\n   * Mousemove event handler in fabric 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    const pointer = canvas.getPointer(fEvent.e);\n\n    this._line.set({\n      x2: pointer.x,\n      y2: pointer.y\n    });\n\n    this._line.setCoords();\n\n    canvas.renderAll();\n  }\n  /**\r\n   * Mouseup event handler in fabric canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\n\n\n  _onFabricMouseUp() {\n    const canvas = this.getCanvas();\n    this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties());\n    this._line = null;\n    canvas.off({\n      'mouse:move': this._listeners.mousemove,\n      'mouse:up': this._listeners.mouseup\n    });\n  }\n  /**\r\n   * create line event object properties\r\n   * @returns {Object} properties line object\r\n   * @private\r\n   */\n\n\n  _createLineEventObjectProperties() {\n    const params = this.graphics.createObjectProperties(this._line);\n    const {\n      x1,\n      x2,\n      y1,\n      y2\n    } = this._line;\n    return snippet.extend({}, params, {\n      startPosition: {\n        x: x1,\n        y: y1\n      },\n      endPosition: {\n        x: x2,\n        y: y2\n      }\n    });\n  }\n\n}\n\nexport default Line;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/component/line.js"],"names":["fabric","snippet","Component","ArrowLine","eventNames","componentNames","fObjectOptions","Line","constructor","graphics","LINE","_width","_oColor","Color","_listeners","mousedown","_onFabricMouseDown","bind","mousemove","_onFabricMouseMove","mouseup","_onFabricMouseUp","setHeadOption","setting","arrowType","head","tail","_arrowType","start","canvas","getCanvas","defaultCursor","selection","setBrush","forEachObject","obj","set","evented","on","brush","freeDrawingBrush","width","color","toRgba","end","off","fEvent","x","y","getPointer","e","points","_line","stroke","strokeWidth","SELECTION_STYLE","add","fire","ADD_OBJECT","_createLineEventObjectProperties","pointer","x2","y2","setCoords","renderAll","OBJECT_ADDED","params","createObjectProperties","x1","y1","extend","startPosition","endPosition"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,QAAnB;AACA,OAAOC,OAAP,MAAoB,kBAApB;AACA,OAAOC,SAAP,MAAsB,wBAAtB;AACA,OAAOC,SAAP,MAAsB,wBAAtB;AACA,SAASC,UAAT,EAAqBC,cAArB,EAAqCC,cAArC,QAA2D,WAA3D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,IAAN,SAAmBL,SAAnB,CAA6B;AAC3BM,EAAAA,WAAW,CAACC,QAAD,EAAW;AACpB,UAAMJ,cAAc,CAACK,IAArB,EAA2BD,QAA3B;AAEA;AACJ;AACA;AACA;AACA;;AACI,SAAKE,MAAL,GAAc,EAAd;AAEA;AACJ;AACA;AACA;AACA;;AACI,SAAKC,OAAL,GAAe,IAAIZ,MAAM,CAACa,KAAX,CAAiB,oBAAjB,CAAf;AAEA;AACJ;AACA;AACA;AACA;;AACI,SAAKC,UAAL,GAAkB;AAChBC,MAAAA,SAAS,EAAE,KAAKC,kBAAL,CAAwBC,IAAxB,CAA6B,IAA7B,CADK;AAEhBC,MAAAA,SAAS,EAAE,KAAKC,kBAAL,CAAwBF,IAAxB,CAA6B,IAA7B,CAFK;AAGhBG,MAAAA,OAAO,EAAE,KAAKC,gBAAL,CAAsBJ,IAAtB,CAA2B,IAA3B;AAHO,KAAlB;AAKD;AAED;AACF;AACA;AACA;;;AACEK,EAAAA,aAAa,CAACC,OAAD,EAAU;AACrB,UAAM;AACJC,MAAAA,SAAS,GAAG;AACVC,QAAAA,IAAI,EAAE,IADI;AAEVC,QAAAA,IAAI,EAAE;AAFI;AADR,QAKFH,OALJ;AAOA,SAAKI,UAAL,GAAkBH,SAAlB;AACD;AAED;AACF;AACA;AACA;;;AACEI,EAAAA,KAAK,CAACL,OAAO,GAAG,EAAX,EAAe;AAClB,UAAMM,MAAM,GAAG,KAAKC,SAAL,EAAf;AAEAD,IAAAA,MAAM,CAACE,aAAP,GAAuB,WAAvB;AACAF,IAAAA,MAAM,CAACG,SAAP,GAAmB,KAAnB;AAEA,SAAKV,aAAL,CAAmBC,OAAnB;AACA,SAAKU,QAAL,CAAcV,OAAd;AAEAM,IAAAA,MAAM,CAACK,aAAP,CAAsBC,GAAD,IAAS;AAC5BA,MAAAA,GAAG,CAACC,GAAJ,CAAQ;AACNC,QAAAA,OAAO,EAAE;AADH,OAAR;AAGD,KAJD;AAMAR,IAAAA,MAAM,CAACS,EAAP,CAAU;AACR,oBAAc,KAAKxB,UAAL,CAAgBC;AADtB,KAAV;AAGD;AAED;AACF;AACA;AACA;;;AACEkB,EAAAA,QAAQ,CAACV,OAAD,EAAU;AAChB,UAAMgB,KAAK,GAAG,KAAKT,SAAL,GAAiBU,gBAA/B;AAEAjB,IAAAA,OAAO,GAAGA,OAAO,IAAI,EAArB;AACA,SAAKZ,MAAL,GAAcY,OAAO,CAACkB,KAAR,IAAiB,KAAK9B,MAApC;;AAEA,QAAIY,OAAO,CAACmB,KAAZ,EAAmB;AACjB,WAAK9B,OAAL,GAAe,IAAIZ,MAAM,CAACa,KAAX,CAAiBU,OAAO,CAACmB,KAAzB,CAAf;AACD;;AACDH,IAAAA,KAAK,CAACE,KAAN,GAAc,KAAK9B,MAAnB;AACA4B,IAAAA,KAAK,CAACG,KAAN,GAAc,KAAK9B,OAAL,CAAa+B,MAAb,EAAd;AACD;AAED;AACF;AACA;;;AACEC,EAAAA,GAAG,GAAG;AACJ,UAAMf,MAAM,GAAG,KAAKC,SAAL,EAAf;AAEAD,IAAAA,MAAM,CAACE,aAAP,GAAuB,SAAvB;AACAF,IAAAA,MAAM,CAACG,SAAP,GAAmB,IAAnB;AAEAH,IAAAA,MAAM,CAACK,aAAP,CAAsBC,GAAD,IAAS;AAC5BA,MAAAA,GAAG,CAACC,GAAJ,CAAQ;AACNC,QAAAA,OAAO,EAAE;AADH,OAAR;AAGD,KAJD;AAMAR,IAAAA,MAAM,CAACgB,GAAP,CAAW,YAAX,EAAyB,KAAK/B,UAAL,CAAgBC,SAAzC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACEC,EAAAA,kBAAkB,CAAC8B,MAAD,EAAS;AACzB,UAAMjB,MAAM,GAAG,KAAKC,SAAL,EAAf;AACA,UAAM;AAAEiB,MAAAA,CAAF;AAAKC,MAAAA;AAAL,QAAWnB,MAAM,CAACoB,UAAP,CAAkBH,MAAM,CAACI,CAAzB,CAAjB;AACA,UAAMC,MAAM,GAAG,CAACJ,CAAD,EAAIC,CAAJ,EAAOD,CAAP,EAAUC,CAAV,CAAf;AAEA,SAAKI,KAAL,GAAa,IAAIjD,SAAJ,CAAcgD,MAAd,EAAsB;AACjCE,MAAAA,MAAM,EAAE,KAAKzC,OAAL,CAAa+B,MAAb,EADyB;AAEjCW,MAAAA,WAAW,EAAE,KAAK3C,MAFe;AAGjCa,MAAAA,SAAS,EAAE,KAAKG,UAHiB;AAIjCU,MAAAA,OAAO,EAAE;AAJwB,KAAtB,CAAb;;AAOA,SAAKe,KAAL,CAAWhB,GAAX,CAAe9B,cAAc,CAACiD,eAA9B;;AAEA1B,IAAAA,MAAM,CAAC2B,GAAP,CAAW,KAAKJ,KAAhB;AAEAvB,IAAAA,MAAM,CAACS,EAAP,CAAU;AACR,oBAAc,KAAKxB,UAAL,CAAgBI,SADtB;AAER,kBAAY,KAAKJ,UAAL,CAAgBM;AAFpB,KAAV;AAKA,SAAKqC,IAAL,CAAUrD,UAAU,CAACsD,UAArB,EAAiC,KAAKC,gCAAL,EAAjC;AACD;AAED;AACF;AACA;AACA;AACA;;;AACExC,EAAAA,kBAAkB,CAAC2B,MAAD,EAAS;AACzB,UAAMjB,MAAM,GAAG,KAAKC,SAAL,EAAf;AACA,UAAM8B,OAAO,GAAG/B,MAAM,CAACoB,UAAP,CAAkBH,MAAM,CAACI,CAAzB,CAAhB;;AAEA,SAAKE,KAAL,CAAWhB,GAAX,CAAe;AACbyB,MAAAA,EAAE,EAAED,OAAO,CAACb,CADC;AAEbe,MAAAA,EAAE,EAAEF,OAAO,CAACZ;AAFC,KAAf;;AAKA,SAAKI,KAAL,CAAWW,SAAX;;AAEAlC,IAAAA,MAAM,CAACmC,SAAP;AACD;AAED;AACF;AACA;AACA;AACA;;;AACE3C,EAAAA,gBAAgB,GAAG;AACjB,UAAMQ,MAAM,GAAG,KAAKC,SAAL,EAAf;AAEA,SAAK2B,IAAL,CAAUrD,UAAU,CAAC6D,YAArB,EAAmC,KAAKN,gCAAL,EAAnC;AAEA,SAAKP,KAAL,GAAa,IAAb;AAEAvB,IAAAA,MAAM,CAACgB,GAAP,CAAW;AACT,oBAAc,KAAK/B,UAAL,CAAgBI,SADrB;AAET,kBAAY,KAAKJ,UAAL,CAAgBM;AAFnB,KAAX;AAID;AAED;AACF;AACA;AACA;AACA;;;AACEuC,EAAAA,gCAAgC,GAAG;AACjC,UAAMO,MAAM,GAAG,KAAKzD,QAAL,CAAc0D,sBAAd,CAAqC,KAAKf,KAA1C,CAAf;AACA,UAAM;AAAEgB,MAAAA,EAAF;AAAMP,MAAAA,EAAN;AAAUQ,MAAAA,EAAV;AAAcP,MAAAA;AAAd,QAAqB,KAAKV,KAAhC;AAEA,WAAOnD,OAAO,CAACqE,MAAR,CAAe,EAAf,EAAmBJ,MAAnB,EAA2B;AAChCK,MAAAA,aAAa,EAAE;AACbxB,QAAAA,CAAC,EAAEqB,EADU;AAEbpB,QAAAA,CAAC,EAAEqB;AAFU,OADiB;AAKhCG,MAAAA,WAAW,EAAE;AACXzB,QAAAA,CAAC,EAAEc,EADQ;AAEXb,QAAAA,CAAC,EAAEc;AAFQ;AALmB,KAA3B,CAAP;AAUD;;AA7L0B;;AAgM7B,eAAevD,IAAf","sourcesContent":["/**\r\n * @author NHN. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Free drawing module, Set brush\r\n */\r\nimport fabric from 'fabric';\r\nimport snippet from 'tui-code-snippet';\r\nimport Component from '../interface/component';\r\nimport ArrowLine from '../extension/arrowLine';\r\nimport { eventNames, componentNames, fObjectOptions } from '../consts';\r\n\r\n/**\r\n * Line\r\n * @class Line\r\n * @param {Graphics} graphics - Graphics instance\r\n * @extends {Component}\r\n * @ignore\r\n */\r\nclass Line extends Component {\r\n  constructor(graphics) {\r\n    super(componentNames.LINE, graphics);\r\n\r\n    /**\r\n     * Brush width\r\n     * @type {number}\r\n     * @private\r\n     */\r\n    this._width = 12;\r\n\r\n    /**\r\n     * fabric.Color instance for brush color\r\n     * @type {fabric.Color}\r\n     * @private\r\n     */\r\n    this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\r\n\r\n    /**\r\n     * Listeners\r\n     * @type {object.<string, function>}\r\n     * @private\r\n     */\r\n    this._listeners = {\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   * Start drawing line mode\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\r\n  setHeadOption(setting) {\r\n    const {\r\n      arrowType = {\r\n        head: null,\r\n        tail: null,\r\n      },\r\n    } = setting;\r\n\r\n    this._arrowType = arrowType;\r\n  }\r\n\r\n  /**\r\n   * Start drawing line mode\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\r\n  start(setting = {}) {\r\n    const canvas = this.getCanvas();\r\n\r\n    canvas.defaultCursor = 'crosshair';\r\n    canvas.selection = false;\r\n\r\n    this.setHeadOption(setting);\r\n    this.setBrush(setting);\r\n\r\n    canvas.forEachObject((obj) => {\r\n      obj.set({\r\n        evented: false,\r\n      });\r\n    });\r\n\r\n    canvas.on({\r\n      'mouse:down': this._listeners.mousedown,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Set brush\r\n   * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\r\n   */\r\n  setBrush(setting) {\r\n    const brush = this.getCanvas().freeDrawingBrush;\r\n\r\n    setting = setting || {};\r\n    this._width = setting.width || this._width;\r\n\r\n    if (setting.color) {\r\n      this._oColor = new fabric.Color(setting.color);\r\n    }\r\n    brush.width = this._width;\r\n    brush.color = this._oColor.toRgba();\r\n  }\r\n\r\n  /**\r\n   * End drawing line mode\r\n   */\r\n  end() {\r\n    const canvas = this.getCanvas();\r\n\r\n    canvas.defaultCursor = 'default';\r\n    canvas.selection = true;\r\n\r\n    canvas.forEachObject((obj) => {\r\n      obj.set({\r\n        evented: true,\r\n      });\r\n    });\r\n\r\n    canvas.off('mouse:down', this._listeners.mousedown);\r\n  }\r\n\r\n  /**\r\n   * Mousedown event handler in fabric 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    const { x, y } = canvas.getPointer(fEvent.e);\r\n    const points = [x, y, x, y];\r\n\r\n    this._line = new ArrowLine(points, {\r\n      stroke: this._oColor.toRgba(),\r\n      strokeWidth: this._width,\r\n      arrowType: this._arrowType,\r\n      evented: false,\r\n    });\r\n\r\n    this._line.set(fObjectOptions.SELECTION_STYLE);\r\n\r\n    canvas.add(this._line);\r\n\r\n    canvas.on({\r\n      'mouse:move': this._listeners.mousemove,\r\n      'mouse:up': this._listeners.mouseup,\r\n    });\r\n\r\n    this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties());\r\n  }\r\n\r\n  /**\r\n   * Mousemove event handler in fabric 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    const pointer = canvas.getPointer(fEvent.e);\r\n\r\n    this._line.set({\r\n      x2: pointer.x,\r\n      y2: pointer.y,\r\n    });\r\n\r\n    this._line.setCoords();\r\n\r\n    canvas.renderAll();\r\n  }\r\n\r\n  /**\r\n   * Mouseup event handler in fabric canvas\r\n   * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\r\n   * @private\r\n   */\r\n  _onFabricMouseUp() {\r\n    const canvas = this.getCanvas();\r\n\r\n    this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties());\r\n\r\n    this._line = null;\r\n\r\n    canvas.off({\r\n      'mouse:move': this._listeners.mousemove,\r\n      'mouse:up': this._listeners.mouseup,\r\n    });\r\n  }\r\n\r\n  /**\r\n   * create line event object properties\r\n   * @returns {Object} properties line object\r\n   * @private\r\n   */\r\n  _createLineEventObjectProperties() {\r\n    const params = this.graphics.createObjectProperties(this._line);\r\n    const { x1, x2, y1, y2 } = this._line;\r\n\r\n    return snippet.extend({}, params, {\r\n      startPosition: {\r\n        x: x1,\r\n        y: y1,\r\n      },\r\n      endPosition: {\r\n        x: x2,\r\n        y: y2,\r\n      },\r\n    });\r\n  }\r\n}\r\n\r\nexport default Line;\r\n"]},"metadata":{},"sourceType":"module"}