diff --git a/src/js/includes/Canvas.js b/src/js/includes/Canvas.js index d4928de..496d89b 100644 --- a/src/js/includes/Canvas.js +++ b/src/js/includes/Canvas.js @@ -35,7 +35,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { // 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().__cropped && !this.get3dHandler().isEnabled()) { + if (this.getImage().__dragged && !this.get3dHandler().isEnabled()) { this.getApertures().setTransparent(false); this.getImageData().setCropData(); @@ -196,6 +196,8 @@ var Canvas = fabric.util.createClass(fabric.Canvas, { setImage: function (img) { this.removeImage(); this.__image = img; + this.__image.__dragged = false; + this.__image.__cropped = false; this.__image.addTo(this).center().on('mousedown', function () { img.canvas.getApertures().setTransparent(true); }).setCoords(); diff --git a/src/js/includes/Draggable.js b/src/js/includes/Draggable.js index a303640..f78ac90 100644 --- a/src/js/includes/Draggable.js +++ b/src/js/includes/Draggable.js @@ -13,7 +13,7 @@ function Draggable(img, boundingRect) { * Triggers when object is moved */ function onMove() { - this.__cropped = true; + this.__dragged = true; this.canvas.disableScroll(); diff --git a/src/js/includes/ImageEditor.js b/src/js/includes/ImageEditor.js index 56bace4..6e954ca 100644 --- a/src/js/includes/ImageEditor.js +++ b/src/js/includes/ImageEditor.js @@ -81,9 +81,22 @@ function ImageEditor(canvasId, args) { * @return {ImageEditor} */ this.crop = function (width, height, units) { - _canvas.getImage().__cropped = false; + _canvas.getImageData().removeCropData(); + _canvas.getViewport().set(width, height, units); + + var shouldBeCropped = util.isAspectChanged(_canvas.getImage().width, _canvas.getImage().height, width, height); + + if (shouldBeCropped) { + _canvas.getImage().__dragged = false; + _canvas.getImage().__cropped = true; + _canvas.getImageData().setCropData(); + } + else { + _canvas.getImage().__cropped = false; + } + return this; }; diff --git a/src/js/includes/Viewport.js b/src/js/includes/Viewport.js index 4ea8acc..a636ce7 100644 --- a/src/js/includes/Viewport.js +++ b/src/js/includes/Viewport.js @@ -135,7 +135,7 @@ function Viewport(canvas) { _data = util.calcCrop(canvas.getImage(), width, height, units); - var keepCropping = (oldData && (Math.abs(oldData.dim.width / oldData.dim.height - width / height) <= 0.01)); + var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height)); if (keepCropping) { canvas.getImageData().setCropData(); } @@ -144,9 +144,8 @@ function Viewport(canvas) { this.getGores().reset(); this.getRulers().reset(); - if (!canvas.getImage().__cropped && !keepCropping) { + if (canvas.getImage().__cropped && !keepCropping) { canvas.getApertures().setTransparent(true); - canvas.getImageData().removeCropData(); // Trigger event to tell the image needs to be dragged. $(document).trigger('PIE:needs-dragging', { axis: _data.axis }); diff --git a/src/js/includes/util.js b/src/js/includes/util.js index 02d0e2a..b47d640 100644 --- a/src/js/includes/util.js +++ b/src/js/includes/util.js @@ -12,5 +12,5 @@ module.exports = { MouseMetrics: require('./utils/mouse-metrics'), supportsFullscreen: require('./utils/supports-fullscreen'), isFullscreen: require('./utils/is-fullscreen'), - + isAspectChanged: require('./utils/is-aspect-changed'), }; diff --git a/src/js/includes/utils/is-aspect-changed.js b/src/js/includes/utils/is-aspect-changed.js new file mode 100644 index 0000000..e8b41c3 --- /dev/null +++ b/src/js/includes/utils/is-aspect-changed.js @@ -0,0 +1,7 @@ +'use strict'; + +function isAspectChanged(x1, y1, x2, y2) { + return (Math.abs(x1 / y1 - x2 / y2) > 0.01); +} + +module.exports = isAspectChanged;