PivotickAPI

La lista de métodos está disponible en línea.

Obtener nodos y aristas

Pivotick proporciona múltiples formas de acceder a nodos y bordes. Los métodos para los nodos se enumeran a continuación (los bordes funcionan de la misma manera):

Método	Devoluciones	Descripción
getNode(id: string | Node)	Node | undefined	Devuelve una copia profunda del nodo con el ID proporcionado.
getNodes()	Node[]	Devuelve una copia profunda de todos los nodos.
getMutableNode(id: string | Node)	Node | undefined	Devuelve el objeto de nodo real utilizado internamente por Pivotick.
getMutableNodes()	Node[]	Devuelve todos los objetos del nodo interno.

Consejo

Utilice los captadores estándar (getNode / getNodes) siempre que sea posible. Proporcionan clones seguros que se pueden modificar sin afectar el estado interno del motor.

peligro

Modificar nodos o bordes directamente a través de captadores mutables puede provocar un comportamiento inesperado. Utilice el acceso mutable únicamente si comprende la mecánica interna del motor; de lo contrario, prefiera las versiones clonadas.

Agregar nodos y aristas

Puede usar las funciones addNode() y addEdge() en la instancia del gráfico para crear nuevos nodos y bordes.

Agregar nodos y aristas

async function addNode(counter, graph) {
    const newNode = new Node(`n-${counter}`, { label: `Node ${counter}` })
    
    const existingNodes = graph.getMutableNodes()
    const randomIndex = Math.floor(Math.random() * existingNodes.length)
    const randomNode = existingNodes[randomIndex]

    const newEdge = new Edge(`e-${counter}`, randomNode, newNode)
    
    graph.addNode(newNode)
    graph.addEdge(newEdge)

    // Restart physics by nudging the graph a bit
    graph.simulation.reheat(0.7)
    await graph.simulation.waitForSimulationStop()
    graph.renderer.fitAndCenter()
}

En devolución de llamada cargada

function loaded(graph) {
    let i = graph.getMutableNodes().length
    addNode(i++, graph)
    setInterval(() => {
        if (i < 10) {
            addNode(i++, graph)
        }
    }, 1500)
}

Notas

Las notas toman opciones simples, la misma forma que data.notes, por lo que un conjunto almacenado se puede dibujar en cualquier momento, no solo cuando se construye el gráfico.

Método	Devoluciones	Descripción
addNote(options: NoteOptions | Note)	Note | undefined	Agrega y dibuja una nota y emite noteAdd. Lanza si se toma la identificación. Devuelve undefined mientras que UI.notes.enabled es false.
setNotes(notes: NoteOptions[])	Note[]	Reemplaza las notas, dejando los nodos y los bordes solos. Las notas coinciden por identificación: una nota que ya está en el lienzo se actualiza en su lugar, una que falta en la lista se elimina y se agrega una nueva.
note.toJSON()	NoteOptions	La nota como opciones simples: id, x, y, width, height, content, color, surface y, cuando la tiene, attachedElement.
getNotes() / getNote(id)	Note[] / Note | undefined	Las notas sobre el gráfico.

toJSON() es lo que llama JSON.stringify, por lo que guardar las notas es una línea y también dibujarlas en otro gráfico:

const saved = JSON.stringify(graph.getNotes())

other.setNotes(JSON.parse(saved))
// or one at a time
other.addNote(graph.getNote('n1').toJSON())

Una nota adjunta a un nodo mantiene su vínculo cuando el nodo existe en el otro gráfico. Si las notas están ocultas es una configuración de visualización y no se incluye en toJSON().

La clase Note también se exporta, como import { Note } from 'pivotick' o Pivotick.Note en la compilación del navegador.