Mercurial Hosting > linkmystyle

comparison src/uploadcare/croppr.js @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 /**
2 * Croppr.js
3 * https://github.com/jamesssooi/Croppr.js
4 *
5 * A JavaScript image cropper that's lightweight, awesome, and has
6 * zero dependencies.
7 *
8 * (C) 2017 James Ooi. Released under the MIT License.
9 */
10
11 (function (global, factory) {
12 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
13 typeof define === 'function' && define.amd ? define(factory) :
14 (global.Croppr = factory());
15 }(this, (function () { 'use strict';
16
17 (function () {
18 var lastTime = 0;
19 var vendors = ['ms', 'moz', 'webkit', 'o'];
20 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
21 window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
22 window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
23 }
24 if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
25 var currTime = new Date().getTime();
26 var timeToCall = Math.max(0, 16 - (currTime - lastTime));
27 var id = window.setTimeout(function () {
28 callback(currTime + timeToCall);
29 }, timeToCall);
30 lastTime = currTime + timeToCall;
31 return id;
32 };
33 if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
34 clearTimeout(id);
35 };
36 })();
37 (function () {
38 if (typeof window.CustomEvent === "function") return false;
39 function CustomEvent(event, params) {
40 params = params || { bubbles: false, cancelable: false, detail: undefined };
41 var evt = document.createEvent('CustomEvent');
42 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
43 return evt;
44 }
45 CustomEvent.prototype = window.Event.prototype;
46 window.CustomEvent = CustomEvent;
47 })();
48 (function (window) {
49 try {
50 new CustomEvent('test');
51 return false;
52 } catch (e) {}
53 function MouseEvent(eventType, params) {
54 params = params || { bubbles: false, cancelable: false };
55 var mouseEvent = document.createEvent('MouseEvent');
56 mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
57 return mouseEvent;
58 }
59 MouseEvent.prototype = Event.prototype;
60 window.MouseEvent = MouseEvent;
61 })(window);
62
63 var classCallCheck = function (instance, Constructor) {
64 if (!(instance instanceof Constructor)) {
65 throw new TypeError("Cannot call a class as a function");
66 }
67 };
68
69 var createClass = function () {
70 function defineProperties(target, props) {
71 for (var i = 0; i < props.length; i++) {
72 var descriptor = props[i];
73 descriptor.enumerable = descriptor.enumerable || false;
74 descriptor.configurable = true;
75 if ("value" in descriptor) descriptor.writable = true;
76 Object.defineProperty(target, descriptor.key, descriptor);
77 }
78 }
79
80 return function (Constructor, protoProps, staticProps) {
81 if (protoProps) defineProperties(Constructor.prototype, protoProps);
82 if (staticProps) defineProperties(Constructor, staticProps);
83 return Constructor;
84 };
85 }();
86
87
88
89
90
91
92
93 var get = function get(object, property, receiver) {
94 if (object === null) object = Function.prototype;
95 var desc = Object.getOwnPropertyDescriptor(object, property);
96
97 if (desc === undefined) {
98 var parent = Object.getPrototypeOf(object);
99
100 if (parent === null) {
101 return undefined;
102 } else {
103 return get(parent, property, receiver);
104 }
105 } else if ("value" in desc) {
106 return desc.value;
107 } else {
108 var getter = desc.get;
109
110 if (getter === undefined) {
111 return undefined;
112 }
113
114 return getter.call(receiver);
115 }
116 };
117
118 var inherits = function (subClass, superClass) {
119 if (typeof superClass !== "function" && superClass !== null) {
120 throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
121 }
122
123 subClass.prototype = Object.create(superClass && superClass.prototype, {
124 constructor: {
125 value: subClass,
126 enumerable: false,
127 writable: true,
128 configurable: true
129 }
130 });
131 if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
132 };
133
134
135
136
137
138
139
140
141
142
143
144 var possibleConstructorReturn = function (self, call) {
145 if (!self) {
146 throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
147 }
148
149 return call && (typeof call === "object" || typeof call === "function") ? call : self;
150 };
151
152
153
154
155
156 var slicedToArray = function () {
157 function sliceIterator(arr, i) {
158 var _arr = [];
159 var _n = true;
160 var _d = false;
161 var _e = undefined;
162
163 try {
164 for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
165 _arr.push(_s.value);
166
167 if (i && _arr.length === i) break;
168 }
169 } catch (err) {
170 _d = true;
171 _e = err;
172 } finally {
173 try {
174 if (!_n && _i["return"]) _i["return"]();
175 } finally {
176 if (_d) throw _e;
177 }
178 }
179
180 return _arr;
181 }
182
183 return function (arr, i) {
184 if (Array.isArray(arr)) {
185 return arr;
186 } else if (Symbol.iterator in Object(arr)) {
187 return sliceIterator(arr, i);
188 } else {
189 throw new TypeError("Invalid attempt to destructure non-iterable instance");
190 }
191 };
192 }();
193
194 var Handle =
195 /**
196 * Creates a new Handle instance.
197 * @constructor
198 * @param {Array} position The x and y ratio position of the handle
199 * within the crop region. Accepts a value between 0 to 1 in the order
200 * of [X, Y].
201 * @param {Array} constraints Define the side of the crop region that
202 * is to be affected by this handle. Accepts a value of 0 or 1 in the
203 * order of [TOP, RIGHT, BOTTOM, LEFT].
204 * @param {String} cursor The CSS cursor of this handle.
205 * @param {Element} eventBus The element to dispatch events to.
206 */
207 function Handle(position, constraints, cursor, eventBus) {
208 classCallCheck(this, Handle);
209 var self = this;
210 this.position = position;
211 this.constraints = constraints;
212 this.cursor = cursor;
213 this.eventBus = eventBus;
214 this.el = document.createElement('div');
215 this.el.className = 'croppr-handle';
216 this.el.style.cursor = cursor;
217 this.el.addEventListener('mousedown', onMouseDown);
218 function onMouseDown(e) {
219 e.stopPropagation();
220 document.addEventListener('mouseup', onMouseUp);
221 document.addEventListener('mousemove', onMouseMove);
222 self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
223 detail: { handle: self }
224 }));
225 }
226 function onMouseUp(e) {
227 e.stopPropagation();
228 document.removeEventListener('mouseup', onMouseUp);
229 document.removeEventListener('mousemove', onMouseMove);
230 self.eventBus.dispatchEvent(new CustomEvent('handleend', {
231 detail: { handle: self }
232 }));
233 }
234 function onMouseMove(e) {
235 e.stopPropagation();
236 self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
237 detail: { mouseX: e.clientX, mouseY: e.clientY }
238 }));
239 }
240 };
241
242 var Box = function () {
243 /**
244 * Creates a new Box instance.
245 * @constructor
246 * @param {Number} x1
247 * @param {Number} y1
248 * @param {Number} x2
249 * @param {Number} y2
250 */
251 function Box(x1, y1, x2, y2) {
252 classCallCheck(this, Box);
253 this.x1 = x1;
254 this.y1 = y1;
255 this.x2 = x2;
256 this.y2 = y2;
257 }
258 /**
259 * Sets the new dimensions of the box.
260 * @param {Number} x1
261 * @param {Number} y1
262 * @param {Number} x2
263 * @param {Number} y2
264 */
265 createClass(Box, [{
266 key: 'set',
267 value: function set$$1() {
268 var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
269 var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
270 var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
271 var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
272 this.x1 = x1 == null ? this.x1 : x1;
273 this.y1 = y1 == null ? this.y1 : y1;
274 this.x2 = x2 == null ? this.x2 : x2;
275 this.y2 = y2 == null ? this.y2 : y2;
276 return this;
277 }
278 /**
279 * Calculates the width of the box.
280 * @returns {Number}
281 */
282 }, {
283 key: 'width',
284 value: function width() {
285 return Math.abs(this.x2 - this.x1);
286 }
287 /**
288 * Calculates the height of the box.
289 * @returns {Number}
290 */
291 }, {
292 key: 'height',
293 value: function height() {
294 return Math.abs(this.y2 - this.y1);
295 }
296 /**
297 * Resizes the box to a new size.
298 * @param {Number} newWidth
299 * @param {Number} newHeight
300 * @param {Array} [origin] The origin point to resize from.
301 * Defaults to [0, 0] (top left).
302 */
303 }, {
304 key: 'resize',
305 value: function resize(newWidth, newHeight) {
306 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
307 var fromX = this.x1 + this.width() * origin[0];
308 var fromY = this.y1 + this.height() * origin[1];
309 this.x1 = fromX - newWidth * origin[0];
310 this.y1 = fromY - newHeight * origin[1];
311 this.x2 = this.x1 + newWidth;
312 this.y2 = this.y1 + newHeight;
313 return this;
314 }
315 /**
316 * Scale the box by a factor.
317 * @param {Number} factor
318 * @param {Array} [origin] The origin point to resize from.
319 * Defaults to [0, 0] (top left).
320 */
321 }, {
322 key: 'scale',
323 value: function scale(factor) {
324 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
325 var newWidth = this.width() * factor;
326 var newHeight = this.height() * factor;
327 this.resize(newWidth, newHeight, origin);
328 return this;
329 }
330 }, {
331 key: 'move',
332 value: function move() {
333 var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
334 var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
335 var width = this.width();
336 var height = this.height();
337 x = x === null ? this.x1 : x;
338 y = y === null ? this.y1 : y;
339 this.x1 = x;
340 this.y1 = y;
341 this.x2 = x + width;
342 this.y2 = y + height;
343 return this;
344 }
345 /**
346 * Get relative x and y coordinates of a given point within the box.
347 * @param {Array} point The x and y ratio position within the box.
348 * @returns {Array} The x and y coordinates [x, y].
349 */
350 }, {
351 key: 'getRelativePoint',
352 value: function getRelativePoint() {
353 var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
354 var x = this.width() * point[0];
355 var y = this.height() * point[1];
356 return [x, y];
357 }
358 /**
359 * Get absolute x and y coordinates of a given point within the box.
360 * @param {Array} point The x and y ratio position within the box.
361 * @returns {Array} The x and y coordinates [x, y].
362 */
363 }, {
364 key: 'getAbsolutePoint',
365 value: function getAbsolutePoint() {
366 var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
367 var x = this.x1 + this.width() * point[0];
368 var y = this.y1 + this.height() * point[1];
369 return [x, y];
370 }
371 /**
372 * Constrain the box to a fixed ratio.
373 * @param {Number} ratio
374 * @param {Array} [origin] The origin point to resize from.
375 * Defaults to [0, 0] (top left).
376 * @param {String} [grow] The axis to grow to maintain the ratio.
377 * Defaults to 'height'.
378 */
379 }, {
380 key: 'constrainToRatio',
381 value: function constrainToRatio(ratio) {
382 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
383 var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height';
384 if (ratio === null) {
385 return;
386 }
387 var width = this.width();
388 var height = this.height();
389 switch (grow) {
390 case 'height':
391 this.resize(this.width(), this.width() * ratio, origin);
392 break;
393 case 'width':
394 this.resize(this.height() * 1 / ratio, this.height(), origin);
395 break;
396 default:
397 this.resize(this.width(), this.width() * ratio, origin);
398 }
399 return this;
400 }
401 /**
402 * Constrain the box within a boundary.
403 * @param {Number} boundaryWidth
404 * @param {Number} boundaryHeight
405 * @param {Array} [origin] The origin point to resize from.
406 * Defaults to [0, 0] (top left).
407 */
408 }, {
409 key: 'constrainToBoundary',
410 value: function constrainToBoundary(boundaryWidth, boundaryHeight) {
411 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
412 var _getAbsolutePoint = this.getAbsolutePoint(origin),
413 _getAbsolutePoint2 = slicedToArray(_getAbsolutePoint, 2),
414 originX = _getAbsolutePoint2[0],
415 originY = _getAbsolutePoint2[1];
416 var maxIfLeft = originX;
417 var maxIfTop = originY;
418 var maxIfRight = boundaryWidth - originX;
419 var maxIfBottom = boundaryHeight - originY;
420 var directionX = -2 * origin[0] + 1;
421 var directionY = -2 * origin[1] + 1;
422 var maxWidth = null,
423 maxHeight = null;
424 switch (directionX) {
425 case -1:
426 maxWidth = maxIfLeft;break;
427 case 0:
428 maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;break;
429 case +1:
430 maxWidth = maxIfRight;break;
431 }
432 switch (directionY) {
433 case -1:
434 maxHeight = maxIfTop;break;
435 case 0:
436 maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;break;
437 case +1:
438 maxHeight = maxIfBottom;break;
439 }
440 if (this.width() > maxWidth) {
441 var factor = maxWidth / this.width();
442 this.scale(factor, origin);
443 }
444 if (this.height() > maxHeight) {
445 var _factor = maxHeight / this.height();
446 this.scale(_factor, origin);
447 }
448 return this;
449 }
450 /**
451 * Constrain the box to a maximum/minimum size.
452 * @param {Number} [maxWidth]
453 * @param {Number} [maxHeight]
454 * @param {Number} [minWidth]
455 * @param {Number} [minHeight]
456 * @param {Array} [origin] The origin point to resize from.
457 * Defaults to [0, 0] (top left).
458 * @param {Number} [ratio] Ratio to maintain.
459 */
460 }, {
461 key: 'constrainToSize',
462 value: function constrainToSize() {
463 var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
464 var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
465 var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
466 var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
467 var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0];
468 var ratio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
469 if (ratio) {
470 if (ratio > 1) {
471 maxWidth = maxHeight * 1 / ratio;
472 minHeight = minHeight * ratio;
473 } else if (ratio < 1) {
474 maxHeight = maxWidth * ratio;
475 minWidth = minHeight * 1 / ratio;
476 }
477 }
478 if (maxWidth && this.width() > maxWidth) {
479 var newWidth = maxWidth,
480 newHeight = ratio === null ? this.height() : maxHeight;
481 this.resize(newWidth, newHeight, origin);
482 }
483 if (maxHeight && this.height() > maxHeight) {
484 var _newWidth = ratio === null ? this.width() : maxWidth,
485 _newHeight = maxHeight;
486 this.resize(_newWidth, _newHeight, origin);
487 }
488 if (minWidth && this.width() < minWidth) {
489 var _newWidth2 = minWidth,
490 _newHeight2 = ratio === null ? this.height() : minHeight;
491 this.resize(_newWidth2, _newHeight2, origin);
492 }
493 if (minHeight && this.height() < minHeight) {
494 var _newWidth3 = ratio === null ? this.width() : minWidth,
495 _newHeight3 = minHeight;
496 this.resize(_newWidth3, _newHeight3, origin);
497 }
498 return this;
499 }
500 }]);
501 return Box;
502 }();
503
504 /**
505 * Binds an element's touch events to be simulated as mouse events.
506 * @param {Element} element
507 */
508 function enableTouch(element) {
509 element.addEventListener('touchstart', simulateMouseEvent);
510 element.addEventListener('touchend', simulateMouseEvent);
511 element.addEventListener('touchmove', simulateMouseEvent);
512 }
513 /**
514 * Translates a touch event to a mouse event.
515 * @param {Event} e
516 */
517 function simulateMouseEvent(e) {
518 e.preventDefault();
519 var touch = e.changedTouches[0];
520 var eventMap = {
521 'touchstart': 'mousedown',
522 'touchmove': 'mousemove',
523 'touchend': 'mouseup'
524 };
525 touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], {
526 bubbles: true,
527 cancelable: true,
528 view: window,
529 clientX: touch.clientX,
530 clientY: touch.clientY,
531 screenX: touch.screenX,
532 screenY: touch.screenY
533 }));
534 }
535
536 /**
537 * Define a list of handles to create.
538 *
539 * @property {Array} position - The x and y ratio position of the handle within
540 * the crop region. Accepts a value between 0 to 1 in the order of [X, Y].
541 * @property {Array} constraints - Define the side of the crop region that is to
542 * be affected by this handle. Accepts a value of 0 or 1 in the order of
543 * [TOP, RIGHT, BOTTOM, LEFT].
544 * @property {String} cursor - The CSS cursor of this handle.
545 */
546 var HANDLES = [{ position: [0.0, 0.0], constraints: [1, 0, 0, 1], cursor: 'nw-resize' }, { position: [0.5, 0.0], constraints: [1, 0, 0, 0], cursor: 'n-resize' }, { position: [1.0, 0.0], constraints: [1, 1, 0, 0], cursor: 'ne-resize' }, { position: [1.0, 0.5], constraints: [0, 1, 0, 0], cursor: 'e-resize' }, { position: [1.0, 1.0], constraints: [0, 1, 1, 0], cursor: 'se-resize' }, { position: [0.5, 1.0], constraints: [0, 0, 1, 0], cursor: 's-resize' }, { position: [0.0, 1.0], constraints: [0, 0, 1, 1], cursor: 'sw-resize' }, { position: [0.0, 0.5], constraints: [0, 0, 0, 1], cursor: 'w-resize' }];
547 var CropprCore = function () {
548 function CropprCore(element, options) {
549 var _this = this;
550 var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
551 classCallCheck(this, CropprCore);
552 this.options = CropprCore.parseOptions(options || {});
553 if (!element.nodeName) {
554 element = document.querySelector(element);
555 if (element == null) {
556 throw 'Unable to find element.';
557 }
558 }
559 if (!element.getAttribute('src')) {
560 throw 'Image src not provided.';
561 }
562 this._initialized = false;
563 this._restore = {
564 parent: element.parentNode,
565 element: element
566 };
567 if (!deferred) {
568 if (element.width === 0 || element.height === 0) {
569 element.onload = function () {
570 _this.initialize(element);
571 };
572 } else {
573 this.initialize(element);
574 }
575 }
576 }
577 createClass(CropprCore, [{
578 key: 'initialize',
579 value: function initialize(element) {
580 this.createDOM(element);
581 this.options.convertToPixels(this.cropperEl);
582 this.attachHandlerEvents();
583 this.attachRegionEvents();
584 this.attachOverlayEvents();
585 this.box = this.initializeBox(this.options);
586 this.redraw();
587 this._initialized = true;
588 if (this.options.onInitialize !== null) {
589 this.options.onInitialize(this);
590 }
591 }
592 }, {
593 key: 'createDOM',
594 value: function createDOM(targetEl) {
595 this.containerEl = document.createElement('div');
596 this.containerEl.className = 'croppr-container';
597 this.eventBus = this.containerEl;
598 enableTouch(this.containerEl);
599 this.cropperEl = document.createElement('div');
600 this.cropperEl.className = 'croppr';
601 this.imageEl = document.createElement('img');
602 this.imageEl.setAttribute('src', targetEl.getAttribute('src'));
603 this.imageEl.setAttribute('alt', targetEl.getAttribute('alt'));
604 this.imageEl.className = 'croppr-image';
605 this.imageClippedEl = this.imageEl.cloneNode();
606 this.imageClippedEl.className = 'croppr-imageClipped';
607 this.regionEl = document.createElement('div');
608 this.regionEl.className = 'croppr-region';
609 this.overlayEl = document.createElement('div');
610 this.overlayEl.className = 'croppr-overlay';
611 var handleContainerEl = document.createElement('div');
612 handleContainerEl.className = 'croppr-handleContainer';
613 this.handles = [];
614 for (var i = 0; i < HANDLES.length; i++) {
615 var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus);
616 this.handles.push(handle);
617 handleContainerEl.appendChild(handle.el);
618 }
619 this.cropperEl.appendChild(this.imageEl);
620 this.cropperEl.appendChild(this.imageClippedEl);
621 this.cropperEl.appendChild(this.regionEl);
622 this.cropperEl.appendChild(this.overlayEl);
623 this.cropperEl.appendChild(handleContainerEl);
624 this.containerEl.appendChild(this.cropperEl);
625 targetEl.parentElement.replaceChild(this.containerEl, targetEl);
626 }
627 /**
628 * Changes the image src.
629 * @param {String} src
630 */
631 }, {
632 key: 'setImage',
633 value: function setImage(src) {
634 var _this2 = this;
635 this.imageEl.onload = function () {
636 _this2.box = _this2.initializeBox(_this2.options);
637 _this2.redraw();
638 };
639 this.imageEl.src = src;
640 this.imageClippedEl.src = src;
641 return this;
642 }
643 }, {
644 key: 'destroy',
645 value: function destroy() {
646 this._restore.parent.replaceChild(this._restore.element, this.containerEl);
647 }
648 /**
649 * Create a new box region with a set of options.
650 * @param {Object} opts The options.
651 * @returns {Box}
652 */
653 }, {
654 key: 'initializeBox',
655 value: function initializeBox(opts) {
656 var width = opts.startSize.width;
657 var height = opts.startSize.height;
658 var box = new Box(0, 0, width, height);
659 box.constrainToRatio(opts.aspectRatio, [0.5, 0.5]);
660 var min = opts.minSize;
661 var max = opts.maxSize;
662 box.constrainToSize(max.width, max.height, min.width, min.height, [0.5, 0.5], opts.aspectRatio);
663 var parentWidth = this.cropperEl.offsetWidth;
664 var parentHeight = this.cropperEl.offsetHeight;
665 box.constrainToBoundary(parentWidth, parentHeight, [0.5, 0.5]);
666 var x = this.cropperEl.offsetWidth / 2 - box.width() / 2;
667 var y = this.cropperEl.offsetHeight / 2 - box.height() / 2;
668 box.move(x, y);
669 return box;
670 }
671 }, {
672 key: 'redraw',
673 value: function redraw() {
674 var _this3 = this;
675 var width = Math.round(this.box.width()),
676 height = Math.round(this.box.height()),
677 x1 = Math.round(this.box.x1),
678 y1 = Math.round(this.box.y1),
679 x2 = Math.round(this.box.x2),
680 y2 = Math.round(this.box.y2);
681 window.requestAnimationFrame(function () {
682 _this3.regionEl.style.transform = 'translate(' + x1 + 'px, ' + y1 + 'px)';
683 _this3.regionEl.style.width = width + 'px';
684 _this3.regionEl.style.height = height + 'px';
685 _this3.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';
686 var center = _this3.box.getAbsolutePoint([.5, .5]);
687 var xSign = center[0] - _this3.cropperEl.offsetWidth / 2 >> 31;
688 var ySign = center[1] - _this3.cropperEl.offsetHeight / 2 >> 31;
689 var quadrant = (xSign ^ ySign) + ySign + ySign + 4;
690 var foregroundHandleIndex = -2 * quadrant + 8;
691 for (var i = 0; i < _this3.handles.length; i++) {
692 var handle = _this3.handles[i];
693 var handleWidth = handle.el.offsetWidth;
694 var handleHeight = handle.el.offsetHeight;
695 var left = x1 + width * handle.position[0] - handleWidth / 2;
696 var top = y1 + height * handle.position[1] - handleHeight / 2;
697 handle.el.style.transform = 'translate(' + Math.round(left) + 'px, ' + Math.round(top) + 'px)';
698 handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4;
699 }
700 });
701 }
702 }, {
703 key: 'attachHandlerEvents',
704 value: function attachHandlerEvents() {
705 var eventBus = this.eventBus;
706 eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this));
707 eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this));
708 eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this));
709 }
710 }, {
711 key: 'attachRegionEvents',
712 value: function attachRegionEvents() {
713 var eventBus = this.eventBus;
714 var self = this;
715 this.regionEl.addEventListener('mousedown', onMouseDown);
716 eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this));
717 eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this));
718 eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this));
719 function onMouseDown(e) {
720 e.stopPropagation();
721 document.addEventListener('mouseup', onMouseUp);
722 document.addEventListener('mousemove', onMouseMove);
723 eventBus.dispatchEvent(new CustomEvent('regionstart', {
724 detail: { mouseX: e.clientX, mouseY: e.clientY }
725 }));
726 }
727 function onMouseMove(e) {
728 e.stopPropagation();
729 eventBus.dispatchEvent(new CustomEvent('regionmove', {
730 detail: { mouseX: e.clientX, mouseY: e.clientY }
731 }));
732 }
733 function onMouseUp(e) {
734 e.stopPropagation();
735 document.removeEventListener('mouseup', onMouseUp);
736 document.removeEventListener('mousemove', onMouseMove);
737 eventBus.dispatchEvent(new CustomEvent('regionend', {
738 detail: { mouseX: e.clientX, mouseY: e.clientY }
739 }));
740 }
741 }
742 }, {
743 key: 'attachOverlayEvents',
744 value: function attachOverlayEvents() {
745 var SOUTHEAST_HANDLE_IDX = 4;
746 var self = this;
747 var tmpBox = null;
748 this.overlayEl.addEventListener('mousedown', onMouseDown);
749 function onMouseDown(e) {
750 e.stopPropagation();
751 document.addEventListener('mouseup', onMouseUp);
752 document.addEventListener('mousemove', onMouseMove);
753 var container = self.cropperEl.getBoundingClientRect();
754 var mouseX = e.clientX - container.left;
755 var mouseY = e.clientY - container.top;
756 tmpBox = self.box;
757 self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1);
758 self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
759 detail: { handle: self.handles[SOUTHEAST_HANDLE_IDX] }
760 }));
761 }
762 function onMouseMove(e) {
763 e.stopPropagation();
764 self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
765 detail: { mouseX: e.clientX, mouseY: e.clientY }
766 }));
767 }
768 function onMouseUp(e) {
769 e.stopPropagation();
770 document.removeEventListener('mouseup', onMouseUp);
771 document.removeEventListener('mousemove', onMouseMove);
772 if (self.box.width() === 1 && self.box.height() === 1) {
773 self.box = tmpBox;
774 return;
775 }
776 self.eventBus.dispatchEvent(new CustomEvent('handleend', {
777 detail: { mouseX: e.clientX, mouseY: e.clientY }
778 }));
779 }
780 }
781 }, {
782 key: 'onHandleMoveStart',
783 value: function onHandleMoveStart(e) {
784 var handle = e.detail.handle;
785 var originPoint = [1 - handle.position[0], 1 - handle.position[1]];
786 var _box$getAbsolutePoint = this.box.getAbsolutePoint(originPoint),
787 _box$getAbsolutePoint2 = slicedToArray(_box$getAbsolutePoint, 2),
788 originX = _box$getAbsolutePoint2[0],
789 originY = _box$getAbsolutePoint2[1];
790 this.activeHandle = { handle: handle, originPoint: originPoint, originX: originX, originY: originY };
791 if (this.options.onCropStart !== null) {
792 this.options.onCropStart(this.getValue());
793 }
794 }
795 }, {
796 key: 'onHandleMoveMoving',
797 value: function onHandleMoveMoving(e) {
798 var _e$detail = e.detail,
799 mouseX = _e$detail.mouseX,
800 mouseY = _e$detail.mouseY;
801 var container = this.cropperEl.getBoundingClientRect();
802 mouseX = mouseX - container.left;
803 mouseY = mouseY - container.top;
804 if (mouseX < 0) {
805 mouseX = 0;
806 } else if (mouseX > container.width) {
807 mouseX = container.width;
808 }
809 if (mouseY < 0) {
810 mouseY = 0;
811 } else if (mouseY > container.height) {
812 mouseY = container.height;
813 }
814 var origin = this.activeHandle.originPoint.slice();
815 var originX = this.activeHandle.originX;
816 var originY = this.activeHandle.originY;
817 var handle = this.activeHandle.handle;
818 var TOP_MOVABLE = handle.constraints[0] === 1;
819 var RIGHT_MOVABLE = handle.constraints[1] === 1;
820 var BOTTOM_MOVABLE = handle.constraints[2] === 1;
821 var LEFT_MOVABLE = handle.constraints[3] === 1;
822 var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE);
823 var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1;
824 var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2;
825 var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1;
826 var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2;
827 x1 = LEFT_MOVABLE ? mouseX : x1;
828 x2 = RIGHT_MOVABLE ? mouseX : x2;
829 y1 = TOP_MOVABLE ? mouseY : y1;
830 y2 = BOTTOM_MOVABLE ? mouseY : y2;
831 var isFlippedX = false,
832 isFlippedY = false;
833 if (LEFT_MOVABLE || RIGHT_MOVABLE) {
834 isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX;
835 }
836 if (TOP_MOVABLE || BOTTOM_MOVABLE) {
837 isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY;
838 }
839 if (isFlippedX) {
840 var tmp = x1;x1 = x2;x2 = tmp;
841 origin[0] = 1 - origin[0];
842 }
843 if (isFlippedY) {
844 var _tmp = y1;y1 = y2;y2 = _tmp;
845 origin[1] = 1 - origin[1];
846 }
847 var box = new Box(x1, y1, x2, y2);
848 if (this.options.aspectRatio) {
849 var ratio = this.options.aspectRatio;
850 var isVerticalMovement = false;
851 if (MULTI_AXIS) {
852 isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width();
853 } else if (TOP_MOVABLE || BOTTOM_MOVABLE) {
854 isVerticalMovement = true;
855 }
856 var ratioMode = isVerticalMovement ? 'width' : 'height';
857 box.constrainToRatio(ratio, origin, ratioMode);
858 }
859 var min = this.options.minSize;
860 var max = this.options.maxSize;
861 box.constrainToSize(max.width, max.height, min.width, min.height, origin, this.options.aspectRatio);
862 var parentWidth = this.cropperEl.offsetWidth;
863 var parentHeight = this.cropperEl.offsetHeight;
864 box.constrainToBoundary(parentWidth, parentHeight, origin);
865 this.box = box;
866 this.redraw();
867 if (this.options.onCropMove !== null) {
868 this.options.onCropMove(this.getValue());
869 }
870 }
871 }, {
872 key: 'onHandleMoveEnd',
873 value: function onHandleMoveEnd(e) {
874 if (this.options.onCropEnd !== null) {
875 this.options.onCropEnd(this.getValue());
876 }
877 }
878 }, {
879 key: 'onRegionMoveStart',
880 value: function onRegionMoveStart(e) {
881 var _e$detail2 = e.detail,
882 mouseX = _e$detail2.mouseX,
883 mouseY = _e$detail2.mouseY;
884 var container = this.cropperEl.getBoundingClientRect();
885 mouseX = mouseX - container.left;
886 mouseY = mouseY - container.top;
887 this.currentMove = {
888 offsetX: mouseX - this.box.x1,
889 offsetY: mouseY - this.box.y1
890 };
891 if (this.options.onCropStart !== null) {
892 this.options.onCropStart(this.getValue());
893 }
894 }
895 }, {
896 key: 'onRegionMoveMoving',
897 value: function onRegionMoveMoving(e) {
898 var _e$detail3 = e.detail,
899 mouseX = _e$detail3.mouseX,
900 mouseY = _e$detail3.mouseY;
901 var _currentMove = this.currentMove,
902 offsetX = _currentMove.offsetX,
903 offsetY = _currentMove.offsetY;
904 var container = this.cropperEl.getBoundingClientRect();
905 mouseX = mouseX - container.left;
906 mouseY = mouseY - container.top;
907 this.box.move(mouseX - offsetX, mouseY - offsetY);
908 if (this.box.x1 < 0) {
909 this.box.move(0, null);
910 }
911 if (this.box.x2 > container.width) {
912 this.box.move(container.width - this.box.width(), null);
913 }
914 if (this.box.y1 < 0) {
915 this.box.move(null, 0);
916 }
917 if (this.box.y2 > container.height) {
918 this.box.move(null, container.height - this.box.height());
919 }
920 this.redraw();
921 if (this.options.onCropMove !== null) {
922 this.options.onCropMove(this.getValue());
923 }
924 }
925 }, {
926 key: 'onRegionMoveEnd',
927 value: function onRegionMoveEnd(e) {
928 if (this.options.onCropEnd !== null) {
929 this.options.onCropEnd(this.getValue());
930 }
931 }
932 }, {
933 key: 'getValue',
934 value: function getValue() {
935 var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
936 if (mode === null) {
937 mode = this.options.returnMode;
938 }
939 if (mode == 'real') {
940 var actualWidth = this.imageEl.naturalWidth;
941 var actualHeight = this.imageEl.naturalHeight;
942 var _imageEl$getBoundingC = this.imageEl.getBoundingClientRect(),
943 elementWidth = _imageEl$getBoundingC.width,
944 elementHeight = _imageEl$getBoundingC.height;
945 var factorX = actualWidth / elementWidth;
946 var factorY = actualHeight / elementHeight;
947 return {
948 x: Math.round(this.box.x1 * factorX),
949 y: Math.round(this.box.y1 * factorY),
950 width: Math.round(this.box.width() * factorX),
951 height: Math.round(this.box.height() * factorY)
952 };
953 } else if (mode == 'ratio') {
954 var _imageEl$getBoundingC2 = this.imageEl.getBoundingClientRect(),
955 _elementWidth = _imageEl$getBoundingC2.width,
956 _elementHeight = _imageEl$getBoundingC2.height;
957 return {
958 x: round(this.box.x1 / _elementWidth, 3),
959 y: round(this.box.y1 / _elementHeight, 3),
960 width: round(this.box.width() / _elementWidth, 3),
961 height: round(this.box.height() / _elementHeight, 3)
962 };
963 } else if (mode == 'raw') {
964 return {
965 x: Math.round(this.box.x1),
966 y: Math.round(this.box.y1),
967 width: Math.round(this.box.width()),
968 height: Math.round(this.box.height())
969 };
970 }
971 }
972 }], [{
973 key: 'parseOptions',
974 value: function parseOptions(opts) {
975 var defaults$$1 = {
976 aspectRatio: null,
977 maxSize: { width: null, height: null },
978 minSize: { width: null, height: null },
979 startSize: { width: 100, height: 100, unit: '%' },
980 returnMode: 'real',
981 onInitialize: null,
982 onCropStart: null,
983 onCropMove: null,
984 onCropEnd: null
985 };
986 var aspectRatio = null;
987 if (opts.aspectRatio !== undefined) {
988 if (typeof opts.aspectRatio === 'number') {
989 aspectRatio = opts.aspectRatio;
990 } else if (opts.aspectRatio instanceof Array) {
991 aspectRatio = opts.aspectRatio[1] / opts.aspectRatio[0];
992 }
993 }
994 var maxSize = null;
995 if (opts.maxSize !== undefined && opts.maxSize !== null) {
996 maxSize = {
997 width: opts.maxSize[0] || null,
998 height: opts.maxSize[1] || null,
999 unit: opts.maxSize[2] || 'px'
1000 };
1001 }
1002 var minSize = null;
1003 if (opts.minSize !== undefined && opts.minSize !== null) {
1004 minSize = {
1005 width: opts.minSize[0] || null,
1006 height: opts.minSize[1] || null,
1007 unit: opts.minSize[2] || 'px'
1008 };
1009 }
1010 var startSize = null;
1011 if (opts.startSize !== undefined && opts.startSize !== null) {
1012 startSize = {
1013 width: opts.startSize[0] || null,
1014 height: opts.startSize[1] || null,
1015 unit: opts.startSize[2] || '%'
1016 };
1017 }
1018 var onInitialize = null;
1019 if (typeof opts.onInitialize === 'function') {
1020 onInitialize = opts.onInitialize;
1021 }
1022 var onCropStart = null;
1023 if (typeof opts.onCropStart === 'function') {
1024 onCropStart = opts.onCropStart;
1025 }
1026 var onCropEnd = null;
1027 if (typeof opts.onCropEnd === 'function') {
1028 onCropEnd = opts.onCropEnd;
1029 }
1030 var onCropMove = null;
1031 if (typeof opts.onUpdate === 'function') {
1032 console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.');
1033 onCropMove = opts.onUpdate;
1034 }
1035 if (typeof opts.onCropMove === 'function') {
1036 onCropMove = opts.onCropMove;
1037 }
1038 var returnMode = null;
1039 if (opts.returnMode !== undefined) {
1040 var s = opts.returnMode.toLowerCase();
1041 if (['real', 'ratio', 'raw'].indexOf(s) === -1) {
1042 throw "Invalid return mode.";
1043 }
1044 returnMode = s;
1045 }
1046 var convertToPixels = function convertToPixels(container) {
1047 var width = container.offsetWidth;
1048 var height = container.offsetHeight;
1049 var sizeKeys = ['maxSize', 'minSize', 'startSize'];
1050 for (var i = 0; i < sizeKeys.length; i++) {
1051 var key = sizeKeys[i];
1052 if (this[key] !== null) {
1053 if (this[key].unit == '%') {
1054 if (this[key].width !== null) {
1055 this[key].width = this[key].width / 100 * width;
1056 }
1057 if (this[key].height !== null) {
1058 this[key].height = this[key].height / 100 * height;
1059 }
1060 }
1061 delete this[key].unit;
1062 }
1063 }
1064 };
1065 var defaultValue = function defaultValue(v, d) {
1066 return v !== null ? v : d;
1067 };
1068 return {
1069 aspectRatio: defaultValue(aspectRatio, defaults$$1.aspectRatio),
1070 maxSize: defaultValue(maxSize, defaults$$1.maxSize),
1071 minSize: defaultValue(minSize, defaults$$1.minSize),
1072 startSize: defaultValue(startSize, defaults$$1.startSize),
1073 returnMode: defaultValue(returnMode, defaults$$1.returnMode),
1074 onInitialize: defaultValue(onInitialize, defaults$$1.onInitialize),
1075 onCropStart: defaultValue(onCropStart, defaults$$1.onCropStart),
1076 onCropMove: defaultValue(onCropMove, defaults$$1.onCropMove),
1077 onCropEnd: defaultValue(onCropEnd, defaults$$1.onCropEnd),
1078 convertToPixels: convertToPixels
1079 };
1080 }
1081 }]);
1082 return CropprCore;
1083 }();
1084 function round(value, decimals) {
1085 return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
1086 }
1087
1088 var Croppr$1 = function (_CropprCore) {
1089 inherits(Croppr, _CropprCore);
1090 /**
1091 * @constructor
1092 * Calls the CropprCore's constructor.
1093 */
1094 function Croppr(element, options) {
1095 var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
1096 classCallCheck(this, Croppr);
1097 return possibleConstructorReturn(this, (Croppr.__proto__ || Object.getPrototypeOf(Croppr)).call(this, element, options, _deferred));
1098 }
1099 /**
1100 * Gets the value of the crop region.
1101 * @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
1102 * 'raw'.
1103 */
1104 createClass(Croppr, [{
1105 key: 'getValue',
1106 value: function getValue(mode) {
1107 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'getValue', this).call(this, mode);
1108 }
1109 /**
1110 * Changes the image src.
1111 * @param {String} src
1112 */
1113 }, {
1114 key: 'setImage',
1115 value: function setImage(src) {
1116 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'setImage', this).call(this, src);
1117 }
1118 }, {
1119 key: 'destroy',
1120 value: function destroy() {
1121 return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'destroy', this).call(this);
1122 }
1123 /**
1124 * Moves the crop region to a specified coordinate.
1125 * @param {Number} x
1126 * @param {Number} y
1127 */
1128 }, {
1129 key: 'moveTo',
1130 value: function moveTo(x, y) {
1131 this.box.move(x, y);
1132 this.redraw();
1133 if (this.options.onCropEnd !== null) {
1134 this.options.onCropEnd(this.getValue());
1135 }
1136 return this;
1137 }
1138 /**
1139 * Resizes the crop region to a specified width and height.
1140 * @param {Number} width
1141 * @param {Number} height
1142 * @param {Array} origin The origin point to resize from.
1143 * Defaults to [0.5, 0.5] (center).
1144 */
1145 }, {
1146 key: 'resizeTo',
1147 value: function resizeTo(width, height) {
1148 var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [.5, .5];
1149 this.box.resize(width, height, origin);
1150 this.redraw();
1151 if (this.options.onCropEnd !== null) {
1152 this.options.onCropEnd(this.getValue());
1153 }
1154 return this;
1155 }
1156 /**
1157 * Scale the crop region by a factor.
1158 * @param {Number} factor
1159 * @param {Array} origin The origin point to resize from.
1160 * Defaults to [0.5, 0.5] (center).
1161 */
1162 }, {
1163 key: 'scaleBy',
1164 value: function scaleBy(factor) {
1165 var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [.5, .5];
1166 this.box.scale(factor, origin);
1167 this.redraw();
1168 if (this.options.onCropEnd !== null) {
1169 this.options.onCropEnd(this.getValue());
1170 }
1171 return this;
1172 }
1173 }, {
1174 key: 'reset',
1175 value: function reset() {
1176 this.box = this.initializeBox(this.options);
1177 this.redraw();
1178 if (this.options.onCropEnd !== null) {
1179 this.options.onCropEnd(this.getValue());
1180 }
1181 return this;
1182 }
1183 }]);
1184 return Croppr;
1185 }(CropprCore);
1186
1187 return Croppr$1;
1188
1189 })));