Fix: scaling window size difference

This commit is contained in:
DaZuo0122
2026-02-14 20:07:03 +08:00
parent f50243ab96
commit eddf4b9481
5 changed files with 132 additions and 20 deletions

View File

@@ -31,6 +31,8 @@ const SIZE_EPSILON = 0.5;
const SCALE_EPSILON = 0.0001;
const SCALE_MIN = 0.5;
const SCALE_MAX = 3.0;
const LOGICAL_BASE_FRAME_WIDTH = 512;
const LOGICAL_BASE_FRAME_HEIGHT = 512;
async function invokeSetSpritePack(packIdOrPath: string): Promise<UiSnapshot> {
return invoke<UiSnapshot>("set_sprite_pack", { packIdOrPath });
@@ -49,29 +51,31 @@ async function invokeSetAlwaysOnTop(alwaysOnTop: boolean): Promise<UiSnapshot> {
}
function fittedWindowSize(
frameWidth: number,
frameHeight: number,
scale: number
): { width: number; height: number } {
const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
const width = Math.round(Math.max(frameWidth * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE));
const height = Math.round(Math.max(frameHeight * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE));
const width = Math.round(
Math.max(LOGICAL_BASE_FRAME_WIDTH * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE)
);
const height = Math.round(
Math.max(LOGICAL_BASE_FRAME_HEIGHT * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE)
);
return { width, height };
}
function effectiveScaleForWindowSize(pack: UiSpritePack, width: number, height: number): number {
function effectiveScaleForWindowSize(width: number, height: number): number {
const availableWidth = Math.max(width - WINDOW_PADDING, MIN_WINDOW_SIZE);
const availableHeight = Math.max(height - WINDOW_PADDING, MIN_WINDOW_SIZE);
const scaleByWidth = availableWidth / Math.max(pack.frame_width, 1);
const scaleByHeight = availableHeight / Math.max(pack.frame_height, 1);
const scaleByWidth = availableWidth / LOGICAL_BASE_FRAME_WIDTH;
const scaleByHeight = availableHeight / LOGICAL_BASE_FRAME_HEIGHT;
const scale = Math.min(scaleByWidth, scaleByHeight);
return Math.max(SCALE_MIN, Math.min(scale, SCALE_MAX));
}
async function fitWindowForScale(pack: UiSpritePack, scale: number): Promise<number> {
async function fitWindowForScale(scale: number): Promise<number> {
const window = getCurrentWindow();
const [outerPosition, innerSize] = await Promise.all([window.outerPosition(), window.innerSize()]);
const target = fittedWindowSize(pack.frame_width, pack.frame_height, scale);
const target = fittedWindowSize(scale);
const centerX = outerPosition.x + innerSize.width / 2;
const centerY = outerPosition.y + innerSize.height / 2;
let targetWidth = target.width;
@@ -126,7 +130,7 @@ async function fitWindowForScale(pack: UiSpritePack, scale: number): Promise<num
await window.setPosition(new PhysicalPosition(Math.round(targetX), Math.round(targetY)));
}
return effectiveScaleForWindowSize(pack, targetWidth, targetHeight);
return effectiveScaleForWindowSize(targetWidth, targetHeight);
}
function MainOverlayWindow(): JSX.Element {
@@ -161,9 +165,9 @@ function MainOverlayWindow(): JSX.Element {
return true;
};
const tryFitWindow = async (pack: UiSpritePack, scale: number): Promise<number | null> => {
const tryFitWindow = async (scale: number): Promise<number | null> => {
try {
return await fitWindowForScale(pack, scale);
return await fitWindowForScale(scale);
} catch (err) {
if (mountedRef.current) {
setError(String(err));
@@ -212,13 +216,13 @@ function MainOverlayWindow(): JSX.Element {
loadingPackRef.current = true;
let reloaded = false;
try {
const pack = await invoke<UiSpritePack>("load_active_sprite_pack");
reloaded = await recreateRenderer(pack, value);
if (reloaded) {
const effectiveScale = await tryFitWindow(pack, value.scale);
if (effectiveScale !== null) {
await syncEffectiveScale(value.scale, effectiveScale);
}
const pack = await invoke<UiSpritePack>("load_active_sprite_pack");
reloaded = await recreateRenderer(pack, value);
if (reloaded) {
const effectiveScale = await tryFitWindow(value.scale);
if (effectiveScale !== null) {
await syncEffectiveScale(value.scale, effectiveScale);
}
if (mountedRef.current && effectiveScale !== null) {
setError(null);
}
@@ -236,7 +240,7 @@ function MainOverlayWindow(): JSX.Element {
if (activePackRef.current === null) {
return;
}
const effectiveScale = await tryFitWindow(activePackRef.current, value.scale);
const effectiveScale = await tryFitWindow(value.scale);
if (effectiveScale !== null) {
await syncEffectiveScale(value.scale, effectiveScale);
}

View File

@@ -2,13 +2,23 @@
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: transparent;
color: #e2e8f0;
overflow: hidden;
}
#root {
width: 100%;
height: 100%;
background: transparent;
}
.app {
width: 100vw;
height: 100vh;