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,6 +18,11 @@ function ImageEditor(canvasId, args) {
         __type: _settings.type
     });
 
+    /**
+     * @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 () {})
@@ -36,6 +41,7 @@ function ImageEditor(canvasId, args) {
                 })
                 .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');
         });