Added "Classes" that is then consumed by LinkWidget to make custom links possible.

[Etzix]

While i do prefer the other solution, this one avoids the usage of BaseLinkModel in favour of LinkModel.

Since we already accept "Color" in LinkModel, "Classes" should be fine here too.

Using CSS ":has" you are also able to target the <g> tag in this way if you want to:

::deep g.diagram-link:has(.custom-class) {
    // custom <g> tag css goes here.
}

This PR is in response to this one: #386

[zHaytam]

Hey, please see my comment on the other PR, I'd like your opinion as well!

[snakex64]

Its a bit more complicated to use but it the end it does provide the same functionality so why not! Good job

[Etzix]

I propose replacing all inline styles with a global CSS file that contains everything. This simplifies and makes customizations easier.

I'm not sure what you mean. There are no inline styles here. This adds a parameter called Class that lets you set your own classes on the component. This is how it's done in nearly all modern component libraries.

[Etzix]

Classes like that are not a good option. It's better to remove all inline styles and replace them with CSS classes. I chose to create some classes and override the behaviors. Here’s my basic example:

.diagram-link { pointer-events: visiblePainted; cursor: pointer; }

.diagram-link > path:first-of-type {
    stroke: gray;
}


.diagram-link:hover .selection-helper {
    stroke-opacity: .1;
}

This example changes the style of all links. This PR solves the issue of being able to style multiple links differently.

[Etzix]

A class is needed for the normal state and another for the selected state. This way, it is complete.

No, that would not solve the problem.
For example if i want to have 2 lines that are animated, and 3 lines that are not, that is not possible without my PR.

[Etzix]

Reviewing the examples, if I understand correctly, what you want can already be done. In the "Lots of features" example on the Blazor.Diagrams site, you can see several links with different styles.

No, it is only possible to change color at the moment, by using the "Color" parameter. It Is not possible to target specific links with CSS without my PR.

[AwziNihilist]

It would be nice if we could get this feature merged (or even this one #386) . I think allowing for more distinguishable links (other than by color and width) within a single diagram helps a lot of projects 🙂.

[RhysDePater]

Unless I am missing something can't this already be achieved (but with a bit more work), by creating a custom Link Model that extends the LinkModel and takes in a string for a class. And then registering it Diagram.RegisterComponent<CustomLinkModel, CustomLink>();

The componenent would look something like:

@using Blazor.Diagrams.Components

<g class="@Link.CssClass">
    <LinkWidget Link="Link"></LinkWidget>
</g>

@code {
    [Parameter] public CustomLinkModel Link { get; set; } = null!;
}

I have already done something like this in my own project to give some lines a lower opacity then others.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud