How to Zoom In or Zoom out for a particular node if selected?

[jackfrost1411]

It is hard to find Sigma methods like sigma.getCamera() or sigma.getmousecaptor(). Is there any website or documentation which has these all methods listed? I want to zoom in on a particular node when selected and zoom out after clicked somewhere else. Like I want to position the graph in its initial form after some clicks.

[sim51]

This is what I use to center the graph on a node :

function gotoNode(sigma: Sigma, nodeKey: string) => {
      // Get the node display data (ie. its coordinate relative to the actual camera state)
      const nodeDisplayData = sigma.getNodeDisplayData(nodeKey);
      if (nodeDisplayData) {
        // calling the animate function to go to the node coordinates
        sigma.getCamera().animate(nodeDisplayData);
     }
}

If you want to zoom in / out, you have to specify the ratio like that : sigma.getCamera().animate({...nodeDisplayData, ratio: 1});

You can try to click on a node on this codesandbox : https://codesandbox.io/s/issue-1266-ivvneg

[jackfrost1411]

This is what I use to center the graph on a node :

function gotoNode(sigma: Sigma, nodeKey: string) => {
      // Get the node display data (ie. its coordinate relative to the actual camera state)
      const nodeDisplayData = sigma.getNodeDisplayData(nodeKey);
      if (nodeDisplayData) {
        // calling the animate function to go to the node coordinates
        sigma.getCamera().animate(nodeDisplayData);
     }
}

If you want to zoom in / out, you have to specify the ratio like that : sigma.getCamera().animate({...nodeDisplayData, ratio: 1});

You can try to click on a node on this codesandbox : https://codesandbox.io/s/issue-1266-ivvneg

I get it - how to zoom in on a node - but I want to zoom out after zooming in!!

[sim51]

I don't see what you mean by "zoom out after zoom in"

[jackfrost1411]

I don't see what you mean by "zoom out after zoom in"

For example, https://www.sigmajs.org/demo/index.html on this page - there is a demo containing three buttons in the bottom left. I want to do what the last button does - it recenters and rescales the graph. The problem is the demo code is in react.js and I want to do it in simple typescript.

\ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ /

\ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ /

[sim51]

To reset the camera state (and so view the entire graph), you have to do : sigma.getCamera().animatedReset()

You can check the code of the react sigma here :
https://github.com/sim51/react-sigma/blob/main/packages/core/src/hooks/useCamera.ts#L49

And the sigma code : https://github.com/jacomyal/sigma.js/blob/main/src/core/camera.ts#L298