P5-1511: Fix for losing image position after navigating back in browser

dist/image-editor.js

@@ -411,6 +411,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
 
     resize: function (args) {
         args = args || { height: this.height, width: this.width};
+        if (!args.width || !args.height) {
+            return;
+        }
 
         this.setHeight(args.height);
         this.setWidth(args.width);
@@ -1147,11 +1150,17 @@ function ImageDataHandler(img) {
 
     this.setCropData = function() {
         var viewportBounds = img.canvas.getViewport().getBounds();
+        if (!viewportBounds) {
+            return;
+        }
+
         var dragAxis = img.canvas.getViewport().getData().axis;
 
         _cropData = {
             x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
             y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
+            viewportWidth: viewportBounds.width,
+            viewportHeight: viewportBounds.height,
         };
     };
 
@@ -1284,17 +1293,17 @@ function ImageEditor(canvasId, args) {
      * @return {ImageEditor}
      */
     this.crop = function (width, height, unit) {
-        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
+        if (!width || !height) {
-        _canvas.getImageData().removeCropData();
+            return this;
+        }
 
+        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
         _canvas.getViewport().set(width, height, unit);
 
         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;
@@ -1720,14 +1729,17 @@ function Viewport(canvas) {
         _rect.addTo(canvas).center().setCoords();
 
         if (cropData) {
+            var viewportBounds = _rect.getInsideBoundingRect();
+
             // Calculate the new position after screenresize and when the
             // image already has been cropped to a certain position.
-            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
+            var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
+            var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
 
             canvas.getImage().set({ left: left, top: top }).setCoords();
         } else {
             canvas.getImage().center().setCoords();
+            canvas.getImageData().setCropData();
         }
 
         canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
@@ -1748,7 +1760,7 @@ function Viewport(canvas) {
     this.canvas = canvas;
 
     this.getBounds = function () {
-        return _rect.getInsideBoundingRect();
+        return _rect ? _rect.getInsideBoundingRect() : null;
     };
 
     /**
@@ -1768,20 +1780,24 @@ function Viewport(canvas) {
      * @return {Viewport}
      */
     this.set = function (width, height, units) {
-        var oldData = _data;
+        if (!width || !height) {
+            return this;
+        }
 
         _data = util.calcCrop(canvas.getImage(), width, height, units);
 
-        var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height));
+        var cropData = canvas.getImageData().getCropData();
-        if (keepCropping) {
+        var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
-            canvas.getImageData().setCropData();
+
+        if (!isAspectTheSame) {
+            canvas.getImageData().removeCropData();
         }
 
         apply();
         this.getGores().reset();
         this.getRulers().reset();
 
-        if (canvas.getImage().__cropped && !keepCropping) {
+        if (canvas.getImage().__cropped && !isAspectTheSame) {
             canvas.getApertures().setTransparent(true);
 
             // Trigger event to tell the image needs to be dragged.
@@ -1790,6 +1806,7 @@ function Viewport(canvas) {
 
         canvas.getButtonMenu().bringToFront();
 
+        return this;
     };
 
     /**
@@ -2214,7 +2231,7 @@ module.exports = calcCrop;
 'use strict';
 
 function isAspectChanged(x1, y1, x2, y2) {
-    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
+    return (Math.abs(x1 / y1 - x2 / y2) > 0.005);
 }
 
 module.exports = isAspectChanged;

src/Canvas.js

@@ -52,6 +52,9 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
 
     resize: function (args) {
         args = args || { height: this.height, width: this.width};
+        if (!args.width || !args.height) {
+            return;
+        }
 
         this.setHeight(args.height);
         this.setWidth(args.width);

src/ImageDataHandler.js

@@ -15,11 +15,17 @@ function ImageDataHandler(img) {
 
     this.setCropData = function() {
         var viewportBounds = img.canvas.getViewport().getBounds();
+        if (!viewportBounds) {
+            return;
+        }
+
         var dragAxis = img.canvas.getViewport().getData().axis;
 
         _cropData = {
             x: dragAxis === 'x' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
             y: dragAxis === 'y' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
+            viewportWidth: viewportBounds.width,
+            viewportHeight: viewportBounds.height,
         };
     };
 

src/ImageEditor.js

@@ -92,17 +92,17 @@ function ImageEditor(canvasId, args) {
      * @return {ImageEditor}
      */
     this.crop = function (width, height, unit) {
-        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
+        if (!width || !height) {
-        _canvas.getImageData().removeCropData();
+            return this;
+        }
 
+        unit = typeof unit !== 'undefined' ? unit : _settings.unit;
         _canvas.getViewport().set(width, height, unit);
 
         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;

src/Viewport.js

@@ -84,14 +84,17 @@ function Viewport(canvas) {
         _rect.addTo(canvas).center().setCoords();
 
         if (cropData) {
+            var viewportBounds = _rect.getInsideBoundingRect();
+
             // Calculate the new position after screenresize and when the
             // image already has been cropped to a certain position.
-            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
+            var left = viewportBounds.left - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
+            var top = viewportBounds.top - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
 
             canvas.getImage().set({ left: left, top: top }).setCoords();
         } else {
             canvas.getImage().center().setCoords();
+            canvas.getImageData().setCropData();
         }
 
         canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
@@ -112,7 +115,7 @@ function Viewport(canvas) {
     this.canvas = canvas;
 
     this.getBounds = function () {
-        return _rect.getInsideBoundingRect();
+        return _rect ? _rect.getInsideBoundingRect() : null;
     };
 
     /**
@@ -132,20 +135,24 @@ function Viewport(canvas) {
      * @return {Viewport}
      */
     this.set = function (width, height, units) {
-        var oldData = _data;
+        if (!width || !height) {
+            return this;
+        }
 
         _data = util.calcCrop(canvas.getImage(), width, height, units);
 
-        var keepCropping = (oldData && !util.isAspectChanged(oldData.dim.width, oldData.dim.height, width, height));
+        var cropData = canvas.getImageData().getCropData();
-        if (keepCropping) {
+        var isAspectTheSame = !!(cropData && !util.isAspectChanged(cropData.viewportWidth, cropData.viewportHeight, width, height));
-            canvas.getImageData().setCropData();
+
+        if (!isAspectTheSame) {
+            canvas.getImageData().removeCropData();
         }
 
         apply();
         this.getGores().reset();
         this.getRulers().reset();
 
-        if (canvas.getImage().__cropped && !keepCropping) {
+        if (canvas.getImage().__cropped && !isAspectTheSame) {
             canvas.getApertures().setTransparent(true);
 
             // Trigger event to tell the image needs to be dragged.
@@ -154,6 +161,7 @@ function Viewport(canvas) {
 
         canvas.getButtonMenu().bringToFront();
 
+        return this;
     };
 
     /**

src/utils/is-aspect-changed.js

@@ -1,7 +1,7 @@
 'use strict';
 
 function isAspectChanged(x1, y1, x2, y2) {
-    return (Math.abs(x1 / y1 - x2 / y2) > 0.01);
+    return (Math.abs(x1 / y1 - x2 / y2) > 0.005);
 }
 
 module.exports = isAspectChanged;