diff --git a/src/frontend/src/stores/flowsManagerStore.ts b/src/frontend/src/stores/flowsManagerStore.ts index 81637fba0..90bf82169 100644 --- a/src/frontend/src/stores/flowsManagerStore.ts +++ b/src/frontend/src/stores/flowsManagerStore.ts @@ -199,11 +199,10 @@ const useFlowsManagerStore = create((set, get) => ({ position?: XYPosition, fromDragAndDrop?: boolean, ): Promise => { + let flowData = flow + ? processDataFromFlow(flow) + : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } }; if (newProject) { - let flowData = flow - ? processDataFromFlow(flow) - : { nodes: [], edges: [], viewport: { zoom: 1, x: 0, y: 0 } }; - // Create a new flow with a default name if no flow is provided. const folder_id = useFolderStore.getState().folderUrl; const my_collection_id = useFolderStore.getState().myCollectionId; @@ -272,7 +271,7 @@ const useFlowsManagerStore = create((set, get) => ({ useFlowStore .getState() .paste( - { nodes: flow!.data!.nodes, edges: flow!.data!.edges }, + { nodes: flowData?.nodes, edges: flowData?.edges }, position ?? { x: 10, y: 10 }, ); } diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index b379b445e..97384e714 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -191,8 +191,8 @@ export const processDataFromFlow = (flow: FlowType, refreshIds = true) => { let data = flow?.data ? flow.data : null; if (data) { processFlowEdges(flow); - //prevent node update for now - // processFlowNodes(flow); + //add dropdown option to nodeOutputs + processFlowNodes(flow); //add animation to text type edges updateEdges(data.edges); // updateNodes(data.nodes, data.edges); @@ -410,6 +410,34 @@ export function updateEdgesHandleIds({ return newEdges; } +export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) { + let newEdges = cloneDeep(edges); + let newNodes = cloneDeep(nodes); + newNodes.forEach((node) => { + if ( + !node.data.node?.outputs && + (node.data.node?.base_classes ?? []).length > 0 + ) { + const selected = node.data.node?.base_classes[0]!; + node.data.node!.outputs = [ + { types: node.data.node!.base_classes, selected: selected }, + ]; + newEdges.forEach((edge) => { + if (edge.source === node.id && edge.sourceHandle) { + let newSourceHandle: sourceHandleType = scapeJSONParse( + edge.sourceHandle, + ); + newSourceHandle.baseClasses = [selected]; + edge.sourceHandle = scapedJSONStringfy(newSourceHandle); + edge.data.sourceHandle = newSourceHandle; + } + }); + } + }); + + return { nodes: newNodes, edges: newEdges }; +} + export function handleKeyDown( e: | React.KeyboardEvent @@ -561,6 +589,10 @@ export function checkOldEdgesHandles(edges: Edge[]): boolean { ); } +export function checkOldNodesOutput(nodes: NodeType[]): boolean { + return nodes.some((node) => !node.data.node?.outputs); +} + export function customStringify(obj: any): string { if (typeof obj === "undefined") { return "null"; @@ -1017,6 +1049,15 @@ export function processFlowEdges(flow: FlowType) { }); } +export function processFlowNodes(flow: FlowType) { + if (!flow.data || !flow.data.nodes) return; + if (checkOldNodesOutput(flow.data.nodes)) { + const { nodes, edges } = updateNewOutput(flow.data); + flow.data.nodes = nodes; + flow.data.edges = edges; + } +} + export function expandGroupNode( id: string, flow: FlowType,