refractor menu

Author: HomunMage

crewai-reactflow/src/App.js

@@ -11,33 +11,19 @@ import ReactFlow, {
   useEdgesState,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import './ContextMenu.css'; // Import the CSS for the context menu
+import ContextMenu from './ContextMenu'; // Import the ContextMenu component
 
 const initialNodes = [
   {
     id: '1',
     type: 'input',
     data: { label: 'Node 1' },
     position: { x: 250, y: 5 },
-    draggable: true, // Ensure node is draggable
+    draggable: true,
   },
 ];
 
-const ContextMenu = ({ x, y, onAddNode }) => (
-  <div
-    style={{
-      position: 'absolute',
-      top: y,
-      left: x,
-      backgroundColor: 'white',
-      border: '1px solid black',
-      padding: '10px',
-      zIndex: 1000,
-    }}
-  >
-    <button onClick={onAddNode}>Add Node</button>
-  </div>
-);
-
 const Flow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -54,8 +40,8 @@ const Flow = () => {
     const newNode = {
       id: `${+new Date()}`,
       data: { label: `Node ${nodes.length + 1}` },
-      position: { x: 250, y: 5 }, // Fixed position
-      draggable: true, // Ensure new nodes are draggable
+      position: { x: 250, y: 5 },
+      draggable: true,
     };
 
     setNodes((nds) => nds.concat(newNode));

crewai-reactflow/src/ContextMenu.css

@@ -2,26 +2,8 @@
 
 .context-menu {
   position: absolute;
-  z-index: 1000;
-  background: white;
-  border: 1px solid #ccc;
+  background-color: white;
+  border: 1px solid black;
   padding: 10px;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
-}
-
-.context-menu button {
-  display: block;
-  width: 100%;
-  padding: 5px 10px;
-  margin-bottom: 5px;
-  background: #f0f0f0;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  cursor: pointer;
-  text-align: left;
-}
-
-.context-menu button:hover {
-  background: #e0e0e0;
+  z-index: 1000;
 }

crewai-reactflow/src/ContextMenu.js

@@ -1,22 +1,12 @@
 // ContextMenu.js
 
 import React from 'react';
-import './ContextMenu.css';
+import './ContextMenu.css'; // Import the CSS for the context menu
 
-const ContextMenu = ({ menuPosition, onAddNode }) => {
-  if (!menuPosition) return null;
-
-  return (
-    <div
-      className="context-menu"
-      style={{
-        top: menuPosition.y,
-        left: menuPosition.x,
-      }}
-    >
-      <button onClick={onAddNode}>Add Node</button>
-    </div>
-  );
-};
+const ContextMenu = ({ x, y, onAddNode }) => (
+  <div className="context-menu" style={{ top: y, left: x }}>
+    <button onClick={onAddNode}>Add Node</button>
+  </div>
+);
 
 export default ContextMenu;