search

tauri-apps / tauri

Build smaller, faster, and more secure desktop applications with a web frontend.
https://tauri.app
Apache License 2.0
78.54k stars 2.33k forks source link

[feat] zoom in and out functionality (ctrl/ctrl+shift + "=" and ctrl/ctrl+shift+ "-") #3310

Closed Geometryse closed 1 month ago

Geometryse commented 2 years ago

Describe the problem

Browsers such as edge and chrome have a zoom in and out functionality with hotkeys mentioned in the title, and I would like to include that in my application with tauri, but the hotkeys aren't working for me.

Describe the solution you'd like

add the hotkey support

Alternatives considered

No response

Additional context

No response

FabianLars commented 2 years ago

tracking issue at https://github.com/tauri-apps/wry/issues/388

martpie commented 2 years ago

It would seem the upstream has been fixed, I guess now it's just about extending the MenuItem enum and implementing what has been done on wry right?

I may help with that if this is begginer-friendly enough

keiya01 commented 2 years ago

I think this issue is related to https://github.com/tauri-apps/wry/issues/569 . And it is work in progress in https://github.com/tauri-apps/wry/pull/574 .

candrewlee14 commented 1 year ago

Looks like the upstream issues this depends on have been resolved. What can I do to enable this?

amrbashir commented 1 year ago

even though it landed in upstream, tauri still needs to expose it.

rajatkulkarni95 commented 1 year ago

Bumping this up. Any idea when we'd get this into the framework?

Looky1173 commented 1 year ago

Bumping this up again! This would be a welcome addition to Tauri, mainly for accessibility concerns.

salmenf commented 1 year ago

Is there any workaround? I hope this gets added soon, would be great to have for accessibility.

mxismean commented 1 year ago
image

Can tauri add a new zoom configuration item in the tauri.conf.json configuration file. @FabianLars

This allows users to set the default zoom of the window

mxismean commented 1 year ago

A year has passed. I want to know how the progress of this bug is? When can TAURI support Zoom? @FabianLars

abose commented 7 months ago

In the meantime, there is a pure js based way to get Zoom working in Tauri. using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds. So there is a pure browser-based way to do this for now as its support in both Chromium (Tauri windows) and web-kit(Tauri mac/linux) (But not Firefox.)

So one could listen to the shortcut and do this Zoom JS thingy to make Zoom work in most cases. There are some caveats to this approach as iframes are not affected by Zoom and other things some edge cases wont work as expeced in some cases.

phudtran commented 7 months ago

Also looking forward to this for accessibility.

zeenix commented 6 months ago

In the meantime, there is a pure js based way to get Zoom working in Tauri. using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds.

But how can a user of an app do that?

StenniHub commented 6 months ago

In the meantime, there is a pure js based way to get Zoom working in Tauri. using document.body.style.zoom = 1.5 from JS worked flawlessly in Windows, mac, and Linux Taui 1.5 builds. So there is a pure browser-based way to do this for now as its support in both Chromium (Tauri windows) and web-kit(Tauri mac/linux) (But not Firefox.)

So one could listen to the shortcut and do this Zoom JS thingy to make Zoom work in most cases. There are some caveats to this approach as iframes are not affected by Zoom and other things some edge cases wont work as expeced in some cases.

This is not equivalent to zoom in browsers or in electron. For example some elements that would extend to window borders at 1.0 zoom level will cut off early if you reduce it through document.body.style.zoom.

abose commented 5 months ago

Hi all, managed to fix this by calling the webviews scale API from rust. See This pull request for the code changes needed(it's not much) https://github.com/phcode-dev/phoenix-desktop/pull/162 .

After this , call the js zoom_window API.

     await __TAURI__.tauri.invoke("zoom_window", {scaleFactor:1.2});

Tested working in Windows, Linux, and mac.

KaKi87 commented 5 months ago

How about reading the value, though ? Because when the user presses Ctrl++/-, we need to increment/decrement the value, requiring knowing it beforehand. Thanks

abose commented 5 months ago

How about reading the value, though ? Because when the user presses Ctrl++/-, we need to increment/decrement the value, requiring knowing it beforehand. Thanks

We use our own storage layer for persisting preferences as browser local storage is not reliable in tauri. You can test with local storage though where you start with 1 in a zoom jey stored in storage and increment zoom by .1 on ctrl+ keyboard shortcut and decrement on.keyboard minus. So we don't really have to read back the scaling factor back from rust layer, instead use localstorage at browser side.

KaKi87 commented 5 months ago

That's unreliable as well, because there's no way to ensure that zoom isn't changeable by any other means.

abose commented 5 months ago

That is probably how chrome/browser internally handles the zoom scale storage too, someone has to store the zoom scale factor to restore it later. If not the webkit layer, then we do it at the application side. It is pretty reliable as long as your storage layer is reliable.

KaKi87 commented 5 months ago

In Chrome, zoom can be changed in many ways : command line arguments, hamburger menu, Ctrl+wheel, Ctrl+keyboard... So, it's stored somewhere all these inputs can be tracked. So, in Tauri, storing this in the app would be unreliable as zoom will eventually be changeable from all these places as well.

namduong-arbin commented 2 months ago

Hi all, managed to fix this by calling the webviews scale API from rust. See This pull request for the code changes needed(it's not much) phcode-dev/phoenix-desktop#162 .

After this , call the js zoom_window API.

     await __TAURI__.tauri.invoke("zoom_window", {scaleFactor:1.2});

Tested working in Windows, Linux, and mac.

it worked for me. Thank a lot

KaKi87 commented 1 month ago

Windows Only

Uh, why ?

Legend-Master commented 1 month ago

This API is only available in Windows webview2, but we can provide a polyfill as mentioned here https://github.com/tauri-apps/tauri/pull/9352#issuecomment-2034985866