From 6e1573fef571234059f95830eeb91e1cd5258ef4 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 10:49:54 +0800 Subject: [PATCH 01/10] =?UTF-8?q?=E5=AE=89=E8=A3=85antv@x6=E4=BE=9D?= =?UTF-8?q?=E8=B5=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- views/src/main/resources/vueboot/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/views/src/main/resources/vueboot/package.json b/views/src/main/resources/vueboot/package.json index 02f68e2..1d29c92 100644 --- a/views/src/main/resources/vueboot/package.json +++ b/views/src/main/resources/vueboot/package.json @@ -15,6 +15,7 @@ "test:ci": "npm run lint && npm run test:unit" }, "dependencies": { + "@antv/x6": "^2.13.1", "axios": "0.18.1", "clipboard": "2.0.4", "codemirror": "5.45.0", -- Gitee From 59648f61cb2eaf4419fcd4e0ac992f150ca6ac71 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 15:46:57 +0800 Subject: [PATCH 02/10] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- graph/pom.xml | 19 ++ .../loopstack/bic/graph/package-info.java | 5 + pom.xml | 1 + views/src/main/resources/vueboot/package.json | 3 + .../resources/vueboot/src/router/index.js | 6 + .../src/views/bic-view/demo-view-edge-data.js | 39 +++ .../src/views/bic-view/demo-view-node-data.js | 235 ++++++++++++++++++ .../vueboot/src/views/bic-view/demo-view.vue | 135 ++++++++++ 8 files changed, 443 insertions(+) create mode 100644 graph/pom.xml create mode 100644 graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java create mode 100644 views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js create mode 100644 views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js create mode 100644 views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue diff --git a/graph/pom.xml b/graph/pom.xml new file mode 100644 index 0000000..61ec566 --- /dev/null +++ b/graph/pom.xml @@ -0,0 +1,19 @@ + + + + bic-parent + cn.icanci.loopstack.bic + 1.0-SNAPSHOT + + 4.0.0 + + bic-graph + + + 8 + 8 + + + \ No newline at end of file diff --git a/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java b/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java new file mode 100644 index 0000000..27b377f --- /dev/null +++ b/graph/src/main/java/cn/icanci/loopstack/bic/graph/package-info.java @@ -0,0 +1,5 @@ +/** + * @author icanci + * @since 1.0 Created in 2023/08/20 15:42 + */ +package cn.icanci.loopstack.bic.graph; \ No newline at end of file diff --git a/pom.xml b/pom.xml index 4fbdd0c..c22d155 100644 --- a/pom.xml +++ b/pom.xml @@ -20,6 +20,7 @@ dal biz web + graph diff --git a/views/src/main/resources/vueboot/package.json b/views/src/main/resources/vueboot/package.json index 1d29c92..04700ca 100644 --- a/views/src/main/resources/vueboot/package.json +++ b/views/src/main/resources/vueboot/package.json @@ -15,7 +15,10 @@ "test:ci": "npm run lint && npm run test:unit" }, "dependencies": { + "@antv/layout": "^0.3.23", "@antv/x6": "^2.13.1", + "@antv/x6-plugin-selection": "^2.1.7", + "@antv/x6-plugin-snapline": "^2.1.7", "axios": "0.18.1", "clipboard": "2.0.4", "codemirror": "5.45.0", diff --git a/views/src/main/resources/vueboot/src/router/index.js b/views/src/main/resources/vueboot/src/router/index.js index 2c4d686..7672d09 100644 --- a/views/src/main/resources/vueboot/src/router/index.js +++ b/views/src/main/resources/vueboot/src/router/index.js @@ -184,6 +184,12 @@ export const constantRoutes = [ name: 'bicSummaryView', meta: {title: '聚合视图'} }, + { + path: 'demo-view', + component: () => import('@/views/bic-view/demo-view'), + name: 'demoView', + meta: {title: 'demoView'} + }, ] }, { diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js new file mode 100644 index 0000000..f7d15d0 --- /dev/null +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js @@ -0,0 +1,39 @@ +const demoViewEdgeData = [ + { + source: {cell: "node1", port: 'port-right'}, + target: {cell: 'node2', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '调用' + }, { + source: {cell: "node1", port: 'port-right'}, + target: {cell: 'node3', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '调用' + }, + { + source: {cell: "node3", port: 'port-right'}, + target: {cell: 'node4', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '调用' + }, +] + +export default demoViewEdgeData diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js new file mode 100644 index 0000000..285997e --- /dev/null +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js @@ -0,0 +1,235 @@ +const demoViewNodeData = [ + { + id: 'node1', + shape: 'circle', + width: 50, + height: 50, + attrs: { + body: { + fill: '#F39C12', + stroke: '#000', + rx: 16, + ry: 16, + }, + label: { + text: '下单', + fill: '#333', + fontSize: 18, + fontWeight: 'bold', + fontVariant: 'small-caps', + }, + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node2', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '获取Fr2缓存', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node3', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '调用风控接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node4', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '黑名单校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, +] + +export default demoViewNodeData diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue new file mode 100644 index 0000000..f721397 --- /dev/null +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -0,0 +1,135 @@ + + + + + -- Gitee From 3fe31ed612f7a8d3730c510ea7e86e4cf93a238b Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:02:26 +0800 Subject: [PATCH 03/10] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- views/src/main/resources/vueboot/package.json | 1 + .../src/views/bic-view/demo-view-edge-data.js | 218 +++- .../src/views/bic-view/demo-view-node-data.js | 969 ++++++++++++++++++ .../vueboot/src/views/bic-view/demo-view.vue | 32 +- 4 files changed, 1213 insertions(+), 7 deletions(-) diff --git a/views/src/main/resources/vueboot/package.json b/views/src/main/resources/vueboot/package.json index 04700ca..5207d19 100644 --- a/views/src/main/resources/vueboot/package.json +++ b/views/src/main/resources/vueboot/package.json @@ -17,6 +17,7 @@ "dependencies": { "@antv/layout": "^0.3.23", "@antv/x6": "^2.13.1", + "@antv/x6-plugin-scroller": "^2.0.10", "@antv/x6-plugin-selection": "^2.1.7", "@antv/x6-plugin-snapline": "^2.1.7", "axios": "0.18.1", diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js index f7d15d0..2a70d4e 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js @@ -9,7 +9,15 @@ const demoViewEdgeData = [ }, router: 'manhattan', connector: 'normal', - label: '调用' + label: '' + // labels: [{ + // attrs: { + // label: {text: '调用'} + // }, + // position: { + // distance: 0.8 + // }, + // }] }, { source: {cell: "node1", port: 'port-right'}, target: {cell: 'node3', port: 'port-left'}, @@ -20,7 +28,7 @@ const demoViewEdgeData = [ }, router: 'manhattan', connector: 'normal', - label: '调用' + label: '' }, { source: {cell: "node3", port: 'port-right'}, @@ -32,7 +40,211 @@ const demoViewEdgeData = [ }, router: 'manhattan', connector: 'normal', - label: '调用' + label: '' + }, + { + source: {cell: "node3", port: 'port-right'}, + target: {cell: 'node5', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node2", port: 'port-right'}, + target: {cell: 'node6', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node2", port: 'port-right'}, + target: {cell: 'node7', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node2", port: 'port-right'}, + target: {cell: 'node8', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node9', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node10', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node11', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node12', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node13', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node14', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node15', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node16', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node17', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node18', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node19', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node20', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' + }, + { + source: {cell: "node8", port: 'port-right'}, + target: {cell: 'node21', port: 'port-left'}, + attrs: { + line: { + stroke: '#7c68fc', + }, + }, + router: 'manhattan', + connector: 'normal', + label: '' }, ] diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js index 285997e..58fa64c 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js @@ -230,6 +230,975 @@ const demoViewNodeData = [ ], }, }, + { + id: 'node5', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node6', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node7', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node8', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node9', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node10', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node11', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node12', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node13', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node14', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node15', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node16', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node17', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node18', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node19', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node20', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, + { + id: 'node21', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, ] export default demoViewNodeData diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index f721397..7d2814d 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -9,6 +9,7 @@ import {Graph} from '@antv/x6' import {Snapline} from '@antv/x6-plugin-snapline' import {Selection} from '@antv/x6-plugin-selection' import {DagreLayout} from '@antv/layout' +import {Scroller} from '@antv/x6-plugin-scroller' import demoViewNodeData from './demo-view-node-data' import demoViewEdgeData from './demo-view-edge-data' @@ -16,8 +17,6 @@ import demoViewEdgeData from './demo-view-edge-data' export default { name: "demo-view", mounted() { - const dir = 'LR' // LR RL TB BT - const graph = new Graph({ container: document.getElementById('container'), width: 800, @@ -94,6 +93,26 @@ export default { // graph.on('node:mouseenter', ({ e, node, view }) => {}) // graph.on('edge:mouseenter', ({ e, edge, view }) => {}) // graph.on('graph:mouseenter', ({ e }) => {}) + + graph.on('edge:mouseenter', ({e, edge, view}) => { + debugger + edge.setLabels(['调用']) + let attrs = edge.getAttrs(); + attrs.beforeAttrs = {} + let newAttrs = { + line: { + stroke: 'red', + } + } + newAttrs.beforeAttrs = attrs; + edge.setAttrs(newAttrs) + }) + + graph.on('edge:mouseleave', ({e, edge, view}) => { + edge.setLabels([]) + edge.setAttrs(edge.getAttrs().beforeAttrs) + }) + graph.use( new Snapline({ enabled: true, @@ -110,13 +129,18 @@ export default { showNodeSelectionBox: true, }), ) + graph.use( + new Scroller({ + enabled: true, + }), + ) const dagreLayout = new DagreLayout({ type: 'dagre', rankdir: 'LR', align: undefined, - ranksep: 40, - nodesep: 60, + ranksep: 50, + nodesep: 15, controlPoints: true, preventOverlap: true }) -- Gitee From 6a969151dba6d1139e6a52d4126c3fb3afa82c8b Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:13:34 +0800 Subject: [PATCH 04/10] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/bic-view/demo-view-edge-data.js | 10 +++++++++- .../vueboot/src/views/bic-view/demo-view.vue | 15 +++++---------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js index 2a70d4e..f05b6d4 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js @@ -9,7 +9,15 @@ const demoViewEdgeData = [ }, router: 'manhattan', connector: 'normal', - label: '' + label: '', + consumerInfo: { + attrs: { + line: { + stroke: '#a729a5', + }, + }, + }, + historyInfo: {} // labels: [{ // attrs: { // label: {text: '调用'} diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index 7d2814d..6d06c6a 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -95,22 +95,17 @@ export default { // graph.on('graph:mouseenter', ({ e }) => {}) graph.on('edge:mouseenter', ({e, edge, view}) => { - debugger + // debugger edge.setLabels(['调用']) let attrs = edge.getAttrs(); - attrs.beforeAttrs = {} - let newAttrs = { - line: { - stroke: 'red', - } - } - newAttrs.beforeAttrs = attrs; - edge.setAttrs(newAttrs) + let tempData = edge.store.data; + edge.store.data.historyInfo.attrs = attrs + edge.setAttrs(tempData.consumerInfo.attrs) }) graph.on('edge:mouseleave', ({e, edge, view}) => { edge.setLabels([]) - edge.setAttrs(edge.getAttrs().beforeAttrs) + edge.setAttrs(edge.store.data.historyInfo.attrs) }) graph.use( -- Gitee From d7e99cdf6b5355204edffccae2fbe32ba3502aa7 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:22:40 +0800 Subject: [PATCH 05/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/bic-view/demo-view-edge-data.js | 21 ++++++++++--------- .../vueboot/src/views/bic-view/demo-view.vue | 5 ++++- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js index f05b6d4..3fdb4b0 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-edge-data.js @@ -9,23 +9,24 @@ const demoViewEdgeData = [ }, router: 'manhattan', connector: 'normal', - label: '', + labels: [], consumerInfo: { attrs: { line: { - stroke: '#a729a5', + stroke: 'red', + strokeWidth: 5, }, }, + labels: [{ + attrs: { + label: {text: '调用'} + }, + position: { + distance: 0.8 + }, + }] }, historyInfo: {} - // labels: [{ - // attrs: { - // label: {text: '调用'} - // }, - // position: { - // distance: 0.8 - // }, - // }] }, { source: {cell: "node1", port: 'port-right'}, target: {cell: 'node3', port: 'port-left'}, diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index 6d06c6a..2496680 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -96,16 +96,19 @@ export default { graph.on('edge:mouseenter', ({e, edge, view}) => { // debugger - edge.setLabels(['调用']) let attrs = edge.getAttrs(); let tempData = edge.store.data; edge.store.data.historyInfo.attrs = attrs edge.setAttrs(tempData.consumerInfo.attrs) + let labels = edge.getLabels(); + edge.store.data.historyInfo.labels = labels + edge.setLabels(tempData.consumerInfo.labels) }) graph.on('edge:mouseleave', ({e, edge, view}) => { edge.setLabels([]) edge.setAttrs(edge.store.data.historyInfo.attrs) + edge.setLabels(edge.store.data.historyInfo.labels) }) graph.use( -- Gitee From 2f9604760d8e8186f356f063b2da7fde620d13d8 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:23:29 +0800 Subject: [PATCH 06/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/vueboot/src/views/bic-view/demo-view.vue | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index 2496680..025fffd 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -95,18 +95,15 @@ export default { // graph.on('graph:mouseenter', ({ e }) => {}) graph.on('edge:mouseenter', ({e, edge, view}) => { - // debugger - let attrs = edge.getAttrs(); + edge.store.data.historyInfo.attrs = edge.getAttrs() + edge.store.data.historyInfo.labels = edge.getLabels() + let tempData = edge.store.data; - edge.store.data.historyInfo.attrs = attrs edge.setAttrs(tempData.consumerInfo.attrs) - let labels = edge.getLabels(); - edge.store.data.historyInfo.labels = labels edge.setLabels(tempData.consumerInfo.labels) }) graph.on('edge:mouseleave', ({e, edge, view}) => { - edge.setLabels([]) edge.setAttrs(edge.store.data.historyInfo.attrs) edge.setLabels(edge.store.data.historyInfo.labels) }) -- Gitee From f0b9c7a7e29b8bfdaee6d1e9715fb43a493dc248 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:32:28 +0800 Subject: [PATCH 07/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../vueboot/src/views/bic-view/demo-view.vue | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index 025fffd..73b0005 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -1,6 +1,10 @@ @@ -16,6 +20,11 @@ import demoViewEdgeData from './demo-view-edge-data' export default { name: "demo-view", + data() { + return { + dialogTableVisible: false + } + }, mounted() { const graph = new Graph({ container: document.getElementById('container'), @@ -108,6 +117,12 @@ export default { edge.setLabels(edge.store.data.historyInfo.labels) }) + + let vm = this + graph.on('edge:click', ({e, x, y, edge, view}) => { + vm.dialogTableVisible = true + }) + graph.use( new Snapline({ enabled: true, -- Gitee From 8d0afc38482c219cd2aad47b28224091d9915aa1 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:36:58 +0800 Subject: [PATCH 08/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/vueboot/src/views/bic-view/demo-view.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index 73b0005..bbd5edc 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -145,6 +145,7 @@ export default { }), ) + // https://x6.antv.antgroup.com/temp/layout#dagre const dagreLayout = new DagreLayout({ type: 'dagre', rankdir: 'LR', -- Gitee From 46812fe0b564dca3f33c3aaf3c525e9c488eebda Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:39:26 +0800 Subject: [PATCH 09/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/bic-view/demo-view-node-data.js | 57 +++++++++++++++++++ .../vueboot/src/views/bic-view/demo-view.vue | 1 + 2 files changed, 58 insertions(+) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js index 58fa64c..be14ab5 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js @@ -1199,6 +1199,63 @@ const demoViewNodeData = [ ], }, }, + { + id: 'node22', + shape: 'rect', + width: 100, + height: 40, + attrs: { + body: { + fill: '#2ECC71', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + }, ] export default demoViewNodeData diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue index bbd5edc..f76bded 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view.vue @@ -157,6 +157,7 @@ export default { }) const newModel = dagreLayout.layout(data) + console.log(newModel) graph.fromJSON(newModel) } -- Gitee From a5538704000d6950138243fbd72d73814fa95e44 Mon Sep 17 00:00:00 2001 From: icanci Date: Sun, 20 Aug 2023 17:53:42 +0800 Subject: [PATCH 10/10] =?UTF-8?q?=E5=89=8D=E7=AB=AFui=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/bic-view/demo-view-node-data.js | 121 +++++++++++++++++- 1 file changed, 119 insertions(+), 2 deletions(-) diff --git a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js index be14ab5..5013d40 100644 --- a/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js +++ b/views/src/main/resources/vueboot/src/views/bic-view/demo-view-node-data.js @@ -1201,12 +1201,128 @@ const demoViewNodeData = [ }, { id: 'node22', - shape: 'rect', + shape: 'ellipse', width: 100, height: 40, attrs: { body: { - fill: '#2ECC71', + fill: '#ffffff', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + freeNode: true + }, + { + id: 'node23', + shape: 'ellipse', + width: 100, + height: 40, + attrs: { + body: { + fill: '#ffffff', + stroke: '#000', + strokeDasharray: '10,2', + }, + label: { + text: '失信人校验接口', + fill: '#333', + fontSize: 13, + } + }, + ports: { + groups: { + // 输入链接桩群组定义 + in: { + position: 'left', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + // 输出链接桩群组定义 + out: { + position: 'right', + attrs: { + circle: { + r: 2, + magnet: true, + stroke: '#31d0c6', + strokeWidth: 2, + fill: '#fff', + }, + }, + }, + }, + items: [ + { + id: 'port-left', + group: 'in', + }, { + id: 'port-right', + group: 'out', + }, + ], + }, + freeNode: true + }, + { + id: 'node24', + shape: 'ellipse', + width: 100, + height: 40, + attrs: { + body: { + fill: '#ffffff', stroke: '#000', strokeDasharray: '10,2', }, @@ -1255,6 +1371,7 @@ const demoViewNodeData = [ }, ], }, + freeNode: true }, ] -- Gitee