editor.removeConnection removing only half of connections

[perotom]

Describe the bug

When removing a connection it should be removed.

Example to reproduce

https://codesandbox.io/p/sandbox/3t42jc

How to reproduce

Press the button "refresh outputs" in the provided example.
All connections are removed in the rendered view, but not in the background (press the button again to see in the logs again some connections).

Expected behavior

In the example all connections should be removed. They are just removed in the rendered view but if you check the console, you will see the output will show still some connections exists. If you try this example with multiple connections, only 1/2 of the connections are removed, even-though the return value of all calls to editor.removeConnection is true.

Dependencies

https://codesandbox.io/p/sandbox/3t42jc

Platform

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[perotom]

Might be connected to #721

[pokecheater]

By the way:

The same problem occurs if one tries to call editor.removeNode(node.id). Than the node is removed but the connections endings are still rendered:

Right before delete:

Right after delete:

I was able to fix that issue by my own (or moreover to build a workaround):

On my node base class I added the methods getConnections and deleteConnections:

    getConnections() {
        return this.editor.connections.filter(connection => {
            return connection.source === this.id || connection.target === this.id;
        });
    }

    async deleteConnections() {
        const connections = this.getConnections();

        for (const connection of connections) {
            this.editor.removeConnection(connection.id);
        }
    }

This solved the problem for me :). But the bug still persists in your code base.

[pokecheater]

With the same approach I was also able to create a workaround for the connection delete problem when deleting a socket dynamically on a node:

  clearInputs() {
        console.log("this", this);
        Object.keys(this.inputs).forEach(key => {
            this.clearSocketConnections(key);
            this.removeInput(key);
        });
    }

    clearSocketConnections(socketName) {
        const connections = this.getSocketConnections(socketName);
        for (const connection of connections) {
            this.editor.removeConnection(connection.id);
        }
    }

    getSocketConnections(socketName) {
        return this.editor.connections.filter(connection => {
            return (
                (connection.target === this.id && connection.targetInput === socketName)
                || (connection.source === this.id && connection.sourceOutput === socketName)
            );
        });
    }

[pokecheater]

Hope this helps someone out there :)

[Ni55aN]

#721 (comment)

I’ll add a dedicated section to the guide about deleting nodes and connections. Hopefully, this will clear up any potential confusion

[Ni55aN]

Than the node is removed but the connections endings are still rendered:

@pokecheater honestly, this is expected behavior.

Automatic connection removing could work by default in many cases, but in some, it might not fit or be difficult to customize. So, you need to handle these cases yourself

I could consider adding an optional extension; let's see if there are more requests for this