diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index e221d40b2..939c8af4b 100644 --- a/src/commands/view/SelectComponent.js +++ b/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(); } }, diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.js index 6d894a638..df3d2ba79 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/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 diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index 5d0a21090..876091a01 100644 --- a/src/utils/Resizer.js +++ b/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'; } }