update remove

src/nodes/NoteFlow.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState,useCallback } from 'react';
 import {ReactFlow, addEdge, Controls, Background, MarkerType  } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { FiUser, FiMail, FiCheckCircle,FiList } from 'react-icons/fi';
@@ -112,6 +112,7 @@ const NoteFlow = () => {
   const [showAdditionalOptions, setShowAdditionalOptions] = useState(false);
   const [selectedNodeContent, setSelectedNodeContent] = useState('');
   const [showPopup, setShowPopup] = useState(false);
+  const [nodeToDelete, setNodeToDelete] = useState(null);
 
   const handleAddNoteClick = () => {
     setShowTabBar(true);
@@ -203,14 +204,22 @@ const NoteFlow = () => {
 
   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)));
+  const onNodeContextMenu = useCallback((event, node) => {
+    event.preventDefault(); // Ngăn không cho menu chuột phải mặc định hiện ra
+    setNodeToDelete(node);
+  }, []);
+
+  const handleNodeDelete = () => {
+    if (nodeToDelete) {
+      setNodes((nds) => nds.filter((node) => node.id !== nodeToDelete.id));
+      setEdges((eds) => eds.filter((edge) => edge.source !== nodeToDelete.id && edge.target !== nodeToDelete.id));
+      setNodeToDelete(null);
+    }
   };
 
   return (
     <div style={{ height: '100vh', width: '100%' }}>
-      <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} onNodeClick={onNodeClick}  onNodesDelete={handleNodeDelete}>
+      <ReactFlow nodes={nodes} edges={edges} onConnect={onConnect} onNodeClick={onNodeClick}  onNodeContextMenu={onNodeContextMenu}>
         <Controls />
         <Background  />
       </ReactFlow>
@@ -288,6 +297,29 @@ const NoteFlow = () => {
         </div>
         </>
       )}
+       {nodeToDelete && (
+        <div
+          style={{
+            position: 'absolute',
+            top: nodeToDelete.position.y - 12,
+            left: nodeToDelete.position.x + 260,
+            zIndex: 10,
+          }}
+        >
+          <button
+            onClick={handleNodeDelete}
+            style={{
+              background: 'red',
+              color: 'white',
+              border: 'none',
+              borderRadius: '4px',
+              cursor: 'pointer'
+            }}
+          >
+            X
+          </button>
+        </div>
+      )}
     </div>
   );
 };