Can we have a before connection delete event?

[MuhammadBilalIshrat]

how we can confirm before deleting the connection. by the way, thank you soo much your trick is helpful for me.

[jerosoler]

Hi!

Try:

editor.removeConnection = function() {
          const OK = confirm("Press a button!");
          if(OK) {
            if(this.connection_selected != null) {
              var listclass = this.connection_selected.parentElement.classList;
              this.connection_selected.parentElement.remove();
              //console.log(listclass);
              var index_out = this.drawflow.drawflow[this.module].data[listclass[2].slice(14)].outputs[listclass[3]].connections.findIndex(function(item,i) {
                return item.node === listclass[1].slice(13) && item.output === listclass[4]
              });
              this.drawflow.drawflow[this.module].data[listclass[2].slice(14)].outputs[listclass[3]].connections.splice(index_out,1);

              var index_in = this.drawflow.drawflow[this.module].data[listclass[1].slice(13)].inputs[listclass[4]].connections.findIndex(function(item,i) {
                return item.node === listclass[2].slice(14) && item.input === listclass[3]
              });
              this.drawflow.drawflow[this.module].data[listclass[1].slice(13)].inputs[listclass[4]].connections.splice(index_in,1);
              this.dispatch('connectionRemoved', { output_id: listclass[2].slice(14), input_id: listclass[1].slice(13), output_class: listclass[3], input_class: listclass[4] } );
              this.connection_selected = null;
            } 
          }
        }

[maribol]

Thanks for the info but it would be helpful to provide a connection object for easier removal. Also is there a native way implemented for making sure you can only connect certain types of nodes?

I've done it using this, but there might be an easier way. I can make a pull request if there's nothing like it already.

this.editor.on('connectionCreated', (connection) => {
    let inputNode = this.editor.getNodeFromId(connection.input_id);
    let outputNode = this.editor.getNodeFromId(connection.output_id);

    if (inputNode.data.only_on) {
        let allowedTypes = [];
        if (typeof inputNode.data.only_on == 'string') {
            allowedTypes.push(inputNode.data.only_on);
        } else {
            allowedTypes = inputNode.data.only_on;
        }

        if (!allowedTypes.includes(outputNode.data.type)) {
            this.removeConnection(connection);

            this.$notify({
                type : 'error',
                title: this.$t('funnels.edit.error'),
                text : `You can't connect ${inputNode.data.type} to ${outputNode.data.type}`,
            });
        }
    }
});

removeConnection(connection) {
    let output_id = connection.output_id;

    let connectionEl = document.querySelector(`.connection.node_in_node-${connection.input_id}.node_out_node-${connection.output_id}.${connection.output_class}.${connection.input_class}`);
    connectionEl.remove();

    let index_out = this.editor.drawflow.drawflow.Home.data[output_id].outputs[connection.output_class].connections.findIndex(function(item,i) {
        return item.output == connection.output_class && item.node === output_id && item.input === connection.input_class
    });
    this.editor.drawflow.drawflow.Home.data[output_id].outputs[connection.output_class].connections.splice(index_out,1);

    let index_in = this.editor.drawflow.drawflow.Home.data[connection.input_id].inputs[connection.input_class].connections.findIndex(function(item,i) {
        return item.input == connection.input_class && item.node === connection.input_id && item.output === connection.output_class
    });
    this.editor.drawflow.drawflow.Home.data[connection.input_id].inputs[connection.input_class].connections.splice(index_in,1);
},