From 6ab1abc26512c4caafcb11f96e80314be0c0e53e Mon Sep 17 00:00:00 2001
From: JianJroh <45714701+JianJroh@users.noreply.github.com>
Date: Tue, 16 Apr 2024 22:59:09 +0800
Subject: [PATCH] feat(client): auto scroll to component tree after inspected
 (#308)

---
 packages/client/src/pages/components.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index 0a8be28f..177ac57a 100644
--- a/packages/client/src/pages/components.vue
+++ b/packages/client/src/pages/components.vue
@@ -174,6 +174,7 @@ function inspectComponentInspector() {
     }
   }).finally(() => {
     bridge.value.emit('toggle-panel', true)
+    scrollToComponentTree()
   })
 }
 
@@ -264,6 +265,15 @@ const splitpanesReady = ref(false)
 const { width: splitpanesWidth } = useElementSize(splitpanesRef)
 // prevent `Splitpanes` layout from being changed before it ready
 const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
+
+const componentTreeContainer = ref<HTMLDivElement>()
+function scrollToComponentTree() {
+  // Use setTimeout to wait for the panel to be visible before scrolling
+  setTimeout(() => {
+    const selected = componentTreeContainer.value?.querySelector('.active')
+    selected?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }, 0)
+}
 </script>
 
 <template>
@@ -283,7 +293,7 @@ const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value
             </svg>
           </button>
         </div>
-        <div h-screen select-none overflow-scroll p-2 class="no-scrollbar">
+        <div ref="componentTreeContainer" h-screen select-none overflow-scroll p-2 class="no-scrollbar">
           <ComponentTreeNode v-for="item in treeNode" :key="item.id" :data="item" @select="selectComponentTree" @mouseenter="toggleComponentInspector" @mouseleave="toggleComponentInspector" />
         </div>
       </Pane>