Refactor ComponentView and the SelectComponent command

Move the initResize from ComponentView to SelectComponent
GrapesJS · Aug 17, 2017 · 26d63a2 · 26d63a2
1 parent 9202520
commit 26d63a2
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 77 deletions.
diff --git a/dist/grapes.min.js b/dist/grapes.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
@@ -1,6 +1,7 @@
 var ToolbarView = require('dom_components/view/ToolbarView');
 var Toolbar = require('dom_components/model/Toolbar');
 var key = require('keymaster');
+let showOffsets;
 
 module.exports = {
 
@@ -16,6 +17,7 @@ module.exports = {
     this.startSelectComponent();
     this.toggleClipboard(config.copyPaste);
     var em = this.config.em;
+    showOffsets = 1;
 
     em.on('component:update', this.updateAttached, this);
     em.on('change:canvasOffset', this.updateAttached, this);
@@ -174,9 +176,12 @@ module.exports = {
   showElementOffset(el, pos) {
     var $el = $(el);
     var model = $el.data('model');
-    if(model && model.get('status') == 'selected'){
+
+    if ( (model && model.get('status') == 'selected') ||
+        !showOffsets){
       return;
     }
+
     this.editor.runCommand('show-offset', {
       el,
       elPos: pos,
@@ -303,19 +308,23 @@ module.exports = {
     this.cleanPrevious(md);
     var $el = $(el);
     var nMd = $el.data('model');
-    if(nMd) {
+
+    if (nMd) {
       var em = this.em;
       var mirror = nMd.get('mirror');
       nMd = mirror ? mirror : nMd;
 
       // Close all opened components inside Navigator
       var opened = em.get('opened');
-      for (var cid in opened){
+
+      for (var cid in opened) {
         var m = opened[cid];
         m.set('open', 0);
       }
+
       var parent = nMd.collection ? nMd.collection.parent : null;
-      while(parent) {
+
+      while (parent) {
         parent.set('open', 1);
         opened[parent.cid] = parent;
         parent = parent.collection ? parent.collection.parent : null;
@@ -326,6 +335,77 @@ module.exports = {
       this.showFixedElementOffset(el);
       this.hideElementOffset();
       this.hideHighlighter();
+      this.initResize(el);
+    }
+  },
+
+  /**
+   * Init resizer on the element if possible
+   * @param  {HTMLElement} el
+   * @private
+   */
+  initResize(el) {
+    var em = this.em;
+    var editor = em ? em.get('Editor') : '';
+    var config = em ? em.get('Config') : '';
+    var pfx = config.stylePrefix || '';
+    var attrName = 'data-' + pfx + 'handler';
+    var resizeClass = pfx + 'resizing';
+    var model = em.get('selectedComponent');
+    var resizable = model.get('resizable');
+    var modelToStyle;
+
+    var toggleBodyClass = (method, e, opts) => {
+      var handlerAttr = e.target.getAttribute(attrName);
+      var resizeHndClass = pfx + 'resizing-' + handlerAttr;
+      var classToAdd = resizeClass;// + ' ' +resizeHndClass;
+      if (opts.docs) {
+        opts.docs.find('body')[method](classToAdd);
+      }
+    };
+
+    if (editor && resizable) {
+      let options = {
+        onStart(e, opts) {
+          toggleBodyClass('addClass', e, opts);
+          modelToStyle = em.get('StyleManager').getModelToStyle(model);
+          showOffsets = 0;
+        },
+        // Update all positioned elements (eg. component toolbar)
+        onMove() {
+          editor.trigger('change:canvasOffset');
+        },
+        onEnd(e, opts) {
+          toggleBodyClass('removeClass', e, opts);
+          editor.trigger('change:canvasOffset');
+          showOffsets = 1;
+        },
+        updateTarget(el, rect, store) {
+          if (!modelToStyle) {
+            return;
+          }
+
+          const unit = 'px';
+          const style = modelToStyle.getStyle();
+          style.width = rect.w + unit;
+          style.height = rect.h + unit;
+          modelToStyle.setStyle(style, {avoidStore: 1});
+          em.trigger('targetStyleUpdated');
+
+          if (store) {
+            modelToStyle.trigger('change:style', modelToStyle, style, {});
+          }
+        }
+      };
+
+      if (typeof resizable == 'object') {
+        options = Object.assign(options, resizable);
+      }
+
+      editor.runCommand('resize', {el, options});
+
+      // On undo/redo the resizer rect is not updating, need somehow to call
+      // this.updateRect on undo/redo action
     }
   },
 

diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js
@@ -3,10 +3,6 @@ var ComponentsView = require('./ComponentsView');
 
 module.exports = Backbone.View.extend({
 
-  events: {
-    'click': 'initResize',
-  },
-
   className() {
     return this.getClasses();
   },
@@ -237,72 +233,6 @@ module.exports = Backbone.View.extend({
     event.viewResponse = this;
   },
 
-  /**
-   * Init component for resizing
-   */
-  initResize(e) {
-    var em = this.opts.config.em;
-    var editor = em ? em.get('Editor') : '';
-    var config = em ? em.get('Config') : '';
-    var pfx = config.stylePrefix || '';
-    var attrName = 'data-' + pfx + 'handler';
-    var resizeClass = pfx + 'resizing';
-    var model = this.model;
-    var resizable = model.get('resizable');
-    var modelToStyle;
-
-    var toggleBodyClass = (method, e, opts) => {
-      var handlerAttr = e.target.getAttribute(attrName);
-      var resizeHndClass = pfx + 'resizing-' + handlerAttr;
-      var classToAdd = resizeClass;// + ' ' +resizeHndClass;
-      if (opts.docs) {
-        opts.docs.find('body')[method](classToAdd);
-      }
-    };
-
-    if(editor && resizable) {
-      let resizeOptions = {
-        onStart(e, opts) {
-          toggleBodyClass('addClass', e, opts);
-          modelToStyle = em.get('StyleManager').getModelToStyle(model);
-        },
-        // Update all positioned elements (eg. component toolbar)
-        onMove() {
-          editor.trigger('change:canvasOffset');
-        },
-        onEnd(e, opts) {
-          toggleBodyClass('removeClass', e, opts);
-          editor.trigger('change:canvasOffset');
-        },
-        updateTarget(el, rect, store) {
-          if (!modelToStyle) {
-            return;
-          }
-
-          const unit = 'px';
-          const style = modelToStyle.getStyle();
-          style.width = rect.w + unit;
-          style.height = rect.h + unit;
-          modelToStyle.setStyle(style, {avoidStore: 1});
-          em.trigger('targetStyleUpdated');
-
-          if (store) {
-            modelToStyle.setStyle(style);
-          }
-        }
-      };
-
-      if (typeof resizable == 'object') {
-        resizeOptions = Object.assign(resizeOptions, resizable);
-      }
-
-      editor.runCommand('resize', {
-        el: this.el,
-        options: resizeOptions
-      });
-    }
-  },
-
   /**
    * Prevent default helper
    * @param  {Event} e