How create the mouseover on the single node?

[vincenzopalazzo]

Hi @anvaka,

I want to add the mouse hover effect on the node for have this effect

I write this code but for me not work and I don't know why.

The my class for managed event

'use strict';

import events from 'ngraph.events'

class ManagerEvents{

    constructor(node, grafics){
        this.nodeObject = {
            node: node,
            grafics: grafics,
            added: false
        };
        self = this;
        events(this.nodeObject.node);
    }
    //{ fontFamily: "Arial", fontSize: "20px" ,  fill: 0x000000}
    mouseHoverOnNode(colorNode, colorLinks, label){
        this.nodeObject.node.on('onmouseover', function(){
            console.debug('Hover on node with id: ' + animatedNode.id);
        })
       /* this.nodeObject.node.on('hover', function(colorNode, colorLinks, label){
            let labelStyle = label.style;
            let labelText = label.text;
            let x = self.nodeObject.node.node.pos.x;
            let y = self.nodeObject.node.node.pos.y;
            if(self.nodeObject.node.label === undefined){
                self.nodeObject.node.label = new PIXI.Text(labelText, labelStyle);
                self.nodeObject.node.label.x = x;
                self.nodeObject.node.label.y = y;
                grafics.addChild(self.nodeObject.node.label);
            }else{
                self.nodeObject.node.label.x = x;
                self.nodeObject.node.label.y = y;
                self.nodeObject.node.label.updateText();
            }

            node.colorNode(colorNode);
            node.links.forEach(link => {
                link.colorLinks(colorLinks);
            });
        });*/
    }

}

export default ManagerEvents;

and in my render class I have add this code

this.graph.forEachNode(function(node){
          events = new ManagerGraphEvent(node, pixiGraphics);
          events.mouseHoverOnNode(0xd62728, 0xd62728, {
            labelText: animatedNode.id,
            labelStyle: { fontFamily: "Arial", fontSize: "20px" ,  fill: 0x000000}
          });
        });

I'm using the ngraph.events wrong?

[anvaka]

ngraph.events implements a simple message passing mechanism. It allows clients to fire events and allows subscribers to listen to those events.

In your case it seems like you assume that someone else would trigger hover event on a node, but I don't see it happening in your code.

Please check the readme file of the current repository to better understand the idea behind ngraph.events

[vincenzopalazzo]

Oh is how an Observer pattern Thank for your help @anvaka.

For using it with ngraph.pixi for mouse-hover on the node, I will add the event on the graphics, right?