diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css index 1a20e99fb..c1ab30e00 100644 --- a/src/frontend/src/App.css +++ b/src/frontend/src/App.css @@ -144,6 +144,12 @@ body { transition-duration: 150ms; stroke-width: 2px !important; } +.react-flow__connection path { + transition: color; + stroke: var(--connection) !important; + transition-duration: 150ms; + stroke-width: 2px !important; +} .react-flow__edge.running .react-flow__edge-path { stroke: hsl(var(--foreground)) !important; diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx index 2476b0438..2c871aba9 100644 --- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx @@ -54,7 +54,6 @@ import { useTypesStore } from "../../../../stores/typesStore"; import { APIClassType } from "../../../../types/api"; import { NodeType } from "../../../../types/flow"; import { - checkOldComponents, generateFlow, generateNodeFromFlow, getNodeId, @@ -535,7 +534,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element { onSelectionEnd={onSelectionEnd} onSelectionStart={onSelectionStart} connectionRadius={30} - elevateEdgesOnSelect={true} edgeTypes={edgeTypes} connectionLineComponent={ConnectionLineComponent} onDragOver={onDragOver} diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index dec02967d..9669753fc 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -32,7 +32,6 @@ import { FlowStoreType, VertexLayerElementType } from "../types/zustand/flow"; import { buildFlowVerticesWithFallback } from "../utils/buildUtils"; import { checkChatInput, - checkOldComponents, cleanEdges, detectBrokenEdgesEdges, getHandleId, @@ -278,6 +277,8 @@ const useFlowStore = create((set, get) => ({ return node; }); + const newEdges = cleanEdges(newNodes, get().edges); + if (callback) { // Defer the callback execution to ensure it runs after state updates are fully applied. queueMicrotask(callback); @@ -286,6 +287,7 @@ const useFlowStore = create((set, get) => ({ return { ...state, nodes: newNodes, + edges: newEdges, }; }); },