{"ast":null,"code":"/**\r\n * @author NHN. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Blur extending fabric.Image.filters.Convolute\r\n */\nimport fabric from 'fabric';\nconst ARROW_ANGLE = 30;\nconst CHEVRON_SIZE_RATIO = 2.7;\nconst TRIANGLE_SIZE_RATIO = 1.7;\nconst RADIAN_CONVERSION_VALUE = 180;\nconst ArrowLine = fabric.util.createClass(fabric.Line,\n/** @lends Convolute.prototype */\n{\n  /**\r\n   * Line type\r\n   * @param {String} type\r\n   * @default\r\n   */\n  type: 'line',\n\n  /**\r\n   * Constructor\r\n   * @param {Array} [points] Array of points\r\n   * @param {Object} [options] Options object\r\n   * @override\r\n   */\n  initialize(points, options = {}) {\n    this.callSuper('initialize', points, options);\n    this.arrowType = options.arrowType;\n  },\n\n  /**\r\n   * Render ArrowLine\r\n   * @private\r\n   * @override\r\n   */\n  _render(ctx) {\n    const {\n      x1: fromX,\n      y1: fromY,\n      x2: toX,\n      y2: toY\n    } = this.calcLinePoints();\n    const linePosition = {\n      fromX,\n      fromY,\n      toX,\n      toY\n    };\n    this.ctx = ctx;\n    ctx.lineWidth = this.strokeWidth;\n\n    this._renderBasicLinePath(linePosition);\n\n    this._drawDecoratorPath(linePosition);\n\n    this._renderStroke(ctx);\n  },\n\n  /**\r\n   * Render Basic line path\r\n   * @param {Object} linePosition - line position\r\n   *  @param {number} option.fromX - line start position x\r\n   *  @param {number} option.fromY - line start position y\r\n   *  @param {number} option.toX - line end position x\r\n   *  @param {number} option.toY - line end position y\r\n   * @private\r\n   */\n  _renderBasicLinePath({\n    fromX,\n    fromY,\n    toX,\n    toY\n  }) {\n    this.ctx.beginPath();\n    this.ctx.moveTo(fromX, fromY);\n    this.ctx.lineTo(toX, toY);\n  },\n\n  /**\r\n   * Render Arrow Head\r\n   * @param {Object} linePosition - line position\r\n   *  @param {number} option.fromX - line start position x\r\n   *  @param {number} option.fromY - line start position y\r\n   *  @param {number} option.toX - line end position x\r\n   *  @param {number} option.toY - line end position y\r\n   * @private\r\n   */\n  _drawDecoratorPath(linePosition) {\n    this._drawDecoratorPathType('head', linePosition);\n\n    this._drawDecoratorPathType('tail', linePosition);\n  },\n\n  /**\r\n   * Render Arrow Head\r\n   * @param {string} type - 'head' or 'tail'\r\n   * @param {Object} linePosition - line position\r\n   *  @param {number} option.fromX - line start position x\r\n   *  @param {number} option.fromY - line start position y\r\n   *  @param {number} option.toX - line end position x\r\n   *  @param {number} option.toY - line end position y\r\n   * @private\r\n   */\n  _drawDecoratorPathType(type, linePosition) {\n    switch (this.arrowType[type]) {\n      case 'triangle':\n        this._drawTrianglePath(type, linePosition);\n\n        break;\n\n      case 'chevron':\n        this._drawChevronPath(type, linePosition);\n\n        break;\n\n      default:\n        break;\n    }\n  },\n\n  /**\r\n   * Render Triangle Head\r\n   * @param {string} type - 'head' or 'tail'\r\n   * @param {Object} linePosition - line position\r\n   *  @param {number} option.fromX - line start position x\r\n   *  @param {number} option.fromY - line start position y\r\n   *  @param {number} option.toX - line end position x\r\n   *  @param {number} option.toY - line end position y\r\n   * @private\r\n   */\n  _drawTrianglePath(type, linePosition) {\n    const decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO;\n\n    this._drawChevronPath(type, linePosition, decorateSize);\n\n    this.ctx.closePath();\n  },\n\n  /**\r\n   * Render Chevron Head\r\n   * @param {string} type - 'head' or 'tail'\r\n   * @param {Object} linePosition - line position\r\n   *  @param {number} option.fromX - line start position x\r\n   *  @param {number} option.fromY - line start position y\r\n   *  @param {number} option.toX - line end position x\r\n   *  @param {number} option.toY - line end position y\r\n   * @param {number} decorateSize - decorate size\r\n   * @private\r\n   */\n  _drawChevronPath(type, {\n    fromX,\n    fromY,\n    toX,\n    toY\n  }, decorateSize) {\n    const {\n      ctx\n    } = this;\n\n    if (!decorateSize) {\n      decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO;\n    }\n\n    const [standardX, standardY] = type === 'head' ? [fromX, fromY] : [toX, toY];\n    const [compareX, compareY] = type === 'head' ? [toX, toY] : [fromX, fromY];\n    const angle = Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE / Math.PI;\n\n    const rotatedPosition = changeAngle => this.getRotatePosition(decorateSize, changeAngle, {\n      x: standardX,\n      y: standardY\n    });\n\n    ctx.moveTo(...rotatedPosition(angle + ARROW_ANGLE));\n    ctx.lineTo(standardX, standardY);\n    ctx.lineTo(...rotatedPosition(angle - ARROW_ANGLE));\n  },\n\n  /**\r\n   * return position from change angle.\r\n   * @param {number} distance - change distance\r\n   * @param {number} angle - change angle\r\n   * @param {Object} referencePosition - reference position\r\n   * @returns {Array}\r\n   * @private\r\n   */\n  getRotatePosition(distance, angle, referencePosition) {\n    const radian = angle * Math.PI / RADIAN_CONVERSION_VALUE;\n    const {\n      x,\n      y\n    } = referencePosition;\n    return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y];\n  }\n\n});\nexport default ArrowLine;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/extension/arrowLine.js"],"names":["fabric","ARROW_ANGLE","CHEVRON_SIZE_RATIO","TRIANGLE_SIZE_RATIO","RADIAN_CONVERSION_VALUE","ArrowLine","util","createClass","Line","type","initialize","points","options","callSuper","arrowType","_render","ctx","x1","fromX","y1","fromY","x2","toX","y2","toY","calcLinePoints","linePosition","lineWidth","strokeWidth","_renderBasicLinePath","_drawDecoratorPath","_renderStroke","beginPath","moveTo","lineTo","_drawDecoratorPathType","_drawTrianglePath","_drawChevronPath","decorateSize","closePath","standardX","standardY","compareX","compareY","angle","Math","atan2","PI","rotatedPosition","changeAngle","getRotatePosition","x","y","distance","referencePosition","radian","cos","sin"],"mappings":"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","sourcesContent":["/**\r\n * @author NHN. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Blur extending fabric.Image.filters.Convolute\r\n */\r\nimport fabric from 'fabric';\r\n\r\nconst ARROW_ANGLE = 30;\r\nconst CHEVRON_SIZE_RATIO = 2.7;\r\nconst TRIANGLE_SIZE_RATIO = 1.7;\r\nconst RADIAN_CONVERSION_VALUE = 180;\r\n\r\nconst ArrowLine = fabric.util.createClass(\r\n  fabric.Line,\r\n  /** @lends Convolute.prototype */ {\r\n    /**\r\n     * Line type\r\n     * @param {String} type\r\n     * @default\r\n     */\r\n    type: 'line',\r\n\r\n    /**\r\n     * Constructor\r\n     * @param {Array} [points] Array of points\r\n     * @param {Object} [options] Options object\r\n     * @override\r\n     */\r\n    initialize(points, options = {}) {\r\n      this.callSuper('initialize', points, options);\r\n\r\n      this.arrowType = options.arrowType;\r\n    },\r\n\r\n    /**\r\n     * Render ArrowLine\r\n     * @private\r\n     * @override\r\n     */\r\n    _render(ctx) {\r\n      const { x1: fromX, y1: fromY, x2: toX, y2: toY } = this.calcLinePoints();\r\n      const linePosition = {\r\n        fromX,\r\n        fromY,\r\n        toX,\r\n        toY,\r\n      };\r\n      this.ctx = ctx;\r\n      ctx.lineWidth = this.strokeWidth;\r\n\r\n      this._renderBasicLinePath(linePosition);\r\n      this._drawDecoratorPath(linePosition);\r\n\r\n      this._renderStroke(ctx);\r\n    },\r\n\r\n    /**\r\n     * Render Basic line path\r\n     * @param {Object} linePosition - line position\r\n     *  @param {number} option.fromX - line start position x\r\n     *  @param {number} option.fromY - line start position y\r\n     *  @param {number} option.toX - line end position x\r\n     *  @param {number} option.toY - line end position y\r\n     * @private\r\n     */\r\n    _renderBasicLinePath({ fromX, fromY, toX, toY }) {\r\n      this.ctx.beginPath();\r\n      this.ctx.moveTo(fromX, fromY);\r\n      this.ctx.lineTo(toX, toY);\r\n    },\r\n\r\n    /**\r\n     * Render Arrow Head\r\n     * @param {Object} linePosition - line position\r\n     *  @param {number} option.fromX - line start position x\r\n     *  @param {number} option.fromY - line start position y\r\n     *  @param {number} option.toX - line end position x\r\n     *  @param {number} option.toY - line end position y\r\n     * @private\r\n     */\r\n    _drawDecoratorPath(linePosition) {\r\n      this._drawDecoratorPathType('head', linePosition);\r\n      this._drawDecoratorPathType('tail', linePosition);\r\n    },\r\n\r\n    /**\r\n     * Render Arrow Head\r\n     * @param {string} type - 'head' or 'tail'\r\n     * @param {Object} linePosition - line position\r\n     *  @param {number} option.fromX - line start position x\r\n     *  @param {number} option.fromY - line start position y\r\n     *  @param {number} option.toX - line end position x\r\n     *  @param {number} option.toY - line end position y\r\n     * @private\r\n     */\r\n    _drawDecoratorPathType(type, linePosition) {\r\n      switch (this.arrowType[type]) {\r\n        case 'triangle':\r\n          this._drawTrianglePath(type, linePosition);\r\n          break;\r\n        case 'chevron':\r\n          this._drawChevronPath(type, linePosition);\r\n          break;\r\n        default:\r\n          break;\r\n      }\r\n    },\r\n\r\n    /**\r\n     * Render Triangle Head\r\n     * @param {string} type - 'head' or 'tail'\r\n     * @param {Object} linePosition - line position\r\n     *  @param {number} option.fromX - line start position x\r\n     *  @param {number} option.fromY - line start position y\r\n     *  @param {number} option.toX - line end position x\r\n     *  @param {number} option.toY - line end position y\r\n     * @private\r\n     */\r\n    _drawTrianglePath(type, linePosition) {\r\n      const decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO;\r\n\r\n      this._drawChevronPath(type, linePosition, decorateSize);\r\n      this.ctx.closePath();\r\n    },\r\n\r\n    /**\r\n     * Render Chevron Head\r\n     * @param {string} type - 'head' or 'tail'\r\n     * @param {Object} linePosition - line position\r\n     *  @param {number} option.fromX - line start position x\r\n     *  @param {number} option.fromY - line start position y\r\n     *  @param {number} option.toX - line end position x\r\n     *  @param {number} option.toY - line end position y\r\n     * @param {number} decorateSize - decorate size\r\n     * @private\r\n     */\r\n    _drawChevronPath(type, { fromX, fromY, toX, toY }, decorateSize) {\r\n      const { ctx } = this;\r\n      if (!decorateSize) {\r\n        decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO;\r\n      }\r\n\r\n      const [standardX, standardY] = type === 'head' ? [fromX, fromY] : [toX, toY];\r\n      const [compareX, compareY] = type === 'head' ? [toX, toY] : [fromX, fromY];\r\n\r\n      const angle =\r\n        (Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE) /\r\n        Math.PI;\r\n      const rotatedPosition = (changeAngle) =>\r\n        this.getRotatePosition(decorateSize, changeAngle, {\r\n          x: standardX,\r\n          y: standardY,\r\n        });\r\n\r\n      ctx.moveTo(...rotatedPosition(angle + ARROW_ANGLE));\r\n      ctx.lineTo(standardX, standardY);\r\n      ctx.lineTo(...rotatedPosition(angle - ARROW_ANGLE));\r\n    },\r\n\r\n    /**\r\n     * return position from change angle.\r\n     * @param {number} distance - change distance\r\n     * @param {number} angle - change angle\r\n     * @param {Object} referencePosition - reference position\r\n     * @returns {Array}\r\n     * @private\r\n     */\r\n    getRotatePosition(distance, angle, referencePosition) {\r\n      const radian = (angle * Math.PI) / RADIAN_CONVERSION_VALUE;\r\n      const { x, y } = referencePosition;\r\n\r\n      return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y];\r\n    },\r\n  }\r\n);\r\n\r\nexport default ArrowLine;\r\n"]},"metadata":{},"sourceType":"module"}