Merge pull request #231 from FalkorDB/close-menu-on-scroll

Fix #230 close menu on scroll

Author: AviAvni

app/components/code-graph.tsx

@@ -407,7 +407,7 @@ export function CodeGraph({
                                                 </div>
                                             </div>
                                         }
-                                        <Toolbar className="pointer-events-auto" chartRef={chartRef} />
+                                        <Toolbar setSelectedObj={setSelectedObj} className="pointer-events-auto" chartRef={chartRef} />
                                     </div>
                                 </div>
                                 <ElementTooltip

app/components/toolbar.tsx

@@ -1,27 +1,35 @@
 import { CircleDot, Minus, Plus } from "lucide-react";
 import { cn } from "@/lib/utils"
+import { Dispatch, RefObject, SetStateAction } from "react";
+import { Node } from "./model";
 
-export function Toolbar(params: {
-    chartRef: React.RefObject<cytoscape.Core>, className?: string
-}) {
+interface Props {
+    chartRef: RefObject<cytoscape.Core>
+    setSelectedObj: Dispatch<SetStateAction<Node | undefined>>
+    className?: string
+}
+
+export function Toolbar({ chartRef, setSelectedObj, className }: Props) {
 
     function handleZoomClick(changefactor: number) {
-        let chart = params.chartRef.current
+        let chart = chartRef.current
         if (chart) {
             chart.zoom(chart.zoom() * changefactor)
         }
+        setSelectedObj(undefined)
     }
 
     function handleCenterClick() {
-        let chart = params.chartRef.current
+        let chart = chartRef.current
         if (chart) {
             chart.fit(undefined, 80)
             chart.center()
         }
+        setSelectedObj(undefined)
     }
 
     return (
-        <div className={cn("bg-white flex flex-row rounded overflow-hidden", params.className)}>
+        <div className={cn("bg-white flex flex-row rounded overflow-hidden", className)}>
             <button
                 className="border p-2"
                 onClick={() => handleZoomClick(0.9)}