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

[Aravinda93]

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]

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

[Aravinda93]

@jerosoler Thanks a lot for your response and code sample but for some reason I am unable to make it work.

As you mentioned I am using the Method-1 sample code within my index.vue component but when I click on the Connector nothing happens. Following is the chunk of code which I have added, complete code can be found in the Codesandbox.

I'm really sorry but surely I am missing something or may not have understood the logic completely.

  async mounted() {
    const vm = this;
    const importedModule = await import("drawflow");
    const Drawflow = importedModule.default;
    Vue.prototype.$df = new Drawflow(this.$refs.drawflow, Vue, this);

    this.$df.reroute = false;
    this.$df.registerNode("NodeTemplate", NodeTemplate, {}, {});
    this.$df.start();

    // On selection of the Connector get show the modal for getting the information
    /* this.$df.on('connectionSelected', function (connectObj) {
      toggle the modal flag and show the modal
      vm.$store.commit('modules/ConnectorStore/showConnectorModal')
    }) */

    this.$df.on("click", function (event) {
      console.log("E VALUES : " + JSON.stringify(event, null, 4));
      console.log(vm.$df);
      if (event.detail === 2 && event.target.classList[0] === "main-path") {
        alert(vm.$df.connection_selected);
      }
    });
  },

I get only the following output:

E VALUES : {
    "isTrusted": true
}

[jerosoler]

Hi

event.detail === 2 is for dobleclick and event.target.classList[0] === "main-path" is for connection line.

I have tested on codesanbox and it works.

[Aravinda93]

@jerosoler Can you please share the Codesandbox link where you tried? because in my case the code execution is not going into the if block at all. This is happening because my clickEnd event has only "isTrusted : true" value it does not have any other information such as "event.detail", etc.

Please share the sample you have tried so I can refer to it.

    this.$df.on('clickEnd', function (e) {
      console.log('E VALUES : ' + JSON.stringify(e, null, 4))

      if (e.detail === 2) {
        console.log('WITHIN DOUBLE CLICK')
      }

      if (e.detail === 2 && e.target.classList[0] === 'main-path') {
        console.log('WITHIN ')
        alert(vm.$df.connection_selected)
      }
    })

[jerosoler]

I provided it in your codesandbox: https://github.com/jerosoler/Drawflow/issues/299#issuecomment-968345332

[jerosoler]

Codesanbox is slow but it works.

[Aravinda93]

@jerosoler Thanks a lot for your response. Yes, the Codesandbox is very slow and not running correctly so I will try again after some time and update you. Thanks again :)

[Aravinda93]

@jerosoler Thanks a lot, it's working now as expected. Thanks a lot for this workaround :)