Arrow heads rendered above labels

I am relaying this issue to vis-network project: mkalus/segrada#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.

#932 (comment) 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?

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

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

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

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):

Fix issues visjs#1600 - Arrow heads rendered above labels

Make image node labels render above arrowheads

Navigation Menu

Repository navigation

Arrow heads rendered above labels #1600

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Arrow heads rendered above labels #1600

Description

Activity

IngyuTae commented on Nov 7, 2021

dcbroad3 commented on Aug 18, 2022

bilskip commented on Jan 14, 2023

Lacrit commented on Feb 2, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions