Add Zoom in/out (or "Reset zoom") buttons for devices without gestures (desktop PCs)

[fpesari]

Hello,

first, thank you for this great web app and for releasing it under a truly FLOSS license, I am already using it in my classroom 🙇

I haven't made a local build of Flowrun yet and I am using it via flowrun.io/scratchpad and one thing I noticed using it on a PC with a mouse is that it's very hard to use due to the lack of zoom controls. If you accidentally double-click somewhere, the plot will be zoomed in and I haven't find a way to zoom out yet. Situations like these:

Or even worse (a blank space is zoomed in) are very hard to escape, especially for students who often are already unfamiliar with mouses because they are so used to touch controls.

I think Zoom in/out buttons, as well as a zoom percentage indicator, should be an easy solution to this issue.

Thank you for listening, have a nice day.

[fpesari]

I noticed that #20 does implement zoom and pan, is my problem the browser I am using (Mozilla Firefox), is flowrun.io/scratchpad not up-to-date or are those functions only available to touchscreen/trackpad users?

[fpesari]

Hello, I made some experiments and I think that, given that the mouse wheel does zoom out, the quickest solution would be to implement a "Reset zoom" button. There is already a Material icon which can be used for it (zoom_out_map):

Now, I am not too familiar with the codebase and I am not sure which is the cleanest way to implement this in Flowrun but I know it uses d3 and many people have implemented this "Reset zoom" behavior online, such as in this example:

https://observablehq.com/@d3/programmatic-zoom

I think that between this addition and the mouse wheel, most students would be able to find their way.

[fpesari]

I add that if the proposed "Reset zoom" button became "zoom out and center", the lack of scrollbars (#22) would be less impacting because that button would become a quick way to see the whole flowchart, a kind of emergency button to get out of any kind of bad visualization.