206 lines
4.9 KiB
Plaintext
206 lines
4.9 KiB
Plaintext
resize: function () {
|
|
var restore = this.options.restore;
|
|
var $container = this.$container;
|
|
var container = this.container;
|
|
var canvasData;
|
|
var cropBoxData;
|
|
var ratio;
|
|
|
|
// Check `container` is necessary for IE8
|
|
if (this.isDisabled || !container) {
|
|
return;
|
|
}
|
|
|
|
ratio = $container.width() / container.width;
|
|
|
|
// Resize when width changed or height changed
|
|
if (ratio !== 1 || $container.height() !== container.height) {
|
|
if (restore) {
|
|
canvasData = this.getCanvasData();
|
|
cropBoxData = this.getCropBoxData();
|
|
}
|
|
|
|
this.render();
|
|
|
|
if (restore) {
|
|
this.setCanvasData($.each(canvasData, function (i, n) {
|
|
canvasData[i] = n * ratio;
|
|
}));
|
|
this.setCropBoxData($.each(cropBoxData, function (i, n) {
|
|
cropBoxData[i] = n * ratio;
|
|
}));
|
|
}
|
|
}
|
|
},
|
|
|
|
dblclick: function () {
|
|
if (this.isDisabled) {
|
|
return;
|
|
}
|
|
|
|
if (this.$dragBox.hasClass(CLASS_CROP)) {
|
|
this.setDragMode(ACTION_MOVE);
|
|
} else {
|
|
this.setDragMode(ACTION_CROP);
|
|
}
|
|
},
|
|
|
|
wheel: function (event) {
|
|
var e = event.originalEvent || event;
|
|
var ratio = num(this.options.wheelZoomRatio) || 0.1;
|
|
var delta = 1;
|
|
|
|
if (this.isDisabled) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
// Limit wheel speed to prevent zoom too fast
|
|
if (this.wheeling) {
|
|
return;
|
|
}
|
|
|
|
this.wheeling = true;
|
|
|
|
setTimeout($.proxy(function () {
|
|
this.wheeling = false;
|
|
}, this), 50);
|
|
|
|
if (e.deltaY) {
|
|
delta = e.deltaY > 0 ? 1 : -1;
|
|
} else if (e.wheelDelta) {
|
|
delta = -e.wheelDelta / 120;
|
|
} else if (e.detail) {
|
|
delta = e.detail > 0 ? 1 : -1;
|
|
}
|
|
|
|
this.zoom(-delta * ratio, event);
|
|
},
|
|
|
|
cropStart: function (event) {
|
|
var options = this.options;
|
|
var originalEvent = event.originalEvent;
|
|
var touches = originalEvent && originalEvent.touches;
|
|
var e = event;
|
|
var touchesLength;
|
|
var action;
|
|
|
|
if (this.isDisabled) {
|
|
return;
|
|
}
|
|
|
|
if (touches) {
|
|
touchesLength = touches.length;
|
|
|
|
if (touchesLength > 1) {
|
|
if (options.zoomable && options.zoomOnTouch && touchesLength === 2) {
|
|
e = touches[1];
|
|
this.startX2 = e.pageX;
|
|
this.startY2 = e.pageY;
|
|
action = ACTION_ZOOM;
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
e = touches[0];
|
|
}
|
|
|
|
action = action || $(e.target).data(DATA_ACTION);
|
|
|
|
if (REGEXP_ACTIONS.test(action)) {
|
|
if (this.trigger(EVENT_CROP_START, {
|
|
originalEvent: originalEvent,
|
|
action: action
|
|
}).isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
this.action = action;
|
|
this.cropping = false;
|
|
|
|
// IE8 has `event.pageX/Y`, but not `event.originalEvent.pageX/Y`
|
|
// IE10 has `event.originalEvent.pageX/Y`, but not `event.pageX/Y`
|
|
this.startX = e.pageX || originalEvent && originalEvent.pageX;
|
|
this.startY = e.pageY || originalEvent && originalEvent.pageY;
|
|
|
|
if (action === ACTION_CROP) {
|
|
this.cropping = true;
|
|
this.$dragBox.addClass(CLASS_MODAL);
|
|
}
|
|
}
|
|
},
|
|
|
|
cropMove: function (event) {
|
|
var options = this.options;
|
|
var originalEvent = event.originalEvent;
|
|
var touches = originalEvent && originalEvent.touches;
|
|
var e = event;
|
|
var action = this.action;
|
|
var touchesLength;
|
|
|
|
if (this.isDisabled) {
|
|
return;
|
|
}
|
|
|
|
if (touches) {
|
|
touchesLength = touches.length;
|
|
|
|
if (touchesLength > 1) {
|
|
if (options.zoomable && options.zoomOnTouch && touchesLength === 2) {
|
|
e = touches[1];
|
|
this.endX2 = e.pageX;
|
|
this.endY2 = e.pageY;
|
|
} else {
|
|
return;
|
|
}
|
|
}
|
|
|
|
e = touches[0];
|
|
}
|
|
|
|
if (action) {
|
|
if (this.trigger(EVENT_CROP_MOVE, {
|
|
originalEvent: originalEvent,
|
|
action: action
|
|
}).isDefaultPrevented()) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
this.endX = e.pageX || originalEvent && originalEvent.pageX;
|
|
this.endY = e.pageY || originalEvent && originalEvent.pageY;
|
|
|
|
this.change(e.shiftKey, action === ACTION_ZOOM ? event : null);
|
|
}
|
|
},
|
|
|
|
cropEnd: function (event) {
|
|
var originalEvent = event.originalEvent;
|
|
var action = this.action;
|
|
|
|
if (this.isDisabled) {
|
|
return;
|
|
}
|
|
|
|
if (action) {
|
|
event.preventDefault();
|
|
|
|
if (this.cropping) {
|
|
this.cropping = false;
|
|
this.$dragBox.toggleClass(CLASS_MODAL, this.isCropped && this.options.modal);
|
|
}
|
|
|
|
this.action = '';
|
|
|
|
this.trigger(EVENT_CROP_END, {
|
|
originalEvent: originalEvent,
|
|
action: action
|
|
});
|
|
}
|
|
},
|