Contextmenu

De contextmenu-opties configureren rechtermuisknopmenu's voor knooppunten, randen en het canvas.

Standaard:

• Contextmenu's zijn ingeschakeld.
• Elk menu (knooppunt, rand, canvas) heeft afzonderlijke acties.
• Eventuele extra aangepaste acties worden toegevoegd na de standaardacties, boven het verwijderen.

Knopinfo uitschakelen

Vrij eenvoudig door de eigenschap enabled in te stellen op false.

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

Aanvullende acties

U kunt de acties aanpassen die verschijnen wanneer u met de rechtermuisknop op een knooppunt, een rand of het canvas klikt.

Elk contextmenu is opgesplitst in twee secties:

• topbar voor snelle acties (compacte pictogrammen). Accepteer een MenuQuickActionItemOptions.
• menu voor volledige menuacties. Accepteert een MenuActionItemOptions.

U kunt deze menu's voor deze bereiken configureren:

• menuNode
• menuEdge
• menuNote
• menuSelection
• menuCanvas

Standaardacties

Reikwijdte	Standaardgegevens
menuNode	Vastzetten/losmaken/focussen/verbergen (bovenbalk) · Draaien · Uit groep verwijderen · Terug in groep plaatsen · Afbeelding bekijken · Buren selecteren · Kinderen verbergen · Verbinding maken met... · Eigenschappen inspecteren · Knooppunt verwijderen
menuEdge	Rand bewerken · Rand verwijderen
menuNote	Notitie verbergen (bovenbalk) · Notitie verwijderen
menuSelection	Geselecteerde vastzetten/losmaken/verbergen (bovenbalk) · Draaien · Geselecteerde knooppunten groeperen · Uit groep verwijderen · Terug in groep plaatsen · Groep opheffen · Buren selecteren · Geselecteerde verwijderen
menuCanvas	Alles vastzetten/alles losmaken (bovenste balk) · Voeg hier een knooppunt toe · Notitie toevoegen · Laat vastgezette knooppunten vrij (terwijl een knooppunt vastgezet is)

De knooppunt-, selectie- en groepsmenu's worden in dezelfde volgorde gelezen: eerst Pivot ▸, daarna de groep vermeldingen die van toepassing zijn, daarna de overige vermeldingen met de jouwe erna, en de verwijdering als laatste. Het menu van een groep (Draaien · Groep openen · Leden selecteren · Leden in tabel bekijken · Groep hernoemen · Groep opheffen · Buren selecteren · Leden verwijderen) is de eigen bibliotheek en neemt geen gegevens van u aan. Een vermelding die niet van toepassing is, wordt weggelaten zonder de anderen verplaatsen.

De schrijfpad-items (verwijderen, bewerken, maken) doorlopen hun before-hooks - zie Schrijfpad-levenscyclushooks — en elk verdwijnt wanneer de editors.<editor>.enabled vlag false is: Delete met deletion, Edge bewerken met edgeEditor, Voeg hier een knooppunt toe met nodeCreator, Verbinden met… met edgeCreator. Hetzelfde geldt voor ingangen die een deur vormen in een schakelbare functie: Voeg notitie toe en de hele menuNote volg UI.notes, Eigenschappen inspecteren volgt op UI.inspector. Uw eigen inzendingen zijn nooit afgesloten. Beide "...hier"-items plaatsen hun element waar het menu ** werd geopend**, ongeacht de zoomen of pannen.

Handelen op basis van een selectie

Als u met de rechtermuisknop klikt op een knooppunt dat deel uitmaakt van een selectie van meerdere knooppunten, wordt menuSelection geopend, met op hoeveel knooppunten het inwerkt. Elke invoer heeft invloed op de gehele selectie, aangezien de de bulkacties in de zijbalk doen dat wel, en de items die alleen zinvol zijn voor één knooppunt (Inspecteren, Verbinden met…, Bekijk afbeelding) worden weggelaten. Als u met de rechtermuisknop op een knooppunt buiten de selectie klikt, wordt geopend het eigen menu van dat knooppunt en laat de selectie zoals die is, en het canvas behoudt zijn eigen menu. Invoer van menuSelection ontvangt de geselecteerde knooppunten als een Node[], in visible zoals in onclick.

Een rij van de gegevenstabel opent hetzelfde menu als het element ervan op de doek.

Del verbergt de geselecteerde knooppunten. Het verbergt in plaats van verwijdert omdat verbergen kosten kost niets ongedaan te maken; Selectie verwijderen staat in het menu.

Aanvullende acties

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,
        },
    }
}

Opties of actiepunten

De interface voor actie-items wordt hier gedefinieerd.

Optie	Typ	Standaard	Beschrijving
iconClass	IconClass	undefined	CSS klasse gebruikt als pictogram. Meestal gebruikt in pictogrambibliotheken zoals fontawesome. Voorbeeld: fa-solid fa-edit
iconUnicode	IconUnicode	undefined	Unicode-teken gebruikt als pictogram. Ruwe Unicode voor gebruik in pictogrambibliotheken zoals Fontawesome. Voorbeeld: \uf007
imagePath	ImagePath	undefined	Pad naar een afbeelding die als pictogram wordt gebruikt.
svgIcon	SVGIcon	undefined	Inline SVG object gebruikt als pictogram. Voorbeeld: <svg>...</svg>
text	string	vereist	Het label van de actie dat wordt weergegeven in menu's en werkbalken.
title	string	undefined	Optioneel tekstlabel weergegeven naast het item.
variant	UIVariant	outline-primary	Visuele variant (stijl) van het menu-item.
visible	boolean | (element: Node | Node[] | Edge | null) => boolean	true	Bepaalt of het item zichtbaar is. Kan dynamisch zijn.
onclick	(evt: PointerEvent | MouseEvent, element?: Node | Node[] | Edge | Edge[] | null) => void	vereist	Wordt geactiveerd wanneer de gebruiker het menu-item activeert.