Blazor-Diagrams / Blazor.Diagrams

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

Customize link with smooth path #191

Closed jpanext closed 2 years ago

jpanext commented 2 years ago

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.

314159265meow commented 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:

https://github.com/Blazor-Diagrams/Blazor.Diagrams/blob/ef9309c310f26a4828569c26fb8ebefa0278f83b/samples/SharedDemo/Demos/Links/MarkersDemo.razor.cs#L74

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.

zHaytam commented 2 years ago

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...

jpanext commented 2 years ago

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.

zHaytam commented 2 years ago

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.

zHaytam commented 2 years ago

I'll close this since it seems to be answered. Feel free to re-open if you think otherwise.