diff --git a/src/navigator/config/config.js b/src/navigator/config/config.js index 8fef0d4c2..03090c7b6 100644 --- a/src/navigator/config/config.js +++ b/src/navigator/config/config.js @@ -20,6 +20,11 @@ module.exports = { // Show hovered components in canvas showHover: 1, - // Scroll selected component in canvas - scrollCanvas: 1 + // Scroll to selected component in Canvas when it's selected in Layers + // 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 }; diff --git a/src/navigator/index.js b/src/navigator/index.js index e561e829b..56441fba3 100644 --- a/src/navigator/index.js +++ b/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() { diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index 7677b9718..ca96a42ac 100644 --- a/src/navigator/view/ItemView.js +++ b/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) { - em.get('Canvas').scrollTo(model, { behavior: 'smooth' }); - } + const scroll = config.scrollCanvas; + scroll && em.get('Canvas').scrollTo(model, scroll); } },