sqlEdge.js
2.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*
* @Date: 2025-03-12 21:20:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-12 23:53:01
* @FilePath: /logic-flow2/src/views/adv-node/anchor/sqlEdge.js
* @Description: 文件描述
*/
import { BezierEdge, BezierEdgeModel } from '@logicflow/core';
class CustomEdge2 extends BezierEdge {} // 继承贝塞尔曲线边的视图类
class CustomEdgeModel2 extends BezierEdgeModel { // 继承贝塞尔曲线边的模型类
getEdgeStyle() {
const style = super.getEdgeStyle();
// svg属性
style.strokeWidth = 1;
style.stroke = '#ababac';
return style;
}
/**
* 重写此方法,使保存数据是能带上锚点数据。
*/
getData() {
const data = super.getData();
// 保存源节点和目标节点的锚点ID,用于后续恢复连线
data.sourceAnchorId = this.sourceAnchorId;
data.targetAnchorId = this.targetAnchorId;
return data;
}
/**
* 给边自定义方案,使其支持基于锚点的位置更新边的路径
*/
updatePathByAnchor() {
// 获取源节点和其锚点
const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId);
const sourceAnchor = sourceNodeModel
?.getDefaultAnchor()
.find((anchor) => anchor.id === this.sourceAnchorId);
// 获取目标节点和其锚点
const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId);
const targetAnchor = targetNodeModel
?.getDefaultAnchor()
.find((anchor) => anchor.id === this.targetAnchorId);
// 更新连线起点
if (sourceAnchor) {
const startPoint = {
x: sourceAnchor?.x,
y: sourceAnchor?.y,
};
this.updateStartPoint(startPoint);
}
// 更新连线终点
if (targetAnchor) {
const endPoint = {
x: targetAnchor?.x,
y: targetAnchor?.y,
};
this.updateEndPoint(endPoint);
}
// 这里需要将原有的pointsList设置为空,才能触发bezier的自动计算control点。
this.pointsList = [];
this.initPoints();
}
}
export default {
type: 'sql-edge',
view: CustomEdge2,
model: CustomEdgeModel2,
};