Please add clickOnVacantSpace interaction about force-graph

[vasturiano]

@joric the cursor is changing to pointer because the background is clickable. That is indicated by defining a handler for onBackgroundClick.

It's not recommended but if you want you could override that styling by forcing cursor: default on css, everytime a node's hover is completed, i.e. onNodeHover(node => !node && /* your code */).

[vasturiano]

@wunaidage you can simply detect click events on your DOM element. Background clicks will bubble up the DOM and can be detected upstream.

[wunaidage]

well, I tried. Clicking on node and link will always be triggered before the dom click. What I was doing is to click on node to highlight node and click on outside to cancel highlight. But when I add listener on DOM, I cannot even highlight the node anymore. It turns out that it was highlighted first by force-graph and then cancelled by dom click.

[wunaidage]

I think the lib is adding click listener on the canvas but I'm adding listener on the container which cause that sequence

[vasturiano]

@wunaidage I've just added two methods to help you with handling these cases:

graph
  .onBackgroundClick(() => ...)
  .onBackgroundRightClick(() => ...)

Make sure to pull the latest version (1.20.0).

[wunaidage]

wow!! thanks a lot!!!

[joric]

@wunaidage how can I change cursor from hand to arrow? It doesn't look good if pointer is the same on the nodes and on the background.

[joric]

@vasturiano I had to use timeout like this, doesn't work without it. Shouldn't be too large, or it affects the nodes:

.onNodeHover(node=>!node && setTimeout(()=>document.querySelector('canvas').classList.remove('clickable'),5))