上下文菜单

上下文菜单选项配置节点、边和画布的右键菜单。

默认：

• 上下文菜单已启用。
• 每个菜单（节点、边缘、画布）都有单独的操作。
• 任何其他自定义操作都会添加到默认操作之后、删除之上。

禁用工具提示

通过将 enabled 属性设置为 false 非常简单。

const options = {
    UI: {
        contextMenu: {
            enabled: false
        }
    }
}

附加操作

您可以自定义右键单击节点、边或画布时显示的操作。

每个上下文菜单分为两部分：

• topbar 用于快速操作（紧凑图标）。接受MenuQuickActionItemOptions。
• menu 用于完整菜单操作。接受 MenuActionItemOptions。

您可以为这些范围配置这些菜单：

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

默认操作

适用范围	默认条目
menuNode	固定/取消固定/聚焦/隐藏（顶栏）·旋转·从组中拉出·放回组中·查看图像·选择邻居·隐藏子项·连接到...·检查属性·删除节点
menuEdge	编辑边·删除边
menuNote	隐藏注释（顶部栏）·删除注释
menuSelection	固定/取消固定/隐藏所选节点（顶栏） · 旋转 · 分组所选节点 · 拉出组 · 放回组 · 取消分组 · 选择邻居 · 删除所选节点
menuCanvas	全部固定/取消全部固定（顶栏） · 在此处添加节点 · 添加注释 · 释放固定节点（当任何节点被固定时）

节点、选择和组菜单按相同顺序读取：首先是 Pivot ▸，然后是适用的 group 条目，然后是您的其他条目，最后是删除条目。群组的菜单（旋转·打开群组·选择成员·查看表中的成员·重命名群组·取消群组·选择邻居·删除成员）是图书馆自己的菜单，不会包含您的任何条目。不适用的条目将被排除，而不会移动其他条目。

写入路径条目（删除、编辑、创建）会经历它们的 before-hook — 请参阅 写入路径生命周期挂钩 — 当其 editors.<editor>.enabled 标志为 false 时，每个条目都会消失： Delete 与 deletion，编辑边缘 与edgeEditor、在此处添加节点和nodeCreator、连接到…和edgeCreator。对于可切换功能的入口也是如此：添加注释，整个menuNote跟随UI.notes，检查属性跟随UI.inspector。您自己的条目永远不会受到限制。两个“…here”条目都将其元素放置在打开菜单的位置，无论缩放或平移如何。

根据选择进行操作

右键单击属于多个节点选择的一部分的节点将打开 menuSelection，标题为它作用于的节点数。每个条目都会作用于整个选择，就像侧边栏的批量操作一样，仅对一个节点有意义的条目（检查、连接到...、查看图像）将被忽略。右键单击选择范围之外的节点将打开该节点自己的菜单，并使选择保持原样，并且画布保留其自己的菜单。 menuSelection 的条目接收所选节点作为Node[]，在visible 中与onclick 中一样。

数据表的一行打开与其在画布上的元素相同的菜单。

Del 隐藏选定的节点。它隐藏而不是删除，因为隐藏不需要任何成本即可撤销； 删除所选在菜单中。

附加操作

const options = {
    UI: {
        contextMenu: {
            menuNode: {
                topbar: [
                    {
                        text: 'Delete Node',
                        variant: 'danger',
                        onclick: (evt, node) => console.log('Delete', node)
                    }
                ],
                menu: [
                    {
                        text: 'Edit Node',
                        variant: 'success',
                        onclick: (evt, node) => console.log('Edit', node)
                    }
                ]
            },
            menuEdge: {
                menu: [
                    {
                        text: 'Delete Edge',
                        variant: 'danger',
                        onclick: (evt, edge) =>
                            console.log('Delete edge', edge)
                    }
                ]
            },
            menuCanvas: {
                topbar: [
                    {
                        text: 'Add Node',
                        variant: 'primary',
                        onclick: (evt) => console.log('Add Node')
                    }
                ]
            }
        },
        tooltip: {
            enabled: false,
        },
    }
}

选项或行动项目

操作项的接口在here定义。

选项	类型	默认值	说明
iconClass	IconClass	undefined	CSS 类用作图标。通常用于图标库，例如 fontawesome。示例：fa-solid fa-edit
iconUnicode	IconUnicode	undefined	用作图标的 Unicode 字符。用于图标库（例如 fontawesome）的原始 unicode。示例：\uf007
imagePath	ImagePath	undefined	用作图标的图像的路径。
svgIcon	SVGIcon	undefined	用作图标的内联 SVG 对象。示例：<svg>...</svg>
text	string	必填	操作的标签显示在菜单和工具栏中。
title	string	undefined	显示在项目旁边的可选文本标签。
variant	UIVariant	outline-primary	菜单项的视觉变体（样式）。
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	控制项目是否可见。可以是动态的。
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	必填	当用户激活菜单项时触发。