From 8cb81878dba3e97cf4c60c76dd5f6e020d7ea623 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Tue, 26 Nov 2024 16:23:24 +0900
Subject: [PATCH] =?UTF-8?q?[Update]=20Config=20Page:=20VR=20Tab.=20x,y,z?=
 =?UTF-8?q?=20pos.=20ui=5Fscaling=E3=81=AEmin=20max=E3=81=AA=E3=81=A9?=
 =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E5=80=A4=E3=82=92=E5=A4=89=E6=95=B0=E5=8C=96?=
 =?UTF-8?q?=E3=80=81ui=5Fconfig.js=E4=B8=8A=E3=81=A7=E8=A8=AD=E5=AE=9A?=
 =?UTF-8?q?=E5=8F=AF=E8=83=BD=E3=81=AB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../setting_section/setting_box/vr/Vr.jsx     | 38 ++++++++++---------
 src-ui/ui_configs.js                          | 12 ++++++
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
index 38cf53ac..0d40346c 100644
--- a/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/vr/Vr.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { clsx } from "clsx";
 import styles from "./Vr.module.scss";
+import { ui_configs } from "@ui_configs";
 import { Slider } from "../_components/";
 import {
     RadioButtonContainer,
@@ -38,6 +39,7 @@ export const Vr = () => {
                 {is_opened_small_settings ? (
                     <OverlaySettingsContainer
                     id="overlay_settings_small"
+                    ui_configs={ui_configs.overlay_small_log}
                     current_overlay_settings={currentOverlaySmallLogSettings.data}
                     set_overlay_settings={setOverlaySmallLogSettings}
                     current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
@@ -46,6 +48,7 @@ export const Vr = () => {
                 ) : (
                     <OverlaySettingsContainer
                     id="overlay_settings_large"
+                    ui_configs={ui_configs.overlay_large_log}
                     current_overlay_settings={currentOverlayLargeLogSettings.data}
                     set_overlay_settings={setOverlayLargeLogSettings}
                     current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
@@ -62,6 +65,7 @@ const OverlaySettingsContainer = ({
     set_overlay_settings,
     current_is_enabled_overlay,
     toggle_is_enabled_overlay,
+    ui_configs,
     id
 }) => {
 
@@ -113,12 +117,12 @@ const OverlaySettingsContainer = ({
 
             <div className={styles.position_rotation_controls_box}>
                 {is_opened_position_controller ? (
-                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} />
+                    <PositionControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
                 ) : (
-                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} />
+                    <RotationControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
                 )}
             </div>
-            <OtherControls settings={settings} onchangeFunction={onchangeFunction} />
+            <OtherControls settings={settings} onchangeFunction={onchangeFunction} ui_configs={ui_configs} />
             <RadioButtonContainer
                 label={t("overlay_settings.tracker")}
                 selectFunction={selectTrackerFunction}
@@ -156,7 +160,7 @@ const PageSwitcherContainer = (props) => {
     );
 };
 
-const PositionControls = ({settings, onchangeFunction}) => {
+const PositionControls = ({settings, onchangeFunction, ui_configs}) => {
     const { t } = useTranslation();
 
     return (
@@ -166,9 +170,9 @@ const PositionControls = ({settings, onchangeFunction}) => {
                 <Slider
                     className={styles.x_position_slider}
                     variable={settings.x_pos}
-                    step={0.05}
-                    min={-0.5}
-                    max={0.5}
+                    step={ui_configs.x_pos.step}
+                    min={ui_configs.x_pos.min}
+                    max={ui_configs.x_pos.max}
                     onchangeFunction={(value) => onchangeFunction("x_pos", value)}
                 />
             </div>
@@ -177,9 +181,9 @@ const PositionControls = ({settings, onchangeFunction}) => {
                 <Slider
                     className={styles.y_position_slider}
                     variable={settings.y_pos}
-                    step={0.05}
-                    min={-0.8}
-                    max={0.8}
+                    step={ui_configs.y_pos.step}
+                    min={ui_configs.y_pos.min}
+                    max={ui_configs.y_pos.max}
                     onchangeFunction={(value) => onchangeFunction("y_pos", value)}
                     orientation="vertical"
                 />
@@ -189,9 +193,9 @@ const PositionControls = ({settings, onchangeFunction}) => {
                 <Slider
                     className={styles.z_position_slider}
                     variable={settings.z_pos}
-                    step={0.05}
-                    min={-0.5}
-                    max={1.5}
+                    step={ui_configs.z_pos.step}
+                    min={ui_configs.z_pos.min}
+                    max={ui_configs.z_pos.max}
                     onchangeFunction={(value) => onchangeFunction("z_pos", value)}
                     orientation="vertical"
                 />
@@ -245,7 +249,7 @@ const RotationControls = ({settings, onchangeFunction}) => {
     );
 };
 
-const OtherControls = ({settings, onchangeFunction}) => {
+const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
     const { t } = useTranslation();
 
     const ui_variable_opacity = (settings.opacity * 100).toFixed(0);
@@ -275,9 +279,9 @@ const OtherControls = ({settings, onchangeFunction}) => {
                     className={clsx(styles.other_controls_slider, styles.ui_scaling_slider)}
                     variable={settings.ui_scaling * 100}
                     valueLabelFormat={`${ui_variable_ui_scaling}%`}
-                    step={10}
-                    min={40}
-                    max={200}
+                    step={ui_configs.ui_scaling.step}
+                    min={ui_configs.ui_scaling.min}
+                    max={ui_configs.ui_scaling.max}
                     onchangeFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
                 />
             </div>
diff --git a/src-ui/ui_configs.js b/src-ui/ui_configs.js
index a3634b91..0650726e 100644
--- a/src-ui/ui_configs.js
+++ b/src-ui/ui_configs.js
@@ -3,6 +3,18 @@ export const ui_configs = {
     mic_threshold_max: 2000,
     speaker_threshold_min: 0,
     speaker_threshold_max: 4000,
+    overlay_small_log: {
+        x_pos: { step: 0.05, min: -0.5, max: 0.5 },
+        y_pos: { step: 0.05, min: -0.8, max: 0.8 },
+        z_pos: { step: 0.05, min: -0.5, max: 1.5 },
+        ui_scaling: { step: 10, min: 40, max: 200 },
+    },
+    overlay_large_log: {
+        x_pos: { step: 0.05, min: -0.5, max: 0.5 },
+        y_pos: { step: 0.05, min: -0.8, max: 0.8 },
+        z_pos: { step: 0.05, min: -0.5, max: 1.5 },
+        ui_scaling: { step: 10, min: 40, max: 200 },
+    },
     selectable_ui_languages: [
         {id: "en", label: "English"},
         {id: "ja", label: "日本語"},