From d8278f8943c8880d9f25f74f21449333a5ad2d05 Mon Sep 17 00:00:00 2001 From: Anders Gustafsson Date: Fri, 1 Jun 2018 13:36:40 +0200 Subject: [PATCH] P5-2435 - Usability fixes for cropping hint --- dist/image-editor.js | 61 +++++++++++++++++++++++++------------------- src/Canvas.js | 16 ------------ src/Draggable.js | 45 ++++++++++++++++++++++++-------- 3 files changed, 70 insertions(+), 52 deletions(-) diff --git a/dist/image-editor.js b/dist/image-editor.js index 9a6e047..e7cc55a 100644 --- a/dist/image-editor.js +++ b/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') { - _bounds.top.min = _bounds.top.max = img.top; + if (_img.canvas.getViewport().getData().axis === 'x') { + _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.selectable = true; - img.hoverCursor = 'move'; + _img.lockMovementX = _img.lockMovementY = false; + _img.selectable = true; + _img.hoverCursor = 'move'; return this; }; } diff --git a/src/Canvas.js b/src/Canvas.js index bd3eeda..6731b1a 100644 --- a/src/Canvas.js +++ b/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) { diff --git a/src/Draggable.js b/src/Draggable.js index 62daf53..6d0a91f 100644 --- a/src/Draggable.js +++ b/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') { - _bounds.top.min = _bounds.top.max = img.top; + if (_img.canvas.getViewport().getData().axis === 'x') { + _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.selectable = true; - img.hoverCursor = 'move'; + _img.lockMovementX = _img.lockMovementY = false; + _img.selectable = true; + _img.hoverCursor = 'move'; return this; }; }