every_holiday/VRCT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Refactor] Tidy up utils' files and functions.

Browse Source
This commit is contained in:
Sakamoto Shiina
2024-11-13 09:31:27 +09:00
parent dd21623b59
commit 6c0c67ab40
24 changed files with 86 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/app/App.jsx
View File

@@ -145,7 +145,7 @@ const FontFamilyController = () => {
};
import { useStore_SelectableFontFamilyList } from "@store";
import { arrayToObject } from "@utils/arrayToObject";
import { arrayToObject } from "@utils";
import { invoke } from "@tauri-apps/api/tauri";
const useAsyncFetchFonts = () => {

0
src-ui/utils/reset.css → src-ui/app/_index_css/reset.css
View File

0
src-ui/utils/root.css → src-ui/app/_index_css/root.css
View File

0
src-ui/utils/variables.css → src-ui/app/_index_css/variables.css
View File

4
src-ui/app/config_page/setting_section/setting_box/about_vrct/poster_showcase_contents/poster_showcase_worlds_contents/PosterShowcaseWorldsContents.jsx
View File

@@ -9,7 +9,7 @@ const getImageByFileName = (file_name) => {
};
import poster_showcase_worlds_settings from "./poster_showcase_worlds_settings";
import { chunkArray } from "@utils/chunkArray";
import { chunkArray } from "@utils";
export const PosterShowcaseWorldsContents = () => {
const { currentPosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();
@@ -57,7 +57,7 @@ export const PosterShowcaseWorldsContents = () => {
import chat_white_square from "@images/chato_white_square.png";
import { useEffect } from "react";
import { randomIntMinMax } from "@utils/randomIntMinMax";
import { randomIntMinMax } from "@utils";
const PosterShowcaseWorldsPagination = ({ page_length }) => {
const { currentPosterShowcaseWorldPageIndex, updatePosterShowcaseWorldPageIndex } = useStore_PosterShowcaseWorldPageIndex();

2
src-ui/app/index.jsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "@root/locales/config.js";
import "@utils/root.css";
import "./_index_css/root.css";
import { App } from "./App";

2
src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
import styles from "./LogBox.module.scss";
import { store } from "@store";
import { MessageContainer } from "./message_container/MessageContainer";
import { scrollToBottom } from "@utils/scrollToBottom";
import { scrollToBottom } from "@utils";
import { useMessage } from "@logics_common";
export const LogBox = () => {

2
src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
View File

@@ -3,7 +3,7 @@ import styles from "./MessageInputBox.module.scss";
import SendMessageSvg from "@images/send_message.svg?react";
import { useMessage } from "@logics_common";
import { store } from "@store";
import { scrollToBottom } from "@utils/scrollToBottom";
import { scrollToBottom } from "@utils";
import {
useSendMessageButtonType,
useEnableAutoClearMessageInputBox,

4
src-ui/app/main_page/sidebar_section/language_settings/LanguageSettings.jsx
View File

@@ -66,7 +66,7 @@ const PresetContainer = () => {
title: t("main_page.your_language"),
is_opened: currentIsOpenedLanguageSelector.data.your_language,
onClickFunction: () => toggleSelector("your_language", currentIsOpenedLanguageSelector.data.your_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: <MicSvg />,
TurnedOnSvgComponent: MicSvg,
is_turned_on: currentTranscriptionSendStatus.data,
variable: your_language_data?.primary,
};
@@ -75,7 +75,7 @@ const PresetContainer = () => {
title: t("main_page.target_language"),
is_opened: currentIsOpenedLanguageSelector.data.target_language,
onClickFunction: () => toggleSelector("target_language", currentIsOpenedLanguageSelector.data.target_language, updateIsOpenedLanguageSelector),
TurnedOnSvgComponent: <HeadphonesSvg />,
TurnedOnSvgComponent: HeadphonesSvg,
is_turned_on: currentTranscriptionReceiveStatus.data,
variable: target_language_data?.primary,
};

13
src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.jsx
View File

@@ -1,17 +1,14 @@
import clsx from "clsx";
import styles from "./LanguageSelectorOpenButton.module.scss";
import ArrowLeftSvg from "@images/arrow_left.svg?react";
import { useSvg } from "@utils/useSvg";
export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened, TurnedOnSvgComponent, is_turned_on, variable }) => {
const classNames = clsx(styles.arrow_left_svg, {
const arrow_class_names = clsx(styles.arrow_left_svg, {
[styles.reverse]: is_opened,
});
const SvgComponent = useSvg(TurnedOnSvgComponent, {
className: clsx(styles.category_svg, {
[styles.is_turned_on]: is_turned_on,
}),
const category_class_names = clsx(styles.category_svg, {
[styles.is_turned_on]: is_turned_on,
});
const languageText = variable?.language ?? "Loading...";
@@ -20,13 +17,13 @@ export const LanguageSelectorOpenButton = ({ title, onClickFunction, is_opened,
return (
<div className={styles.container}>
<div className={styles.title_container}>
{SvgComponent}
<TurnedOnSvgComponent className={category_class_names} />
<p className={styles.title}>{title}</p>
</div>
<div className={styles.dropdown_menu_container} onClick={onClickFunction}>
<p className={styles.selected_language}>{languageText}</p>
<p className={styles.selected_language}>({countryText})</p>
<ArrowLeftSvg className={classNames} />
<ArrowLeftSvg className={arrow_class_names} />
</div>
</div>
);

2
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.jsx
View File

@@ -1,5 +1,5 @@
import { useTranslation } from "react-i18next";
import { updateLabelsById } from "@utils/updateLabelsById";
import { updateLabelsById } from "@utils";
import styles from "./TranslatorSelectorOpenButton.module.scss";
import { TranslatorSelector } from "./translator_selector/TranslatorSelector";
import { useStore_IsOpenedTranslatorSelector } from "@store";

2
src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.jsx
View File

@@ -1,6 +1,6 @@
import clsx from "clsx";
import styles from "./TranslatorSelector.module.scss";
import { chunkArray } from "@utils/chunkArray";
import { chunkArray } from "@utils";
import { useStore_IsOpenedTranslatorSelector } from "@store";
import { useLanguageSettings } from "@logics_main";

0
src-ui/utils/mixins.scss → src-ui/common_css/mixins.scss
View File

2
src-ui/logics/main/useMessageInputBoxRatio.js
View File

@@ -1,7 +1,7 @@
import { appWindow } from "@tauri-apps/api/window";
import { useStore_MessageInputBoxRatio } from "@store";
import { useStdoutToPython } from "@logics/useStdoutToPython";
import { clampMinMax } from "@utils/clampMinMax";
import { clampMinMax } from "@utils";
export const useMessageInputBoxRatio = () => {
const { asyncStdoutToPython } = useStdoutToPython();
const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();

2
src-ui/logics/useReceiveRoutes.js
View File

@@ -1,5 +1,5 @@
import { translator_status } from "@ui_configs";
import { arrayToObject } from "@utils/arrayToObject";
import { arrayToObject } from "@utils";
import {
useWindow,

67
src-ui/utils.js Normal file
View File

@@ -0,0 +1,67 @@
export const arrayToObject = (array) => {
return array.reduce((obj, item) => {
obj[item] = item;
return obj;
}, {});
};
export const chunkArray = (array, size) => {
const chunked = [];
for (let i = 0; i < array.length; i += size) {
chunked.push(array.slice(i, i + size));
}
return chunked;
};
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 (範囲内、少数)
export const randomIntMinMax = (min, max) => {
if (min === max) return min;
if (max === undefined) {
max = min;
min = 0;
}
const int = Math.floor(Math.random() * (max - min + 1)) + min;
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);
return update ? { ...item, label: update.label } : item;
});
};

6
src-ui/utils/arrayToObject.js
View File

@@ -1,6 +0,0 @@
export const arrayToObject = (array) => {
return array.reduce((obj, item) => {
obj[item] = item;
return obj;
}, {});
};

7
src-ui/utils/chunkArray.js
View File

@@ -1,7 +0,0 @@
export const chunkArray = (array, size) => {
const chunked = [];
for (let i = 0; i < array.length; i += size) {
chunked.push(array.slice(i, i + size));
}
return chunked;
};

8
src-ui/utils/clampMinMax.js
View File

@@ -1,8 +0,0 @@
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 (範囲内、少数)

9
src-ui/utils/randomIntMinMax.js
View File

@@ -1,9 +0,0 @@
export const randomIntMinMax = (min, max) => {
if (min === max) return min;
if (max === undefined) {
max = min;
min = 0;
}
const int = Math.floor(Math.random() * (max - min + 1)) + min;
return int;
};

27
src-ui/utils/scrollToBottom.js
View File

@@ -1,27 +0,0 @@
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;
}
};

6
src-ui/utils/updateLabelsById.js
View File

@@ -1,6 +0,0 @@
export const updateLabelsById = (data_array, updates) => {
return data_array.map(item => {
const update = updates.find(update_item => update_item.id === item.id);
return update ? { ...item, label: update.label } : item;
});
};

9
src-ui/utils/useSvg.jsx
View File

@@ -1,9 +0,0 @@
import React from "react";
export const useSvg = (svg_component, ...props) => {
const svgWithClass = svg_component
? React.cloneElement(svg_component, ...props)
: null;
return svgWithClass;
};

4
vite.config.js
View File

@@ -36,10 +36,10 @@ export default defineConfig(async () => ({
"@test_data": path.resolve(__dirname, "./test_data.js"),
"@ui_configs": path.resolve(__dirname, "src-ui/ui_configs.js"),
"@scss_mixins": path.resolve(__dirname, "src-ui/utils/mixins.scss"),
"@scss_mixins": path.resolve(__dirname, "src-ui/common_css/mixins.scss"),
"@store": path.resolve(__dirname, "src-ui/store.js"),
"@images": path.resolve(__dirname, "src-ui/assets"),
"@utils": path.resolve(__dirname, "src-ui/utils"),
"@utils": path.resolve(__dirname, "src-ui/utils.js"),
"@logics": path.resolve(__dirname, "src-ui/logics"),
"@logics_common": path.resolve(__dirname, "src-ui/logics/common"),
"@logics_main": path.resolve(__dirname, "src-ui/logics/main"),