Menu buttons can be made active/inactive programattically

src/js/components/ImageEditor/ButtonMenu.js

@@ -32,12 +32,17 @@ function ButtonMenu(canvas, settings) {
      * @param  {Function} callback
      * @return {ButtonMenu}
      */
-    this.addItem = function(text, callback) {
+    this.addItem = function(text, callback, isActive) {
         _textButtons.push(
             new TextButton(text, settings)
                 .onClick(callback)
                 .set({__group: this})
         );
+
+        if (isActive) {
+          _textButtons[_textButtons.length - 1].setActive();
+        }
+
         return this;
     };
 

src/js/components/ImageEditor/ImageEditor.js

@@ -18,24 +18,30 @@ function ImageEditor(canvasId, args) {
         __type: _settings.type
     });
 
-    if (_canvas.__type === 'canvas') {
-        _canvas.getButtonMenu()
-            .addItem('3D', function () {})
-            .addItem('Flat', function () {})
-            .render();
-    } else {
-        _canvas.getButtonMenu()
-            .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
-                _canvas.getViewport().getGores().enable(this.isActive());
-            })
-            .addItem(['Show Ruler', 'Hide Ruler'], function () {
-                _canvas.getViewport().getRulers().enable(this.isActive());
-            })
-            .addItem(['Fullscreen', 'Exit Fullscreen'], function () {
-                util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
-            })
-            .render();
-    }
+    /**
+     * @TODO: Refactor this. Since Canvas knows the type of editor it probably
+     *        better could reside there.
+     */
+    $(function () {
+        if (_canvas.__type === 'canvas') {
+            _canvas.getButtonMenu()
+                .addItem('3D', function () {})
+                .addItem('Flat', function () {})
+                .render();
+        } else {
+            _canvas.getButtonMenu()
+                .addItem(['Show Murals Panel', 'Hide Murals Panel'], function () {
+                    _canvas.getViewport().getGores().enable(this.isActive());
+                })
+                .addItem(['Show Ruler', 'Hide Ruler'], function () {
+                    _canvas.getViewport().getRulers().enable(this.isActive());
+                })
+                .addItem(['Fullscreen', 'Exit Fullscreen'], function () {
+                    util.toggleFullscreen(_canvas.getSelectionElement().parentNode);
+                })
+                .render();
+        }
+    });
 
     /**
      * Crops image to desired dimensions

src/js/components/ImageEditor/TextButton.js

@@ -56,8 +56,6 @@ function TextButton(text, settings) {
     };
 
     function handleMouseDown(e) {
-        this.__active = !this.__active;
-
         _rect.setFill(_rectSettings[this.isActive() ? 'activeFill' : 'fill']);
         this.setText(_textSettings[this.isActive() ? 'textActive' : 'text']);
         _callback.call(this, e);
@@ -69,10 +67,18 @@ function TextButton(text, settings) {
 
     this.onClick = function(callback) {
         _callback = callback || function() {};
-        this.on('mousedown', handleMouseDown);
+        this.on('mousedown', function (e) {
+            this.__active = !this.__active;
+            handleMouseDown.call(this, e);
+        }.bind(this));
         return this;
     };
 
+    this.setActive = function (isActive) {
+        this.__active = typeof isActive === 'undefined' ? true : !!isActive;
+        handleMouseDown.call(this);
+    };
+
     if (_textSettings.text) {
         this.setText(_textSettings.text);
     }

src/js/init.js

@@ -13,7 +13,7 @@
 
     var imageUrl = '//images.photowall.com/products/' + $input.image_id.val() + '.jpg?h=450';
 
-    var editor = new ImageEditor('canvas-editor', {'type': 'canvas'})
+    var editor = new ImageEditor('canvas-editor', {'type': 'wallpaper'})
         .loadImage(imageUrl, function() {
             $input.w.trigger('input');
         });