Blazor-Diagrams / Blazor.Diagrams

A fully customizable and extensible all-purpose diagrams library for Blazor
https://blazor-diagrams.zhaytam.com
MIT License
1.04k stars 210 forks source link

Link Label Overlap #444

Closed CoRx74 closed 6 months ago

CoRx74 commented 6 months ago

Hello,

First, thank you for this great library !

I'm having an issue with labels on the links, when two nodes have a link to each other. The label of the first link get overlapped by the second link : 2024-05-27_15h27_25

For the background, I have a data model that I need to display as a diagram using the library. The links are added with the ShapeIntersectionAnchors, to have portless nodes because the layout is done automatically after fetching nodes and links from the database. What that means, is for the illustration, the orange node is right to the purple one, but it could be everywhere around.

var sourceAnchor = new ShapeIntersectionAnchor(node);
var targetAnchor = new ShapeIntersectionAnchor(outNode.Key);

var link = _diagram.Links.Add(new LinkModel(sourceAnchor, targetAnchor));
link.TargetMarker = LinkMarker.Arrow;
link.Width = 5.0;
link.AddLabel(outNode.Value, 80.0);

Is there a workaround to have the labels on top of the links, and at the specified distance of their source anchor ?

Thanks !

CoRx74 commented 6 months ago

I just discovered that if you put a negative distance when creating the label, that distance will be from the target node instead of the source one, hope that helps someone else ! So I ended up by creating the link between the two nodes only if it does not exists already, and make it bidirectionnal instead.

var sourceAnchor = new ShapeIntersectionAnchor(node);
var targetAnchor = new ShapeIntersectionAnchor(outNode.Key);

// Check if link exists, to avoid overlapping
var existingLink = _diagram.Links.Where(l => l.Source.Model.As<NodeModel>().Id == outNode.Key.Id && l.Target.Model.As<NodeModel>().Id == node.Id).FirstOrDefault().As<LinkModel>();

if (existingLink != null)
{
    // Link exists, we make it bidirectionnal instead of adding a new one that will overlap
    existingLink.SourceMarker = LinkMarker.Arrow;
    existingLink.AddLabel(outNode.Value, -80.0); // Negative distance, so it's from the target node
}
else
{
    // Link doesn't exist, we can add it to the diagram
    var link = _diagram.Links.Add(new LinkModel(sourceAnchor, targetAnchor));
    link.TargetMarker = LinkMarker.Arrow;
    link.Width = 5.0;
    link.AddLabel(outNode.Value, 80.0);
}