Feature request - Built-in utility to center the canvas around a node

[Vadorequest]

From https://github.com/reaviz/reaflow/discussions/62#discussioncomment-362601

I'd like to center the canvas on a specific node (not necessarily zoom in/out, but re-center the viewport around the target)

Is there an utility for this? Are there examples for this?

Maybe it'd be built-in and provided through the canvasRef?

Use case: Auto-center on a node, when node is created.

Motivations:

• When the layout changes (because ELK changes where nodes are displayed), it'd be less confusing because it'd center the canvas around the newly created node (currently, it's confusing because the node is sometimes moved elsewhere after being created)
• Ease the creation of multiple nodes (in series), because the screen would follow automatically instead of having the user move the canvas around, most efficient on smaller screens.
• Might help when using autofocus because the created node would always be visible (might avoid the canvas to jump to the starting area) - See https://github.com/reaviz/reaflow/issues/61

[Vadorequest]

@amcdnl Is it possible to expose the setScrollXY in canvasRef? That would be more flexible for us to move the x/y around based on our own business logic, and essentially make this feature possible on our side even if it's not built-in as an utility.

In any case, I think it should be exposed.

[Vadorequest]

Also, I think it would be good to provide expose some of the properties in canvasRef as react context, to avoid props drilling.

This wouldn't be harmful if done only with props that don't change, such as functions. (e.g: setScrollXY, fitCanvas, centerCanvas)

That way, we might call the setScrollXY from any nested component without using props drilling.

I could implement such behavior (context provider) in my app, but I believe it makes more sense to have it built-in. What's your opinion?

[im-amir]

@amcdnl @Vadorequest Is there any update on that, please? Is there any way we can use setXY and setScrollXY for setting the focus on a specific node?

That would be very helpful, as a lot of features depend on this functionality, such as, opening a link to a specific node, searching a node in the canvas, etc.