[FR] add functionality to pick the right connection from lot one's

[trsh]

I have a situation where like 15 nodes nodes are connected to another one. So when I want to disconnect one particular it's very hard to pick from the bunch.

So by any chance I can Select the connection (in a place where I understand this is this), color it, and...

Btw I need advice for d3js versions, as I'm no migrating yet.

[Ni55aN]

Do you mean a 15 connections to single input ? I know such issue, but have not found solution yet.

Either way, this will only be added to the latest version (v1.0.0)

[Ni55aN]

https://github.com/retejs/connection-plugin/issues/5

[trsh]

Do you mean a 15 connections to single input ?

Yeah. So it's hard to disconnect the Right one :). Idea is that one could select the connection at any point (it highlights), where it can be identified as Right one, and the Hit del.

Anyways. It there any/no way, even hacky one, to do some evens on old version connections?

[trsh]

Maybe also the Highlighted connection Nodes, can highlight.

[JMidd91]

Do you mean a 15 connections to single input ? I know such issue, but have not found solution yet.

just an idea - like how you have done your re-route node plugin, perhaps you could interact with the connection line maybe like right clicking on it to provide a context menu for removing connection?

or similarly a context menu for the input that lists all re movable connections?

you've prob already thought of these ideas but thought id write them down anyways haha

[trsh]

@Ni55aN

I think this is must be for RC :P ! Experiencing lot's of problem with this. Often I have to remove all the connections to reorganize :(

[Ni55aN]

@trsh do you think we need something like the ability to delete a connection using a long click on path (svg's path) ?

[trsh]

Yes @Ni55aN .

Here is a problem case:

Here is the idea - clicking on path, adds diff style for path and connected nodes. Then one knows what this node does exactly connect. Then hit delete. But that's also guessing :/

Some pseudo code:

path.onclick = () => {
        const allMainPaths = document.getElementsByClassName("main-path");
        for(const mainPath of allMainPaths){
            mainPath.classList.remove("selected");
        }

        const selectedConnections = document.getElementsByClassName("connection-selected");
        for(const selectedConnection of selectedConnections){
            selectedConnection.classList.remove("connection-selected");
        }

        path.classList.add("selected");

        connection.input.node.vueContext.$el.classList.add("connection-selected");
        connection.output.node.vueContext.$el.classList.add("connection-selected");        
    };

editor.on('keyup', (e) => {
        if(e.keyCode == 46) {
            const selectedConnections = document.getElementsByClassName("connection-selected");            
            for(const selectedConnection of selectedConnections){
                editor.removeConnection(selectedConnection);
            }
        }
    });

[Ni55aN]

connection-plugin v0.3.1 has been published.

Upd example: https://codepen.io/Ni55aN/pen/xzgQYq You can select a particular connection by right-clicking or by long pressing on a touchscreen (contextmenu event)

[trsh]

@Ni55aN tnx. Sometimes i get a situation when connection is dropped and context menu is shown when right clicking on path. But can't repeat it stabley.

[Ni55aN]

https://github.com/retejs/connection-plugin/issues/5