From 69d835855c082ce91d47897deecb5cc0e95be141 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:37:21 +0900
Subject: [PATCH] [Update] Main Page: Message Input Box Ratio. Save the ratio
 when window is resized.

---
 .../message_container/MessageContainer.jsx    | 22 +++++++++++++++++--
 .../MessageContainer.module.scss              |  2 +-
 src-ui/logics/main/useMessageInputBoxRatio.js |  6 +++--
 src-ui/utils/clampMinMax.js                   |  8 +++++++
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 src-ui/utils/clampMinMax.js

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 f2d40273..45693788 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
@@ -1,7 +1,7 @@
 import { useResizable } from "react-resizable-layout";
 import { useRef, useEffect, useState } from "react";
 import styles from "./MessageContainer.module.scss";
-
+import { appWindow } from "@tauri-apps/api/window"; // Tauriのwindow APIをインポート
 import { LogBox } from "./log_box/LogBox";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
 import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
@@ -50,9 +50,27 @@ export const MessageContainer = () => {
         const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
         const total_height = container_height - container_padding_bottom;
 
-        return (ratio / 100) * total_height / 10; // 10px = 1rem
+        return ((ratio / 100) * total_height / 10) | 0; // 10px = 1rem
     };
 
+
+        // Tauriのwindow resizeイベントをリッスン
+        useEffect(() => {
+            let resizeTimeout;
+
+            // イベントのリスナーを設定
+            const unlisten = appWindow.onResized(() => {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行
+                }, 200); // ドラッグが終了したと見なすまでの遅延（200ms程度）
+            });
+
+            return () => {
+                unlisten.then((dispose) => dispose()); // イベントリスナーを解除
+            };
+        }, []);
+
     return (
         <div className={styles.container} ref={container_ref}>
             <div ref={log_box_ref} className={styles.log_box_resize_wrapper}>
diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
index a7584626..27763d9c 100644
--- a/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss
@@ -37,5 +37,5 @@
 .message_box_resize_wrapper {
     height: 10rem;
     min-height: 3.8rem;
-    max-height: 80%;
+    max-height: 90%;
 }
\ No newline at end of file
diff --git a/src-ui/logics/main/useMessageInputBoxRatio.js b/src-ui/logics/main/useMessageInputBoxRatio.js
index 30761c27..61a36706 100644
--- a/src-ui/logics/main/useMessageInputBoxRatio.js
+++ b/src-ui/logics/main/useMessageInputBoxRatio.js
@@ -1,6 +1,6 @@
 import { useStore_MessageInputBoxRatio } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
-
+import { clampMinMax } from "@utils/clampMinMax";
 export const useMessageInputBoxRatio = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
@@ -10,7 +10,9 @@ export const useMessageInputBoxRatio = () => {
     };
 
     const setMessageInputBoxRatio = (ratio) => {
-        asyncStdoutToPython("/set/data/message_box_ratio", parseFloat(ratio.toFixed(2)));
+        const parsed = parseFloat(ratio.toFixed(2));
+        const valid_ratio = clampMinMax(parsed, 1, 99);
+        asyncStdoutToPython("/set/data/message_box_ratio", valid_ratio);
     };
 
     return {
diff --git a/src-ui/utils/clampMinMax.js b/src-ui/utils/clampMinMax.js
new file mode 100644
index 00000000..1eced3f0
--- /dev/null
+++ b/src-ui/utils/clampMinMax.js
@@ -0,0 +1,8 @@
+export const clampMinMax = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+
+// console.log(clamp(5, 1, 10));  // 5 (範囲内)
+// console.log(clamp(-3, 0, 10)); // 0 (minより小さい)
+// console.log(clamp(15, 1, 10)); // 10 (maxより大きい)
+// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数)
\ No newline at end of file