Transformed paste in 3 functions and fixed problem with edges

src/frontend/src/contexts/tabsContext.tsx

@@ -300,7 +300,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       let fileData = JSON.parse(text);
       if (fileData.flows) {
         fileData.flows.forEach((flow: FlowType) => {
-          id = addFlow(flow, newProject);
+          id = addFlow(newProject, flow);
         });
       }
       // parse the text into a JSON object
@@ -376,6 +376,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     selectionInstance: { nodes: Node[]; edges: Edge[] },
     position: { x: number; y: number; paneX?: number; paneY?: number }
   ) {
+    console.log(selectionInstance);
     let minimumX = Infinity;
     let minimumY = Infinity;
     let idsMap = {};
@@ -395,6 +396,33 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       : reactFlowInstance!.project({ x: position.x, y: position.y });
 
     selectionInstance.nodes.forEach((node: NodeType) => {
+      nodes = updateNodeId(
+        node,
+        idsMap,
+        nodes,
+        insidePosition,
+        minimumX,
+        minimumY
+      );
+    });
+
+    reactFlowInstance!.setNodes(nodes);
+
+    selectionInstance.edges.forEach((edge: Edge) => {
+      edges = updateEdgeId(edge, idsMap, edges);
+    });
+
+    reactFlowInstance!.setEdges(edges);
+  }
+
+  const updateNodeId = (
+    node: NodeType,
+    idsMap,
+    nodes,
+    insidePosition,
+    minimumX,
+    minimumY
+  ) => {
     // Generate a unique node ID
     let newId = getNodeId(node.data.type);
     idsMap[node.id] = newId;
@@ -417,10 +445,11 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     nodes = nodes
       .map((node) => ({ ...node, selected: false }))
       .concat({ ...newNode, selected: false });
-    });
-    reactFlowInstance!.setNodes(nodes);
 
-    selectionInstance.edges.forEach((edge: Edge) => {
+    return nodes;
+  };
+
+  const updateEdgeId = (edge: Edge, idsMap, edges) => {
     let source = idsMap[edge.source];
     let target = idsMap[edge.target];
     const sourceHandleObject: sourceHandleType = scapeJSONParse(
@@ -442,14 +471,10 @@ export function TabsProvider({ children }: { children: ReactNode }) {
     targetHandleObject.id = target;
     edge.data.targetHandle = targetHandleObject;
     let id =
-        "reactflow__edge-" +
+      "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle;
-        source +
-        sourceHandle +
-        "-" +
-        target +
-        targetHandle;
     edges = addEdge(
       {
+        data: edge.data,
         source,
         target,
         sourceHandle,
@@ -465,9 +490,9 @@ export function TabsProvider({ children }: { children: ReactNode }) {
       },
       edges.map((edge) => ({ ...edge, selected: false }))
     );
-    });
+
-    reactFlowInstance!.setEdges(edges);
+    return edges;
-  }
+  };
 
   const addFlow = async (
     newProject: Boolean,