P5-2435 - Usability fixes for cropping hint

dist/image-editor.js

@@ -397,22 +397,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             width: dimensions.width,
             height: dimensions.height
         });
-
-        // Eventhandler for mouseup events on the whole canvas.
-        // This should be rewritten a bit to not have that many events after the image has been cropped.
-        this.on('mouse:up', function () {
-            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
-                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');
-            }
-            this.renderAll();
-        });
     },
 
     resize: function (args) {
@@ -884,7 +868,7 @@ module.exports = DragbarHandler;
 
 },{"./DragHandle":5,"./config":16}],7:[function(require,module,exports){
 'use strict';
-
+/* globals $ */
 var util = require('./util');
 
 /**
@@ -893,21 +877,46 @@ var util = require('./util');
  */
 function Draggable(img, boundingRect) {
     var _bounds = boundingRect;
+    var _img = img;
 
     /**
      * Triggers when object is moved
      */
     function onMove() {
         /*jshint validthis: true */
-        this.__dragged = true;
+        if (!this.__dragging) {
-
+            //Trigger start-drag on first 'moving' trigger.
+            $(document).trigger('PIE:start-drag');
+            this.__dragging = true;
+        }
         this.canvas.disableScroll();
 
         util.setPositionInside(this, _bounds);
     }
 
+    this.onMouseUp = function () {
+        if (this.__dragging) {
+            this.__dragged = true;
+            this.__dragging = false;
+            this.canvas.getImageData().setCropData();
+            if (!util.isMobile()) {
+                this.canvas.enableScroll();
+            }
+            // Trigger event to tell the image has been dragged.
+            $(document).trigger('PIE:dragged');
+        }
+        if (this.__dragged) {
+            // Always set aperture transparency to false even if image hasn't been dragged this click.
+            this.canvas.getApertures().setTransparent(false);
+        }
+        this.canvas.renderAll();
+    };
+
     // Attach onMove event to image
-    img.on('moving', onMove);
+    _img.on('moving', onMove);
+
+    // Attach mouse up event to canvas, can't do mouse up events on canvas objects.
+    _img.canvas.on('mouse:up', this.onMouseUp.bind(_img));
 
     /**
      * @param  {fabric.Rect} localBoundingRect
@@ -919,15 +928,15 @@ function Draggable(img, boundingRect) {
         }
 
         // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
-        if (img.canvas.getViewport().getData().axis === 'x') {
+        if (_img.canvas.getViewport().getData().axis === 'x') {
-            _bounds.top.min = _bounds.top.max = img.top;
+            _bounds.top.min = _bounds.top.max = _img.top;
         } else {
-            _bounds.left.min = _bounds.left.max = img.left;
+            _bounds.left.min = _bounds.left.max = _img.left;
         }
 
-        img.lockMovementX = img.lockMovementY = false;
+        _img.lockMovementX = _img.lockMovementY = false;
-        img.selectable = true;
+        _img.selectable = true;
-        img.hoverCursor = 'move';
+        _img.hoverCursor = 'move';
         return this;
     };
 }

src/Canvas.js

@@ -32,22 +32,6 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             width: dimensions.width,
             height: dimensions.height
         });
-
-        // Eventhandler for mouseup events on the whole canvas.
-        // This should be rewritten a bit to not have that many events after the image has been cropped.
-        this.on('mouse:up', function () {
-            if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) {
-                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');
-            }
-            this.renderAll();
-        });
     },
 
     resize: function (args) {

src/Draggable.js

@@ -1,5 +1,5 @@
 'use strict';
-
+/* globals $ */
 var util = require('./util');
 
 /**
@@ -8,21 +8,46 @@ var util = require('./util');
  */
 function Draggable(img, boundingRect) {
     var _bounds = boundingRect;
+    var _img = img;
 
     /**
      * Triggers when object is moved
      */
     function onMove() {
         /*jshint validthis: true */
-        this.__dragged = true;
+        if (!this.__dragging) {
-
+            //Trigger start-drag on first 'moving' trigger.
+            $(document).trigger('PIE:start-drag');
+            this.__dragging = true;
+        }
         this.canvas.disableScroll();
 
         util.setPositionInside(this, _bounds);
     }
 
+    this.onMouseUp = function () {
+        if (this.__dragging) {
+            this.__dragged = true;
+            this.__dragging = false;
+            this.canvas.getImageData().setCropData();
+            if (!util.isMobile()) {
+                this.canvas.enableScroll();
+            }
+            // Trigger event to tell the image has been dragged.
+            $(document).trigger('PIE:dragged');
+        }
+        if (this.__dragged) {
+            // Always set aperture transparency to false even if image hasn't been dragged this click.
+            this.canvas.getApertures().setTransparent(false);
+        }
+        this.canvas.renderAll();
+    };
+
     // Attach onMove event to image
-    img.on('moving', onMove);
+    _img.on('moving', onMove);
+
+    // Attach mouse up event to canvas, can't do mouse up events on canvas objects.
+    _img.canvas.on('mouse:up', this.onMouseUp.bind(_img));
 
     /**
      * @param  {fabric.Rect} localBoundingRect
@@ -34,15 +59,15 @@ function Draggable(img, boundingRect) {
         }
 
         // @TODO Refactor this, see Viewport.calcMinMaxBoundsForRect
-        if (img.canvas.getViewport().getData().axis === 'x') {
+        if (_img.canvas.getViewport().getData().axis === 'x') {
-            _bounds.top.min = _bounds.top.max = img.top;
+            _bounds.top.min = _bounds.top.max = _img.top;
         } else {
-            _bounds.left.min = _bounds.left.max = img.left;
+            _bounds.left.min = _bounds.left.max = _img.left;
         }
 
-        img.lockMovementX = img.lockMovementY = false;
+        _img.lockMovementX = _img.lockMovementY = false;
-        img.selectable = true;
+        _img.selectable = true;
-        img.hoverCursor = 'move';
+        _img.hoverCursor = 'move';
         return this;
     };
 }