From ab50c360b00414d6312d92cad0dc1a9ac839b09e Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@weahead.se>
Date: Mon, 5 Jun 2017 09:52:59 +0200
Subject: [PATCH] P5-1110 fixed issues with 3d on mobile

---
 src/js/includes/3dHandler.js       | 19 +++++++++++++++++++
 src/js/includes/ButtonMenu.js      |  3 ++-
 src/js/includes/FrameHandler.js    |  4 ++--
 src/js/includes/util.js            |  1 +
 src/js/includes/utils/is-mobile.js |  7 +++++++
 5 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/js/includes/utils/is-mobile.js

diff --git a/src/js/includes/3dHandler.js b/src/js/includes/3dHandler.js
index d29d714..d126b62 100644
--- a/src/js/includes/3dHandler.js
+++ b/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,
         });
diff --git a/src/js/includes/ButtonMenu.js b/src/js/includes/ButtonMenu.js
index a6fdb13..076e6ba 100644
--- a/src/js/includes/ButtonMenu.js
+++ b/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();
diff --git a/src/js/includes/FrameHandler.js b/src/js/includes/FrameHandler.js
index 8343009..91870ce 100644
--- a/src/js/includes/FrameHandler.js
+++ b/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({
diff --git a/src/js/includes/util.js b/src/js/includes/util.js
index 90dd49c..bf3d8a4 100644
--- a/src/js/includes/util.js
+++ b/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'),
 
 };
diff --git a/src/js/includes/utils/is-mobile.js b/src/js/includes/utils/is-mobile.js
new file mode 100644
index 0000000..e2dfca5
--- /dev/null
+++ b/src/js/includes/utils/is-mobile.js
@@ -0,0 +1,7 @@
+'use strict';
+
+function isMobile() {
+    return $(window).width() < 768;
+}
+
+module.exports = isMobile;