就地节点编辑

Pivotick 提供了一个编辑层，而不仅仅是一个查看器。双击节点打开其编辑模式； onBeforeNodeEditCommit 是您的验证/否决钩子（返回 false 以拒绝错误的编辑并保持模式打开），onNodeEditCancel 在用户退出时触发。

双击 Alice 并更改字段。清除名称并尝试保存 - 提交被拒绝。工具栏的编辑图形→编辑打开相同的模式。

选项数据

// Editing needs the full UI mode — the default 'viewer' is read-only. Double-click
// opens the built-in edit modal; the two commit hooks below validate and observe it.
const options = {
    // Off: `full` mode brings a minimap and the data dock, and this card is about
    // neither (see the Minimap and Data table cards for those).
    UI: { mode: 'full', minimap: false, table: false },
    callbacks: {
        // Open the edit modal on double-click (the toolbar's Edit Graph → Edit does
        // the same). onNodeEdit(session) also lets you return a fully custom body.
        onNodeDbclick: (event, node) => graph.editing.openNodeSession(node),
        // Validation / veto hook — return false to reject the commit and keep the
        // modal open. Here we refuse an empty name.
        onBeforeNodeEditCommit: ({ previousData, nextData }) => {
            if (!nextData.label || !String(nextData.label).trim()) {
                graph.notifier.warning('Name required', 'A node must keep a name.')
                return false
            }
            graph.notifier.success('Node updated', `${previousData.label} → ${nextData.label}`)
            return true
        },
        // Fires when the user cancels the edit.
        onNodeEditCancel: (node) => graph.notifier.info('Edit cancelled', node.getData().label)
    }
}

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', role: 'Maintainer', team: 'Core' } },
        { id: 'bob', data: { label: 'Bob', role: 'Contributor', team: 'Core' } },
        { id: 'carol', data: { label: 'Carol', role: 'Reviewer', team: 'Docs' } },
        { id: 'dave', data: { label: 'Dave', role: 'Contributor', team: 'Docs' } },
        { id: 'erin', data: { label: 'Erin', role: 'Maintainer', team: 'Infra' } }
    ],
    edges: [
        { from: 'alice', to: 'bob' },
        { from: 'alice', to: 'carol' },
        { from: 'carol', to: 'dave' },
        { from: 'erin', to: 'alice' }
    ]
}

就地节点编辑 ​

就地节点编辑