Problem with removing ports

[314159265meow]

Hi,

when you remove ports from a node, the other ports often get the wrong position and sometimes in our case have their Initialized property set to false. The results are not deterministic though, I think it a timing problem with the MutationObserver.

You can test it in your demo. Browser: Chrome 104

[zHaytam]

Hello,

I can confirm the bug. I'm looking into it, thank you for letting me know. It does look like the link is as if it's going from another port (right or top/right)

[zHaytam]

Got it!

The issue is due to how Blazor detects changes inside a for loop.

Let's take the default node widget:

    @foreach (var port in Node.Ports)
    {
        <PortRenderer Port="port" Class="default"></PortRenderer>
    }

It happens that the deleted ports are:

Which leaves the Right port right? Yes! But because of the for loop & blazor, the Top port is still rendered instead.
To fix it, we simply need to use the @key property:

    @foreach (var port in Node.Ports)
    {
        <PortRenderer @key="port" Port="port" Class="default"></PortRenderer>
    }

[zHaytam]

This also explains why it looks like in the demo that removing ports removes them anti clock wise. The thing is, it's random, so it shouldn't even look like that 😄

[314159265meow]

Thank you quick help, it did some very weird things for us, like rendering non attached links and eventually throw a JS exception ("getBoundingClientRect" of null).

The @key attribute fixes it perfectly.