better render canvas

LangGraph-GUI · Jan 11, 2025 · 5160621 · 5160621
1 parent defec60
commit 5160621
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 25 deletions.
diff --git a/GraphApp.css b/GraphApp.css
@@ -0,0 +1,12 @@
+/* GraphApp.css */
+
+.react-flow__controls button svg {
+    fill: black;
+    stroke: black;
+}
+
+.react-flow__background {
+    background-color: #f0f0f0; /* Example: light gray background */
+    /* You can also add a background pattern: */
+    /* background-image: repeating-linear-gradient(45deg, #e0e0e0, #e0e0e0 10px, #f0f0f0 10px, #f0f0f0 20px); */
+}
diff --git a/GraphApp.tsx b/GraphApp.tsx
@@ -6,9 +6,9 @@ import '@xyflow/react/dist/style.css';
 import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../redux/store';
 import { updateSubGraph } from './subGraphs.store';
-import { useMemo, useCallback, useEffect, useState } from 'react';
+import { useMemo, useCallback, useEffect, useState, useRef } from 'react';
 import Panel from './Panel';
-
+import './GraphApp.css'
 
 const initialGraphData = {
     graphName: "root",
@@ -25,10 +25,11 @@ const GraphApp: React.FC = () => {
     const subGraphs = useSelector((state: RootState) => state.subGraphs.subGraphs);
     const currentGraphName = useSelector((state: RootState) => state.subGraphs.currentGraphName);
     const dispatch = useDispatch();
-
     const { screenToFlowPosition } = useReactFlow();
-
     const [contextMenu, setContextMenu] = useState<{mouseX: number, mouseY: number} | null>(null);
+    const [canvasHeight, setCanvasHeight] = useState<number>(window.innerHeight);
+    const menuBarRef = useRef<HTMLDivElement>(null);  //ref for menu bar
+
 
     const getGraph = useCallback((graphName: string) => {
         return subGraphs.find((graph) => graph.graphName === graphName);
@@ -84,30 +85,54 @@ const GraphApp: React.FC = () => {
         onClick: handleCloseContextMenu,
     }),[handlePaneContextMenu,handleCloseContextMenu])
 
+    useEffect(() => {
+        const handleResize = () => {
+            if (menuBarRef.current) {
+                const menuBarHeight = menuBarRef.current.offsetHeight;
+                setCanvasHeight(window.innerHeight - menuBarHeight - 10);
+            } else {
+                setCanvasHeight(window.innerHeight-10);
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize();
+
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+
+
     return (
         <div style={{ width: '100vw', height: '100vh' }}>
-            <Panel />
-            <ReactFlow 
-                nodes={currentGraph.nodes} 
-                edges={currentGraph.edges}
-                {...reactFlowProps}
-            >
-                <MiniMap />
-                <Background />
-                <Controls />
-            </ReactFlow>
-            {contextMenu && (
-                <div
-                    className="absolute bg-white border border-gray-300 z-1000 p-2"
-                    style={{
-                        top: contextMenu.mouseY,
-                        left: contextMenu.mouseX,
-                    }}
+            {/*Assuming you have a div with ref for menuBar*/}
+            <div ref={menuBarRef}>
+                <Panel />
+            </div> 
+
+            <div style={{ height: `${canvasHeight}px` }} className="w-full">
+                <ReactFlow 
+                    nodes={currentGraph.nodes} 
+                    edges={currentGraph.edges}
+                    {...reactFlowProps}
                 >
-                    <button onClick={handleAddNode} className="block bg-green-500 hover:bg-green-700 text-white font-bold px-2 rounded">Add Node</button>
-                    <button onClick={handleCloseContextMenu} className="block bg-gray-500 hover:bg-gray-700 text-white font-bold px-2 rounded">Cancel</button>
-                </div>
-            )}
+                    <MiniMap />
+                    <Background />
+                    <Controls />
+                </ReactFlow>
+                {contextMenu && (
+                    <div
+                        className="absolute bg-white border border-gray-300 z-1000 p-2"
+                        style={{
+                            top: contextMenu.mouseY,
+                            left: contextMenu.mouseX,
+                        }}
+                    >
+                        <button onClick={handleAddNode} className="block bg-green-500 hover:bg-green-700 text-white font-bold px-2 rounded">Add Node</button>
+                        <button onClick={handleCloseContextMenu} className="block bg-gray-500 hover:bg-gray-700 text-white font-bold px-2 rounded">Cancel</button>
+                    </div>
+                )}
+            </div>   
         </div>
     );
 };