diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 5931a3572..7dada1b66 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -34,10 +34,21 @@ export default Backbone.View.extend({ this.listenTo(model, 'change:x change:y', this.updatePos); this.listenTo(model, 'change:width change:height', this.updateDim); this.listenTo(this.em, 'change:device', this.updateDim); + this.listenTo(this.em, 'component:selected', this.checkSelected); this.updatePos(); model.view = this; }, + checkSelected(component, opts = {}) { + console.log('checkSelected from FrameView', this); + const view = component && component.getView(this.model); + + if (view) { + // avoid scroll if the frame is the current one + opts.scroll && view.scrollIntoView(opts.scroll); + } + }, + updatePos(md) { const { model, el } = this; const { x, y } = model.attributes; diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 3f8cdc8c9..7cee88621 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -280,10 +280,9 @@ export default { select(model, event = {}) { if (!model) return; const ctrlKey = event.ctrlKey || event.metaKey; - const shiftKey = event.shiftKey; - const { editor } = this; + const { shiftKey } = event; + const { editor, em } = this; const multiple = editor.getConfig('multipleSelection'); - const em = this.em; if (ctrlKey && multiple) { editor.selectToggle(model); @@ -325,7 +324,7 @@ export default { editor.selectAdd(model); } else { - editor.select(model); + editor.select(model, { scroll: {} }); } this.initResize(model); diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 37925159b..cb5282290 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -1039,10 +1039,17 @@ const Component = Backbone.Model.extend(Styleable).extend( /** * Get the View of the component. * This works only if the component is already rendered + * @param {Frame} frame Get View of a specific frame * @return {ComponentView} */ - getView() { - return this.view; + getView(frame) { + let { view, views } = this; + + if (frame) { + view = views.filter(view => view._getFrame() === frame.view)[0]; + } + + return view; }, /** diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index f038a2f04..c14b06447 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -387,6 +387,12 @@ export default Backbone.View.extend({ }, scrollIntoView(opts = {}) { + const { el } = this; + console.log('scrolling to', el, { + elTop: el.offsetTop, + frTop: el.ownerDocument.body.scrollTop, + isIn: this.isInViewport() + }); if (!this.isInViewport() || opts.force) { const { el } = this; diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 7fc15d4d5..19c1e75f8 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -281,7 +281,6 @@ export default Backbone.Model.extend({ * @private */ setSelected(el, opts = {}) { - const { scroll } = opts; const multiple = isArray(el); const els = multiple ? el : [el]; const selected = this.get('selected'); @@ -298,8 +297,6 @@ export default Backbone.Model.extend({ this.addSelected(model, opts); added = model; }); - - scroll && added && this.get('Canvas').scrollTo(added, scroll); }, /**