Edge Label Not Rendering When Font Align Medium Used on Returning Edge

[dmccreary]

Hello Vis Network Team,

First of all, I want to thank everyone for this great product. I am teaching classes to high-school students on "Systems Thinking" and I have found vis-network.js to be the best tool for generating Causal Loop Diagrams (CLDs) and improve critical thinking skills of our youth. CLDs have lots of curved loops and vis-network.js is usually awesome at rendering these loop diagrams.

I want to report an interesting bug with edge label rendering when two nodes have two edges connect to each other in the 10.0.1 release. When I add the edge label font attribute align: 'middle' to the second edge, the label disappears. My workaround is to just not add the align middle attribute to the second edge and I get the correct behavior most of the time. I am still working on test cases for complex drawings. But it is easy to reproduce the bug.

There is an example of the bug here:

Return Edge Label Rendering Bug

Note there is no "+" label in the lower edge.

The fix is here:

Fix for Return Edge Label Rendering Bug

Note that the align: middle is commented out in the lower edge and the "+" now appears correctly. Less is clearly more.

 font: {
      size: 48,
      strokeWidth: 3,
      strokeColor: 'white'
      // , align: 'middle' // adding this to the second lower edge makes the edge label disappear
}

Thanks once again for all your hard work. My students really love these interactive diagrams!