Zooming in/out and scrolling down is awkward

[tim-fiola]

Environment

• Python version: demo.nautobot.com as of 8/8/23
• Nautobot version: demo.nautobot.com (1.5.23)
• nautobot-floor-plan version: 1.0

For smaller floor plans, it is awkward/non-intuitive to scroll down to view the lower part of the floor plan on the screen

Expected Behavior

I understand the getting the UI right is tough for this type of thing. In general, if my cursor is on the floor plan drawing itself, I expect to zoom in/out if I scroll up/down on the mouse. If my mouse is anywhere else on the page that is not the floor plan rendering, I expect to use the mouse scroll to scroll up or down on the page.

• When I am at minimum zoom, I expect to be able to use the mouse's scroll down capability to scroll down to the bottom of the floor plan drawing

• When I want to scroll up with the mouse and the floor plan is showing on the page, I expect to be able to scroll up to the top of the page if the mouse itself is not on the floor plan diagram

• When I want to zoom in or out on the floor plan diagram, I expect to be able to place my mouse on the diagram and scroll up/down to zoom in/out; otherwise, the page will scroll up or down when I use the mouse scroll.

Observed Behavior

When I attempt to scroll down with the mouse, the page scrolls down until the floor plan becomes about half visible, then the scroll-down function turns into a zoom out function and since I am already at the lowest zoom, the downward scrolling just stops. In order to scroll down to view the lower half of the floor plan, I have to move the mouse to the scroll bar on the right hand side and use the scroll bar

When I attempt to scroll to the top of the page or the floor plan drawing via scrolling up with the mouse, it zooms in on the floor plan diagram, even if my mouse is not on the floor plan drawing itself (the mouse is somewhere on the page that is not allocated to the drawing)

Steps to Reproduce

1. Go to demo.nautobot.com floor plan https://demo.nautobot.com/plugins/floor-plan/floor-plans/a593b70e-391b-4036-873a-3704a42a0457/?tab=main
2. Try to scroll to view the lower half of the floor plan diagram using the mouse (it will go to minimum zoom on the floor plan and then the downward mouse scrolls will have no effect)
3. Then try to scroll to the top of the page using the mouse (it will zoom in on the floor plan)
4. Steps 2 and 3 currently require me to move the mouse to the page's scroll bar

[joewesch]

I agree that the UX is not great for this page. My first thought was that it would be great if we could enable something similar to how some maps function when they are part of a webpage where it requires Ctrl or Cmd + scroll to actually zoom inside of the frame.

[windmite]

Ctrl and Cmd tend to have OS functions (at least on my OS). Most examples I've found using the shift key works well. Still waiting to get some feedback on my first PR for this repo before I send in another one but here's the one line fix for anyone in need: nautobot_floor_plan/templates/nautobot_floor_plan/inc/floorplan_svg.html
insert at line 67 if (!e.shiftKey) return

[joewesch]

I like it!

[joewesch]

Completed and released in v2.2.0