customNode.js
1.66 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
/*
* @Date: 2025-03-13 16:11:47
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-13 17:09:32
* @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;
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();
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,
};