Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

Etzix
Copy link

@Etzix Etzix commented Oct 22, 2024

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
Copy link
Collaborator

zHaytam commented Nov 13, 2024

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

@snakex64
Copy link

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

@jorg3roch4
Copy link

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
Copy link

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

@Etzix
Copy link
Author

Etzix commented Mar 28, 2025

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
Copy link
Author

Etzix commented Mar 28, 2025

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
Copy link

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
Copy link

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

@Etzix
Copy link
Author

Etzix commented Mar 29, 2025

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
Copy link

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
Copy link
Author

Etzix commented Mar 30, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants