Pular para o conteúdo

Pivotick API ​

A lista de métodos está disponível online.

Obtendo nós e arestas ​

Pivotick fornece várias maneiras de acessar nós e arestas. Os métodos para nós estão listados abaixo (as arestas funcionam da mesma maneira):

MétodoRetornoDescrição
getNode(id: string | Node)Node | undefinedRetorna uma cópia profunda do nó com o ID fornecido.
getNodes()Node[]Retorna uma cópia profunda de todos os nós.
getMutableNode(id: string | Node)Node | undefinedRetorna o objeto do nó real usado internamente por Pivotick.
getMutableNodes()Node[]Retorna todos os objetos do nó interno.

dica

Use os getters padrão (getNode / getNodes) sempre que possível. Eles fornecem clones seguros que podem ser modificados sem afetar o estado interno do mecanismo.

perigo

Modificar nós ou arestas diretamente por meio dos getters mutáveis pode levar a comportamento inesperado. Use acesso mutável apenas se você entender a mecânica interna do motor; caso contrário, prefira as versões clonadas.

Adicionando nós e arestas ​

Você pode usar as funções addNode() e addEdge() na instância do gráfico para criar novos nós e arestas.

js
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()
}
js
function loaded(graph) {
    let i = graph.getMutableNodes().length
    addNode(i++, graph)
    setInterval(() => {
        if (i < 10) {
            addNode(i++, graph)
        }
    }, 1500)
}

Notas ​

As notas assumem opções simples, com o mesmo formato de data.notes, portanto, um conjunto armazenado pode ser desenhado a qualquer momento, não apenas quando o gráfico é construído.

MétodoRetornoDescrição
addNote(options: NoteOptions | Note)Note | undefinedAdiciona e desenha uma nota e emite noteAdd. Lança se o ID for obtido. Retorna undefined enquanto UI.notes.enabled é false.
setNotes(notes: NoteOptions[])Note[]Substitui as notas, deixando nós e arestas sozinhos. As notas são correspondidas por id: uma nota que já está na tela é atualizada, uma que está faltando na lista é removida e uma nova é adicionada.
note.toJSON()NoteOptionsA nota como opções simples: id, x, y, width, height, content, color, surface e, quando houver, attachedElement.
getNotes() / getNote(id)Note[] / Note | undefinedAs notas no gráfico.

toJSON() é o que JSON.stringify chama, então salvar as notas é uma linha, e também desenhá-las em outro gráfico:

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

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

Uma nota anexada a um nó mantém seu link quando o nó existe no outro grafo. Se as notas estão ocultas é uma configuração de visualização e fica fora de toJSON().

A classe Note também é exportada, como import { Note } from 'pivotick' ou Pivotick.Note na construção do navegador.