Handle click, right click, double click events on sockets

[WieFel]

I want to implement a functionality that is triggered when clicking the sockets of a rete component.

Is it possible to add an event listener for simple clicks, right clicks, double clicks (corresponds to long press on touch screen) on sockets?

Maybe it would be possible to implement it using jQuery: $(".socket").click(function() { ... });

However, I wonder if rete offers a direct way to implement this?

[Ni55aN]

editor.on('rendersocket', ({ el, socket, input, output }) => {
    el.addEventListener('...
});

[WieFel]

Thank you!

However, there is still a problem. When adding event listeners in the editor.on('rendersocket', ...) callback, the event listeners are called several times. Every time a node is moved around in the editor, the "rendersocket" event is triggered and a new event listener is added to the socket. How is it possible to prevent that? I already tried with setting the options parameter of addEventListener to {once: true}, but it doesn't completely solve the problem.

One more question: When reacting to "dblclick" events on a socket, how could I prevent the framework from showing the connection edge for connecting to another component? I would only want to trigger my own functionality and nothing else in case of a double click.

[Ni55aN]

@WieFel rendersocket is triggered on each update. You can check if the listener was added, or remove the listener on each update

https://github.com/retejs/connection-plugin/blob/a9b24363d7803b8a904086968adce166dd54a7f7/src/index.ts#L45-L46

[Ni55aN]

In v0.9.0 you can reset pseudo connection

    const listeners = new WeakMap();
    editor.on('rendersocket', ({ el }) => {
      if (!listeners.has(el)) {
        listeners.set(el, true);
        el.addEventListener('dblclick', (e) => {
            e.stopPropagation();
            console.log(e);
            editor.trigger('resetconnection');
        });
      }
    });

[WieFel]

In v0.9.0 you can reset pseudo connection

    const listeners = new WeakMap();
    editor.on('rendersocket', ({ el }) => {
      if (!listeners.has(el)) {
        listeners.set(el, true);
        el.addEventListener('dblclick', (e) => {
            e.stopPropagation();
            console.log(e);
            editor.trigger('resetconnection');
        });
      }
    });

Thanks, this solved my problems!