/home/mip/public_html/template/AdminLTE/plugins/cropper-master/src/js/change.js
import $ from 'jquery';
import * as utils from './utilities';
// Actions
const ACTION_EAST = 'e';
const ACTION_WEST = 'w';
const ACTION_SOUTH = 's';
const ACTION_NORTH = 'n';
const ACTION_SOUTH_EAST = 'se';
const ACTION_SOUTH_WEST = 'sw';
const ACTION_NORTH_EAST = 'ne';
const ACTION_NORTH_WEST = 'nw';
function getMaxZoomRatio(pointers) {
const pointers2 = $.extend({}, pointers);
const ratios = [];
$.each(pointers, (pointerId, pointer) => {
delete pointers2[pointerId];
$.each(pointers2, (pointerId2, pointer2) => {
const x1 = Math.abs(pointer.startX - pointer2.startX);
const y1 = Math.abs(pointer.startY - pointer2.startY);
const x2 = Math.abs(pointer.endX - pointer2.endX);
const y2 = Math.abs(pointer.endY - pointer2.endY);
const z1 = Math.sqrt((x1 * x1) + (y1 * y1));
const z2 = Math.sqrt((x2 * x2) + (y2 * y2));
const ratio = (z2 - z1) / z1;
ratios.push(ratio);
});
});
ratios.sort((a, b) => {
return Math.abs(a) < Math.abs(b);
});
return ratios[0];
}
export default {
change(e) {
const self = this;
const options = self.options;
const pointers = self.pointers;
const pointer = pointers[utils.objectKeys(pointers)[0]];
const container = self.container;
const canvas = self.canvas;
const cropBox = self.cropBox;
let action = self.action;
let aspectRatio = options.aspectRatio;
let width = cropBox.width;
let height = cropBox.height;
let left = cropBox.left;
let top = cropBox.top;
const right = left + width;
const bottom = top + height;
let minLeft = 0;
let minTop = 0;
let maxWidth = container.width;
let maxHeight = container.height;
let renderable = true;
let offset;
// Locking aspect ratio in "free mode" by holding shift key (#259)
if (!aspectRatio && e.shiftKey) {
aspectRatio = width && height ? width / height : 1;
}
if (self.limited) {
minLeft = cropBox.minLeft;
minTop = cropBox.minTop;
maxWidth = minLeft + Math.min(container.width, canvas.width, canvas.left + canvas.width);
maxHeight = minTop + Math.min(container.height, canvas.height, canvas.top + canvas.height);
}
const range = {
x: pointer.endX - pointer.startX,
y: pointer.endY - pointer.startY
};
if (aspectRatio) {
range.X = range.y * aspectRatio;
range.Y = range.x / aspectRatio;
}
switch (action) {
// Move crop box
case 'all':
left += range.x;
top += range.y;
break;
// Resize crop box
case ACTION_EAST:
if (range.x >= 0 && (right >= maxWidth || (aspectRatio &&
(top <= minTop || bottom >= maxHeight)))) {
renderable = false;
break;
}
width += range.x;
if (aspectRatio) {
height = width / aspectRatio;
top -= range.Y / 2;
}
if (width < 0) {
action = ACTION_WEST;
width = 0;
}
break;
case ACTION_NORTH:
if (range.y <= 0 && (top <= minTop || (aspectRatio &&
(left <= minLeft || right >= maxWidth)))) {
renderable = false;
break;
}
height -= range.y;
top += range.y;
if (aspectRatio) {
width = height * aspectRatio;
left += range.X / 2;
}
if (height < 0) {
action = ACTION_SOUTH;
height = 0;
}
break;
case ACTION_WEST:
if (range.x <= 0 && (left <= minLeft || (aspectRatio &&
(top <= minTop || bottom >= maxHeight)))) {
renderable = false;
break;
}
width -= range.x;
left += range.x;
if (aspectRatio) {
height = width / aspectRatio;
top += range.Y / 2;
}
if (width < 0) {
action = ACTION_EAST;
width = 0;
}
break;
case ACTION_SOUTH:
if (range.y >= 0 && (bottom >= maxHeight || (aspectRatio &&
(left <= minLeft || right >= maxWidth)))) {
renderable = false;
break;
}
height += range.y;
if (aspectRatio) {
width = height * aspectRatio;
left -= range.X / 2;
}
if (height < 0) {
action = ACTION_NORTH;
height = 0;
}
break;
case ACTION_NORTH_EAST:
if (aspectRatio) {
if (range.y <= 0 && (top <= minTop || right >= maxWidth)) {
renderable = false;
break;
}
height -= range.y;
top += range.y;
width = height * aspectRatio;
} else {
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_SOUTH_WEST;
height = 0;
width = 0;
} else if (width < 0) {
action = ACTION_NORTH_WEST;
width = 0;
} else if (height < 0) {
action = ACTION_SOUTH_EAST;
height = 0;
}
break;
case ACTION_NORTH_WEST:
if (aspectRatio) {
if (range.y <= 0 && (top <= minTop || left <= minLeft)) {
renderable = false;
break;
}
height -= range.y;
top += range.y;
width = height * aspectRatio;
left += range.X;
} else {
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y <= 0 && top <= minTop) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y <= 0) {
if (top > minTop) {
height -= range.y;
top += range.y;
}
} else {
height -= range.y;
top += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_SOUTH_EAST;
height = 0;
width = 0;
} else if (width < 0) {
action = ACTION_NORTH_EAST;
width = 0;
} else if (height < 0) {
action = ACTION_SOUTH_WEST;
height = 0;
}
break;
case ACTION_SOUTH_WEST:
if (aspectRatio) {
if (range.x <= 0 && (left <= minLeft || bottom >= maxHeight)) {
renderable = false;
break;
}
width -= range.x;
left += range.x;
height = width / aspectRatio;
} else {
if (range.x <= 0) {
if (left > minLeft) {
width -= range.x;
left += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width -= range.x;
left += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_NORTH_EAST;
height = 0;
width = 0;
} else if (width < 0) {
action = ACTION_SOUTH_EAST;
width = 0;
} else if (height < 0) {
action = ACTION_NORTH_WEST;
height = 0;
}
break;
case ACTION_SOUTH_EAST:
if (aspectRatio) {
if (range.x >= 0 && (right >= maxWidth || bottom >= maxHeight)) {
renderable = false;
break;
}
width += range.x;
height = width / aspectRatio;
} else {
if (range.x >= 0) {
if (right < maxWidth) {
width += range.x;
} else if (range.y >= 0 && bottom >= maxHeight) {
renderable = false;
}
} else {
width += range.x;
}
if (range.y >= 0) {
if (bottom < maxHeight) {
height += range.y;
}
} else {
height += range.y;
}
}
if (width < 0 && height < 0) {
action = ACTION_NORTH_WEST;
height = 0;
width = 0;
} else if (width < 0) {
action = ACTION_SOUTH_WEST;
width = 0;
} else if (height < 0) {
action = ACTION_NORTH_EAST;
height = 0;
}
break;
// Move canvas
case 'move':
self.move(range.x, range.y);
renderable = false;
break;
// Zoom canvas
case 'zoom':
self.zoom(getMaxZoomRatio(pointers), e.originalEvent);
renderable = false;
break;
// Create crop box
case 'crop':
if (!range.x || !range.y) {
renderable = false;
break;
}
offset = self.$cropper.offset();
left = pointer.startX - offset.left;
top = pointer.startY - offset.top;
width = cropBox.minWidth;
height = cropBox.minHeight;
if (range.x > 0) {
action = range.y > 0 ? ACTION_SOUTH_EAST : ACTION_NORTH_EAST;
} else if (range.x < 0) {
left -= width;
action = range.y > 0 ? ACTION_SOUTH_WEST : ACTION_NORTH_WEST;
}
if (range.y < 0) {
top -= height;
}
// Show the crop box if is hidden
if (!self.cropped) {
self.$cropBox.removeClass('cropper-hidden');
self.cropped = true;
if (self.limited) {
self.limitCropBox(true, true);
}
}
break;
// No default
}
if (renderable) {
cropBox.width = width;
cropBox.height = height;
cropBox.left = left;
cropBox.top = top;
self.action = action;
self.renderCropBox();
}
// Override
$.each(pointers, (i, p) => {
p.startX = p.endX;
p.startY = p.endY;
});
},
};