Port highlight #373
Unanswered
snehabihani
asked this question in
Q&A
Replies: 2 comments 1 reply
-
You can add classes to the ports html element by supplying them to the port-renderer (as described in the documentation: https://blazor-diagrams.zhaytam.com/documentation/ports Here is a little bit of code that should get you going: 1. Create a custom port model that holds the information if it is selected or not:
public class CustomPort : PortModel
{
public CustomPort(NodeModel parent, PortAlignment alignment = PortAlignment.Bottom, Point? position = null, Size? size = null) : base(parent, alignment, position, size)
{
}
public CustomPort(string id, NodeModel parent, PortAlignment alignment = PortAlignment.Bottom, Point? position = null, Size? size = null) : base(id, parent, alignment, position, size)
{
}
public bool Highlighted { get; set; } = false;
} 2. Create a custom node widget, that adds the "highlighted" information to the port-renderer class attribute
<div class="default-node @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")">
@(Node.Title ?? "Title")
@foreach (var port in Node.Ports)
{
@if (port is CustomPort custom)
{
<Blazor.Diagrams.Components.Renderers.PortRenderer @key="port" Port="port"
Class="@GetClass(port)">
</Blazor.Diagrams.Components.Renderers.PortRenderer>
}
else
{
<Blazor.Diagrams.Components.Renderers.PortRenderer @key="port" Port="port" Class="default"></Blazor.Diagrams.Components.Renderers.PortRenderer>
}
}
</div>
@code {
[Parameter]
public NodeModel Node { get; set; } = null!;
private string GetClass(PortModel port)
{
var builder = new StringBuilder("default");
if (port is CustomPort custom)
{
builder.Append($"{(custom.Highlighted ? " highlighted" : "")}");
}
return builder.ToString();
}
} 3. Create a method that sets the flag in the custom port model:
private void HighlightPort(SelectableModel model)
{
if (model is not BaseLinkModel link) return;
SetPortHighlights(link.Source, link.Selected);
SetPortHighlights(link.Target, link.Selected);
}
private void SetPortHighlights(Anchor anchor, bool targetState)
{
if (anchor is SinglePortAnchor singlePortAnchor
&& singlePortAnchor.Port is CustomPort port)
{
port.Highlighted = targetState;
port.Parent.RefreshAll();
port.Refresh();
}
} 4. Register the custom node component and the method on the diagram
Diagram.RegisterComponent<NodeModel, CustomNodeWidget>();
Diagram.SelectionChanged += HighlightPort; 5. Add some .css magic to highlight the port
.diagram-node .default-node .diagram-port.highlighted {
background-color: darkorange;
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
Thanks for quick help.
…On Sat, Oct 28, 2023 at 12:46 PM Haytam Zanid ***@***.***> wrote:
Hello;
Easy solution
Basically, you refresh the source and target nodes whenever a link gets
(un)selected, and then in your node you style the port the way you want.
Listen to the event from diagram:
private void OnSelectionChanged(SelectableModel model) {
if (model is not BaseLinkModel link)
return;
(link.Source as SinglePortAnchor).Port.Parent.Refresh();
(link.Target as SinglePortAnchor).Port.Parent.Refresh();}
In your custom node component:
<div class="default-node @(Node.Group != null ? "grouped" : "") @(Node.Selected ? "selected" : "")">
@(Node.Title ?? "Title")
@foreach (var port in Node.Ports)
{
<PortRenderer @key="port" Port="port" Class="default "></PortRenderer>
}
</div>
@code {
[Parameter]
public NodeModel Node { get; set; } = null!;
private string GetPortClasses(PortModel port)
{
va sb = new StringBuilder("default"); // or some other default class
if (port.Links.Any(l => l.Selected)) sb.Append(" highlight");
return sb.ToString();
}}
```
Then you just style your highlighted ports the way you want.
—
Reply to this email directly, view it on GitHub
<#373 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AM4MS6223ELWDYA25K3YNELYBSWNJAVCNFSM6AAAAAA6S3E5HSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TIMBZHA4DO>
.
You are receiving this because you authored the thread.Message ID:
<Blazor-Diagrams/Blazor.Diagrams/repo-discussions/373/comments/7409887@
github.com>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi if i have link between two ports when i click link it is getting slected can we highlight the ports also which are connected by the link? I have many ports on for each node. it is very difficult to figure out.
please help
Beta Was this translation helpful? Give feedback.
All reactions