1
This commit is contained in:
asp_ly
parent
5c88430ebc
commit
7a44697c56
@ -1,17 +1,17 @@
|
||||
import React, { useEffect, useState, useRef } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Button, Space, Card, Row, Col, message, Modal } from 'antd';
|
||||
import { ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined } from '@ant-design/icons';
|
||||
import { Graph, Cell } from '@antv/x6';
|
||||
import React, {useEffect, useState, useRef} from 'react';
|
||||
import {useParams, useNavigate} from 'react-router-dom';
|
||||
import {Button, Space, Card, Row, Col, message, Modal} from 'antd';
|
||||
import {ArrowLeftOutlined, SaveOutlined, PlayCircleOutlined} from '@ant-design/icons';
|
||||
import {Graph, Cell} from '@antv/x6';
|
||||
import '@antv/x6-plugin-snapline';
|
||||
import { getDefinitionDetail, saveDefinition } from '../service';
|
||||
import { getNodeDefinitionList } from './service';
|
||||
import {getDefinitionDetail, saveDefinition} from '../service';
|
||||
import {getNodeDefinitionList} from './service';
|
||||
import NodePanel from './components/NodePanel';
|
||||
import NodeConfigDrawer from './components/NodeConfigModal';
|
||||
import { NodeDefinition } from './types';
|
||||
import { validateWorkflow } from './utils/validator';
|
||||
import { addNodeToGraph } from './utils/nodeUtils';
|
||||
import { applyAutoLayout } from './utils/layoutUtils';
|
||||
import {NodeDefinition} from './types';
|
||||
import {validateWorkflow} from './utils/validator';
|
||||
import {addNodeToGraph} from './utils/nodeUtils';
|
||||
import {applyAutoLayout} from './utils/layoutUtils';
|
||||
import {
|
||||
GRID_CONFIG,
|
||||
CONNECTING_CONFIG,
|
||||
@ -20,7 +20,7 @@ import {
|
||||
} from './constants';
|
||||
|
||||
const WorkflowDesign: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const {id} = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [title, setTitle] = useState<string>('工作流设计');
|
||||
const graphContainerRef = useRef<HTMLDivElement>(null);
|
||||
@ -81,14 +81,14 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 显示/隐藏连接桩
|
||||
graph.on('node:mouseenter', ({ node }) => {
|
||||
graph.on('node:mouseenter', ({node}) => {
|
||||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||||
ports.forEach((port) => {
|
||||
port.setAttribute('style', 'visibility: visible');
|
||||
});
|
||||
});
|
||||
|
||||
graph.on('node:mouseleave', ({ node }) => {
|
||||
graph.on('node:mouseleave', ({node}) => {
|
||||
const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
|
||||
ports.forEach((port) => {
|
||||
port.setAttribute('style', 'visibility: hidden');
|
||||
@ -96,7 +96,7 @@ const WorkflowDesign: React.FC = () => {
|
||||
});
|
||||
|
||||
// 节点双击事件
|
||||
graph.on('node:dblclick', ({ node }) => {
|
||||
graph.on('node:dblclick', ({node}) => {
|
||||
const nodeType = node.getProp('type');
|
||||
console.log(nodeType)
|
||||
// 从节点定义列表中找到对应的定义
|
||||
@ -144,11 +144,11 @@ const WorkflowDesign: React.FC = () => {
|
||||
const targetNode = nodeMap.get(edge.to);
|
||||
if (sourceNode && targetNode) {
|
||||
graphInstance.addEdge({
|
||||
source: { cell: sourceNode.id },
|
||||
target: { cell: targetNode.id },
|
||||
attrs: { line: DEFAULT_STYLES.edge },
|
||||
source: {cell: sourceNode.id},
|
||||
target: {cell: targetNode.id},
|
||||
attrs: {line: DEFAULT_STYLES.edge},
|
||||
labels: [{
|
||||
attrs: { label: { text: edge.name || '' } }
|
||||
attrs: {label: {text: edge.name || ''}}
|
||||
}]
|
||||
});
|
||||
}
|
||||
@ -175,8 +175,8 @@ const WorkflowDesign: React.FC = () => {
|
||||
if (!nodeData) return;
|
||||
|
||||
const node = JSON.parse(nodeData);
|
||||
const { clientX, clientY } = e;
|
||||
const point = graph.clientToLocal({ x: clientX, y: clientY });
|
||||
const {clientX, clientY} = e;
|
||||
const point = graph.clientToLocal({x: clientX, y: clientY});
|
||||
addNodeToGraph(true, graph, node, nodeDefinitions, point);
|
||||
} catch (error) {
|
||||
console.error('创建节点失败:', error);
|
||||
@ -286,37 +286,16 @@ const WorkflowDesign: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '24px' }}>
|
||||
<Card
|
||||
title={title}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
icon={<SaveOutlined />}
|
||||
type="primary"
|
||||
onClick={handleSaveWorkflow}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={() => navigate('/workflow/definition')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<Row gutter={16}>
|
||||
<Col span={6}>
|
||||
<Col span={4}>
|
||||
<NodePanel
|
||||
nodeDefinitions={nodeDefinitions}
|
||||
onNodeDragStart={handleNodeDragStart}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={18}>
|
||||
<Col span={20}>
|
||||
<Card
|
||||
size="small"
|
||||
styles={{
|
||||
body: {
|
||||
padding: 0,
|
||||
@ -326,6 +305,23 @@ const WorkflowDesign: React.FC = () => {
|
||||
borderRadius: '4px',
|
||||
}
|
||||
}}
|
||||
extra={
|
||||
<Space>
|
||||
<Button
|
||||
icon={<SaveOutlined/>}
|
||||
type="primary"
|
||||
onClick={handleSaveWorkflow}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ArrowLeftOutlined/>}
|
||||
onClick={() => navigate('/workflow/definition')}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div
|
||||
ref={graphContainerRef}
|
||||
@ -339,8 +335,6 @@ const WorkflowDesign: React.FC = () => {
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
|
||||
<NodeConfigDrawer
|
||||
visible={configModalVisible}
|
||||
node={selectedNode}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user