Kontextmenü

Die Kontextmenüoptionen konfigurieren Rechtsklickmenüs für Knoten, Kanten und die Arbeitsfläche.

Standardmäßig:

• Kontextmenüs sind aktiviert.
• Jedes Menü (Knoten, Kante, Arbeitsfläche) verfügt über separate Aktionen.
• Alle zusätzlichen benutzerdefinierten Aktionen werden nach den Standardaktionen oberhalb des Löschvorgangs hinzugefügt.

Tooltips deaktivieren

Ziemlich einfach, indem Sie die Eigenschaft enabled auf false setzen.

const options = {
    UI: {
        contextMenu: {
            enabled: false
        }
    }
}

Zusätzliche Aktionen

Sie können die Aktionen anpassen, die angezeigt werden, wenn Sie mit der rechten Maustaste auf einen Knoten, eine Kante oder die Arbeitsfläche klicken.

Jedes Kontextmenü ist in zwei Abschnitte unterteilt:

• topbar für schnelle Aktionen (kompakte Symbole). Akzeptieren Sie ein MenuQuickActionItemOptions.
• menu für vollständige Menüaktionen. Akzeptiert ein MenuActionItemOptions.

Sie können diese Menüs für diese Bereiche konfigurieren:

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

Standardaktionen

Umfang	Standardeinträge
menuNode	Anheften / Lösen / Fokussieren / Ausblenden (obere Leiste) · Drehen · Aus der Gruppe herausziehen · Zurück in die Gruppe einfügen · Bild anzeigen · Nachbarn auswählen · Untergeordnete Elemente ausblenden · Verbinden mit… · Eigenschaften prüfen · Knoten löschen
menuEdge	Kante bearbeiten · Kante löschen
menuNote	Notiz ausblenden (obere Leiste) · Notiz entfernen
menuSelection	Ausgewählte Knoten anpinnen / lösen / ausblenden (obere Leiste) · Pivot · Ausgewählte Knoten gruppieren · Aus Gruppe herausziehen · Zurück in die Gruppe einfügen · Gruppierung aufheben · Nachbarn auswählen · Ausgewählte löschen
menuCanvas	Alle anheften / Alle anheften (obere Leiste) · Knoten hier hinzufügen · Notiz hinzufügen · Angeheftete Knoten freigeben (während ein Knoten angeheftet ist)

Die Menüs „Knoten“, „Auswahl“ und „Gruppe“ lauten in der gleichen Reihenfolge: Pivot ▸ zuerst, dann die Gruppe-Einträge, die zutreffen, dann die anderen Einträge mit Ihren darauf folgenden und „Löschen“ zuletzt. Das Menü einer Gruppe (Pivot · Gruppe öffnen · Mitglieder auswählen · Mitglieder in Tabelle anzeigen · Gruppe umbenennen · Gruppierung aufheben · Nachbarn auswählen · Mitglieder löschen) ist das eigene Menü der Bibliothek und nimmt keine Einträge von Ihnen entgegen. Ein nicht zutreffender Eintrag wird weggelassen, ohne dass die anderen verschoben werden.

Die Schreibpfadeinträge (Löschen, Bearbeiten, Erstellen) durchlaufen ihre Vor-Hooks – siehe Schreibpfad-Lebenszyklus-Hooks – und jeder verschwindet, wenn sein editors.<editor>.enabled-Flag false ist: Löschen mit deletion, Kante bearbeiten mit edgeEditor, Knoten hier hinzufügen mit nodeCreator, Verbinden mit… mit edgeCreator. Das Gleiche gilt für Einträge, die eine Tür zu einer umschaltbaren Funktion darstellen: Notiz hinzufügen und das Ganze menuNote folgen UI.notes, Eigenschaften prüfen folgt UI.inspector. Ihre eigenen Einträge sind niemals gesperrt. Beide „…hier“-Einträge platzieren ihr Element dort, wo das Menü geöffnet wurde, unabhängig vom Zoom oder Schwenk.

Auf eine Auswahl reagieren

Wenn Sie mit der rechten Maustaste auf einen Knoten klicken, der Teil einer Auswahl mehrerer Knoten ist, wird menuSelection geöffnet, mit der Überschrift, auf wie viele Knoten es wirkt. Jeder Eintrag wirkt sich auf die gesamte Auswahl aus, wie dies bei den Massenaktionen der Seitenleiste der Fall ist, und die Einträge, die nur für einen Knoten sinnvoll sind (Inspizieren, Verbinden mit…, Bild anzeigen), werden weggelassen. Wenn Sie mit der rechten Maustaste auf einen Knoten außerhalb der Auswahl klicken, wird das eigene Menü dieses Knotens geöffnet und die Auswahl bleibt unverändert, und die Arbeitsfläche behält ihr eigenes Menü. Einträge von menuSelection erhalten die ausgewählten Knoten als Node[], in visible wie in onclick.

Eine Zeile der Datentabelle öffnet dasselbe Menü wie ihr Element auf der Arbeitsfläche.

Entf blendet die ausgewählten Knoten aus. Es wird eher ausgeblendet als gelöscht, da das Rückgängigmachen einer Ausblendung nichts kostet. Auswahl löschen befindet sich im Menü.

Zusätzliche Aktionen

const options = {
    UI: {
        contextMenu: {
            menuNode: {
                topbar: [
                    {
                        text: 'Delete Node',
                        variant: 'danger',
                        onclick: (evt, node) => console.log('Delete', node)
                    }
                ],
                menu: [
                    {
                        text: 'Edit Node',
                        variant: 'success',
                        onclick: (evt, node) => console.log('Edit', node)
                    }
                ]
            },
            menuEdge: {
                menu: [
                    {
                        text: 'Delete Edge',
                        variant: 'danger',
                        onclick: (evt, edge) =>
                            console.log('Delete edge', edge)
                    }
                ]
            },
            menuCanvas: {
                topbar: [
                    {
                        text: 'Add Node',
                        variant: 'primary',
                        onclick: (evt) => console.log('Add Node')
                    }
                ]
            }
        },
        tooltip: {
            enabled: false,
        },
    }
}

Optionen oder Aktionselemente

Die Schnittstelle für Aktionselemente wird hier definiert.

Option	Typ	Standardwert	Beschreibung
iconClass	IconClass	undefined	CSS-Klasse, die als Symbol verwendet wird. Wird normalerweise in Symbolbibliotheken wie Fontawesome verwendet. Beispiel: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Unicode-Zeichen, das als Symbol verwendet wird. Roher Unicode zur Verwendung in Symbolbibliotheken wie Fontawesome. Beispiel: \uf007
imagePath	ImagePath	undefined	Pfad zu einem Bild, das als Symbol verwendet wird.
svgIcon	SVGIcon	undefined	Inline-SVG-Objekt, das als Symbol verwendet wird. Beispiel: <svg>...</svg>
text	string	erforderlich	Die Beschriftung der Aktion, die in Menüs und Symbolleisten angezeigt wird.
title	string	undefined	Optionale Textbeschriftung, die neben dem Element angezeigt wird.
variant	UIVariant	outline-primary	Visuelle Variante (Stil) des Menüpunkts.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	Steuert, ob das Element sichtbar ist. Kann dynamisch sein.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	erforderlich	Wird ausgelöst, wenn der Benutzer den Menüpunkt aktiviert.