Source: frontend-image-editor-capability-crop/src/main/resources/META-INF/resources/CropHandles.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 dom from 'metal-dom';
  18. import {Drag} from 'metal-drag-drop';
  19. import Position from 'metal-position';
  20. import Soy from 'metal-soy';
  22. import handlesTemplates from './CropHandles.soy';
  24. /**
  25.  * Creates a Crop Handles Component.
  26.  */
  27. class CropHandles extends Component {
  28. 	/**
  29. 	 * @inheritDoc
  30. 	 */
  31. 	attached() {
  32. 		this.parentNode_ = this.element.parentNode;
  34. 		this.resizer = this.element.querySelector('.resize-handle');
  36. 		this.selectionBorderWidth_ = parseInt(
  37. 			this.element.style.borderWidth,
  38. 			10
  39. 		);
  41. 		this.croppedPreview_ = this.element.querySelector(
  42. 			'.cropped-image-preview'
  43. 		);
  45. 		this.croppedPreviewContext_ = this.croppedPreview_.getContext('2d');
  47. 		async.nextTick(() => {
  48. 			const canvas = this.getImageEditorCanvas();
  50. 			this.setSelectionInitialStyle_();
  52. 			this.initializeDrags_();
  54. 			dom.removeClasses(this.element, 'hide');
  55. 			dom.append(canvas.parentElement, this.element);
  56. 		});
  57. 	}
  59. 	/**
  60. 	 * @inheritDoc
  61. 	 */
  62. 	detached() {
  63. 		const canvas = this.getImageEditorCanvas();
  65. 		canvas.style.opacity = 1;
  66. 	}
  68. 	/**
  69. 	 * Binds actions for the mover and size handler.
  70. 	 *
  71. 	 * @protected
  72. 	 */
  73. 	bindDrags_() {
  74. 		this.resizer.addEventListener('mousedown', event =>
  75. 			event.stopPropagation()
  76. 		);
  78. 		this.bindSelectionDrag_();
  79. 		this.bindSizeDrag_();
  80. 	}
  82. 	/**
  83. 	 * Binds actions for the mover.
  84. 	 *
  85. 	 * @protected
  86. 	 */
  87. 	bindSelectionDrag_() {
  88. 		const canvas = this.getImageEditorCanvas();
  90. 		this.selectionDrag_.on(Drag.Events.DRAG, data => {
  91. 			const left =
  92. 				data.relativeX - canvas.offsetLeft + this.selectionBorderWidth_;
  93. 			const top =
  94. 				data.relativeY - canvas.offsetTop + this.selectionBorderWidth_;
  96. 			this.element.style.left = left + 'px';
  97. 			this.element.style.top = top + 'px';
  99. 			this.croppedPreviewContext_.drawImage(
  100. 				canvas,
  101. 				left,
  102. 				top,
  103. 				this.croppedPreview_.width,
  104. 				this.croppedPreview_.height,
  105. 				0,
  106. 				0,
  107. 				this.croppedPreview_.width,
  108. 				this.croppedPreview_.height
  109. 			);
  110. 		});
  111. 	}
  113. 	/**
  114. 	 * Binds actions for the size handler.
  115. 	 *
  116. 	 * @protected
  117. 	 */
  118. 	bindSizeDrag_() {
  119. 		const canvas = this.getImageEditorCanvas();
  121. 		this.sizeDrag_.on(Drag.Events.DRAG, data => {
  122. 			const width = data.relativeX + this.resizer.offsetWidth / 2;
  123. 			const height = data.relativeY + this.resizer.offsetHeight / 2;
  125. 			this.element.style.width =
  126. 				width + this.selectionBorderWidth_ * 2 + 'px';
  127. 			this.element.style.height =
  128. 				height + this.selectionBorderWidth_ * 2 + 'px';
  130. 			this.croppedPreview_.width = width;
  131. 			this.croppedPreview_.height = height;
  133. 			this.croppedPreviewContext_.drawImage(
  134. 				canvas,
  135. 				this.element.offsetLeft -
  136. 					canvas.offsetLeft +
  137. 					this.selectionBorderWidth_,
  138. 				this.element.offsetTop -
  139. 					canvas.offsetTop +
  140. 					this.selectionBorderWidth_,
  141. 				width,
  142. 				height,
  143. 				0,
  144. 				0,
  145. 				width,
  146. 				height
  147. 			);
  148. 			this.croppedPreview_.style.width = width + 'px';
  149. 			this.croppedPreview_.style.height = height + 'px';
  150. 		});
  151. 	}
  153. 	/**
  154. 	 * Calculates the constrain region for the selection drag and resize.
  155. 	 *
  156. 	 * @protected
  157. 	 */
  158. 	getSizeDragConstrain_(region) {
  159. 		const canvas = this.getImageEditorCanvas();
  161. 		const constrain = Position.getRegion(canvas);
  163. 		const selection = Position.getRegion(this.element);
  165. 		constrain.left =
  166. 			selection.left +
  167. 			this.resizer.offsetWidth +
  168. 			this.selectionBorderWidth_ * 2;
  169. 		constrain.top =
  170. 			selection.top +
  171. 			this.resizer.offsetHeight +
  172. 			this.selectionBorderWidth_ * 2;
  173. 		constrain.width = constrain.right - constrain.left;
  174. 		constrain.height = constrain.bottom - constrain.top;
  175. 		constrain.right +=
  176. 			this.resizer.offsetWidth / 2 - this.selectionBorderWidth_;
  177. 		constrain.bottom +=
  178. 			this.resizer.offsetHeight / 2 - this.selectionBorderWidth_;
  180. 		if (region.left < constrain.left) {
  181. 			region.left = constrain.left;
  182. 		} else if (region.right > constrain.right) {
  183. 			region.left -= region.right - constrain.right;
  184. 		}
  186. 		if (region.top < constrain.top) {
  187. 			region.top = constrain.top;
  188. 		} else if (region.bottom > constrain.bottom) {
  189. 			region.top -= region.bottom - constrain.bottom;
  190. 		}
  192. 		region.right = region.left + region.width;
  193. 		region.bottom = region.top + region.height;
  194. 	}
  196. 	/**
  197. 	 * Initializes the mover and size handler.
  198. 	 *
  199. 	 * @protected
  200. 	 */
  201. 	initializeDrags_() {
  202. 		const canvas = this.getImageEditorCanvas();
  204. 		this.selectionDrag_ = new Drag({
  205. 			constrain: canvas,
  206. 			handles: this.element,
  207. 			sources: this.element
  208. 		});
  210. 		this.sizeDrag_ = new Drag({
  211. 			constrain: this.getSizeDragConstrain_.bind(this),
  212. 			handles: this.resizer,
  213. 			sources: this.resizer
  214. 		});
  216. 		this.bindDrags_();
  217. 	}
  219. 	/**
  220. 	 * Sets the initial style for the selection and preview.
  221. 	 *
  222. 	 * @protected
  223. 	 */
  224. 	setSelectionInitialStyle_() {
  225. 		const canvas = this.getImageEditorCanvas();
  227. 		canvas.style.opacity = 0.5;
  229. 		this.element.style.width = canvas.offsetWidth + 'px';
  230. 		this.element.style.height = canvas.offsetHeight + 'px';
  231. 		this.element.style.left = canvas.offsetLeft + 'px';
  232. 		this.element.style.top = canvas.offsetTop + 'px';
  234. 		this.croppedPreview_.width = canvas.offsetWidth;
  235. 		this.croppedPreview_.height = canvas.offsetHeight;
  237. 		this.croppedPreviewContext_.drawImage(
  238. 			canvas,
  239. 			this.selectionBorderWidth_,
  240. 			this.selectionBorderWidth_,
  241. 			canvas.width - this.selectionBorderWidth_ * 2,
  242. 			canvas.height - this.selectionBorderWidth_ * 2,
  243. 			0,
  244. 			0,
  245. 			canvas.width - this.selectionBorderWidth_ * 2,
  246. 			canvas.height - this.selectionBorderWidth_ * 2
  247. 		);
  249. 		this.croppedPreview_.style.width = this.croppedPreview_.width + 'px';
  250. 		this.croppedPreview_.style.height = this.croppedPreview_.height + 'px';
  251. 	}
  252. }
  254. /**
  255.  * State definition.
  256.  *
  257.  * @static
  258.  * @type {!Object}
  259.  */
  260. CropHandles.STATE = {
  261. 	/**
  262. 	 * Injected helper that retrieves the editor canvas element.
  263. 	 *
  264. 	 * @type {Function}
  265. 	 */
  266. 	getImageEditorCanvas: {
  267. 		validator: core.isFunction
  268. 	}
  269. };
  271. Soy.register(CropHandles, handlesTemplates);
  273. export default CropHandles;