Source: ResizeComponent.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 './ResizeComponent.soy';
  21. import './ResizeControls.soy';
  23. /**
  24.  * Creates a Resize component.
  25.  */
  26. class ResizeComponent extends Component {
  28. 	/**
  29. 	 * @inheritDoc
  30. 	 */
  31. 	attached() {
  32. 		this.getImageEditorImageData().then((imageData) => {
  33. 			this.imageWidth = imageData.width;
  34. 			this.imageHeight = imageData.height;
  36. 			this.imageRatio_ = this.imageWidth / this.imageHeight;
  38. 			this.imageHeightInput_ = this.element.querySelector(
  39. 				'#' + this.ref + 'Height'
  40. 			);
  41. 			this.imageWidthInput_ = this.element.querySelector(
  42. 				'#' + this.ref + 'Width'
  43. 			);
  45. 			this.lockProportions = true;
  46. 		});
  47. 	}
  49. 	/**
  50. 	 * Executes the resize operation to get the final version of the image.
  51. 	 *
  52. 	 * @param  {ImageData} imageData The image data representation of the image.
  53. 	 * @return {Promise} A promise that resolves with the resized
  54. 	 * image data representation.
  55. 	 */
  56. 	process(imageData) {
  57. 		return Promise.resolve(this.resizeImageData_(imageData));
  58. 	}
  60. 	/**
  61. 	 * Resizes image data to the user's selected width and height values.
  62. 	 *
  63. 	 * @param  {ImageData} imageData The original image data.
  64. 	 * @return {ImageData} The resized image data with the component width and
  65. 	 * height values specified by the user.
  66. 	 */
  67. 	resizeImageData_(imageData) {
  68. 		const rawCanvas = document.createElement('canvas');
  69. 		rawCanvas.width = imageData.width;
  70. 		rawCanvas.height = imageData.height;
  72. 		rawCanvas.getContext('2d').putImageData(imageData, 0, 0);
  74. 		const canvas = document.createElement('canvas');
  75. 		canvas.width = this.imageWidth;
  76. 		canvas.height = this.imageHeight;
  78. 		const context = canvas.getContext('2d');
  79. 		context.drawImage(rawCanvas, 0, 0, this.imageWidth, this.imageHeight);
  81. 		return context.getImageData(0, 0, this.imageWidth, this.imageHeight);
  82. 	}
  84. 	/**
  85. 	 * Keeps the width/height ratio in sync when <code>lockProportions</code> is
  86. 	 * <code>true</code>.
  87. 	 *
  88. 	 * @param  {InputEvent} event The input event.
  89. 	 */
  90. 	syncDimensions(event) {
  91. 		const newValue = parseInt(event.delegateTarget.value, 10);
  93. 		if (event.delegateTarget === this.imageWidthInput_) {
  94. 			this.imageWidth = newValue;
  96. 			if (this.lockProportions) {
  97. 				this.imageHeight = parseInt(newValue / this.imageRatio_, 10);
  98. 				this.imageHeightInput_.value = this.imageHeight;
  99. 			}
  100. 		}
  101. 		else {
  102. 			this.imageHeight = newValue;
  104. 			if (this.lockProportions) {
  105. 				this.imageWidth = parseInt(newValue * this.imageRatio_, 10);
  106. 				this.imageWidthInput_.value = this.imageWidth;
  107. 			}
  108. 		}
  109. 	}
  111. 	/**
  112. 	 * Toggles the value of the <code>lockProportions</code> attribute. When
  113. 	 * enabled, changes in one of the dimensions cascades changes to the other
  114. 	 * to keep the original image ratio.
  115. 	 */
  116. 	toggleLockProportions() {
  117. 		this.lockProportions = !this.lockProportions;
  118. 	}
  119. }
  121. /**
  122.  * State definition.
  123.  *
  124.  * @static
  125.  * @type {!Object}
  126.  */
  127. ResizeComponent.STATE = {
  129. 	/**
  130. 	 * Injected helper that retrieves the editor image data.
  131. 	 *
  132. 	 * @type {Function}
  133. 	 */
  134. 	getImageEditorImageData: {
  135. 		validator: core.isFunction,
  136. 	},
  137. };
  139. Soy.register(ResizeComponent, componentTemplates);
  141. export default ResizeComponent;