diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 6f86b63c2..53a62af81 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -41,7 +41,8 @@ export default { 'onOut', 'onClick', 'onFrameScroll', - 'onFrameUpdated' + 'onFrameUpdated', + 'onContainerChange' ); }, @@ -74,8 +75,11 @@ export default { * */ toggleSelectComponent(enable) { const { em } = this; + const listenToEl = em.getConfig('listenToEl'); + const { parentNode } = em.getContainer(); const method = enable ? 'on' : 'off'; const methods = { on, off }; + !listenToEl.length && parentNode && listenToEl.push(parentNode); const trigger = (win, body) => { methods[method](body, 'mouseover', this.onHover); methods[method](body, 'mouseleave', this.onOut); @@ -83,6 +87,7 @@ export default { methods[method](win, 'scroll', this.onFrameScroll); }; methods[method](window, 'resize', this.onFrameUpdated); + methods[method](listenToEl, 'scroll', this.onContainerChange); em[method]('component:toggled', this.onSelect, this); em[method]('change:componentHovered', this.onHovered, this); em[method]( @@ -721,6 +726,10 @@ export default { this.updateGlobalPos(); }), + onContainerChange: debounce(function() { + this.em.refreshCanvas(); + }, 150), + /** * Returns element's data info * @param {HTMLElement} el diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 310fc16d2..aa724b04a 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -148,6 +148,14 @@ export default { // To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 dragMode: 0, + // When the editor is placed in a scrollable container (eg. modals) this might + // cause elements inside the canvas (eg. floating toolbars) to be misaligned. + // To avoid that, you can specify an array of DOM elements on which their scroll will + // trigger the canvas update. + // Be default, if the array is empty, the first parent element will be appended. + // listenToEl: [document.querySelector('#scrollable-el')], + listenToEl: [], + // Import asynchronously CSS to use as icons cssIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',