P5-1402 touch functionality

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));

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');

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);
     }
 

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'),
 

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;