Add private create method in Commands and use it in ButtonView

docs/getting-started.md

@@ -204,7 +204,7 @@ editor.on('abort:export-template', () => console.log('Command aborted'));
 ```
 
 ## Layers
-Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where to render it
+Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it
 
 ```html
 <div id="basic-panel"></div>

src/commands/index.js

@@ -29,7 +29,7 @@ module.exports = () => {
     commands = {},
     defaultCommands = {},
     defaults = require('./config/config'),
-    AbsCommands = require('./view/CommandAbstract');
+    CommandAbstract = require('./view/CommandAbstract');
 
   // Need it here as it would be used below
   var add = function(id, obj) {
@@ -39,11 +39,13 @@ module.exports = () => {
 
     delete obj.initialize;
     obj.id = id;
-    commands[id] = AbsCommands.extend(obj);
+    commands[id] = CommandAbstract.extend(obj);
     return this;
   };
 
   return {
+    CommandAbstract,
+
     /**
      * Name of the module
      * @type {String}
@@ -262,6 +264,17 @@ module.exports = () => {
       }
 
       return this;
+    },
+
+    /**
+     * Create anonymous Command instance
+     * @param {Object} command Command object
+     * @return {Command}
+     * @private
+     * */
+    create(command) {
+      const cmd = CommandAbstract.extend(command);
+      return new cmd(c);
     }
   };
 };

src/panels/view/ButtonView.js

@@ -69,17 +69,18 @@ module.exports = Backbone.View.extend({
    * @return   void
    * */
   updateActive() {
-    const model = this.model;
+    const { model, commands, em } = this;
     const context = model.get('context');
     const options = model.get('options');
     let command = {};
-    var editor = this.em && this.em.get ? this.em.get('Editor') : null;
+    var editor = em && em.get ? em.get('Editor') : null;
     var commandName = model.get('command');
+    var cmdIsFunc = isFunction(commandName);
 
-    if (this.commands && isString(commandName)) {
-      command = this.commands.get(commandName) || {};
-    } else if (isFunction(commandName)) {
-      command = { run: commandName };
+    if (commands && isString(commandName)) {
+      command = commands.get(commandName) || {};
+    } else if (cmdIsFunc) {
+      command = commands.create({ run: commandName });
     } else if (commandName !== null && isObject(commandName)) {
       command = commandName;
     }
@@ -92,8 +93,8 @@ module.exports = Backbone.View.extend({
         command.callRun(editor, { ...options, sender: model });
       }
 
-      // Disable button if there is no stop method
-      !command.stop && model.set('active', false);
+      // Disable button if the command was just a function
+      cmdIsFunc && model.set('active', false);
     } else {
       this.$el.removeClass(this.activeCls);
       model.collection.deactivateAll(context);

src/styles/scss/_gjs_panels.scss

@@ -59,7 +59,7 @@
     font-size: 18px;
     margin-right: 5px;
     border-radius: 2px;
-    padding: 5px;
+    padding: 4px;
     position: relative;
     cursor: pointer;