refactor(components): use scrollMode

Author: Akryum

packages/app-frontend/package.json

@@ -13,6 +13,7 @@
     "lru-cache": "^5.1.1",
     "pixi.js-legacy": "^5.3.7",
     "portal-vue": "^2.1.7",
+    "scroll-into-view-if-needed": "^2.2.28",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue": "^2.6.11",

packages/app-frontend/src/features/components/ComponentTreeNode.vue

@@ -1,5 +1,6 @@
 <script>
 import { computed, toRefs, onMounted, ref, watchEffect, inject } from '@vue/composition-api'
+import scrollIntoView from 'scroll-into-view-if-needed'
 import { getComponentDisplayName, UNDEFINED } from '@utils/util'
 import SharedData from '@utils/shared-data'
 import { useComponent } from '.'
@@ -60,21 +61,16 @@ export default {
 
     // Auto scroll
 
-    /** @type {import('@vue/composition-api').Ref<HTMLElement>} */
-    const treeScroller = inject('treeScroller')
-
     watchEffect(() => {
-      if (selected.value && toggleEl.value && treeScroller.value) {
+      if (selected.value && toggleEl.value) {
         /** @type {HTMLElement} */
         const el = toggleEl.value
-        const scroller = treeScroller.value
-        if (el.offsetTop + el.offsetHeight < scroller.scrollTop || el.offsetTop > scroller.scrollTop + scroller.offsetHeight) {
-          el.scrollIntoView({
-            block: 'center',
-            inline: 'center',
-            behavior: 'smooth'
-          })
-        }
+        scrollIntoView(el, {
+          scrollMode: 'if-needed',
+          block: 'center',
+          inline: 'center',
+          behavior: 'smooth'
+        })
       }
     })
 

packages/app-frontend/src/features/inspector/custom/CustomInspectorNode.vue

@@ -1,5 +1,6 @@
 <script>
 import { ref, computed, watch, inject, watchEffect } from '@vue/composition-api'
+import scrollIntoView from 'scroll-into-view-if-needed'
 import { useCurrentInspector } from '.'
 
 const DEFAULT_EXPAND_DEPTH = 2
@@ -50,21 +51,16 @@ export default {
 
     const toggleEl = ref()
 
-    /** @type {import('@vue/composition-api').Ref<HTMLElement>} */
-    const treeScroller = inject('treeScroller')
-
     watchEffect(() => {
-      if (selected.value && toggleEl.value && treeScroller.value) {
+      if (selected.value && toggleEl.value) {
         /** @type {HTMLElement} */
         const el = toggleEl.value
-        const scroller = treeScroller.value
-        if (el.offsetTop + el.offsetHeight < scroller.scrollTop || el.offsetTop > scroller.scrollTop + scroller.offsetHeight) {
-          el.scrollIntoView({
-            block: 'center',
-            inline: 'center',
-            behavior: 'smooth'
-          })
-        }
+        scrollIntoView(el, {
+          scrollMode: 'if-needed',
+          block: 'center',
+          inline: 'center',
+          behavior: 'smooth'
+        })
       }
     })
 

yarn.lock

@@ -3162,6 +3162,11 @@ compression@^1.7.4:
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
+compute-scroll-into-view@^1.0.17:
+  version "1.0.17"
+  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.17.tgz#6a88f18acd9d42e9cf4baa6bec7e0522607ab7ab"
+  integrity sha512-j4dx+Fb0URmzbwwMUrhqWM2BEWHdFGx+qZ9qqASHRPqvTYdqvWnHg0H1hIbcyLnvgnoNAVMlwkepyqM3DaIFUg==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -9061,6 +9066,13 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+scroll-into-view-if-needed@^2.2.28:
+  version "2.2.28"
+  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.28.tgz#5a15b2f58a52642c88c8eca584644e01703d645a"
+  integrity sha512-8LuxJSuFVc92+0AdNv4QOxRL4Abeo1DgLnGNkn1XlaujPH/3cCFz3QI60r2VNu4obJJROzgnIUw5TKQkZvZI1w==
+  dependencies:
+    compute-scroll-into-view "^1.0.17"
+
 scrollparent@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"