Source: RotateComponent.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import {core} from 'metal';
  16. import Component from 'metal-component';
  17. import Soy from 'metal-soy';
  19. import componentTemplates from './RotateComponent.soy';
  21. import './RotateControls.soy';
  23. /**
  24.  * Creates a Rotate component.
  25.  */
  26. class RotateComponent extends Component {
  28. 	/**
  29. 	 * @inheritDoc
  30. 	 */
  31. 	attached() {
  32. 		this.cache_ = {};
  33. 		this.rotationAngle_ = 0;
  34. 	}
  36. 	/**
  37. 	 * @inheritDoc
  38. 	 */
  39. 	detached() {
  40. 		this.cache_ = {};
  41. 	}
  43. 	/**
  44. 	 * Rotates the image to the current selected rotation angle.
  45. 	 *
  46. 	 * @param  {ImageData} imageData The image data representation of the image.
  47. 	 * @return {Promise} A promise that resolves when processing is
  48. 	 * complete.
  49. 	 */
  50. 	preview(imageData) {
  51. 		return this.process(imageData);
  52. 	}
  54. 	/**
  55. 	 * Rotates the image to the current selected rotation angle.
  56. 	 *
  57. 	 * @param  {ImageData} imageData The image data representation of the image.
  58. 	 * @return {Promise} A promise that resolves when processing is
  59. 	 * complete.
  60. 	 */
  61. 	process(imageData) {
  62. 		let promise = this.cache_[this.rotationAngle_];
  64. 		if (!promise) {
  65. 			promise = this.rotate_(imageData, this.rotationAngle_);
  67. 			this.cache_[this.rotationAngle_] = promise;
  68. 		}
  70. 		return promise;
  71. 	}
  73. 	/**
  74. 	 * Rotates the passed image data to the current rotation angle.
  75. 	 *
  76. 	 * @param  {ImageData} imageData The image data to rotate.
  77. 	 * @param  {number} rotationAngle The normalized rotation angle (in degrees)
  78. 	 * in the range [0-360).
  79. 	 * @protected
  80. 	 * @return {Promise} A promise that resolves when the image is
  81. 	 * rotated.
  82. 	 */
  83. 	rotate_(imageData, rotationAngle) {
  84. 		const cancellablePromise = new Promise((resolve) => {
  85. 			const imageWidth = imageData.width;
  86. 			const imageHeight = imageData.height;
  88. 			const swapDimensions = (rotationAngle / 90) % 2;
  90. 			const imageCanvas = document.createElement('canvas');
  91. 			imageCanvas.width = imageWidth;
  92. 			imageCanvas.height = imageHeight;
  93. 			imageCanvas.getContext('2d').putImageData(imageData, 0, 0);
  95. 			const offscreenCanvas = document.createElement('canvas');
  96. 			offscreenCanvas.width = swapDimensions ? imageHeight : imageWidth;
  97. 			offscreenCanvas.height = swapDimensions ? imageWidth : imageHeight;
  99. 			const offscreenContext = offscreenCanvas.getContext('2d');
  100. 			offscreenContext.save();
  101. 			offscreenContext.translate(
  102. 				offscreenCanvas.width / 2,
  103. 				offscreenCanvas.height / 2
  104. 			);
  105. 			offscreenContext.rotate((rotationAngle * Math.PI) / 180);
  106. 			offscreenContext.drawImage(
  107. 				imageCanvas,
  108. 				-imageCanvas.width / 2,
  109. 				-imageCanvas.height / 2
  110. 			);
  111. 			offscreenContext.restore();
  113. 			resolve(
  114. 				offscreenContext.getImageData(
  115. 					0,
  116. 					0,
  117. 					offscreenCanvas.width,
  118. 					offscreenCanvas.height
  119. 				)
  120. 			);
  121. 		});
  123. 		return cancellablePromise;
  124. 	}
  126. 	/**
  127. 	 * Rotates the image 90º counter-clockwise.
  128. 	 */
  129. 	rotateLeft() {
  130. 		this.rotationAngle_ = (this.rotationAngle_ - 90) % 360;
  131. 		this.requestImageEditorPreview();
  132. 	}
  134. 	/**
  135. 	 * Rotates the image 90º clockwise.
  136. 	 */
  137. 	rotateRight() {
  138. 		this.rotationAngle_ = (this.rotationAngle_ + 90) % 360;
  139. 		this.requestImageEditorPreview();
  140. 	}
  141. }
  143. /**
  144.  * State definition.
  145.  *
  146.  * @static
  147.  * @type {!Object}
  148.  */
  149. RotateComponent.STATE = {
  151. 	/**
  152. 	 * Path of this module.
  153. 	 *
  154. 	 * @type {Function}
  155. 	 */
  156. 	modulePath: {
  157. 		validator: core.isString,
  158. 	},
  160. 	/**
  161. 	 * Injected method that notifies the editor that this component wants to
  162. 	 * generate a preview version of the image.
  163. 	 *
  164. 	 * @type {Function}
  165. 	 */
  166. 	requestImageEditorPreview: {
  167. 		validator: core.isFunction,
  168. 	},
  169. };
  171. Soy.register(RotateComponent, componentTemplates);
  173. export default RotateComponent;