implement release_link_on_empty_shows_menu using the LiteGraph.js ComfyUI fork

LiteGraph.js fork from https://github.com/Comfy-Org/litegraph.js has a typescript interface which is nice, I'm trying to implement my own app using this fork,

I'm having problem detecting when a user starts a new connection and when a user drops a connection on empty space. I want to implement something that exists in the comfyUI, that if I add a new connection in an input or output and drop it in an empty space on the grid, it will open an auto complete with the relevant nodes that connect to this type,

as far as I understood this feature isn't available by default, even though I noticed that it has the boolean value of LiteGraph.release_link_on_empty_shows_menu but it doesn't really do anything. maybe it's a left over from the regular project or I'm missing something.

so how can I detect when a connection is starting from clicking on input/output and clicking on empty safe?

any information regarding this issue would be greatly appreciated. I'm lost :)

I'm using it in a Vue3 typescript project, on onMount():

const canvasEl = canvasRef.value;
      if (!canvasEl || !graphAreaRef.value) return;

      // Register custom socket types
      registerSocketTypes();

      // Add event listeners
      document.addEventListener('mousedown', handleClickOutside, true);
      window.addEventListener('keydown', handleKeyDown);

      // Set up interval to update live JSON
      const liveUpdateInterval = setInterval(updateLiveJson, 1000);

      // Initialize the LGraphCanvas
      graphCanvas = new LGraphCanvas(canvasEl, graph, { autoresize: true });
      canvasEl.addEventListener("pointerdown", (e) => {
        if (contextMenu.visible) {
          contextMenu.visible=false;
        }

      }, true);

      // Set up canvas for high-DPI (device pixel ratio)
      const rect = graphAreaRef.value.getBoundingClientRect();

      // Ensure the canvas is properly sized
      canvasEl.width = rect.width * window.devicePixelRatio;
      canvasEl.height = rect.height * window.devicePixelRatio;

      // Enable interactive features
      // LiteGraph.allow_searchbox = true;
      // LiteGraph.searchbox_extras = {};  // ensure search box can list custom nodes
      graphCanvas.allow_dragcanvas = true;
      graphCanvas.allow_dragnodes = true;
      graphCanvas.allow_interaction = true;
      graphCanvas.allow_searchbox = true;
      // LiteGraph.release_link_on_empty_shows_menu=true;

      // graphCanvas.onDropItem = null; // (could handle file drop on canvas if needed)

      // Override the default search box with our custom implementation
      graphCanvas.onSearchBox = (helper: Element, str: string, canvas: LGraphCanvas) => {
        // We're not using the default search box, so we can return false to prevent it from showing
        console.debug("Searching for (default search box disabled): ", str);
        return false;
      };

      // Override the default showSearchBox method
      const originalShowSearchBox = graphCanvas.showSearchBox.bind(graphCanvas);
      graphCanvas.showSearchBox = (e: MouseEvent, options: any = {}) => {
        // Call our custom showSearchBox instead
        showSearchBox(e, options);
        return document.createElement('div'); // Return a dummy element to satisfy the API
      };

      // Create initial nodes if provided
      if (props.initialNodes && props.initialNodes.length > 0) {
        // Add initial nodes
      } else {
        // Create a few initial nodes and connections to demo the pipeline
        const nodeA = LiteGraph.createNode("Custom/LoadVideo", "LoadVideo");
        const nodeB = LiteGraph.createNode("Custom/Transcribe", "Transcribe");
        const nodeC = LiteGraph.createNode("Custom/MultiSummarize", "MultiSummarize");
        if (nodeA && nodeB && nodeC) {
          nodeA.pos = [50, 100];
          nodeB.pos = [300, 100];
          nodeC.pos = [550, 100];
          graph.add(nodeA); graph.add(nodeB); graph.add(nodeC);
          nodeA.connect(0, nodeB, 0);  // LoadVideo (out0) -> Transcribe (in0)
          nodeB.connect(0, nodeC, 0);  // Transcribe (out0) -> MultiSummarize (in0)
          // Select all nodes to highlight them initially (for demo)

          graphCanvas.selectItems([nodeA, nodeB, nodeC]);
        }
      }

      graphCanvas.resize();
      graphCanvas.draw(); // start graph execution (if using onExecute)

      // Set up graph change listeners to update live JSON
      graph.onNodeAdded = () => {
        console.debug("Node added: ", graph.nodes.length, " nodes in graph.")
        updateLiveJson();
      }
      graph.onNodeRemoved = () => {
        console.debug("Node removed: ", graph.nodes.length, " nodes in graph.")
        updateLiveJson();
      }
      graph.onConnectionChange = () => {
        console.debug("Connection changed: ", graph.nodes.length, " nodes in graph.")
        updateLiveJson();
      }