[bugfix] Fix window geometry bug that was not save and restore. changes the way how to get appWindow instance from Tauri.

This commit is contained in:
Sakamoto Shiina
2025-05-11 15:26:05 +09:00
parent 61e333401f
commit b2bc1e62cb
10 changed files with 53 additions and 68 deletions

View File

@@ -1,10 +1,12 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { getCurrentWindow } from "@tauri-apps/api/window"; import { store } from "@store";
export const CornerRadiusController = () => { export const CornerRadiusController = () => {
const [is_win11, setIsWin11] = useState(false); const [is_win11, setIsWin11] = useState(false);
const [is_maximized, setIsMaximized] = useState(false); const [is_maximized, setIsMaximized] = useState(false);
const appWindow = store.appWindow;
// OS 判定Win11 なら platformVersion の major ≥13 // OS 判定Win11 なら platformVersion の major ≥13
useEffect(() => { useEffect(() => {
if (navigator.userAgentData?.getHighEntropyValues) { if (navigator.userAgentData?.getHighEntropyValues) {
@@ -27,12 +29,11 @@ export const CornerRadiusController = () => {
useEffect(() => { useEffect(() => {
let unlisten; let unlisten;
const setup = async () => { const setup = async () => {
const window = await getCurrentWindow();
// 初期状態取得 // 初期状態取得
setIsMaximized(await window.isMaximized()); setIsMaximized(await appWindow.isMaximized());
// リサイズ時にも再取得 // リサイズ時にも再取得
const updateMax = () => window.isMaximized().then(setIsMaximized); const updateMax = () => appWindow.isMaximized().then(setIsMaximized);
unlisten = await window.listen("tauri://resize", updateMax); unlisten = await appWindow.listen("tauri://resize", updateMax);
} }
setup(); setup();

View File

@@ -1,5 +1,4 @@
import { useState } from "react"; import { useState } from "react";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { ErrorBoundary } from "react-error-boundary"; import { ErrorBoundary } from "react-error-boundary";
import XMarkSvg from "@images/cancel.svg?react"; import XMarkSvg from "@images/cancel.svg?react";
import CopySvg from "@images/copy.svg?react"; import CopySvg from "@images/copy.svg?react";
@@ -7,6 +6,8 @@ import CheckMarkSvg from "@images/check_mark.svg?react";
import { ContactsContainer } from "./contacts_container/ContactsContainer"; import { ContactsContainer } from "./contacts_container/ContactsContainer";
import { useWindow } from "@logics_common";
import styles from "./AppErrorBoundary.module.scss"; import styles from "./AppErrorBoundary.module.scss";
export const AppErrorBoundary = ({children}) => { export const AppErrorBoundary = ({children}) => {
@@ -65,14 +66,9 @@ const ErrorContainer = ({error}) => {
}; };
const CloseButtonContainer = () => { const CloseButtonContainer = () => {
const { asyncCloseApp } = useWindow();
const asyncClose = async () => {
const appWindow = await getCurrentWindow();
appWindow.close();
};
return ( return (
<button className={styles.close_button_wrapper} onClick={asyncClose}> <button className={styles.close_button_wrapper} onClick={asyncCloseApp}>
<div className={styles.close_button}> <div className={styles.close_button}>
<XMarkSvg className={styles.x_mark_svg}/> <XMarkSvg className={styles.x_mark_svg}/>
</div> </div>

View File

@@ -2,6 +2,10 @@ import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
import "@root/locales/config.js"; import "@root/locales/config.js";
import "./_index_css/root.css"; import "./_index_css/root.css";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { store } from "@store";
store.appWindow = await getCurrentWindow();
import { App } from "./App"; import { App } from "./App";

View File

@@ -5,7 +5,6 @@ import { useMessage } from "@logics_common";
import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs"; import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
import { useMessageLogScroll } from "@logics_main"; import { useMessageLogScroll } from "@logics_main";
import { store } from "@store"; import { store } from "@store";
import { getCurrentWindow } from "@tauri-apps/api/window";
export const MessageInputBox = () => { export const MessageInputBox = () => {
const [message_history, setMessageHistory] = useState([]); const [message_history, setMessageHistory] = useState([]);
@@ -41,8 +40,6 @@ export const MessageInputBox = () => {
const onSubmitFunction = (e) => { const onSubmitFunction = (e) => {
e.preventDefault(); e.preventDefault();
// const appWindow = getCurrentWindow();
// appWindow.minimize();
if (!currentMessageInputValue.data.trim()) return updateMessageInputValue(""); if (!currentMessageInputValue.data.trim()) return updateMessageInputValue("");

View File

@@ -4,7 +4,7 @@ import { StartUpProgressContainer } from "./start_up_progress_container/StartUpP
import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/"; import { DownloadModelsContainer } from "./download_models_container/DownloadModelsContainer/";
import MegaphoneSvg from "@images/megaphone.svg?react"; import MegaphoneSvg from "@images/megaphone.svg?react";
import XMarkSvg from "@images/cancel.svg?react"; import XMarkSvg from "@images/cancel.svg?react";
import { getCurrentWindow } from "@tauri-apps/api/window"; import { useWindow } from "@logics_common";
import clsx from "clsx"; import clsx from "clsx";
export const SplashComponent = () => { export const SplashComponent = () => {
@@ -73,13 +73,10 @@ const AnnouncementsContainer = () => {
const CloseButtonContainer = () => { const CloseButtonContainer = () => {
const asyncClose = async () => { const { asyncCloseApp } = useWindow();
const appWindow = await getCurrentWindow();
appWindow.close();
};
return ( return (
<button className={styles.close_button_wrapper} onClick={asyncClose}> <button className={styles.close_button_wrapper} onClick={asyncCloseApp}>
<div className={styles.close_button}> <div className={styles.close_button}>
<XMarkSvg className={styles.x_mark_svg}/> <XMarkSvg className={styles.x_mark_svg}/>
</div> </div>

View File

@@ -1,3 +1,4 @@
import { useWindow } from "@logics_common";
// import clsx from "clsx"; // import clsx from "clsx";
import styles from "./WindowTitleBar.module.scss"; import styles from "./WindowTitleBar.module.scss";
import XMarkSvg from "@images/cancel.svg?react"; import XMarkSvg from "@images/cancel.svg?react";
@@ -5,29 +6,8 @@ import SquareSvg from "@images/square.svg?react";
import LineSvg from "@images/line.svg?react"; import LineSvg from "@images/line.svg?react";
import VrctSvg from "@images/vrct.svg?react"; import VrctSvg from "@images/vrct.svg?react";
import { getCurrentWindow } from "@tauri-apps/api/window";
export const WindowTitleBar = () => { export const WindowTitleBar = () => {
const { asyncCloseApp, asyncToggleMaximizeApp, asyncMinimizeApp} = useWindow();
const asyncMinimize = async () => {
const appWindow = await getCurrentWindow();
appWindow.minimize();
};
const asyncMaximize = async () => {
const appWindow = await getCurrentWindow();
const maximizeState = await appWindow.isMaximized();
if (!maximizeState) {
appWindow.maximize();
} else {
appWindow.unmaximize();
}
};
const asyncClose = async () => {
const appWindow = await getCurrentWindow();
appWindow.close();
};
return ( return (
<div className={styles.container}> <div className={styles.container}>
@@ -37,13 +17,13 @@ export const WindowTitleBar = () => {
</div> </div>
<div className={styles.window_control_wrapper}> <div className={styles.window_control_wrapper}>
<div className={styles.minimize_button} onClick={asyncMinimize}> <div className={styles.minimize_button} onClick={asyncMinimizeApp}>
<LineSvg className={styles.line_svg}/> <LineSvg className={styles.line_svg}/>
</div> </div>
<div className={styles.maximize_button} onClick={asyncMaximize}> <div className={styles.maximize_button} onClick={asyncToggleMaximizeApp}>
<SquareSvg className={styles.square_svg}/> <SquareSvg className={styles.square_svg}/>
</div> </div>
<div className={styles.close_button} onClick={asyncClose}> <div className={styles.close_button} onClick={asyncCloseApp}>
<XMarkSvg className={styles.x_mark_svg}/> <XMarkSvg className={styles.x_mark_svg}/>
</div> </div>
</div> </div>

View File

@@ -1,5 +1,5 @@
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
import { getCurrentWindow, currentMonitor, availableMonitors, PhysicalPosition, PhysicalSize } from "@tauri-apps/api/window"; import { currentMonitor, availableMonitors, PhysicalPosition, PhysicalSize } from "@tauri-apps/api/window";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
import { useStore_IsBreakPoint } from "@store"; import { useStore_IsBreakPoint } from "@store";
import { useUiScaling } from "@logics_configs"; import { useUiScaling } from "@logics_configs";
@@ -10,9 +10,9 @@ export const useWindow = () => {
const { currentUiScaling } = useUiScaling(); const { currentUiScaling } = useUiScaling();
const { updateIsBreakPoint } = useStore_IsBreakPoint(); const { updateIsBreakPoint } = useStore_IsBreakPoint();
const appWindow = store.appWindow;
const asyncGetWindowGeometry = async () => { const asyncGetWindowGeometry = async () => {
const appWindow = await getCurrentWindow();
try { try {
const position = await appWindow.outerPosition(); const position = await appWindow.outerPosition();
const { x: x_pos, y: y_pos } = position; const { x: x_pos, y: y_pos } = position;
@@ -32,7 +32,6 @@ export const useWindow = () => {
}; };
const asyncSaveWindowGeometry = async () => { const asyncSaveWindowGeometry = async () => {
const appWindow = await getCurrentWindow();
const minimized = await appWindow.isMinimized(); const minimized = await appWindow.isMinimized();
if (minimized === true) return; // don't save while the window is minimized. if (minimized === true) return; // don't save while the window is minimized.
const data = await asyncGetWindowGeometry(); const data = await asyncGetWindowGeometry();
@@ -40,8 +39,6 @@ export const useWindow = () => {
}; };
const restoreWindowGeometry = async (data) => { const restoreWindowGeometry = async (data) => {
const appWindow = await getCurrentWindow();
try { try {
const monitors = await availableMonitors(); const monitors = await availableMonitors();
const { x_pos, y_pos, width, height } = data; const { x_pos, y_pos, width, height } = data;
@@ -95,7 +92,6 @@ export const useWindow = () => {
}; };
const asyncUpdateBreakPoint = async () => { const asyncUpdateBreakPoint = async () => {
const appWindow = await getCurrentWindow();
const size = await appWindow.innerSize(); const size = await appWindow.innerSize();
const dynamicBreakPoint = 800 * (currentUiScaling.data / 100); const dynamicBreakPoint = 800 * (currentUiScaling.data / 100);
updateIsBreakPoint(size.width <= dynamicBreakPoint); updateIsBreakPoint(size.width <= dynamicBreakPoint);
@@ -109,10 +105,7 @@ export const useWindow = () => {
const unlistenMove = useRef(null); const unlistenMove = useRef(null);
useEffect(() => { useEffect(() => {
const setup = async () => { const setup = () => {
if (store.is_register_window_geometry_controller) return;
const appWindow = await getCurrentWindow();
unlistenResize.current = appWindow.onResized(() => { unlistenResize.current = appWindow.onResized(() => {
clearTimeout(resizeTimeout.current); clearTimeout(resizeTimeout.current);
resizeTimeout.current = setTimeout(() => { resizeTimeout.current = setTimeout(() => {
@@ -127,7 +120,6 @@ export const useWindow = () => {
asyncSaveWindowGeometry(); asyncSaveWindowGeometry();
}, 200); }, 200);
}); });
store.is_register_window_geometry_controller = true;
}; };
setup(); setup();
@@ -148,10 +140,30 @@ export const useWindow = () => {
return null; return null;
}; };
const asyncToggleMaximizeApp = async () => {
const maximizeState = await appWindow.isMaximized();
if (!maximizeState) {
await appWindow.maximize();
} else {
await appWindow.unmaximize();
}
};
const asyncMinimizeApp = async () => {
await appWindow.minimize();
};
const asyncCloseApp = async () => {
await appWindow.close();
};
return { return {
WindowGeometryController, WindowGeometryController,
asyncSaveWindowGeometry, asyncSaveWindowGeometry,
restoreWindowGeometry, restoreWindowGeometry,
asyncUpdateBreakPoint, asyncUpdateBreakPoint,
asyncCloseApp,
asyncToggleMaximizeApp,
asyncMinimizeApp,
}; };
}; };

View File

@@ -1,5 +1,3 @@
import { getCurrentWindow } from "@tauri-apps/api/window";
import { store, useStore_Hotkeys } from "@store"; import { store, useStore_Hotkeys } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
import { useNotificationStatus } from "@logics_common"; import { useNotificationStatus } from "@logics_common";
@@ -7,6 +5,8 @@ import { useMainFunction } from "@logics_main";
import { register, unregisterAll, isRegistered } from "@tauri-apps/plugin-global-shortcut"; import { register, unregisterAll, isRegistered } from "@tauri-apps/plugin-global-shortcut";
export const useHotkeys = () => { export const useHotkeys = () => {
const appWindow = store.appWindow;
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
const { currentHotkeys, updateHotkeys, pendingHotkeys } = useStore_Hotkeys(); const { currentHotkeys, updateHotkeys, pendingHotkeys } = useStore_Hotkeys();
const { const {
@@ -68,8 +68,6 @@ export const useHotkeys = () => {
if (!isAlreadyRegistered) { if (!isAlreadyRegistered) {
await register(shortcut, async (event) => { await register(shortcut, async (event) => {
if (event.state !== "Pressed") return; if (event.state !== "Pressed") return;
const appWindow = await getCurrentWindow();
switch (actionKey) { switch (actionKey) {
case "toggle_vrct_visibility": { case "toggle_vrct_visibility": {
const minimized = await appWindow.isMinimized(); const minimized = await appWindow.isMinimized();

View File

@@ -1,4 +1,4 @@
import { getCurrentWindow } from "@tauri-apps/api/window"; import { store } from "@store";
import { import {
useStore_TranslationStatus, useStore_TranslationStatus,
@@ -6,10 +6,11 @@ import {
useStore_TranscriptionReceiveStatus, useStore_TranscriptionReceiveStatus,
useStore_ForegroundStatus, useStore_ForegroundStatus,
} from "@store"; } from "@store";
import { useCallback } from "react";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
export const useMainFunction = () => { export const useMainFunction = () => {
const appWindow = store.appWindow;
const { const {
currentTranslationStatus, currentTranslationStatus,
updateTranslationStatus, updateTranslationStatus,
@@ -76,9 +77,8 @@ export const useMainFunction = () => {
const toggleForeground = async () => { const toggleForeground = async () => {
const main_page = await getCurrentWindow();
const is_foreground_enabled = !currentForegroundStatus.data; const is_foreground_enabled = !currentForegroundStatus.data;
main_page.setAlwaysOnTop(is_foreground_enabled); await appWindow.setAlwaysOnTop(is_foreground_enabled);
updateForegroundStatus(is_foreground_enabled); updateForegroundStatus(is_foreground_enabled);
}; };

View File

@@ -1,8 +1,9 @@
import { getCurrentWindow } from "@tauri-apps/api/window"; import { store } from "@store";
import { useStore_MessageInputBoxRatio } from "@store"; import { useStore_MessageInputBoxRatio } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython"; import { useStdoutToPython } from "@logics/useStdoutToPython";
import { clampMinMax } from "@utils"; import { clampMinMax } from "@utils";
export const useMessageInputBoxRatio = () => { export const useMessageInputBoxRatio = () => {
const appWindow = store.appWindow;
const { asyncStdoutToPython } = useStdoutToPython(); const { asyncStdoutToPython } = useStdoutToPython();
const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio(); const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
@@ -12,7 +13,6 @@ export const useMessageInputBoxRatio = () => {
}; };
const asyncSetMessageInputBoxRatio = async (ratio) => { const asyncSetMessageInputBoxRatio = async (ratio) => {
const appWindow = getCurrentWindow();
const minimized = await appWindow.isMinimized(); const minimized = await appWindow.isMinimized();
if (minimized === true) return; // don't save while the window is minimized. if (minimized === true) return; // don't save while the window is minimized.
const parsed = parseFloat(ratio.toFixed(2)); const parsed = parseFloat(ratio.toFixed(2));