Port highlight

[snehabihani]

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

[K0369]

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

Result:

Not selected:

Left link selected:

Right link selected:

[snehabihani]

Thank you all for the quick soltion

[snehabihani]

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>