Pivotick API

Die Liste der Methoden ist online verfügbar.

Knoten und Kanten abrufen

Pivotick bietet mehrere Möglichkeiten für den Zugriff auf Knoten und Kanten. Die Methoden für Knoten sind unten aufgeführt (Kanten funktionieren auf die gleiche Weise):

Methode	Rückgabewert	Beschreibung
getNode(id: string | Node)	Node | undefined	Gibt eine tiefe Kopie des Knotens mit der angegebenen ID zurück.
getNodes()	Node[]	Gibt eine tiefe Kopie aller Knoten zurück.
getMutableNode(id: string | Node)	Node | undefined	Gibt das tatsächliche Knotenobjekt zurück, das intern von Pivotick verwendet wird.
getMutableNodes()	Node[]	Gibt alle internen Knotenobjekte zurück.

Tipp

Verwenden Sie nach Möglichkeit die Standard-Getter (getNode / getNodes). Sie stellen sichere Klone bereit, die geändert werden können, ohne den internen Zustand der Engine zu beeinträchtigen.

Gefahr

Das direkte Ändern von Knoten oder Kanten über die veränderlichen Getter kann zu unerwartetem Verhalten führen. Verwenden Sie den veränderlichen Zugriff nur, wenn Sie die interne Mechanik des Motors verstehen. andernfalls bevorzugen Sie die geklonten Versionen.

Knoten und Kanten hinzufügen

Sie können die Funktionen addNode() und addEdge() auf der Diagramminstanz verwenden, um neue Knoten und Kanten zu erstellen.

Knoten und Kanten hinzufügen

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

Bei geladenem Rückruf

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

Notizen

Notizen nehmen einfache Optionen an, die dieselbe Form wie data.notes haben, sodass ein gespeicherter Satz jederzeit gezeichnet werden kann, nicht nur, wenn das Diagramm erstellt wird.

Methode	Rückgabewert	Beschreibung
addNote(options: NoteOptions | Note)	Note | undefined	Fügt eine Notiz hinzu, zeichnet sie und gibt noteAdd aus. Wird ausgelöst, wenn die ID verwendet wird. Gibt undefined zurück, während UI.notes.enabled false ist.
setNotes(notes: NoteOptions[])	Note[]	Ersetzt die Noten und lässt Knoten und Kanten in Ruhe. Notizen werden anhand ihrer ID abgeglichen: Eine bereits auf der Arbeitsfläche vorhandene Notiz wird an ihrer Stelle aktualisiert, eine in der Liste fehlende Notiz wird entfernt und eine neue hinzugefügt.
note.toJSON()	NoteOptions	Die Note als einfache Optionen: id, x, y, width, height, content, color, surface und, falls vorhanden, attachedElement.
getNotes() / getNote(id)	Note[] / Note | undefined	Die Hinweise zur Grafik.

toJSON() ist das, was JSON.stringify aufruft. Das Speichern der Notizen erfolgt also in einer Zeile und das Zeichnen derselben in einem anderen Diagramm:

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

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

Eine an einen Knoten angehängte Notiz behält ihre Verknüpfung bei, wenn der Knoten im anderen Diagramm vorhanden ist. Ob Notizen ausgeblendet werden, ist eine Ansichtseinstellung und bleibt außerhalb von toJSON().

Die Klasse Note wird ebenfalls als import { Note } from 'pivotick' oder Pivotick.Note im Browser-Build exportiert.