Fit graph function

[mdre]

How could I implement a function that fit the graph in the current viewport?
I have tried different approach but could not get it to work.

This is my playground sandbox:

https://codesandbox.io/p/sandbox/sigma-template-forked-rgnk9q?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0qpfmkc00072v6frpr9r7y2%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0qpfmkb00032v6fvyl34k7s%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0qpfmkb00042v6fe5jqyarh%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0qpfmkb00062v6f4y7ki0lg%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0qpfmkb00032v6fvyl34k7s%2522%253A%257B%2522id%2522%253A%2522cm0qpfmkb00032v6fvyl34k7s%2522%252C%2522activeTabId%2522%253A%2522cm159otyf00ag2v6efop40lyc%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0qpfmkb00022v6fksww9s10%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A361%252C%2522startColumn%2522%253A58%252C%2522endLineNumber%2522%253A361%252C%2522endColumn%2522%253A58%257D%255D%252C%2522filepath%2522%253A%2522%252Findex.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fmake-group.svg%2522%252C%2522initialSelections%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm159otyf00ag2v6efop40lyc%2522%252C%2522mode%2522%253A%2522temporary%2522%257D%255D%257D%252C%2522cm0qpfmkb00062v6f4y7ki0lg%2522%253A%257B%2522id%2522%253A%2522cm0qpfmkb00062v6f4y7ki0lg%2522%252C%2522activeTabId%2522%253A%2522cm152ufph008i2v6enyv4xtfo%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0qpfmkb00052v6famzqtf3u%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm0qpifin00132v6e27wnyfi5%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522cm152ufph008i2v6enyv4xtfo%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0qpfmkb00042v6fe5jqyarh%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cm0qpfmkb00042v6fe5jqyarh%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[jacomyal]

I don't understand your question: By default, sigma is designed so that, with the default camera state { x: 0, y: 0, angle: 0, ratio: 1 }, the graph fits to the viewport.

Could you specify a bit more what you are trying to achieve?

[mdre]

I'm working on a graph editor component. When you add node and edge dinamically with the mouse or move the nodes expanding the graph, the original camera view does not show the whole graph anymore. So, how could I refresh de camera view to show the whole new graph.
The cam state work fine for a imported graph or a graph builded in the init state but after that it loose the focus.
Did I explain correctly?

[jacomyal]

OK, it's more clear now, thanks.

In your case, if you delete the custom bounding box, sigma will go back to its default behavior, which is "fit the graph to the viewport". So you could try something like this in your code:

function resetView() {
  sigma.setCustomBBox(null);
  sigma.getCamera().setState({ x: 0.5, y: 0.5, ratio: 1 });
  sigma.refresh();
}

[mdre]

Great! Thanks.
Trying to draw a 920.000 node graph! experimenting on how to optimize it.