mouseEnter Listener is not Called when Returning to Diagram

@Timone wrote:

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

JSFiddle

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>

Posts: 2

Participants: 2

Read full topic