feat: add method scrollToNode

Author: phphe

lib/HeTree.tsx

@@ -601,7 +601,23 @@ export function useHeTree<T extends Record<string, any>>(
         }
         return index
       }
-      return { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot }
+      function scrollToNode(idOrNodeOrStat: Id | T | Stat<T>, block: 'start' | 'end' | 'center' | 'nearest' = 'start') {
+        const stat = getStat(idOrNodeOrStat)
+        if (!stat) {
+          return false
+        }
+        let index = visibleIds.indexOf(stat.id)
+        if (index === -1) {
+          return false
+        }
+        if (virtualListRef.current) {
+          virtualListRef.current.scrollToIndex(index, block)
+          return true
+        } else {
+          return false
+        }
+      }
+      return { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot, scrollToNode }
     }, [mainCache, indent, draggingStat,
     // watch placeholder position
     placeholder?.parentStat, placeholder?.index,
@@ -639,7 +655,7 @@ export function useHeTree<T extends Record<string, any>>(
   }, [props.keepPlaceholder])
   useAddEventListener(t2.getEl, 'dragover', t2.onDragOverWindow)
   // 
-  const { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot } = cacheForVisible
+  const { visibleIds, attrsList, onDragOverRoot, onDropToRoot, onDragEndOnRoot, scrollToNode } = cacheForVisible
   const persistentIndices = useMemo(() => draggingStat ? [visibleIds.indexOf(draggingStat.id)] : [], [draggingStat, visibleIds]);
   // render
   const renderTree = (options?: { className?: string, style?: React.CSSProperties }): ReactNode => {
@@ -671,6 +687,8 @@ export function useHeTree<T extends Record<string, any>>(
     draggingStat, dragOverStat, placeholder,
     // render
     renderTree, renderHeTree: renderTree,
+    // methods
+    scrollToNode,
   }
 }
 // react components ==================================

src/PageLayout.tsx

@@ -65,6 +65,10 @@ export default function PageLayout(props: {}) {
       title: 'Big Data with Virtual List',
       path: '/virtual_list'
     },
+    {
+      title: 'Scroll to Node',
+      path: '/scroll_to_node',
+    },
     {
       title: 'Home',
       path: '/',

src/main.tsx

@@ -23,6 +23,7 @@ const Pages = {
   dragopen: lazy(() => import("./pages/dragopen.tsx")),
   external_drag: lazy(() => import("./pages/external_drag.tsx")),
   virtual_list: lazy(() => import("./pages/virtual_list.tsx")),
+  scroll_to_node: lazy(() => import("./pages/scroll_to_node.tsx")),
 }
 const router = createHashRouter([
   {
@@ -85,6 +86,10 @@ const router = createHashRouter([
         path: "/virtual_list",
         element: <Pages.virtual_list />,
       },
+      {
+        path: '/scroll_to_node',
+        element: <Pages.scroll_to_node />
+      },
     ]
   },
 ]);

src/pages/scroll_to_node.tsx

@@ -0,0 +1,52 @@
+import { useHeTree, sortFlatData } from "he-tree-react";
+import type { Id } from "he-tree-react";
+import { useState } from 'react';
+
+export default function BasePage() {
+  const keys = { idKey: 'id', parentIdKey: 'pid' };
+  // prettier-ignore
+  const [data, setdata] = useState(() => sortFlatData(createData(), keys));
+  const [openIds, setopenIds] = useState<Id[] | undefined>([]);
+  const handleOpen = (id: Id, open: boolean) => {
+    if (open) {
+      setopenIds([...(openIds || allIds), id]);
+    } else {
+      setopenIds((openIds || allIds).filter((i) => i !== id));
+    }
+  }
+  const { renderTree, allIds, scrollToNode } = useHeTree({
+    ...keys,
+    data,
+    dataType: 'flat',
+    onChange: setdata,
+    openIds,
+    virtual: true,
+    renderNode: ({ id, node, open, checked, draggable }) => <div>
+      <button onClick={() => handleOpen(id, !open)}>{open ? '-' : '+'}</button>
+      {id}
+    </div>,
+  })
+  return <div>
+    <button onClick={() => scrollToNode(910)}>Scroll to 910</button>
+    {renderTree({ style: { width: '300px', height: '300px', border: '1px solid #555', padding: '20px' } })}
+  </div>
+}
+
+// generate 10000 nodes
+function createData() {
+  const genId = () => result.length
+  const result: { id: number, pid: number | null }[] = [];
+  for (let i = 0; i < 1000; i++) {
+    let id1 = genId()
+    result.push({ id: id1, pid: null })
+    for (let j = 0; j < 4; j++) {
+      result.push({ id: genId(), pid: id1 })
+    }
+    let id2 = genId()
+    result.push({ id: id2, pid: null })
+    for (let j = 0; j < 4; j++) {
+      result.push({ id: genId(), pid: id2 })
+    }
+  }
+  return result;
+}