{{ item.dataType }}
{{ item.name }}
暂无数据
// 事件集合
loadEvents(containerRef) {
// 节点双击
this.graph.on('node:dblclick', ({ node }) => {
const data = node.store.data;
console.log(data);
this.$router.push({
path: '/modeling/homeModeling',
query: {
id: data.modelingId,
name: data.name,
layerTypeId: data.layerTypeId,
tableType: data.modelingType,
},
});
});
// 连线双击
this.graph.on('edge:dblclick', ({ edge }) => {
// const data = edge.store.data;
// const { type, id } = data;
// alert('连线双击');
// console.log('edge:dbclick', edge);
// if (type === 'taskNode') {
// this.nodeId = id;
// this.showRight = true;
// } else {
// this.nodeId = '';
// this.showRight = false;
// }
});
// 节点鼠标移入
this.graph.on(
'node:mouseenter',
FunctionExt.debounce(({ node }) => {
// 添加删除
// const x = node.store.data.size.width - 10;
// node.addTools({
// name: 'button-remove',
// args: {
// x: 0,
// y: 0,
// offset: { x, y: 15 },
// },
// });
}),
500,
);
this.graph.on('node:port-contextmenu', ({ e }) => {
// console.log(
// 'ports',
// e,
// e.currentTarget.parentElement.getAttribute('port'),
// );
});
// 连接线鼠标移入
this.graph.on('edge:mouseenter', ({ edge }) => {
// edge.addTools([
// 'source-arrowhead',
// 'target-arrowhead',
// {
// name: 'button-remove',
// args: {
// distance: '50%',
// },
// },
// ]);
});
// 节点鼠标移出
this.graph.on('node:mouseleave', ({ node }) => {
// // 移除删除
// node.removeTools();
});
this.graph.on('edge:mouseleave', ({ edge }) => {
// edge.removeTools();
});
this.graph.on('edge:connected', ({ isNew, edge }) => {
// console.log('connected', edge.source, edge.target);
// if (isNew) {
// // 对新创建的边进行插入数据库等持久化操作
// }
});
},
graphInit() {
// 容器生成图表
const containerRef = this.$refs.containerRef;
const graph = new Graph({
container: containerRef,
background: {
color: '#F1F6F9',
},
grid: {
size: 10, // 网格大小 10px
visible: true, // 绘制网格,默认绘制 dot 类型网格
type: 'fixedDot',
args: {
color: '#AFB0B1', // 网点颜色
thickness: 1, // 网点大小
},
},
panning: true, // 画布拖拽
history: true, // 启动历史记录
selecting: {
// 选择与框选
enabled: true,
rubberband: true,
movable: true,
strict: true,
showNodeSelectionBox: true, // 显示节点的选择框(才能进行移动)
modifiers: ['alt'],
},
// Scroller 使画布具备滚动、平移、居中、缩放等能力
scroller: {
enabled: true,
pageVisible: true,
pageBreak: true,
pannable: true,
},
// 鼠标滚轮的默认行为是滚动页面 使用ctrl+滚轮 实现缩放
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta'], // +按键为缩放
minScale: 0.5,
maxScale: 2,
},
snapline: true, // 对齐线
// 节点连接
connecting: {
router: {
name: 'er',
args: {
offset: 25,
direction: 'H',
},
},
snap: true, // 自动吸附
allowBlank: false, // 是否允许连接到画布空白位置的点
allowLoop: false, // 是否允许创建循环连线,即边的起始节点和终止节点为同一节点
allowNode: false, // 是否允许边链接到节点(非节点上的链接桩)
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#1684FC',
strokeWidth: 2,
},
},
});
},
},
// 连接桩样式 -- 高亮
highlighting: {
magnetAvailable: {
name: 'stroke',
args: {
padding: 4,
attrs: {
strokeWidth: 4,
stroke: '#1684FC',
},
},
},
},
});
// 小地图
const minimapContainer = this.$refs.minimapContainer;
graph.use(
new MiniMap({
container: minimapContainer,
width: '250',
height: '150',
scalable: true, // 是否可缩放
minScale: 0.01,
maxScale: 16,
}),
);
// 图形
graph.use(
new Transform({
enabled: true,
resizing: map,
}),
);
// 缩放画布内容,使画布内容充满视口
graph.zoomToFit({ padding: 10, maxScale: 1 });
// 赋值生成
this.graph = graph;
// 事件集合
this.loadEvents(containerRef);
},
{{ node.code }} {{ node.name }}
全选 {{ item }} 暂无数据{{ item.code }} {{ item.dataType }}{{ item.name }}暂无数据
1、安装依赖
"@antv/x6-vue-shape": "2.0.6",
yarn add antv/[email protected]
2、引入 Vue 自定义组件
import CustomNode from '../node';
3、引入插件的方法
import { register } from '@antv/x6-vue-shape'; // vue节点
4、注册节点
register({
shape: 'custom-vue-node',
component: CustomNode,
});
import CustomNode from '../node'; import { register } from '@antv/x6-vue-shape'; // vue节点 // 注册 Vue component register({ shape: 'custom-vue-node', component: CustomNode, });
// 连接线 const lineNewData = newData.map((item, index) => { return { id: String(new Date().getTime() + index), shape: 'edge', // 连接源 source: { cell: item.sourceTableId, }, // 连接目标 target: { cell: item.targetTableId, }, attrs: { line: { stroke: '#1684FC', strokeWidth: 2, }, }, // 名字 labels: [ { attrs: { label: { text: item.name || '', }, }, }, ], zIndex: 0, }; }); // 节点 const nodeData = result.map(item => { return { ...item, id: item.modelingVersionId, width: Number(item.width || 300), height: Number(item.heigh || 270), // 节点类型 shape: item.shape || 'custom-vue-node', position: { x: Number(item.posX || this.getRandomInt()), y: Number(item.posY || this.getRandomInt()), }, }; }); this.erData = [...nodeData, ...lineNewData];
通过数据 渲染节点
watch: { data(val) { const cells = []; this.data.forEach(item => { console.log(item, item.shape); if (item.shape === 'edge') { cells.push(this.graph.createEdge(item)); // 创建连线 } else { cells.push(this.graph.createNode(item)); // 创建节点 } }); // 清空画布并添加用指定的节点/边 this.graph.resetCells(cells); }, },