Merge branch 'ui_refactor' into develop
This commit is contained in:
Sakamoto Shiina
@@ -9,6 +9,6 @@
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./src-ui/app/index.jsx"></script>
|
||||
<script type="module" src="./src-ui/views/app/index.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,7 +17,7 @@ import {
|
||||
|
||||
useAdvancedSettings,
|
||||
} from "@logics_configs";
|
||||
import { ui_configs } from "../ui_configs";
|
||||
import { ui_configs } from "./ui_configs";
|
||||
|
||||
export const _useBackendErrorHandling = () => {
|
||||
const { t } = useI18n();
|
||||
|
||||
@@ -595,7 +595,7 @@ const buildCategoryApiFromSettings = (settings, settingsArray, Category, extraFu
|
||||
return { ...api, ...extraFunctions };
|
||||
};
|
||||
|
||||
const createCategoryHook = (Category) => {
|
||||
export const createCategoryHook = (Category) => {
|
||||
return () => {
|
||||
const { settings } = useSettingsLogics(SETTINGS_ARRAY, Category);
|
||||
const extraFunctions = useConfigFunctions(Category);
|
||||
@@ -603,32 +603,3 @@ const createCategoryHook = (Category) => {
|
||||
return { ...autoApi };
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
// --- 自動エクスポート: SETTINGS_ARRAY に含まれるユニークな Category ごとに use<Category> を作って export ---
|
||||
// 例: Category === "Appearance" -> export const useAppearance = createCategoryHook("Appearance");
|
||||
|
||||
// const uniqueCategories = Array.from(new Set(SETTINGS_ARRAY.map((s) => s.Category)));
|
||||
|
||||
// 動的に named export を作る（静的解析を壊さないために明示的に定義）
|
||||
/* eslint-disable import/prefer-default-export */
|
||||
export const useAppearance = createCategoryHook("Appearance");
|
||||
export const useDevice = createCategoryHook("Device");
|
||||
export const useTranslation = createCategoryHook("Translation");
|
||||
export const useTranscription = createCategoryHook("Transcription");
|
||||
export const useVr = createCategoryHook("Vr");
|
||||
export const useOthers = createCategoryHook("Others");
|
||||
// export const useHotkeys = createCategoryHook("Hotkeys");
|
||||
export const useAdvancedSettings = createCategoryHook("AdvancedSettings");
|
||||
// If you later add other categories, you can either manually add:
|
||||
// export const useDevice = createCategoryHook("Device");
|
||||
// or uncomment the code below to auto-attach to module.exports (less ideal for tree-shaking).
|
||||
//
|
||||
// Auto-attach (not recommended for tree-shaking in bundlers):
|
||||
// uniqueCategories.forEach((Category) => {
|
||||
// const hookName = `use${Category}`;
|
||||
// module.exports[hookName] = createCategoryHook(Category);
|
||||
// });
|
||||
|
||||
/* eslint-enable import/prefer-default-export */
|
||||
@@ -201,3 +201,102 @@ export const useConfigFunctions = (Category) => {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from "react";
|
||||
|
||||
export const useSliderLogic = ({
|
||||
variable,
|
||||
setterFunction,
|
||||
postUpdateAction,
|
||||
min,
|
||||
max,
|
||||
step = 1,
|
||||
show_label_values = null,
|
||||
marks_step,
|
||||
setter_timing = "on_change_committed",
|
||||
}) => {
|
||||
if (marks_step === undefined) {
|
||||
marks_step = step;
|
||||
}
|
||||
|
||||
const [ui_value, setUiValue] = useState(variable);
|
||||
|
||||
const decimalPlaces = marks_step.toString().includes('.')
|
||||
? marks_step.toString().split('.')[1].length
|
||||
: 0;
|
||||
|
||||
const labelFormatter = useCallback((value) => {
|
||||
if (show_label_values && show_label_values.length > 0) {
|
||||
return show_label_values.includes(value) ? value : "";
|
||||
}
|
||||
|
||||
return value.toFixed(decimalPlaces);
|
||||
}, [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, show_label_values]);
|
||||
|
||||
let onchangeFunction;
|
||||
let onchangeCommittedFunction;
|
||||
|
||||
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 (variable !== ui_value) {
|
||||
setUiValue(variable);
|
||||
}
|
||||
if (postUpdateAction) {
|
||||
postUpdateAction();
|
||||
}
|
||||
}, [variable]);
|
||||
|
||||
return {
|
||||
ui_value,
|
||||
onchangeFunction,
|
||||
onchangeCommittedFunction,
|
||||
marks,
|
||||
};
|
||||
};
|
||||
|
||||
const createMarks = (min, max, marks_step = 1, labelFormatter = (value) => value) => {
|
||||
const marks = [];
|
||||
let variable = min;
|
||||
|
||||
for (let i = 0; variable <= max; i++) {
|
||||
const fixedValue = parseFloat(variable.toFixed(10));
|
||||
|
||||
marks.push({ value: fixedValue, label: `${labelFormatter(fixedValue)}` });
|
||||
|
||||
variable += marks_step;
|
||||
variable = parseFloat(variable.toFixed(10));
|
||||
|
||||
if (i > 1000) {
|
||||
console.error("Loop limit exceeded (1000 iterations). createMarks()");
|
||||
break;
|
||||
}
|
||||
}
|
||||
return marks;
|
||||
};
|
||||
@@ -1,25 +1,21 @@
|
||||
// export { useDevice } from "./device/useDevice";
|
||||
// export { useAppearance } from "./appearance/useAppearance";
|
||||
import { createCategoryHook } from "./config_page_setter/ui_config_setter.js";
|
||||
|
||||
export const useAppearance = createCategoryHook("Appearance");
|
||||
export const useDevice = createCategoryHook("Device");
|
||||
export const useTranslation = createCategoryHook("Translation");
|
||||
export const useTranscription = createCategoryHook("Transcription");
|
||||
export const useVr = createCategoryHook("Vr");
|
||||
export const useOthers = createCategoryHook("Others");
|
||||
export const useAdvancedSettings = createCategoryHook("AdvancedSettings");
|
||||
|
||||
// Exceptional exports that are not part of SETTINGS_ARRAY or have custom logic.
|
||||
export { useHotkeys } from "./config_page_setter/hotkeys/useHotkeys.js";
|
||||
export { useSupporters } from "./config_page_setter/supporters/useSupporters.js";
|
||||
export { usePlugins } from "./config_page_setter/plugins/usePlugins.js";
|
||||
|
||||
export { useSettingBoxScrollPosition } from "./config_page_setter/_aux/useSettingBoxScrollPosition.js";
|
||||
|
||||
|
||||
export {
|
||||
useAppearance,
|
||||
useDevice,
|
||||
useOthers,
|
||||
useTranscription,
|
||||
useTranslation,
|
||||
useVr,
|
||||
// useHotkeys,
|
||||
useAdvancedSettings,
|
||||
} from "../../ui_config_setter.js";
|
||||
|
||||
// export { useOthers } from "./others/useOthers";
|
||||
// export { useTranscription } from "./transcription/useTranscription";
|
||||
// export { useTranslation } from "./translation/useTranslation";
|
||||
// export { useVr } from "./vr/useVr";
|
||||
export { useHotkeys } from "./hotkeys/useHotkeys";
|
||||
// export { useAdvancedSettings } from "./advanced_settings/useAdvancedSettings";
|
||||
|
||||
export { useSupporters } from "./supporters/useSupporters";
|
||||
export { usePlugins } from "./plugins/usePlugins";
|
||||
|
||||
export { useSettingBoxScrollPosition } from "./useSettingBoxScrollPosition";
|
||||
useSliderLogic,
|
||||
} from "./config_page_setter/useSettingsLogics.js";
|
||||
@@ -2,7 +2,7 @@ import * as common from "@logics_common";
|
||||
import * as main from "@logics_main";
|
||||
import * as configs from "@logics_configs";
|
||||
import { _useBackendErrorHandling } from "./_useBackendErrorHandling";
|
||||
import { SETTINGS_ARRAY } from "../ui_config_setter";
|
||||
import { SETTINGS_ARRAY } from "./configs/config_page_setter/ui_config_setter";
|
||||
|
||||
export const STATIC_ROUTE_META_LIST = [
|
||||
// Common
|
||||
|
||||
@@ -3,8 +3,27 @@ import styles from "./Slider.module.scss";
|
||||
import MUI_Slider from "@mui/material/Slider";
|
||||
import clsx from "clsx";
|
||||
|
||||
import { useSliderLogic } from "@logics_configs";
|
||||
|
||||
export const Slider = (props) => {
|
||||
const location = props.valueLabelDisplayLocation || "top";
|
||||
const {
|
||||
ui_value,
|
||||
onchangeFunction,
|
||||
onchangeCommittedFunction,
|
||||
marks
|
||||
} = useSliderLogic({
|
||||
variable: props.variable,
|
||||
setterFunction: props.setterFunction,
|
||||
setter_timing: props.setter_timing,
|
||||
postUpdateAction: props.postUpdateAction,
|
||||
min: props.min,
|
||||
max: props.max,
|
||||
step: props.step,
|
||||
show_label_values: props.show_label_values,
|
||||
marks_step: props.marks_step,
|
||||
});
|
||||
|
||||
|
||||
const sliderSx = {
|
||||
color: "var(--dark_700_color)",
|
||||
@@ -86,13 +105,13 @@ export const Slider = (props) => {
|
||||
aria-label="Default"
|
||||
// valueLabelDisplay="on"
|
||||
valueLabelDisplay={props.valueLabelDisplay ? props.valueLabelDisplay : "auto"}
|
||||
value={props.variable}
|
||||
step={props.step}
|
||||
value={ui_value}
|
||||
step={props.step == null ? null : Number(props.step)}
|
||||
min={Number(props.min)}
|
||||
max={Number(props.max)}
|
||||
onChange={(_e, value) => props.onchangeFunction(value)}
|
||||
onChange={(_e, value) => onchangeFunction(value)}
|
||||
onChangeCommitted={(_e, value) =>
|
||||
props.onchangeCommittedFunction ? props.onchangeCommittedFunction(value) : null
|
||||
onchangeCommittedFunction ? onchangeCommittedFunction(value) : null
|
||||
}
|
||||
onMouseEnter={(event) =>
|
||||
props.onMouseEnterFunction ? props.onMouseEnterFunction(event) : null
|
||||
@@ -100,10 +119,10 @@ export const Slider = (props) => {
|
||||
onMouseLeave={(event) =>
|
||||
props.onMouseLeaveFunction ? props.onMouseLeaveFunction(event) : null
|
||||
}
|
||||
marks={props.marks}
|
||||
track={props.track}
|
||||
marks={marks}
|
||||
track={props.track === undefined ? false : props.track}
|
||||
orientation={props.orientation}
|
||||
valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : props.variable}`}
|
||||
valueLabelFormat={`${props.valueLabelFormat ? props.valueLabelFormat : ui_value}`}
|
||||
sx={sliderSx}
|
||||
/>
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@ import {
|
||||
WordFilterListToggleComponent,
|
||||
DownloadModels,
|
||||
MessageFormat,
|
||||
} from "../_components/";
|
||||
} from "../_components";
|
||||
import { Checkbox } from "@common_components";
|
||||
|
||||
const LabeledContainer = ({ children, label, desc, custom_class_name }) => (
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
|
||||
import {
|
||||
SectionLabelComponent,
|
||||
} from "../_components/";
|
||||
} from "../_components";
|
||||
|
||||
import OpenFolderSvg from "@images/open_folder.svg?react";
|
||||
import HelpSvg from "@images/help.svg?react";
|
||||
@@ -56,42 +56,16 @@ const UiScalingContainer = () => {
|
||||
const { currentUiScaling, setUiScaling } = useAppearance();
|
||||
const { asyncUpdateBreakPoint } = useWindow();
|
||||
|
||||
const [ui_ui_scaling, setUiUiScaling] = useState(currentUiScaling.data);
|
||||
|
||||
const onchangeFunction = (value) => {
|
||||
setUiUiScaling(value);
|
||||
};
|
||||
const onchangeCommittedFunction = (value) => {
|
||||
setUiScaling(value);
|
||||
};
|
||||
useEffect(() => {
|
||||
setUiUiScaling(currentUiScaling.data);
|
||||
asyncUpdateBreakPoint();
|
||||
}, [currentUiScaling.data]);
|
||||
|
||||
// [Duplicated]
|
||||
const createMarks = (min, max) => {
|
||||
const marks = [];
|
||||
for (let value = min; value <= max; value += 10) {
|
||||
const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
|
||||
marks.push({ value, label: `${label}` });
|
||||
}
|
||||
return marks;
|
||||
};
|
||||
|
||||
const marks = createMarks(40, 200);
|
||||
|
||||
return (
|
||||
<SliderContainer
|
||||
label={t("config_page.appearance.ui_size.label") + " (%)"}
|
||||
min="40"
|
||||
max="200"
|
||||
onchangeCommittedFunction={onchangeCommittedFunction}
|
||||
onchangeFunction={onchangeFunction}
|
||||
variable={ui_ui_scaling}
|
||||
marks={marks}
|
||||
step={null}
|
||||
track={false}
|
||||
variable={currentUiScaling.data}
|
||||
setterFunction={setUiScaling}
|
||||
postUpdateAction={asyncUpdateBreakPoint}
|
||||
min={40}
|
||||
max={200}
|
||||
step={10}
|
||||
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -100,41 +74,16 @@ const UiScalingContainer = () => {
|
||||
export const MessageLogUiScalingContainer = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentMessageLogUiScaling, setMessageLogUiScaling } = useAppearance();
|
||||
const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data);
|
||||
|
||||
const onchangeFunction = (value) => {
|
||||
setUiMessageLogUiScaling(value);
|
||||
};
|
||||
const onchangeCommittedFunction = (value) => {
|
||||
setMessageLogUiScaling(value);
|
||||
};
|
||||
useEffect(() => {
|
||||
setUiMessageLogUiScaling(currentMessageLogUiScaling.data);
|
||||
}, [currentMessageLogUiScaling.data]);
|
||||
|
||||
// [Duplicated]
|
||||
const createMarks = (min, max) => {
|
||||
const marks = [];
|
||||
for (let value = min; value <= max; value += 10) {
|
||||
const label = ([50,70,90,110,130,150,170,190].includes(value)) ? "" : value;
|
||||
marks.push({ value, label: `${label}` });
|
||||
}
|
||||
return marks;
|
||||
};
|
||||
|
||||
const marks = createMarks(40, 200);
|
||||
|
||||
return (
|
||||
<SliderContainer
|
||||
label={t("config_page.appearance.textbox_ui_size.label") + " (%)"}
|
||||
min="40"
|
||||
max="200"
|
||||
onchangeCommittedFunction={onchangeCommittedFunction}
|
||||
onchangeFunction={onchangeFunction}
|
||||
variable={ui_message_log_ui_scaling}
|
||||
marks={marks}
|
||||
step={null}
|
||||
track={false}
|
||||
variable={currentMessageLogUiScaling.data}
|
||||
setterFunction={setMessageLogUiScaling}
|
||||
min={40}
|
||||
max={200}
|
||||
step={10}
|
||||
show_label_values={[40, 60, 80, 100, 120, 140, 160, 180, 200]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -197,40 +146,15 @@ const FontFamilyContainer = () => {
|
||||
const TransparencyContainer = () => {
|
||||
const { t } = useI18n();
|
||||
const { currentTransparency, setTransparency } = useAppearance();
|
||||
const [ui_message_log_ui_scaling, setUiTransparency] = useState(currentTransparency.data);
|
||||
|
||||
const onchangeFunction = (value) => {
|
||||
setUiTransparency(value);
|
||||
};
|
||||
const onchangeCommittedFunction = (value) => {
|
||||
setTransparency(value);
|
||||
};
|
||||
useEffect(() => {
|
||||
setUiTransparency(currentTransparency.data);
|
||||
}, [currentTransparency.data]);
|
||||
|
||||
// [Duplicated]
|
||||
const createMarks = (min, max) => {
|
||||
const marks = [];
|
||||
for (let value = min; value <= max; value += 10) {
|
||||
marks.push({ value, label: `${value}` });
|
||||
}
|
||||
return marks;
|
||||
};
|
||||
|
||||
const marks = createMarks(40, 100);
|
||||
|
||||
return (
|
||||
<SliderContainer
|
||||
label={t("config_page.appearance.transparency.label") + " (%)"}
|
||||
min="40"
|
||||
max="100"
|
||||
onchangeCommittedFunction={onchangeCommittedFunction}
|
||||
onchangeFunction={onchangeFunction}
|
||||
variable={ui_message_log_ui_scaling}
|
||||
marks={marks}
|
||||
step={null}
|
||||
track={false}
|
||||
variable={currentTransparency.data}
|
||||
setterFunction={setTransparency}
|
||||
min={40}
|
||||
max={100}
|
||||
step={10}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
DropdownMenu,
|
||||
ThresholdComponent,
|
||||
SwitchBox,
|
||||
} from "../_components/";
|
||||
} from "../_components";
|
||||
|
||||
export const Device = () => {
|
||||
return (
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user