fix: multiple sub nodes

Author: Yourz

src/components/common/TreeExplorer.vue

@@ -24,7 +24,7 @@
             e.stopImmediatePropagation()
           }
         }),
-        nodeChildren: ({ instance }) => getNodeChildrenStyle(instance)
+        nodeChildren: ({ instance }) => getNodeChildrenStyle(instance.node as RenderedTreeExplorerNode)
       }"
     >
       <template #folder="{ node }">
@@ -120,8 +120,6 @@ const viewRows = computed(() =>
 const bufferRows = computed(() => Math.max(1, Math.floor(viewRows.value / 3)))
 const windowSize = computed(() => viewRows.value + bufferRows.value * 2)
 
-// Compute window ranges for all nodes based on scroll position
-// Each node's window is calculated relative to its children list
 const parentWindowRanges = computed<Record<string, WindowRange>>(() => {
   if (!containerHeight.value || !renderedRoot.value.children) {
     return {}
@@ -131,8 +129,8 @@ const parentWindowRanges = computed<Record<string, WindowRange>>(() => {
   const scrollTop = scrollY.value
   const scrollBottom = scrollTop + containerHeight.value
 
-  // Calculate cumulative positions for nodes in the tree
   const nodePositions = new Map<string, number>()
+  const nodeEndPositions = new Map<string, number>()
   let currentPos = 0
 
   const calculatePositions = (node: RenderedTreeExplorerNode): number => {
@@ -146,14 +144,14 @@ const parentWindowRanges = computed<Record<string, WindowRange>>(() => {
       }
     }
 
+    nodeEndPositions.set(node.key, currentPos)
     return currentPos
   }
 
   for (const child of renderedRoot.value.children) {
     currentPos = calculatePositions(child)
   }
 
-  // Compute windows for each node based on scroll position
   const computeNodeWindow = (node: RenderedTreeExplorerNode) => {
     if (!node.children || node.leaf) return
 
@@ -162,21 +160,21 @@ const parentWindowRanges = computed<Record<string, WindowRange>>(() => {
 
     const nodeStart = nodePositions.get(node.key) ?? 0
     const childrenStart = nodeStart + DEFAULT_NODE_HEIGHT
-    const childrenEnd =
-      childrenStart + node.children.length * DEFAULT_NODE_HEIGHT
+    const totalChildren = node.children.length
 
-    // Check if this node's children are in the visible range
-    const isVisible =
-      childrenEnd >= scrollTop - bufferRows.value * DEFAULT_NODE_HEIGHT &&
-      childrenStart <= scrollBottom + bufferRows.value * DEFAULT_NODE_HEIGHT
+    if (totalChildren === 0) return
 
-    const totalChildren = node.children.length
+    const childrenEnd = nodeEndPositions.get(node.key) ?? childrenStart
+
+    const relativeScrollTop = Math.max(0, scrollTop - childrenStart)
+    const relativeScrollBottom = Math.max(0, scrollBottom - childrenStart)
 
-    if (isVisible && totalChildren > 0) {
-      // Calculate which children should be visible based on scroll position
-      const relativeScrollTop = Math.max(0, scrollTop - childrenStart)
-      const relativeScrollBottom = Math.max(0, scrollBottom - childrenStart)
+    const bufferHeight = bufferRows.value * DEFAULT_NODE_HEIGHT
+    const childrenAreaVisible =
+      childrenStart <= scrollBottom + bufferHeight &&
+      childrenEnd >= scrollTop - bufferHeight
 
+    if (childrenAreaVisible) {
       const fromRow = Math.max(
         0,
         Math.floor(relativeScrollTop / DEFAULT_NODE_HEIGHT) - bufferRows.value
@@ -194,17 +192,15 @@ const parentWindowRanges = computed<Record<string, WindowRange>>(() => {
         )
       }
     } else {
-      // Node is outside visible range, use minimal window
+      // Node is outside visible range, show initial window
       ranges[node.key] = createInitialWindowRange(
         totalChildren,
         windowSize.value
       )
     }
 
-    // Recursively compute windows for children
-    const range = ranges[node.key]
-    for (let i = range.start; i < range.end && i < node.children.length; i++) {
-      computeNodeWindow(node.children[i])
+    for (const child of node.children) {
+      computeNodeWindow(child)
     }
   }
 
@@ -271,8 +267,7 @@ const displayRoot = computed<RenderedTreeExplorerNode>(() => ({
   )
 }))
 
-const getNodeChildrenStyle = (instance: any) => {
-  const node = instance.node as RenderedTreeExplorerNode
+const getNodeChildrenStyle = (node: RenderedTreeExplorerNode) => {
   if (!node?.children || node.leaf) {
     return { class: 'virtual-node-children' }
   }