Fix: tauri window scaling bug

frontend/tauri-ui/src/main.tsx

@@ -2,19 +2,60 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
-import { getCurrentWindow } from "@tauri-apps/api/window";
+import { LogicalPosition, LogicalSize, getCurrentWindow } from "@tauri-apps/api/window";
 import { PixiPetRenderer, type UiSpritePack, type UiSnapshot } from "./renderer/pixi_pet";
 import "./styles.css";
 
+const WINDOW_PADDING = 16;
+const MIN_WINDOW_SIZE = 64;
+const SIZE_EPSILON = 0.5;
+const SCALE_EPSILON = 0.0001;
+
+function fittedWindowSize(
+  frameWidth: number,
+  frameHeight: number,
+  scale: number
+): { width: number; height: number } {
+  const safeScale = Number.isFinite(scale) && scale > 0 ? scale : 1;
+  const width = Math.max(frameWidth * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE);
+  const height = Math.max(frameHeight * safeScale + WINDOW_PADDING, MIN_WINDOW_SIZE);
+  return { width, height };
+}
+
+async function fitWindowForScale(pack: UiSpritePack, scale: number): Promise<void> {
+  const window = getCurrentWindow();
+  const [outerPosition, innerSize] = await Promise.all([
+    window.outerPosition(),
+    window.innerSize()
+  ]);
+
+  const target = fittedWindowSize(pack.frame_width, pack.frame_height, scale);
+  const widthChanged = Math.abs(target.width - innerSize.width) > SIZE_EPSILON;
+  const heightChanged = Math.abs(target.height - innerSize.height) > SIZE_EPSILON;
+  if (!widthChanged && !heightChanged) {
+    return;
+  }
+
+  const deltaWidth = target.width - innerSize.width;
+  const deltaHeight = target.height - innerSize.height;
+  const targetX = outerPosition.x - deltaWidth / 2;
+  const targetY = outerPosition.y - deltaHeight;
+
+  await window.setSize(new LogicalSize(target.width, target.height));
+  await window.setPosition(new LogicalPosition(targetX, targetY));
+}
+
 function App(): JSX.Element {
   const [snapshot, setSnapshot] = React.useState<UiSnapshot | null>(null);
   const [error, setError] = React.useState<string | null>(null);
   const hostRef = React.useRef<HTMLDivElement | null>(null);
   const rendererRef = React.useRef<PixiPetRenderer | null>(null);
+  const scaleFitRef = React.useRef<number | null>(null);
 
   React.useEffect(() => {
     let unlisten: null | (() => void) = null;
     let mounted = true;
+    let activePack: UiSpritePack | null = null;
     Promise.all([
       invoke<UiSpritePack>("load_active_sprite_pack"),
       invoke<UiSnapshot>("current_state")
@@ -23,6 +64,7 @@ function App(): JSX.Element {
         if (!mounted) {
           return;
         }
+        activePack = pack;
         setSnapshot(initialSnapshot);
         if (hostRef.current !== null) {
           rendererRef.current = await PixiPetRenderer.create(
@@ -31,6 +73,9 @@ function App(): JSX.Element {
             initialSnapshot
           );
         }
+        scaleFitRef.current = initialSnapshot.scale;
+        await fitWindowForScale(pack, initialSnapshot.scale);
+
         unlisten = await listen<UiSnapshot>("runtime:snapshot", (event) => {
           if (!mounted) {
             return;
@@ -38,6 +83,21 @@ function App(): JSX.Element {
           const value = event.payload;
           setSnapshot(value);
           rendererRef.current?.applySnapshot(value);
+          if (activePack === null) {
+            return;
+          }
+          if (
+            scaleFitRef.current !== null &&
+            Math.abs(scaleFitRef.current - value.scale) < SCALE_EPSILON
+          ) {
+            return;
+          }
+          scaleFitRef.current = value.scale;
+          void fitWindowForScale(activePack, value.scale).catch((err) => {
+            if (mounted) {
+              setError(String(err));
+            }
+          });
         });
       })
       .catch((err) => {

frontend/tauri-ui/src/renderer/pixi_pet.ts

@@ -75,10 +75,10 @@ export class PixiPetRenderer {
     }
     const sprite = new Sprite();
     sprite.anchor.set(pack.anchor.x, pack.anchor.y);
-    sprite.position.set(app.renderer.width / 2, app.renderer.height);
     app.stage.addChild(sprite);
 
     const renderer = new PixiPetRenderer(app, sprite, pack, baseTexture);
+    renderer.layoutSprite();
     renderer.applySnapshot(snapshot);
     renderer.startTicker();
     return renderer;
@@ -145,10 +145,12 @@ export class PixiPetRenderer {
       this.applyFrameTexture(this.currentClip.frames[0] ?? 0);
     }
     this.sprite.scale.set(snapshot.scale);
+    this.layoutSprite();
   }
 
   private startTicker(): void {
     this.app.ticker.add((ticker) => {
+      this.layoutSprite();
       const frameMs = 1000 / Math.max(this.currentClip.fps, 1);
       this.frameElapsedMs += ticker.deltaMS;
       if (this.frameElapsedMs < frameMs) {
@@ -169,6 +171,10 @@ export class PixiPetRenderer {
     });
   }
 
+  private layoutSprite(): void {
+    this.sprite.position.set(this.app.renderer.width / 2, this.app.renderer.height);
+  }
+
   private resolveClip(name: string): UiAnimationClip {
     return (
       this.animationMap.get(name) ??