1
This commit is contained in:
dengqichen
parent
091ea4fe7b
commit
e76af9b8f5
@ -23,11 +23,11 @@ import '@antv/x6-plugin-keyboard';
|
||||
import '@antv/x6-plugin-history';
|
||||
import '@antv/x6-plugin-clipboard';
|
||||
import '@antv/x6-plugin-transform';
|
||||
import { Selection } from '@antv/x6-plugin-selection';
|
||||
import { MiniMap } from '@antv/x6-plugin-minimap';
|
||||
import { Clipboard } from '@antv/x6-plugin-clipboard';
|
||||
import { History } from '@antv/x6-plugin-history';
|
||||
import { Transform } from '@antv/x6-plugin-transform';
|
||||
import {Selection} from '@antv/x6-plugin-selection';
|
||||
import {MiniMap} from '@antv/x6-plugin-minimap';
|
||||
import {Clipboard} from '@antv/x6-plugin-clipboard';
|
||||
import {History} from '@antv/x6-plugin-history';
|
||||
import {Transform} from '@antv/x6-plugin-transform';
|
||||
import {getDefinitionDetail, saveDefinition} from '../service';
|
||||
import {getNodeDefinitionList} from './service';
|
||||
import NodePanel from './components/NodePanel';
|
||||
@ -132,10 +132,10 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
return !exists;
|
||||
},
|
||||
validateMagnet({ magnet }) {
|
||||
validateMagnet({magnet}) {
|
||||
return magnet.getAttribute('port-group') !== 'top';
|
||||
},
|
||||
validateEdge({ edge }) {
|
||||
validateEdge({edge}) {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
@ -184,7 +184,6 @@ const WorkflowDesign: React.FC = () => {
|
||||
const history = new History({
|
||||
enabled: true,
|
||||
beforeAddCommand(event: any, args: any) {
|
||||
console.log('History command added:', event, args);
|
||||
return true;
|
||||
},
|
||||
afterExecuteCommand: () => {
|
||||
@ -216,9 +215,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
showAnchorSelectionBox: false,
|
||||
pointerEvents: 'auto'
|
||||
});
|
||||
console.log('Initializing Selection plugin:', selection);
|
||||
graph.use(selection);
|
||||
|
||||
graph.use(new MiniMap({
|
||||
container: minimapContainerRef.current!,
|
||||
width: minimapWidth,
|
||||
@ -238,12 +235,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
async: true,
|
||||
frozen: true,
|
||||
interacting: false,
|
||||
grid: false,
|
||||
getCellView(cell) {
|
||||
if (cell.isNode()) {
|
||||
return SimpleNodeView;
|
||||
}
|
||||
},
|
||||
grid: false
|
||||
},
|
||||
viewport: {
|
||||
padding: 0,
|
||||
@ -268,20 +260,14 @@ const WorkflowDesign: React.FC = () => {
|
||||
(graph as any).history = history;
|
||||
|
||||
// 监听图形变化
|
||||
graph.on('cell:added', ({ cell }) => {
|
||||
graph.on('cell:added', ({cell}) => {
|
||||
const canUndo = history.canUndo();
|
||||
const canRedo = history.canRedo();
|
||||
console.log('Cell added:', {
|
||||
cell,
|
||||
canUndo,
|
||||
canRedo,
|
||||
stackSize: history.stackSize,
|
||||
});
|
||||
// 强制更新组件状态
|
||||
setForceUpdate(prev => !prev);
|
||||
});
|
||||
|
||||
graph.on('cell:removed', ({ cell }) => {
|
||||
graph.on('cell:removed', ({cell}) => {
|
||||
const canUndo = history.canUndo();
|
||||
const canRedo = history.canRedo();
|
||||
console.log('Cell removed:', {
|
||||
@ -294,16 +280,9 @@ const WorkflowDesign: React.FC = () => {
|
||||
setForceUpdate(prev => !prev);
|
||||
});
|
||||
|
||||
graph.on('cell:changed', ({ cell, options }) => {
|
||||
graph.on('cell:changed', ({cell, options}) => {
|
||||
const canUndo = history.canUndo();
|
||||
const canRedo = history.canRedo();
|
||||
console.log('Cell changed:', {
|
||||
cell,
|
||||
options,
|
||||
canUndo,
|
||||
canRedo,
|
||||
stackSize: history.stackSize,
|
||||
});
|
||||
// 强制更新组件状态
|
||||
setForceUpdate(prev => !prev);
|
||||
});
|
||||
@ -319,7 +298,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 处理连线重新连接
|
||||
graph.on('edge:moved', ({ edge, terminal, previous }) => {
|
||||
graph.on('edge:moved', ({edge, terminal, previous}) => {
|
||||
if (!edge || !terminal) return;
|
||||
|
||||
const isSource = terminal.type === 'source';
|
||||
@ -355,7 +334,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 处理连线更改
|
||||
graph.on('edge:change:source edge:change:target', ({ edge, current, previous }) => {
|
||||
graph.on('edge:change:source edge:change:target', ({edge, current, previous}) => {
|
||||
if (edge && current) {
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
@ -541,7 +520,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 节点点击事件
|
||||
graph.on('node:click', ({ node }) => {
|
||||
graph.on('node:click', ({node}) => {
|
||||
// 获取当前选中的节点
|
||||
const selectedNode = graph.getSelectedCells()[0];
|
||||
|
||||
@ -599,7 +578,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
const closeMenu = () => {
|
||||
isOpen = false;
|
||||
root.render(
|
||||
<Dropdown menu={{ items }} open={false} onOpenChange={(open) => {
|
||||
<Dropdown menu={{items}} open={false} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
root.unmount();
|
||||
@ -607,7 +586,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
}, 100);
|
||||
}
|
||||
}}>
|
||||
<div />
|
||||
<div/>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
@ -640,8 +619,8 @@ const WorkflowDesign: React.FC = () => {
|
||||
];
|
||||
|
||||
root.render(
|
||||
<Dropdown menu={{ items }} open={isOpen}>
|
||||
<div />
|
||||
<Dropdown menu={{items}} open={isOpen}>
|
||||
<div/>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -672,7 +651,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
const closeMenu = () => {
|
||||
isOpen = false;
|
||||
root.render(
|
||||
<Dropdown menu={{ items }} open={false} onOpenChange={(open) => {
|
||||
<Dropdown menu={{items}} open={false} onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setTimeout(() => {
|
||||
root.unmount();
|
||||
@ -680,7 +659,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
}, 100);
|
||||
}
|
||||
}}>
|
||||
<div />
|
||||
<div/>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
@ -703,8 +682,8 @@ const WorkflowDesign: React.FC = () => {
|
||||
];
|
||||
|
||||
root.render(
|
||||
<Dropdown menu={{ items }} open={isOpen}>
|
||||
<div />
|
||||
<Dropdown menu={{items}} open={isOpen}>
|
||||
<div/>
|
||||
</Dropdown>
|
||||
);
|
||||
|
||||
@ -718,17 +697,17 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 禁用默认的右键菜单
|
||||
graph.on('blank:contextmenu', ({ e }) => {
|
||||
graph.on('blank:contextmenu', ({e}) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 禁用节点的右键菜单
|
||||
graph.on('node:contextmenu', ({ e }) => {
|
||||
graph.on('node:contextmenu', ({e}) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 禁用边的右键菜单
|
||||
graph.on('edge:contextmenu', ({ e }) => {
|
||||
graph.on('edge:contextmenu', ({e}) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
@ -749,7 +728,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 连线开始时的处理
|
||||
graph.on('edge:connected', ({ edge }) => {
|
||||
graph.on('edge:connected', ({edge}) => {
|
||||
// 设置连线样式
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
@ -764,7 +743,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 连线悬停效果
|
||||
graph.on('edge:mouseenter', ({ edge }) => {
|
||||
graph.on('edge:mouseenter', ({edge}) => {
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
stroke: '#52c41a',
|
||||
@ -773,7 +752,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
});
|
||||
|
||||
graph.on('edge:mouseleave', ({ edge }) => {
|
||||
graph.on('edge:mouseleave', ({edge}) => {
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
stroke: '#5F95FF',
|
||||
@ -783,7 +762,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 允许拖动连线中间的点和端点
|
||||
graph.on('edge:selected', ({ edge }) => {
|
||||
graph.on('edge:selected', ({edge}) => {
|
||||
edge.addTools([
|
||||
{
|
||||
name: 'source-arrowhead',
|
||||
@ -835,12 +814,12 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 连线工具移除
|
||||
graph.on('edge:unselected', ({ edge }) => {
|
||||
graph.on('edge:unselected', ({edge}) => {
|
||||
edge.removeTools();
|
||||
});
|
||||
|
||||
// 连线移动到其他连接桩时的样式
|
||||
graph.on('edge:connected', ({ edge }) => {
|
||||
graph.on('edge:connected', ({edge}) => {
|
||||
edge.setAttrs({
|
||||
line: {
|
||||
stroke: '#5F95FF',
|
||||
@ -854,7 +833,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 连线悬停在连接桩上时的样式
|
||||
graph.on('edge:mouseenter', ({ edge }) => {
|
||||
graph.on('edge:mouseenter', ({edge}) => {
|
||||
const ports = document.querySelectorAll('.x6-port-body');
|
||||
ports.forEach((port) => {
|
||||
const portGroup = port.getAttribute('port-group');
|
||||
@ -864,7 +843,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
});
|
||||
|
||||
graph.on('edge:mouseleave', ({ edge }) => {
|
||||
graph.on('edge:mouseleave', ({edge}) => {
|
||||
const ports = document.querySelectorAll('.x6-port-body');
|
||||
ports.forEach((port) => {
|
||||
port.setAttribute('style', 'visibility: hidden');
|
||||
@ -903,7 +882,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
message.info('剪贴板为空');
|
||||
return;
|
||||
}
|
||||
const cells = graph.paste({ offset: 32 });
|
||||
const cells = graph.paste({offset: 32});
|
||||
graph.cleanSelection();
|
||||
graph.select(cells);
|
||||
message.success('已粘贴');
|
||||
@ -944,7 +923,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
response.graph?.nodes?.forEach((workflowDefinitionNode: any) => {
|
||||
const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions);
|
||||
// 保存节点配置
|
||||
node.setProp('config', workflowDefinitionNode.config);
|
||||
node.setProp('workflowDefinitionNode', workflowDefinitionNode);
|
||||
nodeMap.set(workflowDefinitionNode.id, node);
|
||||
});
|
||||
|
||||
@ -1060,6 +1039,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
const handleNodeConfigUpdate = (values: any) => {
|
||||
if (!selectedNode) return;
|
||||
// 更新节点配置
|
||||
console.log("// 更新节点配置", values);
|
||||
selectedNode.setProp('config', values);
|
||||
// 更新节点显示名称
|
||||
if (values.name) {
|
||||
@ -1094,17 +1074,18 @@ const WorkflowDesign: React.FC = () => {
|
||||
type: nodeType,
|
||||
name: node.attr('label/text'),
|
||||
graph: {
|
||||
shape: nodeDefinition?.graphConfig.uiSchema.shape,
|
||||
size: {
|
||||
width: node.size().width,
|
||||
height: node.size().height
|
||||
},
|
||||
style: nodeDefinition?.graphConfig.uiSchema.style,
|
||||
ports: nodeDefinition?.graphConfig.uiSchema.ports,
|
||||
position: {
|
||||
x: position.x,
|
||||
y: position.y
|
||||
}
|
||||
// shape: nodeDefinition?.graphConfig.uiSchema.shape,
|
||||
// size: {
|
||||
// width: node.size().width,
|
||||
// height: node.size().height
|
||||
// },
|
||||
// style: nodeDefinition?.graphConfig.uiSchema.style,
|
||||
// ports: nodeDefinition?.graphConfig.uiSchema.ports,
|
||||
// position: {
|
||||
// x: position.x,
|
||||
// y: position.y
|
||||
// }
|
||||
uiVariables: nodeDefinition.uiVariables
|
||||
},
|
||||
config: node.getProp('config') || {}
|
||||
};
|
||||
@ -1162,7 +1143,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Tooltip title="返回">
|
||||
<Button
|
||||
className="back-button"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
icon={<ArrowLeftOutlined/>}
|
||||
onClick={() => navigate('/workflow/definition')}
|
||||
/>
|
||||
</Tooltip>
|
||||
@ -1173,7 +1154,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Space.Compact>
|
||||
<Tooltip title="撤销">
|
||||
<Button
|
||||
icon={<UndoOutlined />}
|
||||
icon={<UndoOutlined/>}
|
||||
onClick={handleUndo}
|
||||
disabled={!(graph as any)?.history?.canUndo()}
|
||||
>
|
||||
@ -1182,7 +1163,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
</Tooltip>
|
||||
<Tooltip title="重做">
|
||||
<Button
|
||||
icon={<RedoOutlined />}
|
||||
icon={<RedoOutlined/>}
|
||||
onClick={handleRedo}
|
||||
disabled={!(graph as any)?.history?.canRedo()}
|
||||
>
|
||||
@ -1193,19 +1174,19 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Space.Compact>
|
||||
<Tooltip title="剪切">
|
||||
<Button
|
||||
icon={<ScissorOutlined />}
|
||||
icon={<ScissorOutlined/>}
|
||||
onClick={handleCut}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="复制">
|
||||
<Button
|
||||
icon={<CopyOutlined />}
|
||||
icon={<CopyOutlined/>}
|
||||
onClick={handleCopy}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="粘贴">
|
||||
<Button
|
||||
icon={<SnippetsOutlined />}
|
||||
icon={<SnippetsOutlined/>}
|
||||
onClick={handlePaste}
|
||||
/>
|
||||
</Tooltip>
|
||||
@ -1213,7 +1194,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Space.Compact>
|
||||
<Tooltip title="放大">
|
||||
<Button
|
||||
icon={<ZoomInOutlined />}
|
||||
icon={<ZoomInOutlined/>}
|
||||
onClick={handleZoomIn}
|
||||
disabled={scale >= 2}
|
||||
>
|
||||
@ -1222,7 +1203,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
</Tooltip>
|
||||
<Tooltip title="缩小">
|
||||
<Button
|
||||
icon={<ZoomOutOutlined />}
|
||||
icon={<ZoomOutOutlined/>}
|
||||
onClick={handleZoomOut}
|
||||
disabled={scale <= 0.2}
|
||||
>
|
||||
@ -1233,7 +1214,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Space.Compact>
|
||||
<Tooltip title="全选">
|
||||
<Button
|
||||
icon={<SelectOutlined />}
|
||||
icon={<SelectOutlined/>}
|
||||
onClick={() => {
|
||||
if (!graph) return;
|
||||
|
||||
@ -1269,7 +1250,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
</Tooltip>
|
||||
<Tooltip title="删除">
|
||||
<Button
|
||||
icon={<DeleteOutlined />}
|
||||
icon={<DeleteOutlined/>}
|
||||
onClick={() => {
|
||||
if (!graph) return;
|
||||
const cells = graph.getSelectedCells();
|
||||
@ -1291,7 +1272,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
<Tooltip title="保存">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
icon={<SaveOutlined/>}
|
||||
onClick={handleSaveWorkflow}
|
||||
>
|
||||
保存
|
||||
@ -1315,7 +1296,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
onDrop={handleDrop}
|
||||
onDragOver={handleDragOver}
|
||||
/>
|
||||
<div ref={minimapContainerRef} className="minimap-container" />
|
||||
<div ref={minimapContainerRef} className="minimap-container"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -108,6 +108,7 @@ const validateAllNodesConfig = (graph: Graph): ValidationResult => {
|
||||
|
||||
for (const node of nodes) {
|
||||
const nodeDefinition = node.getProp('nodeDefinition');
|
||||
console.log(nodeDefinition)
|
||||
const result = validateNodeConfig(node, nodeDefinition);
|
||||
if (!result.valid) {
|
||||
return result;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { BaseResponse, BaseQuery } from '@/types/base';
|
||||
import {BaseResponse, BaseQuery} from '@/types/base';
|
||||
|
||||
export interface WorkflowDefinition extends BaseResponse {
|
||||
id: number;
|
||||
@ -10,7 +10,7 @@ export interface WorkflowDefinition extends BaseResponse {
|
||||
category: string;
|
||||
triggers: string[];
|
||||
graph: {
|
||||
nodes: any[];
|
||||
nodes: WorkflowDefinitionNode[];
|
||||
edges: any[];
|
||||
};
|
||||
formConfig: {
|
||||
@ -18,6 +18,17 @@ export interface WorkflowDefinition extends BaseResponse {
|
||||
};
|
||||
}
|
||||
|
||||
export interface WorkflowDefinitionNode {
|
||||
id: number;
|
||||
code: string;
|
||||
type: string;
|
||||
name: string;
|
||||
uiVariables: JSON;
|
||||
panelVariables: JSON;
|
||||
localVariables: JSON;
|
||||
formVariables: JSON;
|
||||
}
|
||||
|
||||
export interface WorkflowDefinitionQuery extends BaseQuery {
|
||||
name?: string;
|
||||
key?: string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user