aboutsummaryrefslogtreecommitdiffstats
path: root/library/cropperjs/src/js/handlers.js
diff options
context:
space:
mode:
Diffstat (limited to 'library/cropperjs/src/js/handlers.js')
-rw-r--r--library/cropperjs/src/js/handlers.js212
1 files changed, 212 insertions, 0 deletions
diff --git a/library/cropperjs/src/js/handlers.js b/library/cropperjs/src/js/handlers.js
new file mode 100644
index 000000000..7b7b2469a
--- /dev/null
+++ b/library/cropperjs/src/js/handlers.js
@@ -0,0 +1,212 @@
+import {
+ ACTION_CROP,
+ ACTION_ZOOM,
+ CLASS_CROP,
+ CLASS_MODAL,
+ DATA_ACTION,
+ DRAG_MODE_CROP,
+ DRAG_MODE_MOVE,
+ DRAG_MODE_NONE,
+ EVENT_CROP_END,
+ EVENT_CROP_MOVE,
+ EVENT_CROP_START,
+ REGEXP_ACTIONS,
+} from './constants';
+import {
+ addClass,
+ dispatchEvent,
+ each,
+ extend,
+ getData,
+ getPointer,
+ hasClass,
+ toggleClass,
+} from './utilities';
+
+export default {
+ resize() {
+ const { options, container, containerData } = this;
+ const minContainerWidth = Number(options.minContainerWidth) || 200;
+ const minContainerHeight = Number(options.minContainerHeight) || 100;
+
+ if (this.disabled || containerData.width <= minContainerWidth ||
+ containerData.height <= minContainerHeight) {
+ return;
+ }
+
+ const ratio = container.offsetWidth / containerData.width;
+
+ // Resize when width changed or height changed
+ if (ratio !== 1 || container.offsetHeight !== containerData.height) {
+ let canvasData;
+ let cropBoxData;
+
+ if (options.restore) {
+ canvasData = this.getCanvasData();
+ cropBoxData = this.getCropBoxData();
+ }
+
+ this.render();
+
+ if (options.restore) {
+ this.setCanvasData(each(canvasData, (n, i) => {
+ canvasData[i] = n * ratio;
+ }));
+ this.setCropBoxData(each(cropBoxData, (n, i) => {
+ cropBoxData[i] = n * ratio;
+ }));
+ }
+ }
+ },
+
+ dblclick() {
+ if (this.disabled || this.options.dragMode === DRAG_MODE_NONE) {
+ return;
+ }
+
+ this.setDragMode(hasClass(this.dragBox, CLASS_CROP) ? DRAG_MODE_MOVE : DRAG_MODE_CROP);
+ },
+
+ wheel(e) {
+ const ratio = Number(this.options.wheelZoomRatio) || 0.1;
+ let delta = 1;
+
+ if (this.disabled) {
+ return;
+ }
+
+ e.preventDefault();
+
+ // Limit wheel speed to prevent zoom too fast (#21)
+ if (this.wheeling) {
+ return;
+ }
+
+ this.wheeling = true;
+
+ setTimeout(() => {
+ this.wheeling = false;
+ }, 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, e);
+ },
+
+ cropStart(e) {
+ if (this.disabled) {
+ return;
+ }
+
+ const { options, pointers } = this;
+ let action;
+
+ if (e.changedTouches) {
+ // Handle touch event
+ each(e.changedTouches, (touch) => {
+ pointers[touch.identifier] = getPointer(touch);
+ });
+ } else {
+ // Handle mouse event and pointer event
+ pointers[e.pointerId || 0] = getPointer(e);
+ }
+
+ if (Object.keys(pointers).length > 1 && options.zoomable && options.zoomOnTouch) {
+ action = ACTION_ZOOM;
+ } else {
+ action = getData(e.target, DATA_ACTION);
+ }
+
+ if (!REGEXP_ACTIONS.test(action)) {
+ return;
+ }
+
+ if (dispatchEvent(this.element, EVENT_CROP_START, {
+ originalEvent: e,
+ action,
+ }) === false) {
+ return;
+ }
+
+ e.preventDefault();
+
+ this.action = action;
+ this.cropping = false;
+
+ if (action === ACTION_CROP) {
+ this.cropping = true;
+ addClass(this.dragBox, CLASS_MODAL);
+ }
+ },
+
+ cropMove(e) {
+ const { action } = this;
+
+ if (this.disabled || !action) {
+ return;
+ }
+
+ const { pointers } = this;
+
+ e.preventDefault();
+
+ if (dispatchEvent(this.element, EVENT_CROP_MOVE, {
+ originalEvent: e,
+ action,
+ }) === false) {
+ return;
+ }
+
+ if (e.changedTouches) {
+ each(e.changedTouches, (touch) => {
+ extend(pointers[touch.identifier], getPointer(touch, true));
+ });
+ } else {
+ extend(pointers[e.pointerId || 0], getPointer(e, true));
+ }
+
+ this.change(e);
+ },
+
+ cropEnd(e) {
+ if (this.disabled) {
+ return;
+ }
+
+ const { action, pointers } = this;
+
+ if (e.changedTouches) {
+ each(e.changedTouches, (touch) => {
+ delete pointers[touch.identifier];
+ });
+ } else {
+ delete pointers[e.pointerId || 0];
+ }
+
+ if (!action) {
+ return;
+ }
+
+ e.preventDefault();
+
+ if (!Object.keys(pointers).length) {
+ this.action = '';
+ }
+
+ if (this.cropping) {
+ this.cropping = false;
+ toggleClass(this.dragBox, CLASS_MODAL, this.cropped && this.options.modal);
+ }
+
+ dispatchEvent(this.element, EVENT_CROP_END, {
+ originalEvent: e,
+ action,
+ });
+ },
+};