photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

P5-2435 - Usability fixes for cropping hint

Browse Source
This commit is contained in:
Anders Gustafsson
2018-06-01 13:36:40 +02:00
parent 2a02a255da
commit d8278f8943
3 changed files with 70 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/image-editor.js
Vendored
+35 -26
View File
@@ -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;
};
}
src/Canvas.js
-16
View File
@@ -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
+35 -10
View File
@@ -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;
};
}