diff --git a/src/js/includes/Canvas.js b/src/js/includes/Canvas.js index fe3c5b8..56637c8 100644 --- a/src/js/includes/Canvas.js +++ b/src/js/includes/Canvas.js @@ -22,6 +22,8 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.callSuper('initialize', id, { enableRetinaScaling: true, renderOnAddRemove: false, + // Allow touch scrolling on touch-devices larger than mobile screen sizes. + allowTouchScrolling: !util.isMobile(), stateful: false, backgroundColor: '#d2d2d2', preserveObjectStacking: true, @@ -37,6 +39,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.getApertures().setTransparent(false); this.getImageData().setCropData(); + if (!util.isMobile()) { + this.enableScroll(); + } // Trigger event to tell the image has been dragged. $document.trigger('PIE:dragged'); } @@ -61,6 +66,20 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { this.renderAll(); }, + disableScroll: function() { + this.set({ + allowTouchScrolling: false + }); + return this; + }, + + enableScroll: function() { + this.set({ + allowTouchScrolling: true + }); + return this; + }, + get3dHandler: function () { return this.__3dHandler || (this.__3dHandler = new ThreeDHandler(this)); diff --git a/src/js/includes/DragHandle.js b/src/js/includes/DragHandle.js index aed7dbf..35e8e5e 100644 --- a/src/js/includes/DragHandle.js +++ b/src/js/includes/DragHandle.js @@ -1,6 +1,7 @@ 'use strict'; var config = require('./config'); +var util = require('./util'); var DragHandle = function (handler) { var _currentAxis; @@ -27,6 +28,7 @@ var DragHandle = function (handler) { _dragHandle = false; _movedHandle = false; _currentAxis = null; + util.MouseMetrics.deletePreviousMouseData(); handler.canvas.getImage().trigger('mouseup'); }, mouseMove: function (e) { @@ -34,12 +36,20 @@ var DragHandle = function (handler) { return; } + // We're using a polyfill to calculate moude/touch movement if the browser/device + // does not support movementX/movementY. + var previousMouseData = util.MouseMetrics.previousMouseData; + var movement = { + x: 'movementX' in e.e ? e.e.movementX : (previousMouseData.x ? e.e.pageX - previousMouseData.x : 0), + y: 'movementY' in e.e ? e.e.movementY : (previousMouseData.y ? e.e.pageY - previousMouseData.y : 0) + }; + util.MouseMetrics.setPreviousMouseData({x: e.e.pageX, y: e.e.pageY}); _movedHandle = true; if (_currentAxis === 'x') { - handler.canvas.getImage().left -= e.e.movementX; + handler.canvas.getImage().left -= movement.x; } else { - handler.canvas.getImage().top -= e.e.movementY; + handler.canvas.getImage().top -= movement.y; } // Trigger moving for image, to stay within bounds handler.canvas.getImage().setCoords().trigger('moving'); diff --git a/src/js/includes/Draggable.js b/src/js/includes/Draggable.js index 8a110f0..a303640 100644 --- a/src/js/includes/Draggable.js +++ b/src/js/includes/Draggable.js @@ -15,6 +15,8 @@ function Draggable(img, boundingRect) { function onMove() { this.__cropped = true; + this.canvas.disableScroll(); + util.setPositionInside(this, _bounds); } diff --git a/src/js/includes/util.js b/src/js/includes/util.js index 3d8b3e6..02d0e2a 100644 --- a/src/js/includes/util.js +++ b/src/js/includes/util.js @@ -9,6 +9,7 @@ module.exports = { setProperties: require('./utils/set-properties'), toggleFullscreen: require('./utils/toggle-fullscreen'), isMobile: require('./utils/is-mobile'), + MouseMetrics: require('./utils/mouse-metrics'), supportsFullscreen: require('./utils/supports-fullscreen'), isFullscreen: require('./utils/is-fullscreen'), diff --git a/src/js/includes/utils/mouse-metrics.js b/src/js/includes/utils/mouse-metrics.js new file mode 100644 index 0000000..04659f6 --- /dev/null +++ b/src/js/includes/utils/mouse-metrics.js @@ -0,0 +1,24 @@ +'use strict'; + +var MouseMetrics = { + previousMouseData: { + x: null, + y: null + }, + + deletePreviousMouseData: function() { + MouseMetrics.previousMouseData = { + x: null, + y: null + }; + }, + + setPreviousMouseData: function(values) { + MouseMetrics.previousMouseData = { + x: values.x || null, + y: values.y || null, + }; + }, +}; + +module.exports = MouseMetrics;