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