Correct way to save and persist a graph including scale/transform

[lurondev]

Hi I would appreciate a bit of help/guidance with the correct way of saving and reloading a graph especially with respect to its scale and transform. If there is an example, please point me to it.

I currently have a graph that has a view model containing the nodes and connections

viewModel = signal<IFlowViewModel>
{
    //node extends IFFlowStateNode
    nodes: [],
    //connection extends IFFlowStateConnection
    connections: []
}

The component has:

@ViewChild(FFlowComponent)
public fFlowComponent: FFlowComponent

The graph's state is obtained and persisted via:

this.fFlowComponent.getState()

On restore:

1. The previously persisted state is parsed into graphState: IFFlowState
2. The viewModel nodes + connections are built and rendered correctly
3. The scale and position are set via:

this.fCanvasComponent.setScale(graphState.scale);
this.fCanvasComponent.setPosition(graphState.position);

But the scale and position of the graphState are not respected and the graph does not look as expected. I realize the call to set the scale/position might need to be made later(is there an event when the graph finished rendering?), I've used timeouts, etc but I can't render the graph exactly as it was saved.

Any help is appreciated.

[siarheihuzarevich]

Hi!

Thanks for bringing this up.

You can find a complete, working project based on Foblex Flow here:
https://github.com/Foblex/Building-AI-Low-Code-Platform5

It demonstrates a full real-world setup and covers the same pain points you described (with practical solutions already implemented in the project).

Hope this helps - and if you like what we’re building, please consider giving us a ⭐ on GitHub. It really supports the project!

[lurondev]

Thank you, the example above is very good in general but it doesn't seem to work as expected wrt to the transform and scale being restored. Here's what I mean.

1. Generate a graph with some nodes.
2. Adjust the transform and zoom level.
3. Save the state via Export. The JSON's state's transform/scale is this for my graph:

ie:

  "transform": {
    "position": {
      "x": 1520.6785653250558,
      "y": 693.1819003911246
    },
    "scale": 0.30000000000000016
  },

4. Modify the graph, change zoom/transform, etc.
5. Restore previously exported graph via import JSON.
6. The transform and scale above do not seem to work or work reliably. The graph has a different transform/scale. The scale is 1.
7. Export the JSON for the new restored graph and note that the transform/scale are different. I would expect the identical values as in step 3 but mine for example are:

 "transform": {
  "position": {
    "x": 2208,
    "y": 788.0999984741211
  },
  "scale": 1
},

[siarheihuzarevich]

Thanks for the detailed report.

This behavior is intentional in our example. After import (and after any “restore/load” scenario) we reset the view so the editor starts from a predictable state: the flow is centered and the canvas scale is reset. That’s why we explicitly call:

• canvas.resetScaleAndCenter(false) — the false is used to apply it without animation.

So if your goal is to preserve and restore the exact scale / position from the exported transform, you simply should not call resetScaleAndCenter(...) (and rely on your databinding via [scale] / [position] instead).

About fLoaded

fLoaded is emitted when the flow is initialized. It also gets emitted again after a re-init cycle, but that requires call reset() method inside flow component

[lurondev]

re: fLoaded

Are you sure it is being called again after a call to reset()?
In my component I have the fLoaded="onEditorLoaded() listener and I added a console.log to check when it is being called.
I see the first call when the component loads. Afterwards, even when calling fFlowComponent.reset() explicitly (via a button click for testing) I don't see further calls to fLoaded

re: position/scale

I was able to get it working. Thank you. I previously had them as separate signals outside of the viewModel(). When I added them as part of the viewModel() similarly to the linked example the graph restores exactly as expected.

[siarheihuzarevich]

Hi!

Thanks for the follow-up - and I’m glad to hear the position/scale restore works now.

About fLoaded and why it doesn’t fire right after reset()

fLoaded in Flow is not a “component lifecycle” event that fires immediately on reset().
It’s a “first full redraw after data becomes available” event.

If you look at the implementation you pasted:
• The flow subscribes to data changes via ListenDataChangesRequest().
• On every data change it runs RedrawConnectionsRequest(), and then calls _emitLoaded().
• _emitLoaded() emits only once because of the _isLoaded flag.
• reset() only does this:

public reset(): void {
  this._isLoaded = false;
}

So calling reset() alone does not trigger any redraw or data-change notification, therefore ListenDataChangesRequest() doesn’t emit anything, and fLoaded won’t be called.

When will fLoaded fire again after reset()?

It will fire on the next data change (anything that causes ListenDataChangesRequest() to emit), for example:
• adding/removing nodes or connections,
• any operation that triggers internal storage “data changed” signal,
• or explicitly forcing a redraw via: flow.redraw();

Hope this clarifies how it works internally.

And if you like what we’re building, please consider giving us a ⭐ on GitHub — it really supports the project!