Mehrfachauswahl und Massenaktionen

Wählen Sie mehrere Knoten aus und Pivotick zeigt oben in der Seitenleiste eine Massenaktionszeile an – Anheften, Entpinnen, Ausblenden und Löschen Aktion die gesamte Auswahl auf einmal (Isolieren, Gruppieren, Gruppierung aufheben und Massenbearbeitung sind in Kürze verfügbar). Ein klares ✕ setzt die Auswahl zurück.

Erstellen Sie eine Auswahl:

• Shift + Click – Füge einen Knoten zur Auswahl hinzu
• Alt + Click – eine neue Auswahl starten
• Ctrl + Click – einen Knoten aus der Auswahl entfernen
• oder ziehen Sie ein Kästchen über eine leere Arbeitsfläche

Wenn zwei oder mehr Knoten ausgewählt sind, wird die Massenzeile angezeigt. Um auf die Auswahl im Code zu reagieren, verwenden Sie den Rückruf onNodesSelect – die Benachrichtigung unten wird dadurch gesteuert.

Optionen

// Multi-selection is built in — pick several nodes and the sidebar shows a bulk-action
// row (Pin / Unpin / Hide / Delete) that acts on the whole selection. `mode: 'full'`
// is what renders the sidebar (and therefore the bulk row).
//
// To react programmatically, use the `onNodesSelect` callback. Its argument only
// carries the nodes involved in *this* change, so read the authoritative current
// selection from the interaction layer instead:
const options = {
    UI: {
        mode: 'full',
        // Off: `full` mode brings a minimap and the data dock, and this card is about
        // neither (see the Minimap and Data table cards for those).
        minimap: false,
        table: false,
        // Keep the sidebar open so the bulk-action row is visible (the embed is
        // short enough that 'auto' would otherwise collapse it).
        sidebar: { collapsed: false }
    },
    callbacks: {
        onNodesSelect: () => {
            const selected = graph.renderer.getGraphInteraction().getSelectedNodes()
            if (selected.length < 2) return
            const labels = selected.map((s) => s.node.getData().label).join(', ')
            graph.notifier.info(`${selected.length} nodes selected`, labels)
        }
    }
}

Daten

const data = {
    nodes: [
        { id: 'alice', data: { label: 'Alice', role: 'Maintainer', team: 'Core', commits: 342 } },
        { id: 'bob', data: { label: 'Bob', role: 'Contributor', team: 'Core', commits: 87 } },
        { id: 'carol', data: { label: 'Carol', role: 'Reviewer', team: 'Docs', commits: 45 } },
        { id: 'dave', data: { label: 'Dave', role: 'Contributor', team: 'Docs', commits: 63 } },
        { id: 'erin', data: { label: 'Erin', role: 'Maintainer', team: 'Infra', commits: 210 } }
    ],
    edges: [
        { from: 'alice', to: 'bob', data: { label: 'mentors' } },
        { from: 'alice', to: 'carol', data: { label: 'reviews' } },
        { from: 'carol', to: 'dave', data: { label: 'pairs' } },
        { from: 'erin', to: 'alice', data: { label: 'syncs' } }
    ]
}