Blinking adornment

GoJS
1

checkboxAdornment
Trying to add a checkbox adornment to be shown when mouse enters a node and removed when mouse leaves the node. I have other adornments (buttons) that are not showing this behavior, but this is only an issue with checkbox. I have added console log and it shows this caused by mouseLeave event firing when the mouse moves over parts of the checkbox. Here is my code to create the adornment on mouse enter and mouse leave. I tried to add the adornment on mouse hover and it had the same issue. Am I doing something wrong here? Thanks.

public onNodeMouseEnter(e: go.InputEvent, node: go.Node) {
if (node.data.selectable) {
const nodeSelectionAdornment = this.getNodeSelectionAdornment();
nodeSelectionAdornment.adornedObject = node;
node.addAdornment(‘selectButton’, nodeSelectionAdornment);
}
}

public onNodeMouseLeave(e: go.InputEvent, graphObject: go.GraphObject, nextObj: go.GraphObject) {
if (!node.data.selected) {
node.removeAdornment(‘selectButton’);
}
}

private getNodeSelectionAdornment(): go.Adornment {
return $(
go.Adornment,
‘spot’,
$(go.Placeholder, {
isActionable: true // needed because this is in a temporary Layer
}),
$(
‘CheckBox’,
‘selected’,
{
name: ‘selectCheckbox’,
alignment: go.Spot.TopLeft,
background: ‘transparent’,
margin: 5,
‘Button.width’: 18,
‘Button.height’: 18,
_doClick: (e: go.InputEvent, graphObject: go.GraphObject) => {
this.onNodeSelected(e, graphObject.part as go.Node);
}
}
)
)
}

2

Your mouse-leave event handler is (effectively) always removing the Adornment, but perhaps you really don’t want to remove it if the nextObj is in that Adornment.

There might be additional situations when you don’t want to remove the Adornment – I am unfamiliar with your requirements.

3

Are you suggesting to check if the next object is the adornment? How do I check if the nextObject is the Adornment? Thanks

4

There are a lot of possibilities – it depends on the precise behavior that you want to provide to the user.

One approach is demonstrated in the Hover Buttons sample: Buttons that show on Hover
In that sample the mouseLeave event handler is only declared on the Adornment shown by the mouseHover (or mouseEnter) event.

Another approach would be to check in your mouseLeave event handler whether:

  if (!node.data.selected && (!nextObj || !(nextObj.part instanceof go.Adornment))) {
    node.removeAdornment("selectButton");
  }

I hope I wrote that predicate correctly.