Desfazer e histórico

Os dois botões na barra superior são botões divididos: o ícone avança uma vez, o cursor abre todo o histórico. É uma linha do tempo com uma linha now - as linhas acima foram desfeitas, as linhas abaixo são o que ainda pode ser desfeito - e clicar em uma linha vai para lá.

Faça um pouco de história e abra-o:

• Ocultar Nó ou Excluir Nó no menu do botão direito de um nó
• Criar ▸ Adicione o nó no painel esquerdo e clique na tela
• Execute um pivô, se você tiver um – uma ingestão é uma entrada como qualquer outra

Passe o mouse sobre uma linha e ela marca o intervalo que um clique reverteria, indica o efeito líquido no rodapé e o prevê na tela: o que iria drenar onde está e o que voltaria é delineado onde iria parar. Ctrl + Z recua sem o menu.

Desfazer é contíguo: apontar três linhas para baixo inverte essas três, como um lote.

Opções

// Nothing here switches the history on: `graph.history` records the four kinds of
// composition change on its own, and the two split buttons in the header are wired to
// it. `mode: 'full'` is what brings the header the buttons live in, and the left rail's
// Create tool.
const options = {
    UI: {
        mode: 'full',
        // Off: this card is about the top bar, and `full` mode's minimap and data dock
        // are neither (see the Minimap and Data table cards for those).
        minimap: false,
        table: false
    },
    render: { nodeTypeAccessor: (node) => node.getData().kind }
}

Gravação

// A consumer that writes a change through to its own backend says so. Undo makes no
// compensating write, so it follows the direction of yours: a creation still reverses
// and the row is chipped `saved`, while a deletion is sealed — undoing it would put
// back a node your backend no longer has.
const writeThrough = {
    callbacks: {
        onBeforeNodeCreate: async (ctx) => {
            const values = await ctx.promptData({
                fields: [{ key: 'label', label: 'Name', type: 'text' }]
            })
            if (!values) return false
            const saved = await myBackend.create(values)
            return { accept: true, id: saved.uuid, data: values, persisted: true }
        },
        onBeforeDelete: async (ctx) => {
            await myBackend.remove(ctx.nodes.map((node) => node.id))
            return { accept: true, persisted: true }
        }
    }
}

Dados

const data = {
    nodes: [
        { id: 'gw', data: { label: 'gateway-01', kind: 'Host' } },
        { id: 'db', data: { label: 'orders-db', kind: 'Database' } },
        { id: 'api', data: { label: 'orders-api', kind: 'Service' } },
        { id: 'cache', data: { label: 'session-cache', kind: 'Service' } },
        { id: 'job', data: { label: 'nightly-export', kind: 'Job' } },
        { id: 'sftp', data: { label: 'partner-sftp', kind: 'Host' } }
    ],
    edges: [
        { from: 'gw', to: 'api', data: { label: 'routes' } },
        { from: 'api', to: 'db', data: { label: 'reads' } },
        { from: 'api', to: 'cache', data: { label: 'reads' } },
        { from: 'job', to: 'db', data: { label: 'reads' } },
        { from: 'job', to: 'sftp', data: { label: 'writes' } }
    ]
}

Desfazer nunca grava em seu back-end, portanto, uma alteração que você escreveu segue a direção que seguiu. Uma creation ainda reverte — a tela perde o que o backend mantém e o rodapé conta (Undoes 2 steps · 1 item saved upstream). Uma deletion é sealed: listada, nunca revertida e um intervalo contendo uma passagem sobre ela (Undoes 2 of 3 · 1 saved item kept).

Consulte Desfazer e histórico para os quatro tipos de entrada, o que não é registrado deliberadamente e como desfazer uma ingestão coloca seus candidatos de volta no painel de triagem.