Source: BrightnessComponent.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 './BrightnessSlider.es';
  19. import {core} from 'metal';
  20. import Component from 'metal-component';
  21. import Soy from 'metal-soy';
  23. import componentTemplates from './BrightnessComponent.soy';
  25. import './BrightnessControls.soy';
  27. /**
  28.  * Creates a Brightness component.
  29.  */
  30. class BrightnessComponent 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 brightness 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 brightness 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 brightnessValue = this.components.slider.value;
  71. 		let promise = this.cache_[brightnessValue];
  73. 		if (!promise) {
  74. 			promise = this.spawnWorker_({
  75. 				brightnessValue,
  76. 				imageData,
  77. 			});
  79. 			this.cache_[brightnessValue] = promise;
  80. 		}
  82. 		return promise;
  83. 	}
  85. 	/**
  86. 	 * Notifies the editor that this component wants to generate
  87. 	 * a different preview version of the current image. It debounces
  88. 	 * the calls.
  89. 	 */
  90. 	requestPreview() {
  91. 		this.requestImageEditorPreview_();
  92. 	}
  94. 	/**
  95. 	 * Spawns a webworker to process the image in a different thread.
  96. 	 *
  97. 	 * @param  {Object} message The image and brightness value.
  98. 	 * @return {Promise} A promise that resolves when the webworker
  99. 	 * finishes processing the image.
  100. 	 */
  101. 	spawnWorker_(message) {
  102. 		return new Promise((resolve) => {
  103. 			const workerURI = this.modulePath + '/BrightnessWorker.js';
  104. 			const processWorker = new Worker(workerURI);
  105. 			processWorker.onmessage = (event) => resolve(event.data);
  106. 			processWorker.postMessage(message);
  107. 		});
  108. 	}
  109. }
  111. /**
  112.  * State definition.
  113.  *
  114.  * @static
  115.  * @type {!Object}
  116.  */
  117. BrightnessComponent.STATE = {
  119. 	/**
  120. 	 * Path of this module.
  121. 	 *
  122. 	 * @type {String}
  123. 	 */
  124. 	modulePath: {
  125. 		validator: core.isString,
  126. 	},
  128. 	/**
  129. 	 * Injected method that notifies the editor that the component wants to
  130. 	 * generate a preview version of the image.
  131. 	 *
  132. 	 * @type {Function}
  133. 	 */
  134. 	requestImageEditorPreview: {
  135. 		validator: core.isFunction,
  136. 	},
  137. };
  139. Soy.register(BrightnessComponent, componentTemplates);
  141. export default BrightnessComponent;