P5-1416 add support for text-tags

src/js/includes/3dHandler.js

@@ -35,7 +35,7 @@ function ThreeDHandler(canvas) {
      * @return {ThreeDHandler}
      */
     this.disable = function () {
-        _overlay.setVisible(false).canvas.renderAll();
+        _overlay.setVisible(false).canvas.resize();
         return this;
     };
 
@@ -68,23 +68,6 @@ function ThreeDHandler(canvas) {
      * Refreshes the image. This is mostly done upon resize of the window
      */
     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

@@ -126,12 +126,7 @@ function ButtonMenu(canvas, settings) {
 
         canvas.renderAll();
 
-        // Buttons should not be visible on screens with a width lower than 768px
-        if (util.isMobile()) {
-            this.hide();
-        } else {
         this.show();
-        }
 
         return this;
     };

src/js/includes/Canvas.js

@@ -45,6 +45,8 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
     },
 
     resize: function (args) {
+        args = args || { height: this.height, width: this.width};
+
         this.setHeight(args.height);
         this.setWidth(args.width);
         this.getButtonMenu().render();

src/js/includes/ImageEditor.js

@@ -50,11 +50,16 @@ function ImageEditor(canvasId, args) {
             })
             .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                 _canvas.getViewport().getRulers().enable(this.isActive());
-            })
+            });
-            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.hideFullscreen], function () {
+
+        if (util.supportsFullscreen()) {
+            _canvas.getButtonMenu()
+                .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.exitFullscreen], function () {
                     util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
-            })
+                });
-            .render();
+        }
+
+        _canvas.getButtonMenu().render();
     }
 
     // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.

src/js/includes/RulerHandler.js

@@ -18,7 +18,7 @@ function RulerHandler(viewport) {
             var bounds = viewport.getBounds();
             var pos = util.assertBetween(this[axis], bounds.min[axis], bounds.max[axis]);
             this.marker[axis] = this[axis] = pos;
-            var dim = (this[axis] - bounds[axis]) / (viewport.getData().ppmm * 10);
+            var dim = (this[axis] - bounds[axis]) / (viewport.getData().ppmm * 10 * viewport.canvas.getImage().scaleX);
 
             if (axis === 'top') {
                 dim = viewport.getData().dim.height - dim;

src/js/includes/util.js

@@ -9,5 +9,7 @@ module.exports = {
     setProperties: require('./utils/set-properties'),
     toggleFullscreen: require('./utils/toggle-fullscreen'),
     isMobile: require('./utils/is-mobile'),
+    supportsFullscreen: require('./utils/supports-fullscreen'),
+    isFullscreen: require('./utils/is-fullscreen'),
 
 };

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

@@ -0,0 +1,7 @@
+'use strict';
+
+function isFullscreen() {
+    return document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+}
+
+module.exports = isFullscreen;

src/js/includes/utils/supports-fullscreen.js

@@ -0,0 +1,9 @@
+'use strict';
+
+function supportsFullscreen() {
+
+    return document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen || document.documentElement.msRequestFullscreen;
+
+}
+
+module.exports = supportsFullscreen;

src/js/includes/utils/toggle-fullscreen.js

@@ -1,13 +1,12 @@
 'use strict';
 
+var isFullscreen = require('./is-fullscreen');
 /**
  * Toggles the full screen state for passed DOM object
  * @param {HTMLElement} elm
  */
 function toggleFullscreen(elem) {
-    var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
+    if (isFullscreen()) {
-
-    if (isFullScreen) {
         if (document.exitFullscreen) {
             document.exitFullscreen();
         } else if (document.msExitFullscreen) {

src/js/init.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var util = require('./includes/util');
+
 /**
  * This is just an example usage of the image editor. Also this is used for testing.
  * This code can be pretty messy, but that is fine because nothing of this will come to
@@ -66,9 +68,8 @@
     }
 
     function handleResize() {
-        var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
         var width = $wrapper.width();
-        var height = isFullScreen ? $window.height() : $wrapper.height();
+        var height = util.isFullscreen() ? $window.height() : $wrapper.height();
         editor.canvas.resize({width: width, height: height});
     }
 
@@ -110,7 +111,7 @@
                     showRulers: 'show-rulers',
                     hideRulers: 'hide-rulers',
                     showFullscreen: 'show-fullscreen',
-                    hideFullscreen: 'hide-fullscreen',
+                    hideFullscreen: 'exit-fullscreen',
                 }
             })
             .loadImage(imageUrl, function() {