Zoom from a point -- should it change the canvas "position"?

[SyamGadde]

Using angular 20, foblex-flow 18.3.0.

When zooming on a canvas from a particular point, it zooms all the contents out from that point. For example I hover over a point and then use my mouse wheel to zoom in or out. This results in a change in the scale as reported by getScale(). However it does not change the position returned by getPosition(), even though the effect of the zoom is different depending on where I start the zoom from, and that seems like it should also change the "position". If I am wrong -- is there some other exposed state that encodes this effective shift?

My intention is to create a companion flow just below the main flow that contains axis markers (like dates/times) but that it should match the positioning of the nodes in the main flow and also be responsive when the user shifts or zooms the canvas. I can't include these axis markers in the main flow because wherever they are put initially, they could end up outside the viewport if the user drags them, and figuring out how to reposition them so they are visible seems like it is a lot of trouble.

Thanks!

[siarheihuzarevich]

You are not wrong. The visible viewport shift does exist when you zoom to a point.

getPosition() currently returns only the base pan value. When zooming around a cursor / pivot point, f-flow applies an additional internal offset so the content zooms relative to that point. Because of that, getPosition() alone does not represent the full visible viewport translation after zoom-to-cursor.

For the effective viewport transform, use one of these public APIs instead:

• fCanvasChange.position -
• flow.getState().position

Those values represent the composed visible viewport position, and together with scale they are the right values to use for synchronization.

So for your companion flow with date/time axis markers, I would recommend keeping it outside the main f-canvas and syncing it from fCanvasChange:

• use event.position for the effective viewport offset
• use event.scale for the zoom level

That should let the axis stay visually aligned with the main flow while remaining independently visible.

So in short:

• canvas.getPosition() = base pan
• fCanvasChange.position / flow.getState().position = effective visible viewport position

And if you enjoy using Foblex Flow, please consider giving the repository a star on GitHub. It helps the project a lot.

[SyamGadde]

Thank you that is very helpful!

Is there a way to set the state of the companion flow component so that it effectively has the same internally composed position so I can use the same x coordinates in both flows? I tried canvas.setScale() and canvas.setPosition() but though the scale seems right, the positioning of like-x-valued nodes is not correct, and probably is due to the fact that it does not know the internal offset that the other flow has.

Or alternatively (not looking forward to this possibility) can I hack it by doing canvas.resetScale() and then calculating the right point to send to canvas.setScale(scale, position)?

[SyamGadde]

I guess I should clarify -- I think I am doing what you suggested. Grab the position either from the canvas change event or from the flow state's position field. Either way, if I use those fields to set the second flow's scale and position, nodes that are labeled with x=0 in both flows start out aligned but diverge when I zoom anywhere away from the (0,0) point in the main flow area, which is similar to the behavior I was seeing when I originally used canvas.getPosition() as the position value.

More to the point, using the value from flow.getState().position (or event.position) as the input to the second flow's canvas.setPosition() does not sync both flows -- flow.getState().position ends up different for the two flows and I'm not sure how to fix that because the flow does not have a corresponding setState() or setPosition() function. Or does it?

[siarheihuzarevich]

If I understand you correctly, you want to synchronize two flows: the main flow and a companion flow with axis markers.

If that is the case, then the second flow should be controlled through the position and scale inputs, not through canvas.setPosition() and canvas.setScale().

These APIs are meant for different purposes:

• [position] and [scale] are for applying external viewport state to the canvas.
• setPosition() and setScale() are imperative canvas operations. In particular, setScale() performs a zoom operation and recalculates the internal zoom offset.

So for synchronization, the intended approach is:

<f-canvas
  [position]="syncedPosition"
  [scale]="syncedScale"
>
  <!-- companion flow / axis markers -->
</f-canvas>

And update those values from the main flow:

protected syncViewport(event: FCanvasChangeEvent): void {
  this.syncedPosition = event.position;
  this.syncedScale = event.scale;
}

There is no public setState() API for the flow, and we do not plan to add one. Foblex Flow owns rendering and interaction state; application state should stay in your app and be passed into the flow through inputs/events.

[SyamGadde]

I'm not sure why I didn't see those inputs in the documentation, but that was exactly what I needed to do to make this work Thank you!