Scroll to the selected layer when a component is selected

src/navigator/config/config.js

@@ -20,6 +20,11 @@ module.exports = {
   // Show hovered components in canvas
   showHover: 1,
 
-  // Scroll selected component in canvas
+  // Scroll to selected component in Canvas when it's selected in Layers
-  scrollCanvas: 1
+  // true, false or `scrollIntoView`-like options
+  scrollCanvas: { behavior: 'smooth' },
+
+  // Scroll to selected component in Layers when it's selected in Canvas
+  // true, false or `scrollIntoView`-like options
+  scrollLayers: 1
 };

src/navigator/index.js

@@ -67,6 +67,7 @@ module.exports = () => {
       if (opts.fromLayers) return;
       const opened = em.get('opened');
       const model = em.getSelected();
+      const scroll = config.scrollLayers;
       let parent = model && model.collection ? model.collection.parent : null;
       for (let cid in opened) opened[cid].set('open', 0);
 
@@ -75,6 +76,11 @@ module.exports = () => {
         opened[parent.cid] = parent;
         parent = parent.collection ? parent.collection.parent : null;
       }
+
+      if (model && scroll) {
+        const el = model.viewLayer && model.viewLayer.el;
+        el && el.scrollIntoView(scroll);
+      }
     },
 
     render() {

src/navigator/view/ItemView.js

@@ -82,6 +82,7 @@ module.exports = require('backbone').View.extend({
     this.clsNoChild = `${pfx}layer-no-chld`;
     this.$el.data('model', model);
     this.$el.data('collection', components);
+    model.viewLayer = this;
   },
 
   getVisibilityEl() {
@@ -201,9 +202,8 @@ module.exports = require('backbone').View.extend({
     if (em) {
       const model = this.model;
       em.setSelected(model, { fromLayers: 1 });
-      if (config.scrollCanvas) {
+      const scroll = config.scrollCanvas;
-        em.get('Canvas').scrollTo(model, { behavior: 'smooth' });
+      scroll && em.get('Canvas').scrollTo(model, scroll);
-      }
     }
   },