Refactor Preview command

src/commands/view/Preview.js

@@ -1,67 +1,65 @@
-import _ from 'underscore';
+import { each } from 'underscore';
 
 module.exports = {
   getPanels(editor) {
-    if (!this.panels) this.panels = editor.Panels.getPanelsEl();
+    if (!this.panels) {
+      this.panels = editor.Panels.getPanelsEl();
+    }
+
     return this.panels;
   },
 
-  tglPointers(editor, v) {
-    var elP = editor.Canvas.getBody().querySelectorAll(
-      '.' + this.ppfx + 'no-pointer'
-    );
-    _.each(elP, item => {
-      item.style.pointerEvents = v ? '' : 'all';
-    });
+  tglPointers(editor, val) {
+    const body = editor.Canvas.getBody();
+    const elP = body.querySelectorAll(`.${this.ppfx}no-pointer`);
+    each(elP, item => (item.style.pointerEvents = val ? '' : 'all'));
   },
 
   run(editor, sender) {
-    if (sender && sender.set) sender.set('active', false);
+    this.sender = sender;
     editor.stopCommand('sw-visibility');
     editor.getModel().stopDefault();
-    var that = this;
-    var panels = this.getPanels(editor);
-    var canvas = editor.Canvas.getElement();
-    var editorEl = editor.getEl();
-    var pfx = editor.Config.stylePrefix;
+    const panels = this.getPanels(editor);
+    const canvas = editor.Canvas.getElement();
+    const editorEl = editor.getEl();
+    const pfx = editor.Config.stylePrefix;
+
     if (!this.helper) {
-      this.helper = document.createElement('span');
-      this.helper.className = pfx + 'off-prv fa fa-eye-slash';
-      editorEl.appendChild(this.helper);
-      this.helper.onclick = () => {
-        editor.stopCommand('preview');
-      };
+      const helper = document.createElement('span');
+      helper.className = `${pfx}off-prv fa fa-eye-slash`;
+      editorEl.appendChild(helper);
+      helper.onclick = () => editor.stopCommand('preview');
+      this.helper = helper;
     }
+
     this.helper.style.display = 'inline-block';
     this.tglPointers(editor);
-
-    /*
-    editor.Canvas.getBody().querySelectorAll('.' + pfx + 'no-pointer').forEach(function(){
-      this.style.pointerEvents = 'all';
-    });*/
-
     panels.style.display = 'none';
-    var canvasS = canvas.style;
+    const canvasS = canvas.style;
     canvasS.width = '100%';
     canvasS.height = '100%';
     canvasS.top = '0';
     canvasS.left = '0';
     canvasS.padding = '0';
     canvasS.margin = '0';
-    editor.trigger('change:canvasOffset');
+    editor.refresh();
   },
 
-  stop(editor, sender) {
-    var panels = this.getPanels(editor);
+  stop(editor) {
+    const { sender = {} } = this;
+    sender.set && sender.set('active', 0);
+    const panels = this.getPanels(editor);
     editor.runCommand('sw-visibility');
     editor.getModel().runDefault();
-    panels.style.display = 'block';
-    var canvas = editor.Canvas.getElement();
+    panels.style.display = '';
+    const canvas = editor.Canvas.getElement();
     canvas.setAttribute('style', '');
+
     if (this.helper) {
       this.helper.style.display = 'none';
     }
-    editor.trigger('change:canvasOffset');
+
+    editor.refresh();
     this.tglPointers(editor, 1);
   }
 };

src/panels/config/config.js

@@ -59,24 +59,28 @@ module.exports = {
           className: 'fa fa-paint-brush',
           command: osm,
           active: true,
+          togglable: 0,
           attributes: { title: 'Open Style Manager' }
         },
         {
           id: otm,
           className: 'fa fa-cog',
           command: otm,
+          togglable: 0,
           attributes: { title: 'Settings' }
         },
         {
           id: ola,
           className: 'fa fa-bars',
           command: ola,
+          togglable: 0,
           attributes: { title: 'Open Layer Manager' }
         },
         {
           id: obl,
           className: 'fa fa-th-large',
           command: obl,
+          togglable: 0,
           attributes: { title: 'Open Blocks' }
         }
       ]

src/panels/view/ButtonView.js

@@ -99,7 +99,6 @@ module.exports = Backbone.View.extend({
       // Disable button if the command has no stop method
       command.noStop && model.set('active', false);
     } else {
-      !fromCollection && model.collection.deactivateAll(context, model);
       $el.removeClass(activeCls);
       commands.stopCommand(command, { ...options, sender: model, force: 1 });
     }