[FR]: Directional Link Print Order

[OSmile]

This code is used to fix the situation where bidirectional text is displayed together.
When adding, you can offset the text to fix the situation that it will appear together. It's just that when there's only one text, it won't be in the middle. (I don't know if it's a bug)

    updateTextPosition(renderer: CustomRenderer, link: CustomLink): void {
        if (!renderer || !link || !link.source || !link.target) {
            return;
        }

        const linkKey: string = `${link.source.id}-${link.target.id}`;
        const text: PIXI.Text | undefined = this.nodeTextMap.get(linkKey);
	
	// 
	// const midX: number = (link.source.x + link.target.x) / 2;
        // const midY: number = (link.source.y + link.target.y) / 2;
        let midX: number = (link.source.x + link.target.x) / 2;
        let midY: number = (link.source.y + link.target.y) / 2;
        if (link.source.x < link.target.x) {
            midX = (link.source.x + link.target.x) / 2;
            midY = (link.source.y + link.target.y) / 2 - 16;
        } else if (link.source.x < link.target.x) {
            midX = (link.source.x + link.target.x) / 2;
            midY = (link.source.y + link.target.y) / 2 + 16;
        } else   {  // (link.source.x = link.target.x)
            if (link.source.y < link.target.y) {
                midX = (link.source.x + link.target.x) / 2 + 16;
                midY = (link.source.y + link.target.y) / 2;
            } else  { // (link.source.y > link.target.y)
                midX = (link.source.x + link.target.x) / 2 - 16;
                midY = (link.source.y + link.target.y) / 2;
            } 
        }

        const { x, y } = this.getLinkToTextCoordinates(midX, midY, renderer.panX, renderer.panY, renderer.scale);
        if (text) {
            text.x = x;
            text.y = y;
            text.scale.set(1 / (3 * renderer.nodeScale));
        }
    }

[Nathanael Frisch]

Thank you so much for taking a look at the code! Have you tried pulling the most recent version? I believe this should be fixed in the newest update. I reworked a lot of the code so now they should not display on top of each other. Let me know if it still doesn't work, and I'll work with you to fix it.

[OSmile]

bug

I've seen your latest code, which is solved by line breaks.
However, I found a problem

The content of the second line, not in the middle

discuss

I want to achieve this. In this way, you can add arrows at the same time as the text.

[Nathanael Frisch]

Oh interesting. I'm thinking about this now... just to be perfectly clear, let me ask a question.

[Nathanael Frisch]

Alright, 2 questions:
1.A or 1.B?
A:

B:

2.A or 2.B?
A:

B:

[OSmile]

i choose 1.A 2.B

[Nathanael Frisch]

The latest code does this:

And you would prefer this?

I'm just making sure so that if I make changes they actually do what you want!

[OSmile]

I prefer the one below

There is a possible problem, when the line is very short, will there be only text, and the line will not be displayed!

[Nathanael Frisch]

The short line should be pretty easy to check for if we wanted to make the text disappear. I will not implement this for now, but perhaps we can add it as a new issue. As for the order of the text on bidirectional links, I will try to implement this in a release soon. Thank you again for your help, and let me know if you have any other suggestions, ideas, etc.

[Bence Szalai]

I'm new to this, but I'm wondering is there a way to somehow better visualize or make it understandable who is who's son and father? Because this is nice that the son-father relationship is a pair, but unless it is clear from the graph, who is who's son and father, it looses it's meaning. What I mean is that we intuitively know these kind of back and forth pairs: like son-father, part-of - consist-of, contains - is contained etc. So writing both of them on the graph at the expense of manually maintaining two links instead of one is a bit pointless at the moment.

What I'm doing right now in local graph is turning off incoming links, only showing outgoing, so it works kind of okay, because the label displayed is always from the perspective of the actual node. But it is a limitation in the way the graph can be used.

So in some way it should be more intuitive.

In my opinion the (seemingly) simplest solution could be to render the labels near the node for which it is relevant to.

This way when one looks at Vader, they can follow the link to find the son of him. If the viewer is not interested in the son, they will not follow that link. So makes sense to put the label at the beginning of the arrow, as it acts kind of like a signpost: What will you find, if you follow this link.

For me ideally it should be more like using curved arrows, so the not even overlap, but I guess that is outside the scope of this plugin.

But even in this case I'd say it is easier to read if the label is closer to the start of the arrow.