customNode.js
2.14 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
80
81
82
83
84
85
86
87
88
/*
* @Date: 2025-03-13 16:11:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-16 00:39:21
* @FilePath: /logic-flow2/src/views/adv-menu/customNode.js
* @Description: 文件描述
*/
import { RectNode, RectNodeModel } from "@logicflow/core";
class CustomModel extends RectNodeModel {
setAttributes() {
this.radius = 10;
const {
properties: { isDisabledNode },
} = this;
// 设置节点是否可以被连接
this.sourceRules.push({
message: "禁用节点不能作为连接源",
validate: () => !isDisabledNode
});
this.targetRules.push({
message: "禁用节点不能作为连接目标",
validate: () => !isDisabledNode
});
if (!isDisabledNode) {
// 单独为非禁用的元素设置菜单。
this.menu = [
{
className: "lf-menu-delete",
icon: true,
text: "delete",
callback: (node) => {
this.graphModel.deleteNode(node.id);
this.graphModel.eventCenter.emit("custom:event", node);
},
},
{
text: "edit",
className: "lf-menu-item",
callback: (node) => {
this.graphModel.setElementStateById(node.id, 2);
},
},
{
text: "copy",
className: "lf-menu-item",
callback: (node) => {
this.graphModel.cloneNode(node.id);
},
},
];
}
}
// 添加 getNodeStyle 方法
getNodeStyle() {
const style = super.getNodeStyle();
const { isDisabledNode } = this.properties;
if (isDisabledNode) {
style.stroke = "#999999";
style.fill = "#f0f0f0";
style.strokeDasharray = "3 3";
} else {
style.stroke = "#1E90FF";
style.fill = "#F0F8FF";
}
return style;
}
}
class CustomNode extends RectNode {
getNodeStyle() {
const style = super.getNodeStyle();
const {
properties: { isDisabledNode },
} = this.props.model;
if (isDisabledNode) {
style.cursor = "not-allowed";
}
return style;
}
}
export default {
type: "custom-node",
view: CustomNode,
model: CustomModel,
};