Improve UX by simulating canvas navigation

[Splines]

Follow-up to #57.

In modern web apps like Figma, canvas navigation feels very natural, e.g. see this video:

figma.canvas.navigation.mp4

Main points I like in Figma (and other similar apps) that I miss in Paperproof:

• Zoom. Infinite zoom out / zoom in via Ctrl + Scrollwheel
• Pan. When holding the middle mouse button, the content moves in the direction where my mouse is moving (and a "grabbing hand" cursor is shown). This is inverted in Paperproof since it uses the usual browser cursor for that purpose. This behavior often tricks me up when I pan around.

It would be amazing to have this in Paperproof. This would also be a more dynamic option than to statically change the font-size just to see content bigger on-screen (as proposed here).

[Splines]

This would especially be helpful for scenarios like this where I really struggle to navigate around.

[lakesare]

This would especially be helpful for scenarios like this where I really struggle to navigate around.

Have you tried clicking on sub-boxes? On the boxes that are inside of other boxes.

[Splines]

Have you tried clicking on sub-boxes? On the boxes that are inside of other boxes.

Yeah, that's a nice feature and it does indeed make it a bit better. But still the pain points remain.

E.g. also the constant shifting around just because I click somewhere makes it hard to stay focused. IMHO, I'd like clicking around not to affect my position, that could be reserved for a double-click or something else. And then navigating on the canvas via a hand tool or the middle mouse button and Ctrl + mousewheel for zooming.

figma.canvas.jumping.around.mp4

[lakesare]

Yeah, that's a nice feature and it does indeed make it a bit better. But still the pain points remain.

I agree it doesn't solve it all, just making sure it's a discoverable feature. I think it's probably the best way to zoom in in current Paperproof.
I agree that the pain points still remain, and I like the figma example.

E.g. also the constant shifting around just because I click somewhere makes it hard to stay focused.

Agreed.

[lakesare]

Pan. When holding the middle mouse button, the content moves in the direction where my mouse is moving (and a "grabbing hand" cursor is shown). This is inverted in Paperproof since it uses the usual browser cursor for that purpose. This behavior often tricks me up when I pan around.

Interesting, didn't consider mouse use (I use a touchpad). Looks like there is no simple html/css property to make the inversion happen.

Have you tried pressing up/down/left/right arrows to navigate around the canvas?

[lakesare]

I think the real problem with Paperproof's navigation is the fact that the size of the page is really large (and changing as zooming changes!), and it thwarts our expectation to how much scrolling is needed. The user always has to be careful not to scroll too much.

When I simply export this webview to html https://filebin.net/tmbfonqwltfo2jg7 [link doesn't work anymore], it's easy to navigate around the proof.