hookehuyr

优化:根据节点不同类型,连接线颜色调整

1 /* 1 /*
2 * @Date: 2023-10-27 09:29:48 2 * @Date: 2023-10-27 09:29:48
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-11-23 17:55:22 4 + * @LastEditTime: 2023-12-01 16:47:11
5 * @FilePath: /vue-flow-editor/doc/data.js 5 * @FilePath: /vue-flow-editor/doc/data.js
6 * @Description: 初始化结构,数据都是固定的 6 * @Description: 初始化结构,数据都是固定的
7 */ 7 */
......
...@@ -131,11 +131,16 @@ export function dragEdge(G6, option: OptionType) { ...@@ -131,11 +131,16 @@ export function dragEdge(G6, option: OptionType) {
131 if (this.origin.targetNode) { 131 if (this.origin.targetNode) {
132 const addModel = { 132 const addModel = {
133 class: 'flow', 133 class: 'flow',
134 + shape: "flow-polyline-round1",
134 source: this.origin.sourceNode.get('id'), 135 source: this.origin.sourceNode.get('id'),
135 target: this.origin.targetNode.get('id'), 136 target: this.origin.targetNode.get('id'),
136 sourceAnchor: this.origin.sourceAnchor, 137 sourceAnchor: this.origin.sourceAnchor,
137 targetAnchor: this.origin.targetAnchor, 138 targetAnchor: this.origin.targetAnchor,
138 } 139 }
140 + // TAG: 修改连接线颜色 开始出去的线和连接到抄送节点的颜色是灰色
141 + if (this.origin.sourceNode.get('id') === 'start-node' || this.origin.targetNode.get('model').control ==='cc') {
142 + addModel.shape = 'flow-polyline-round'
143 + }
139 if (this.graph.executeCommand) { 144 if (this.graph.executeCommand) {
140 this.graph.executeCommand('add', { 145 this.graph.executeCommand('add', {
141 type: 'edge', 146 type: 'edge',
......
...@@ -327,4 +327,4 @@ export function registerEdge(G6) { ...@@ -327,4 +327,4 @@ export function registerEdge(G6) {
327 return polylinePoints; 327 return polylinePoints;
328 }, 328 },
329 }, 'polyline'); 329 }, 'polyline');
330 -}
...\ No newline at end of file ...\ No newline at end of file
330 +}
......
This diff is collapsed. Click to expand it.
1 /* 1 /*
2 * @Date: 2023-10-27 09:29:59 2 * @Date: 2023-10-27 09:29:59
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-11-14 11:17:20 4 + * @LastEditTime: 2023-12-01 17:11:30
5 * @FilePath: /vue-flow-editor/src/shape/index.ts 5 * @FilePath: /vue-flow-editor/src/shape/index.ts
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 import {registerAnchor} from "@/shape/anchor"; 8 import {registerAnchor} from "@/shape/anchor";
9 import {registerEdge} from "@/shape/edge"; 9 import {registerEdge} from "@/shape/edge";
10 +import {registerEdge1} from "@/shape/edge1"; // TAG:新增一条彩色的连接线
10 // TAG: 自定义节点 - 引入节点 11 // TAG: 自定义节点 - 引入节点
11 import {registerActivity} from "@/shape/activity"; 12 import {registerActivity} from "@/shape/activity";
12 import {registerControl} from "@/shape/control"; 13 import {registerControl} from "@/shape/control";
...@@ -14,6 +15,7 @@ import {registerControl} from "@/shape/control"; ...@@ -14,6 +15,7 @@ import {registerControl} from "@/shape/control";
14 export function registerShape(G6) { 15 export function registerShape(G6) {
15 registerAnchor(G6) 16 registerAnchor(G6)
16 registerEdge(G6) 17 registerEdge(G6)
18 + registerEdge1(G6)
17 registerActivity(G6) 19 registerActivity(G6)
18 registerControl(G6) 20 registerControl(G6)
19 } 21 }
......
...@@ -83,6 +83,15 @@ export const GraphStyle = { ...@@ -83,6 +83,15 @@ export const GraphStyle = {
83 cursor: 'pointer', 83 cursor: 'pointer',
84 }, 84 },
85 }, 85 },
86 + defaultEdge1: { // TAG:新增彩色连接线
87 + shape: 'flow-polyline-round1',
88 + style: {
89 + stroke: '#CB7FE3',
90 + lineWidth: 1,
91 + lineAppendWidth: 10,
92 + cursor: 'pointer',
93 + },
94 + },
86 defaultNode: { 95 defaultNode: {
87 shape: 'rect', 96 shape: 'rect',
88 size: [120, 40], 97 size: [120, 40],
...@@ -133,4 +142,4 @@ export const GraphStyle = { ...@@ -133,4 +142,4 @@ export const GraphStyle = {
133 anchorPointHoverStyle: {radius: 4, fill: BASE_COLOR, fillOpacity: 1, stroke: BASE_COLOR_DEEP}, 142 anchorPointHoverStyle: {radius: 4, fill: BASE_COLOR, fillOpacity: 1, stroke: BASE_COLOR_DEEP},
134 143
135 edgeDelegationStyle: {stroke: BASE_COLOR, lineDash: [4, 4], lineWidth: 1}, 144 edgeDelegationStyle: {stroke: BASE_COLOR, lineDash: [4, 4], lineWidth: 1},
136 -}
...\ No newline at end of file ...\ No newline at end of file
145 +}
......