P5-1418. Remove 3D and Flat buttons when no frame is selected for canvas editor.

src/js/includes/ButtonMenu.js

@@ -69,6 +69,28 @@ function ButtonMenu(canvas, settings) {
         return _width;
     };
 
+    /**
+     * Sets the button with id=buttonId to active/not active mode
+     */
+    this.setButtonActive = function(buttonId, isActive) {
+        _textButtons.forEach(function (button) {
+            if (button.getId() === buttonId) {
+                button.setActive(isActive);
+            }
+        });
+    };
+
+    /**
+     * Sets the button with id=buttonId to disabled/enabled mode
+     */
+    this.setButtonDisabled = function(buttonId, isDisabled) {
+        _textButtons.forEach(function (button) {
+            if (button.getId() === buttonId) {
+                button.setDisabled(isDisabled);
+            }
+        });
+    };
+
     /**
      * Hides the buttons
      */
@@ -76,7 +98,7 @@ function ButtonMenu(canvas, settings) {
         _textButtons.forEach(function(textButton) {
             textButton.set({
                 opacity: 0,
-                selectable: false
+                disabled: true
             });
         });
     }
@@ -88,7 +110,7 @@ function ButtonMenu(canvas, settings) {
         _textButtons.forEach(function(textButton) {
             textButton.set({
                 opacity: 1,
-                selectable: true
+                disabled: false
             });
         });
     }

src/js/includes/Canvas.js

@@ -216,12 +216,8 @@ var Canvas = fabric.util.createClass(fabric.Canvas, {
     },
 
     toggle3D: function (showAs3d) {
-        if (this.__type === 'canvas') {
+
-            this.getButtonMenu().getItems().forEach(function (button) {
+        this.getButtonMenu().setButtonActive('toggle3d', showAs3d);
-                var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d;
-                button.setActive(buttonState);
-            });
-        }
 
         if (!showAs3d) {
             return this.get3dHandler().disable();

src/js/includes/FrameHandler.js

@@ -4,7 +4,7 @@ var config = require('./config');
 
 function FrameHandler(viewport) {
     var _frames;
-    var _frameType;
+    var _frameType = 'image';
 
     function init() {
         initFrames();

src/js/includes/ImageEditor.js

@@ -11,8 +11,8 @@ function ImageEditor(canvasId, args) {
         type: 'wallpaper',
         // Default texts on the buttons
         buttons: {
-            flat: 'Flat',
+            showThreeD: '3d',
-            threeD: '3d',
+            hideThreeD: 'Flat',
             showMurals: 'Show Murals Panel',
             hideMurals: 'Hide Murals Panel',
             showRulers: 'Show Ruler',
@@ -36,13 +36,9 @@ function ImageEditor(canvasId, args) {
     // during the initialization of the image editor.
     if (_canvas.__type === 'canvas') {
         _canvas.getButtonMenu()
-            .addItem('flat', _settings.buttons.flat, function () {
+            .addItem('toggle3d', [_settings.buttons.showThreeD, _settings.buttons.hideThreeD], function () {
-                _canvas.toggle3D(false);
+                _canvas.toggle3D(this.isActive());
-            }, true)
+            });
-            .addItem('3d', _settings.buttons.threeD, function () {
-                _canvas.toggle3D(true);
-            })
-            .render();
     } else {
         _canvas.getButtonMenu()
             .addItem('toggleMurals', [_settings.buttons.showMurals, _settings.buttons.hideMurals], function () {
@@ -51,17 +47,17 @@ function ImageEditor(canvasId, args) {
             .addItem('toggleRulers', [_settings.buttons.showRulers, _settings.buttons.hideRulers], function () {
                 _canvas.getViewport().getRulers().enable(this.isActive());
             });
-
-        if (util.supportsFullscreen()) {
-            _canvas.getButtonMenu()
-                .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.exitFullscreen], function () {
-                    util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
-                });
-        }
-
-        _canvas.getButtonMenu().render();
     }
 
+    if (util.supportsFullscreen()) {
+        _canvas.getButtonMenu()
+            .addItem('toggleFullscreen', [_settings.buttons.showFullscreen, _settings.buttons.exitFullscreen], function () {
+                util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
+            });
+    }
+
+    _canvas.getButtonMenu().render();
+
     // Binding fullscreen change event to the image-editor wrapper. This way we can set the correct button active.
     $(_canvas.getSelectionElement().parentNode).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
         var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;

src/js/includes/TextButton.js

@@ -25,7 +25,7 @@ function TextButton(id, text, settings, isActive) {
     });
 
     // Make sure we're interactive
-    this.selectable = true;
+    this.disabled = false;
     this.hoverCursor = config.textButton.cursor;
 
     // Initialize text and rectangle
@@ -81,9 +81,9 @@ function TextButton(id, text, settings, isActive) {
     this.onClick = function(callback) {
         _callback = callback || function() {};
         this.on('mousedown', function (e) {
-            // As inactive buttons are still clickable, we first check if the button is 'selectable'.
+            // As inactive buttons are still clickable, we first check if the button is disabled.
             // Only then we should do stuff.
-            if (this.selectable) {
+            if (!this.disabled) {
                 this.__active = !this.__active;
                 handleMouseDown.call(this, e);
             }
@@ -96,6 +96,14 @@ function TextButton(id, text, settings, isActive) {
         toggleActiveStyle.call(this);
     };
 
+    this.setDisabled = function (isDisabled)
+    {
+        this.disabled = isDisabled;
+
+        _rect.setFill(_rectSettings[this.disabled ? 'disabledFill' : 'fill']);
+        _text.setFill(_textSettings[this.disabled ? 'disabledFill' : 'fill']);
+    };
+
     if (_textSettings.text) {
         this.setText(_textSettings.text);
     }

src/js/includes/Viewport.js

@@ -49,7 +49,7 @@ function Viewport(canvas) {
         if (canvas.__type !== 'canvas') {
             drawBeams();
         } else {
-            self.setFrame();
+            self.setFrame(self.getFrameHandler().getFrameType());
         }
 
         canvas.getDragbars().apply();
@@ -162,6 +162,16 @@ function Viewport(canvas) {
      */
     this.setFrame = function (frameType) {
         this.getFrameHandler().setFrames(frameType);
+
+        var buttons = canvas.getButtonMenu().getItems();
+        if (frameType === 'none') {
+            buttons[0].setDisabled(true);
+        }
+        else {
+            buttons[0].setDisabled(false);
+        }
+        canvas.getButtonMenu().bringToFront();
+
         canvas.refresh3dView();
     };
 

src/js/includes/config/button-menu.js

@@ -7,11 +7,12 @@ module.exports = {
         text: {
             fill: '#ffffff',
             activeFill: '#ffffff',
+            disabledFill: '#ffffff'
         },
         rect: {
             fill: '#343434',
             activeFill: '#494949',
-            width: 100,
+            disabledFill: '#999999'
         },
     },
 
@@ -20,10 +21,12 @@ module.exports = {
         text: {
             fill: '#ffffff',
             activeFill: '#ffffff',
+            disabledFill: '#ffffff'
         },
         rect: {
             fill: '#343434',
             activeFill: '#494949',
+            disabledFill: '#999999'
         },
     }
 

src/js/includes/config/text-button.js

@@ -6,6 +6,7 @@ module.exports = {
         return {
             fill: '#343434',
             activeFill: '#494949',
+            disabledFill: '#999999',
             originX: 'center',
             originY: 'center',
             width: width || 1,

src/js/init.js

@@ -104,9 +104,9 @@ var util = require('./includes/util');
         editor = new ImageEditor('canvas-editor', {
                 type: 'canvas',
                 buttons: {
-                    flat: 'Flat',
+                    showThreeD: '3d',
-                    threeD: '3D',
+                    hideThreeD: 'Flat',
-                    showMurals: 'Show Murals Panel',
+                    showMurals: 'show-murals',
                     hideMurals: 'hide-murals',
                     showRulers: 'show-rulers',
                     hideRulers: 'hide-rulers',