Fix node select

warioddly · May 13, 2024 · fa87e8f · fa87e8f
1 parent f7f279b
commit fa87e8f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 24 deletions.
diff --git a/src/components/tree/TreeInteractiveViewer.tsx b/src/components/tree/TreeInteractiveViewer.tsx
@@ -28,6 +28,17 @@ export function TreeInteractiveViewer() {
   const [highlighter, setHighlighter] = useState<CollectionReturnValue | null>(null)
 
 
+  useEffect(() => {
+
+    if (loading) {
+      return;
+    }
+
+    treeStore.cy.fit();
+
+  }, [loading]);
+
+
   useEffect(() => {
 
     fetch('/api/get-nodes', {
@@ -67,13 +78,14 @@ export function TreeInteractiveViewer() {
 
     handleHighlight(evt);
 
-    if (evt.target !== treeStore.cy && !evt.target.isNode()) {
+    const target = evt.target;
+
+    if (target === treeStore.cy || !target.isNode()) {
+      treeStore.setSelected(null);
       return;
     }
 
-    const node = evt.target;
-    treeStore.cy.center(node);
-    treeStore.setSelected(node.data());
+    treeStore.setSelected(target.data());
 
   }
 
@@ -124,9 +136,6 @@ export function TreeInteractiveViewer() {
                   cy={(cy) => {
                       treeStore.cy = cy;
                       cy.on('tap', handleNodeClick);
-                      cy.on('unselect', 'node', () => {
-                        treeStore.setSelected(null);
-                      });
                   }}
               />
           )}

diff --git a/src/components/tree/TreeViewToolbar.tsx b/src/components/tree/TreeViewToolbar.tsx
@@ -26,51 +26,53 @@ export function TreeViewToolbar() {
 
 function SearchField() {
 
+    const treeStore = useTreeStore();
+
     const [inputValue, setInputValue] = useState("");
     const [filteredData, setFilteredData] = useState<TreeNodeDefinition[]>([]);
     const [loading, setLoading] = useState(false);
     const debounceFilter = debounce(handleChange, 1e3);
 
     function handleChange(e: ChangeEvent<HTMLInputElement>) {
+        setLoading(true);
         setInputValue(e.target.value);
         filter();
     }
 
     function filter() {
 
-        setLoading(true);
 
         fetch('/api/search-node', {
             method: 'POST',
             body: JSON.stringify({value: inputValue}),
-            headers: {
-                'Content-Type': 'application/json'
-            }
         })
             .then(response => response.json())
-            .then((data: TreeNodeDefinition[]) => {
-                setFilteredData(data);
-            })
-            .catch(error => {
-                console.error('Error:', error);
-            })
+            .then((data: TreeNodeDefinition[]) => setFilteredData(data))
+            .catch(error => console.error('Error:', error))
             .finally(() => setLoading(false));
     }
 
 
     const handleClick = (node: TreeNodeDefinition) => {
-        console.log(node);
+
+        if (!node.data.id) {
+            return;
+        }
+
+        treeStore.setSelected(node.data)
+        setInputValue("");
     }
 
     return (
         <div className="z-20 fixed top-20 px-4 right-auto w-full md:w-auto md:right-0 md:px-4">
             <div className="w-full md:w-80 relative">
                 <div className="flex justify-between">
                     <label htmlFor="search" className="mb-2 text-sm font-medium sr-only text-white">Поиск</label>
-                    <input type="search"
-                           id="search"
-                           placeholder="Фамилия, имя, родословня..."
-                           className={` block w-full p-3 text-sm rounded-l-lg outline-none focus:border-blue-700 bg-black text-${theme.typography.primary} ${theme.backgroundBlur} ${theme.border.color} border`}
+                    <input
+                        type="search"
+                        id="search"
+                        placeholder="Фамилия, имя, родословня..."
+                        className={`block w-full p-3 text-sm outline-none focus:border-blue-700 bg-black text-${theme.typography.primary} ${theme.backgroundBlur} ${theme.border.color} ${theme.border.radius} border`}
                         onChange={debounceFilter}
                      />
                        {/*<button type="submit"  className={`flex justify-center items-center ${theme.typography.primary} end-1.5 bottom-2 ${theme.button.primary} hover:bg-${theme.button.primaryHover} outline-none rounded-r-lg text-sm px-4 py-2 ${theme.border.color} ${theme.backgroundBlur} border bg-black hover:border-blue-700 `}>*/}

diff --git a/src/core/stores/tree.ts b/src/core/stores/tree.ts
@@ -16,14 +16,26 @@ type TTreeStore = {
     setCy: (cy?: any) => void;
 }
 
-export const useTreeStore = create<TTreeStore>((set) => ({
+export const useTreeStore = create<TTreeStore>((set, get) => ({
     cy: null,
     event: null,
     selected: null,
     layout: ECytoscapeLayouts.Dagre,
     highlightType: ETreeHighlight.Predecessors,
     setLayout: (layout) => set(() => ({ layout })),
-    setSelected: (selected: TreeNodeDataDefinition | null) => set(() => ({ selected })),
+    setSelected: (node: TreeNodeDataDefinition | null) => {
+
+        const cy = get().cy;
+        cy?.elements().unselect();
+
+        if (node) {
+            const _node = cy?.elements(`#${node?.id}`);
+            cy?.center(_node);
+            _node?.select();
+        }
+
+        set(() => ({ selected: node }));
+    },
     setHighlightType: (highlightType) => set(() => ({ highlightType })),
     setEvent: (event) => set(() => ({ event })),
     setCy: (cy?: any) => set(() => ({ cy })),