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"}