Start scroll check in frames

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;

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);

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;
     },
 
     /**

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;
 

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);
   },
 
   /**