Zum Inhalt springen

pivotick v3.0.0


Pivotick / RendererOptions / NodeBadge

Interface: NodeBadge ​

Definiert in: interfaces/RendererOptions.ts:393

Ein kleiner Indikator, der am Rand eines Knotens befestigt ist – was KeyLines und ReGraph ein glyph nennen.

Abzeichen sind ein eigener Dekorationskanal, sodass ein Knoten eine Tatsache tragen kann, für die bereits color, shape, size, iconClass und imagePath ausgegeben wurden. Sie beschreiben nur den Knoten, auf dem sie sitzen: Ein zusammengeklappter Cluster aggregiert nicht die Abzeichen seiner untergeordneten Elemente – gehen Sie node.children selbst, wenn Sie das möchten.

Beispiel ​

js
defaultNodeStyle: {
    badges: node => node.getData().notes
        ? [{ text: String(node.getData().notes), title: 'Notes', onClick: () => openNotes(node) }]
        : [],
}

Eigenschaften ​

color? ​

optional color: string

Definiert in: interfaces/RendererOptions.ts:401

Jede CSS Farbe.

Standardwert ​

var(--pvt-badge-color)


iconClass? ​

optional iconClass: string

Definiert in: interfaces/RendererOptions.ts:407


iconUnicode? ​

optional iconUnicode: string

Definiert in: interfaces/RendererOptions.ts:408


onClick()? ​

optional onClick: (event, node, badge) => void

Definiert in: interfaces/RendererOptions.ts:420

Wird aufgerufen, wenn auf das Abzeichen geklickt wird, vor InterractionCallbacks.onBadgeClick.

Durch die Deklaration übernimmt das Badge den Zeigercursor und verbraucht den Klick, sodass der Knoten nicht ebenfalls ausgewählt wird. Ein Abzeichen ohne Abzeichen bleibt für den darunter liegenden Knoten transparent. Durch Drücken eines Badges wird der Knoten immer noch in beide Richtungen gezogen.

Parameter ​

event ​

PointerEvent

node ​

Node

badge ​

NodeBadge

Rückgabewert ​

void


position? ​

optional position: NodeBadgePosition

Definiert in: interfaces/RendererOptions.ts:399

Auf welcher Ecke man sitzen soll. Wenn Sie es weglassen, wird das Abzeichen automatisch in der ersten freien Ecke im Uhrzeigersinn von 'ne' platziert. Eine explizite Position wird wörtlich gewürdigt, auch wenn diese sich mit einem anderen Abzeichen oder dem erweiterten Angebot überschneidet.


svgIcon? ​

optional svgIcon: string

Definiert in: interfaces/RendererOptions.ts:410

Inline-Markup SVG, bereinigt, bevor es das DOM erreicht.


text? ​

optional text: string

Definiert in: interfaces/RendererOptions.ts:406

Eine Anzahl oder ein oder zwei Zeichen. Längerer Text lässt das Abzeichen zu einer Pille werden; Nach drei Zeichen wird es als 99+ gerendert. Hat Vorrang vor allen Symbolen auf demselben Abzeichen.


title? ​

optional title: string

Definiert in: interfaces/RendererOptions.ts:412

Nativer Tooltip, gerendert als echtes <title>. Unterdrückt nicht den eigenen Tooltip des Diagramms.