Edición de nodos in situ

Pivotick incluye una capa de edición, no solo un visor. Haga doble clic en un nodo para abrir su editar modal; onBeforeNodeEditCommit es su gancho de validación/veto (regresar false rechazar una edición incorrecta y mantener el modal abierto), y onNodeEditCancel se activa cuando el el usuario se retira.

Haga doble clic en Alice y cambie un campo. Borre el nombre e intente guardar: el se rechaza el compromiso. Editar gráfico → Editar de la barra de herramientas abre el mismo modal.

Opciones

// 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)
    }
}

Datos

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' }
    ]
}