P5-1499. 3D view selects wrong part of the image after resizing and going into 3D mode without re-cropping

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

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

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

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

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

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;