Fixed responsivity when resizing the window

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

@@ -52,24 +52,6 @@ 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,
@@ -83,7 +65,7 @@ function ThreeDHandler(canvas) {
 
         _overlay
             .remove(_image)
-            .add(_image = this.getResizedImage(img));
+            .add(_image = canvas.getResizedImage(img));
     };
 
     /**

src/js/components/ImageEditor/ButtonMenu.js

@@ -69,6 +69,24 @@ function ButtonMenu(canvas, settings) {
         return _width;
     };
 
+    this.hide = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.set({
+                opacity: 0,
+                selectable: false
+            });
+        });
+    }
+
+    this.show = function() {
+        _textButtons.forEach(function(textButton) {
+            textButton.set({
+                opacity: 1,
+                selectable: true
+            });
+        });
+    }
+
     /**
      * Recalculate boundaries and add all items to canvas if required
      * @return {ButtonMenu}
@@ -97,6 +115,14 @@ function ButtonMenu(canvas, settings) {
         });
 
         canvas.renderAll();
+
+        // Buttons should not be visible on screens with a width lower than 768px
+        if ($(window).width() < 768) {
+            this.hide();
+        } else {
+            this.show();
+        }
+
         return this;
     };
 }

src/js/components/ImageEditor/Canvas.js

@@ -40,6 +40,7 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         if (this.get3dHandler().isEnabled()) {
             this.get3dHandler().refreshImage();
         } else {
+            this.refreshImage(this.getResizedImage(this.getImage()))
             this.getViewport().reset();
         }
         this.sendToBack(this.getImage());
@@ -135,6 +136,16 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         return this.remove(this.__image);
     },
 
+    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;
+    },
+
     /**
      * @param  {fabric.Image} img
      * @return {Canvas}
@@ -149,6 +160,18 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
         return this;
     },
 
+    getResizedImage: function(img) {
+        // Calculate maxHeight and maxWidth of the 3d image
+        // and scale the image accoring to those values
+        var maxHeight = this.getHeight() - 100;
+        var maxWidth = this.getWidth() - 100;
+
+        img.scaleToHeight(maxHeight < img.height ? maxHeight : img.height);
+        img.scaleToWidth(maxWidth < (img.width * img.scaleX) ? maxWidth : img.width);
+
+        return img;
+    },
+
     toggle3D: function (showAs3d) {
         this.getButtonMenu().getItems().forEach(function(button) {
             var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d;

src/js/components/ImageEditor/DragbarHandler.js

@@ -62,8 +62,14 @@ function DragbarHandler(canvas) {
             return this;
         }
 
-        _dragbars.v.set({ left: canvas.width - 30 }).setCoords();
+        _dragbars.v.set({
-        _dragbars.h.set({ top: canvas.height - 30 }).setCoords();
+            left: canvas.width - 30,
+            height: canvas.getImage().height * canvas.getImage().scaleY,
+        }).setCoords();
+        _dragbars.h.set({
+            top: canvas.height - 30,
+            width: canvas.getImage().width * canvas.getImage().scaleY,
+        }).setCoords();
         this.__handles.setHandlePosition();
         return this;
     };

src/js/components/ImageEditor/ImageEditor.js

@@ -5,10 +5,9 @@ var util = require('../util');
 
 function ImageEditor(canvasId, args) {
     var _canvas;
-    var self = this;
 
     var _settings = $.extend({
-        'type': 'wallpaper'
+        type: 'wallpaper',
     }, args);
 
     // Initialize canvas
@@ -19,6 +18,8 @@ function ImageEditor(canvasId, args) {
         __type: _settings.type
     });
 
+
+
     /**
      * @TODO: Refactor this. Since Canvas knows the type of editor it probably
      *        better could reside there.

src/js/components/ImageEditor/Viewport.js

@@ -102,11 +102,11 @@ function Viewport(canvas) {
     function calcMinMaxBoundsForRect(rect, img) {
         return {
             left: {
-                min: rect.left + rect.width - img.width,
+                min: rect.left + rect.width - (img.width * img.scaleX),
                 max: rect.left
             },
             top: {
-                min: rect.top + rect.height - img.height,
+                min: rect.top + rect.height - (img.height * img.scaleY),
                 max: rect.top
             }
         };

src/js/components/utils/calc-crop.js

@@ -21,8 +21,8 @@ function calcCrop(obj, width, height) {
             width: Number(width),
             height: Number(height)
         },
-        width:  obj.width,
+        width: obj.width * obj.scaleX,
-        height: obj.height,
+        height: obj.height * obj.scaleY,
         objectRatio: objRatio,
         cropRatio: cropRatio
     };
@@ -34,7 +34,7 @@ function calcCrop(obj, width, height) {
     }
 
     // Pixels per milimeter
-    returnValue.ppmm = returnValue.width / (returnValue.dim.width * 10);
+    returnValue.ppmm = returnValue.width / ((returnValue.dim.width * obj.scaleX) * 10);
 
     return returnValue;
 }

src/js/init.js

@@ -17,7 +17,9 @@
 
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
-    var editor = new ImageEditor('canvas-editor', {'type': 'canvas'})
+    var editor = new ImageEditor('canvas-editor', {
+            type: 'canvas',
+        })
         .loadImage(imageUrl, function() {
             $input.w.trigger('input');
             Event.handleResize();