diff --git a/.changes/mousewheel-zoom.md b/.changes/mousewheel-zoom.md new file mode 100644 index 000000000000..f96c8767ebd7 --- /dev/null +++ b/.changes/mousewheel-zoom.md @@ -0,0 +1,5 @@ +--- +"tauri": patch:feat +--- + +Change webview zoom on mousewheel when the `zoom_hotkeys_enabled` configuration is set to `true`. diff --git a/crates/tauri/src/webview/mod.rs b/crates/tauri/src/webview/mod.rs index 0a9bb08f2b72..183142c04aa0 100644 --- a/crates/tauri/src/webview/mod.rs +++ b/crates/tauri/src/webview/mod.rs @@ -778,13 +778,13 @@ fn main() { self } - /// Whether page zooming by hotkeys is enabled + /// Whether page zooming by hotkeys and mousewheel should be enabled or not. /// /// ## Platform-specific: /// /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting. - /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`, - /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission + /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `Ctrl/Cmd + [- = +]` hotkeys or mousewheel events, + /// 20% in each step, ranging from 20% to 1000%. Requires `core:webview:allow-set-webview-zoom` permission /// /// - **Android / iOS**: Unsupported. #[must_use] diff --git a/crates/tauri/src/webview/scripts/zoom-hotkey.js b/crates/tauri/src/webview/scripts/zoom-hotkey.js index cabd53f48521..bc2622440993 100644 --- a/crates/tauri/src/webview/scripts/zoom-hotkey.js +++ b/crates/tauri/src/webview/scripts/zoom-hotkey.js @@ -26,3 +26,18 @@ window.addEventListener('keydown', (event) => { }) } }) + +window.addEventListener('mousewheel', (event) => { + if (event.ctrlKey) { + event.preventDefault() + if (event.deltaY < 0) { + zoomLevel += 0.2 + } else { + zoomLevel -= 0.2 + } + zoomLevel = Math.min(Math.max(zoomLevel, MIN_ZOOM_LEVEL), MAX_ZOOM_LEVEL) + window.__TAURI_INTERNALS__.invoke('plugin:webview|set_webview_zoom', { + value: zoomLevel + }) + } +}) diff --git a/crates/tauri/src/webview/webview_window.rs b/crates/tauri/src/webview/webview_window.rs index cbe5ec3bafc7..ea675b50fd05 100644 --- a/crates/tauri/src/webview/webview_window.rs +++ b/crates/tauri/src/webview/webview_window.rs @@ -890,13 +890,13 @@ impl> WebviewWindowBuilder<'_, R, M> { self } - /// Whether page zooming by hotkeys is enabled + /// Whether page zooming by hotkeys and mousewheel should be enabled or not. /// /// ## Platform-specific: /// /// - **Windows**: Controls WebView2's [`IsZoomControlEnabled`](https://learn.microsoft.com/en-us/microsoft-edge/webview2/reference/winrt/microsoft_web_webview2_core/corewebview2settings?view=webview2-winrt-1.0.2420.47#iszoomcontrolenabled) setting. - /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `ctrl/command` + `-/=`, - /// 20% in each step, ranging from 20% to 1000%. Requires `webview:allow-set-webview-zoom` permission + /// - **MacOS / Linux**: Injects a polyfill that zooms in and out with `Ctrl/Cmd + [- = +]` hotkeys or mousewheel events, + /// 20% in each step, ranging from 20% to 1000%. Requires `core:webview:allow-set-webview-zoom` permission /// /// - **Android / iOS**: Unsupported. #[must_use]