Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

dnm-croppr

Package Overview
Dependencies
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

dnm-croppr - npm Package Compare versions

Comparing version 2.3.6 to 2.3.7

.babelrc

2747

dist/dnm-croppr.js

@@ -16,61 +16,67 @@ /**

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Croppr = factory());
}(this, (function () { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.Croppr = factory());
}(this, function () { 'use strict';
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
})();
(function () {
if (typeof window.CustomEvent === "function") return false;
function CustomEvent(event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
(function (window) {
try {
new CustomEvent('test');
return false;
} catch (e) {}
function MouseEvent(eventType, params) {
params = params || { bubbles: false, cancelable: false };
var mouseEvent = document.createEvent('MouseEvent');
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return mouseEvent;
}
MouseEvent.prototype = Event.prototype;
window.MouseEvent = MouseEvent;
})(window);
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
})();
(function () {
if (typeof window.CustomEvent === "function") return false;
function CustomEvent(event, params) {
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
(function (window) {
try {
new CustomEvent('test');
return false;
} catch (e) {}
function MouseEvent(eventType, params) {
params = params || {
bubbles: false,
cancelable: false
};
var mouseEvent = document.createEvent('MouseEvent');
mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
return mouseEvent;
}
MouseEvent.prototype = Event.prototype;
window.MouseEvent = MouseEvent;
})(window);
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
};
var createClass = function () {
function defineProperties(target, props) {
function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {

@@ -85,80 +91,94 @@ var descriptor = props[i];

return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
};
}();
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
var get = function get(object, property, receiver) {
if (object === null) object = Function.prototype;
var desc = Object.getOwnPropertyDescriptor(object, property);
return self;
}
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
return get(parent, property, receiver);
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
} else if ("value" in desc) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
return _assertThisInitialized(self);
}
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
function _superPropBase(object, property) {
while (!Object.prototype.hasOwnProperty.call(object, property)) {
object = _getPrototypeOf(object);
if (object === null) break;
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
return object;
}
function _get(target, property, receiver) {
if (typeof Reflect !== "undefined" && Reflect.get) {
_get = Reflect.get;
} else {
_get = function _get(target, property, receiver) {
var base = _superPropBase(target, property);
if (!base) return;
var desc = Object.getOwnPropertyDescriptor(base, property);
if (desc.get) {
return desc.get.call(receiver);
}
return desc.value;
};
}
return _get(target, property, receiver || target);
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var slicedToArray = function () {
function sliceIterator(arr, i) {
function _iterableToArrayLimit(arr, i) {
var _arr = [];

@@ -180,3 +200,3 @@ var _n = true;

try {
if (!_n && _i["return"]) _i["return"]();
if (!_n && _i["return"] != null) _i["return"]();
} finally {

@@ -190,1307 +210,1388 @@ if (_d) throw _e;

return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
var Handle =
/**
* Creates a new Handle instance.
* @constructor
* @param {Array} position The x and y ratio position of the handle
* within the crop region. Accepts a value between 0 to 1 in the order
* of [X, Y].
* @param {Array} constraints Define the side of the crop region that
* is to be affected by this handle. Accepts a value of 0 or 1 in the
* order of [TOP, RIGHT, BOTTOM, LEFT].
* @param {String} cursor The CSS cursor of this handle.
* @param {Element} eventBus The element to dispatch events to.
*/
function Handle(position, constraints, cursor, eventBus) {
classCallCheck(this, Handle);
var self = this;
this.position = position;
this.constraints = constraints;
this.cursor = cursor;
this.eventBus = eventBus;
this.el = document.createElement('div');
this.el.className = 'croppr-handle';
this.el.style.cursor = cursor;
this.el.addEventListener('mousedown', onMouseDown);
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
detail: { handle: self }
}));
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
self.eventBus.dispatchEvent(new CustomEvent('handleend', {
detail: { handle: self }
}));
}
function onMouseMove(e) {
e.stopPropagation();
self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
}
};
var Box = function () {
var Handle =
/**
* Creates a new Box instance.
* Creates a new Handle instance.
* @constructor
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
* @param {Array} position The x and y ratio position of the handle
* within the crop region. Accepts a value between 0 to 1 in the order
* of [X, Y].
* @param {Array} constraints Define the side of the crop region that
* is to be affected by this handle. Accepts a value of 0 or 1 in the
* order of [TOP, RIGHT, BOTTOM, LEFT].
* @param {String} cursor The CSS cursor of this handle.
* @param {Element} eventBus The element to dispatch events to.
*/
function Box(x1, y1, x2, y2) {
classCallCheck(this, Box);
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}
/**
* Sets the new dimensions of the box.
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
*/
createClass(Box, [{
key: 'set',
value: function set$$1() {
var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
this.x1 = x1 == null ? this.x1 : x1;
this.y1 = y1 == null ? this.y1 : y1;
this.x2 = x2 == null ? this.x2 : x2;
this.y2 = y2 == null ? this.y2 : y2;
return this;
function Handle(position, constraints, cursor, eventBus) {
_classCallCheck(this, Handle);
var self = this;
this.position = position;
this.constraints = constraints;
this.cursor = cursor;
this.eventBus = eventBus;
this.el = document.createElement('div');
this.el.className = 'croppr-handle';
this.el.style.cursor = cursor;
this.el.addEventListener('mousedown', onMouseDown);
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
detail: {
handle: self
}
}));
}
/**
* Calculates the width of the box.
* @returns {Number}
*/
}, {
key: 'width',
value: function width() {
return Math.abs(this.x2 - this.x1);
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
self.eventBus.dispatchEvent(new CustomEvent('handleend', {
detail: {
handle: self
}
}));
}
/**
* Calculates the height of the box.
* @returns {Number}
*/
}, {
key: 'height',
value: function height() {
return Math.abs(this.y2 - this.y1);
function onMouseMove(e) {
e.stopPropagation();
self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
};
var Box =
function () {
/**
* Resizes the box to a new size.
* @param {Number} newWidth
* @param {Number} newHeight
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* Creates a new Box instance.
* @constructor
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
*/
}, {
key: 'resize',
value: function resize(newWidth, newHeight) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
var fromX = this.x1 + this.width() * origin[0];
var fromY = this.y1 + this.height() * origin[1];
this.x1 = fromX - newWidth * origin[0];
this.y1 = fromY - newHeight * origin[1];
this.x2 = this.x1 + newWidth;
this.y2 = this.y1 + newHeight;
return this;
function Box(x1, y1, x2, y2) {
_classCallCheck(this, Box);
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
}
/**
* Scale the box by a factor.
* @param {Number} factor
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* Sets the new dimensions of the box.
* @param {Number} x1
* @param {Number} y1
* @param {Number} x2
* @param {Number} y2
*/
}, {
key: 'scale',
value: function scale(factor) {
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var containerHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var newWidth = this.width() * factor;
var newHeight = this.height() * factor;
this.resize(newWidth, newHeight, origin);
return this;
}
}, {
key: 'move',
value: function move() {
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var width = this.width();
var height = this.height();
x = x === null ? this.x1 : x;
y = y === null ? this.y1 : y;
this.x1 = x;
this.y1 = y;
this.x2 = x + width;
this.y2 = y + height;
return this;
}
/**
* Get relative x and y coordinates of a given point within the box.
* @param {Array} point The x and y ratio position within the box.
* @returns {Array} The x and y coordinates [x, y].
*/
}, {
key: 'getRelativePoint',
value: function getRelativePoint() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
var x = this.width() * point[0];
var y = this.height() * point[1];
return [x, y];
}
/**
* Get absolute x and y coordinates of a given point within the box.
* @param {Array} point The x and y ratio position within the box.
* @returns {Array} The x and y coordinates [x, y].
*/
}, {
key: 'getAbsolutePoint',
value: function getAbsolutePoint() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
var x = this.x1 + this.width() * point[0];
var y = this.y1 + this.height() * point[1];
return [x, y];
}
}, {
key: 'getRatio',
value: function getRatio() {
var minRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var maxRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
if (minRatio === null) return null;
if (maxRatio === null) return minRatio;
var imageRatio = this.width() / this.height();
if (minRatio > maxRatio) {
var tempRatio = minRatio;
minRatio = maxRatio;
maxRatio = tempRatio;
_createClass(Box, [{
key: "set",
value: function set() {
var x1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var y1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var x2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var y2 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
this.x1 = x1 == null ? this.x1 : x1;
this.y1 = y1 == null ? this.y1 : y1;
this.x2 = x2 == null ? this.x2 : x2;
this.y2 = y2 == null ? this.y2 : y2;
return this;
}
if (imageRatio > maxRatio) return maxRatio;else if (imageRatio < minRatio) return minRatio;else return imageRatio;
}
/**
* Constrain the box to a fixed ratio.
* @param {Number} ratio
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* @param {String} [grow] The axis to grow to maintain the ratio.
* Defaults to 'height'.
*/
}, {
key: 'constrainToRatio',
value: function constrainToRatio() {
var ratio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height';
var maxRatio = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
if (ratio === null) {
return;
/**
* Calculates the width of the box.
* @returns {Number}
*/
}, {
key: "width",
value: function width() {
return Math.abs(this.x2 - this.x1);
}
var width = this.width();
var height = this.height();
if (maxRatio !== null) {
var minRatio = ratio;
if (minRatio > maxRatio) {
minRatio = maxRatio;
maxRatio = ratio;
}
var cropRatio = width / height;
if (cropRatio < minRatio || cropRatio > maxRatio) {
var constrainWidth = width;
var constrainHeight = height;
if (cropRatio > maxRatio) constrainHeight = width / maxRatio;else constrainWidth = height * minRatio;
this.resize(constrainWidth, constrainHeight, origin);
}
} else {
switch (grow) {
case 'height':
this.resize(width, width / ratio, origin);
break;
case 'width':
this.resize(height * ratio, height, origin);
break;
default:
this.resize(width, width / ratio, origin);
}
/**
* Calculates the height of the box.
* @returns {Number}
*/
}, {
key: "height",
value: function height() {
return Math.abs(this.y2 - this.y1);
}
return this;
}
/**
* Constrain the box within a boundary.
* @param {Number} boundaryWidth
* @param {Number} boundaryHeight
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
*/
}, {
key: 'constrainToBoundary',
value: function constrainToBoundary(boundaryWidth, boundaryHeight) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
var _getAbsolutePoint = this.getAbsolutePoint(origin),
_getAbsolutePoint2 = slicedToArray(_getAbsolutePoint, 2),
originX = _getAbsolutePoint2[0],
originY = _getAbsolutePoint2[1];
var maxIfLeft = originX;
var maxIfTop = originY;
var maxIfRight = boundaryWidth - originX;
var maxIfBottom = boundaryHeight - originY;
var directionX = -2 * origin[0] + 1;
var directionY = -2 * origin[1] + 1;
var maxWidth = null,
maxHeight = null;
switch (directionX) {
case -1:
maxWidth = maxIfLeft;break;
case 0:
maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;break;
case +1:
maxWidth = maxIfRight;break;
/**
* Resizes the box to a new size.
* @param {Number} newWidth
* @param {Number} newHeight
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
*/
}, {
key: "resize",
value: function resize(newWidth, newHeight) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
var fromX = this.x1 + this.width() * origin[0];
var fromY = this.y1 + this.height() * origin[1];
this.x1 = fromX - newWidth * origin[0];
this.y1 = fromY - newHeight * origin[1];
this.x2 = this.x1 + newWidth;
this.y2 = this.y1 + newHeight;
return this;
}
switch (directionY) {
case -1:
maxHeight = maxIfTop;break;
case 0:
maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;break;
case +1:
maxHeight = maxIfBottom;break;
}
if (this.width() > maxWidth) {
var factor = maxWidth / this.width();
this.scale(factor, origin);
}
if (this.height() > maxHeight) {
var _factor = maxHeight / this.height();
this.scale(_factor, origin);
}
return this;
}
/**
* Constrain the box to a maximum/minimum size.
* @param {Number} [maxWidth]
* @param {Number} [maxHeight]
* @param {Number} [minWidth]
* @param {Number} [minHeight]
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* @param {Number} [ratio] Ratio to maintain.
*/
}, {
key: 'constrainToSize',
value: function constrainToSize() {
var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0];
var minRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
var maxRatio = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
var ratio = this.getRatio(minRatio, maxRatio);
if (maxWidth && this.width() > maxWidth) {
var newWidth = maxWidth,
newHeight = ratio === null ? this.height() : maxWidth / ratio;
/**
* Scale the box by a factor.
* @param {Number} factor
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
*/
}, {
key: "scale",
value: function scale(factor) {
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
var newWidth = this.width() * factor;
var newHeight = this.height() * factor;
this.resize(newWidth, newHeight, origin);
return this;
}
if (maxHeight && this.height() > maxHeight) {
var _newWidth = ratio === null ? this.width() : maxHeight * ratio,
_newHeight = maxHeight;
this.resize(_newWidth, _newHeight, origin);
}, {
key: "move",
value: function move() {
var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var width = this.width();
var height = this.height();
x = x === null ? this.x1 : x;
y = y === null ? this.y1 : y;
this.x1 = x;
this.y1 = y;
this.x2 = x + width;
this.y2 = y + height;
return this;
}
if (minWidth && this.width() < minWidth) {
var _newWidth2 = minWidth,
_newHeight2 = ratio === null ? this.height() : minWidth / ratio;
this.resize(_newWidth2, _newHeight2, origin);
/**
* Get relative x and y coordinates of a given point within the box.
* @param {Array} point The x and y ratio position within the box.
* @returns {Array} The x and y coordinates [x, y].
*/
}, {
key: "getRelativePoint",
value: function getRelativePoint() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
var x = this.width() * point[0];
var y = this.height() * point[1];
return [x, y];
}
if (minHeight && this.height() < minHeight) {
var _newWidth3 = ratio === null ? this.width() : minHeight * ratio,
_newHeight3 = minHeight;
this.resize(_newWidth3, _newHeight3, origin);
/**
* Get absolute x and y coordinates of a given point within the box.
* @param {Array} point The x and y ratio position within the box.
* @returns {Array} The x and y coordinates [x, y].
*/
}, {
key: "getAbsolutePoint",
value: function getAbsolutePoint() {
var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [0, 0];
var x = this.x1 + this.width() * point[0];
var y = this.y1 + this.height() * point[1];
return [x, y];
}
return this;
}
}]);
return Box;
}();
/**
* Binds an element's touch events to be simulated as mouse events.
* @param {Element} element
*/
function enableTouch(element) {
element.addEventListener('touchstart', simulateMouseEvent);
element.addEventListener('touchend', simulateMouseEvent);
element.addEventListener('touchmove', simulateMouseEvent);
}
/**
* Translates a touch event to a mouse event.
* @param {Event} e
*/
function simulateMouseEvent(e) {
e.preventDefault();
var touch = e.changedTouches[0];
var eventMap = {
'touchstart': 'mousedown',
'touchmove': 'mousemove',
'touchend': 'mouseup'
};
touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], {
bubbles: true,
cancelable: true,
view: window,
clientX: touch.clientX,
clientY: touch.clientY,
screenX: touch.screenX,
screenY: touch.screenY
}));
}
/**
* Define a list of handles to create.
*
* @property {Array} position - The x and y ratio position of the handle within
* the crop region. Accepts a value between 0 to 1 in the order of [X, Y].
* @property {Array} constraints - Define the side of the crop region that is to
* be affected by this handle. Accepts a value of 0 or 1 in the order of
* [TOP, RIGHT, BOTTOM, LEFT].
* @property {String} cursor - The CSS cursor of this handle.
*/
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' }];
var CropprCore = function () {
function CropprCore(element, options) {
var _this = this;
var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
classCallCheck(this, CropprCore);
if (options.preview) options.preview = this.getElement(options.preview);
this.options = CropprCore.parseOptions(options || {});
element = this.getElement(element);
if (!element.getAttribute('src')) {
throw 'Image src not provided.';
}
this._initialized = false;
this._restore = {
parent: element.parentNode,
element: element
};
if (this.options.preview) {
this._restore.preview = this.options.preview;
this._restore.parentPreview = this.options.preview.parentNode;
}
if (!deferred) {
if (element.width === 0 || element.height === 0) {
element.onload = function () {
_this.initialize(element);
};
} else {
this.initialize(element);
}, {
key: "getRatio",
value: function getRatio() {
var minRatio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var maxRatio = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
if (minRatio === null) return null;
if (maxRatio === null) return minRatio;
var imageRatio = this.width() / this.height();
if (minRatio > maxRatio) {
var tempRatio = minRatio;
minRatio = maxRatio;
maxRatio = tempRatio;
}
if (imageRatio > maxRatio) return maxRatio;else if (imageRatio < minRatio) return minRatio;else return imageRatio;
}
}
}
createClass(CropprCore, [{
key: 'initialize',
value: function initialize(element) {
var _this2 = this;
this.createDOM(element);
this.getSourceSize();
this.options.convertToPixels(this.imageEl, this.sourceSize);
this.attachHandlerEvents();
this.attachRegionEvents();
this.attachOverlayEvents();
this.initializeBox();
this.redraw();
this._initialized = true;
if (this.options.onInitialize !== null) {
this.options.onInitialize(this);
}
this.resizePreview();
this.cropperEl.onwheel = function (event) {
event.preventDefault();
var deltaY = event.deltaY;
var maxDelta = 0.05;
var coeff = deltaY > 0 ? 1 : -1;
deltaY = Math.abs(deltaY) / 100;
deltaY = deltaY > maxDelta ? maxDelta : deltaY;
deltaY = 1 + coeff * deltaY;
_this2.scaleBy(deltaY);
};
if (this.options.responsive) {
var onResize = void 0;
var resizeFunc = function resizeFunc() {
var newOptions = _this2.options;
var cropData = _this2.responsiveData;
var controlKeys = ["x", "y", "width", "height"];
for (var i = 0; i < controlKeys.length; i++) {
cropData[controlKeys[i]] *= 100;
cropData[controlKeys[i]] = cropData[controlKeys[i]] > 100 ? 100 : cropData[controlKeys[i]] < 0 ? 0 : cropData[controlKeys[i]];
/**
* Constrain the box to a fixed ratio.
* @param {Number} ratio
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* @param {String} [grow] The axis to grow to maintain the ratio.
* Defaults to 'height'.
*/
}, {
key: "constrainToRatio",
value: function constrainToRatio() {
var ratio = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [0, 0];
var grow = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'height';
var maxRatio = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
if (ratio === null) {
return;
}
var width = this.width();
var height = this.height();
if (maxRatio !== null) {
var minRatio = ratio;
if (minRatio > maxRatio) {
minRatio = maxRatio;
maxRatio = ratio;
}
newOptions.startPosition = [cropData.x, cropData.y, "%"];
newOptions.startSize = [cropData.width, cropData.height, "%"];
newOptions = CropprCore.parseOptions(newOptions);
newOptions.convertToPixels(_this2.imageEl, _this2.sourceSize);
_this2.initializeBox(newOptions);
_this2.redraw();
};
window.onresize = function () {
clearTimeout(onResize);
onResize = setTimeout(function () {
resizeFunc();
}, 100);
};
}
}
}, {
key: 'getElement',
value: function getElement(element, type) {
if (element) {
if (!element.nodeName) {
element = document.querySelector(element);
if (element == null) {
throw 'Unable to find element.';
var cropRatio = width / height;
if (cropRatio < minRatio || cropRatio > maxRatio) {
var constrainWidth = width;
var constrainHeight = height;
if (cropRatio > maxRatio) constrainHeight = width / maxRatio;else constrainWidth = height * minRatio;
this.resize(constrainWidth, constrainHeight, origin);
}
} else {
switch (grow) {
case 'height':
this.resize(width, width / ratio, origin);
break;
case 'width':
this.resize(height * ratio, height, origin);
break;
default:
this.resize(width, width / ratio, origin);
}
}
return this;
}
return element;
}
}, {
key: 'createDOM',
value: function createDOM(targetEl) {
this.containerEl = document.createElement('div');
this.containerEl.className = 'croppr-container';
this.eventBus = this.containerEl;
enableTouch(this.containerEl);
this.cropperEl = document.createElement('div');
this.cropperEl.className = 'croppr';
this.imageEl = document.createElement('img');
this.imageEl.setAttribute('src', targetEl.getAttribute('src'));
this.imageEl.setAttribute('alt', targetEl.getAttribute('alt'));
this.imageEl.className = 'croppr-image';
this.imageClippedEl = this.imageEl.cloneNode();
this.imageClippedEl.className = 'croppr-imageClipped';
this.regionEl = document.createElement('div');
this.regionEl.className = 'croppr-region';
this.overlayEl = document.createElement('div');
this.overlayEl.className = 'croppr-overlay';
var handleContainerEl = document.createElement('div');
handleContainerEl.className = 'croppr-handleContainer';
this.handles = [];
for (var i = 0; i < HANDLES.length; i++) {
var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus);
this.handles.push(handle);
handleContainerEl.appendChild(handle.el);
/**
* Constrain the box within a boundary.
* @param {Number} boundaryWidth
* @param {Number} boundaryHeight
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
*/
}, {
key: "constrainToBoundary",
value: function constrainToBoundary(boundaryWidth, boundaryHeight) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0];
var _this$getAbsolutePoin = this.getAbsolutePoint(origin),
_this$getAbsolutePoin2 = _slicedToArray(_this$getAbsolutePoin, 2),
originX = _this$getAbsolutePoin2[0],
originY = _this$getAbsolutePoin2[1];
var maxIfLeft = originX;
var maxIfTop = originY;
var maxIfRight = boundaryWidth - originX;
var maxIfBottom = boundaryHeight - originY;
var directionX = -2 * origin[0] + 1;
var directionY = -2 * origin[1] + 1;
var maxWidth = null,
maxHeight = null;
switch (directionX) {
case -1:
maxWidth = maxIfLeft;
break;
case 0:
maxWidth = Math.min(maxIfLeft, maxIfRight) * 2;
break;
case +1:
maxWidth = maxIfRight;
break;
}
switch (directionY) {
case -1:
maxHeight = maxIfTop;
break;
case 0:
maxHeight = Math.min(maxIfTop, maxIfBottom) * 2;
break;
case +1:
maxHeight = maxIfBottom;
break;
}
if (this.width() > maxWidth) {
var factor = maxWidth / this.width();
this.scale(factor, origin);
}
if (this.height() > maxHeight) {
var _factor = maxHeight / this.height();
this.scale(_factor, origin);
}
return this;
}
this.cropperEl.appendChild(this.imageEl);
this.cropperEl.appendChild(this.imageClippedEl);
this.cropperEl.appendChild(this.regionEl);
this.cropperEl.appendChild(this.overlayEl);
this.cropperEl.appendChild(handleContainerEl);
this.containerEl.appendChild(this.cropperEl);
targetEl.parentElement.replaceChild(this.containerEl, targetEl);
this.setLivePreview();
}
}, {
key: 'setLivePreview',
value: function setLivePreview() {
if (this.options.preview) {
this.preview = {};
this.preview.parent = this.options.preview;
this.preview.parent.style.position = "relative";
var new_container = document.createElement("div");
this.preview.container = this.preview.parent.appendChild(new_container);
this.preview.container.style.overflow = "hidden";
this.preview.container.style.position = "absolute";
this.preview.container.style.top = "50%";
this.preview.container.style.left = "50%";
this.preview.container.style.transform = "translate(-50%, -50%)";
}
}
}, {
key: 'resizePreview',
value: function resizePreview() {
var cropData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (cropData === null) cropData = this.getValue("ratio");
if (this.preview && cropData.width && cropData.height) {
var targetWidth = this.preview.parent.offsetWidth;
var targetHeight = this.preview.parent.offsetHeight;
var targetRatio = targetWidth / targetHeight;
var cropWidth = this.sourceSize.width * cropData.width;
var cropHeight = this.sourceSize.height * cropData.height;
var cropRatio = cropWidth / cropHeight;
var containerWidth = targetWidth;
var containerHeight = targetHeight;
if (targetRatio > cropRatio) {
containerWidth = containerHeight * cropRatio;
} else {
containerHeight = containerWidth / cropRatio;
/**
* Constrain the box to a maximum/minimum size.
* @param {Number} [maxWidth]
* @param {Number} [maxHeight]
* @param {Number} [minWidth]
* @param {Number} [minHeight]
* @param {Array} [origin] The origin point to resize from.
* Defaults to [0, 0] (top left).
* @param {Number} [ratio] Ratio to maintain.
*/
}, {
key: "constrainToSize",
value: function constrainToSize() {
var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var maxHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var minHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
var origin = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [0, 0];
var minRatio = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
var maxRatio = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
var ratio = this.getRatio(minRatio, maxRatio);
if (maxWidth && this.width() > maxWidth) {
var newWidth = maxWidth,
newHeight = ratio === null ? this.height() : maxWidth / ratio;
this.resize(newWidth, newHeight, origin);
}
this.preview.container.style.width = containerWidth + "px";
this.preview.container.style.height = containerHeight + "px";
var resizeWidth = this.sourceSize.width * containerWidth / cropWidth;
var resizeHeight = this.sourceSize.height * containerHeight / cropHeight;
var deltaX = -cropData.x * resizeWidth;
var deltaY = -cropData.y * resizeHeight;
this.preview.image.style.width = resizeWidth + "px";
this.preview.image.style.height = resizeHeight + "px";
this.preview.image.style.left = deltaX + "px";
this.preview.image.style.top = deltaY + "px";
if (maxHeight && this.height() > maxHeight) {
var _newWidth = ratio === null ? this.width() : maxHeight * ratio,
_newHeight = maxHeight;
this.resize(_newWidth, _newHeight, origin);
}
if (minWidth && this.width() < minWidth) {
var _newWidth2 = minWidth,
_newHeight2 = ratio === null ? this.height() : minWidth / ratio;
this.resize(_newWidth2, _newHeight2, origin);
}
if (minHeight && this.height() < minHeight) {
var _newWidth3 = ratio === null ? this.width() : minHeight * ratio,
_newHeight3 = minHeight;
this.resize(_newWidth3, _newHeight3, origin);
}
return this;
}
}
}]);
return Box;
}();
/**
* Binds an element's touch events to be simulated as mouse events.
* @param {Element} element
*/
function enableTouch(element) {
element.addEventListener('touchstart', simulateMouseEvent);
element.addEventListener('touchend', simulateMouseEvent);
element.addEventListener('touchmove', simulateMouseEvent);
}
/**
* Translates a touch event to a mouse event.
* @param {Event} e
*/
function simulateMouseEvent(e) {
e.preventDefault();
var touch = e.changedTouches[0];
var eventMap = {
'touchstart': 'mousedown',
'touchmove': 'mousemove',
'touchend': 'mouseup'
};
touch.target.dispatchEvent(new MouseEvent(eventMap[e.type], {
bubbles: true,
cancelable: true,
view: window,
clientX: touch.clientX,
clientY: touch.clientY,
screenX: touch.screenX,
screenY: touch.screenY
}));
}
/**
* Define a list of handles to create.
*
* @property {Array} position - The x and y ratio position of the handle within
* the crop region. Accepts a value between 0 to 1 in the order of [X, Y].
* @property {Array} constraints - Define the side of the crop region that is to
* be affected by this handle. Accepts a value of 0 or 1 in the order of
* [TOP, RIGHT, BOTTOM, LEFT].
* @property {String} cursor - The CSS cursor of this handle.
*/
var HANDLES = [{
position: [0.0, 0.0],
constraints: [1, 0, 0, 1],
cursor: 'nw-resize'
}, {
key: 'strictlyConstrain',
value: function strictlyConstrain() {
var _this3 = this;
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var origins = void 0;
if (origin === null) {
origins = [[0, 0], [1, 1]];
origin = [.5, .5];
} else {
origins = [origin];
}
if (opts === null) opts = this.options;
var _imageEl$getBoundingC = this.imageEl.getBoundingClientRect(),
parentWidth = _imageEl$getBoundingC.width,
parentHeight = _imageEl$getBoundingC.height;
this.box.constrainToRatio(opts.aspectRatio, origin, "height", opts.maxAspectRatio);
this.box.constrainToSize(opts.maxSize.width, opts.maxSize.height, opts.minSize.width, opts.minSize.height, origin, opts.aspectRatio, opts.maxAspectRatio);
origins.map(function (newOrigin) {
_this3.box.constrainToBoundary(parentWidth, parentHeight, newOrigin);
});
}
/**
* Changes the image src.
* @param {String} src
*/
position: [0.5, 0.0],
constraints: [1, 0, 0, 0],
cursor: 'n-resize'
}, {
key: 'setImage',
value: function setImage(src) {
var _this4 = this;
this.imageEl.onload = function () {
_this4.getSourceSize();
_this4.options.convertToPixels(_this4.imageEl, _this4.sourceSize);
_this4.initializeBox();
_this4.redraw();
};
this.imageEl.src = src;
this.imageClippedEl.src = src;
return this;
}
position: [1.0, 0.0],
constraints: [1, 1, 0, 0],
cursor: 'ne-resize'
}, {
key: 'destroy',
value: function destroy() {
this._restore.parent.replaceChild(this._restore.element, this.containerEl);
if (this.options.preview) {
this.preview.image.parentNode.removeChild(this.preview.image);
this.preview.container.parentNode.removeChild(this.preview.container);
}
}
/**
* Create a new box region with a set of options.
* @param {Object} opts The options.
* @returns {Box}
*/
position: [1.0, 0.5],
constraints: [0, 1, 0, 0],
cursor: 'e-resize'
}, {
key: 'initializeBox',
value: function initializeBox() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (opts === null) opts = this.options;
var boxWidth = opts.startSize.width;
var boxHeight = opts.startSize.height;
if (opts.minSize) {
if (boxWidth < opts.minSize.width) boxWidth = opts.minSize.width;else if (boxWidth < opts.maxSize.width) boxWidth = opts.maxSize.width;
}
if (opts.maxSize) {
if (boxHeight < opts.minSize.height) boxHeight = opts.minSize.height;else if (boxHeight < opts.maxSize.height) boxHeight = opts.maxSize.height;
}
var box = new Box(0, 0, boxWidth, boxHeight);
var x = 0;
var y = 0;
if (opts.startPosition === null) {
var _imageEl$getBoundingC2 = this.imageEl.getBoundingClientRect(),
parentWidth = _imageEl$getBoundingC2.width,
parentHeight = _imageEl$getBoundingC2.height;
x = parentWidth / 2 - boxWidth / 2;
y = parentHeight / 2 - boxHeight / 2;
} else {
x = opts.startPosition.x;
y = opts.startPosition.y;
}
box.move(x, y);
if (this.preview) {
if (this.preview.image) {
this.preview.image.parentNode.removeChild(this.preview.image);
this.preview.image = null;
}
var new_img = document.createElement("img");
new_img.src = this.imageEl.src;
this.preview.image = this.preview.container.appendChild(new_img);
this.preview.image.style.position = "relative";
}
this.box = box;
this.strictlyConstrain(opts);
return box;
}
position: [1.0, 1.0],
constraints: [0, 1, 1, 0],
cursor: 'se-resize'
}, {
key: 'getSourceSize',
value: function getSourceSize() {
this.sourceSize = {};
this.sourceSize.width = this.imageEl.naturalWidth;
this.sourceSize.height = this.imageEl.naturalHeight;
return this.sourceSize;
}
position: [0.5, 1.0],
constraints: [0, 0, 1, 0],
cursor: 's-resize'
}, {
key: 'convertRealDataToPixel',
value: function convertRealDataToPixel(data) {
var _imageEl$getBoundingC3 = this.imageEl.getBoundingClientRect(),
width = _imageEl$getBoundingC3.width,
height = _imageEl$getBoundingC3.height;
var factorX = this.sourceSize.width / width;
var factorY = this.sourceSize.height / height;
if (data.width) {
data.width /= factorX;
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'
}];
var CropprCore =
function () {
function CropprCore(element, options) {
var _this = this;
var deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
_classCallCheck(this, CropprCore);
if (options.preview) options.preview = this.getElement(options.preview);
this.options = CropprCore.parseOptions(options || {});
element = this.getElement(element);
if (!element.getAttribute('src')) {
throw 'Image src not provided.';
}
if (data.x) {
data.x /= factorX;
this._initialized = false;
this._restore = {
parent: element.parentNode,
element: element
};
if (this.options.preview) {
this._restore.preview = this.options.preview;
this._restore.parentPreview = this.options.preview.parentNode;
}
if (data.height) {
data.height /= factorY;
if (!deferred) {
if (element.width === 0 || element.height === 0) {
element.onload = function () {
_this.initialize(element);
};
} else {
this.initialize(element);
}
}
if (data.y) {
data.y /= factorY;
}
return data;
}
}, {
key: 'redraw',
value: function redraw() {
var _this5 = this;
this.resizePreview();
var width = Math.round(this.box.width()),
height = Math.round(this.box.height()),
x1 = Math.round(this.box.x1),
y1 = Math.round(this.box.y1),
x2 = Math.round(this.box.x2),
y2 = Math.round(this.box.y2);
window.requestAnimationFrame(function () {
_this5.regionEl.style.transform = 'translate(' + x1 + 'px, ' + y1 + 'px)';
_this5.regionEl.style.width = width + 'px';
_this5.regionEl.style.height = height + 'px';
_this5.imageClippedEl.style.clip = 'rect(' + y1 + 'px, ' + x2 + 'px, ' + y2 + 'px, ' + x1 + 'px)';
var center = _this5.box.getAbsolutePoint([.5, .5]);
var _imageEl$getBoundingC4 = _this5.imageEl.getBoundingClientRect(),
parentWidth = _imageEl$getBoundingC4.width,
parentHeight = _imageEl$getBoundingC4.height;
var xSign = center[0] - parentWidth / 2 >> 31;
var ySign = center[1] - parentHeight / 2 >> 31;
var quadrant = (xSign ^ ySign) + ySign + ySign + 4;
var foregroundHandleIndex = -2 * quadrant + 8;
for (var i = 0; i < _this5.handles.length; i++) {
var handle = _this5.handles[i];
var handleWidth = handle.el.offsetWidth;
var handleHeight = handle.el.offsetHeight;
var left = x1 + width * handle.position[0] - handleWidth / 2;
var top = y1 + height * handle.position[1] - handleHeight / 2;
handle.el.style.transform = 'translate(' + Math.round(left) + 'px, ' + Math.round(top) + 'px)';
handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4;
_createClass(CropprCore, [{
key: "initialize",
value: function initialize(element) {
var _this2 = this;
this.createDOM(element);
this.getSourceSize();
this.options.convertToPixels(this.imageEl, this.sourceSize);
this.attachHandlerEvents();
this.attachRegionEvents();
this.attachOverlayEvents();
this.initializeBox();
this.redraw();
this._initialized = true;
if (this.options.onInitialize !== null) {
this.options.onInitialize(this);
}
});
}
}, {
key: 'attachHandlerEvents',
value: function attachHandlerEvents() {
var eventBus = this.eventBus;
eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this));
eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this));
eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this));
}
}, {
key: 'attachRegionEvents',
value: function attachRegionEvents() {
var eventBus = this.eventBus;
var self = this;
this.regionEl.addEventListener('mousedown', onMouseDown);
eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this));
eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this));
eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this));
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
eventBus.dispatchEvent(new CustomEvent('regionstart', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
this.resizePreview();
this.cropperEl.onwheel = function (event) {
event.preventDefault();
var deltaY = event.deltaY;
var maxDelta = 0.05;
var coeff = deltaY > 0 ? 1 : -1;
deltaY = Math.abs(deltaY) / 100;
deltaY = deltaY > maxDelta ? maxDelta : deltaY;
deltaY = 1 + coeff * deltaY;
_this2.scaleBy(deltaY);
};
if (this.options.responsive) {
var onResize;
var resizeFunc = function resizeFunc() {
var newOptions = _this2.options;
var cropData = _this2.responsiveData;
var controlKeys = ["x", "y", "width", "height"];
for (var i = 0; i < controlKeys.length; i++) {
cropData[controlKeys[i]] *= 100;
cropData[controlKeys[i]] = cropData[controlKeys[i]] > 100 ? 100 : cropData[controlKeys[i]] < 0 ? 0 : cropData[controlKeys[i]];
}
newOptions.startPosition = [cropData.x, cropData.y, "%"];
newOptions.startSize = [cropData.width, cropData.height, "%"];
newOptions = CropprCore.parseOptions(newOptions);
newOptions.convertToPixels(_this2.imageEl, _this2.sourceSize);
_this2.initializeBox(newOptions);
_this2.redraw();
};
window.onresize = function () {
clearTimeout(onResize);
onResize = setTimeout(function () {
resizeFunc();
}, 100);
};
}
}
function onMouseMove(e) {
e.stopPropagation();
eventBus.dispatchEvent(new CustomEvent('regionmove', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
}, {
key: "getElement",
value: function getElement(element, type) {
if (element) {
if (!element.nodeName) {
element = document.querySelector(element);
if (element == null) {
throw 'Unable to find element.';
}
}
}
return element;
}
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
eventBus.dispatchEvent(new CustomEvent('regionend', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
}, {
key: "createDOM",
value: function createDOM(targetEl) {
this.containerEl = document.createElement('div');
this.containerEl.className = 'croppr-container';
this.eventBus = this.containerEl;
enableTouch(this.containerEl);
this.cropperEl = document.createElement('div');
this.cropperEl.className = 'croppr';
this.imageEl = document.createElement('img');
this.imageEl.setAttribute('src', targetEl.getAttribute('src'));
this.imageEl.setAttribute('alt', targetEl.getAttribute('alt'));
this.imageEl.className = 'croppr-image';
this.imageClippedEl = this.imageEl.cloneNode();
this.imageClippedEl.className = 'croppr-imageClipped';
this.regionEl = document.createElement('div');
this.regionEl.className = 'croppr-region';
this.overlayEl = document.createElement('div');
this.overlayEl.className = 'croppr-overlay';
var handleContainerEl = document.createElement('div');
handleContainerEl.className = 'croppr-handleContainer';
this.handles = [];
for (var i = 0; i < HANDLES.length; i++) {
var handle = new Handle(HANDLES[i].position, HANDLES[i].constraints, HANDLES[i].cursor, this.eventBus);
this.handles.push(handle);
handleContainerEl.appendChild(handle.el);
}
this.cropperEl.appendChild(this.imageEl);
this.cropperEl.appendChild(this.imageClippedEl);
this.cropperEl.appendChild(this.regionEl);
this.cropperEl.appendChild(this.overlayEl);
this.cropperEl.appendChild(handleContainerEl);
this.containerEl.appendChild(this.cropperEl);
targetEl.parentElement.replaceChild(this.containerEl, targetEl);
this.setLivePreview();
}
}
}, {
key: 'attachOverlayEvents',
value: function attachOverlayEvents() {
var SOUTHEAST_HANDLE_IDX = 4;
var self = this;
var tmpBox = null;
this.overlayEl.addEventListener('mousedown', onMouseDown);
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
var container = self.cropperEl.getBoundingClientRect();
var mouseX = e.clientX - container.left;
var mouseY = e.clientY - container.top;
tmpBox = self.box;
self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1);
self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
detail: { handle: self.handles[SOUTHEAST_HANDLE_IDX] }
}));
}, {
key: "setLivePreview",
value: function setLivePreview() {
if (this.options.preview) {
this.preview = {};
this.preview.parent = this.options.preview;
this.preview.parent.style.position = "relative";
var new_container = document.createElement("div");
this.preview.container = this.preview.parent.appendChild(new_container);
this.preview.container.style.overflow = "hidden";
this.preview.container.style.position = "absolute";
this.preview.container.style.top = "50%";
this.preview.container.style.left = "50%";
this.preview.container.style.transform = "translate(-50%, -50%)";
}
}
function onMouseMove(e) {
e.stopPropagation();
self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
}, {
key: "resizePreview",
value: function resizePreview() {
var cropData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (cropData === null) cropData = this.getValue("ratio");
if (this.preview && cropData.width && cropData.height) {
var targetWidth = this.preview.parent.offsetWidth;
var targetHeight = this.preview.parent.offsetHeight;
var targetRatio = targetWidth / targetHeight;
var cropWidth = this.sourceSize.width * cropData.width;
var cropHeight = this.sourceSize.height * cropData.height;
var cropRatio = cropWidth / cropHeight;
var containerWidth = targetWidth;
var containerHeight = targetHeight;
if (targetRatio > cropRatio) {
containerWidth = containerHeight * cropRatio;
} else {
containerHeight = containerWidth / cropRatio;
}
this.preview.container.style.width = containerWidth + "px";
this.preview.container.style.height = containerHeight + "px";
var resizeWidth = this.sourceSize.width * containerWidth / cropWidth;
var resizeHeight = this.sourceSize.height * containerHeight / cropHeight;
var deltaX = -cropData.x * resizeWidth;
var deltaY = -cropData.y * resizeHeight;
this.preview.image.style.width = resizeWidth + "px";
this.preview.image.style.height = resizeHeight + "px";
this.preview.image.style.left = deltaX + "px";
this.preview.image.style.top = deltaY + "px";
}
}
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
if (self.box.width() === 1 && self.box.height() === 1) {
self.box = tmpBox;
return;
}, {
key: "strictlyConstrain",
value: function strictlyConstrain() {
var _this3 = this;
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var origins;
if (origin === null) {
origins = [[0, 0], [1, 1]];
origin = [.5, .5];
} else {
origins = [origin];
}
self.eventBus.dispatchEvent(new CustomEvent('handleend', {
detail: { mouseX: e.clientX, mouseY: e.clientY }
}));
if (opts === null) opts = this.options;
var _this$imageEl$getBoun = this.imageEl.getBoundingClientRect(),
parentWidth = _this$imageEl$getBoun.width,
parentHeight = _this$imageEl$getBoun.height;
this.box.constrainToRatio(opts.aspectRatio, origin, "height", opts.maxAspectRatio);
this.box.constrainToSize(opts.maxSize.width, opts.maxSize.height, opts.minSize.width, opts.minSize.height, origin, opts.aspectRatio, opts.maxAspectRatio);
origins.map(function (newOrigin) {
_this3.box.constrainToBoundary(parentWidth, parentHeight, newOrigin);
});
}
}
}, {
key: 'onHandleMoveStart',
value: function onHandleMoveStart(e) {
var handle = e.detail.handle;
var originPoint = [1 - handle.position[0], 1 - handle.position[1]];
var _box$getAbsolutePoint = this.box.getAbsolutePoint(originPoint),
_box$getAbsolutePoint2 = slicedToArray(_box$getAbsolutePoint, 2),
originX = _box$getAbsolutePoint2[0],
originY = _box$getAbsolutePoint2[1];
this.activeHandle = { handle: handle, originPoint: originPoint, originX: originX, originY: originY
};if (this.options.onCropStart !== null) {
this.options.onCropStart(this.getValue());
/**
* Changes the image src.
* @param {String} src
*/
}, {
key: "setImage",
value: function setImage(src) {
var _this4 = this;
this.imageEl.onload = function () {
_this4.getSourceSize();
_this4.options.convertToPixels(_this4.imageEl, _this4.sourceSize);
_this4.initializeBox();
_this4.redraw();
};
this.imageEl.src = src;
this.imageClippedEl.src = src;
return this;
}
}
}, {
key: 'onHandleMoveMoving',
value: function onHandleMoveMoving(e) {
var _e$detail = e.detail,
mouseX = _e$detail.mouseX,
mouseY = _e$detail.mouseY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > container.width) {
mouseX = container.width;
}, {
key: "destroy",
value: function destroy() {
this._restore.parent.replaceChild(this._restore.element, this.containerEl);
if (this.options.preview) {
this.preview.image.parentNode.removeChild(this.preview.image);
this.preview.container.parentNode.removeChild(this.preview.container);
}
}
if (mouseY < 0) {
mouseY = 0;
} else if (mouseY > container.height) {
mouseY = container.height;
/**
* Create a new box region with a set of options.
* @param {Object} opts The options.
* @returns {Box}
*/
}, {
key: "initializeBox",
value: function initializeBox() {
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (opts === null) opts = this.options;
var boxWidth = opts.startSize.width;
var boxHeight = opts.startSize.height;
if (opts.minSize) {
if (boxWidth < opts.minSize.width) boxWidth = opts.minSize.width;else if (boxWidth < opts.maxSize.width) boxWidth = opts.maxSize.width;
}
if (opts.maxSize) {
if (boxHeight < opts.minSize.height) boxHeight = opts.minSize.height;else if (boxHeight < opts.maxSize.height) boxHeight = opts.maxSize.height;
}
var box = new Box(0, 0, boxWidth, boxHeight);
var x = 0;
var y = 0;
if (opts.startPosition === null) {
var _this$imageEl$getBoun2 = this.imageEl.getBoundingClientRect(),
parentWidth = _this$imageEl$getBoun2.width,
parentHeight = _this$imageEl$getBoun2.height;
x = parentWidth / 2 - boxWidth / 2;
y = parentHeight / 2 - boxHeight / 2;
} else {
x = opts.startPosition.x;
y = opts.startPosition.y;
}
box.move(x, y);
if (this.preview) {
if (this.preview.image) {
this.preview.image.parentNode.removeChild(this.preview.image);
this.preview.image = null;
}
var new_img = document.createElement("img");
new_img.src = this.imageEl.src;
this.preview.image = this.preview.container.appendChild(new_img);
this.preview.image.style.position = "relative";
}
this.box = box;
this.strictlyConstrain(opts);
return box;
}
var origin = this.activeHandle.originPoint.slice();
var originX = this.activeHandle.originX;
var originY = this.activeHandle.originY;
var handle = this.activeHandle.handle;
var TOP_MOVABLE = handle.constraints[0] === 1;
var RIGHT_MOVABLE = handle.constraints[1] === 1;
var BOTTOM_MOVABLE = handle.constraints[2] === 1;
var LEFT_MOVABLE = handle.constraints[3] === 1;
var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE);
var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1;
var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2;
var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1;
var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2;
x1 = LEFT_MOVABLE ? mouseX : x1;
x2 = RIGHT_MOVABLE ? mouseX : x2;
y1 = TOP_MOVABLE ? mouseY : y1;
y2 = BOTTOM_MOVABLE ? mouseY : y2;
var isFlippedX = false,
isFlippedY = false;
if (LEFT_MOVABLE || RIGHT_MOVABLE) {
isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX;
}, {
key: "getSourceSize",
value: function getSourceSize() {
this.sourceSize = {};
this.sourceSize.width = this.imageEl.naturalWidth;
this.sourceSize.height = this.imageEl.naturalHeight;
return this.sourceSize;
}
if (TOP_MOVABLE || BOTTOM_MOVABLE) {
isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY;
}, {
key: "convertRealDataToPixel",
value: function convertRealDataToPixel(data) {
var _this$imageEl$getBoun3 = this.imageEl.getBoundingClientRect(),
width = _this$imageEl$getBoun3.width,
height = _this$imageEl$getBoun3.height;
var factorX = this.sourceSize.width / width;
var factorY = this.sourceSize.height / height;
if (data.width) {
data.width /= factorX;
}
if (data.x) {
data.x /= factorX;
}
if (data.height) {
data.height /= factorY;
}
if (data.y) {
data.y /= factorY;
}
return data;
}
if (isFlippedX) {
var tmp = x1;x1 = x2;x2 = tmp;
origin[0] = 1 - origin[0];
}, {
key: "redraw",
value: function redraw() {
var _this5 = this;
this.resizePreview();
var width = Math.round(this.box.width()),
height = Math.round(this.box.height()),
x1 = Math.round(this.box.x1),
y1 = Math.round(this.box.y1),
x2 = Math.round(this.box.x2),
y2 = Math.round(this.box.y2);
window.requestAnimationFrame(function () {
_this5.regionEl.style.transform = "translate(".concat(x1, "px, ").concat(y1, "px)");
_this5.regionEl.style.width = width + 'px';
_this5.regionEl.style.height = height + 'px';
_this5.imageClippedEl.style.clip = "rect(".concat(y1, "px, ").concat(x2, "px, ").concat(y2, "px, ").concat(x1, "px)");
var center = _this5.box.getAbsolutePoint([.5, .5]);
var _this5$imageEl$getBou = _this5.imageEl.getBoundingClientRect(),
parentWidth = _this5$imageEl$getBou.width,
parentHeight = _this5$imageEl$getBou.height;
var xSign = center[0] - parentWidth / 2 >> 31;
var ySign = center[1] - parentHeight / 2 >> 31;
var quadrant = (xSign ^ ySign) + ySign + ySign + 4;
var foregroundHandleIndex = -2 * quadrant + 8;
for (var i = 0; i < _this5.handles.length; i++) {
var handle = _this5.handles[i];
var handleWidth = handle.el.offsetWidth;
var handleHeight = handle.el.offsetHeight;
var left = x1 + width * handle.position[0] - handleWidth / 2;
var top = y1 + height * handle.position[1] - handleHeight / 2;
handle.el.style.transform = "translate(".concat(Math.round(left), "px, ").concat(Math.round(top), "px)");
handle.el.style.zIndex = foregroundHandleIndex == i ? 5 : 4;
}
});
}
if (isFlippedY) {
var _tmp = y1;y1 = y2;y2 = _tmp;
origin[1] = 1 - origin[1];
}, {
key: "attachHandlerEvents",
value: function attachHandlerEvents() {
var eventBus = this.eventBus;
eventBus.addEventListener('handlestart', this.onHandleMoveStart.bind(this));
eventBus.addEventListener('handlemove', this.onHandleMoveMoving.bind(this));
eventBus.addEventListener('handleend', this.onHandleMoveEnd.bind(this));
}
var box = new Box(x1, y1, x2, y2);
if (this.options.aspectRatio) {
var ratio = this.options.aspectRatio;
var isVerticalMovement = false;
if (MULTI_AXIS) {
isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width();
} else if (TOP_MOVABLE || BOTTOM_MOVABLE) {
isVerticalMovement = true;
}, {
key: "attachRegionEvents",
value: function attachRegionEvents() {
var eventBus = this.eventBus;
this.regionEl.addEventListener('mousedown', onMouseDown);
eventBus.addEventListener('regionstart', this.onRegionMoveStart.bind(this));
eventBus.addEventListener('regionmove', this.onRegionMoveMoving.bind(this));
eventBus.addEventListener('regionend', this.onRegionMoveEnd.bind(this));
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
eventBus.dispatchEvent(new CustomEvent('regionstart', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
var ratioMode = isVerticalMovement ? 'width' : 'height';
box.constrainToRatio(ratio, origin, ratioMode, this.options.maxAspectRatio);
function onMouseMove(e) {
e.stopPropagation();
eventBus.dispatchEvent(new CustomEvent('regionmove', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
eventBus.dispatchEvent(new CustomEvent('regionend', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
}
box.constrainToSize(this.options.maxSize.width, this.options.maxSize.height, this.options.minSize.width, this.options.minSize.height, origin, this.options.aspectRatio, this.options.maxAspectRatio);
var _imageEl$getBoundingC5 = this.imageEl.getBoundingClientRect(),
parentWidth = _imageEl$getBoundingC5.width,
parentHeight = _imageEl$getBoundingC5.height;
var boundaryOrigins = [origin];
if (this.options.maxAspectRatio) boundaryOrigins = [[0, 0], [1, 1]];
boundaryOrigins.map(function (boundaryOrigin) {
box.constrainToBoundary(parentWidth, parentHeight, boundaryOrigin);
});
this.box = box;
this.redraw();
if (this.options.onCropMove !== null) {
this.options.onCropMove(this.getValue());
}, {
key: "attachOverlayEvents",
value: function attachOverlayEvents() {
var SOUTHEAST_HANDLE_IDX = 4;
var self = this;
var tmpBox = null;
this.overlayEl.addEventListener('mousedown', onMouseDown);
function onMouseDown(e) {
e.stopPropagation();
document.addEventListener('mouseup', onMouseUp);
document.addEventListener('mousemove', onMouseMove);
var container = self.cropperEl.getBoundingClientRect();
var mouseX = e.clientX - container.left;
var mouseY = e.clientY - container.top;
tmpBox = self.box;
self.box = new Box(mouseX, mouseY, mouseX + 1, mouseY + 1);
self.eventBus.dispatchEvent(new CustomEvent('handlestart', {
detail: {
handle: self.handles[SOUTHEAST_HANDLE_IDX]
}
}));
}
function onMouseMove(e) {
e.stopPropagation();
self.eventBus.dispatchEvent(new CustomEvent('handlemove', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
function onMouseUp(e) {
e.stopPropagation();
document.removeEventListener('mouseup', onMouseUp);
document.removeEventListener('mousemove', onMouseMove);
if (self.box.width() === 1 && self.box.height() === 1) {
self.box = tmpBox;
return;
}
self.eventBus.dispatchEvent(new CustomEvent('handleend', {
detail: {
mouseX: e.clientX,
mouseY: e.clientY
}
}));
}
}
}
}, {
key: 'onHandleMoveEnd',
value: function onHandleMoveEnd(e) {
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}, {
key: "onHandleMoveStart",
value: function onHandleMoveStart(e) {
var handle = e.detail.handle;
var originPoint = [1 - handle.position[0], 1 - handle.position[1]];
var _this$box$getAbsolute = this.box.getAbsolutePoint(originPoint),
_this$box$getAbsolute2 = _slicedToArray(_this$box$getAbsolute, 2),
originX = _this$box$getAbsolute2[0],
originY = _this$box$getAbsolute2[1];
this.activeHandle = {
handle: handle,
originPoint: originPoint,
originX: originX,
originY: originY
};
if (this.options.onCropStart !== null) {
this.options.onCropStart(this.getValue());
}
}
}
}, {
key: 'onRegionMoveStart',
value: function onRegionMoveStart(e) {
var _e$detail2 = e.detail,
mouseX = _e$detail2.mouseX,
mouseY = _e$detail2.mouseY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
this.currentMove = {
offsetX: mouseX - this.box.x1,
offsetY: mouseY - this.box.y1
};if (this.options.onCropStart !== null) {
this.options.onCropStart(this.getValue());
}, {
key: "onHandleMoveMoving",
value: function onHandleMoveMoving(e) {
var _e$detail = e.detail,
mouseX = _e$detail.mouseX,
mouseY = _e$detail.mouseY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
if (mouseX < 0) {
mouseX = 0;
} else if (mouseX > container.width) {
mouseX = container.width;
}
if (mouseY < 0) {
mouseY = 0;
} else if (mouseY > container.height) {
mouseY = container.height;
}
var origin = this.activeHandle.originPoint.slice();
var originX = this.activeHandle.originX;
var originY = this.activeHandle.originY;
var handle = this.activeHandle.handle;
var TOP_MOVABLE = handle.constraints[0] === 1;
var RIGHT_MOVABLE = handle.constraints[1] === 1;
var BOTTOM_MOVABLE = handle.constraints[2] === 1;
var LEFT_MOVABLE = handle.constraints[3] === 1;
var MULTI_AXIS = (LEFT_MOVABLE || RIGHT_MOVABLE) && (TOP_MOVABLE || BOTTOM_MOVABLE);
var x1 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x1;
var x2 = LEFT_MOVABLE || RIGHT_MOVABLE ? originX : this.box.x2;
var y1 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y1;
var y2 = TOP_MOVABLE || BOTTOM_MOVABLE ? originY : this.box.y2;
x1 = LEFT_MOVABLE ? mouseX : x1;
x2 = RIGHT_MOVABLE ? mouseX : x2;
y1 = TOP_MOVABLE ? mouseY : y1;
y2 = BOTTOM_MOVABLE ? mouseY : y2;
var isFlippedX = false,
isFlippedY = false;
if (LEFT_MOVABLE || RIGHT_MOVABLE) {
isFlippedX = LEFT_MOVABLE ? mouseX > originX : mouseX < originX;
}
if (TOP_MOVABLE || BOTTOM_MOVABLE) {
isFlippedY = TOP_MOVABLE ? mouseY > originY : mouseY < originY;
}
if (isFlippedX) {
var tmp = x1;
x1 = x2;
x2 = tmp;
origin[0] = 1 - origin[0];
}
if (isFlippedY) {
var _tmp = y1;
y1 = y2;
y2 = _tmp;
origin[1] = 1 - origin[1];
}
var box = new Box(x1, y1, x2, y2);
if (this.options.aspectRatio) {
var ratio = this.options.aspectRatio;
var isVerticalMovement = false;
if (MULTI_AXIS) {
isVerticalMovement = mouseY > box.y1 + ratio * box.width() || mouseY < box.y2 - ratio * box.width();
} else if (TOP_MOVABLE || BOTTOM_MOVABLE) {
isVerticalMovement = true;
}
var ratioMode = isVerticalMovement ? 'width' : 'height';
box.constrainToRatio(ratio, origin, ratioMode, this.options.maxAspectRatio);
}
box.constrainToSize(this.options.maxSize.width, this.options.maxSize.height, this.options.minSize.width, this.options.minSize.height, origin, this.options.aspectRatio, this.options.maxAspectRatio);
var _this$imageEl$getBoun4 = this.imageEl.getBoundingClientRect(),
parentWidth = _this$imageEl$getBoun4.width,
parentHeight = _this$imageEl$getBoun4.height;
var boundaryOrigins = [origin];
if (this.options.maxAspectRatio) boundaryOrigins = [[0, 0], [1, 1]];
boundaryOrigins.map(function (boundaryOrigin) {
box.constrainToBoundary(parentWidth, parentHeight, boundaryOrigin);
});
this.box = box;
this.redraw();
if (this.options.onCropMove !== null) {
this.options.onCropMove(this.getValue());
}
}
}
}, {
key: 'onRegionMoveMoving',
value: function onRegionMoveMoving(e) {
var _e$detail3 = e.detail,
mouseX = _e$detail3.mouseX,
mouseY = _e$detail3.mouseY;
var _currentMove = this.currentMove,
offsetX = _currentMove.offsetX,
offsetY = _currentMove.offsetY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
this.box.move(mouseX - offsetX, mouseY - offsetY);
if (this.box.x1 < 0) {
this.box.move(0, null);
}, {
key: "onHandleMoveEnd",
value: function onHandleMoveEnd(e) {
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
}
if (this.box.x2 > container.width) {
this.box.move(container.width - this.box.width(), null);
}
if (this.box.y1 < 0) {
this.box.move(null, 0);
}
if (this.box.y2 > container.height) {
this.box.move(null, container.height - this.box.height());
}
this.redraw();
if (this.options.onCropMove !== null) {
this.options.onCropMove(this.getValue());
}
}
}, {
key: 'onRegionMoveEnd',
value: function onRegionMoveEnd(e) {
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
}
}, {
key: 'getValue',
value: function getValue() {
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (mode === null) {
mode = this.options.returnMode;
}
var cropData = {};
if (mode == 'real') {
cropData = this.getValueAsRealData();
} else if (mode == 'ratio') {
cropData = this.getValueAsRatio();
} else if (mode == 'raw') {
cropData = {
x: Math.round(this.box.x1),
y: Math.round(this.box.y1),
width: Math.round(this.box.width()),
height: Math.round(this.box.height())
}, {
key: "onRegionMoveStart",
value: function onRegionMoveStart(e) {
var _e$detail2 = e.detail,
mouseX = _e$detail2.mouseX,
mouseY = _e$detail2.mouseY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
this.currentMove = {
offsetX: mouseX - this.box.x1,
offsetY: mouseY - this.box.y1
};
if (this.options.onCropStart !== null) {
this.options.onCropStart(this.getValue());
}
}
if (this.options.responsive) {
if (mode == "ratio") this.responsiveData = cropData;else this.responsiveData = this.getValueAsRatio();
}, {
key: "onRegionMoveMoving",
value: function onRegionMoveMoving(e) {
var _e$detail3 = e.detail,
mouseX = _e$detail3.mouseX,
mouseY = _e$detail3.mouseY;
var _this$currentMove = this.currentMove,
offsetX = _this$currentMove.offsetX,
offsetY = _this$currentMove.offsetY;
var container = this.cropperEl.getBoundingClientRect();
mouseX = mouseX - container.left;
mouseY = mouseY - container.top;
this.box.move(mouseX - offsetX, mouseY - offsetY);
if (this.box.x1 < 0) {
this.box.move(0, null);
}
if (this.box.x2 > container.width) {
this.box.move(container.width - this.box.width(), null);
}
if (this.box.y1 < 0) {
this.box.move(null, 0);
}
if (this.box.y2 > container.height) {
this.box.move(null, container.height - this.box.height());
}
this.redraw();
if (this.options.onCropMove !== null) {
this.options.onCropMove(this.getValue());
}
}
return cropData;
}
}, {
key: 'getValueAsRealData',
value: function getValueAsRealData() {
var actualWidth = this.imageEl.naturalWidth;
var actualHeight = this.imageEl.naturalHeight;
var _imageEl$getBoundingC6 = this.imageEl.getBoundingClientRect(),
elementWidth = _imageEl$getBoundingC6.width,
elementHeight = _imageEl$getBoundingC6.height;
var factorX = actualWidth / elementWidth;
var factorY = actualHeight / elementHeight;
return {
x: Math.round(this.box.x1 * factorX),
y: Math.round(this.box.y1 * factorY),
width: Math.round(this.box.width() * factorX),
height: Math.round(this.box.height() * factorY)
};
}
}, {
key: 'getValueAsRatio',
value: function getValueAsRatio() {
var _imageEl$getBoundingC7 = this.imageEl.getBoundingClientRect(),
elementWidth = _imageEl$getBoundingC7.width,
elementHeight = _imageEl$getBoundingC7.height;
return {
x: this.box.x1 / elementWidth,
y: this.box.y1 / elementHeight,
width: this.box.width() / elementWidth,
height: this.box.height() / elementHeight
};
}
}], [{
key: 'parseOptions',
value: function parseOptions(opts) {
var defaults$$1 = {
aspectRatio: null,
maxAspectRatio: null,
maxSize: { width: null, height: null, unit: 'px', real: false },
minSize: { width: null, height: null, unit: 'px', real: false },
startSize: { width: 100, height: 100, unit: '%', real: false },
startPosition: null,
returnMode: 'real',
onInitialize: null,
onCropStart: null,
onCropMove: null,
onCropEnd: null,
preview: null,
responsive: true
};var preview = null;
if (opts.preview !== null) preview = opts.preview;
var responsive = null;
if (opts.responsive !== null) responsive = opts.responsive;
var aspectRatio = null;
var maxAspectRatio = null;
var ratioKeys = ["aspectRatio", "maxAspectRatio"];
for (var i = 0; i < ratioKeys.length; i++) {
if (opts[ratioKeys[i]] !== undefined) {
if (typeof opts[ratioKeys[i]] === 'number') {
var ratio = opts[ratioKeys[i]];
if (ratioKeys[i] === "aspectRatio") aspectRatio = ratio;else maxAspectRatio = ratio;
} else if (opts[ratioKeys[i]] instanceof Array) {
var _ratio = opts[ratioKeys[i]][1] / opts[ratioKeys[i]][0];
if (ratioKeys[i] === "aspectRatio") aspectRatio = _ratio;else maxAspectRatio = _ratio;
}
}, {
key: "onRegionMoveEnd",
value: function onRegionMoveEnd(e) {
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
}
var maxSize = null;
if (opts.maxSize !== undefined && opts.maxSize !== null) {
maxSize = {
width: opts.maxSize[0] || null,
height: opts.maxSize[1] || null,
unit: opts.maxSize[2] || 'px',
real: opts.minSize[3] || false
};
}, {
key: "getValue",
value: function getValue() {
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (mode === null) {
mode = this.options.returnMode;
}
var cropData = {};
if (mode == 'real') {
cropData = this.getValueAsRealData();
} else if (mode == 'ratio') {
cropData = this.getValueAsRatio();
} else if (mode == 'raw') {
cropData = {
x: Math.round(this.box.x1),
y: Math.round(this.box.y1),
width: Math.round(this.box.width()),
height: Math.round(this.box.height())
};
}
if (this.options.responsive) {
if (mode == "ratio") this.responsiveData = cropData;else this.responsiveData = this.getValueAsRatio();
}
return cropData;
}
var minSize = null;
if (opts.minSize !== undefined && opts.minSize !== null) {
minSize = {
width: opts.minSize[0] || null,
height: opts.minSize[1] || null,
unit: opts.minSize[2] || 'px',
real: opts.minSize[3] || false
}, {
key: "getValueAsRealData",
value: function getValueAsRealData() {
var actualWidth = this.imageEl.naturalWidth;
var actualHeight = this.imageEl.naturalHeight;
var _this$imageEl$getBoun5 = this.imageEl.getBoundingClientRect(),
elementWidth = _this$imageEl$getBoun5.width,
elementHeight = _this$imageEl$getBoun5.height;
var factorX = actualWidth / elementWidth;
var factorY = actualHeight / elementHeight;
return {
x: Math.round(this.box.x1 * factorX),
y: Math.round(this.box.y1 * factorY),
width: Math.round(this.box.width() * factorX),
height: Math.round(this.box.height() * factorY)
};
}
var startSize = null;
if (opts.startSize !== undefined && opts.startSize !== null) {
startSize = {
width: opts.startSize[0] || null,
height: opts.startSize[1] || null,
unit: opts.startSize[2] || '%',
real: opts.startSize[3] || false
}, {
key: "getValueAsRatio",
value: function getValueAsRatio() {
var _this$imageEl$getBoun6 = this.imageEl.getBoundingClientRect(),
elementWidth = _this$imageEl$getBoun6.width,
elementHeight = _this$imageEl$getBoun6.height;
return {
x: this.box.x1 / elementWidth,
y: this.box.y1 / elementHeight,
width: this.box.width() / elementWidth,
height: this.box.height() / elementHeight
};
}
var startPosition = null;
if (opts.startPosition !== undefined && opts.startPosition !== null) {
startPosition = {
x: opts.startPosition[0] || null,
y: opts.startPosition[1] || null,
unit: opts.startPosition[2] || '%',
real: opts.startPosition[3] || false
}], [{
key: "parseOptions",
value: function parseOptions(opts) {
var defaults = {
aspectRatio: null,
maxAspectRatio: null,
maxSize: {
width: null,
height: null,
unit: 'px',
real: false
},
minSize: {
width: null,
height: null,
unit: 'px',
real: false
},
startSize: {
width: 100,
height: 100,
unit: '%',
real: false
},
startPosition: null,
returnMode: 'real',
onInitialize: null,
onCropStart: null,
onCropMove: null,
onCropEnd: null,
preview: null,
responsive: true
};
}
var onInitialize = null;
if (typeof opts.onInitialize === 'function') {
onInitialize = opts.onInitialize;
}
var onCropStart = null;
if (typeof opts.onCropStart === 'function') {
onCropStart = opts.onCropStart;
}
var onCropEnd = null;
if (typeof opts.onCropEnd === 'function') {
onCropEnd = opts.onCropEnd;
}
var onCropMove = null;
if (typeof opts.onUpdate === 'function') {
console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.');
onCropMove = opts.onUpdate;
}
if (typeof opts.onCropMove === 'function') {
onCropMove = opts.onCropMove;
}
var returnMode = null;
if (opts.returnMode !== undefined) {
var s = opts.returnMode.toLowerCase();
if (['real', 'ratio', 'raw'].indexOf(s) === -1) {
throw "Invalid return mode.";
}
returnMode = s;
}
var convertToPixels = function convertToPixels(imageEl) {
var sourceSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var _imageEl$getBoundingC8 = imageEl.getBoundingClientRect(),
width = _imageEl$getBoundingC8.width,
height = _imageEl$getBoundingC8.height;
var sizeKeys = ['maxSize', 'minSize', 'startSize', 'startPosition'];
for (var _i = 0; _i < sizeKeys.length; _i++) {
var key = sizeKeys[_i];
if (this[key] !== null) {
if (this[key].unit == '%') {
this[key] = convertPercentToPixel(width, height, this[key]);
} else if (this[key].real === true && sourceSize) {
this[key] = convertRealDataToPixel(width, height, sourceSize.width, sourceSize.height, this[key]);
var preview = null;
if (opts.preview !== null) preview = opts.preview;
var responsive = null;
if (opts.responsive !== null) responsive = opts.responsive;
var aspectRatio = null;
var maxAspectRatio = null;
var ratioKeys = ["aspectRatio", "maxAspectRatio"];
for (var i = 0; i < ratioKeys.length; i++) {
if (opts[ratioKeys[i]] !== undefined) {
if (typeof opts[ratioKeys[i]] === 'number') {
var ratio = opts[ratioKeys[i]];
if (ratioKeys[i] === "aspectRatio") aspectRatio = ratio;else maxAspectRatio = ratio;
} else if (opts[ratioKeys[i]] instanceof Array) {
var _ratio = opts[ratioKeys[i]][1] / opts[ratioKeys[i]][0];
if (ratioKeys[i] === "aspectRatio") aspectRatio = _ratio;else maxAspectRatio = _ratio;
}
delete this[key].unit;
}
}
if (this.minSize) {
if (this.minSize.width > width) this.minSize.width = width;
if (this.minSize.height > height) this.minSize.height = height;
var maxSize = null;
if (opts.maxSize !== undefined && opts.maxSize !== null) {
maxSize = {
width: opts.maxSize[0] || null,
height: opts.maxSize[1] || null,
unit: opts.maxSize[2] || 'px',
real: opts.minSize[3] || false
};
}
if (this.startSize && this.startPosition) {
var xEnd = this.startPosition.x + this.startSize.width;
if (xEnd > width) this.startPosition.x -= xEnd - width;
var yEnd = this.startPosition.y + this.startSize.height;
if (yEnd > height) this.startPosition.y -= yEnd - height;
var minSize = null;
if (opts.minSize !== undefined && opts.minSize !== null) {
minSize = {
width: opts.minSize[0] || null,
height: opts.minSize[1] || null,
unit: opts.minSize[2] || 'px',
real: opts.minSize[3] || false
};
}
};
var convertPercentToPixel = function convertPercentToPixel(width, height, data) {
if (data.width) {
data.width = data.width / 100 * width;
} else if (data.x) {
data.x = data.x / 100 * width;
var startSize = null;
if (opts.startSize !== undefined && opts.startSize !== null) {
startSize = {
width: opts.startSize[0] || null,
height: opts.startSize[1] || null,
unit: opts.startSize[2] || '%',
real: opts.startSize[3] || false
};
}
if (data.height) {
data.height = data.height / 100 * height;
} else if (data.y) {
data.y = data.y / 100 * height;
var startPosition = null;
if (opts.startPosition !== undefined && opts.startPosition !== null) {
startPosition = {
x: opts.startPosition[0] || null,
y: opts.startPosition[1] || null,
unit: opts.startPosition[2] || '%',
real: opts.startPosition[3] || false
};
}
return data;
};
var convertRealDataToPixel = function convertRealDataToPixel(width, height, sourceWidth, sourceHeight, data) {
var factorX = sourceWidth / width;
var factorY = sourceHeight / height;
if (data.width) {
data.width /= factorX;
} else if (data.x) {
data.x /= factorX;
var onInitialize = null;
if (typeof opts.onInitialize === 'function') {
onInitialize = opts.onInitialize;
}
if (data.height) {
data.height /= factorY;
} else if (data.y) {
data.y /= factorY;
var onCropStart = null;
if (typeof opts.onCropStart === 'function') {
onCropStart = opts.onCropStart;
}
return data;
};
var defaultValue = function defaultValue(v, d) {
return v !== null ? v : d;
};
return {
aspectRatio: defaultValue(aspectRatio, defaults$$1.aspectRatio),
maxAspectRatio: defaultValue(maxAspectRatio, defaults$$1.maxAspectRatio),
maxSize: defaultValue(maxSize, defaults$$1.maxSize),
minSize: defaultValue(minSize, defaults$$1.minSize),
startSize: defaultValue(startSize, defaults$$1.startSize),
startPosition: defaultValue(startPosition, defaults$$1.startPosition),
returnMode: defaultValue(returnMode, defaults$$1.returnMode),
onInitialize: defaultValue(onInitialize, defaults$$1.onInitialize),
onCropStart: defaultValue(onCropStart, defaults$$1.onCropStart),
onCropMove: defaultValue(onCropMove, defaults$$1.onCropMove),
onCropEnd: defaultValue(onCropEnd, defaults$$1.onCropEnd),
preview: defaultValue(preview, defaults$$1.preview),
responsive: defaultValue(responsive, defaults$$1.responsive),
convertToPixels: convertToPixels
};
}
}]);
return CropprCore;
}();
var onCropEnd = null;
if (typeof opts.onCropEnd === 'function') {
onCropEnd = opts.onCropEnd;
}
var onCropMove = null;
if (typeof opts.onUpdate === 'function') {
console.warn('Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead.');
onCropMove = opts.onUpdate;
}
if (typeof opts.onCropMove === 'function') {
onCropMove = opts.onCropMove;
}
var returnMode = null;
if (opts.returnMode !== undefined) {
var s = opts.returnMode.toLowerCase();
if (['real', 'ratio', 'raw'].indexOf(s) === -1) {
throw "Invalid return mode.";
}
returnMode = s;
}
var convertToPixels = function convertToPixels(imageEl) {
var sourceSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var _imageEl$getBoundingC = imageEl.getBoundingClientRect(),
width = _imageEl$getBoundingC.width,
height = _imageEl$getBoundingC.height;
var sizeKeys = ['maxSize', 'minSize', 'startSize', 'startPosition'];
for (var _i = 0; _i < sizeKeys.length; _i++) {
var key = sizeKeys[_i];
if (this[key] !== null) {
if (this[key].unit == '%') {
this[key] = convertPercentToPixel(width, height, this[key]);
} else if (this[key].real === true && sourceSize) {
this[key] = convertRealDataToPixel(width, height, sourceSize.width, sourceSize.height, this[key]);
}
delete this[key].unit;
}
}
if (this.minSize) {
if (this.minSize.width > width) this.minSize.width = width;
if (this.minSize.height > height) this.minSize.height = height;
}
if (this.startSize && this.startPosition) {
var xEnd = this.startPosition.x + this.startSize.width;
if (xEnd > width) this.startPosition.x -= xEnd - width;
var yEnd = this.startPosition.y + this.startSize.height;
if (yEnd > height) this.startPosition.y -= yEnd - height;
}
};
var convertPercentToPixel = function convertPercentToPixel(width, height, data) {
if (data.width) {
data.width = data.width / 100 * width;
} else if (data.x) {
data.x = data.x / 100 * width;
}
if (data.height) {
data.height = data.height / 100 * height;
} else if (data.y) {
data.y = data.y / 100 * height;
}
return data;
};
var convertRealDataToPixel = function convertRealDataToPixel(width, height, sourceWidth, sourceHeight, data) {
var factorX = sourceWidth / width;
var factorY = sourceHeight / height;
if (data.width) {
data.width /= factorX;
} else if (data.x) {
data.x /= factorX;
}
if (data.height) {
data.height /= factorY;
} else if (data.y) {
data.y /= factorY;
}
return data;
};
var defaultValue = function defaultValue(v, d) {
return v !== null ? v : d;
};
return {
aspectRatio: defaultValue(aspectRatio, defaults.aspectRatio),
maxAspectRatio: defaultValue(maxAspectRatio, defaults.maxAspectRatio),
maxSize: defaultValue(maxSize, defaults.maxSize),
minSize: defaultValue(minSize, defaults.minSize),
startSize: defaultValue(startSize, defaults.startSize),
startPosition: defaultValue(startPosition, defaults.startPosition),
returnMode: defaultValue(returnMode, defaults.returnMode),
onInitialize: defaultValue(onInitialize, defaults.onInitialize),
onCropStart: defaultValue(onCropStart, defaults.onCropStart),
onCropMove: defaultValue(onCropMove, defaults.onCropMove),
onCropEnd: defaultValue(onCropEnd, defaults.onCropEnd),
preview: defaultValue(preview, defaults.preview),
responsive: defaultValue(responsive, defaults.responsive),
convertToPixels: convertToPixels
};
}
}]);
return CropprCore;
}();
var Croppr$1 = function (_CropprCore) {
inherits(Croppr, _CropprCore);
/**
* @constructor
* Calls the CropprCore's constructor.
*/
function Croppr(element, options) {
var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
classCallCheck(this, Croppr);
return possibleConstructorReturn(this, (Croppr.__proto__ || Object.getPrototypeOf(Croppr)).call(this, element, options, _deferred));
}
/**
* Gets the value of the crop region.
* @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
* 'raw'.
*/
createClass(Croppr, [{
key: 'getValue',
value: function getValue(mode) {
return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'getValue', this).call(this, mode);
}
var Croppr =
function (_CropprCore) {
_inherits(Croppr, _CropprCore);
/**
* Changes the image src.
* @param {String} src
* @constructor
* Calls the CropprCore's constructor.
*/
}, {
key: 'setImage',
value: function setImage(src) {
return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'setImage', this).call(this, src);
function Croppr(element, options) {
var _deferred = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
_classCallCheck(this, Croppr);
return _possibleConstructorReturn(this, _getPrototypeOf(Croppr).call(this, element, options, _deferred));
}
}, {
key: 'destroy',
value: function destroy() {
return get(Croppr.prototype.__proto__ || Object.getPrototypeOf(Croppr.prototype), 'destroy', this).call(this);
}
/**
* Moves the crop region to a specified coordinate.
* @param {Number} x
* @param {Number} y
* Gets the value of the crop region.
* @param {String} [mode] Which mode of calculation to use: 'real', 'ratio' or
* 'raw'.
*/
}, {
key: 'moveTo',
value: function moveTo(x, y) {
var constrain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
this.box.move(x, y);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
_createClass(Croppr, [{
key: "getValue",
value: function getValue(mode) {
return _get(_getPrototypeOf(Croppr.prototype), "getValue", this).call(this, mode);
}
return this;
}
/**
* Resizes the crop region to a specified width and height.
* @param {Number} width
* @param {Number} height
* @param {Array} origin The origin point to resize from.
* Defaults to [0.5, 0.5] (center).
*/
}, {
key: 'resizeTo',
value: function resizeTo(width, height) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var constrain = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
if (origin === null) origin = [.5, .5];else constrain = false;
this.box.resize(width, height, origin);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
/**
* Changes the image src.
* @param {String} src
*/
}, {
key: "setImage",
value: function setImage(src) {
return _get(_getPrototypeOf(Croppr.prototype), "setImage", this).call(this, src);
}
return this;
}
/**
* Scale the crop region by a factor.
* @param {Number} factor
* @param {Array} origin The origin point to resize from.
* Defaults to [0.5, 0.5] (center).
*/
}, {
key: 'scaleBy',
value: function scaleBy(factor) {
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var constrain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (origin === null) origin = [.5, .5];else constrain = false;
this.box.scale(factor, origin);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}, {
key: "destroy",
value: function destroy() {
return _get(_getPrototypeOf(Croppr.prototype), "destroy", this).call(this);
}
return this;
}
}, {
key: 'reset',
value: function reset() {
this.box = this.initializeBox(this.options);
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
/**
* Moves the crop region to a specified coordinate.
* @param {Number} x
* @param {Number} y
*/
}, {
key: "moveTo",
value: function moveTo(x, y) {
var constrain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
this.box.move(x, y);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
return this;
}
return this;
}
}]);
/**
* Resizes the crop region to a specified width and height.
* @param {Number} width
* @param {Number} height
* @param {Array} origin The origin point to resize from.
* Defaults to [0.5, 0.5] (center).
*/
}, {
key: "resizeTo",
value: function resizeTo(width, height) {
var origin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
var constrain = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
if (origin === null) origin = [.5, .5];else constrain = false;
this.box.resize(width, height, origin);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
return this;
}
/**
* Scale the crop region by a factor.
* @param {Number} factor
* @param {Array} origin The origin point to resize from.
* Defaults to [0.5, 0.5] (center).
*/
}, {
key: "scaleBy",
value: function scaleBy(factor) {
var origin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var constrain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
if (origin === null) origin = [.5, .5];else constrain = false;
this.box.scale(factor, origin);
if (constrain === true) this.strictlyConstrain();
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
return this;
}
}, {
key: "reset",
value: function reset() {
this.box = this.initializeBox(this.options);
this.redraw();
if (this.options.onCropEnd !== null) {
this.options.onCropEnd(this.getValue());
}
return this;
}
}]);
return Croppr;
}(CropprCore);
return Croppr;
}(CropprCore);
return Croppr$1;
})));
}));

2

dist/dnm-croppr.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.Croppr=e()}(this,function(){"use strict";function t(t){t.addEventListener("touchstart",e),t.addEventListener("touchend",e),t.addEventListener("touchmove",e)}function e(t){t.preventDefault();var e=t.changedTouches[0],i={touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"};e.target.dispatchEvent(new MouseEvent(i[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}if("function"==typeof window.CustomEvent)return!1;t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}try{return new CustomEvent("test"),!1}catch(t){}e.prototype=Event.prototype,t.MouseEvent=e}(window);var i=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},n=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),o=function t(e,i,n){null===e&&(e=Function.prototype);var o=Object.getOwnPropertyDescriptor(e,i);if(void 0===o){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,i,n)}if("value"in o)return o.value;var r=o.get;if(void 0!==r)return r.call(n)},s=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},r=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},a=function(){function t(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,a=t[Symbol.iterator]();!(n=(r=a.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{!n&&a.return&&a.return()}finally{if(o)throw s}}return i}return function(e,i){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,i);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),h=function t(e,n,o,s){function r(t){t.stopPropagation(),document.addEventListener("mouseup",a),document.addEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:l}}))}function a(t){t.stopPropagation(),document.removeEventListener("mouseup",a),document.removeEventListener("mousemove",h),l.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:l}}))}function h(t){t.stopPropagation(),l.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}i(this,t);var l=this;this.position=e,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",r)},l=function(){function t(e,n,o,s){i(this,t),this.x1=e,this.y1=n,this.x2=o,this.y2=s}return n(t,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=(arguments.length>2&&void 0!==arguments[2]&&arguments[2],arguments.length>3&&void 0!==arguments[3]&&arguments[3],this.width()*t),n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"getRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(null===t)return null;if(null===e)return t;var i=this.width()/this.height();if(t>e){var n=t;t=e,e=n}return i>e?e:i<t?t:i}},{key:"constrainToRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(null!==t){var o=this.width(),s=this.height();if(null!==n){var r=t;r>n&&(r=n,n=t);var a=o/s;if(a<r||a>n){var h=o,l=s;a>n?l=o/n:h=s*r,this.resize(h,l,e)}}else switch(i){case"height":this.resize(o,o/t,e);break;case"width":this.resize(s*t,s,e);break;default:this.resize(o,o/t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.getAbsolutePoint(i),o=a(n,2),s=o[0],r=o[1],h=s,l=r,u=t-s,d=e-r,v=-2*i[0]+1,c=-2*i[1]+1,p=null,g=null;switch(v){case-1:p=h;break;case 0:p=2*Math.min(h,u);break;case 1:p=u}switch(c){case-1:g=l;break;case 0:g=2*Math.min(l,d);break;case 1:g=d}if(this.width()>p){var m=p/this.width();this.scale(m,i)}if(this.height()>g){var w=g/this.height();this.scale(w,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,a=this.getRatio(s,r);if(t&&this.width()>t){var h=t,l=null===a?this.height():t/a;this.resize(h,l,o)}if(e&&this.height()>e){var u=null===a?this.width():e*a,d=e;this.resize(u,d,o)}if(i&&this.width()<i){var v=i,c=null===a?this.height():i/a;this.resize(v,c,o)}if(n&&this.height()<n){var p=null===a?this.width():n*a,g=n;this.resize(p,g,o)}return this}}]),t}(),u=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],d=function(){function e(t,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(i(this,e),n.preview&&(n.preview=this.getElement(n.preview)),this.options=e.parseOptions(n||{}),t=this.getElement(t),!t.getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:t.parentNode,element:t},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),s||(0===t.width||0===t.height?t.onload=function(){o.initialize(t)}:this.initialize(t))}return n(e,[{key:"initialize",value:function(t){var i=this;if(this.createDOM(t),this.getSourceSize(),this.options.convertToPixels(this.imageEl,this.sourceSize),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.initializeBox(),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.resizePreview(),this.cropperEl.onwheel=function(t){t.preventDefault();var e=t.deltaY,n=e>0?1:-1;e=Math.abs(e)/100,e=e>.05?.05:e,e=1+n*e,i.scaleBy(e)},this.options.responsive){var n=void 0,o=function(){for(var t=i.options,n=i.responsiveData,o=["x","y","width","height"],s=0;s<o.length;s++)n[o[s]]*=100,n[o[s]]=n[o[s]]>100?100:n[o[s]]<0?0:n[o[s]];t.startPosition=[n.x,n.y,"%"],t.startSize=[n.width,n.height,"%"],t=e.parseOptions(t),t.convertToPixels(i.imageEl,i.sourceSize),i.initializeBox(t),i.redraw()};window.onresize=function(){clearTimeout(n),n=setTimeout(function(){o()},100)}}}},{key:"getElement",value:function(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}},{key:"createDOM",value:function(e){this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,t(this.containerEl),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",e.getAttribute("src")),this.imageEl.setAttribute("alt",e.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<u.length;n++){var o=new h(u[n].position,u[n].constraints,u[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),e.parentElement.replaceChild(this.containerEl,e),this.setLivePreview()}},{key:"setLivePreview",value:function(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";var t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}},{key:"resizePreview",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){var e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,o=this.sourceSize.width*t.width,s=this.sourceSize.height*t.height,r=o/s,a=e,h=i;n>r?a=h*r:h=a/r,this.preview.container.style.width=a+"px",this.preview.container.style.height=h+"px";var l=this.sourceSize.width*a/o,u=this.sourceSize.height*h/s,d=-t.x*l,v=-t.y*u;this.preview.image.style.width=l+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=d+"px",this.preview.image.style.top=v+"px"}}},{key:"strictlyConstrain",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=void 0;null===i?(n=[[0,0],[1,1]],i=[.5,.5]):n=[i],null===e&&(e=this.options);var o=this.imageEl.getBoundingClientRect(),s=o.width,r=o.height;this.box.constrainToRatio(e.aspectRatio,i,"height",e.maxAspectRatio),this.box.constrainToSize(e.maxSize.width,e.maxSize.height,e.minSize.width,e.minSize.height,i,e.aspectRatio,e.maxAspectRatio),n.map(function(e){t.box.constrainToBoundary(s,r,e)})}},{key:"setImage",value:function(t){var e=this;return this.imageEl.onload=function(){e.getSourceSize(),e.options.convertToPixels(e.imageEl,e.sourceSize),e.initializeBox(),e.redraw()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container))}},{key:"initializeBox",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options);var e=t.startSize.width,i=t.startSize.height;t.minSize&&(e<t.minSize.width?e=t.minSize.width:e<t.maxSize.width&&(e=t.maxSize.width)),t.maxSize&&(i<t.minSize.height?i=t.minSize.height:i<t.maxSize.height&&(i=t.maxSize.height));var n=new l(0,0,e,i),o=0,s=0;if(null===t.startPosition){var r=this.imageEl.getBoundingClientRect(),a=r.width,h=r.height;o=a/2-e/2,s=h/2-i/2}else o=t.startPosition.x,s=t.startPosition.y;if(n.move(o,s),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);var u=document.createElement("img");u.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(u),this.preview.image.style.position="relative"}return this.box=n,this.strictlyConstrain(t),n}},{key:"getSourceSize",value:function(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}},{key:"convertRealDataToPixel",value:function(t){var e=this.imageEl.getBoundingClientRect(),i=e.width,n=e.height,o=this.sourceSize.width/i,s=this.sourceSize.height/n;return t.width&&(t.width/=o),t.x&&(t.x/=o),t.height&&(t.height/=s),t.y&&(t.y/=s),t}},{key:"redraw",value:function(){var t=this;this.resizePreview();var e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate("+n+"px, "+o+"px)",t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect("+o+"px, "+s+"px, "+r+"px, "+n+"px)";for(var a=t.box.getAbsolutePoint([.5,.5]),h=t.imageEl.getBoundingClientRect(),l=h.width,u=h.height,d=a[0]-l/2>>31,v=a[1]-u/2>>31,c=(d^v)+v+v+4,p=-2*c+8,g=0;g<t.handles.length;g++){var m=t.handles[g],w=m.el.offsetWidth,f=m.el.offsetHeight,y=n+e*m.position[0]-w/2,E=o+i*m.position[1]-f/2;m.el.style.transform="translate("+Math.round(y)+"px, "+Math.round(E)+"px)",m.el.style.zIndex=p==g?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function e(t){t.stopPropagation(),n.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),n.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=this.eventBus;this.regionEl.addEventListener("mousedown",t),n.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),n.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),n.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){function t(t){t.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e);var r=o.cropperEl.getBoundingClientRect(),a=t.clientX-r.left,h=t.clientY-r.top;s=o.box,o.box=new l(a,h,a+1,h+1),o.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:o.handles[n]}}))}function e(t){t.stopPropagation(),o.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function i(t){if(t.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),1===o.box.width()&&1===o.box.height())return void(o.box=s);o.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}var n=4,o=this,s=null;this.overlayEl.addEventListener("mousedown",t)}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=this.box.getAbsolutePoint(i),o=a(n,2),s=o[0],r=o[1];this.activeHandle={handle:e,originPoint:i,originX:s,originY:r},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,a=this.activeHandle.originY,h=this.activeHandle.handle,u=1===h.constraints[0],d=1===h.constraints[1],v=1===h.constraints[2],c=1===h.constraints[3],p=(c||d)&&(u||v),g=c||d?r:this.box.x1,m=c||d?r:this.box.x2,w=u||v?a:this.box.y1,f=u||v?a:this.box.y2;g=c?i:g,m=d?i:m,w=u?n:w,f=v?n:f;var y=!1,E=!1;if((c||d)&&(y=c?i>r:i<r),(u||v)&&(E=u?n>a:n<a),y){var x=g;g=m,m=x,s[0]=1-s[0]}if(E){var b=w;w=f,f=b,s[1]=1-s[1]}var z=new l(g,w,m,f);if(this.options.aspectRatio){var S=this.options.aspectRatio,C=!1;p?C=n>z.y1+S*z.width()||n<z.y2-S*z.width():(u||v)&&(C=!0);var M=C?"width":"height";z.constrainToRatio(S,s,M,this.options.maxAspectRatio)}z.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,s,this.options.aspectRatio,this.options.maxAspectRatio);var P=this.imageEl.getBoundingClientRect(),R=P.width,k=P.height,A=[s];this.options.maxAspectRatio&&(A=[[0,0],[1,1]]),A.map(function(t){z.constrainToBoundary(R,k,t)}),this.box=z,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,a=this.cropperEl.getBoundingClientRect();i-=a.left,n-=a.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>a.width&&this.box.move(a.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>a.height&&this.box.move(null,a.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options.returnMode);var e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}},{key:"getValueAsRealData",value:function(){var t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,i=this.imageEl.getBoundingClientRect(),n=i.width,o=i.height,s=t/n,r=e/o;return{x:Math.round(this.box.x1*s),y:Math.round(this.box.y1*r),width:Math.round(this.box.width()*s),height:Math.round(this.box.height()*r)}}},{key:"getValueAsRatio",value:function(){var t=this.imageEl.getBoundingClientRect(),e=t.width,i=t.height;return{x:this.box.x1/e,y:this.box.y1/i,width:this.box.width()/e,height:this.box.height()/i}}}],[{key:"parseOptions",value:function(t){var e={aspectRatio:null,maxAspectRatio:null,maxSize:{width:null,height:null,unit:"px",real:!1},minSize:{width:null,height:null,unit:"px",real:!1},startSize:{width:100,height:100,unit:"%",real:!1},startPosition:null,returnMode:"real",onInitialize:null,onCropStart:null,onCropMove:null,onCropEnd:null,preview:null,responsive:!0},i=null;null!==t.preview&&(i=t.preview);var n=null;null!==t.responsive&&(n=t.responsive);for(var o=null,s=null,r=["aspectRatio","maxAspectRatio"],a=0;a<r.length;a++)if(void 0!==t[r[a]])if("number"==typeof t[r[a]]){var h=t[r[a]];"aspectRatio"===r[a]?o=h:s=h}else if(t[r[a]]instanceof Array){var l=t[r[a]][1]/t[r[a]][0];"aspectRatio"===r[a]?o=l:s=l}var u=null;void 0!==t.maxSize&&null!==t.maxSize&&(u={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});var d=null;void 0!==t.minSize&&null!==t.minSize&&(d={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px",real:t.minSize[3]||!1});var v=null;void 0!==t.startSize&&null!==t.startSize&&(v={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});var c=null;void 0!==t.startPosition&&null!==t.startPosition&&(c={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});var p=null;"function"==typeof t.onInitialize&&(p=t.onInitialize);var g=null;"function"==typeof t.onCropStart&&(g=t.onCropStart);var m=null;"function"==typeof t.onCropEnd&&(m=t.onCropEnd);var w=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),w=t.onUpdate),"function"==typeof t.onCropMove&&(w=t.onCropMove);var f=null;if(void 0!==t.returnMode){var y=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(y))throw"Invalid return mode.";f=y}var E=function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=t.getBoundingClientRect(),n=i.width,o=i.height,s=["maxSize","minSize","startSize","startPosition"],r=0;r<s.length;r++){var a=s[r];null!==this[a]&&("%"==this[a].unit?this[a]=x(n,o,this[a]):!0===this[a].real&&e&&(this[a]=b(n,o,e.width,e.height,this[a])),delete this[a].unit)}if(this.minSize&&(this.minSize.width>n&&(this.minSize.width=n),this.minSize.height>o&&(this.minSize.height=o)),this.startSize&&this.startPosition){var h=this.startPosition.x+this.startSize.width;h>n&&(this.startPosition.x-=h-n);var l=this.startPosition.y+this.startSize.height;l>o&&(this.startPosition.y-=l-o)}},x=function(t,e,i){return i.width?i.width=i.width/100*t:i.x&&(i.x=i.x/100*t),i.height?i.height=i.height/100*e:i.y&&(i.y=i.y/100*e),i},b=function(t,e,i,n,o){var s=i/t,r=n/e;return o.width?o.width/=s:o.x&&(o.x/=s),o.height?o.height/=r:o.y&&(o.y/=r),o},z=function(t,e){return null!==t?t:e};return{aspectRatio:z(o,e.aspectRatio),maxAspectRatio:z(s,e.maxAspectRatio),maxSize:z(u,e.maxSize),minSize:z(d,e.minSize),startSize:z(v,e.startSize),startPosition:z(c,e.startPosition),returnMode:z(f,e.returnMode),onInitialize:z(p,e.onInitialize),onCropStart:z(g,e.onCropStart),onCropMove:z(w,e.onCropMove),onCropEnd:z(m,e.onCropEnd),preview:z(i,e.preview),responsive:z(n,e.responsive),convertToPixels:E}}}]),e}();return function(t){function e(t,n){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return i(this,e),r(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t,n,o))}return s(e,t),n(e,[{key:"getValue",value:function(t){return o(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){return o(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"setImage",this).call(this,t)}},{key:"destroy",value:function(){return o(e.prototype.__proto__||Object.getPrototypeOf(e.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,e){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.box.move(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];return null===i?i=[.5,.5]:n=!1,this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return null===e?e=[.5,.5]:i=!1,this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),e}(d)});
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Croppr=e()}(this,function(){"use strict";function t(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function e(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function i(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,e){return(o=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):e}function r(t,e,i){return(r="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,e,i){var o=function(t,e){for(;!Object.prototype.hasOwnProperty.call(t,e)&&null!==(t=n(t)););return t}(t,e);if(o){var s=Object.getOwnPropertyDescriptor(o,e);return s.get?s.get.call(i):s.value}})(t,e,i||t)}function h(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=[],n=!0,o=!1,s=void 0;try{for(var r,h=t[Symbol.iterator]();!(n=(r=h.next()).done)&&(i.push(r.value),!e||i.length!==e);n=!0);}catch(t){o=!0,s=t}finally{try{n||null==h.return||h.return()}finally{if(o)throw s}}return i}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}!function(){for(var t=0,e=["ms","moz","webkit","o"],i=0;i<e.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[e[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[e[i]+"CancelAnimationFrame"]||window[e[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(e,i){var n=(new Date).getTime(),o=Math.max(0,16-(n-t)),s=window.setTimeout(function(){e(n+o)},o);return t=n+o,s}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(t){clearTimeout(t)})}(),function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),i}t.prototype=window.Event.prototype,window.CustomEvent=t}(),function(t){try{return new CustomEvent("test"),!1}catch(t){}function e(e,i){i=i||{bubbles:!1,cancelable:!1};var n=document.createEvent("MouseEvent");return n.initMouseEvent(e,i.bubbles,i.cancelable,t,0,0,0,0,0,!1,!1,!1,!1,0,null),n}e.prototype=Event.prototype,t.MouseEvent=e}(window);var a=function e(i,n,o,s){t(this,e);var r=this;function h(t){t.stopPropagation(),document.removeEventListener("mouseup",h),document.removeEventListener("mousemove",a),r.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{handle:r}}))}function a(t){t.stopPropagation(),r.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}this.position=i,this.constraints=n,this.cursor=o,this.eventBus=s,this.el=document.createElement("div"),this.el.className="croppr-handle",this.el.style.cursor=o,this.el.addEventListener("mousedown",function(t){t.stopPropagation(),document.addEventListener("mouseup",h),document.addEventListener("mousemove",a),r.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:r}}))})},l=function(){function e(i,n,o,s){t(this,e),this.x1=i,this.y1=n,this.x2=o,this.y2=s}return i(e,[{key:"set",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return this.x1=null==t?this.x1:t,this.y1=null==e?this.y1:e,this.x2=null==i?this.x2:i,this.y2=null==n?this.y2:n,this}},{key:"width",value:function(){return Math.abs(this.x2-this.x1)}},{key:"height",value:function(){return Math.abs(this.y2-this.y1)}},{key:"resize",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=this.x1+this.width()*i[0],o=this.y1+this.height()*i[1];return this.x1=n-t*i[0],this.y1=o-e*i[1],this.x2=this.x1+t,this.y2=this.y1+e,this}},{key:"scale",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=this.width()*t,n=this.height()*t;return this.resize(i,n,e),this}},{key:"move",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=this.width(),n=this.height();return t=null===t?this.x1:t,e=null===e?this.y1:e,this.x1=t,this.y1=e,this.x2=t+i,this.y2=e+n,this}},{key:"getRelativePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.width()*t[0],this.height()*t[1]]}},{key:"getAbsolutePoint",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[0,0];return[this.x1+this.width()*t[0],this.y1+this.height()*t[1]]}},{key:"getRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;if(null===t)return null;if(null===e)return t;var i=this.width()/this.height();if(t>e){var n=t;t=e,e=n}return i>e?e:i<t?t:i}},{key:"constrainToRatio",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,0],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"height",n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;if(null!==t){var o=this.width(),s=this.height();if(null!==n){var r=t;r>n&&(r=n,n=t);var h=o/s;if(h<r||h>n){var a=o,l=s;h>n?l=o/n:a=s*r,this.resize(a,l,e)}}else switch(i){case"height":this.resize(o,o/t,e);break;case"width":this.resize(s*t,s,e);break;default:this.resize(o,o/t,e)}return this}}},{key:"constrainToBoundary",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[0,0],n=h(this.getAbsolutePoint(i),2),o=n[0],s=n[1],r=o,a=s,l=t-o,u=e-s,v=-2*i[0]+1,c=-2*i[1]+1,d=null,p=null;switch(v){case-1:d=r;break;case 0:d=2*Math.min(r,l);break;case 1:d=l}switch(c){case-1:p=a;break;case 0:p=2*Math.min(a,u);break;case 1:p=u}if(this.width()>d){var g=d/this.width();this.scale(g,i)}if(this.height()>p){var m=p/this.height();this.scale(m,i)}return this}},{key:"constrainToSize",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:[0,0],s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:null,r=arguments.length>6&&void 0!==arguments[6]?arguments[6]:null,h=this.getRatio(s,r);if(t&&this.width()>t){var a=t,l=null===h?this.height():t/h;this.resize(a,l,o)}if(e&&this.height()>e){var u=null===h?this.width():e*h,v=e;this.resize(u,v,o)}if(i&&this.width()<i){var c=i,d=null===h?this.height():i/h;this.resize(c,d,o)}if(n&&this.height()<n){var p=null===h?this.width():n*h,g=n;this.resize(p,g,o)}return this}}]),e}();function u(t){t.preventDefault();var e=t.changedTouches[0];e.target.dispatchEvent(new MouseEvent({touchstart:"mousedown",touchmove:"mousemove",touchend:"mouseup"}[t.type],{bubbles:!0,cancelable:!0,view:window,clientX:e.clientX,clientY:e.clientY,screenX:e.screenX,screenY:e.screenY}))}var v=[{position:[0,0],constraints:[1,0,0,1],cursor:"nw-resize"},{position:[.5,0],constraints:[1,0,0,0],cursor:"n-resize"},{position:[1,0],constraints:[1,1,0,0],cursor:"ne-resize"},{position:[1,.5],constraints:[0,1,0,0],cursor:"e-resize"},{position:[1,1],constraints:[0,1,1,0],cursor:"se-resize"},{position:[.5,1],constraints:[0,0,1,0],cursor:"s-resize"},{position:[0,1],constraints:[0,0,1,1],cursor:"sw-resize"},{position:[0,.5],constraints:[0,0,0,1],cursor:"w-resize"}],c=function(){function e(i,n){var o=this,s=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if(t(this,e),n.preview&&(n.preview=this.getElement(n.preview)),this.options=e.parseOptions(n||{}),!(i=this.getElement(i)).getAttribute("src"))throw"Image src not provided.";this._initialized=!1,this._restore={parent:i.parentNode,element:i},this.options.preview&&(this._restore.preview=this.options.preview,this._restore.parentPreview=this.options.preview.parentNode),s||(0===i.width||0===i.height?i.onload=function(){o.initialize(i)}:this.initialize(i))}return i(e,[{key:"initialize",value:function(t){var i=this;if(this.createDOM(t),this.getSourceSize(),this.options.convertToPixels(this.imageEl,this.sourceSize),this.attachHandlerEvents(),this.attachRegionEvents(),this.attachOverlayEvents(),this.initializeBox(),this.redraw(),this._initialized=!0,null!==this.options.onInitialize&&this.options.onInitialize(this),this.resizePreview(),this.cropperEl.onwheel=function(t){t.preventDefault();var e=t.deltaY;e=1+(e>0?1:-1)*(e=(e=Math.abs(e)/100)>.05?.05:e),i.scaleBy(e)},this.options.responsive){var n;window.onresize=function(){clearTimeout(n),n=setTimeout(function(){!function(){for(var t=i.options,n=i.responsiveData,o=["x","y","width","height"],s=0;s<o.length;s++)n[o[s]]*=100,n[o[s]]=n[o[s]]>100?100:n[o[s]]<0?0:n[o[s]];t.startPosition=[n.x,n.y,"%"],t.startSize=[n.width,n.height,"%"],(t=e.parseOptions(t)).convertToPixels(i.imageEl,i.sourceSize),i.initializeBox(t),i.redraw()}()},100)}}}},{key:"getElement",value:function(t,e){if(t&&!t.nodeName&&null==(t=document.querySelector(t)))throw"Unable to find element.";return t}},{key:"createDOM",value:function(t){var e;this.containerEl=document.createElement("div"),this.containerEl.className="croppr-container",this.eventBus=this.containerEl,(e=this.containerEl).addEventListener("touchstart",u),e.addEventListener("touchend",u),e.addEventListener("touchmove",u),this.cropperEl=document.createElement("div"),this.cropperEl.className="croppr",this.imageEl=document.createElement("img"),this.imageEl.setAttribute("src",t.getAttribute("src")),this.imageEl.setAttribute("alt",t.getAttribute("alt")),this.imageEl.className="croppr-image",this.imageClippedEl=this.imageEl.cloneNode(),this.imageClippedEl.className="croppr-imageClipped",this.regionEl=document.createElement("div"),this.regionEl.className="croppr-region",this.overlayEl=document.createElement("div"),this.overlayEl.className="croppr-overlay";var i=document.createElement("div");i.className="croppr-handleContainer",this.handles=[];for(var n=0;n<v.length;n++){var o=new a(v[n].position,v[n].constraints,v[n].cursor,this.eventBus);this.handles.push(o),i.appendChild(o.el)}this.cropperEl.appendChild(this.imageEl),this.cropperEl.appendChild(this.imageClippedEl),this.cropperEl.appendChild(this.regionEl),this.cropperEl.appendChild(this.overlayEl),this.cropperEl.appendChild(i),this.containerEl.appendChild(this.cropperEl),t.parentElement.replaceChild(this.containerEl,t),this.setLivePreview()}},{key:"setLivePreview",value:function(){if(this.options.preview){this.preview={},this.preview.parent=this.options.preview,this.preview.parent.style.position="relative";var t=document.createElement("div");this.preview.container=this.preview.parent.appendChild(t),this.preview.container.style.overflow="hidden",this.preview.container.style.position="absolute",this.preview.container.style.top="50%",this.preview.container.style.left="50%",this.preview.container.style.transform="translate(-50%, -50%)"}}},{key:"resizePreview",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;if(null===t&&(t=this.getValue("ratio")),this.preview&&t.width&&t.height){var e=this.preview.parent.offsetWidth,i=this.preview.parent.offsetHeight,n=e/i,o=this.sourceSize.width*t.width,s=this.sourceSize.height*t.height,r=o/s,h=e,a=i;n>r?h=a*r:a=h/r,this.preview.container.style.width=h+"px",this.preview.container.style.height=a+"px";var l=this.sourceSize.width*h/o,u=this.sourceSize.height*a/s,v=-t.x*l,c=-t.y*u;this.preview.image.style.width=l+"px",this.preview.image.style.height=u+"px",this.preview.image.style.left=v+"px",this.preview.image.style.top=c+"px"}}},{key:"strictlyConstrain",value:function(){var t,e=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;null===n?(t=[[0,0],[1,1]],n=[.5,.5]):t=[n],null===i&&(i=this.options);var o=this.imageEl.getBoundingClientRect(),s=o.width,r=o.height;this.box.constrainToRatio(i.aspectRatio,n,"height",i.maxAspectRatio),this.box.constrainToSize(i.maxSize.width,i.maxSize.height,i.minSize.width,i.minSize.height,n,i.aspectRatio,i.maxAspectRatio),t.map(function(t){e.box.constrainToBoundary(s,r,t)})}},{key:"setImage",value:function(t){var e=this;return this.imageEl.onload=function(){e.getSourceSize(),e.options.convertToPixels(e.imageEl,e.sourceSize),e.initializeBox(),e.redraw()},this.imageEl.src=t,this.imageClippedEl.src=t,this}},{key:"destroy",value:function(){this._restore.parent.replaceChild(this._restore.element,this.containerEl),this.options.preview&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.container.parentNode.removeChild(this.preview.container))}},{key:"initializeBox",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options);var e=t.startSize.width,i=t.startSize.height;t.minSize&&(e<t.minSize.width?e=t.minSize.width:e<t.maxSize.width&&(e=t.maxSize.width)),t.maxSize&&(i<t.minSize.height?i=t.minSize.height:i<t.maxSize.height&&(i=t.maxSize.height));var n=new l(0,0,e,i),o=0,s=0;if(null===t.startPosition){var r=this.imageEl.getBoundingClientRect();o=r.width/2-e/2,s=r.height/2-i/2}else o=t.startPosition.x,s=t.startPosition.y;if(n.move(o,s),this.preview){this.preview.image&&(this.preview.image.parentNode.removeChild(this.preview.image),this.preview.image=null);var h=document.createElement("img");h.src=this.imageEl.src,this.preview.image=this.preview.container.appendChild(h),this.preview.image.style.position="relative"}return this.box=n,this.strictlyConstrain(t),n}},{key:"getSourceSize",value:function(){return this.sourceSize={},this.sourceSize.width=this.imageEl.naturalWidth,this.sourceSize.height=this.imageEl.naturalHeight,this.sourceSize}},{key:"convertRealDataToPixel",value:function(t){var e=this.imageEl.getBoundingClientRect(),i=e.width,n=e.height,o=this.sourceSize.width/i,s=this.sourceSize.height/n;return t.width&&(t.width/=o),t.x&&(t.x/=o),t.height&&(t.height/=s),t.y&&(t.y/=s),t}},{key:"redraw",value:function(){var t=this;this.resizePreview();var e=Math.round(this.box.width()),i=Math.round(this.box.height()),n=Math.round(this.box.x1),o=Math.round(this.box.y1),s=Math.round(this.box.x2),r=Math.round(this.box.y2);window.requestAnimationFrame(function(){t.regionEl.style.transform="translate(".concat(n,"px, ").concat(o,"px)"),t.regionEl.style.width=e+"px",t.regionEl.style.height=i+"px",t.imageClippedEl.style.clip="rect(".concat(o,"px, ").concat(s,"px, ").concat(r,"px, ").concat(n,"px)");for(var h=t.box.getAbsolutePoint([.5,.5]),a=t.imageEl.getBoundingClientRect(),l=a.width,u=a.height,v=h[0]-l/2>>31,c=h[1]-u/2>>31,d=-2*((v^c)+c+c+4)+8,p=0;p<t.handles.length;p++){var g=t.handles[p],m=g.el.offsetWidth,f=g.el.offsetHeight,w=n+e*g.position[0]-m/2,y=o+i*g.position[1]-f/2;g.el.style.transform="translate(".concat(Math.round(w),"px, ").concat(Math.round(y),"px)"),g.el.style.zIndex=d==p?5:4}})}},{key:"attachHandlerEvents",value:function(){var t=this.eventBus;t.addEventListener("handlestart",this.onHandleMoveStart.bind(this)),t.addEventListener("handlemove",this.onHandleMoveMoving.bind(this)),t.addEventListener("handleend",this.onHandleMoveEnd.bind(this))}},{key:"attachRegionEvents",value:function(){var t=this.eventBus;function e(e){e.stopPropagation(),t.dispatchEvent(new CustomEvent("regionmove",{detail:{mouseX:e.clientX,mouseY:e.clientY}}))}function i(n){n.stopPropagation(),document.removeEventListener("mouseup",i),document.removeEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionend",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}this.regionEl.addEventListener("mousedown",function(n){n.stopPropagation(),document.addEventListener("mouseup",i),document.addEventListener("mousemove",e),t.dispatchEvent(new CustomEvent("regionstart",{detail:{mouseX:n.clientX,mouseY:n.clientY}}))}),t.addEventListener("regionstart",this.onRegionMoveStart.bind(this)),t.addEventListener("regionmove",this.onRegionMoveMoving.bind(this)),t.addEventListener("regionend",this.onRegionMoveEnd.bind(this))}},{key:"attachOverlayEvents",value:function(){var t=4,e=this,i=null;function n(t){t.stopPropagation(),e.eventBus.dispatchEvent(new CustomEvent("handlemove",{detail:{mouseX:t.clientX,mouseY:t.clientY}}))}function o(t){t.stopPropagation(),document.removeEventListener("mouseup",o),document.removeEventListener("mousemove",n),1!==e.box.width()||1!==e.box.height()?e.eventBus.dispatchEvent(new CustomEvent("handleend",{detail:{mouseX:t.clientX,mouseY:t.clientY}})):e.box=i}this.overlayEl.addEventListener("mousedown",function(s){s.stopPropagation(),document.addEventListener("mouseup",o),document.addEventListener("mousemove",n);var r=e.cropperEl.getBoundingClientRect(),h=s.clientX-r.left,a=s.clientY-r.top;i=e.box,e.box=new l(h,a,h+1,a+1),e.eventBus.dispatchEvent(new CustomEvent("handlestart",{detail:{handle:e.handles[t]}}))})}},{key:"onHandleMoveStart",value:function(t){var e=t.detail.handle,i=[1-e.position[0],1-e.position[1]],n=h(this.box.getAbsolutePoint(i),2),o=n[0],s=n[1];this.activeHandle={handle:e,originPoint:i,originX:o,originY:s},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onHandleMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,i<0?i=0:i>o.width&&(i=o.width),n<0?n=0:n>o.height&&(n=o.height);var s=this.activeHandle.originPoint.slice(),r=this.activeHandle.originX,h=this.activeHandle.originY,a=this.activeHandle.handle,u=1===a.constraints[0],v=1===a.constraints[1],c=1===a.constraints[2],d=1===a.constraints[3],p=(d||v)&&(u||c),g=d||v?r:this.box.x1,m=d||v?r:this.box.x2,f=u||c?h:this.box.y1,w=u||c?h:this.box.y2;g=d?i:g,m=v?i:m,f=u?n:f,w=c?n:w;var y=!1,E=!1;if((d||v)&&(y=d?i>r:i<r),(u||c)&&(E=u?n>h:n<h),y){var x=g;g=m,m=x,s[0]=1-s[0]}if(E){var b=f;f=w,w=b,s[1]=1-s[1]}var z=new l(g,f,m,w);if(this.options.aspectRatio){var C=this.options.aspectRatio,S=!1;p?S=n>z.y1+C*z.width()||n<z.y2-C*z.width():(u||c)&&(S=!0);var M=S?"width":"height";z.constrainToRatio(C,s,M,this.options.maxAspectRatio)}z.constrainToSize(this.options.maxSize.width,this.options.maxSize.height,this.options.minSize.width,this.options.minSize.height,s,this.options.aspectRatio,this.options.maxAspectRatio);var k=this.imageEl.getBoundingClientRect(),P=k.width,A=k.height,B=[s];this.options.maxAspectRatio&&(B=[[0,0],[1,1]]),B.map(function(t){z.constrainToBoundary(P,A,t)}),this.box=z,this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onHandleMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"onRegionMoveStart",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.cropperEl.getBoundingClientRect();i-=o.left,n-=o.top,this.currentMove={offsetX:i-this.box.x1,offsetY:n-this.box.y1},null!==this.options.onCropStart&&this.options.onCropStart(this.getValue())}},{key:"onRegionMoveMoving",value:function(t){var e=t.detail,i=e.mouseX,n=e.mouseY,o=this.currentMove,s=o.offsetX,r=o.offsetY,h=this.cropperEl.getBoundingClientRect();i-=h.left,n-=h.top,this.box.move(i-s,n-r),this.box.x1<0&&this.box.move(0,null),this.box.x2>h.width&&this.box.move(h.width-this.box.width(),null),this.box.y1<0&&this.box.move(null,0),this.box.y2>h.height&&this.box.move(null,h.height-this.box.height()),this.redraw(),null!==this.options.onCropMove&&this.options.onCropMove(this.getValue())}},{key:"onRegionMoveEnd",value:function(t){null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue())}},{key:"getValue",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=this.options.returnMode);var e={};return"real"==t?e=this.getValueAsRealData():"ratio"==t?e=this.getValueAsRatio():"raw"==t&&(e={x:Math.round(this.box.x1),y:Math.round(this.box.y1),width:Math.round(this.box.width()),height:Math.round(this.box.height())}),this.options.responsive&&(this.responsiveData="ratio"==t?e:this.getValueAsRatio()),e}},{key:"getValueAsRealData",value:function(){var t=this.imageEl.naturalWidth,e=this.imageEl.naturalHeight,i=this.imageEl.getBoundingClientRect(),n=t/i.width,o=e/i.height;return{x:Math.round(this.box.x1*n),y:Math.round(this.box.y1*o),width:Math.round(this.box.width()*n),height:Math.round(this.box.height()*o)}}},{key:"getValueAsRatio",value:function(){var t=this.imageEl.getBoundingClientRect(),e=t.width,i=t.height;return{x:this.box.x1/e,y:this.box.y1/i,width:this.box.width()/e,height:this.box.height()/i}}}],[{key:"parseOptions",value:function(t){var e=null,i=null,n={width:null,height:null,unit:"px",real:!1},o={width:null,height:null,unit:"px",real:!1},s={width:100,height:100,unit:"%",real:!1},r=null,h="real",a=null,l=null,u=null,v=null,c=null,d=!0,p=null;null!==t.preview&&(p=t.preview);var g=null;null!==t.responsive&&(g=t.responsive);for(var m=null,f=null,w=["aspectRatio","maxAspectRatio"],y=0;y<w.length;y++)if(void 0!==t[w[y]])if("number"==typeof t[w[y]]){var E=t[w[y]];"aspectRatio"===w[y]?m=E:f=E}else if(t[w[y]]instanceof Array){var x=t[w[y]][1]/t[w[y]][0];"aspectRatio"===w[y]?m=x:f=x}var b=null;void 0!==t.maxSize&&null!==t.maxSize&&(b={width:t.maxSize[0]||null,height:t.maxSize[1]||null,unit:t.maxSize[2]||"px",real:t.minSize[3]||!1});var z=null;void 0!==t.minSize&&null!==t.minSize&&(z={width:t.minSize[0]||null,height:t.minSize[1]||null,unit:t.minSize[2]||"px",real:t.minSize[3]||!1});var C=null;void 0!==t.startSize&&null!==t.startSize&&(C={width:t.startSize[0]||null,height:t.startSize[1]||null,unit:t.startSize[2]||"%",real:t.startSize[3]||!1});var S=null;void 0!==t.startPosition&&null!==t.startPosition&&(S={x:t.startPosition[0]||null,y:t.startPosition[1]||null,unit:t.startPosition[2]||"%",real:t.startPosition[3]||!1});var M=null;"function"==typeof t.onInitialize&&(M=t.onInitialize);var k=null;"function"==typeof t.onCropStart&&(k=t.onCropStart);var P=null;"function"==typeof t.onCropEnd&&(P=t.onCropEnd);var A=null;"function"==typeof t.onUpdate&&(console.warn("Croppr.js: `onUpdate` is deprecated and will be removed in the next major release. Please use `onCropMove` or `onCropEnd` instead."),A=t.onUpdate),"function"==typeof t.onCropMove&&(A=t.onCropMove);var B=null;if(void 0!==t.returnMode){var L=t.returnMode.toLowerCase();if(-1===["real","ratio","raw"].indexOf(L))throw"Invalid return mode.";B=L}var T=function(t,e,i){return i.width?i.width=i.width/100*t:i.x&&(i.x=i.x/100*t),i.height?i.height=i.height/100*e:i.y&&(i.y=i.y/100*e),i},Y=function(t,e,i,n,o){var s=i/t,r=n/e;return o.width?o.width/=s:o.x&&(o.x/=s),o.height?o.height/=r:o.y&&(o.y/=r),o},X=function(t,e){return null!==t?t:e};return{aspectRatio:X(m,e),maxAspectRatio:X(f,i),maxSize:X(b,n),minSize:X(z,o),startSize:X(C,s),startPosition:X(S,r),returnMode:X(B,h),onInitialize:X(M,a),onCropStart:X(k,l),onCropMove:X(A,u),onCropEnd:X(P,v),preview:X(p,c),responsive:X(g,d),convertToPixels:function(t){for(var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=t.getBoundingClientRect(),n=i.width,o=i.height,s=["maxSize","minSize","startSize","startPosition"],r=0;r<s.length;r++){var h=s[r];null!==this[h]&&("%"==this[h].unit?this[h]=T(n,o,this[h]):!0===this[h].real&&e&&(this[h]=Y(n,o,e.width,e.height,this[h])),delete this[h].unit)}if(this.minSize&&(this.minSize.width>n&&(this.minSize.width=n),this.minSize.height>o&&(this.minSize.height=o)),this.startSize&&this.startPosition){var a=this.startPosition.x+this.startSize.width;a>n&&(this.startPosition.x-=a-n);var l=this.startPosition.y+this.startSize.height;l>o&&(this.startPosition.y-=l-o)}}}}}]),e}();return function(e){function h(e,i){var o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return t(this,h),s(this,n(h).call(this,e,i,o))}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&o(t,e)}(h,c),i(h,[{key:"getValue",value:function(t){return r(n(h.prototype),"getValue",this).call(this,t)}},{key:"setImage",value:function(t){return r(n(h.prototype),"setImage",this).call(this,t)}},{key:"destroy",value:function(){return r(n(h.prototype),"destroy",this).call(this)}},{key:"moveTo",value:function(t,e){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return this.box.move(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"resizeTo",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n=!(arguments.length>3&&void 0!==arguments[3])||arguments[3];return null===i?i=[.5,.5]:n=!1,this.box.resize(t,e,i),!0===n&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"scaleBy",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];return null===e?e=[.5,.5]:i=!1,this.box.scale(t,e),!0===i&&this.strictlyConstrain(),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}},{key:"reset",value:function(){return this.box=this.initializeBox(this.options),this.redraw(),null!==this.options.onCropEnd&&this.options.onCropEnd(this.getValue()),this}}]),h}()});

30

package.json
{
"name": "dnm-croppr",
"version": "2.3.6",
"version": "2.3.7",
"description": "A fork of original Croppr.js, a vanilla JavaScript image cropper, with advanced options.",
"main": "src/index.js",
"source": "src/index.js",
"scripts": {
"build": "rollup --config rollup.config.dev.js & cp src/css/croppr.css dist/dnm-croppr.css",
"build": "rollup --config rollup.config.dev.js",
"watch": "onchange \"src/**/*.*\" -v -- npm run build",
"production": "rollup --config rollup.config.prod.js & cleancss src/css/croppr.css -o dist/dnm-croppr.min.css",
"production": "rollup --config rollup.config.prod.js & cleancss dist/dnm-croppr.css -o dist/dnm-croppr.min.css",
"dist": "npm run build && npm run production"

@@ -35,18 +34,13 @@ },

"devDependencies": {
"babel-cli": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-es2015-rollup": "^3.0.0",
"clean-css": "^3.4.23",
"onchange": "^3.2.1",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-cleanup": "^1.0.0",
"@babel/cli": "^7.2.3",
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"clean-css-cli": "^4.2.1",
"onchange": "^5.2.0",
"rollup": "^1.0.0",
"rollup-plugin-babel": "^4.2.0",
"rollup-plugin-cleanup": "^3.1.0",
"rollup-plugin-postcss": "^1.6.3",
"rollup-plugin-uglify": "^1.0.1"
},
"babel": {
"presets": [
"es2015-rollup"
]
"rollup-plugin-terser": "^3.0.0"
}
}

16

rollup.config.dev.js

@@ -22,7 +22,13 @@ import babel from 'rollup-plugin-babel';

export default {
entry: 'src/index.js',
input: 'src/index.js',
output: {
file: 'dist/dnm-croppr.js',
format: 'umd',
name: 'Croppr',
banner: banner
},
plugins: [
postcss({
extensions: [ '.css' ],
inject: false
extract: "dist/dnm-croppr.css"
}),

@@ -33,7 +39,3 @@ babel(),

})
],
format: 'umd',
moduleName: 'Croppr',
dest: 'dist/dnm-croppr.js',
banner: banner
]
};

20

rollup.config.prod.js
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import postcss from 'rollup-plugin-postcss';
import { terser } from "rollup-plugin-terser";

@@ -22,15 +22,17 @@

export default {
entry: 'src/index.js',
input: 'src/index.js',
output: {
file: 'dist/dnm-croppr.min.js',
format: 'umd',
name: 'Croppr',
banner: banner
},
plugins: [
postcss({
extensions: [ '.css' ],
inject: false
extract: "dist/dnm-croppr.css"
}),
babel(),
uglify()
],
format: 'umd',
moduleName: 'Croppr',
dest: 'dist/dnm-croppr.min.js',
banner: banner
terser()
]
};
dist/dnm-croppr.min.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc