Fixed resizing of screen without making new requests to image-server

src/js/components/ImageEditor/3dHandler.js

@@ -52,6 +52,40 @@ function ThreeDHandler(canvas) {
         return _overlay.visible;
     };
 
+    this.getResizedImage = function(img) {
+        // Calculate maxHeight and maxWidth of the 3d image
+        // and scale the image accoring to those values
+        var maxHeight = canvas.getHeight() - 100;
+        var maxWidth = canvas.getWidth() - 100;
+        
+        img.scaleX = img.scaleY = 1;
+
+        if (maxHeight < img.height) {
+            img.scaleToHeight(maxHeight);
+        }
+        if (maxWidth < (img.width * img.scaleX)) {
+            img.scaleToWidth(maxWidth);
+        }
+
+        return img;
+    };
+
+    this.refreshImage = function() {
+        _overlay.set({
+            width: canvas.width,
+        });
+
+        this.applyImage();
+    };
+
+    this.applyImage = function(img) {
+        img = img || _image;
+
+        _overlay
+            .remove(_image)
+            .add(_image = this.getResizedImage(img));
+    };
+
     /**
      * @return {ThreeDHandler}
      */
@@ -61,10 +95,7 @@ function ThreeDHandler(canvas) {
             originY: 'center',
         });
 
-        _overlay
-            .remove(_image)
-            .add(_image = img);
-
+        this.applyImage(img);
         return this.enable();
     };
 

src/js/components/ImageEditor/Canvas.js

@@ -37,7 +37,11 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         this.setHeight(args.height);
         this.setWidth(args.width);
         this.getButtonMenu().render();
-        this.getViewport().reset();
+        if (this.get3dHandler().isEnabled()) {
+            this.get3dHandler().refreshImage();
+        } else {
+            this.getViewport().reset();
+        }
         this.sendToBack(this.getImage());
         this.getDragbars().resetPosition();
         this.renderAll();
@@ -53,16 +57,20 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
      */
     get3dUrl: function () {
         var cropData = this.getImage().transformation.getData();
-        return this.getImage().__url.replace(/\?h=\d+$/, '?') +
-            [
-                'h=313',
-                'mirror=' + (cropData.mirrored ? 1 : 0),
-                'canvas[edge]=' + cropData.edge,
-                'crop[w]=' + cropData.width,
-                'crop[h]=' + cropData.height,
-                'crop[x]=' + cropData.x,
-                'crop[y]=' + cropData.y,
-            ].join('&');
+        var params = [
+            'h=400',
+            'canvas[edge]=' + cropData.edge,
+            'crop[w]=' + cropData.width,
+            'crop[h]=' + cropData.height,
+            'crop[x]=' + cropData.x,
+            'crop[y]=' + cropData.y,
+        ];
+
+        if (cropData.mirrored) {
+            params.push('mirror=1');
+        }
+
+        return this.getImage().__url.replace(/\?h=\d+$/, '?') + params.join('&');
     },
 
     getApertures: function () {

src/js/components/ImageEditor/Viewport.js

@@ -56,7 +56,6 @@ function Viewport(canvas) {
         // Apertures sometimes overlaps the viewports bounding rect.
         // Solve this by bringing it to the front after apertures are applied.
         _rect.bringToFront();
-        canvas.refresh3dView();
     }
 
     function getCroppedData() {