Fixed issues with getting cropData. Now using sessionStorage

src/js/components/ImageEditor/Canvas.js

@@ -26,6 +26,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
             if (this.getImage().__cropped && !this.get3dHandler().isEnabled()) {
                 this.getApertures().setTransparent(false);
 
+                this.getImage().transformation.setCropData();
                 // Trigger event to tell the image has been dragged.
                 $document.trigger('PIE:dragged');
             }
@@ -57,17 +58,17 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
      * @return {String}
      */
     get3dUrl: function () {
-        var cropData = this.getImage().transformation.getData();
+        var imageData = this.getImage().transformation.getData();
         var params = [
             'h=400',
-            'canvas[edge]=' + cropData.edge,
+            'canvas[edge]=' + imageData.edge,
-            'crop[w]=' + cropData.width,
+            'crop[w]=' + imageData.width,
-            'crop[h]=' + cropData.height,
+            'crop[h]=' + imageData.height,
-            'crop[x]=' + cropData.x,
+            'crop[x]=' + imageData.x,
-            'crop[y]=' + cropData.y,
+            'crop[y]=' + imageData.y,
         ];
 
-        if (cropData.mirrored) {
+        if (imageData.mirrored) {
             params.push('mirror=1');
         }
 
@@ -137,12 +138,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
     },
 
     refreshImage: function(img) {
-        this.removeImage();
         this.__image = img;
-        this.__image.addTo(this).on('mousedown', function () {
-            img.canvas.getApertures().setTransparent(true);
-        }).setCoords();
-        this.getViewport().reset();
         return this;
     },
 

src/js/components/ImageEditor/ImageTransformationHandler.js

@@ -10,14 +10,24 @@ function ImageTransformationHandler(img) {
      * @return {Object}
      */
     this.getCropData = function () {
+        return JSON.parse(sessionStorage.getItem('cropData'));
+    };
+
+    this.setCropData = function() {
         var viewportBounds = img.canvas.getViewport().getBounds();
         var dragAxis = img.canvas.getViewport().getData().axis;
 
-        return {
+        var cropData = {
-            x: dragAxis === 'h' ? (viewportBounds.left - img.left) / img.width : 0,
+            x: dragAxis === 'h' ? (viewportBounds.left - img.left) / (img.width * img.scaleX) : 0,
-            y: dragAxis === 'v' ? (viewportBounds.top - img.top) / img.height : 0,
+            y: dragAxis === 'v' ? (viewportBounds.top - img.top) / (img.height * img.scaleY) : 0,
-        };
+        }
-    };
+
+        sessionStorage.setItem('cropData', JSON.stringify(cropData));
+    }
+
+    this.removeCropData = function() {
+        sessionStorage.removeItem('cropData');
+    }
 
     /**
      * Gets an object containing applied transformations for the Image and also

src/js/components/ImageEditor/Viewport.js

@@ -16,7 +16,7 @@ function Viewport(canvas) {
      * Applies viewport to page
      */
     function apply() {
-        var croppedData = getCroppedData();
+        var cropData = canvas.getImage().transformation.getCropData();
         canvas.remove(_rect);
 
         _rect = new fabric.Rect({
@@ -32,11 +32,11 @@ function Viewport(canvas) {
         _rect.height += _borderWidth;
         _rect.addTo(canvas).center().setCoords();
 
-        if (croppedData) {
+        if (cropData) {
             // 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 * croppedData.x);
+            var left = _rect.left + _rect.strokeWidth - (canvas.getImage().width * canvas.getImage().scaleX * cropData.x);
-            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * croppedData.y);
+            var top = _rect.top + _rect.strokeWidth - (canvas.getImage().height * canvas.getImage().scaleY * cropData.y);
 
             canvas.getImage().set({ left: left, top: top }).setCoords();
         } else {
@@ -58,10 +58,6 @@ function Viewport(canvas) {
         _rect.bringToFront();
     }
 
-    function getCroppedData() {
-        return canvas.getImage().__cropped ? canvas.getImage().transformation.getCropData() : null;
-    }
-
     /**
      * Render the diagonal lines from viewport to edge of the canvas
      */
@@ -143,6 +139,7 @@ function Viewport(canvas) {
 
         } else {
             canvas.getApertures().setTransparent(true);
+            canvas.getImage().transformation.removeCropData();
 
             // Trigger event to tell the image needs to be dragged.
             $(document).trigger('PIE:needs-dragging', { axis: _data.axis });