up 10/9

src/nodes/NoteFlow.tsx

@@ -13,7 +13,8 @@ import { FaShuffle } from 'react-icons/fa6';
 import '../assets/css/style.css';
 import Tabbar from './Tabbar.tsx';
 import ShowPopup from './ShowPopup.tsx';
-import { v4 as uuidv4 } from 'uuid';
+import { nanoid } from 'nanoid';
+import CustomEdge from './CustomEdge';
 
 const initialNodes = [
   {
@@ -87,13 +88,13 @@ const NoteFlow = () => {
   const [nodeToDelete, setNodeToDelete] = useState(null);
   const [showPopup, setShowPopup] = useState(false);
   const [selectedNodeContent, setSelectedNodeContent] = useState('');
+  const [addNodeCallback, setAddNodeCallback] = useState(() => () => {});
 
   const handleAddNoteClick = () => {
     setShowTabBar(true);
-    const handleNodeSelect = (selectedNode) => {
+    setAddNodeCallback(() => (selectedNode) => {
       addNodeBetween(selectedNode, sourceId, targetId);
-    };
-    setAddNodeCallback(() => addNodeBetweenWithIds);
+    });
   };
 
   const onNodeClick = (event, node) => {
@@ -149,28 +150,38 @@ const NoteFlow = () => {
     return lastNode.position.y + spacing;
   };
 
+  const removeEdgesRelatedToNode = (nodeId) => {
+    setEdges((eds) =>
+      eds.filter((edge) => edge.source !== nodeId && edge.target !== nodeId)
+    );
+  };
+
   const addNode = (option) => {
-    const newNodeId = uuidv4(); // Generate a unique ID for the new node
+    const newNodeId = nanoid(8); // Generate a unique ID for the new node
     const addNoteNode = nodes.find((node) => node.id === '2');
     const initialX = addNoteNode.position.x;
+    console.log(initialX);
+
     const nextY =
       nodes.length > 2
         ? getNextYPosition(initialX, 130)
         : addNoteNode.position.y;
 
-    if (option.id === '4') {
-      // Handle specific option case
-      setNodes((nds) => nds.filter((node) => node.id !== '2'));
+    // Remove existing edges from addNoteNode
+    setEdges((eds) =>
+      eds.filter((edge) => edge.source !== '2' && edge.target !== '2')
+    );
 
+    if (option.id === '4') {
       const repliedNode = {
         id: newNodeId,
         key: option.key,
         data: { label: option.htmlNode },
-        position: { x: option.position.x, y: nextY }
+        position: { x: initialX, y: nextY }
       };
 
       const yesNode = {
-        id: uuidv4(),
+        id: nanoid(8),
         type: 'output',
         key: 'contact-exists',
         data: {
@@ -188,12 +199,12 @@ const NoteFlow = () => {
             </div>
           )
         },
-        position: { x: option.position.x - 150, y: nextY + 150 }
+        position: { x: initialX - 150, y: nextY + 150 }
       };
 
       const noNode = {
-        id: uuidv4(),
-        type: 'output',
+        id: nanoid(8),
+        type: '',
         key: 'send-survey',
         data: {
           label: (
@@ -210,30 +221,50 @@ const NoteFlow = () => {
             </div>
           )
         },
-        position: { x: option.position.x + 150, y: nextY + 150 }
+        position: { x: initialX + 150, y: nextY + 150 }
       };
 
+      // Di chuyển node add-note sang nhánh no
+      setNodes((nds) =>
+        nds.map((node) =>
+          node.id === '2'
+            ? {
+                ...node,
+                position: {
+                  x: noNode.position.x,
+                  y: noNode.position.y + 150
+                }
+              }
+            : node
+        )
+      );
+
+      // Thêm các node mới (replied, yes, no)
       setNodes((nds) => [...nds, repliedNode, yesNode, noNode]);
 
+      // Kết nối các edges giữa các node
       setEdges((eds) => [
         ...eds,
         {
-          id: uuidv4(),
+          id: nanoid(8),
           source: repliedNode.id,
           target: yesNode.id,
-          label: 'yes',
-          animated: false
+          label: 'yes'
         },
         {
-          id: uuidv4(),
+          id: nanoid(8),
           source: repliedNode.id,
           target: noNode.id,
-          label: 'no',
-          animated: false
+          label: 'no'
         },
-        { id: uuidv4(), source: lastNodeId, target: repliedNode.id }
+        { id: nanoid(8), source: lastNodeId, target: repliedNode.id },
+        { id: nanoid(8), source: noNode.id, target: addNoteNode.id }
       ]);
+
+      setLastNodeId(noNode.id);
     } else {
+      console.log(option);
+
       // Add new node logic
       if (addNoteNode) {
         const initialX = addNoteNode.position.x;
@@ -256,24 +287,37 @@ const NoteFlow = () => {
         key: option.key,
         data: { label: option.htmlNode },
         position: {
-          x: option.position.x,
+          x: initialX,
           y: nodes.length > 2 ? nextY : addNoteNode.position.y
         }
       };
 
-      console.log(getNextYPosition(option.position.x, 130));
+      const newEdge = {
+        id: nanoid(8),
+        source: lastNodeId,
+        target: newNodeId
+      };
 
       setNodes((nds) => [...nds, newNode]);
-
       setEdges((eds) => [
         ...eds,
-        {
-          id: uuidv4(),
-          source: lastNodeId,
-          target: newNodeId
-        }
+        newEdge,
+        { id: nanoid(8), source: newNodeId, target: addNoteNode.id }
       ]);
 
+      // setEdges((eds) => [
+      //   ...eds,
+      //   {
+      //     id: uuidv4(),
+      //     source: lastNodeId,
+      //     data: {
+      //       label: <div onClick={handleAddNoteClick}>Add Note</div>, // Use HTML or React component
+      //       onClick: handleAddNoteClick
+      //     },
+      //     target: newNodeId
+      //   }
+      // ]);
+      // Cuộn tới node mới thêm
       setLastNodeId(newNodeId);
     }
 
@@ -294,6 +338,7 @@ const NoteFlow = () => {
       <ReactFlow
         nodes={nodes}
         edges={edges}
+        edgeTypes={{ custom: CustomEdge }}
         onNodeClick={onNodeClick}
         onNodeContextMenu={onNodeContextMenu}
         panOnScroll