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;