diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 5cd0a63e2..6ac39e671 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -59,6 +59,7 @@ export default { em[method]('component:toggled', this.onSelect, this); em[method]('change:componentHovered', this.onHovered, this); em[method]('component:update', this.updateAttached, this); + em[method]('component:resize', this.updateAttached, this); em[method]('change:canvasOffset', this.updateAttached, this); // em[method]('frame:scroll', this.onFrameScroll); }; @@ -463,6 +464,11 @@ export default { showOffsets = 1; }, + onUpdateContainer({ el }) { + el.style.top = 0; + el.style.left = 0; + }, + updateTarget(el, rect, options = {}) { if (!modelToStyle) { return; @@ -493,10 +499,8 @@ export default { modelToStyle.setStyle(style, { avoidStore: 1 }); const updateEvent = `update:component:style`; - em && - em.trigger( - `${updateEvent}:${keyHeight} ${updateEvent}:${keyWidth}` - ); + const eventToListen = `${updateEvent}:${keyHeight} ${updateEvent}:${keyWidth}`; + em && em.trigger(eventToListen); if (store) { modelToStyle.trigger('change:style', modelToStyle, style, {}); @@ -702,7 +706,7 @@ export default { } const unit = 'px'; - const { style } = this.canvas.getToolsEl(); + const { style } = this.toggleToolsEl(1); const topOff = this.frameRect(el, 1, pos); const leftOff = this.frameRect(el, 0, pos); style.top = topOff + unit; diff --git a/src/utils/Resizer.js b/src/utils/Resizer.js index c8ee1ddfc..5f160300c 100644 --- a/src/utils/Resizer.js +++ b/src/utils/Resizer.js @@ -12,6 +12,7 @@ var defaultOpts = { onStart: null, onMove: null, onEnd: null, + onUpdateContainer: () => {}, // Resize unit step step: 1, @@ -154,6 +155,7 @@ class Resizer { this.onStart = opts.onStart; this.onMove = opts.onMove; this.onEnd = opts.onEnd; + this.onUpdateContainer = opts.onUpdateContainer; } /** @@ -370,6 +372,15 @@ class Resizer { toUpdate.forEach(pos => (style[pos] = `${rectEl[pos]}px`)); if (opt.forceShow) style.display = 'block'; } + + this.onUpdateContainer({ + el: container, + resizer: this, + opts: { + ...opts, + ...opt + } + }); } /**