Is there a way to identify the double click or single click on the Connectors?

First of all great library that I found after trying various libraries such as Syncfusion, Konva, jsPlumb, etc.. I am using the Drawflow within my Vuejs/Nuxtjs application for creating few Nodes and Connectors dynamically.

For each Connector I want to provide some information associated with it, since we do not have the Label option for Connectors, I am using the connectionSelected event to trigger a Bootstrap-modal for the Connector where I can provide some information associated with respective Connector.

Since, I am using the connectionSelected event for triggering the modal, I am unable to delete the Connector because for every click on Connector the modal is opened. Hence, I am looking for an option where I can detect the Double click on Connector so for Double click I can open the Modal and for single click on the Connector I can select and delete it if required.

Is there any way I can achieve the Double and Single click on the Connector? or is there any other work-around that I can try to over come this issue? Really looking for some suggestion or workaround. I could not find any relevant post here on the same so thought of posting.

[jerosoler]

Codesanbox is slow but it works.

[jerosoler]

Hi! @Aravinda93

You have two ways to do it.

Method 1: One with the events. You can do this with the “click” or “clickEnd” events. The difference is that in clickEnd the changes are already assigned.

Example:

    editor.on('clickEnd', function(e) {
      if (e.detail === 2 && e.target.classList[0] === "main-path") {
        console.log(editor.connection_selected);
      }
    });

Method 2: Overwriting the dblclick function before editor.start() Example:

   editor.dblclick = function(e) {
      if(this.connection_selected != null && this.reroute) {
        this.createReroutePoint(this.connection_selected);
      }
      if(e.target.classList[0] === 'point') {
          this.removeReroutePoint(e.target);
      }
      if (e.detail === 2 && e.target.classList[0] === "main-path") {
        console.log(editor.connection_selected);
      }

    } 

I recommend method 1. Since this way nothing is overwritten.

All of this works as long as you have the value of editor.reroute = false; (For default is false).

Jero