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: https://github.com/Blazor-Diagrams/Blazor.Diagrams/pull/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

[jorg3roch4]

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;
}

[jorg3roch4]

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

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

[jorg3roch4]

My proposal is to change the current behavior and allow default styles to be modified globally. As for using classes, you’re right—that’s a good idea. It will allow styling links individually.

[jorg3roch4]

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

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

[jorg3roch4]

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.

[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 https://github.com/Blazor-Diagrams/Blazor.Diagrams/pull/386) . I think allowing for more distinguishable links (other than by color and width) within a single diagram helps a lot of projects 🙂.