|
|
@@ -1,12 +1,13 @@
|
|
|
import { Graph, FunctionExt, Shape, Addon } from '@antv/x6'
|
|
|
+import ContextMenu from '@imengyu/vue3-context-menu'
|
|
|
|
|
|
import insertCss from 'insert-css'
|
|
|
import './shape'
|
|
|
import { customPorts } from './ports'
|
|
|
import graphData from './data/data'
|
|
|
import { getImageUrl } from '@/utils'
|
|
|
-
|
|
|
-insertCss(`
|
|
|
+import { text } from 'stream/consumers'
|
|
|
+;(insertCss as any)(`
|
|
|
@keyframes ant-line {
|
|
|
to {
|
|
|
stroke-dashoffset: -1000
|
|
|
@@ -187,6 +188,7 @@ export default class FlowGraph {
|
|
|
target: this.graph,
|
|
|
title: '节点搜索',
|
|
|
stencilGraphWidth: 250,
|
|
|
+ stencilGraphHeight: 0,
|
|
|
placeholder: '请输入节点关键字',
|
|
|
notFoundText: '未搜索到结果',
|
|
|
search: { rect: true },
|
|
|
@@ -194,23 +196,22 @@ export default class FlowGraph {
|
|
|
groups: [
|
|
|
{
|
|
|
name: 'basic',
|
|
|
- title: '基础节点',
|
|
|
- graphHeight: 180
|
|
|
+ title: '基础节点'
|
|
|
+ // graphHeight: 180
|
|
|
},
|
|
|
{
|
|
|
name: 'logic',
|
|
|
- title: '逻辑节点',
|
|
|
- graphHeight: 180
|
|
|
+ title: '逻辑节点'
|
|
|
+ // graphHeight: 180
|
|
|
},
|
|
|
{
|
|
|
name: 's-pro',
|
|
|
title: '子流程节点',
|
|
|
- graphHeight: 180
|
|
|
- },
|
|
|
- {
|
|
|
- name: 'custom-image',
|
|
|
- title: '系统设计图',
|
|
|
- graphHeight: 600
|
|
|
+ layoutOptions: {
|
|
|
+ columns: 1,
|
|
|
+ marginX: 60
|
|
|
+ }
|
|
|
+ // graphHeight: 260
|
|
|
},
|
|
|
{
|
|
|
name: 'combination',
|
|
|
@@ -218,13 +219,13 @@ export default class FlowGraph {
|
|
|
layoutOptions: {
|
|
|
columns: 1,
|
|
|
marginX: 60
|
|
|
- },
|
|
|
- graphHeight: 260
|
|
|
+ }
|
|
|
+ // graphHeight: 260
|
|
|
},
|
|
|
{
|
|
|
name: 'group',
|
|
|
title: '节点组',
|
|
|
- graphHeight: 100,
|
|
|
+ // graphHeight: 100,
|
|
|
layoutOptions: {
|
|
|
columns: 1,
|
|
|
marginX: 60
|
|
|
@@ -247,7 +248,7 @@ export default class FlowGraph {
|
|
|
ry: 24
|
|
|
},
|
|
|
text: {
|
|
|
- text: '起始节点'
|
|
|
+ text: '开始'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -255,7 +256,7 @@ export default class FlowGraph {
|
|
|
shape: 'flow-chart-rect',
|
|
|
attrs: {
|
|
|
text: {
|
|
|
- text: '流程节点'
|
|
|
+ text: '流程'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
@@ -266,7 +267,7 @@ export default class FlowGraph {
|
|
|
angle: 45,
|
|
|
attrs: {
|
|
|
text: {
|
|
|
- text: '判断节点',
|
|
|
+ text: '判断',
|
|
|
transform: 'rotate(-45deg)'
|
|
|
}
|
|
|
},
|
|
|
@@ -309,18 +310,43 @@ export default class FlowGraph {
|
|
|
})
|
|
|
const r4 = graph.createNode({
|
|
|
shape: 'flow-chart-rect',
|
|
|
- width: 70,
|
|
|
- height: 70,
|
|
|
+ width: 38,
|
|
|
+ height: 12,
|
|
|
attrs: {
|
|
|
- body: {
|
|
|
- rx: 35,
|
|
|
- ry: 35
|
|
|
+ text: {
|
|
|
+ text: '点'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 子流程节点
|
|
|
+ const s1 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect',
|
|
|
+ attrs: {
|
|
|
+ title: {
|
|
|
+ text: 'XX子流程'
|
|
|
},
|
|
|
text: {
|
|
|
- text: '链接节点'
|
|
|
+ text: '测试xx流程'
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
+ const s2 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect'
|
|
|
+ })
|
|
|
+ const s3 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect'
|
|
|
+ })
|
|
|
+ const s4 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect'
|
|
|
+ })
|
|
|
+ const s5 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect'
|
|
|
+ })
|
|
|
+ const s6 = graph.createNode({
|
|
|
+ shape: 'sub-flow-rect'
|
|
|
+ })
|
|
|
+
|
|
|
// 组合节点
|
|
|
const c1 = graph.createNode({
|
|
|
shape: 'flow-chart-image-rect'
|
|
|
@@ -343,77 +369,16 @@ export default class FlowGraph {
|
|
|
parent: true
|
|
|
}
|
|
|
})
|
|
|
- // 系统设计图
|
|
|
- const imgs = [
|
|
|
- {
|
|
|
- image: getImageUrl('ldb.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('wft1.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('wft2.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('wft3.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('wft4.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('wft5.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('lqt.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('lqb-o.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('ldb-o.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('bh.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('f1.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('f2.png')
|
|
|
- },
|
|
|
- {
|
|
|
- image: getImageUrl('f3.png')
|
|
|
- }
|
|
|
- ]
|
|
|
- const imgNodes = imgs.map(item => {
|
|
|
- return graph.createNode({
|
|
|
- // shape: 'flow-chart-image-rect-custom',
|
|
|
- // attrs: {
|
|
|
- // image: {
|
|
|
- // 'xlink:href': item.image,
|
|
|
- // }
|
|
|
- // }
|
|
|
- shape: 'image', //可选值：Rect Circle Ellipse Polygon Polyline Path Image HTML TextBlock BorderedImage EmbeddedImage InscribedImage Cylinder
|
|
|
- imageUrl: item.image,
|
|
|
- attrs: {
|
|
|
- image: {
|
|
|
- // fill: 'yellow',
|
|
|
- }
|
|
|
- },
|
|
|
- width: 52,
|
|
|
- height: 52,
|
|
|
- ports: { ...customPorts }
|
|
|
- })
|
|
|
- })
|
|
|
+
|
|
|
this.stencil.load([r1, r2, r3, r4], 'basic')
|
|
|
- this.stencil.load(imgNodes, 'custom-image')
|
|
|
+ this.stencil.load([s1, s2, s3, s4, s5], 's-pro')
|
|
|
this.stencil.load([c1, c2, c3], 'combination')
|
|
|
this.stencil.load([g1], 'group')
|
|
|
}
|
|
|
|
|
|
// 根据json渲染节点和边
|
|
|
public static initGraphShape(gd: any = graphData) {
|
|
|
- this.graph.fromJSON(gd)
|
|
|
+ // this.graph.fromJSON(gd)
|
|
|
}
|
|
|
|
|
|
// 连接桩显示时机
|
|
|
@@ -423,6 +388,32 @@ export default class FlowGraph {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 右键菜单
|
|
|
+ public static handleContextmenu = (e: { pageX: any; pageY: any }) => {
|
|
|
+ const cells = this.graph.getSelectedCells()
|
|
|
+ ContextMenu.showContextMenu({
|
|
|
+ x: e.pageX,
|
|
|
+ y: e.pageY,
|
|
|
+ items: [
|
|
|
+ {
|
|
|
+ label: '编辑子流程',
|
|
|
+ onClick: () => {
|
|
|
+ if (cells.length) {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '删除节点',
|
|
|
+ onClick: () => {
|
|
|
+ if (cells.length) {
|
|
|
+ this.graph.removeCells(cells)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
// 事件相关
|
|
|
private static initEvent() {
|
|
|
const { graph } = this
|
|
|
@@ -499,6 +490,10 @@ export default class FlowGraph {
|
|
|
graph.removeCells(cells)
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+ graph.on('node:contextmenu', ({ e, x, y, cell, view }) => {
|
|
|
+ this.handleContextmenu(e)
|
|
|
+ })
|
|
|
// 鼠标动态添加/删除小工具。
|
|
|
graph.on('edge:mouseenter', ({ cell }) => {
|
|
|
/**
|
