Updated code for moving up and down the component tree

Author: mauryapari

packages/applet/src/modules/components/index.vue

@@ -11,7 +11,7 @@ import { vTooltip, VueButton, VueDialog, VueInput } from '@vue/devtools-ui'
 import { useElementSize, useEventListener, useToggle, watchDebounced } from '@vueuse/core'
 import { flatten, groupBy } from 'lodash-es'
 import { Pane, Splitpanes } from 'splitpanes'
-import { computed, onUnmounted, ref, watch, watchEffect } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, watchEffect } from 'vue'
 import SelectiveList from '~/components/basic/SelectiveList.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
@@ -283,32 +283,40 @@ useEventListener('keydown', (event) => {
   if (!activeComponentId.value)
     return
 
-  switch (event.key) {
-    case 'ArrowRight':
-      handleArrowRight()
-      break
-    case 'ArrowLeft':
-      handleArrowLeft()
-      break
-    case 'ArrowDown':
-      handleArrowDown()
-      event.preventDefault()
-      break
-    case 'ArrowUp':
-      handleArrowUp()
-      event.preventDefault()
-      break
-    case ' ':
-    case 'Enter': {
-      handleEnter()
-      event.preventDefault()
-      break
+  nextTick(() => {
+    switch (event.key) {
+      case 'ArrowRight':{
+        handleArrowRight()
+        break
+      }
+      case 'ArrowLeft': {
+        handleArrowLeft()
+        break
+      }
+      case 'ArrowDown': {
+        handleArrowDown()
+        event.preventDefault()
+        return false
+      }
+      case 'ArrowUp': {
+        handleArrowUp()
+        event.preventDefault()
+        break
+      }
+      case ' ':
+      case 'Enter': {
+        handleEnter()
+        break
+      }
     }
-  }
+  })
 })
 
 function handleArrowRight() {
-  if (!expandedTreeNodes.value.includes(activeComponentId.value)) {
+  const isPresentInExpandedNodes = expandedTreeNodes.value.includes(activeComponentId.value)
+  const hasChildren = flattenedTreeNodes.value.find(item => item.id === activeComponentId.value)?.children?.length
+
+  if (!isPresentInExpandedNodes && hasChildren) {
     expandedTreeNodes.value.push(activeComponentId.value)
   }
 }
@@ -330,25 +338,23 @@ function handleArrowDown() {
     return false
   }
   else {
-    const listIndex = treeNodeLinkedList.value.findIndex(arr => arr.includes(activeComponentId.value))
-    const nextTree = treeNodeLinkedList.value[listIndex + 1]
-    if (nextTree) {
-      activeComponentId.value = nextTree[1]
-    }
+    activeComponentId.value = getNearestNextNode()
   }
 }
 
 function handleArrowUp() {
-  const isSubTreeRoot = treeNodeLinkedList.value.some(chain => chain[1] === activeComponentId.value)
+  const activeId = activeComponentId.value
+  const list = treeNodeLinkedList.value.find(item => item.includes(activeId))
+  if (!list)
+    return
 
-  if (isSubTreeRoot) {
-    activeComponentId.value = getPrevExpandedNode()
-  }
-  else {
-    const currentIndex = flattenedTreeNodesIds.value.indexOf(activeComponentId.value)
-    if (currentIndex > 0) {
-      activeComponentId.value = flattenedTreeNodesIds.value[currentIndex - 1]
-    }
+  const activeItemListIndex = list.indexOf(activeId)
+  const activeItemParentIndex = activeItemListIndex > 0 ? activeItemListIndex - 1 : 0
+  const parentId = list[activeItemParentIndex]
+
+  const element = getNearestPreviousNode(parentId)
+  if (element) {
+    activeComponentId.value = element.id
   }
 }
 
@@ -363,13 +369,51 @@ function handleEnter() {
   else expandedTreeNodes.value.splice(index, 1)
 }
 
-function getPrevExpandedNode() {
-  const list = treeNodeLinkedList.value
-  const listIndex = list.findIndex((chain: string[]) => chain.includes(activeComponentId.value))
-  if (listIndex > 0) {
-    return list[listIndex - 1].find(id => !expandedTreeNodes.value.includes(id)) || list[listIndex - 1][1]
+function getNearestPreviousNode(parentId: string) {
+  const parentNode = flattenedTreeNodes.value.find(item => item.id === parentId)
+  if (!parentNode || !parentNode.children?.length)
+    return parentNode
+
+  if (parentNode.children.length === 1)
+    return parentNode
+
+  const indexInSiblings = parentNode?.children?.findIndex(item => item.id === activeComponentId.value)
+
+  if (indexInSiblings <= 0)
+    return parentNode
+
+  let prevSiblingNode = parentNode.children[indexInSiblings - 1]
+
+  while (prevSiblingNode
+    && expandedTreeNodes.value.includes(prevSiblingNode.id)
+    && prevSiblingNode.children?.length) {
+    const lastChildNode = prevSiblingNode.children[prevSiblingNode.children.length - 1]
+    const next = getNearestPreviousNode(lastChildNode.id)
+
+    if (!next || next.id === prevSiblingNode.id)
+      break
+    prevSiblingNode = next
   }
-  return list[listIndex][0]
+
+  return prevSiblingNode || parentNode
+}
+
+function getNearestNextNode() {
+  const linkedListTree = treeNodeLinkedList.value
+  const activeItemListIndex = [...linkedListTree]
+    .map((arr, index) => ({ arr, index }))
+    .reverse()
+    .find(({ arr }) => arr?.includes(activeComponentId.value))
+    ?.index as number
+
+  if (activeItemListIndex === -1)
+    return activeComponentId.value
+  const arr1 = linkedListTree[activeItemListIndex]
+  const arr2 = linkedListTree[activeItemListIndex + 1]
+
+  const cloesestNodeIndex = arr2?.findIndex((val, index) => val !== arr1[index]) ?? -1
+
+  return cloesestNodeIndex !== -1 ? arr2[cloesestNodeIndex] : activeComponentId.value
 }
 
 function scrollToComponent() {