跳到主要内容

右键菜单

右键单击图中不同对象时,可显示背景、节点或边三种上下文菜单。各菜单可定义一组动作,选中菜单项后触发相应动作事件。

在画布空白处右键会显示背景菜单,通常用于添加节点。向图构造函数选项传入 contextMenuItems 数组即可创建:

const graph = new Graph(schema, {
contextMenuItems: [
{
{
text: 'Add a hello node',
action: GRAPH.GRAPH_ACTIONS.ADD_NODE,
nodeType: NODE_KEYS.HELLO,
attributes: {
name: 'New hello'
'Editable boolean': true
}
},
{
text: 'Add a world node',
action: GRAPH.GRAPH_ACTIONS.ADD_NODE,
nodeType: NODE_KEYS.WORLD,
attributes: {
name: 'New world'
'Editable boolean': true
}
}
}
]
})

text 定义菜单项显示文字,action 指定选中后触发 ADD_NODE。其他属性决定创建的节点:节点类型引用 schema 中的数字键;attributes 指定可编辑属性的初始值;name 显示在节点头部。

也可以在节点和边的 schema 中通过 contextMenu 属性添加菜单:

const schema = {
edges: {
0: {
contextMenuItems: [
{
text: 'Delete edge', // name of the context menu item
action: Graph.GRAPH_ACTIONS.DELETE_EDGE // action to carry out when item is selected
}
]
}
}
};

目前节点菜单支持两种动作:

Graph.GRAPH_ACTIONS.DELETE_NODE // Delete the node associated with this context menu.
Graph.GRAPH_ACTIONS.ADD_EDGE // Add an edge that starts from the node associated with this context menu, selecting another node will complete the edge connection. Selecting the background canvas will cancel adding an edge.

边则可通过以下菜单动作支持删除:

Graph.GRAPH_ACTIONS.DELETE_EDGE // Delete the edge associated with this context menu.