Source: frontend-image-editor-capability-effects/src/main/resources/META-INF/resources/EffectsComponent.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 {async, core} from 'metal';
  16. import Component from 'metal-component';
  17. import Soy from 'metal-soy';
  19. import componentTemplates from './EffectsComponent.soy';
  20. import './EffectsControls.soy';
  22. /**
  23.  * Creates an Effects component.
  24.  */
  25. class EffectsComponent extends Component {
  26. 	/**
  27. 	 * @inheritDoc
  28. 	 */
  29. 	attached() {
  30. 		this.cache_ = {};
  32. 		async.nextTick(() => {
  33. 			this.getImageEditorImageData()
  34. 				.then(imageData =>
  35. 					Promise.resolve(this.generateThumbnailImageData_(imageData))
  36. 				)
  37. 				.then(previewImageData =>
  38. 					this.generateThumbnails_(previewImageData)
  39. 				)
  40. 				.then(() => this.prefetchEffects_());
  41. 		});
  42. 	}
  44. 	/**
  45. 	 * @inheritDoc
  46. 	 */
  47. 	detached() {
  48. 		this.cache_ = {};
  49. 	}
  51. 	/**
  52. 	 * Returns <code>true</code> if the carousel can be scrolled to the right.
  53. 	 *
  54. 	 * @private
  55. 	 * @return {boolean} <code>True</code> if the carousel can be scrolled to
  56. 	 * the right; <code>false</code> otherwise.
  57. 	 */
  58. 	canScrollForward_() {
  59. 		const carousel = this.refs.carousel;
  60. 		const continer = this.refs.carouselContainer;
  61. 		const offset = Math.abs(parseInt(carousel.style.marginLeft || 0, 10));
  62. 		const viewportWidth = parseInt(continer.offsetWidth, 10);
  63. 		const maxContentWidth = parseInt(carousel.offsetWidth, 10);
  65. 		return offset + viewportWidth < maxContentWidth;
  66. 	}
  68. 	/**
  69. 	 * Generates a thumbnail for a given effect.
  70. 	 *
  71. 	 * @param  {String} effect The effect to generate the thumbnail for.
  72. 	 * @param  {ImageData} imageData The image data to which the effect is applied.
  73. 	 * @return {Promise} A promise that resolves when the thumbnail
  74. 	 * is generated.
  75. 	 */
  76. 	generateThumbnail_(effect, imageData) {
  77. 		const promise = this.spawnWorker_({
  78. 			effect,
  79. 			imageData
  80. 		});
  82. 		promise.then(imageData => {
  83. 			const canvas = this.element.querySelector(
  84. 				'#' + this.ref + effect + ' canvas'
  85. 			);
  86. 			canvas.getContext('2d').putImageData(imageData, 0, 0);
  87. 		});
  89. 		return promise;
  90. 	}
  92. 	/**
  93. 	 * Generates the complete set of thumbnails for the component effects.
  94. 	 *
  95. 	 * @param  {ImageData} imageData The thumbnail image data (small version).
  96. 	 * @return {Promise} A promise that resolves when the thumbnails
  97. 	 * are generated.
  98. 	 */
  99. 	generateThumbnails_(imageData) {
  100. 		return Promise.all(
  101. 			this.effects.map(effect =>
  102. 				this.generateThumbnail_(effect, imageData)
  103. 			)
  104. 		);
  105. 	}
  107. 	/**
  108. 	 * Generates a resized version of the image data to generate the thumbnails
  109. 	 * more efficiently.
  110. 	 *
  111. 	 * @param  {ImageData} imageData The original image data.
  112. 	 * @return {ImageData} The resized image data.
  113. 	 */
  114. 	generateThumbnailImageData_(imageData) {
  115. 		const thumbnailSize = this.thumbnailSize;
  116. 		const imageWidth = imageData.width;
  117. 		const imageHeight = imageData.height;
  119. 		const rawCanvas = document.createElement('canvas');
  120. 		rawCanvas.width = imageWidth;
  121. 		rawCanvas.height = imageHeight;
  122. 		rawCanvas.getContext('2d').putImageData(imageData, 0, 0);
  124. 		const commonSize = imageWidth > imageHeight ? imageHeight : imageWidth;
  126. 		const canvas = document.createElement('canvas');
  127. 		canvas.width = thumbnailSize;
  128. 		canvas.height = thumbnailSize;
  130. 		const context = canvas.getContext('2d');
  131. 		context.drawImage(
  132. 			rawCanvas,
  133. 			imageWidth - commonSize,
  134. 			imageHeight - commonSize,
  135. 			commonSize,
  136. 			commonSize,
  137. 			0,
  138. 			0,
  139. 			thumbnailSize,
  140. 			thumbnailSize
  141. 		);
  143. 		return context.getImageData(0, 0, thumbnailSize, thumbnailSize);
  144. 	}
  146. 	/**
  147. 	 * Prefetches all the effect results.
  148. 	 *
  149. 	 * @return {Promise} A promise that resolves when all the effects
  150. 	 * are prefetched.
  151. 	 */
  152. 	prefetchEffects_() {
  153. 		return new Promise(resolve => {
  154. 			if (!this.isDisposed()) {
  155. 				const missingEffects = this.effects.filter(
  156. 					effect => !this.cache_[effect]
  157. 				);
  159. 				if (!missingEffects.length) {
  160. 					resolve();
  161. 				} else {
  162. 					this.getImageEditorImageData()
  163. 						.then(imageData =>
  164. 							this.process(imageData, missingEffects[0])
  165. 						)
  166. 						.then(() => this.prefetchEffects_());
  167. 				}
  168. 			}
  169. 		});
  170. 	}
  172. 	/**
  173. 	 * Applies the selected effect to the image.
  174. 	 *
  175. 	 * @param  {ImageData} imageData The image data representation of the image.
  176. 	 * @return {Promise} A promise that resolves when the webworker
  177. 	 * finishes processing the image.
  178. 	 */
  179. 	preview(imageData) {
  180. 		return this.process(imageData);
  181. 	}
  183. 	/**
  184. 	 * Notifies the editor that the component wants to generate a new preview of
  185. 	 * the current image.
  186. 	 *
  187. 	 * @param  {MouseEvent} event The mouse event.
  188. 	 */
  189. 	previewEffect(event) {
  190. 		this.currentEffect_ = event.delegateTarget.getAttribute('data-effect');
  191. 		this.requestImageEditorPreview();
  192. 	}
  194. 	/**
  195. 	 * Applies the selected effect to the image.
  196. 	 *
  197. 	 * @param  {ImageData} imageData The image data representation of the image.
  198. 	 * @param {String} effectName The effect to apply to the image.
  199. 	 * @return {Promise} A promise that resolves when the webworker
  200. 	 * finishes processing the image.
  201. 	 */
  202. 	process(imageData, effectName) {
  203. 		const effect = effectName || this.currentEffect_;
  204. 		let promise = this.cache_[effect];
  206. 		if (!promise) {
  207. 			promise = this.spawnWorker_({
  208. 				effect,
  209. 				imageData
  210. 			});
  212. 			this.cache_[effect] = promise;
  213. 		}
  215. 		return promise;
  216. 	}
  218. 	/**
  219. 	 * Makes the carousel scroll left to reveal options of the visible area.
  220. 	 *
  221. 	 * @return void
  222. 	 */
  223. 	scrollLeft() {
  224. 		const carousel = this.refs.carousel;
  225. 		const itemWidth = this.refs.carouselFirstItem.offsetWidth || 0;
  226. 		const marginLeft = parseInt(carousel.style.marginLeft || 0, 10);
  228. 		if (marginLeft < 0) {
  229. 			const newMarginValue = Math.min(marginLeft + itemWidth, 0);
  231. 			this.carouselOffset = newMarginValue + 'px';
  232. 		}
  233. 	}
  235. 	/**
  236. 	 * Makes the carousel scroll right to reveal options of the visible area.
  237. 	 *
  238. 	 * @return void
  239. 	 */
  240. 	scrollRight() {
  241. 		if (this.canScrollForward_()) {
  242. 			const carousel = this.refs.carousel;
  243. 			const itemWidth = this.refs.carouselFirstItem.offsetWidth || 0;
  244. 			const marginLeft = parseInt(carousel.style.marginLeft || 0, 10);
  246. 			this.carouselOffset = marginLeft - itemWidth + 'px';
  247. 		}
  248. 	}
  250. 	/**
  251. 	 * Spawns a webworker to process the image in a different thread.
  252. 	 *
  253. 	 * @param  {String} workerURI The URI of the worker to spawn.
  254. 	 * @param  {Object} message The image and effect preset.
  255. 	 * @return {Promise} A promise that resolves when the webworker
  256. 	 * finishes processing the image.
  257. 	 */
  258. 	spawnWorker_(message) {
  259. 		return new Promise(resolve => {
  260. 			const processWorker = new Worker(
  261. 				this.modulePath + '/EffectsWorker.js'
  262. 			);
  264. 			processWorker.onmessage = event => resolve(event.data);
  265. 			processWorker.postMessage(message);
  266. 		});
  267. 	}
  268. }
  270. /**
  271.  * State definition.
  272.  *
  273.  * @static
  274.  * @type {!Object}
  275.  */
  276. EffectsComponent.STATE = {
  277. 	/**
  278. 	 * Offset in pixels (<code>px</code> postfix) for the carousel item.
  279. 	 *
  280. 	 * @type {String}
  281. 	 */
  282. 	carouselOffset: {
  283. 		validator: core.isString,
  284. 		value: '0'
  285. 	},
  287. 	/**
  288. 	 * Array of available effects.
  289. 	 *
  290. 	 * @type {Object}
  291. 	 */
  292. 	effects: {
  293. 		validator: core.isArray,
  294. 		value: [
  295. 			'none',
  296. 			'ruby',
  297. 			'absinthe',
  298. 			'chroma',
  299. 			'atari',
  300. 			'tripel',
  301. 			'ailis',
  302. 			'flatfoot',
  303. 			'pyrexia',
  304. 			'umbra',
  305. 			'rouge',
  306. 			'idyll',
  307. 			'glimmer',
  308. 			'elysium',
  309. 			'nucleus',
  310. 			'amber',
  311. 			'paella',
  312. 			'aureus',
  313. 			'expanse',
  314. 			'orchid'
  315. 		]
  316. 	},
  318. 	/**
  319. 	 * Injected helper that retrieves the editor image data.
  320. 	 *
  321. 	 * @type {Function}
  322. 	 */
  323. 	getImageEditorImageData: {
  324. 		validator: core.isFunction
  325. 	},
  327. 	/**
  328. 	 * Path of this module.
  329. 	 *
  330. 	 * @type {Function}
  331. 	 */
  332. 	modulePath: {
  333. 		validator: core.isString
  334. 	},
  336. 	/**
  337. 	 * Injected helper that retrieves the editor image data.
  338. 	 *
  339. 	 * @type {Function}
  340. 	 */
  341. 	requestImageEditorPreview: {
  342. 		validator: core.isFunction
  343. 	},
  345. 	/**
  346. 	 * Size of the thumbnails (size x size).
  347. 	 *
  348. 	 * @type {Number}
  349. 	 */
  350. 	thumbnailSize: {
  351. 		validator: core.isNumber,
  352. 		value: 55
  353. 	}
  354. };
  356. Soy.register(EffectsComponent, componentTemplates);
  358. export default EffectsComponent;