JointJS Vue.js Integration: Double-Click Event Listener Multiplication

Question

I'm encountering an issue with event listeners in JointJS within a Vue.js application.

The problem arises when using a double-click event listener (cell:pointerdblclick) within a method called initializeGraph, which I call each time there's a change in the configuration.

Here's the setup:

methods: {
    initializeGraph () {
      // Graph initialization...
      // Adding the double-click event listener
      this.paper.on("cell:pointerdblclick", async (cellView) => {
        // Double-click event handling logic here...
      });
    }
}

The issue is that each time I call initializeGraph(), a new instance of the double-click event listener is added. Consequently, when I double-click an element, the event fires multiple times, depending on the number of times initializeGraph() has been called.

I need a solution that prevents the event listener from incrementing with each call to initializeGraph() and ensures that the double-click event triggers only once regardless of how many times the method has been invoked.

I attempted a solution that involved setting a boolean flag (doubleClickHandlerAttached) to track whether the event listener is already attached. However, this approach leads to another issue.

data() {
  return {
    doubleClickHandlerAttached: false, // Attempted solution
    // Other data properties...
  };
},
methods: {
  initializeGraph() {
    // Graph initialization...
    if (!this.doubleClickHandlerAttached) {
      // Adding the double-click event listener
      this.paper.on("cell:pointerdblclick", async (cellView) => {
        // Double-click event handling logic here...
        // Ensuring the event fires only once
            this.doubleClickHandlerAttached = true;
      });
    }
  }
}

When adding a new element to the graph and subsequently calling initializeGraph, the double-click event does not work because the event listener is disabled due to the doubleClickHandlerAttached variable being set to true.

I'm looking for guidance on how to maintain the functionality of the double-click event listener while preventing it from being duplicated and ensuring it triggers only once per element, regardless of the number of times initializeGraph is called after a graph update.