Support pan/scroll in overview pane

[kubevious]

Support pan/scroll in overview pane

[peter-dolkens]

Pretty sure there’s libraries out there for that, as it works on google maps for example. Might need some scroll bar trickery to achieve it. Don’t forget touch screens (tablets and laptops) either - though that one just should just be a drag/drop. Peter Dolkens

…

On 17 Mar 2020, at 20:33, Ruben ***@***.***> wrote:  @peter-dolkens, thanks for suggestion. That definitely can be done, but the only problem i see is that scrolling left on the trackpad causes the browser to go back to preview page. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[peter-dolkens]

Will try this when I wake up in the morning - sounds good!

[peter-dolkens]

Works exactly as expected on my touch-enabled laptop - lovely UX 😄

Is there any interest in pinch-to-zoom? 😂

Would be nice to either highlight the "warnings" in the navigator window so you can use that to quickly pan/scroll to issues, or be able to zoom out to see a high-level overview that highlights issues too.

[rubenhak]

@peter-dolkens, thanks for suggestion. That definitely can be done, but the only problem i see is that scrolling left on the trackpad causes the browser to go back to preview page.

[rubenhak]

In google maps panning up/down does zooming, but left/right still causes browser to go back/forward in history.

Anyway, will try to find some way to improve navigation usability.

[peter-dolkens]

Ah you're right - google maps does zoom and forward/back on the trackpad.

Here's a site that does pan+scroll: https://www.photopea.com/ - just open the demo.psd, zoom in, then you can pan and scroll to your hearts desire.

[rubenhak]

@peter-dolkens, wonderful, if photopea did it, we can do that as well!

[rubenhak]

@peter-dolkens, here is what was done:

1. Panning with mouse works over the entire "Universe" area. No need to drag boxes. Can be initiated by dragging from empty area as well.
2. Can pan using regular scroll wheel by standard means. Up/down using scroll wheel, left/right using Shift-wheel.
3. Sliding trackpad within the "Universe" area. History navigation should be prevented when two fingers swiped with the area. Outside default behavior should persist.

Please try it out in the live demo and let me know how it works for you: https://demo.kubevious.io/

[rubenhak]

@peter-dolkens temporarily assigning to you to give feedback on the changes

[rubenhak]

Wonderful! Will be released along with few other improvements soon.

Sadly there is not too much real estate available to show what in the navigation window. Need to spend some more time on guiding users towards problematic areas.

No plans for pinch-to-zoom, but might go straight to VR/AR :D

[peter-dolkens]

Sadly there is not too much real estate available to show what in the navigation window. Need to spend some more time on guiding users towards problematic areas.

I was thinking something like this could help:

[rubenhak]

I was thinking something like this could help:

It would be probably best to discuss any such improvements in a separate thread. But, I'll share some thoughts here.

I'm afraid that by just blindly coloring red would cause too many things red within the diagram. Any error/warning/suggestion is propagated up within the hierarchy. That might make too many things red and user wouldn't know where to start with. I think there is a need to show the intensity within the navigator. That would be probably combination of size/color. Something like a heatmap. I also see a need for options for different vision modes. Something like in predator movie: