c3f33f6026c36df46084c6f18a7ad49d.json 8.33 KB
{"ast":null,"code":"/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Image rotation module\r\n */\nimport fabric from 'fabric';\nimport { Promise } from '../util';\nimport Component from '../interface/component';\nimport { componentNames } from '../consts';\n/**\r\n * Image Rotation component\r\n * @class Rotation\r\n * @extends {Component}\r\n * @param {Graphics} graphics - Graphics instance\r\n * @ignore\r\n */\n\nclass Rotation extends Component {\n  constructor(graphics) {\n    super(componentNames.ROTATION, graphics);\n  }\n  /**\r\n   * Get current angle\r\n   * @returns {Number}\r\n   */\n\n\n  getCurrentAngle() {\n    return this.getCanvasImage().angle;\n  }\n  /**\r\n   * Set angle of the image\r\n   *\r\n   *  Do not call \"this.setImageProperties\" for setting angle directly.\r\n   *  Before setting angle, The originX,Y of image should be set to center.\r\n   *      See \"http://fabricjs.com/docs/fabric.Object.html#setAngle\"\r\n   *\r\n   * @param {number} angle - Angle value\r\n   * @returns {Promise}\r\n   */\n\n\n  setAngle(angle) {\n    const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees)\n\n    angle %= 360;\n    const canvasImage = this.getCanvasImage();\n    const oldImageCenter = canvasImage.getCenterPoint();\n    canvasImage.set({\n      angle\n    }).setCoords();\n    this.adjustCanvasDimension();\n    const newImageCenter = canvasImage.getCenterPoint();\n\n    this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle);\n\n    return Promise.resolve(angle);\n  }\n  /**\r\n   * Rotate for each object\r\n   * @param {fabric.Point} oldImageCenter - Image center point before rotation\r\n   * @param {fabric.Point} newImageCenter - Image center point after rotation\r\n   * @param {number} angleDiff - Image angle difference after rotation\r\n   * @private\r\n   */\n\n\n  _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) {\n    const canvas = this.getCanvas();\n    const centerDiff = {\n      x: oldImageCenter.x - newImageCenter.x,\n      y: oldImageCenter.y - newImageCenter.y\n    };\n    canvas.forEachObject(obj => {\n      const objCenter = obj.getCenterPoint();\n      const radian = fabric.util.degreesToRadians(angleDiff);\n      const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);\n      obj.set({\n        left: newObjCenter.x - centerDiff.x,\n        top: newObjCenter.y - centerDiff.y,\n        angle: (obj.angle + angleDiff) % 360\n      });\n      obj.setCoords();\n    });\n    canvas.renderAll();\n  }\n  /**\r\n   * Rotate the image\r\n   * @param {number} additionalAngle - Additional angle\r\n   * @returns {Promise}\r\n   */\n\n\n  rotate(additionalAngle) {\n    const current = this.getCurrentAngle();\n    return this.setAngle(current + additionalAngle);\n  }\n\n}\n\nexport default Rotation;","map":{"version":3,"sources":["C:/Users/kkwan_000/Desktop/git/2017110269/minsung/src/js/component/rotation.js"],"names":["fabric","Promise","Component","componentNames","Rotation","constructor","graphics","ROTATION","getCurrentAngle","getCanvasImage","angle","setAngle","oldAngle","canvasImage","oldImageCenter","getCenterPoint","set","setCoords","adjustCanvasDimension","newImageCenter","_rotateForEachObject","resolve","angleDiff","canvas","getCanvas","centerDiff","x","y","forEachObject","obj","objCenter","radian","util","degreesToRadians","newObjCenter","rotatePoint","left","top","renderAll","rotate","additionalAngle","current"],"mappings":"AAAA;AACA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,QAAnB;AACA,SAASC,OAAT,QAAwB,SAAxB;AACA,OAAOC,SAAP,MAAsB,wBAAtB;AACA,SAASC,cAAT,QAA+B,WAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,QAAN,SAAuBF,SAAvB,CAAiC;AAC/BG,EAAAA,WAAW,CAACC,QAAD,EAAW;AACpB,UAAMH,cAAc,CAACI,QAArB,EAA+BD,QAA/B;AACD;AAED;AACF;AACA;AACA;;;AACEE,EAAAA,eAAe,GAAG;AAChB,WAAO,KAAKC,cAAL,GAAsBC,KAA7B;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACEC,EAAAA,QAAQ,CAACD,KAAD,EAAQ;AACd,UAAME,QAAQ,GAAG,KAAKJ,eAAL,KAAyB,GAA1C,CADc,CACiC;;AAE/CE,IAAAA,KAAK,IAAI,GAAT;AAEA,UAAMG,WAAW,GAAG,KAAKJ,cAAL,EAApB;AACA,UAAMK,cAAc,GAAGD,WAAW,CAACE,cAAZ,EAAvB;AACAF,IAAAA,WAAW,CAACG,GAAZ,CAAgB;AAAEN,MAAAA;AAAF,KAAhB,EAA2BO,SAA3B;AACA,SAAKC,qBAAL;AACA,UAAMC,cAAc,GAAGN,WAAW,CAACE,cAAZ,EAAvB;;AACA,SAAKK,oBAAL,CAA0BN,cAA1B,EAA0CK,cAA1C,EAA0DT,KAAK,GAAGE,QAAlE;;AAEA,WAAOX,OAAO,CAACoB,OAAR,CAAgBX,KAAhB,CAAP;AACD;AAED;AACF;AACA;AACA;AACA;AACA;AACA;;;AACEU,EAAAA,oBAAoB,CAACN,cAAD,EAAiBK,cAAjB,EAAiCG,SAAjC,EAA4C;AAC9D,UAAMC,MAAM,GAAG,KAAKC,SAAL,EAAf;AACA,UAAMC,UAAU,GAAG;AACjBC,MAAAA,CAAC,EAAEZ,cAAc,CAACY,CAAf,GAAmBP,cAAc,CAACO,CADpB;AAEjBC,MAAAA,CAAC,EAAEb,cAAc,CAACa,CAAf,GAAmBR,cAAc,CAACQ;AAFpB,KAAnB;AAKAJ,IAAAA,MAAM,CAACK,aAAP,CAAsBC,GAAD,IAAS;AAC5B,YAAMC,SAAS,GAAGD,GAAG,CAACd,cAAJ,EAAlB;AACA,YAAMgB,MAAM,GAAG/B,MAAM,CAACgC,IAAP,CAAYC,gBAAZ,CAA6BX,SAA7B,CAAf;AACA,YAAMY,YAAY,GAAGlC,MAAM,CAACgC,IAAP,CAAYG,WAAZ,CAAwBL,SAAxB,EAAmChB,cAAnC,EAAmDiB,MAAnD,CAArB;AAEAF,MAAAA,GAAG,CAACb,GAAJ,CAAQ;AACNoB,QAAAA,IAAI,EAAEF,YAAY,CAACR,CAAb,GAAiBD,UAAU,CAACC,CAD5B;AAENW,QAAAA,GAAG,EAAEH,YAAY,CAACP,CAAb,GAAiBF,UAAU,CAACE,CAF3B;AAGNjB,QAAAA,KAAK,EAAE,CAACmB,GAAG,CAACnB,KAAJ,GAAYY,SAAb,IAA0B;AAH3B,OAAR;AAKAO,MAAAA,GAAG,CAACZ,SAAJ;AACD,KAXD;AAYAM,IAAAA,MAAM,CAACe,SAAP;AACD;AAED;AACF;AACA;AACA;AACA;;;AACEC,EAAAA,MAAM,CAACC,eAAD,EAAkB;AACtB,UAAMC,OAAO,GAAG,KAAKjC,eAAL,EAAhB;AAEA,WAAO,KAAKG,QAAL,CAAc8B,OAAO,GAAGD,eAAxB,CAAP;AACD;;AA5E8B;;AA+EjC,eAAepC,QAAf","sourcesContent":["/**\r\n * @author NHN Ent. FE Development Team <dl_javascript@nhn.com>\r\n * @fileoverview Image rotation module\r\n */\r\nimport fabric from 'fabric';\r\nimport { Promise } from '../util';\r\nimport Component from '../interface/component';\r\nimport { componentNames } from '../consts';\r\n\r\n/**\r\n * Image Rotation component\r\n * @class Rotation\r\n * @extends {Component}\r\n * @param {Graphics} graphics - Graphics instance\r\n * @ignore\r\n */\r\nclass Rotation extends Component {\r\n  constructor(graphics) {\r\n    super(componentNames.ROTATION, graphics);\r\n  }\r\n\r\n  /**\r\n   * Get current angle\r\n   * @returns {Number}\r\n   */\r\n  getCurrentAngle() {\r\n    return this.getCanvasImage().angle;\r\n  }\r\n\r\n  /**\r\n   * Set angle of the image\r\n   *\r\n   *  Do not call \"this.setImageProperties\" for setting angle directly.\r\n   *  Before setting angle, The originX,Y of image should be set to center.\r\n   *      See \"http://fabricjs.com/docs/fabric.Object.html#setAngle\"\r\n   *\r\n   * @param {number} angle - Angle value\r\n   * @returns {Promise}\r\n   */\r\n  setAngle(angle) {\r\n    const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees)\r\n\r\n    angle %= 360;\r\n\r\n    const canvasImage = this.getCanvasImage();\r\n    const oldImageCenter = canvasImage.getCenterPoint();\r\n    canvasImage.set({ angle }).setCoords();\r\n    this.adjustCanvasDimension();\r\n    const newImageCenter = canvasImage.getCenterPoint();\r\n    this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle);\r\n\r\n    return Promise.resolve(angle);\r\n  }\r\n\r\n  /**\r\n   * Rotate for each object\r\n   * @param {fabric.Point} oldImageCenter - Image center point before rotation\r\n   * @param {fabric.Point} newImageCenter - Image center point after rotation\r\n   * @param {number} angleDiff - Image angle difference after rotation\r\n   * @private\r\n   */\r\n  _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) {\r\n    const canvas = this.getCanvas();\r\n    const centerDiff = {\r\n      x: oldImageCenter.x - newImageCenter.x,\r\n      y: oldImageCenter.y - newImageCenter.y,\r\n    };\r\n\r\n    canvas.forEachObject((obj) => {\r\n      const objCenter = obj.getCenterPoint();\r\n      const radian = fabric.util.degreesToRadians(angleDiff);\r\n      const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);\r\n\r\n      obj.set({\r\n        left: newObjCenter.x - centerDiff.x,\r\n        top: newObjCenter.y - centerDiff.y,\r\n        angle: (obj.angle + angleDiff) % 360,\r\n      });\r\n      obj.setCoords();\r\n    });\r\n    canvas.renderAll();\r\n  }\r\n\r\n  /**\r\n   * Rotate the image\r\n   * @param {number} additionalAngle - Additional angle\r\n   * @returns {Promise}\r\n   */\r\n  rotate(additionalAngle) {\r\n    const current = this.getCurrentAngle();\r\n\r\n    return this.setAngle(current + additionalAngle);\r\n  }\r\n}\r\n\r\nexport default Rotation;\r\n"]},"metadata":{},"sourceType":"module"}