Terugbelgesprekken

Met Pivotick kunt u gebruikmaken van gebruikersinteracties en simulatiegebeurtenissen via de optie callbacks. U kunt functies opgeven voor verschillende gebeurtenissen op het canvas, de knooppunten en de randen.

Canvas-terugbelverzoeken

Terugbellen	Parameters	Beschrijving
`onCanvasClick`	`(event: PointerEvent)`	Wordt geactiveerd wanneer op het canvas wordt geklikt.
`onCanvasContextmenu`	`(event: PointerEvent)`	Klik met de rechtermuisknop op canvas.
`onCanvasMousemove`	`(event: MouseEvent)`	Wordt afgevuurd wanneer de muis over het canvas beweegt.
`onCanvasZoom`	`(event: unknown)`	Wordt geactiveerd wanneer het zoomniveau van het canvas verandert.

Node-callbacks

Terugbellen	Parameters	Beschrijving
`onNodeClick`	`(event: PointerEvent, node: Node, element: TElement)`	Wordt geactiveerd wanneer op een knooppunt wordt geklikt.
`onNodeDbclick`	`(event: PointerEvent, node: Node, element: TElement)`	Wordt geactiveerd wanneer er op een knooppunt wordt dubbelgeklikt.
`onNodeContextmenu`	`(event: PointerEvent, node: Node, element: TElement)`	Klik met de rechtermuisknop op het knooppunt.
`onNodeHoverIn`	`(event: PointerEvent, node: Node, element: TElement)`	Wordt geactiveerd wanneer de muis een knooppunt binnengaat.
`onNodeHoverOut`	`(event: PointerEvent, node: Node, element: TElement)`	Wordt geactiveerd wanneer de muis een knooppunt verlaat.
`onNodeSelect`	`(node: Node, element: TElement)`	Wordt geactiveerd wanneer een knooppunt wordt geselecteerd.
`onNodeBlur`	`(node: Node, element: TElement)`	Wordt geactiveerd wanneer een knooppunt de focus/selectie verliest.
`onNodeDragging`	`(event: MouseEvent, node: Node)`	Wordt continu geactiveerd terwijl een knooppunt wordt gesleept.
`onNodeExpansion`	`(event: PointerEvent, edge: Edge, element: TElement)`	Wordt geactiveerd wanneer een knooppunt wordt uitgevouwen of samengevouwen.

Edge-callbacks

Terugbellen	Parameters	Beschrijving
`onEdgeClick`	`(event: PointerEvent, edge: Edge, element: TElement)`	Wordt afgevuurd wanneer op een rand wordt geklikt.
`onEdgeDbclick`	`(event: PointerEvent, edge: Edge, element: TElement)`	Wordt afgevuurd wanneer er op een rand wordt dubbelgeklikt.
`onEdgeContextmenu`	`(event: PointerEvent, edge: Edge, element: TElement)`	Gevuurd bij klikken met de rechtermuisknop.
`onEdgeHoverIn`	`(event: PointerEvent, edge: Edge, element: TElement)`	Wordt afgevuurd wanneer de muis een rand betreedt.
`onEdgeHoverOut`	`(event: PointerEvent, edge: Edge, element: TElement)`	Wordt afgevuurd wanneer de muis een rand verlaat.
`onEdgeSelect`	`(edge: Edge, element: TElement)`	Wordt afgevuurd wanneer een rand wordt geselecteerd.
`onEdgeBlur`	`(edge: Edge, element: TElement)`	Wordt afgevuurd wanneer een rand focus/selectie verliest.

Levenscyclushaken voor schrijfpaden

Elke mutatie die een gebruiker kan uitvoeren, gaat via een before-hook: de bibliotheek stelt voor: jouw code beslist – asynchroon, en de beslissing kan mislukken. Bij gebrek aan een haak de gedrag is ongewijzigd, en programmatische mutatie (graph.addNode(), graph.removeNode(), graph.removeEdge()) roept ze nooit aan, dus je eigen code rijdt het model wordt niet afgesloten door uw eigen haak.

Terugbellen	Ontslagen wanneer	Keer terug
`onBeforeDelete`	De gebruiker vraagt om knooppunten / randen / noten te verwijderen voordat er iets wordt verwijderd	`false` om een veto uit te spreken, `true` om het verzoek te verwijderen, `{ accept, nodes, edges, notes }` om het te beperken
`onBeforeNodeCreate`	De gebruiker maakt een knooppunt (Maken ▸ Knooppunt toevoegen, canvas ▸ Knooppunt hier toevoegen)	`false` om een veto uit te spreken, of `{ accept, id, data, style }`
`onBeforeEdgeCreate`	Een verbindingsgebaar loste een doel op, voordat de rand bestond	`false` om een veto uit te spreken, of `{ accept, data, style, id, directed }`
`isValidConnection`	Live, bij elke hover tijdens het verbinden (moet gesynchroniseerd zijn + goedkoop)	`false` markeert het doel als ongeldig — de hook before-create wordt niet geraadpleegd
`onBeforeNodeEditCommit`	Er wordt een knooppuntbewerking doorgevoerd	`false` weigert de commit en laat de gegevens van het knooppunt onaangeroerd
`onBeforeEdgeEditCommit`	Er wordt een edge-bewerking doorgevoerd	`false` weigert de commit en laat de gegevens van de edge onaangeroerd

Een geaccepteerde bewerkingscommit kondigt zichzelf aan op de databus — nodeChange / edgeChange, met previousData en nextData — en schildert meteen opnieuw; een geweigerde verandert helemaal niets.

Hun UI-tegenhangers — onNodeEdit / onEdgeEdit (retourneert de modale hoofdtekst) en onNodeEditCancel / onEdgeEditCancel — hiermee kunt u de editor vervangen in plaats van deze te poorteren. Afgezien daarvan verklaren editors.nodeEditor.fields / editors.edgeEditor.fields de vormen de standaard modale builds (een vervolgkeuzelijst voor relaties in plaats van een vrije-tekstveld, zeg); zonder deze wordt één tekstveld per gegevenssleutel afgeleid. Een aangepaste instantie is eigenaar van de concept — muteer session.draft terwijl de gebruiker typt, aangezien er geen formulier is om verder te lezen indienen.

Verwijderen

onBeforeDelete ontvangt de hele consequentie van het gebaar, opgelost door de bibliotheek: de elementen die de gebruiker heeft genoemd, plus cascadingEdges — de randen die worden verwijderd die knooppunten zouden (graph.removeNode cascades) vernietigen. De twee overlappen elkaar nooit, dus elk kan precies één keer worden volgehouden.

Vernauwing is per soort: een geleverde array vervangt de gevraagde set van dat soort, een weggelaten sleutel laat het zoals gevraagd (dus { accept: true } komt overeen met true, en { accept: true, nodes: [] } verwijdert geen knooppunten). Een veto verwijdert niets, vuurt nee nodeRemove / edgeRemove / noteRemove, en laat de selectie intact.

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) opent het bevestigingsmodaliteit van de bibliotheek en lost false op bij elke pad annuleren. ctx.origin zegt welke prijs gevraagd wordt ('bulk-action' of 'context-menu').

Terwijl een hook beslist

Een hook die ophaalt of opslaat voordat deze antwoordt, laat de gebruiker wachten. Na 200 msec zonder antwoord laat de grafiek zien dat hij wacht: een voortgangscursor en een kleine spinner aan het einde van de voorbeeldrand (onBeforeEdgeCreate), op het neerzetpunt (onBeforeNodeCreate), of als een "Wachten..."-pil onderaan het canvas (verwijdert, bewerk commits, onBeforeIngest). Een haak die eerder antwoordt, laat niets zien.

Een prompt dat de hook wordt geopend via de context (promptLabel, promptData, confirm) haalt de keu weg terwijl deze op het scherm staat, en het wachten nadat deze is gesloten, is hetzelfde behandeling, dus een hook die vraagt en vervolgens opslaat, wordt alleen als bezet gelezen als deze bezet is. Ontsnappen tijdens het wachten van een connect-gebaar verlaat de connect-modus en haalt de keu weg; een haak dat daarna accepteert, krijgt nog steeds zijn voordeel, omdat het het misschien al heeft gered.

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

Terwijl de cue wordt weergegeven, draagt het hoofdelement van de grafiek data-pvt-busy.

In plaats daarvan de betaalbaarheid verwijderen

Een veto is het verkeerde antwoord als een bewerking nooit is toegestaan — voor een integratie waarvan de ACL-controle bekend is voordat de grafiek wordt gebouwd, laat de betaalbaarheid vallen. Elk editors.<editor>.enabled vlag (aan tenzij expliciet false) verwijdert de knoppen en menu-items:

Vlag	Verwijdert
`editors.deletion.enabled`	De zijbalkbulk Delete, en de knooppunt-/rand-/nootverwijderingsitems
`editors.nodeCreator.enabled`	Maken ▸ Knooppunt toevoegen en het canvasmenu Knooppunt hier toevoegen
`editors.nodeEditor.enabled`	Maken ▸ Knooppunt bewerken
`editors.edgeEditor.enabled`	Het randmenu Rand bewerken

Zie Persist verwijderen, bewerken en maken galerijkaart voor alle drie de haken tegen een stand-in backend.

Simulatie terugbellen

Terugbellen	Parameters	Beschrijving
`onSimulationTick`	`()`	Elke simulatietik afgevuurd.
`onSimulationSlowTick`	`()`	Af en toe afgevuurd tijdens simulatie (elke tiende van simulationTick).

informatie

Het type element is alleen svg als de optie render.type == "svg" is.

Voorbeeld

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)

Terugbelgesprekken ​

Canvas-terugbelverzoeken ​

Node-callbacks ​

Edge-callbacks ​

Levenscyclushaken voor schrijfpaden ​

Verwijderen ​

Terwijl een hook beslist ​

In plaats daarvan de betaalbaarheid verwijderen ​

Simulatie terugbellen ​

Voorbeeld ​