diff --git a/src/frontend/src/types/utils/reactflowUtils.ts b/src/frontend/src/types/utils/reactflowUtils.ts index ca2bc70a8..8db47fb7b 100644 --- a/src/frontend/src/types/utils/reactflowUtils.ts +++ b/src/frontend/src/types/utils/reactflowUtils.ts @@ -1,5 +1,6 @@ import { Edge, Node } from "reactflow"; -import { NodeType } from "../flow"; +import { FlowType, NodeType } from "../flow"; +import { generateFlow } from "../../utils/reactflowUtils"; export type cleanEdgesType = { flow: { @@ -18,3 +19,5 @@ export type updateEdgesHandleIdsType = { nodes: NodeType[]; edges: Edge[]; }; + +export type generateFlowType = { newFlow: FlowType; removedEdges: Edge[] } \ No newline at end of file diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index 897baa602..c6f8ec3f0 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -3,6 +3,7 @@ import { Connection, Edge, Node, + OnSelectionChangeParams, ReactFlowInstance, ReactFlowJsonObject, } from "reactflow"; @@ -20,6 +21,8 @@ import { updateEdgesHandleIdsType, } from "../types/utils/reactflowUtils"; import { toNormalCase } from "./utils"; +import ShortUniqueId from "short-unique-id"; +const uid = new ShortUniqueId({ length: 5 }); export function cleanEdges({ flow: { edges, nodes }, @@ -401,3 +404,38 @@ export function getMiddlePoint(nodes: Node[]) { return { x: averageX, y: averageY }; } + +export function generateFlow( + selection: OnSelectionChangeParams, + reactFlowInstance: ReactFlowInstance, + name: string +): { newFlow: FlowType; removedEdges: Edge[] } { + const newFlowData = reactFlowInstance.toObject(); + + /* remove edges that are not connected to selected nodes on both ends + in future we can save this edges to when ungrouping reconect to the old nodes + */ + newFlowData.edges = selection.edges.filter( + (edge) => + selection.nodes.some((node) => node.id === edge.target) && + selection.nodes.some((node) => node.id === edge.source) + ); + newFlowData.nodes = selection.nodes; + + const newFlow: FlowType = { + data: newFlowData, + name: name, + description: "", + //generating local id instead of using the id from the server, can change in the future + id: uid(), + }; + // filter edges that are not connected to selected nodes on both ends + // using O(n²) aproach because the number of edges is small + // in the future we can use a better aproach using a set + return { + newFlow, + removedEdges: selection.edges.filter( + (edge) => !newFlowData.edges.includes(edge) + ), + }; +}