node

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;