neovis.js events
1. Klick- & Interaktions-Events
Diese Events geben dir meistens ein Objekt mit den IDs der betroffenen Knoten (nodes) und Kanten (edges) zurück.
click: Einfacher Linksklick.
doubleClick: Doppelklick (gut geeignet, um tiefer in einen Knoten zu "expandieren").
oncontext: Rechtsklick (hast du bereits).
hold: Wenn der User die Maustaste gedrückt hält.
selectNode: Feuert nur, wenn ein Knoten ausgewählt wird.
deselectNode: Wenn die Auswahl aufgehoben wird.
dragStart / dragEnd: Wenn ein Spieler oder Planet manuell verschoben wird.
2. Maus-Hover (muss oft erst aktiviert werden)
Damit diese funktionieren, musst du in deinen Vis-Optionen interaction: { hover: true } setzen.
hoverNode: Maus fährt über einen Knoten (ideal, um Tooltips mit Schiffswerten oder Planeten-Ressourcen anzuzeigen).
blurNode: Maus verlässt den Knoten wieder.
3. Rendering & Physics (Für Animationen)
beforeDrawing / afterDrawing: Wenn du direkt auf das Canvas zeichnen willst (z.B. eigene Rahmen oder Markierungen für Allianzen).
stabilized: Feuert, wenn das Layout fertig berechnet ist und die Knoten aufhören zu "zappeln".
Beispiel: Verschiedene Reaktionen kombinieren
Hier ist ein kurzes Snippet, wie du das für dein Menü/Selektions-System nutzen kannst:
JavaScript
// Doppelklick für Details
viz.network.on("doubleClick", function (params) {
if (params.nodes.length > 0) {
let nodeId = params.nodes[0];
console.log("Öffne Detail-Ansicht für:", nodeId);
// Hier könntest du z.B. eine neue Cypher-Abfrage für diesen Knoten starten
}
});
// Hover für schnelle Info (z.B. Player-Name)
viz.network.on("hoverNode", function (params) {
// Zeige ein kleines Overlay oder ändere den Cursor
document.body.style.cursor = 'pointer';
});
viz.network.on("blurNode", function (params) {
document.body.style.cursor = 'default';
});
Ein kleiner Tipp zur Selektion:
Wenn du willst, dass beim Klick links im Menü der Knoten im Graphen auch optisch "ausgewählt" wird (mit dem typischen Rahmen), kannst du das manuell triggern, ohne die Cypher-Abfrage neu zu rendern:
JavaScript
viz.network.selectNodes([ID_AUS_DEINEM_MENU]);
Soll ich dir zeigen, wie du die interaction-Optionen konfigurieren musst, damit das Hovern überhaupt funktioniert?
Kommentare
Kommentar veröffentlichen