Is there a way to change the input?

[fajardokarl]

Hi, been using this for a project and it's been good. But a requirement was added on our side of the project. Is there a way to change the input? In our case, we need to make the connection detached when we draw the input on a node that has a connection.

[jerosoler]

Hi @fajardokarl

You mean this?

• https://github.com/jerosoler/Drawflow/issues/35

Using the connectionCreated event we remove the previous connection. And we leave the new one.

[fajardokarl]

Thank you for the reply @jerosoler. What I meant was like resetting the connection when you drag an input with the connection, It will detach.

Then the output connection will remain and other end will make the mouse pointer its end position again, like this.

[jerosoler]

I think this could work.

    editor.on("clickEnd", (e) => {
        if(e.target.classList[0] === "input") {
            const nodeId = e.target.closest(".drawflow-node").id.slice(5);
            const nodeInfo = editor.getNodeFromId(nodeId);
            if(nodeInfo.inputs[e.target.classList[1]].connections.length > 0) {
                const removeConnectionInfo = nodeInfo.inputs[e.target.classList[1]].connections[0];

                editor.removeSingleConnection(removeConnectionInfo.node, nodeInfo.id, removeConnectionInfo.input, e.target.classList[1]);

                var evt = new MouseEvent("mousedown", {
                    view: window,
                    bubbles: true,
                    cancelable: false,
                });
                editor.container.querySelector(`#node-${removeConnectionInfo.node} .outputs .output.${removeConnectionInfo.input}`).dispatchEvent(evt);
            }
        }
    });

[fajardokarl]

It works, thank you so much. I think this could be a good additional feature for the library in the future version. Cheers.