P5-1110 fixed issues with 3d on mobile

src/js/includes/3dHandler.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var util = require('./util');
+
 function ThreeDHandler(canvas) {
     var _overlay = new fabric.Group();
     var _image;
@@ -53,6 +55,23 @@ function ThreeDHandler(canvas) {
     };
 
     this.refreshImage = function() {
+        if (util.isMobile()) {
+            this.disable();
+
+            canvas.getButtonMenu().getItems().forEach(function(button) {
+                switch (button.getId()) {
+                    case '3d':
+                        button.setActive(false);
+                        break;
+                    case 'flat':
+                        button.setActive(true);
+                        break;
+                }
+            });
+
+            return;
+        }
+
         _overlay.set({
             width: canvas.width,
         });

src/js/includes/ButtonMenu.js

@@ -2,6 +2,7 @@
 
 var TextButton = require('./TextButton');
 var config = require('./config');
+var util = require('./util');
 
 /**
  * Creates the menu with text-buttons settings provided. Settings will override
@@ -117,7 +118,7 @@ function ButtonMenu(canvas, settings) {
         canvas.renderAll();
 
         // Buttons should not be visible on screens with a width lower than 768px
-        if ($(window).width() < 768) {
+        if (util.isMobile()) {
             this.hide();
         } else {
             this.show();

src/js/includes/FrameHandler.js

@@ -89,9 +89,9 @@ function FrameHandler(viewport) {
         _frames.right.height = _frames.left.height = viewport.getData().height;
 
         if (frameType === 'image') {
-            _frames.top.width -= (viewport.getData().ppmm * 29) * 2;
+            _frames.top.width -= (viewport.getData().ppmm * 29 * viewport.canvas.getImage().scaleX) * 2;
             _frames.bottom.width = _frames.top.width;
-            _frames.right.height -= (viewport.getData().ppmm * 29) * 2;
+            _frames.right.height -= (viewport.getData().ppmm * 29 * viewport.canvas.getImage().scaleX) * 2;
             _frames.left.height = _frames.right.height;
 
             _frames.top.set({

src/js/includes/util.js

@@ -8,5 +8,6 @@ module.exports = {
     setPositionInside: require('./utils/set-position-inside'),
     setProperties: require('./utils/set-properties'),
     toggleFullscreen: require('./utils/toggle-fullscreen'),
+    isMobile: require('./utils/is-mobile'),
 
 };

src/js/includes/utils/is-mobile.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function isMobile() {
+    return $(window).width() < 768;
+}
+
+module.exports = isMobile;