Modification des nœuds sur place

Pivotick fournit une couche d'édition, pas seulement une visionneuse. Double-cliquez sur un nœud pour ouvrir son modal d'édition ; onBeforeNodeEditCommit est votre crochet de validation/veto (retournez false pour rejeter une mauvaise modification et garder le modal ouvert), et onNodeEditCancel se déclenche lorsque l'utilisateur recule.

Double-cliquez sur Alice et modifiez un champ. Effacez le nom et essayez de sauvegarder – la validation est refusée. Le Edit Graph → Edit de la barre d'outils ouvre le même modal.

Options

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

Données

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