fix(web): Calculation logic adjustment of variableList

This commit is contained in:
zhaoying
2026-01-15 13:38:27 +08:00
parent 04eaf35567
commit 4c8da85050
8 changed files with 55 additions and 23 deletions

View File

@@ -1960,6 +1960,9 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
addMessage: 'Add Message',
answerDesc: 'Reply',
addNode: 'Add Node',
arrange: 'Arrange',
redo: 'Redo',
undo: 'Undo',
},
emotionEngine: {
emotionEngineConfig: 'Emotion Engine Configuration',

View File

@@ -2057,6 +2057,9 @@ export const zh = {
addMessage: '添加消息',
answerDesc: '回复',
addNode: '添加节点',
arrange: '整理',
redo: '重做',
undo: '撤销',
},
emotionEngine: {
emotionEngineConfig: '情感引擎配置',

View File

@@ -36,7 +36,7 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
if (cycleId) {
const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === cycleId);
if (parentNode) {
parentNode.insertChild(newNode);
parentNode.addChild(newNode);
}
}
@@ -48,7 +48,6 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
source: { cell: edge.getSourceCellId(), port: edge.getSourcePortId() },
target: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'left')?.id || 'left' },
attrs: edge.getAttrs(),
zIndex: 1,
});
});
@@ -59,7 +58,6 @@ const AddNode: ReactShapeConfig['component'] = ({ node, graph }) => {
source: { cell: newNode.id, port: newNode.getPorts().find((port: any) => port.group === 'right')?.id || 'right' },
target: { cell: edge.getTargetCellId(), port: targetPortId },
attrs: edge.getAttrs(),
zIndex: 1,
});
});

View File

@@ -18,7 +18,7 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
}, 50)
return () => clearTimeout(timer)
}, [])
}, [graph])
const checkAndAddAddNode = () => {
if (!graph) return;
@@ -44,15 +44,15 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
},
});
node.insertChild(addNode);
node.addChild(addNode);
// 连接cycle-start和add-node
const sourcePorts = cycleStartNode.getPorts();
const targetPorts = addNode.getPorts();
const sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
const targetPort = targetPorts.find((port: any) => port.group === 'left')?.id || 'left';
// 直接创建连线,不使用异步
// 然后创建连线
graph.addEdge({
source: { cell: cycleStartNode.id, port: sourcePort },
target: { cell: addNode.id, port: targetPort },
@@ -107,8 +107,8 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
cycle: data.id,
},
});
node.insertChild(cycleStartNode)
node.insertChild(addNode)
node.addChild(cycleStartNode)
node.addChild(addNode)
const sourcePorts = cycleStartNode.getPorts()
const targetPorts = addNode.getPorts()
let sourcePort = sourcePorts.find((port: any) => port.group === 'right')?.id || 'right';
@@ -133,7 +133,6 @@ const LoopNode: ReactShapeConfig['component'] = ({ node, graph }) => {
},
},
}
graph.addEdge(edgeConfig)
}

View File

@@ -129,7 +129,7 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
if (sourceNodeData.cycle) {
const parentNode = graph.getNodes().find((n: any) => n.getData()?.id === sourceNodeData.cycle);
if (parentNode) {
parentNode.insertChild(newNode);
parentNode.addChild(newNode);
}
}
@@ -159,7 +159,7 @@ const PortClickHandler: React.FC<PortClickHandlerProps> = ({ graph }) => {
},
},
},
zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
// zIndex: sourceNodeData.cycle && sourceNodeType == 'cycle-start' ? 1 : sourceNodeData.cycle ? 2 : 0
});
// 循环节点内子节点通过连接桩添加时,调整循环节点大小

View File

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
import { Graph, Node } from '@antv/x6';
import { Form, Input, Button, Select, InputNumber, Slider, Space, Divider, App, Switch } from 'antd'
import type { NodeConfig, NodeProperties, StartVariableItem, VariableEditModalRef } from '../../types'
import type { NodeConfig, NodeProperties, StartVariableItem, VariableEditModalRef, ChatVariable } from '../../types'
import Empty from '@/components/Empty';
import emptyIcon from '@/assets/images/workflow/empty.png'
import CustomSelect from "@/components/CustomSelect";
@@ -34,11 +34,12 @@ interface PropertiesProps {
copyEvent: () => void;
parseEvent: () => void;
config?: any;
chatVariables: ChatVariable[];
}
const Properties: FC<PropertiesProps> = ({
selectedNode,
graphRef,
config: workflowConfig,
chatVariables
}) => {
const { t } = useTranslation()
const { modal } = App.useApp()
@@ -47,6 +48,7 @@ const Properties: FC<PropertiesProps> = ({
const values = Form.useWatch([], form);
const variableModalRef = useRef<VariableEditModalRef>(null)
const [editIndex, setEditIndex] = useState<number | null>(null)
const [graphUpdateTrigger, setGraphUpdateTrigger] = useState(0)
const prevMappingNamesRef = useRef<string[]>([])
const prevTemplateVarsRef = useRef<string[]>([])
const syncTimeoutRef = useRef<number | null>(null)
@@ -349,11 +351,9 @@ const Properties: FC<PropertiesProps> = ({
const parentPreviousNodeIds = getAllPreviousNodes(parentLoopNode.id);
allRelevantNodeIds.push(...parentPreviousNodeIds);
}
// Add conversation variables from global config
const conversationVariables = workflowConfig?.variables || [];
const conversationVariables = chatVariables || [];
conversationVariables.forEach((variable: any) => {
const key = `CONVERSATION_${variable.name}`;
@@ -763,7 +763,36 @@ const Properties: FC<PropertiesProps> = ({
}
return variableList;
}, [selectedNode, graphRef, workflowConfig?.variables]);
}, [selectedNode, graphRef, graphUpdateTrigger, chatVariables]);
// Trigger variableList update when graph edges or nodes change
useEffect(() => {
if (!graphRef?.current) return;
const graph = graphRef.current;
const handleGraphChange = () => {
console.log('handleGraphChange')
// Force variableList recalculation by updating trigger
setGraphUpdateTrigger(prev => prev + 1);
};
// Listen to graph changes
graph.on('edge:added', handleGraphChange);
graph.on('edge:removed', handleGraphChange);
graph.on('edge:changed', handleGraphChange);
graph.on('node:added', handleGraphChange);
graph.on('node:removed', handleGraphChange);
graph.on('node:change:data', handleGraphChange);
return () => {
graph.off('edge:added', handleGraphChange);
graph.off('edge:removed', handleGraphChange);
graph.off('edge:changed', handleGraphChange);
graph.off('node:added', handleGraphChange);
graph.off('node:removed', handleGraphChange);
graph.off('node:change:data', handleGraphChange);
};
}, [graphRef]);
// Filter out boolean type variables for loop and llm nodes
const getFilteredVariableList = (nodeType?: string, key?: string) => {

View File

@@ -54,7 +54,7 @@ export const useWorkflowGraph = ({
const historyRef = useRef<{ undoStack: string[], redoStack: string[] }>({ undoStack: [], redoStack: [] });
const [canUndo, setCanUndo] = useState(false);
const [canRedo, setCanRedo] = useState(false);
const [isHandMode, setIsHandMode] = useState(false);
const [isHandMode, setIsHandMode] = useState(true);
const [config, setConfig] = useState<WorkflowConfig | null>(null);
const [chatVariables, setChatVariables] = useState<ChatVariable[]>([])
@@ -235,7 +235,7 @@ export const useWorkflowGraph = ({
if (parentNode) {
const addedChild = graphRef.current?.addNode(childNode)
if (addedChild) {
parentNode.insertChild(addedChild)
parentNode.addChild(addedChild)
}
}
}
@@ -354,7 +354,7 @@ export const useWorkflowGraph = ({
},
},
},
zIndex: loopIterationCount
// zIndex: loopIterationCount
}
return edgeConfig
@@ -694,10 +694,9 @@ export const useWorkflowGraph = ({
thickness: 1, // 网点大小
}
},
panning: false,
panning: isHandMode,
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta'],
},
connecting: {
// router: 'orth',

View File

@@ -107,6 +107,7 @@ const Workflow = forwardRef<WorkflowRef>((_props, ref) => {
copyEvent={copyEvent}
parseEvent={parseEvent}
config={config}
chatVariables={chatVariables}
/>
<Chat
ref={chatRef}