Refactor Resizer and update its container on text change

src/commands/view/SelectComponent.js

@@ -13,9 +13,8 @@ module.exports = {
 
   enable() {
     this.frameOff = this.canvasOff = this.adjScroll = null;
-    var config = this.config.em.get('Config');
     this.startSelectComponent();
-    var em = this.config.em;
+    const { em } = this.config;
     showOffsets = 1;
 
     em.on('component:update', this.updateAttached, this);
@@ -476,12 +475,10 @@ module.exports = {
         options = { ...options, ...resizable };
       }
 
-      editor.runCommand('resize', { el, options, force: 1 });
-
-      // On undo/redo the resizer rect is not updating, need somehow to call
-      // this.updateRect on undo/redo action
+      this.resizer = editor.runCommand('resize', { el, options, force: 1 });
     } else {
       editor.stopCommand('resize');
+      this.resizer = null;
     }
   },
 
@@ -615,14 +612,16 @@ module.exports = {
   /**
    * Update attached elements, eg. component toolbar
    */
-  updateAttached(updated) {
-    const model = this.em.getSelected();
+  updateAttached() {
+    const { resizer, em } = this;
+    const model = em.getSelected();
     const view = model && model.view;
 
     if (view) {
       const { el } = view;
       this.updateToolbarPos(el);
       this.showFixedElementOffset(el);
+      resizer && resizer.updateContainer();
     }
   },
 

src/dom_components/view/ComponentTextView.js

@@ -109,7 +109,7 @@ module.exports = ComponentView.extend({
    * Callback on input event
    * @param  {Event} e
    */
-  onInput(e) {
+  onInput() {
     const { em } = this;
 
     // Update toolbars

src/utils/Resizer.js

@@ -218,22 +218,8 @@ class Resizer {
       return;
     }
 
-    // Show the handlers
     this.el = el;
-    const config = this.opts;
-    const unit = 'px';
-    const rect = this.getElementPos(el, { target: 'container' });
-    const container = this.container;
-    const contStyle = container.style;
-
-    if (!config.avoidContainerUpdate) {
-      contStyle.left = rect.left + unit;
-      contStyle.top = rect.top + unit;
-      contStyle.width = rect.width + unit;
-      contStyle.height = rect.height + unit;
-      contStyle.display = 'block';
-    }
-
+    this.updateContainer({ forceShow: 1 });
     on(this.getDocumentEl(), 'mousedown', this.handleMouseDown);
   }
 
@@ -353,7 +339,6 @@ class Resizer {
     const resizer = this;
     const config = this.opts;
     const rect = this.rectDim;
-    const conStyle = this.container.style;
     const updateTarget = this.updateTarget;
     const selectedHandler = this.getSelectedHandler();
     const { unitHeight, unitWidth, keyWidth, keyHeight } = config;
@@ -372,13 +357,18 @@ class Resizer {
       elStyle[keyHeight] = rect.h + unitHeight;
     }
 
-    const unitRect = 'px';
-    const rectEl = this.getElementPos(el, { target: 'container' });
-    if (!config.avoidContainerUpdate) {
-      conStyle.left = rectEl.left + unitRect;
-      conStyle.top = rectEl.top + unitRect;
-      conStyle.width = rectEl.width + unitRect;
-      conStyle.height = rectEl.height + unitRect;
+    this.updateContainer();
+  }
+
+  updateContainer(opt = {}) {
+    const { opts, container, el } = this;
+    const { style } = container;
+
+    if (!opts.avoidContainerUpdate && el) {
+      const toUpdate = ['left', 'top', 'width', 'height'];
+      const rectEl = this.getElementPos(el, { target: 'container' });
+      toUpdate.forEach(pos => (style[pos] = `${rectEl[pos]}px`));
+      if (opt.forceShow) style.display = 'block';
     }
   }