[network] Nodes labels don't become bold on selected and hover

[mehl321]

Nodes labels should become bold when selected.

In the example below, it works with the "image" type but not the "dot" type.

https://codepen.io/mehl321/pen/BWORjL

[wimrijnders]

I can confirm this is the case.

All shape types derived from ShapeBase do not show bold text when selected. These are:

• Triangle
• Square
• Triangle Down
• Dot
• Diamond
• Star

All the other shapes do have bold selected text.

This actually looks intentional in a way, but it's not consistent. I'll see if I can put in bold selection for ShapeBase shapes.

[mehl321]

I found that calling labelModule.getTextSize() (that in turns calls _processLabel()) solves the problem but the code is not easy to understand around this.

[wimrijnders]

Yes, that's the call to make. The trick now is to call it in the right place.

[wimrijnders]

This looks about right:

class ShapeBase extends NodeBase {
...
  _resizeShape(ctx, selected = this.selected, hover = this.hover, values = { size: this.options.size }) {
    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
      this.labelModule.getTextSize(ctx, selected, hover);    // <==== HERE
      var size = 2 * values.size;
      this.width = size;
      this.height = size;
      this.radius = 0.5*this.width;
    }
  }

The selected text is now bold in my test, however things break elsewhere.
The issue now is that ctx is not passed in. So some refactoring is required.

[wimrijnders]

OK figured it out. It's not even a hack.

I'll prepare a PR.

[wimrijnders]

That should do it. Thanks for reporting this. Have a good day!

[aaronst]

@wimrijnders This is also not working for edges.

[wimrijnders]

@aaronst If you think this is a problem, would you mind creating a new issue for it? Because this issue will be closed automatically when the associated PR is merged.

[rasmusblockzero]

@aaronst do you see that with all edges or just the ones connected to these kind of nodes? In our use case the edges become bold (using labelHighlightBold)