Updated image editor with not having to crop again after resizing

src/js/components/ImageEditor/Viewport.js

@@ -16,6 +16,7 @@ function Viewport(canvas) {
      * Applies viewport to page
      */
     function apply() {
+        var croppedData = getCroppedData();
         canvas.remove(_rect);
 
         _rect = new fabric.Rect({
@@ -31,9 +32,18 @@ function Viewport(canvas) {
         _rect.height += _borderWidth;
         _rect.addTo(canvas).center().setCoords();
 
-        canvas.getImage()
-            .center()
-            .drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()));
+        if (croppedData) {
+            // Calculate the new position after screenresize and when the
+            // image already has been cropped to a certain position.
+            var left = _rect.left + _borderWidth - (canvas.getImage().width * croppedData.x);
+            var top = _rect.top + _borderWidth - (canvas.getImage().height * croppedData.y);
+
+            canvas.getImage().set({ left: left, top: top }).setCoords();
+        } else {
+            canvas.getImage().center().setCoords();
+        }
+
+        canvas.getImage().drag.enable(calcMinMaxBoundsForRect(_rect.getInsideBoundingRect(), canvas.getImage()))
         canvas.getApertures().apply(_data.axis, _rect.getBoundingRect());
 
         if (canvas.__type !== 'canvas') {
@@ -49,6 +59,9 @@ function Viewport(canvas) {
         canvas.refresh3dView();
     }
 
+    function getCroppedData() {
+        return canvas.getImage().__cropped ? canvas.getImage().transformation.getCropData() : null;
+    }
 
     /**
      * Render the diagonal lines from viewport to edge of the canvas
@@ -126,12 +139,17 @@ function Viewport(canvas) {
         apply();
         this.getGores().reset();
         this.getRulers().reset();
-        canvas.getApertures().setTransparent(true);
-        canvas.getImage().__moved = false;
-        canvas.getButtonMenu().bringToFront();
 
-        // Trigger event to tell the image needs to be dragged.
-        $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
+        if (canvas.getImage().__cropped) {
+
+        } else {
+            canvas.getApertures().setTransparent(true);
+
+            // Trigger event to tell the image needs to be dragged.
+            $(document).trigger('PIE:needs-dragging', { axis: _data.axis });
+        }
+
+        canvas.getButtonMenu().bringToFront();
 
     };