search

sacode387 / FlowRun

Runnable flowcharts for the web
https://flowrun.io/
Apache License 2.0
46 stars 9 forks source link

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

Open fpesari opened 3 weeks ago

fpesari commented 3 weeks ago

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 :bow:

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:

image

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 commented 3 weeks ago

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 commented 2 weeks ago

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):

zoom_out_map_24dp_5F6368_FILL0_wght400_GRAD0_opsz24

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 commented 2 weeks ago

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.