回调

Pivotick 允许您通过 callbacks 选项挂钩用户交互和模拟事件。您可以为画布、节点和边上的各种事件提供函数。

画布回调

回调	参数	说明
`onCanvasClick`	`(event: PointerEvent)`	单击画布时触发。
`onCanvasContextmenu`	`(event: PointerEvent)`	在画布上右键单击触发。
`onCanvasMousemove`	`(event: MouseEvent)`	当鼠标移动到画布上时触发。
`onCanvasZoom`	`(event: unknown)`	当画布缩放级别更改时触发。

节点回调

回调	参数	说明
`onNodeClick`	`(event: PointerEvent, node: Node, element: TElement)`	单击节点时触发。
`onNodeDbclick`	`(event: PointerEvent, node: Node, element: TElement)`	双击节点时触发。
`onNodeContextmenu`	`(event: PointerEvent, node: Node, element: TElement)`	在节点右键单击时触发。
`onNodeHoverIn`	`(event: PointerEvent, node: Node, element: TElement)`	当鼠标进入节点时触发。
`onNodeHoverOut`	`(event: PointerEvent, node: Node, element: TElement)`	当鼠标离开节点时触发。
`onNodeSelect`	`(node: Node, element: TElement)`	当节点被选中时触发。
`onNodeBlur`	`(node: Node, element: TElement)`	当节点失去焦点/选择时触发。
`onNodeDragging`	`(event: MouseEvent, node: Node)`	拖动节点时连续触发。
`onNodeExpansion`	`(event: PointerEvent, edge: Edge, element: TElement)`	当节点展开或折叠时触发。

边缘回调

回调	参数	说明
`onEdgeClick`	`(event: PointerEvent, edge: Edge, element: TElement)`	单击边缘时触发。
`onEdgeDbclick`	`(event: PointerEvent, edge: Edge, element: TElement)`	双击边缘时触发。
`onEdgeContextmenu`	`(event: PointerEvent, edge: Edge, element: TElement)`	在边缘右键单击时触发。
`onEdgeHoverIn`	`(event: PointerEvent, edge: Edge, element: TElement)`	当鼠标进入边缘时触发。
`onEdgeHoverOut`	`(event: PointerEvent, edge: Edge, element: TElement)`	当鼠标离开边缘时触发。
`onEdgeSelect`	`(edge: Edge, element: TElement)`	当选择一条边时触发。
`onEdgeBlur`	`(edge: Edge, element: TElement)`	当边缘失去焦点/选择时触发。

写入路径生命周期挂钩

用户可以执行的每个突变都会经历一个before-hook：库建议，您的代码异步决定，并且决定可能会失败。如果没有钩子，行为不会改变，并且 programmatic 突变（graph.addNode()、graph.removeNode()、graph.removeEdge()）永远不会调用它们，因此驱动模型的您自己的代码不会由您自己的钩子控制。

回调	被解雇时	返回
`onBeforeDelete`	用户要求在删除任何内容之前删除节点/边/注释	`false` 否决，`true` 删除请求，`{ accept, nodes, edges, notes }` 缩小请求范围
`onBeforeNodeCreate`	用户创建一个节点（创建 ▸ 添加节点，画布 ▸ 在此处添加节点）	`false` 否决，或 `{ accept, id, data, style }`
`onBeforeEdgeCreate`	在边缘存在之前，连接手势解析了目标	`false` 否决，或 `{ accept, data, style, id, directed }`
`isValidConnection`	实时，连接时每次悬停（必须同步+便宜）	`false` 标记目标无效——不参考 before-create 钩子
`onBeforeNodeEditCommit`	节点编辑已提交	`false` 拒绝提交，保持节点数据不变
`onBeforeEdgeEditCommit`	已提交边缘编辑	`false` 拒绝提交，保持边缘数据不变

接受的编辑提交会在数据总线上宣布自己 - nodeChange / edgeChange，以及 previousData 和 nextData - 并立即重新绘制；被拒绝的人根本不会改变任何事情。

它们的 UI 对应项 — onNodeEdit / onEdgeEdit（返回模态主体）和 onNodeEditCancel / onEdgeEditCancel — 让您替换编辑器而不是控制它。除此之外，editors.nodeEditor.fields / editors.edgeEditor.fields 声明默认模式构建的表单（例如，关系下拉列表而不是自由文本字段）；如果没有它们，将推断每个数据键一个文本字段。自定义主体拥有草稿 - 随着用户键入而改变 session.draft，因为提交时没有可读取的表单。

正在删除

onBeforeDelete接收手势的整个结果，由库解析：用户命名的元素，加上cascadingEdges——删除这些节点会破坏的边缘（graph.removeNode级联）。两者永远不会重叠，因此每个都可以只保留一次。

缩小范围是针对每种类型的：提供的数组替换该类型所请求的集合，省略的键将其保留为所请求的（因此{ accept: true }匹配true，并且{ accept: true, nodes: [] }不删除任何节点）。否决不会删除任何内容，不会触发 nodeRemove / edgeRemove / noteRemove，并且保持选择不变。

callbacks: {
    onBeforeDelete: async ({ nodes, edges, cascadingEdges, origin, confirm }) => {
        if (!await confirm({
            title: 'Delete from event?',
            body: `${nodes.length} element(s) and ${edges.length + cascadingEdges.length} link(s).`,
        })) return false

        const saved = await deleteServerSide(nodes, [...edges, ...cascadingEdges])
        // Keep exactly what the server actually deleted.
        return { accept: true, nodes: nodes.filter((n) => saved.has(n.id)) }
    },
}

ctx.confirm(options) 打开库的确认模式，在每个取消路径上解析 false。 ctx.origin 表示所请求的可供性（'bulk-action' 或 'context-menu'）。

而钩子决定

在应答之前获取或保存的钩子会让用户等待。 200 毫秒后没有答案，图表显示它正在等待：一个进度光标，以及预览边缘末端 (onBeforeEdgeCreate)、放置点 (onBeforeNodeCreate) 处的小旋转器，或者画布底部的“等待...”药丸（删除、编辑提交、onBeforeIngest）。响应较快的钩子不会显示任何内容。

钩子通过其上下文打开的提示（promptLabel、promptData、confirm）会在提示出现在屏幕上时将其取下，并且关闭后的等待也会得到相同的处理，因此询问然后保存的钩子仅在忙碌时才读取为忙碌。在连接手势等待期间退出会离开连接模式并取消提示；之后接受的钩子仍然有其优势，因为它可能已经保存了它。

UI: {
    busyIndicator: { delay: 300, label: 'Saving…' }, // or false, to draw your own
}

当提示显示时，图的根元素带有 data-pvt-busy。

而是删除可供性

当操作从不允许时，否决是错误的答案 - 对于在构建图表之前已知 ACL 检查的集成，请放弃可供性。每个 editors.<editor>.enabled 标志（除非明确 false 开启）都会删除其按钮和菜单条目：

旗帜	删除
`editors.deletion.enabled`	侧边栏批量Delete，以及节点/边/注释删除条目
`editors.nodeCreator.enabled`	创建▸添加节点和画布菜单的在此处添加节点
`editors.nodeEditor.enabled`	创建 ▸ 编辑节点
`editors.edgeEditor.enabled`	边缘菜单的编辑边缘

请参阅 Persist 删除、编辑和创建库卡，以了解针对替代后端的所有三个挂钩。

模拟回调

回调	参数	说明
`onSimulationTick`	`()`	激发每个模拟滴答声。
`onSimulationSlowTick`	`()`	在模拟过程中偶尔会触发（simulationTick的十分之一）。

信息

仅当选项 render.type == "svg" 时，element 类型才是 svg。

示例

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)

回调 ​

画布回调 ​

节点回调 ​

边缘回调 ​

写入路径生命周期挂钩 ​

正在删除 ​

而钩子决定 ​

而是删除可供性 ​

模拟回调 ​

示例 ​

回调