Deshacer e historial

Los dos botones en la barra superior son botones divididos: el ícono avanza una vez, el cursor abre el toda la historia. Es una línea de tiempo con una línea now que la atraviesa; las filas de arriba han sido deshacer, las filas a continuación son las que aún se pueden deshacer, y al hacer clic en una fila se viaja allí.

Haz algo de historia y luego ábrelo:

• Ocultar nodo o Eliminar nodo desde el menú contextual de un nodo
• Crear ▸ Agregar nodo en el carril izquierdo, luego haga clic en el lienzo
• Ejecute un pivote, si tiene uno; una ingesta es una entrada como cualquier otra

Pase el cursor sobre una fila y marca el lapso que se invertiría al hacer clic, indica el efecto neto en el pie de página, y lo pronostica en el lienzo: lo que se iría se escurre donde está, y lo que vendría La parte posterior está delineada donde aterrizaría. Ctrl + Z retrocede sin el menú.

Deshacer es contiguo: apuntar tres filas hacia abajo invierte esas tres, como un solo lote.

Opciones

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

Escritura directa

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

Datos

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

Deshacer nunca se escribe en su servidor, por lo que un cambio que escribió sigue la dirección en la que fue. Una creación aún se invierte: el lienzo pierde lo que conserva el backend y el pie de página lo cuenta (Undoes 2 steps · 1 item saved upstream). Una eliminación está sellada: listada, nunca se invierte, y un tramo que contiene uno pasa sobre él (Undoes 2 of 3 · 1 saved item kept).

Consulte Deshacer e historial para conocer los cuatro tipos de entrada, lo que no se permite deliberadamente registrados y cómo deshacer una ingesta coloca a sus candidatos nuevamente en el panel de clasificación.