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

[Refactor] Improve slider logic flexibility.(Adjust to Vr section)

Browse Source
This commit is contained in:
Sakamoto Shiina
2025-11-08 06:46:52 +09:00
parent 4770908831
commit 1bdea275dc
5 changed files with 76 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src-ui/logics/configs/config_page_setter/useSettingsLogics.js
View File

@@ -206,20 +206,21 @@ export const useConfigFunctions = (Category) => {
import { useState, useEffect, useCallback, useMemo } from "react";
export const useSliderLogic = ({
current_value,
variable,
setterFunction,
postUpdateAction,
min,
max,
step = 1,
show_label_values = [],
show_label_values = null,
marks_step,
setter_timing = "on_change_committed",
}) => {
if (marks_step === undefined) {
marks_step = step;
}
const [ui_value, setUiValue] = useState(current_value.data);
const [ui_value, setUiValue] = useState(variable);
const decimalPlaces = marks_step.toString().includes('.')
? marks_step.toString().split('.')[1].length
@@ -234,25 +235,43 @@ export const useSliderLogic = ({
}, [show_label_values, decimalPlaces]);
const marks = useMemo(() => {
if (show_label_values === null) {
return null;
}
return createMarks(min, max, marks_step, labelFormatter);
}, [min, max, marks_step, labelFormatter]);
}, [min, max, marks_step, labelFormatter, show_label_values]);
const onchangeFunction = useCallback((value) => {
setUiValue(value);
}, []);
let onchangeFunction;
let onchangeCommittedFunction;
const onchangeCommittedFunction = useCallback((value) => {
setterFunction(value);
}, [setterFunction]);
if (setter_timing === "on_change") {
onchangeFunction = useCallback((value) => {
setUiValue(value);
setterFunction(value);
}, [setterFunction]);
onchangeCommittedFunction = null;
} else if (setter_timing === "on_change_committed") {
onchangeFunction = useCallback((value) => {
setUiValue(value);
}, []);
onchangeCommittedFunction = useCallback((value) => {
setterFunction(value);
}, [setterFunction]);
} else {
console.error(`Invalid 'setter_timing' value provided to useSliderLogic. Expected 'on_change' or 'on_change_committed'. Received: ${setter_timing}`);
}
useEffect(() => {
if (current_value.data !== ui_value) {
setUiValue(current_value.data);
if (variable !== ui_value) {
setUiValue(variable);
}
if (postUpdateAction) {
postUpdateAction();
}
}, [current_value.data]);
}, [variable]);
return {
ui_value,
@@ -264,15 +283,15 @@ export const useSliderLogic = ({
const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
const marks = [];
let current_value = min;
let variable = min;
for (let i = 0; current_value <= max; i++) {
const fixedValue = parseFloat(current_value.toFixed(10));
for (let i = 0; variable <= max; i++) {
const fixedValue = parseFloat(variable.toFixed(10));
marks.push({ value: fixedValue, label: `${labelFormatter(fixedValue)}` });
current_value += marks_step;
current_value = parseFloat(current_value.toFixed(10));
variable += marks_step;
variable = parseFloat(variable.toFixed(10));
if (i > 1000) {
console.error("Loop limit exceeded (1000 iterations). createMarks()");

4
src-ui/views/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx
View File

@@ -7,15 +7,15 @@ import { useSliderLogic } from "@logics_configs";
export const Slider = (props) => {
const location = props.valueLabelDisplayLocation || "top";
const {
ui_value,
onchangeFunction,
onchangeCommittedFunction,
marks
} = useSliderLogic({
current_value: props.current_value,
variable: props.variable,
setterFunction: props.setterFunction,
setter_timing: props.setter_timing,
postUpdateAction: props.postUpdateAction,
min: props.min,
max: props.max,

8
src-ui/views/app/config_page/setting_section/setting_box/appearance/Appearance.jsx
View File

@@ -11,8 +11,6 @@ import {
import {
useAppearance,
useSliderLogic,
} from "@logics_configs";
import {
@@ -61,7 +59,7 @@ const UiScalingContainer = () => {
return (
<SliderContainer
label={t("config_page.appearance.ui_size.label") + " (%)"}
current_value={currentUiScaling}
variable={currentUiScaling.data}
setterFunction={setUiScaling}
postUpdateAction={asyncUpdateBreakPoint}
min={40}
@@ -80,7 +78,7 @@ export const MessageLogUiScalingContainer = () => {
return (
<SliderContainer
label={t("config_page.appearance.textbox_ui_size.label") + " (%)"}
current_value={currentMessageLogUiScaling}
variable={currentMessageLogUiScaling.data}
setterFunction={setMessageLogUiScaling}
min={40}
max={200}
@@ -152,7 +150,7 @@ const TransparencyContainer = () => {
return (
<SliderContainer
label={t("config_page.appearance.transparency.label") + " (%)"}
current_value={currentTransparency}
variable={currentTransparency.data}
setterFunction={setTransparency}
min={40}
max={100}

8
src-ui/views/app/config_page/setting_section/setting_box/transcription/Transcription.jsx
View File

@@ -476,7 +476,7 @@ export const MicAvgLogprobContainer = () => {
<SliderContainer
label="Mic Avg Logprob"
desc="Default: -0.8"
current_value={currentMicAvgLogprob}
variable={currentMicAvgLogprob.data}
setterFunction={setMicAvgLogprob}
min={-2}
max={0}
@@ -494,7 +494,7 @@ export const MicNoSpeechProbContainer = () => {
<SliderContainer
label="Mic No Speech Prob"
desc="Default: 0.6"
current_value={currentMicNoSpeechProb}
variable={currentMicNoSpeechProb.data}
setterFunction={setMicNoSpeechProb}
min={0}
max={1}
@@ -511,7 +511,7 @@ export const SpeakerAvgLogprobContainer = () => {
<SliderContainer
label="Speaker Avg Logprob"
desc="Default: -0.8"
current_value={currentSpeakerAvgLogprob}
variable={currentSpeakerAvgLogprob.data}
setterFunction={setSpeakerAvgLogprob}
min={-2}
max={0}
@@ -529,7 +529,7 @@ export const SpeakerNoSpeechProbContainer = () => {
<SliderContainer
label="Speaker No Speech Prob"
desc="Default: 0.6"
current_value={currentSpeakerNoSpeechProb}
variable={currentSpeakerNoSpeechProb.data}
setterFunction={setSpeakerNoSpeechProb}
min={0}
max={1}

51
src-ui/views/app/config_page/setting_section/setting_box/vr/Vr.jsx
View File

@@ -25,7 +25,6 @@ import TriangleSvg from "@images/triangle.svg?react";
import { randomIntMinMax } from "@utils";
export const Vr = () => {
return null;
const { t } = useI18n();
const [is_opened_small_settings, setIsOpenedSmallSettings] = useState(true);
const toggleIsOpenedSmallSettings = () => {
@@ -64,7 +63,7 @@ export const Vr = () => {
ui_configs={ui_configs.overlay_small_log}
default_ui_configs={ui_configs.overlay_small_log_default_settings}
current_overlay_settings={currentOverlaySmallLogSettings.data}
set_overlay_settings={setOverlaySmallLogSettings}
setOverlaySettings={setOverlaySmallLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlaySmallLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlaySmallLog}
/>
@@ -74,7 +73,7 @@ export const Vr = () => {
ui_configs={ui_configs.overlay_large_log}
default_ui_configs={ui_configs.overlay_large_log_default_settings}
current_overlay_settings={currentOverlayLargeLogSettings.data}
set_overlay_settings={setOverlayLargeLogSettings}
setOverlaySettings={setOverlayLargeLogSettings}
current_is_enabled_overlay={currentIsEnabledOverlayLargeLog}
toggle_is_enabled_overlay={toggleIsEnabledOverlayLargeLog}
/>
@@ -93,21 +92,21 @@ export const Vr = () => {
const OverlaySettingsContainer = ({
current_overlay_settings,
set_overlay_settings,
setOverlaySettings,
current_is_enabled_overlay,
toggle_is_enabled_overlay,
ui_configs,
default_ui_configs,
id
}) => {
const { t } = useI18n();
const [settings, setSettings] = useState(current_overlay_settings);
const [timeout_id, setTimeoutId] = useState(null);
useEffect(() => {
setSettings(current_overlay_settings);
}, [current_overlay_settings]);
const [settings, setSettings] = useState(current_overlay_settings);
const [timeout_id, setTimeoutId] = useState(null);
const [is_opened_position_controller, setIsOpenedPositionController] = useState(true);
const togglePositionRotationController = () => {
@@ -119,17 +118,17 @@ const OverlaySettingsContainer = ({
if (timeout_id) clearTimeout(timeout_id);
const newTimeoutId = setTimeout(() => {
const new_timeout_id = setTimeout(() => {
const new_data = { ...settings, [key]: value };
set_overlay_settings(new_data);
setOverlaySettings(new_data);
}, 50);
setTimeoutId(newTimeoutId);
setTimeoutId(new_timeout_id);
};
const selectFunction = (key, value) => {
const new_data = { ...settings, [key]: value };
set_overlay_settings(new_data);
setOverlaySettings(new_data);
};
@@ -235,7 +234,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.x_pos.step}
min={ui_configs.x_pos.min}
max={ui_configs.x_pos.max}
onchangeFunction={(value) => onchangeFunction("x_pos", value)}
setterFunction={(value) => onchangeFunction("x_pos", value)}
setter_timing="on_change"
valueLabelDisplay={x_variable_display}
valueLabelDisplayLocation="top"
/>
@@ -260,7 +260,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.y_pos.step}
min={ui_configs.y_pos.min}
max={ui_configs.y_pos.max}
onchangeFunction={(value) => onchangeFunction("y_pos", value)}
setterFunction={(value) => onchangeFunction("y_pos", value)}
setter_timing="on_change"
orientation="vertical"
valueLabelDisplay={y_variable_display}
valueLabelDisplayLocation="right"
@@ -286,7 +287,8 @@ export const PositionControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.z_pos.step}
min={ui_configs.z_pos.min}
max={ui_configs.z_pos.max}
onchangeFunction={(value) => onchangeFunction("z_pos", value)}
setterFunction={(value) => onchangeFunction("z_pos", value)}
setter_timing="on_change"
orientation="vertical"
valueLabelDisplay={z_variable_display}
valueLabelDisplayLocation="left"
@@ -345,7 +347,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.x_rotation.step}
min={ui_configs.x_rotation.min}
max={ui_configs.x_rotation.max}
onchangeFunction={(value) => onchangeFunction("x_rotation", -value)}
setterFunction={(value) => onchangeFunction("x_rotation", -value)}
setter_timing="on_change"
orientation="vertical"
valueLabelDisplay={x_variable_display}
valueLabelDisplayLocation="right"
@@ -371,7 +374,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.y_rotation.step}
min={ui_configs.y_rotation.min}
max={ui_configs.y_rotation.max}
onchangeFunction={(value) => onchangeFunction("y_rotation", value)}
setterFunction={(value) => onchangeFunction("y_rotation", value)}
setter_timing="on_change"
valueLabelDisplay={y_variable_display}
valueLabelDisplayLocation="top"
/>
@@ -396,7 +400,8 @@ export const RotationControls = ({ settings, onchangeFunction, selectFunction, u
step={ui_configs.z_rotation.step}
min={ui_configs.z_rotation.min}
max={ui_configs.z_rotation.max}
onchangeFunction={(value) => onchangeFunction("z_rotation", value)}
setterFunction={(value) => onchangeFunction("z_rotation", value)}
setter_timing="on_change"
orientation="vertical"
valueLabelDisplay={z_variable_display}
valueLabelDisplayLocation="left"
@@ -464,7 +469,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
step={5}
min={10}
max={100}
onchangeFunction={(value) => onchangeFunction("opacity", value / 100)}
setterFunction={(value) => onchangeFunction("opacity", value / 100)}
setter_timing="on_change"
/>
</div>
<div className={styles.other_controls_wrapper}>
@@ -479,7 +485,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
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)}
setterFunction={(value) => onchangeFunction("ui_scaling", value / 100)}
setter_timing="on_change"
/>
</div>
<div className={styles.other_controls_wrapper}>
@@ -492,7 +499,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
step={1}
min={1}
max={60}
onchangeFunction={(value) => onchangeFunction("display_duration", value)}
setterFunction={(value) => onchangeFunction("display_duration", value)}
setter_timing="on_change"
/>
</div>
<div className={styles.other_controls_wrapper}>
@@ -505,7 +513,8 @@ const OtherControls = ({settings, onchangeFunction, ui_configs}) => {
step={1}
min={0}
max={5}
onchangeFunction={(value) => onchangeFunction("fadeout_duration", value)}
setterFunction={(value) => onchangeFunction("fadeout_duration", value)}
setter_timing="on_change"
/>
</div>
</div>