Positioning

[yll0rd-irembo]

Hello @siarheihuzarevich & co, I will like to say thank you for this masterpiece gem you all building. It is an amazing library.
Please, I have got 2 questions I am quite confused.

1. What is the difference between node.position and this._fFlow.getPositionInFlow(node.position)? I see that the values they return are different but I don't understand why?

2. Can i get help on how I centralize the nodes horizontally, not matter the vertical position, y of the nodes? (The video visually shows what I mean). I skimmed through the documentation and codebase, but could only find how to center the canvas, which is not what I want.
   Screencast from 2025-09-05 13-19-55.webm

This is the current state of my workflow and you will notice that it does not move to the left when the right sidebar is opened.
Screencast from 2025-09-05 13-26-31.webm

[siarheihuzarevich]

Hello, and thank you for the kind words 🙏 Really glad to hear you find the library useful!
1. Difference between node.position and getPositionInFlow(...)
• node.position represents the coordinates of the node inside the flow (its logical canvas position).
• getPositionInFlow(...) is meant for translating external event coordinates (e.g. a mouse click from the screen) into flow coordinates. If you pass a node’s position into it, you’ll naturally see a difference because that method isn’t intended for converting internal positions back.
2. Centering nodes horizontally
The library doesn’t provide a built-in method for aligning nodes only on the X or Y axis. It only has centerCanvas, which recenters the whole viewport. If you want horizontal (or vertical) alignment, you’ll need to implement that yourself — for example, by calculating the center X of the canvas and assigning it to all nodes.
3. Shifting when opening a sidebar
If you’d like the workflow to move left/right when a sidebar opens, you can simply adjust the canvas position by the same offset as the sidebar width, and revert it when the sidebar closes. That way the flow remains visually centered in your layout.

⸻

If the library has been helpful to you, giving it a ⭐ on GitHub would be greatly appreciated! ✨

[yll0rd-irembo]

Hello @siarheihuzarevich
Thank you so much for this answer. I have a better understanding of the positioning concept in this library.

As for the centering horizontally, I looked into the library implementation of the resetScaleAndCenter() and with that, I could implemeent centering only horizontally.

  centerEverythingHorizontally(): void {
    if (!this.container || !this.fFlow || !this.fCanvas) return;

    // Get the width of the container element
    const containerWidth = this.container.clientWidth;

    // Get the current position of the canvas
    const fCanvasPosition = this.fCanvas.getPosition();

    // Get the bounding box that contains all nodes
    const fNodesRect = this.fFlow.getNodesBoundingBox();

    // Exit if there are no nodes or if the bounding box has zero dimensions
    if (!fNodesRect || (fNodesRect.width === 0 || fNodesRect.height === 0)) return;

    const points = this.nodesSubject.value.map(node => node.position);

    // Find the leftmost x-coordinate among all nodes, or default to 0
    const xPoint = points.length ? Math.min(...points.map((point) => point.x)) : 0

    // Calculate the new x position to center all nodes horizontally
    // (containerWidth - fNodesRect.width) / 2 finds the starting point for centered content
    // Subtracting xPoint adjusts for the actual position of the leftmost node
    const newX = (containerWidth - fNodesRect.width / this.fCanvas.getScale()) / 2 - xPoint;

    // Update the canvas position, preserving the y-coordinate
    this.fCanvas.setPosition({ x: newX, y: fCanvasPosition.y });

    // Redraw the canvas with animation for smooth transition
    this.fCanvas.redrawWithAnimation();
  }