Avoid updating height/width in resizing when not required

GrapesJS · Aug 18, 2017 · 1d421b2 · 1d421b2
1 parent b6f8238
commit 1d421b2
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/src/commands/view/Resize.js b/src/commands/view/Resize.js
@@ -18,7 +18,7 @@ module.exports = {
       this.canvasResizer = editor.Utils.Resizer.init(options);
       canvasResizer = this.canvasResizer;
     }
-    console.log('Resizer opts', options, el);
+
     canvasResizer.setOptions(options);
     canvasResizer.focus(el);
     return canvasResizer;

diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
@@ -358,15 +358,26 @@ module.exports = {
           editor.trigger('change:canvasOffset');
           showOffsets = 1;
         },
-        updateTarget(el, rect, store) {
+        updateTarget(el, rect, options = {}) {
           if (!modelToStyle) {
             return;
           }
 
+          const {store, selectedHandler} = options;
+          const onlyHeight = ['tc', 'bc'].indexOf(selectedHandler) >= 0;
+          const onlyWidth = ['cl', 'cr'].indexOf(selectedHandler) >= 0;
+
           const unit = 'px';
           const style = modelToStyle.getStyle();
-          style.width = rect.w + unit;
-          style.height = rect.h + unit;
+
+          if (!onlyHeight) {
+            style.width = rect.w + unit;
+          }
+
+          if (!onlyWidth) {
+            style.height = rect.h + unit;
+          }
+
           modelToStyle.setStyle(style, {avoidStore: 1});
           em.trigger('targetStyleUpdated');
 

diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js
@@ -291,9 +291,10 @@ class Resizer {
     doc.off('keydown', this.handleKeyDown);
     doc.off('mouseup', this.stop);
     this.updateRect(1);
+    this.selectedHandler = '';
 
     // Stop callback
-    if(typeof this.onEnd === 'function') {
+    if (typeof this.onEnd === 'function') {
       this.onEnd(e, {docs: doc});
     }
   }
@@ -305,10 +306,14 @@ class Resizer {
     var elStyle = this.el.style;
     var conStyle = this.container.style;
     var rect = this.rectDim;
+    const selectedHandler = this.getSelectedHandler();
 
     // Use custom updating strategy if requested
     if (typeof this.updateTarget === 'function') {
-      this.updateTarget(this.el, rect, store);
+      this.updateTarget(this.el, rect, {
+        store,
+        selectedHandler
+      });
     } else {
       elStyle.width = rect.w + 'px';
       elStyle.height = rect.h + 'px';
@@ -324,6 +329,22 @@ class Resizer {
     conStyle.height = rectEl.height + unit;
   }
 
+  /**
+   * Get selected handler name
+   * @return {string}
+   */
+  getSelectedHandler() {
+    var handlers = this.handlers;
+
+    if (!this.selectedHandler) {
+      return;
+    }
+
+    for (let n in handlers) {
+      if (handlers[n] === this.selectedHandler) return n;
+    }
+  }
+
   /**
    * Handle ESC key
    * @param  {Event} e
@@ -343,8 +364,10 @@ class Resizer {
   handleMouseDown(e) {
     var el = e.target;
     if (this.isHandler(el)) {
+      this.selectedHandler = el;
       this.start(e);
     }else if(el !== this.el){
+      this.selectedHandler = '';
       this.blur();
     }
   }