customHexagon.js
2.03 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
77
78
79
/*
* @Date: 2025-03-12 18:21:07
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-12 20:38:00
* @FilePath: /logic-flow2/src/views/adv-node/rule/customHexagon.js
* @Description: 文件描述
*/
import { PolygonNodeModel, PolygonNode } from '@logicflow/core';
class CustomHexagonModel extends PolygonNodeModel {
setAttributes() {
const width = 100;
const height = 100;
const x = 50;
const y = 50;
// 计算六边形, 中心点为[50, 50], 宽高均为100
const pointList= [
[x - 0.205 * width, y - 0.5 * height],
[x + 0.205 * width, y - 0.5 * height],
[x + 0.5 * width, y],
[x + 0.205 * width, y + 0.5 * height],
[x - 0.205 * width, y + 0.5 * height],
[x - 0.5 * width, y],
];
this.points = pointList;
}
getConnectedSourceRules() {
const rules = super.getConnectedSourceRules();
const getWayOnlyAsTarget = {
message: '下一个节点只能是circle',
validate: (
source,
target,
sourceAnchor,
targetAnchor,
) => {
console.warn('sourceAnchor, targetAnchor', sourceAnchor, targetAnchor);
const isValid = target.type === 'circle';
// 根据验证结果设置节点状态
this.updateValidateState(isValid);
return isValid;
},
};
rules.push(getWayOnlyAsTarget);
return rules;
}
// 新增方法:更新验证状态
updateValidateState(isValid) {
this.setProperties({
validateState: isValid ? 'valid' : 'invalid'
});
}
getNodeStyle() {
const style = super.getNodeStyle();
if (this.properties.isSelected) {
style.fill = 'red';
}
if (this.isHovered) {
style.stroke = 'red';
}
// 根据验证状态设置颜色
if (this.properties.validateState === 'invalid') {
style.fill = 'red';
}
if (this.properties.validateState === 'valid') {
style.fill = 'green';
}
return style;
}
}
export default {
type: 'hexagonNode',
model: CustomHexagonModel,
view: PolygonNode,
};