102 lines
2.0 KiB
TypeScript
102 lines
2.0 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { Graph } from '@antv/x6';
|
|
import { Card } from 'antd';
|
|
import { IX6GraphRef } from './types';
|
|
|
|
const X6TestPage: React.FC = () => {
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
const graphRef = useRef<IX6GraphRef>({ graph: null });
|
|
|
|
useEffect(() => {
|
|
if (containerRef.current) {
|
|
// 初始化画布
|
|
const graph = new Graph({
|
|
container: containerRef.current,
|
|
width: 800,
|
|
height: 600,
|
|
grid: true,
|
|
background: {
|
|
color: '#F5F5F5',
|
|
},
|
|
connecting: {
|
|
snap: true,
|
|
allowBlank: false,
|
|
allowLoop: false,
|
|
highlight: true,
|
|
},
|
|
});
|
|
|
|
// 保存graph实例
|
|
graphRef.current.graph = graph;
|
|
|
|
// 创建示例节点
|
|
const rect1 = graph.addNode({
|
|
x: 100,
|
|
y: 100,
|
|
width: 100,
|
|
height: 40,
|
|
label: '节点 1',
|
|
attrs: {
|
|
body: {
|
|
fill: '#fff',
|
|
stroke: '#1890ff',
|
|
strokeWidth: 1,
|
|
},
|
|
label: {
|
|
fill: '#000',
|
|
},
|
|
},
|
|
});
|
|
|
|
const rect2 = graph.addNode({
|
|
x: 300,
|
|
y: 100,
|
|
width: 100,
|
|
height: 40,
|
|
label: '节点 2',
|
|
attrs: {
|
|
body: {
|
|
fill: '#fff',
|
|
stroke: '#1890ff',
|
|
strokeWidth: 1,
|
|
},
|
|
label: {
|
|
fill: '#000',
|
|
},
|
|
},
|
|
});
|
|
|
|
// 创建连线
|
|
graph.addEdge({
|
|
source: rect1,
|
|
target: rect2,
|
|
attrs: {
|
|
line: {
|
|
stroke: '#1890ff',
|
|
strokeWidth: 1,
|
|
},
|
|
},
|
|
});
|
|
|
|
// 清理函数
|
|
return () => {
|
|
graph.dispose();
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<Card title="X6 图形编辑器测试">
|
|
<div
|
|
ref={containerRef}
|
|
style={{
|
|
width: '100%',
|
|
height: '600px',
|
|
border: '1px solid #ddd'
|
|
}}
|
|
/>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default X6TestPage;
|