customEdge.js
2.41 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
/*
* @Date: 2025-03-12 14:33:32
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-12 16:04:26
* @FilePath: /logic-flow2/src/views/edge/customEdge.js
* @Description: 文件描述
*/
/*
* @Date: 2025-03-12 14:33:32
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-12 15:14:53
* @FilePath: /logic-flow2/src/views/edge/customEdge.js
* @Description: 文件描述
*/
import { PolylineEdge, PolylineEdgeModel } from '@logicflow/core'
class CustomEdgeModel extends PolylineEdgeModel {
customTextPosition = true
getTextStyle() {
const style = super.getTextStyle()
// const { x: x1 } = this.pointsList[0];
// const { x: x2 } = this.pointsList[1];
// if (x1 === x2) {
// // 垂直
// style.textWidth = 20;
// } else {
// style.textWidth = 200;
// }
style.className = 'custom-text'
return style
}
getTextPosition() {
const position = super.getTextPosition()
const currentPositionList = this.points.split(' ') // 点位信息是以空格分隔的字符串， 例如点位可能是这样的格式："100,200 150,200 150,300"
// const pointsList = []
// currentPositionList &&
// currentPositionList.forEach((item) => {
// const [x, y] = item.split(',') // 每个点的x,y坐标是以逗号分隔的
// pointsList.push({ x: Number(x), y: Number(y) })
// })
if (currentPositionList.length > 1) { // 确保至少有两个点
const [x1, y1] = currentPositionList[0].split(',') // 第一个点的坐标
const [x2, y2] = currentPositionList[1].split(',') // 第二个点的坐标
let distance = 50 // 默认偏移距离
if (Number(x1) === Number(x2)) { // 如果是垂直线
if (Number(y2) < Number(y1)) { // 如果是向上的线
distance = -50 // 偏移方向改为向上
}
position.y = Number(y1) + distance // 在y方向上偏移
position.x = Number(x1) // x保持不变
} else { // 如果是水平线或斜线
if (Number(x2) < Number(x1)) { // 如果是向左的线
distance = -50 // 偏移方向改为向左
}
position.x = Number(x1) + distance // 在x方向上偏移
position.y = Number(y1) - 10 // y方向略微上移
}
}
return position
}
}
class CustomEdge extends PolylineEdge {}
export default {
type: 'custom-edge',
model: CustomEdgeModel,
view: CustomEdge,
}