Arrow heads rendered above labels

[mkalus]

I am relaying this issue to vis-network project: https://github.com/mkalus/segrada/issues/76

The arrow head of an edge is covering part of a nodes label text when the edge cross the label.

The edge and arrow heads should be layered under the nodes labels, not over them, it looks very messy when you start to get a lot of edges to a node. In addition so will any arrow heads pointing to other nodes in the near neighbor area also cover other nodes labels (this has something to do with the length of the edge, if there is some length to a nodes label, the distance between edges can be somewhat short, and both the arrow head of edges and the label of other nodes will cover the labels of other nodes.

Same happens with the labels of edges. Regarding labels of edges I think it would be cleaner if the label followed the edge instead of being horizontal.

Here is a screenshot of a small graph, showing most of the problems..

Possible duplicate of #883, #932, and #1037.

vis-netqwork version used is 9.1.0

It appears only if custom shapes (images) are used in the graph.

https://github.com/visjs/vis-network/pull/932#issuecomment-670961647 mentions a ctxRenderer function. Is this a possible solution and if yes, how can I use it? Looked into the documentation and did not find anything on it. Is customRenderer implemented already?

[IngyuTae]

I have the same issue with 9.1.0 only if shape === 'image'

[dcbroad3]

These notes indicate the issue only occurs with shape 'image', but I appear to be able to reproduce this issue with the standard examples in GitHub Pages. https://visjs.github.io/vis-network/examples/network/data/dotLanguage/dotEdgeStyles.html

[bilskip]

Any news about that issue? It's pretty bad and visible on first sight, why is this threat dead since august?

[Lacrit]

In the current documentation, there are two methods that can be used for drawing nodes. It's stated there that for covering edges you have to use the one called drawExternalLabel, not drawNode:

Note that for ctxRenderer method to work the shape needs to be defined as custom

And an example of usage would be:

export const drawExternalLabel = (
    { ctx, x, y, style, label, state: { selected } }: CtxRenderMethodProps,
    theme: Theme,
) => {
    const LabelOffset = 0;
    const width = 200;
    ctx.lineWidth = 4;
    ctx.strokeStyle = '#F7F8FB';
    ctx.fillStyle = '#EBEBEB';

   // box for label
    ctx.beginPath();
    ctx.roundRect(x - width / 2, y + style.size + LabelOffset, width, style.size, 5);
    ctx.fill();
    ctx.closePath();

    //  node label
    ctx.font = '14px Raleway';
    ctx.fillStyle = '#000';
    ctx.fillText("Some text", x, y + style.size + LabelOffset, width);
};

And this is how it rendered (don't mind the number inside node, for this I used drawNode):