Source: ImageEditor.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 './ImageEditorLoading.es';
  17. import 'clay-dropdown';
  18. import {PortletBase} from 'frontend-js-web';
  19. import {async, core} from 'metal';
  20. import dom from 'metal-dom';
  21. import Soy from 'metal-soy';
  23. import templates from './ImageEditor.soy';
  24. import ImageEditorHistoryEntry from './ImageEditorHistoryEntry.es';
  26. /**
  27.  * Creates an Image Editor component.
  28.  *
  29.  * <p>
  30.  * This class bootstraps all the necessary parts of an image editor. It only
  31.  * controls the state and history of the editing process, orchestrating how the
  32.  * different parts of the application work.
  33.  * </p>
  34.  *
  35.  * <p>
  36.  * All image processing is delegated to the different image editor capability
  37.  * implementations. The editor provides
  38.  * </p>
  39.  *
  40.  * <ul>
  41.  * <li>
  42.  * A common way of exposing the functionality.
  43.  * </li>
  44.  * <li>
  45.  * Some registration points which can be used by the image editor capability
  46.  * implementors to provide UI controls.
  47.  * </li>
  48.  * </ul>
  49.  */
  50. class ImageEditor extends PortletBase {
  52. 	/**
  53. 	 * @inheritDoc
  54. 	 */
  55. 	attached() {
  56. 		this.historyIndex_ = 0;
  58. 		/**
  59. 		 * History of the different image states during editing. Every entry
  60. 		 * represents a change to the image on top of the previous one. History
  61. 		 * entries are objects with the following attributes:
  62. 		 *
  63. 		 * <ul>
  64. 		 * <li>
  65. 		 * url (optional): the URL representing the image.
  66. 		 * </li>
  67. 		 * <li>
  68. 		 * data: the image data object of the image.
  69. 		 * </li>
  70. 		 * </ul>
  71. 		 * @protected
  72. 		 * @type {Array.<Object>}
  73. 		 */
  74. 		this.history_ = [
  75. 			new ImageEditorHistoryEntry({
  76. 				url: this.image,
  77. 			}),
  78. 		];
  80. 		// Polyfill svg usage for lexicon icons
  82. 		if (window.svg4everybody) {
  83. 			svg4everybody({
  84. 				polyfill: true,
  85. 			});
  86. 		}
  88. 		// Load the first entry imageData and render it on the app.
  90. 		this.history_[0].getImageData().then((imageData) => {
  91. 			async.nextTick(() => {
  92. 				this.imageEditorReady = true;
  94. 				this.syncImageData_(imageData);
  95. 			});
  96. 		});
  97. 	}
  99. 	/**
  100. 	 * Accepts the current changes applied by the active control and creates
  101. 	 * a new entry in the history stack. This wipes out any stale redo states.
  102. 	 */
  103. 	accept() {
  104. 		const selectedControl = this.components[
  105. 			this.id + '_selected_control_' + this.selectedControl.variant
  106. 		];
  108. 		this.history_[this.historyIndex_]
  109. 			.getImageData()
  110. 			.then((imageData) => selectedControl.process(imageData))
  111. 			.then((imageData) => this.createHistoryEntry_(imageData))
  112. 			.then(() => this.syncHistory_())
  113. 			.then(() => {
  114. 				this.selectedControl = null;
  115. 				this.selectedTool = null;
  116. 			});
  117. 	}
  119. 	/**
  120. 	 * Notifies the opener app that the user wants to close the editor without
  121. 	 * saving the changes.
  122. 	 *
  123. 	 * @protected
  124. 	 */
  125. 	close_() {
  126. 		Liferay.Util.getWindow().hide();
  127. 	}
  129. 	/**
  130. 	 * Creates a new history entry state.
  131. 	 *
  132. 	 * @param  {ImageData} imageData The image data of the new image.
  133. 	 * @protected
  134. 	 */
  135. 	createHistoryEntry_(imageData) {
  136. 		this.historyIndex_++;
  137. 		this.history_.length = this.historyIndex_ + 1;
  138. 		this.history_[this.historyIndex_] = new ImageEditorHistoryEntry({
  139. 			data: imageData,
  140. 		});
  142. 		return Promise.resolve();
  143. 	}
  145. 	/**
  146. 	 * Discards the current changes applied by the active control and reverts
  147. 	 * the image to its state before the control activation.
  148. 	 */
  149. 	discard() {
  150. 		this.selectedControl = null;
  151. 		this.selectedTool = null;
  152. 		this.syncHistory_();
  153. 	}
  155. 	/**
  156. 	 * Retrieves the editor canvas DOM node.
  157. 	 *
  158. 	 * @return {Element} The canvas element
  159. 	 */
  160. 	getImageEditorCanvas() {
  161. 		return this.element.querySelector(
  162. 			'.lfr-image-editor-image-container canvas'
  163. 		);
  164. 	}
  166. 	/**
  167. 	 * Retrieves the blob representation of the current image.
  168. 	 *
  169. 	 * @return {Promise} A promise that resolves with the image blob.
  170. 	 */
  171. 	getImageEditorImageBlob() {
  172. 		return new Promise((resolve) => {
  173. 			this.getImageEditorImageData().then((imageData) => {
  174. 				const canvas = document.createElement('canvas');
  175. 				canvas.width = imageData.width;
  176. 				canvas.height = imageData.height;
  178. 				canvas.getContext('2d').putImageData(imageData, 0, 0);
  180. 				if (canvas.toBlob) {
  181. 					canvas.toBlob(resolve, this.saveMimeType);
  182. 				}
  183. 				else {
  184. 					const data = atob(
  185. 						canvas.toDataURL(this.saveMimeType).split(',')[1]
  186. 					);
  187. 					const length = data.length;
  188. 					const bytes = new Uint8Array(length);
  190. 					for (let i = 0; i < length; i++) {
  191. 						bytes[i] = data.charCodeAt(i);
  192. 					}
  194. 					resolve(new Blob([bytes], {type: this.saveMimeType}));
  195. 				}
  196. 			});
  197. 		});
  198. 	}
  200. 	/**
  201. 	 * Retrieves the image data representation of the current image.
  202. 	 *
  203. 	 * @return {Promise} A promise that resolves with the image data.
  204. 	 */
  205. 	getImageEditorImageData() {
  206. 		return this.history_[this.historyIndex_].getImageData();
  207. 	}
  209. 	/**
  210. 	 * Returns a list of all possible image editor capabilities.
  211. 	 *
  212. 	 * @return {Array<{Object}>}
  213. 	 */
  214. 	getPossibleControls() {
  215. 		return this.imageEditorCapabilities.tools.reduce(
  216. 			(prev, curr) => prev.concat(curr.controls),
  217. 			[]
  218. 		);
  219. 	}
  221. 	/**
  222. 	 * Normalizes different MIME types to the most similar MIME type available
  223. 	 * to canvas implementations.
  224. 	 *
  225. 	 * @param  {String} mimeType The original MIME type.
  226. 	 * @return {String} The normalized MIME type.
  227. 	 * @see http://kangax.github.io/jstests/toDataUrl_mime_type_test/
  228. 	 */
  229. 	normalizeCanvasMimeType_(mimeType) {
  230. 		mimeType = mimeType.toLowerCase();
  232. 		return mimeType.replace('jpg', 'jpeg');
  233. 	}
  235. 	/**
  236. 	 * Notifies the opener app of the result of the save action.
  237. 	 *
  238. 	 * @param  {Object} result The server response to the save action.
  239. 	 * @protected
  240. 	 */
  241. 	notifySaveResult_(result) {
  242. 		this.components.loading.show = false;
  244. 		if (result && result.success) {
  245. 			Liferay.Util.getOpener().Liferay.fire(this.saveEventName, {
  246. 				data: result,
  247. 			});
  249. 			Liferay.Util.getWindow().hide();
  250. 		}
  251. 		else if (result.error) {
  252. 			this.showError_(result.error.message);
  253. 		}
  254. 	}
  256. 	/**
  257. 	 * Updates the image back to a previously undone state in the history.
  258. 	 * Redoing an action recovers the undone image changes and enables the
  259. 	 * undo stack in case the user wants to undo the changes again.
  260. 	 */
  261. 	redo() {
  262. 		this.historyIndex_++;
  263. 		this.syncHistory_();
  264. 	}
  266. 	/**
  267. 	 * Selects a control and starts its editing phase with filters.
  268. 	 *
  269. 	 * @param  {MouseEvent} event The mouse event.
  270. 	 */
  271. 	requestImageEditorEditFilters(event) {
  272. 		const controls = this.getPossibleControls();
  274. 		const target = event.delegateTarget || event.currentTarget;
  275. 		const targetControl = target.getAttribute('data-control');
  276. 		const targetTool = target.getAttribute('data-tool');
  278. 		this.syncHistory_().then(() => {
  279. 			this.selectedControl = controls.filter(
  280. 				(tool) => tool.variant === targetControl
  281. 			)[0];
  282. 			this.selectedTool = targetTool;
  283. 		});
  284. 	}
  286. 	/**
  287. 	 * Select a control and starts its editing phase.
  288. 	 *
  289. 	 * @param {MouseEvent} event The mouse event.
  290. 	 */
  291. 	requestImageEditorEdit(event) {
  292. 		const controls = this.getPossibleControls();
  294. 		const target = event.target.element;
  295. 		const targetControl = event.data.item.variant;
  296. 		const targetTool = target.getAttribute('data-tool');
  298. 		this.syncHistory_().then(() => {
  299. 			this.selectedControl = controls.filter(
  300. 				(tool) => tool.variant === targetControl
  301. 			)[0];
  302. 			this.selectedTool = targetTool;
  303. 		});
  304. 	}
  306. 	/**
  307. 	 * Queues a request for a preview process of the current image by the
  308. 	 * currently selected control.
  309. 	 */
  310. 	requestImageEditorPreview() {
  311. 		const selectedControl = this.components[
  312. 			this.id + '_selected_control_' + this.selectedControl.variant
  313. 		];
  315. 		this.history_[this.historyIndex_]
  316. 			.getImageData()
  317. 			.then((imageData) => selectedControl.preview(imageData))
  318. 			.then((imageData) => this.syncImageData_(imageData));
  320. 		this.components.loading.show = true;
  321. 	}
  323. 	/**
  324. 	 * Discards all changes and restores the original state of the image.
  325. 	 * Unlike the {@link ImageEditor#undo|undo} and
  326. 	 * {@link ImageEditor#redo|redo} methods, this method wipes out the entire
  327. 	 * history.
  328. 	 */
  329. 	reset() {
  330. 		this.historyIndex_ = 0;
  331. 		this.history_.length = 1;
  332. 		this.syncHistory_();
  333. 	}
  335. 	/**
  336. 	 * Tries to save the current image using the provided save URL.
  337. 	 * @param {MouseEvent} event The mouse event that triggers the save action.
  338. 	 * @protected
  339. 	 */
  340. 	save_(event) {
  341. 		if (!event.delegateTarget.disabled) {
  342. 			this.getImageEditorImageBlob()
  343. 				.then((imageBlob) => this.submitBlob_(imageBlob))
  344. 				.then((result) => this.notifySaveResult_(result))
  345. 				.catch((error) => this.showError_(error));
  346. 		}
  347. 	}
  349. 	/**
  350. 	 * Setter function for the <code>saveMimeType</code> state key.
  351. 	 * @param  {!String} saveMimeType The optional value for the attribute.
  352. 	 * @protected
  353. 	 * @return {String} The computed value for the attribute.
  354. 	 */
  355. 	setterSaveMimeTypeFn_(saveMimeType) {
  356. 		if (!saveMimeType) {
  357. 			const imageExtensionRegex = /https?:\/\/(?:www\.)?(?:.+)\.(\w+)\/[^?/]+/;
  358. 			const imageExtension = this.image.match(imageExtensionRegex)[1];
  360. 			saveMimeType = `image/${imageExtension}`;
  361. 		}
  363. 		return this.normalizeCanvasMimeType_(saveMimeType);
  364. 	}
  366. 	/**
  367. 	 * Displays an error message in the editor.
  368. 	 * @param  {String} message The error message to display.
  369. 	 * @protected
  370. 	 */
  371. 	showError_({message}) {
  372. 		this.components.loading.show = false;
  374. 		Liferay.Util.openToast({
  375. 			container: this.element,
  376. 			message,
  377. 			type: 'danger',
  378. 		});
  379. 	}
  381. 	/**
  382. 	 * Sends a given image blob to the server for processing and storing.
  383. 	 * @param  {Blob} imageBlob The image blob to send to the server.
  384. 	 * @protected
  385. 	 * @return {Promise} A promise that follows the XHR submission
  386. 	 * process.
  387. 	 */
  388. 	submitBlob_(imageBlob) {
  389. 		const saveFileName = this.saveFileName;
  390. 		const saveParamName = this.saveParamName;
  391. 		const saveFileEntryId = this.saveFileEntryId;
  393. 		const promise = new Promise((resolve, reject) => {
  394. 			const formData = new FormData();
  396. 			formData.append(saveParamName, imageBlob, saveFileName);
  397. 			formData.append('fileEntryId', saveFileEntryId);
  399. 			this.fetch(this.saveURL, formData)
  400. 				.then((response) => response.json())
  401. 				.then(resolve)
  402. 				.catch((error) => reject(error));
  403. 		});
  405. 		this.components.loading.show = true;
  407. 		return promise;
  408. 	}
  410. 	/**
  411. 	 * Syncs the image and history values after changes to the history stack.
  412. 	 * @protected
  413. 	 */
  414. 	syncHistory_() {
  415. 		return new Promise((resolve) => {
  416. 			this.history_[this.historyIndex_]
  417. 				.getImageData()
  418. 				.then((imageData) => {
  419. 					this.syncImageData_(imageData);
  421. 					this.history = {
  422. 						canRedo: this.historyIndex_ < this.history_.length - 1,
  423. 						canReset: this.history_.length > 1,
  424. 						canUndo: this.historyIndex_ > 0,
  425. 					};
  427. 					resolve();
  428. 				});
  429. 		});
  430. 	}
  432. 	/**
  433. 	 * Updates the image data displayed in the editable area.
  434. 	 * @param  {ImageData} imageData The new image data value to display in the
  435. 	 * editor.
  436. 	 * @protected
  437. 	 */
  438. 	syncImageData_(imageData) {
  439. 		const width = imageData.width;
  440. 		const height = imageData.height;
  442. 		const aspectRatio = width / height;
  444. 		const offscreenCanvas = document.createElement('canvas');
  445. 		offscreenCanvas.width = width;
  446. 		offscreenCanvas.height = height;
  448. 		const offscreenContext = offscreenCanvas.getContext('2d');
  449. 		offscreenContext.clearRect(0, 0, width, height);
  450. 		offscreenContext.putImageData(imageData, 0, 0);
  452. 		const canvas = this.getImageEditorCanvas();
  454. 		const boundingBox = dom.closest(this.element, '.portlet-layout');
  455. 		const availableWidth = boundingBox.offsetWidth;
  457. 		let dialogFooterHeight = 0;
  458. 		const dialogFooter = this.element.querySelector('.dialog-footer');
  460. 		if (dialogFooter) {
  461. 			dialogFooterHeight = dialogFooter.offsetHeight;
  462. 		}
  464. 		const availableHeight =
  465. 			boundingBox.offsetHeight - 142 - 40 - dialogFooterHeight;
  466. 		const availableAspectRatio = availableWidth / availableHeight;
  468. 		if (availableAspectRatio > 1) {
  469. 			canvas.height = availableHeight;
  470. 			canvas.width = aspectRatio * availableHeight;
  471. 		}
  472. 		else {
  473. 			canvas.width = availableWidth;
  474. 			canvas.height = availableWidth / aspectRatio;
  475. 		}
  477. 		const context = canvas.getContext('2d');
  478. 		context.clearRect(0, 0, canvas.width, canvas.height);
  479. 		context.drawImage(
  480. 			offscreenCanvas,
  481. 			0,
  482. 			0,
  483. 			width,
  484. 			height,
  485. 			0,
  486. 			0,
  487. 			canvas.width,
  488. 			canvas.height
  489. 		);
  491. 		canvas.style.width = canvas.width + 'px';
  492. 		canvas.style.height = canvas.height + 'px';
  494. 		this.components.loading.show = false;
  495. 	}
  497. 	/**
  498. 	 * Reverts the image to the previous state in the history. Undoing an action
  499. 	 * brings back the previous version of the image and enables the redo stack
  500. 	 * in case the user wants to reapply the change again.
  501. 	 */
  502. 	undo() {
  503. 		this.historyIndex_--;
  504. 		this.syncHistory_();
  505. 	}
  506. }
  508. /**
  509.  * State definition.
  510.  * @static
  511.  * @type {!Object}
  512.  */
  513. ImageEditor.STATE = {
  515. 	/**
  516. 	 * Whether the editor is ready for user interaction.
  517. 	 * @type {Object}
  518. 	 */
  519. 	imageEditorReady: {
  520. 		validator: core.isBoolean,
  521. 		value: false,
  522. 	},
  524. 	/**
  525. 	 * Event to dispatch when editing is complete.
  526. 	 * @type {String}
  527. 	 */
  528. 	saveEventName: {
  529. 		validator: core.isString,
  530. 	},
  532. 	/**
  533. 	 * ID of the saved image to send to the server for the save action.
  534. 	 * @type {String}
  535. 	 */
  536. 	saveFileEntryId: {
  537. 		validator: core.isString,
  538. 	},
  540. 	/**
  541. 	 * Name of the saved image to send to the server for the save action.
  542. 	 * @type {String}
  543. 	 */
  544. 	saveFileName: {
  545. 		validator: core.isString,
  546. 	},
  548. 	/**
  549. 	 * MIME type of the saved image. If not explicitly set, the image MIME type
  550. 	 * is inferred from the image URL.
  551. 	 * @type {String}
  552. 	 */
  553. 	saveMimeType: {
  554. 		setter: 'setterSaveMimeTypeFn_',
  555. 		validator: core.isString,
  556. 	},
  558. 	/**
  559. 	 * Name of the param that specifies where to send the image to the server
  560. 	 * for the save action.
  561. 	 * @type {String}
  562. 	 */
  563. 	saveParamName: {
  564. 		validator: core.isString,
  565. 	},
  567. 	/**
  568. 	 * URL to save the image changes.
  569. 	 * @type {String}
  570. 	 */
  571. 	saveURL: {
  572. 		validator: core.isString,
  573. 	},
  574. };
  576. Soy.register(ImageEditor, templates);
  578. export default ImageEditor;