Auto scale the rendered canvas

[ZJvandeWeg]

Description

When my flow starts say 150 pixels down, and 300 pixels to the right, the top left part of the SVG / canvas has an open space which is slightly awkward. It would be great of the view would shift the thing down.

Epic/Story

No response

[joepavitt]

Started to dig into this, thinking it would be straight forward, little more complicated as:

Offset all x/y values at render:

• Would mean we modify the undlerying objects, which I'm not a fan of
• Difficult to maintain as so many places where we render the x/y values of a thing

Just applying a fixed SVG transform:

• Simpler to maintain
• However, we have zoom controls bound to the full window (including all tabs), which is the same level we want to apply the translate(). The translate() is dependent on each flow though, not the full collection which is where the zoom logic lives

The second option is definitely the way forward, just need to shuffle around some of the zoom logic to make pieces more easily accessible.

[Steve-Mcl]

I have this working locally - will be pushing soon

I scan the flow for min/max/x/y, compute distances, factor in the scale, then set the div scroll positions.

working very well.

i also save state so switching tabs doesnt keep losing your position.

[Steve-Mcl]

demo video in the PR: https://github.com/FlowFuse/flow-renderer/pull/29#issue-2272296060