feat(reactflowUtils.ts): add findLastNodeType type to represent the input for findLastNode function
feat(reactflowUtils.ts): add filterFlow function to filter out selected nodes and edges from the flow feat(reactflowUtils.ts): add updateFlowPosition function to update the position of nodes in the flow based on a new position fix(reactflowUtils.ts): fix return type of generateFlow function to use generateFlowType type instead of inline type definition
This commit is contained in:
parent
67e364ef35
commit
2e7f362867
2 changed files with 45 additions and 2 deletions
|
|
@ -20,4 +20,9 @@ export type updateEdgesHandleIdsType = {
|
||||||
edges: Edge[];
|
edges: Edge[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export type generateFlowType = { newFlow: FlowType; removedEdges: Edge[] }
|
export type generateFlowType = { newFlow: FlowType; removedEdges: Edge[] }
|
||||||
|
|
||||||
|
export type findLastNodeType = {
|
||||||
|
nodes: NodeType[];
|
||||||
|
edges: Edge[];
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@ import {
|
||||||
OnSelectionChangeParams,
|
OnSelectionChangeParams,
|
||||||
ReactFlowInstance,
|
ReactFlowInstance,
|
||||||
ReactFlowJsonObject,
|
ReactFlowJsonObject,
|
||||||
|
XYPosition,
|
||||||
} from "reactflow";
|
} from "reactflow";
|
||||||
import { specialCharsRegex } from "../constants/constants";
|
import { specialCharsRegex } from "../constants/constants";
|
||||||
import { APITemplateType } from "../types/api";
|
import { APITemplateType } from "../types/api";
|
||||||
|
|
@ -17,6 +18,8 @@ import {
|
||||||
} from "../types/flow";
|
} from "../types/flow";
|
||||||
import {
|
import {
|
||||||
cleanEdgesType,
|
cleanEdgesType,
|
||||||
|
findLastNodeType,
|
||||||
|
generateFlowType,
|
||||||
unselectAllNodesType,
|
unselectAllNodesType,
|
||||||
updateEdgesHandleIdsType,
|
updateEdgesHandleIdsType,
|
||||||
} from "../types/utils/reactflowUtils";
|
} from "../types/utils/reactflowUtils";
|
||||||
|
|
@ -409,7 +412,7 @@ export function generateFlow(
|
||||||
selection: OnSelectionChangeParams,
|
selection: OnSelectionChangeParams,
|
||||||
reactFlowInstance: ReactFlowInstance,
|
reactFlowInstance: ReactFlowInstance,
|
||||||
name: string
|
name: string
|
||||||
): { newFlow: FlowType; removedEdges: Edge[] } {
|
): generateFlowType {
|
||||||
const newFlowData = reactFlowInstance.toObject();
|
const newFlowData = reactFlowInstance.toObject();
|
||||||
|
|
||||||
/* remove edges that are not connected to selected nodes on both ends
|
/* remove edges that are not connected to selected nodes on both ends
|
||||||
|
|
@ -439,3 +442,38 @@ export function generateFlow(
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function filterFlow(
|
||||||
|
selection: OnSelectionChangeParams,
|
||||||
|
reactFlowInstance: ReactFlowInstance
|
||||||
|
) {
|
||||||
|
reactFlowInstance.setNodes((nodes) =>
|
||||||
|
nodes.filter((node) => !selection.nodes.includes(node))
|
||||||
|
);
|
||||||
|
reactFlowInstance.setEdges((edges) =>
|
||||||
|
edges.filter((edge) => !selection.edges.includes(edge))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function findLastNode({
|
||||||
|
nodes,
|
||||||
|
edges,
|
||||||
|
}: findLastNodeType) {
|
||||||
|
/*
|
||||||
|
this function receives a flow and return the last node
|
||||||
|
*/
|
||||||
|
let lastNode = nodes.find((n) => !edges.some((e) => e.source === n.id));
|
||||||
|
return lastNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
|
||||||
|
const middlePoint = getMiddlePoint(flow.data!.nodes);
|
||||||
|
let deltaPosition = {
|
||||||
|
x: NewPosition.x - middlePoint.x,
|
||||||
|
y: NewPosition.y - middlePoint.y,
|
||||||
|
};
|
||||||
|
flow.data!.nodes.forEach((node) => {
|
||||||
|
node.position.x += deltaPosition.x;
|
||||||
|
node.position.y += deltaPosition.y;
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue