Zoomable preview with mouse/scroll wheel/keyboard shortcut

[woerndl]

Motivation

When editing details of a document, it is sometimes necessary to see the document up close. I'm talking about VS Code Preview in this case, but I imagine this would is valid for all instances.

Description

In environments with a trackpad, you can pinch zoom the preview. I haven't found a way to scroll-zoom the preview or use a keyboard shortcut.

Examples/Questions

• There could be either zoom level buttons similar to the Typst web app or
• Additionally double clicking the preview could zoom in or
• CMD + Scroll zooms in/out
• Being able to set the zoom level (back) to 50/75/100/125/150/200 would be beneficial, no matter the exact implementation

[Enter-tainer]

currently the keyboard shortcut should be ctrl+wheel

[woerndl]

Ahh, CTRL + OPTION + ZOOM worked for me on macOS (CTRL + ZOOM triggers OS level zoom, if the feature is activated). But I think this is still relevant as it seems currently not possible to move/drag the preview in the zoomed view on the x-axis (y-axis works) to see the section you want. So maybe the zoom/move options are something that could be improved a bit in the future.

[Eric-Song-Nop]

or two finger zoom in/out with touchpad

[Enter-tainer]

it seems currently not possible to move/drag the preview in the zoomed view on the x-axis (y-axis works) to see the section you want.

i'm aware of this. it's a weird bug

[Eric-Song-Nop]

the should be a scrollbar for x axis, isn't it?

[Enter-tainer]

the should be a scrollbar for x axis, isn't it?

the scroll bar in x axis should work, but drag'n'drop doesnt work in x axis

[woerndl]

or two finger zoom in/out with touchpad

Yes, as initially stated, but I personally don't have a trackpad available in all my working environments. And the currently somewhat cumbersome movement in the preview remains there too. Anyway, it is just my experience with it as it is now.

A classic way to move would be SPACE + Click + Mouse Movement to drag the view "around". This is something many environments provide and thus many users know. I mean: If the dragging would currently work, this would already be present. I'm just saying maybe the zoom options are a minor usability feature that would add some value.

the scroll bar in x axis should work, but drag'n'drop doesnt work in x axis

SHIFT + Scrollwheel works. Dragging doesn't here, macOS 15.0.1/VS Code 1.95.2 (Universal).

[SylvanFranklin]

Hello has there been any progress on this? I'm still having the same behavior on the latest version. I agree with @woerndl that keyboard shortcuts would be ideal. I can work it with the zoom and trackpad commands, but not all of my computers have trackpads, and it's kinda weird that command + does not work like other websites. Thanks.

[Myriad-Dreamin]

There is a lot of topics to progress, and my brain is busy working on completion and docstring support. I hope @Enter-tainer could take some time to check them. Though, I know his brain is busy working on typst's code formatting.

[SylvanFranklin]

@Myriad-Dreamin I can try to take a look at this. I saw the request for more maintainers, and I would love to help you guys out either officially or just on one off issues as I have time. I have a lot of expertise with neovim and some with web programming. I'll see if I can make progress here or at least better my understanding of the project.

[Enter-tainer]

Hi, thank you for your update. Let me clarify current expected status:

There could be either zoom level buttons similar to the Typst web app or

Currently no button is implemented.

Additionally double clicking the preview could zoom in or

It's not implemented at this moment

CMD + Scroll zooms in/out

It should work. For machines with trackpad, it is ctrl+trackpad or trackpad gestures(pinch to zoom). For machines with mouse, it is ctrl+scroll wheel.

Being able to set the zoom level (back) to 50/75/100/125/150/200 would be beneficial, no matter the exact implementation

I cannot remember exactly but I think currently we already do that at least for mouse users. We just don't expose the percentage to users.

I can work it with the zoom and trackpad commands, but not all of my computers have trackpads, and it's kinda weird that command + does not work like other websites. Thanks.

Ctrl++ is a tricky thing. If you use it in vscode, i guess it would be handled by vscode itself? Then all ui elements becomes bigger. I'm not sure it it can be overridden or not.

[Enter-tainer]

Another tricky thing is that the key mapping in mac and windows/linux. I use mac in work and windows/linux on my own computer. But I never really get how ctrl and super maps to cmd key.

Currently, on macos machines:

• control + wheel/trackpad: works
• trackpad pinch to zoom: works
• control + +: no effect
• command + +: whole vscode becomes larger

additionly, in browser(chrome):

• command + + does scale the page, but things don't really get larger

[Enter-tainer]

I don't have a windows machine at this time but I guess the result is similar, except for:

• win + +: no effect or other system level hot key
• control + +: ui elements in vscode become larger

[SylvanFranklin]

Right, I can see how this issues is more difficult than it appears on the surface bc of all the different platforms and environments that the preview can be in. Is this potentially something that we could put in the configuration file? Have some kind of default per OS that can be overridden if desired? Before even considering that we have to nail down exactly what the desired behavior is i.e which keys on which platforms etc.

[SylvanFranklin]

To me the most important one to nail nail down is command + + and control + + on windows / linux. It's just a little jarring to see the zoom level go up and have a slight shift in the document without real zoom. VScode does seem to be kind of a barrier though.