node

src/App.tsx

@@ -4,7 +4,7 @@ import {
   addEdge,
   applyEdgeChanges,
   applyNodeChanges,
-  Background
+  Background,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
@@ -107,6 +107,13 @@ function Flow() {
     [setEdges],
   );
 
+ const onNodesDelete = useCallback((deletedNodes) => {
+    console.log('Các node đã bị xóa:', deletedNodes);
+
+    // Lọc lại danh sách nodes sau khi xóa
+    setNodes((nds) => nds.filter((node) => !deletedNodes.some((deletedNode) => deletedNode.id === node.id)));
+  }, []);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -115,6 +122,7 @@ function Flow() {
       onEdgesChange={onEdgesChange}
       onConnect={onConnect}
       nodeTypes={nodeTypes}
+      onNodesDelete={onNodesDelete}
       fitView
       >
       <Background />

src/nodes/NoteFlow.tsx

@@ -70,7 +70,7 @@ const tabBarOptions = [
     },
 ];
 
-// Nội dung cho mỗi node
+// Nội dung popup cho mỗi node
 const nodeContents = {
   '2': `
     <label for="email-subject">Subject:</label>
@@ -199,14 +199,18 @@ const NoteFlow = () => {
 
   const hideenPopup = () => {
     setShowPopup(false);
-    console.log('hide')
   }
 
   const onConnect = (params) => setEdges((eds) => addEdge(params, eds));
 
+   const handleNodeDelete = (nodesToDelete) => {
+    setNodes((nds) => nds.filter((node) => !nodesToDelete.some((n) => n.id === node.id)));
+    setEdges((eds) => eds.filter((edge) => !nodesToDelete.some((n) => n.id === edge.source || n.id === edge.target)));
+  };
+
   return (
     <div style={{ height: '100vh', width: '100%' }}>
-      <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} onNodeClick={onNodeClick}>
+      <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} onNodeClick={onNodeClick}  onNodesDelete={handleNodeDelete}>
         <Controls />
         <Background  />
       </ReactFlow>
@@ -269,7 +273,7 @@ const NoteFlow = () => {
       )}
       {showPopup && (
         <>
-        <button className="popup-overlay" onClick={hideenPopup}></button>
+        <div className="popup-overlay" onClick={hideenPopup}></div>
         <div
          className={`popup global-popup ${showPopup ? '' : 'hidden'}`}
         >
@@ -288,6 +292,4 @@ const NoteFlow = () => {
   );
 };
 
-export default NoteFlow;
+export default NoteFlow;
-
-