feat(components): scroll into component

Author: Akryum

packages/app-backend-core/src/index.ts

@@ -203,6 +203,26 @@ async function connect () {
     }
   })
 
+  ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, async ({ instanceId }) => {
+    const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
+    if (instance) {
+      const [el] = await ctx.api.getComponentRootElements(instance)
+      if (el) {
+        el.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'center'
+        })
+        setTimeout(() => {
+          highlight(instance, ctx)
+        }, 500)
+        setTimeout(() => {
+          unHighlight()
+        }, 2000)
+      }
+    }
+  })
+
   // Component perf
 
   hook.on(HookEvents.PERFORMANCE_START, (app, uid, vm, type, time) => {

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

@@ -39,10 +39,17 @@ export default defineComponent({
         class="search flex-1 flat"
       />
 
+      <VueButton
+        v-tooltip="'Scroll to component'"
+        icon-left="preview"
+        class="flat icon-button"
+        @click="scrollToComponent()"
+      />
+
       <VueButton
         v-if="$isChrome"
         v-tooltip="'Inspect DOM'"
-        icon-left="code"
+        icon-left="menu_open"
         class="flat icon-button"
         @click="inspectDOM()"
       />

packages/app-frontend/src/features/components/composable/components.ts

@@ -216,14 +216,21 @@ export function useSelectedComponent () {
     })
   }
 
+  function scrollToComponent () {
+    bridge.send(BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, {
+      instanceId: data.value.id
+    })
+  }
+
   return {
     data,
     state,
     stateFilter: selectedComponentStateFilter,
     inspectDOM,
     fileIsPath,
     openFile,
-    editState
+    editState,
+    scrollToComponent
   }
 }