hookehuyr

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

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