I have a GoJs diagram with elements on a node which I would like to be visible on mouseover and invisible on mouseout. Additionally, When the mouse leaves the diagram, the elements should be invisible. I have all of this working in the below code, however, when the mouse enters the diagram, the previously “highlighted” node does not have it’s mouseEnter listener called. This causes the elements to not become visible when the mouse goes over that node. Strangely, when entering the diagram over any other node, the mouseEnter is correctly called.
- Move mouse over left box
- “mouseEnter called on node 1”
- the red X appears
- Move mouse to the left, outside the diagram
- the red X disappears
- Move mouse over left box again
- no mouseEnter called should be called
- no red X appears should show x
var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "diagram", {
padding: 0, // No padding on diagram
});
diagram.nodeTemplate =
$(go.Node, "Auto", {
mouseEnter: function(e, n) { // mouse over node
console.log('mouseEnter called on node', n.data.key);
n.isHighlighted = true;
},
mouseLeave: function(e, n) { // moue out node
n.isHighlighted = false;
}
},
$(go.Shape, "Rectangle", { // main rectangle
height: 100,
width: 100,
}),
$(go.TextBlock, { // red X
alignment: go.Spot.TopRight,
stroke: 'red',
font: '50px Arial',
cursor: 'pointer',
margin: 5,
text: 'X',
},
new go.Binding("visible", "isHighlighted").ofObject()
)
);
diagram.model = new go.GraphLinksModel([{ // Add two nodes
key: 1
}, {
key: 2
}]);
document.getElementById('diagram').addEventListener('mouseleave', function(event) {
diagram.startTransaction("no highlighteds");
diagram.clearHighlighteds();
diagram.commitTransaction("no highlighteds");
});
#diagram {
height: 100px;
width: 222px;
border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.20/go-debug.js"></script>
<div id=diagram></div>
Update With 1.7.22, the mouseEnter is now called: JSFiddle