diff --git a/frontend/src/components/Diagram.jsx b/frontend/src/components/Diagram.jsx index 83c50d8..bc67b8d 100644 --- a/frontend/src/components/Diagram.jsx +++ b/frontend/src/components/Diagram.jsx @@ -17,6 +17,7 @@ const nodeTypes = { function Diagram() { const [nodes, setNodes, onNodesChange] = useNodesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]); + const [selectedNode, setSelectedNode] = useState(null); useEffect(() => { fetchDiagram().then((data) => { @@ -44,18 +45,26 @@ function Diagram() { const handleAddNode = () => { const id = (nodes.length + 1).toString(); + const icon = prompt('Enter icon URL:', 'https://s3.dvirlabs.com/lab-icons/default.svg') || 'https://s3.dvirlabs.com/lab-icons/default.svg'; + const label = prompt('Enter label:', `Node ${id}`) || `Node ${id}`; + const newNode = { id, type: 'custom', - data: { - label: `Node ${id}`, - icon: 'https://s3.dvirlabs.com/lab-icons/default.svg', - }, + data: { label, icon }, position: { x: Math.random() * 400, y: Math.random() * 300 }, }; + setNodes((nds) => [...nds, newNode]); }; + const handleDeleteNode = () => { + if (!selectedNode) return; + setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id)); + setEdges((eds) => eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id)); + setSelectedNode(null); + }; + const onConnect = useCallback( (params) => setEdges((eds) => addEdge({ ...params, animated: true }, eds)), [setEdges] @@ -72,11 +81,16 @@ function Diagram() { } }; + const onNodeClick = (_, node) => { + setSelectedNode(node); + }; + return (
+