405 lines
10 KiB
JavaScript
405 lines
10 KiB
JavaScript
$.extend(prototype, {
|
|
change: function (shiftKey, originalEvent) {
|
|
var options = this.options;
|
|
var aspectRatio = options.aspectRatio;
|
|
var action = this.action;
|
|
var container = this.container;
|
|
var canvas = this.canvas;
|
|
var cropBox = this.cropBox;
|
|
var width = cropBox.width;
|
|
var height = cropBox.height;
|
|
var left = cropBox.left;
|
|
var top = cropBox.top;
|
|
var right = left + width;
|
|
var bottom = top + height;
|
|
var minLeft = 0;
|
|
var minTop = 0;
|
|
var maxWidth = container.width;
|
|
var maxHeight = container.height;
|
|
var renderable = true;
|
|
var offset;
|
|
var range;
|
|
|
|
// Locking aspect ratio in "free mode" by holding shift key (#259)
|
|
if (!aspectRatio && shiftKey) {
|
|
aspectRatio = width && height ? width / height : 1;
|
|
}
|
|
|
|
if (options.strict) {
|
|
minLeft = cropBox.minLeft;
|
|
minTop = cropBox.minTop;
|
|
maxWidth = minLeft + min(container.width, canvas.width);
|
|
maxHeight = minTop + min(container.height, canvas.height);
|
|
}
|
|
|
|
range = {
|
|
x: this.endX - this.startX,
|
|
y: this.endY - this.startY
|
|
};
|
|
|
|
if (aspectRatio) {
|
|
range.X = range.y * aspectRatio;
|
|
range.Y = range.x / aspectRatio;
|
|
}
|
|
|
|
switch (action) {
|
|
// Move crop box
|
|
case ACTION_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 ACTION_MOVE:
|
|
this.move(range.x, range.y);
|
|
renderable = false;
|
|
break;
|
|
|
|
// Zoom canvas
|
|
case ACTION_ZOOM:
|
|
this.zoom((function (x1, y1, x2, y2) {
|
|
var z1 = sqrt(x1 * x1 + y1 * y1);
|
|
var z2 = sqrt(x2 * x2 + y2 * y2);
|
|
|
|
return (z2 - z1) / z1;
|
|
})(
|
|
abs(this.startX - this.startX2),
|
|
abs(this.startY - this.startY2),
|
|
abs(this.endX - this.endX2),
|
|
abs(this.endY - this.endY2)
|
|
), originalEvent);
|
|
this.startX2 = this.endX2;
|
|
this.startY2 = this.endY2;
|
|
renderable = false;
|
|
break;
|
|
|
|
// Create crop box
|
|
case ACTION_CROP:
|
|
if (range.x && range.y) {
|
|
offset = this.$cropper.offset();
|
|
left = this.startX - offset.left;
|
|
top = this.startY - offset.top;
|
|
width = cropBox.minWidth;
|
|
height = cropBox.minHeight;
|
|
|
|
if (range.x > 0) {
|
|
if (range.y > 0) {
|
|
action = ACTION_SOUTH_EAST;
|
|
} else {
|
|
action = ACTION_NORTH_EAST;
|
|
top -= height;
|
|
}
|
|
} else {
|
|
if (range.y > 0) {
|
|
action = ACTION_SOUTH_WEST;
|
|
left -= width;
|
|
} else {
|
|
action = ACTION_NORTH_WEST;
|
|
left -= width;
|
|
top -= height;
|
|
}
|
|
}
|
|
|
|
// Show the crop box if is hidden
|
|
if (!this.cropped) {
|
|
this.cropped = true;
|
|
this.$cropBox.removeClass(CLASS_HIDDEN);
|
|
}
|
|
}
|
|
|
|
break;
|
|
|
|
// No default
|
|
}
|
|
|
|
if (renderable) {
|
|
cropBox.width = width;
|
|
cropBox.height = height;
|
|
cropBox.left = left;
|
|
cropBox.top = top;
|
|
this.action = action;
|
|
|
|
this.renderCropBox();
|
|
}
|
|
|
|
// Override
|
|
this.startX = this.endX;
|
|
this.startY = this.endY;
|
|
}
|
|
});
|