diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx index 8ff1f14f..cad18079 100644 --- a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx +++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx @@ -7,12 +7,15 @@ import { MessageLogSettingsContainer } from "./message_log_settings_container/Me import { MessageInputBox } from "./message_input_box/MessageInputBox"; import { useMessageInputBoxRatio } from "@logics_main"; import { useUiScaling } from "@logics_configs"; +import { useStore_IsAppliedInitMessageBoxHeight } from "@store"; + export const MessageContainer = () => { const { currentMessageInputBoxRatio, asyncSetMessageInputBoxRatio } = useMessageInputBoxRatio(); const { currentUiScaling } = useUiScaling(); const [is_hovered, setIsHovered] = useState(false); const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10); const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem + const { currentIsAppliedInitMessageBoxHeight, updateIsAppliedInitMessageBoxHeight } = useStore_IsAppliedInitMessageBoxHeight(); const container_ref = useRef(null); const log_box_ref = useRef(null); @@ -23,8 +26,13 @@ export const MessageContainer = () => { if (minimized === true) return; // don't save while the window is minimized. setMessageBoxHeightInRem(data); }; - const calculateMessageBoxRatioAndHeight = () => { + if (!currentIsAppliedInitMessageBoxHeight.data) { + asyncSetMessageInputBoxRatio(currentMessageInputBoxRatio.data); + asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data)); + return; + } + if (log_box_ref.current && message_box_wrapper_ref.current) { const container_height = container_ref.current.offsetHeight; const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom); @@ -34,9 +42,7 @@ export const MessageContainer = () => { const message_box_ratio = (message_box_height / total_height) * 100; asyncSetMessageInputBoxRatio(message_box_ratio); - - const height_in_rem = convertRatioToRem(message_box_ratio); - asyncSetMessageBoxHeightInRem(height_in_rem); + asyncSetMessageBoxHeightInRem(convertRatioToRem(message_box_ratio)); } }; @@ -65,23 +71,24 @@ export const MessageContainer = () => { return ((ratio / 100) * total_height / FONT_SIZE_STANDARD); }; + useEffect(() => { + let resizeTimeout; - // Tauriのwindow resizeイベントをリッスン - useEffect(() => { - let resizeTimeout; + const unlisten = appWindow.onResized(() => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + calculateMessageBoxRatioAndHeight(); + }, 200); + }); - // イベントのリスナーを設定 - const unlisten = appWindow.onResized(() => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行 - }, 200); // ドラッグが終了したと見なすまでの遅延(200ms程度) - }); + return () => { + unlisten.then((dispose) => dispose()); + }; + }, []); - return () => { - unlisten.then((dispose) => dispose()); // イベントリスナーを解除 - }; - }, []); + useEffect(() => { + updateIsAppliedInitMessageBoxHeight(true); + }, []); return (