Positioning starting node in the middle of canvas

[doritones]

Hello all!
I’m working on a component where I use dagre.js to determine the nodes positions. In this component there is a starting node and it is possible to connect several others, making them tall and wide. When reloading the component I’m having a hard time positioning the f-canvas to display the starting node in the middle of it with scale 1:1. Is there a way to achieve it, considering each instance of this component can have different dimensions?
Thanks in advance!

[siarheihuzarevich]

Hello!

To position the starting node at the center of the f-canvas with a scale of 1:1, you need to calculate the dimensions of your f-flow component window and the size of your node. Knowing these dimensions, you can compute the position so that the node is centered relative to the window. Then, set a new position for the f-canvas component based on these calculations. Since the sizes may vary in each instance of the component, this calculation needs to be performed dynamically.

Hope this helps!

[siarheihuzarevich]

@doritones if you have any trouble with this, i can help you write this code, but not until next week.

[doritones]

@siarheihuzarevich Thanks for your answer! I'm going to try this approach next week as well and let you know if I have any problem.

[siarheihuzarevich]

@doritones
I added a method to the CanvasComponent called centerGroupOrNode. You can read more on this page FCanvasComponent Documentation.
If you need to set the correct position before the first render, here is the code on how to calculate the required position of the canvas:

canvasPosition = PointExtensions.initialize(
  (flow.width - node.width) / 2 - nodePosition.x * canvasScale,
  (flow.height - node.height) / 2 - nodePosition.y * canvasScale
);

[doritones]

@siarheihuzarevich
I could only try today the code snippet you sent and it positions the canvas as I wanted. Thank you so much!