Rückrufe

Pivotick ermöglicht Ihnen die Einbindung in Benutzerinteraktionen und Simulationsereignisse über die Option callbacks. Sie können Funktionen für verschiedene Ereignisse auf der Arbeitsfläche, auf Knoten und an Kanten bereitstellen.

Canvas-Rückrufe

Rückruf	Parameter	Beschreibung
onCanvasClick	(event: PointerEvent)	Wird ausgelöst, wenn auf die Arbeitsfläche geklickt wird.
onCanvasContextmenu	(event: PointerEvent)	Klicken Sie mit der rechten Maustaste auf die Arbeitsfläche.
onCanvasMousemove	(event: MouseEvent)	Wird ausgelöst, wenn die Maus über die Arbeitsfläche bewegt wird.
onCanvasZoom	(event: unknown)	Wird ausgelöst, wenn sich die Zoomstufe der Arbeitsfläche ändert.

Knotenrückrufe

Rückruf	Parameter	Beschreibung
onNodeClick	(event: PointerEvent, node: Node, element: TElement)	Wird ausgelöst, wenn auf einen Knoten geklickt wird.
onNodeDbclick	(event: PointerEvent, node: Node, element: TElement)	Wird ausgelöst, wenn auf einen Knoten doppelgeklickt wird.
onNodeContextmenu	(event: PointerEvent, node: Node, element: TElement)	Wird durch Klicken mit der rechten Maustaste auf den Knoten ausgelöst.
onNodeHoverIn	(event: PointerEvent, node: Node, element: TElement)	Wird ausgelöst, wenn die Maus einen Knoten betritt.
onNodeHoverOut	(event: PointerEvent, node: Node, element: TElement)	Wird ausgelöst, wenn die Maus einen Knoten verlässt.
onNodeSelect	(node: Node, element: TElement)	Wird ausgelöst, wenn ein Knoten ausgewählt wird.
onNodeBlur	(node: Node, element: TElement)	Wird ausgelöst, wenn ein Knoten den Fokus/die Auswahl verliert.
onNodeDragging	(event: MouseEvent, node: Node)	Wird kontinuierlich ausgelöst, während ein Knoten gezogen wird.
onNodeExpansion	(event: PointerEvent, edge: Edge, element: TElement)	Wird ausgelöst, wenn ein Knoten erweitert oder reduziert wird.

Edge-Rückrufe

Rückruf	Parameter	Beschreibung
onEdgeClick	(event: PointerEvent, edge: Edge, element: TElement)	Wird ausgelöst, wenn auf eine Kante geklickt wird.
onEdgeDbclick	(event: PointerEvent, edge: Edge, element: TElement)	Wird ausgelöst, wenn auf eine Kante doppelgeklickt wird.
onEdgeContextmenu	(event: PointerEvent, edge: Edge, element: TElement)	Mit einem Rechtsklick auf die Kante abgefeuert.
onEdgeHoverIn	(event: PointerEvent, edge: Edge, element: TElement)	Wird ausgelöst, wenn die Maus eine Kante betritt.
onEdgeHoverOut	(event: PointerEvent, edge: Edge, element: TElement)	Wird ausgelöst, wenn die Maus eine Kante verlässt.
onEdgeSelect	(edge: Edge, element: TElement)	Wird ausgelöst, wenn eine Kante ausgewählt wird.
onEdgeBlur	(edge: Edge, element: TElement)	Wird ausgelöst, wenn eine Kante den Fokus/die Auswahl verliert.

Lebenszyklus-Hooks für den Schreibpfad

Jede Mutation, die ein Benutzer durchführen kann, durchläuft einen before-hook: Die Bibliothek schlägt vor, Ihr Code entscheidet – asynchron, und die Entscheidung kann fehlschlagen. Ohne einen Hook bleibt das Verhalten unverändert und die programmatische-Mutation (graph.addNode(), graph.removeNode(), graph.removeEdge()) ruft sie nie auf, sodass Ihr eigener Code, der das Modell steuert, nicht durch Ihren eigenen Hook gesteuert wird.

Rückruf	Gefeuert, wann	Rückkehr
onBeforeDelete	Der Benutzer bittet darum, Knoten/Kanten/Notizen zu löschen, bevor etwas entfernt wird	false um ein Veto einzulegen, true um die Anfrage zu löschen, { accept, nodes, edges, notes } um sie einzuschränken
onBeforeNodeCreate	Der Benutzer erstellt einen Knoten (Erstellen ▸ Knoten hinzufügen, Arbeitsfläche ▸ Knoten hier hinzufügen)	false zum Veto oder { accept, id, data, style }
onBeforeEdgeCreate	Eine Verbindungsgeste löste ein Ziel auf, bevor die Kante existierte	false zum Veto oder { accept, data, style, id, directed }
isValidConnection	Live, bei jedem Hover während der Verbindung (muss synchronisiert und günstig sein)	false markiert das Ziel als ungültig – der Before-Create-Hook wird nicht konsultiert
onBeforeNodeEditCommit	Eine Knotenbearbeitung wird festgeschrieben	false lehnt das Commit ab und lässt die Daten des Knotens unberührt
onBeforeEdgeEditCommit	Eine Kantenbearbeitung wird festgeschrieben	false lehnt das Commit ab und lässt die Daten der Kante unberührt

Ein akzeptierter Edit-Commit meldet sich auf dem Datenbus – nodeChange / edgeChange, mit previousData und nextData – und wird sofort neu gezeichnet; Eine Ablehnung ändert überhaupt nichts.

Mit ihren UI-Gegenstücken – onNodeEdit / onEdgeEdit (gibt den Modalkörper zurück) und onNodeEditCancel / onEdgeEditCancel – können Sie den Editor ersetzen, anstatt ihn zu blockieren. Abgesehen davon: editors.nodeEditor.fields / editors.edgeEditor.fields deklarieren Sie das Formular, das standardmäßig für modale Builds erstellt wird (z. B. ein Beziehungs-Dropdown-Menü anstelle eines Freitextfelds); ohne sie wird ein Textfeld pro Datenschlüssel abgeleitet. Ein benutzerdefinierter Körper ist Eigentümer des Entwurfs – mutieren Sie session.draft, während der Benutzer ihn eingibt, da beim Absenden kein Formular zum Lesen vorhanden ist.

Löschen

onBeforeDelete erhält die gesamte Konsequenz der Geste, aufgelöst von der Bibliothek: die vom Benutzer benannten Elemente plus cascadingEdges – die Kanten, die durch das Entfernen dieser Knoten zerstört würden (graph.removeNode Kaskaden). Die beiden überschneiden sich nie, sodass jeder genau einmal beibehalten werden kann.

Die Eingrenzung erfolgt je Art: Ein bereitgestelltes Array ersetzt den angeforderten Satz dieser Art, ein weggelassener Schlüssel lässt ihn wie angefordert (also passt { accept: true } zu true und { accept: true, nodes: [] } löscht keine Knoten). Ein Veto entfernt nichts, löst kein nodeRemove / edgeRemove / noteRemove aus und lässt die Auswahl intakt.

callbacks: {
    onBeforeDelete: async ({ nodes, edges, cascadingEdges, origin, confirm }) => {
        if (!await confirm({
            title: 'Delete from event?',
            body: `${nodes.length} element(s) and ${edges.length + cascadingEdges.length} link(s).`,
        })) return false

        const saved = await deleteServerSide(nodes, [...edges, ...cascadingEdges])
        // Keep exactly what the server actually deleted.
        return { accept: true, nodes: nodes.filter((n) => saved.has(n.id)) }
    },
}

ctx.confirm(options) öffnet das Bestätigungsmodal der Bibliothek und löst false bei jedem Abbruchpfad auf. ctx.origin gibt an, um welches Angebot es sich handelt ('bulk-action' oder 'context-menu').

Während ein Haken entscheidet

Ein Hook, der abruft oder speichert, bevor er antwortet, lässt den Benutzer warten. Nach 200 ms ohne Antwort zeigt das Diagramm an, dass es wartet: ein Fortschrittscursor und ein kleiner Spinner am Ende der Vorschaukante (onBeforeEdgeCreate), am Ablegepunkt (onBeforeNodeCreate) oder als „Warten…“-Pillette am unteren Rand der Arbeitsfläche (Löschen, Commits bearbeiten, onBeforeIngest). Ein Hook, der früher antwortet, zeigt nichts.

Eine Eingabeaufforderung, die der Hook über seinen Kontext (promptLabel, promptData, confirm) öffnet, nimmt den Cue herunter, während er auf dem Bildschirm angezeigt wird, und die Wartezeit nach dem Schließen erhält die gleiche Behandlung, sodass ein Hook, der fragt und dann speichert, nur dann als beschäftigt liest, wenn er beschäftigt ist. Escape während des Wartens einer Verbindungsgeste verlässt den Verbindungsmodus und ruft den Cue ab; Ein Hook, der danach akzeptiert, erhält immer noch seinen Vorteil, da er ihn möglicherweise bereits gespeichert hat.

UI: {
    busyIndicator: { delay: 300, label: 'Saving…' }, // or false, to draw your own
}

Während der Hinweis angezeigt wird, trägt das Wurzelelement des Diagramms data-pvt-busy.

Stattdessen wird das Angebot entfernt

Ein Veto ist die falsche Antwort, wenn eine Operation nie zulässig ist – für eine Integration, deren ACL-Prüfung bekannt ist, bevor das Diagramm erstellt wird, lassen Sie die Affordanz fallen. Jedes editors.<editor>.enabled-Flag (aktiv, sofern nicht ausdrücklich false) entfernt seine Schaltflächen und Menüeinträge:

Flagge	Entfernt
editors.deletion.enabled	Der Seitenleisten-Bulk Delete und die Einträge zum Löschen von Knoten/Kanten/Notizen
editors.nodeCreator.enabled	Erstellen ▸ Knoten hinzufügen und Knoten hier hinzufügen im Canvas-Menü
editors.nodeEditor.enabled	Knoten erstellen ▸ Knoten bearbeiten
editors.edgeEditor.enabled	Das Kantenmenü ist Kante bearbeiten

Siehe dieBehalten Sie das Löschen, Bearbeiten und Erstellen beiGaleriekarte für alle drei Hooks gegen ein Ersatz-Backend.

Simulationsrückrufe

Rückruf	Parameter	Beschreibung
onSimulationTick	()	Jeder Simulationstick wurde ausgelöst.
onSimulationSlowTick	()	Gelegentlich während der Simulation ausgelöst (jedes Zehntel von simulationTick).

Infos

Der Typ element ist nur svg, wenn die Option render.type == "svg" ist.

Beispiel

import Pivotick from './pivotick.es.js'

options = {
    callbacks: { 
        onNodeClick: (event, node) => {
            console.log('Node clicked:', node.id)
        },
        onNodeHoverIn: (event, node) => {
            console.log('Mouse entered node:', node.id)
        },
        onSimulationTick: () => {
            console.log('Simulation tick')
        }
    }
}
const graph = new Pivotick(container, data, options)