From ee3627914fbcf33156ad6c69185e6a33412ff8dd Mon Sep 17 00:00:00 2001 From: EricaWind Date: Tue, 18 Jul 2017 19:41:59 +0300 Subject: [PATCH] P5-1418. Remove 3D and Flat buttons when no frame is selected for canvas editor. --- src/js/includes/ButtonMenu.js | 26 ++++++++++++++++++++-- src/js/includes/Canvas.js | 8 ++----- src/js/includes/FrameHandler.js | 2 +- src/js/includes/ImageEditor.js | 32 ++++++++++++--------------- src/js/includes/TextButton.js | 14 +++++++++--- src/js/includes/Viewport.js | 12 +++++++++- src/js/includes/config/button-menu.js | 5 ++++- src/js/includes/config/text-button.js | 1 + src/js/init.js | 6 ++--- 9 files changed, 71 insertions(+), 35 deletions(-) diff --git a/src/js/includes/ButtonMenu.js b/src/js/includes/ButtonMenu.js index 04c7f59..cb6463f 100644 --- a/src/js/includes/ButtonMenu.js +++ b/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 }); }); } diff --git a/src/js/includes/Canvas.js b/src/js/includes/Canvas.js index c3e09bd..d4928de 100644 --- a/src/js/includes/Canvas.js +++ b/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) { - var buttonState = button.getId() === '3d' ? showAs3d : !showAs3d; - button.setActive(buttonState); - }); - } + + this.getButtonMenu().setButtonActive('toggle3d', showAs3d); if (!showAs3d) { return this.get3dHandler().disable(); diff --git a/src/js/includes/FrameHandler.js b/src/js/includes/FrameHandler.js index 08c6c24..8233502 100644 --- a/src/js/includes/FrameHandler.js +++ b/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(); diff --git a/src/js/includes/ImageEditor.js b/src/js/includes/ImageEditor.js index 4584159..56bace4 100644 --- a/src/js/includes/ImageEditor.js +++ b/src/js/includes/ImageEditor.js @@ -11,8 +11,8 @@ function ImageEditor(canvasId, args) { type: 'wallpaper', // Default texts on the buttons buttons: { - flat: 'Flat', - threeD: '3d', + showThreeD: '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 () { - _canvas.toggle3D(false); - }, true) - .addItem('3d', _settings.buttons.threeD, function () { - _canvas.toggle3D(true); - }) - .render(); + .addItem('toggle3d', [_settings.buttons.showThreeD, _settings.buttons.hideThreeD], function () { + _canvas.toggle3D(this.isActive()); + }); } 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; diff --git a/src/js/includes/TextButton.js b/src/js/includes/TextButton.js index 64f232a..3f1ad28 100644 --- a/src/js/includes/TextButton.js +++ b/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); } diff --git a/src/js/includes/Viewport.js b/src/js/includes/Viewport.js index 110d4e9..4ea8acc 100644 --- a/src/js/includes/Viewport.js +++ b/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(); }; diff --git a/src/js/includes/config/button-menu.js b/src/js/includes/config/button-menu.js index 327e6d5..d59ad3f 100644 --- a/src/js/includes/config/button-menu.js +++ b/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' }, } diff --git a/src/js/includes/config/text-button.js b/src/js/includes/config/text-button.js index 07f1b11..25c7f5c 100644 --- a/src/js/includes/config/text-button.js +++ b/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, diff --git a/src/js/init.js b/src/js/init.js index 00199f0..3057994 100644 --- a/src/js/init.js +++ b/src/js/init.js @@ -104,9 +104,9 @@ var util = require('./includes/util'); editor = new ImageEditor('canvas-editor', { type: 'canvas', buttons: { - flat: 'Flat', - threeD: '3D', - showMurals: 'Show Murals Panel', + showThreeD: '3d', + hideThreeD: 'Flat', + showMurals: 'show-murals', hideMurals: 'hide-murals', showRulers: 'show-rulers', hideRulers: 'hide-rulers',