From 227aacd005628e3df0adf811b8d0407ac87e4f4e Mon Sep 17 00:00:00 2001 From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com> Date: Fri, 3 Jan 2025 19:04:46 +0900 Subject: [PATCH] [Refactor/bugfix] Main Page: Message Logs. Fix scroll animation, that is not using at this time though. --- .../message_container/log_box/LogBox.jsx | 46 +++------- .../message_input_box/MessageInputBox.jsx | 7 +- src-ui/logics/main/index.js | 1 + src-ui/logics/main/useMessageLogScroll.js | 85 +++++++++++++++++++ src-ui/utils.js | 28 ------ 5 files changed, 101 insertions(+), 66 deletions(-) create mode 100644 src-ui/logics/main/useMessageLogScroll.js diff --git a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx index 4f9ef5a0..8aa8d2ec 100644 --- a/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx +++ b/src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx @@ -1,50 +1,26 @@ -import { useEffect, useLayoutEffect, useRef, useState } from "react"; +import React, { useRef, useLayoutEffect, useEffect } from "react"; import styles from "./LogBox.module.scss"; -import { store } from "@store"; import { MessageContainer } from "./message_container/MessageContainer"; -import { scrollToBottom } from "@utils"; import { useMessage } from "@logics_common"; +import { useMessageLogScroll } from "@logics_main"; +import { store } from "@store"; export const LogBox = () => { const { currentMessageLogs } = useMessage(); - const log_container_ref = useRef(null); - const [is_scrolling, setIsScrolling] = useState(false); - + const { scrollToBottom, isScrolling } = useMessageLogScroll(); + const logContainerRef = useRef(null); useLayoutEffect(() => { - store.log_box_ref = log_container_ref; - if (!is_scrolling) { - scrollToBottom(store.log_box_ref); - // scrollToBottom(store.log_box_ref, true); [Fix me] + store.log_box_ref = logContainerRef; + if (!isScrolling) { + scrollToBottom(); } - }, [currentMessageLogs.data]); - - useEffect(() => { - const handleScroll = () => { - const element = log_container_ref.current; - if (!element) return; - const currentScrollTop = element.scrollTop; - const at_bottom = element.scrollHeight - currentScrollTop === element.clientHeight; - - if (at_bottom) { - setIsScrolling(false); - } else { - setIsScrolling(true); - } - }; - - const element = log_container_ref.current; - element.addEventListener("scroll", handleScroll); - - return () => { - element.removeEventListener("scroll", handleScroll); - }; - }, []); + }, [currentMessageLogs.data, isScrolling]); return ( -
+
- {currentMessageLogs.data.map(message_data => ( + {currentMessageLogs.data.map((message_data) => ( ))}
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx index 53bce2e5..e5725637 100644 --- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx +++ b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx @@ -3,8 +3,7 @@ import styles from "./MessageInputBox.module.scss"; import SendMessageSvg from "@images/send_message.svg?react"; import { useMessage } from "@logics_common"; import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs"; -import { store } from "@store"; -import { scrollToBottom } from "@utils"; +import { useMessageLogScroll } from "@logics_main"; export const MessageInputBox = () => { const [message_history, setMessageHistory] = useState([]); @@ -21,6 +20,8 @@ export const MessageInputBox = () => { const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox(); const { currentSendMessageButtonType } = useSendMessageButtonType(); + const { scrollToBottom } = useMessageLogScroll(); + useEffect(() => { if (currentMessageLogs.data) { const sentMessages = currentMessageLogs.data @@ -40,7 +41,7 @@ export const MessageInputBox = () => { if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue(""); setTimeout(() => { - scrollToBottom(store.log_box_ref); + scrollToBottom(); }, 10); setHistoryIndex(-1); diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js index 9d142003..7cd492d6 100644 --- a/src-ui/logics/main/index.js +++ b/src-ui/logics/main/index.js @@ -2,5 +2,6 @@ export { useIsVisibleResendButton } from "./useIsVisibleResendButton"; export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode"; export { useLanguageSettings } from "./useLanguageSettings"; export { useMainFunction } from "./useMainFunction"; +export { useMessageLogScroll } from "./useMessageLogScroll"; export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio"; export { useSelectableLanguageList } from "./useSelectableLanguageList"; \ No newline at end of file diff --git a/src-ui/logics/main/useMessageLogScroll.js b/src-ui/logics/main/useMessageLogScroll.js new file mode 100644 index 00000000..425adcb0 --- /dev/null +++ b/src-ui/logics/main/useMessageLogScroll.js @@ -0,0 +1,85 @@ +import { useRef, useEffect, useCallback, useState } from "react"; +import { store } from "@store"; + +export const useMessageLogScroll = () => { + const [isScrolling, setIsScrolling] = useState(false); + const isSmoothScrollingRef = useRef(false); + const animationFrameRef = useRef(null); + + const cancelSmoothScroll = () => { + if (animationFrameRef.current) { + cancelAnimationFrame(animationFrameRef.current); + animationFrameRef.current = null; + } + isSmoothScrollingRef.current = false; + }; + + const scrollToBottom = useCallback((smooth = false) => { + const element = store.log_box_ref.current; + if (!element) return; + + const scrollHeight = element.scrollHeight - element.clientHeight; + + if (smooth) { + cancelSmoothScroll(); + isSmoothScrollingRef.current = true; + + const duration = 100; + const startTime = performance.now(); + const initialScrollTop = element.scrollTop; + + const scroll = (currentTime) => { + const elapsed = currentTime - startTime; + const progress = Math.min(elapsed / duration, 1); + const easeInOutQuad = (t) => + t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; + + element.scrollTop = + initialScrollTop + (scrollHeight - initialScrollTop) * easeInOutQuad(progress); + + if (progress < 1) { + animationFrameRef.current = requestAnimationFrame(scroll); + } else { + isSmoothScrollingRef.current = false; + } + }; + + animationFrameRef.current = requestAnimationFrame(scroll); + } else { + cancelSmoothScroll(); + element.scrollTop = scrollHeight; + + } + }, []); + + useEffect(() => { + const handleScroll = () => { + if (isSmoothScrollingRef.current) return; + + const element = store.log_box_ref.current; + if (!element) return; + + const atBottom = + Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 5; + + setIsScrolling(!atBottom); + }; + + const element = store.log_box_ref.current; + if (element) { + element.addEventListener("scroll", handleScroll); + } + + return () => { + if (element) { + element.removeEventListener("scroll", handleScroll); + } + cancelSmoothScroll(); + }; + }, []); + + return { + scrollToBottom, + isScrolling, + }; +}; diff --git a/src-ui/utils.js b/src-ui/utils.js index a2d38fc9..b7296f49 100644 --- a/src-ui/utils.js +++ b/src-ui/utils.js @@ -31,34 +31,6 @@ export const randomIntMinMax = (min, max) => { return int; }; -export const scrollToBottom = (ref, smooth = false) => { - const element = ref.current; - const scroll_height = element.scrollHeight - element.clientHeight; - - if (smooth) { - const duration = 300; // スクロールにかける時間（ミリ秒） - const start_time = performance.now(); - const scroll_top = element.scrollTop; - - const scroll = (current_time) => { - const elapsed = current_time - start_time; - const progress = Math.min(elapsed / duration, 1); - const ease_in_out_quad = (t) => t < 0.5 - ? 2 * t * t - : -1 + (4 - 2 * t) * t; - element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress); - - if (progress < 1) { - requestAnimationFrame(scroll); - } - }; - - requestAnimationFrame(scroll); - } else { - element.scrollTop = scroll_height; - } -}; - export const updateLabelsById = (data_array, updates) => { return data_array.map(item => { const update = updates.find(update_item => update_item.id === item.id);