cytoscape.js panning stuck when mouseout

Question

Disclaimer, this behaviour does not happen in a plain React application with CytoscapeComponent. Preview in Chrome works perectly.

However I embed this React app into some other project as a Webview. This is where the problem starts.

Constants,

1. Node pan disabled,
2. Graph pan enabled So you can move the whole graph but not the nodes individually.

Problem occurs when you click and hold your mouse to pan the graph, while keep holding the mouse, go outside of the webview and release the mouse button. When you enter to the webview by simply moving your mouse there, Cytoscape keep panning the graph even though your not holding any mouse button anymore. So you have to click somewhere else to stop panning.

I tried this but it did not solve the situation unfortunately.

context.cyRef.on("mouseout", function (event) {
    console.log("mouseout");
    context.cyRef.userPanningEnabled(false);
});

context.cyRef.on("mouseover", function (event) {
    console.log("mouseover");
    context.cyRef.userPanningEnabled(true);
});

Is there something that that releases the mouse hold.

Answer 1

I found a way to fix this behaviour, anyone who might need it in the future here it is:

    document.addEventListener("pointerdown", (event: PointerEvent) => {
      const target = event.target as HTMLElement;
      target.setPointerCapture(event.pointerId);
    });

    document.addEventListener("pointerup", (event: PointerEvent) => {
      const target = event.target as HTMLElement;
      target.releasePointerCapture(event.pointerId);
    });