Source: ContrastComponent.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 {debounce} from 'frontend-js-web';
  17. import './ContrastSlider.es/';
  19. import {core} from 'metal';
  20. import Component from 'metal-component';
  21. import Soy from 'metal-soy';
  23. import componentTemplates from './ContrastComponent.soy';
  25. import './ContrastControls.soy';
  27. /**
  28.  * Creates a Contrast component.
  29.  */
  30. class ContrastComponent extends Component {
  32. 	/**
  33. 	 * @inheritDoc
  34. 	 */
  35. 	attached() {
  36. 		this.requestImageEditorPreview_ = debounce(
  37. 			this.requestImageEditorPreview,
  38. 			50
  39. 		);
  41. 		this.cache_ = {};
  42. 	}
  44. 	/**
  45. 	 * @inheritDoc
  46. 	 */
  47. 	detached() {
  48. 		this.cache_ = {};
  49. 	}
  51. 	/**
  52. 	 * Applies a contrast filter to the image.
  53. 	 *
  54. 	 * @param  {ImageData} imageData The image data representation of the image.
  55. 	 * @return {Promise} A promise that resolves when the webworker
  56. 	 * finishes processing the image.
  57. 	 */
  58. 	preview(imageData) {
  59. 		return this.process(imageData);
  60. 	}
  62. 	/**
  63. 	 * Applies a contrast filter to the image.
  64. 	 *
  65. 	 * @param  {ImageData} imageData The image data representation of the image.
  66. 	 * @return {Promise} A promise that resolves when the webworker
  67. 	 * finishes processing the image.
  68. 	 */
  69. 	process(imageData) {
  70. 		const contrastValue = this.components.slider.value;
  71. 		let promise = this.cache_[contrastValue];
  73. 		if (!promise) {
  74. 			promise = this.spawnWorker_({
  75. 				contrastValue,
  76. 				imageData,
  77. 			});
  79. 			this.cache_[contrastValue] = promise;
  80. 		}
  82. 		return promise;
  83. 	}
  85. 	/**
  86. 	 * Notifies the editor that this component wants to generate a different
  87. 	 * preview version of the current image. It debounces the calls.
  88. 	 */
  89. 	requestPreview() {
  90. 		this.requestImageEditorPreview_();
  91. 	}
  93. 	/**
  94. 	 * Spawns a webworker to process the image in a different thread.
  95. 	 *
  96. 	 * @param  {Object} message The image and contrast value.
  97. 	 * @return {Promise} A promise that resolves when the webworker
  98. 	 * finishes processing the image.
  99. 	 */
  100. 	spawnWorker_(message) {
  101. 		return new Promise((resolve) => {
  102. 			const workerURI = this.modulePath + '/ContrastWorker.js';
  103. 			const processWorker = new Worker(workerURI);
  104. 			processWorker.onmessage = (event) => resolve(event.data);
  105. 			processWorker.postMessage(message);
  106. 		});
  107. 	}
  108. }
  110. /**
  111.  * State definition.
  112.  *
  113.  * @static
  114.  * @type {!Object}
  115.  */
  116. ContrastComponent.STATE = {
  118. 	/**
  119. 	 * Path of this module.
  120. 	 *
  121. 	 * @type {String}
  122. 	 */
  123. 	modulePath: {
  124. 		validator: core.isString,
  125. 	},
  127. 	/**
  128. 	 * Injected method that notifies the editor that this component wants to
  129. 	 * generate a preview version of the image.
  130. 	 *
  131. 	 * @type {Function}
  132. 	 */
  133. 	requestImageEditorPreview: {
  134. 		validator: core.isFunction,
  135. 	},
  136. };
  138. Soy.register(ContrastComponent, componentTemplates);
  140. export default ContrastComponent;