gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 01:09:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Zoom Issue (Bug #14)

Browse Source
This commit is contained in:
Youwes09
2026-03-29 12:40:28 -05:00
parent e850cbac1e
commit 32d2fffdc5
7 changed files with 304 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.svelte
+30 -7
View File
@@ -74,13 +74,23 @@
let notConfigured = $state(false);
let idle = $state(false);
let devSplash = $state(false);
let platformScale = $state(1);
// The OS/monitor DPI scale factor for the current display.
// Queried from Rust (window.scale_factor()) on mount and updated live
// whenever the window moves to a different monitor via the scaleChanged event.
// 1.0 = standard display, 2.0 = HiDPI/4K, 1.25–1.5 = Windows scaled display.
let platformScale = $state(1.0);
// effectiveZoom = platformScale × uiZoom (user preference, float, default 1.0)
// Applied to document.documentElement so the entire UI scales correctly.
function applyZoom() {
const normalized = store.settings.uiScale * platformScale;
document.documentElement.style.zoom = `${normalized}%`;
document.documentElement.style.setProperty("--ui-scale", String(normalized));
document.documentElement.style.setProperty("--visual-vh", `${window.innerHeight / (normalized / 100)}px`);
const uiZoom = store.settings.uiZoom ?? 1.5;
const effective = platformScale * uiZoom;
const pct = effective * 100;
document.documentElement.style.zoom = `${pct}%`;
document.documentElement.style.setProperty("--ui-scale", String(effective));
// visual-vh compensates for the zoom so 100vh-based calculations stay correct.
document.documentElement.style.setProperty("--visual-vh", `${window.innerHeight / effective}px`);
}
let prevQueue: DownloadQueueItem[] = [];
@@ -125,8 +135,9 @@
return () => idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
});
// Re-apply zoom whenever uiZoom setting or platformScale changes.
$effect(() => {
store.settings.uiScale; platformScale;
store.settings.uiZoom; platformScale;
applyZoom();
});
@@ -214,14 +225,25 @@
document.addEventListener("contextmenu", e => e.preventDefault());
(window as any).__mokuShowSplash = () => devSplash = true;
platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1);
// Fetch the real monitor scale factor from Rust (window.scale_factor()).
// This reflects actual DPI — 2.0 on HiDPI, 1.25 on Windows scaled displays, etc.
platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1.0);
applyZoom();
store.isFullscreen = await win.isFullscreen();
const unlistenResize = await win.onResized(async () => {
store.isFullscreen = await win.isFullscreen();
});
// Re-query the scale factor when the window moves to a different monitor.
// Tauri emits this event whenever the DPI changes (e.g. dragging window
// from a 1080p display to a 4K display).
const unlistenScale = await win.onScaleChanged(async (event) => {
platformScale = event.payload.scaleFactor;
applyZoom();
});
if (store.settings.autoStartServer) {
invoke<void>("spawn_server", { binary: store.settings.serverBinary }).catch((err: any) => {
if (err?.kind === "NotConfigured") {
@@ -240,6 +262,7 @@
return () => {
cancelProbe = true;
unlistenResize();
unlistenScale();
if (store.settings.autoStartServer) invoke("kill_server").catch(() => {});
if (idleTimer) clearTimeout(idleTimer);
if (pollInterval) clearInterval(pollInterval);