Closed jpanext closed 2 years ago
Hi, I think if you just want to adjust the link marker there is an easier way to do this. In this demo https://blazor-diagrams.zhaytam.com/links/markers, the last link has custom link markers:
If however you really want to draw the link yourself then I'm not sure there is an easy way. To add some features I made a custom link component and what I did was copying the code from /src/Blazor.Diagrams/Components/LinkWidget.razor
and adjusting it. The PathGenerator
/PathGeneratorResult
can be used to draw a svg path.
Indeed, as @314159265meow said, either use a custom LinkMarker
or duplicate the default LinkWidget
and change whatever you need. I think I need to make it easier to create custom links to be honest...
The most simple way I found is to set TargetMarker = new LinkMarker("M 0 -5 10 0 0 5 z", 10); in the constructors of the class BaseLinkModel: public BaseLinkModel(NodeModel sourceNode, NodeModel? targetNode) { SourceNode = sourceNode; TargetNode = targetNode; TargetMarker = new LinkMarker("M 0 -5 10 0 0 5 z", 10); } All the dynamic links have now an arrow in the target.
You can also use Options.Links.Factory
in order to create the links you want, with the marker you want. That way you don't have to modify base stuff.
I'll close this since it seems to be answered. Feel free to re-open if you think otherwise.
Hi, I have customized the links to add an arrow for the target port. But the point is that it is a straight line and I rather want a smooth path. Here is my code with a SVG straight line :
<line x1="@Link.GetMiddleSourceX().ToInvariantString()" y1="@Link.GetMiddleSourceY().ToInvariantString()" .... marker-end="url(#arrowhead)" />
How can I create a smooth link? I think I have to replace the with a but is it possible? I use this setting : "diagram.Options.Links.Factory = (diagram, port) => new ArrowLink(port);" because I drap&drop nodes. BTW, Setting "PathGenerator = PathGenerators.Smooth" in diagram options has no effect it seems.