How to preserve the layout, positioning and zoom level of org chart

[bisoladebiyi]

Hello! Currently i'm looking for a way to preserve the whole layout of the chart, so that upon refresh or component re-render, it doesn't fall back to the initial default state

https://github.com/bumbeishvili/org-chart/assets/69858244/c72f0c18-c9a1-4f93-b7ae-ab92852fdc43

From the docs, I have seen there's a getChartState method that returns the state object and preserving this is no problem, but I'd like to know if there's any efficient way of setting the chart state upon render after retrieving this object from where its been stored.

[bumbeishvili]

Hi, an easy way to preserve which node was expanded is to save the data

dataToSave = chart.data()

Saving the layout itself is trickier, you need to get zoom behavior and when re-rendereing supply that zoom behavior. I only know this as theory, don't have time to implement it in practice

[christophdb]

Hey @bumbeishvili,

my understanding is that with getChartState you can get the zoomLevel like this, correct?

const attrs = chart.getChartState();
zoomLevel = attrs.lastTransform.k;

But how do you determine the current position of the chart? If the user moves the position of the chart with the mouse, how can you determine this? I didn't found anything in the source code.

[bumbeishvili]

Yes, that's correct, lastTransfrom also has x and y properties and you can get a position with that. Alternatively, extract and parse the transform property of g.chart element