How to handle state persistence in V2?

[frankbracq]

Hello

I'm implementing FamilyTree2.js in a tabbed interface application and need some guidance on the proper way to handle state persistence between tab changes.

Here is my implementation goal:

When a user navigates away from the family tree tab and returns later, I want to preserve:

• Expanded node states (which nodes were expanded)
• The currently focused node
• Ideally, the zoom level and position

Issues Encountered

I've attempted to implement this using the following approach:

`// Save state when leaving tab
const savedState = { expandedIds: family.expandedIds, focusId: family.focusId };

// Restore when returning to tab
family.expandedIds = savedState.expandedIds;
family.draw(savedState.focusId);`

However, I'm encountering several issues:

ViewBox Errors: When trying to restore state, I get SVG errors like:
Error: attribute viewBox: Expected number, "NaN,NaN,NaN,NaN"
SyntaxError: Unexpected token 'N', "[NaN,NaN,NaN,NaN]" is not valid JSON

Event Confusion: The onDemand event loads nodes but doesn't distinguish between automatic loading and user-initiated expansion.
Timing Issues: Restoring expandedIds at the wrong moment seems to cause conflicts with internal library processing.

Technical Questions

• What is the officially recommended way to save and restore FamilyTree2 state when the component gets unmounted and remounted (e.g., in tab navigation)?
• Is there a specific API method to capture genuine user interactions (expanding/collapsing nodes) versus automatic node loading?
• Does FamilyTree2 provide a comprehensive state object that can be saved and restored in a single operation?
• What is the correct sequence of operations when restoring state to avoid viewBox errors?
• Are there any undocumented internal methods or properties that would help with state preservation and restoration?

I've attached error logs below for your reference. Any guidance would be greatly appreciated as this is a critical feature for our application's user experience.

Thank you,

Frank

Error logs:
familytree2.js:2 Error: attribute viewBox: Expected number, "NaN,NaN,NaN,NaN".
setViewBox @ familytree2.js:2
set viewBox @ familytree2.js:2
set scale @ familytree2.js:2
load @ familytree2.js:2
FamilyTree2.private.loadInternalFromAddinfOrDifData @ familytree2.js:2

familytree2.js:2 SyntaxError: Unexpected token 'N', "[NaN,NaN,NaN,NaN]" is not valid JSON
at JSON.parse ()
at FlowChart.private.getViewBox (familytree2.js:2:18774)

[ZornitsaPesheva]

We will implement the state functionality and will write you when it is released.

[frankbracq]

Thank you for your quick and positive reply!

[plamen-peshev]

Clear your browser cache and open this Code demo

Basacally you can save the states with the following properties:

//familyTree.clearState('myStateName');

familyTree.state.name = 'myStateName';
familyTree.state.readFromSessionStorage = true;
familyTree.state.writeToSessionStorage = true;

You also can read/write states in the localStorage isntead of sessionStorage or as url params

The functionallity is implemented in version 2.00.156, too see your version use:

alert(FamilyTree2.VERSION)

[frankbracq]

Thank you. I'll check this asap

[ZornitsaPesheva]

You can also use stateToURL()