search

vasturiano / 3d-force-graph

3D force-directed graph component using ThreeJS/WebGL
https://vasturiano.github.io/3d-force-graph/example/large-graph/
MIT License
4.66k stars 821 forks source link

onNodeClick() does not work properly after Graph.renderer().setSize() #571

Closed turhanberk closed 2 years ago

turhanberk commented 2 years ago

Hi everyone! I am trying to make the Graph canvas responsive to the screen size. Therefore I have added the following simple event listener to the code:

window.addEventListener('resize', onWindowResize, true );

function onWindowResize(){

    Graph.camera().aspect = window.innerWidth / window.innerHeight;
    Graph.camera().updateProjectionMatrix();
    Graph.renderer().setSize(window.innerWidth, window.innerHeight);

}

This event listener works well and the canvas become responsive, hence when I change the size of the browser the drawn graph readjust properly.

However, it broke the onNodeClick() function. Event hough I click on the node, onNodeClick() function cannot be called when I resize the screen. I have tried in both Safari and Chrome, same problem exist in both browsers.

Find the snippet here where the resizing breaks the onNodeClick focus function: https://codepen.io/turhanberk/pen/xxjOWwr

Is there any way I can fix this, or any other way to make graph responsive to the screen size without messing up the onNodeClick()? I've tried to call Graph.refresh() but unfortunately it does not change anything.

Thanks a lot!

turhanberk commented 2 years ago

Issue #403 (https://github.com/vasturiano/3d-force-graph/issues/403) provides a better solution for responsive design than modifying Graph.renderer() for both height and weight 👍