Right and Bottom aligned ports are incorrectly detected as inside the node

[Koubi01]

Hi,

I'm having issues with port alignment and link routing when using orthogonal router. When I add ports using PortAlignment.Right or PortAlignment.Bottom, they appear visually in the correct place (outside the node), but links created from these ports behave incorrectly — it's as if the router still considers them inside the node.

I'm rendering nodes as svg. I have my custom model which inherits SvgNodeModel. The left and top ports are working perfectly.

this is how i render them

@foreach (var (port, i) in rightPorts.Select((p, i) => (p, i)))
    {
        double spacing = 50/3.0;
        var y = (i+1) * spacing * ((double)RectHeight / 100);
        var x = NodeWidth + 5;
        <PortRenderer @key="@($"{i} r")" Port="port">
            <circle cx="@x" cy="@y" r="5" fill="black" />
        </PortRenderer>
    }

I'm rendering every group the same.

When I was debuging the code, I notice that the right and bottom ports are considered inside the node by the Orthogonal Router.
I double check position of the ports and the size of node and it looks like correct,
These green links are rendered as only straith and withnout orhogonal routing.

Am I doing something wrong or is that intended behavior?

[zHaytam]

Hey, would it be possible to have a small code sample that renders your nodes so that I can do some tests with them?

[Koubi01]

Hi,

here some code example how i render them

insted of SVGnodeModel im using my own but there is only more strings inside nothing with funcions of the node

@using Blazor.Diagrams.Core.Models

@{
    //right,left,bottom are 5 ports and top is 3 ports only always this count
    List<PortModel> rightPorts = Node.Ports.Where(p => p.Alignment == PortAlignment.Right).ToList();
    List<PortModel> leftPorts = Node.Ports.Where(p => p.Alignment == PortAlignment.Left).ToList();
    List<PortModel> topPorts = Node.Ports.Where(p => p.Alignment == PortAlignment.Top).ToList();
    List<PortModel> bottomPorts = Node.Ports.Where(p => p.Alignment == PortAlignment.Bottom).ToList();
}

   <rect x="0" y="0" width="@RectWidth" height="@RectHeight" rx="8" ry="8"
          fill="Red" stroke="black" />    
    
    <text x="@CenterX" font-size="20" text-anchor="middle" font-weight="bold" fill="black">      
       @Node.Title     
    </text>


    @foreach (var (port, i) in rightPorts.Select((p, i) => (p, i)))
    {
        double spacing = 50/3.0;
        var y = (5-i) * spacing * ((double)RectHeight / 100);
        var x = RectWidth + 5;
        <PortRenderer @key="@($"{i} r")" Port="port">
            <circle cx="@x" cy="@y" r="5" fill="black" />
        </PortRenderer>
    }

    @foreach (var (port, i) in leftPorts.Select((p, i) => (p, i)))
    {
        double spacing = 50/3.0;
        var y = (i+1) * spacing * ((double)RectHeight / 100);

        <PortRenderer @key="@($"{i} l")" Port="port">
            <circle cx="-5" cy="@y" r="5" fill="black" />
        </PortRenderer>
    }

    @foreach (var (port, i) in topPorts.Select((p, i) => (p, i)))
    {
        double spacing = 50/3.0;
        var offset = (50+i * spacing) * ((double)RectWidth / 100);

        <PortRenderer @key="@($"{i} t")" Port="port">
            <circle cx="@offset" cy="-5" r="5" fill="black" />
        </PortRenderer>
    }

    @foreach (var (port, i) in bottomPorts.Select((p, i) => (p, i)))
    {
        double spacing = 50/3.0;
        var offset = (5-i) * spacing * ((double)RectWidth / 100);
        var y = RectHeight + 5;

        <PortRenderer @key="@($"{i} b")" Port="port">
            <circle cx="@offset" cy="@y" r="5" fill="black" />
        </PortRenderer>
    }
@code {

    private int RectWidth = 150;
    private int RectHeight = 150;

    private int CenterX => RectWidth / 2;
    private int CountY => RectHeight -8;
   
    #region Properties
    
        [Parameter] public SvgNodeModel Node { get; set; } = null!;
        
    #endregion
    
}```