From 8f68555570518e06958b201d8b2c1c198798b0b3 Mon Sep 17 00:00:00 2001 From: Takusea Date: Mon, 16 Dec 2024 21:56:49 +0900 Subject: [PATCH 01/18] =?UTF-8?q?BaseSlider=E3=82=B3=E3=83=B3=E3=83=9D?= =?UTF-8?q?=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Base/BaseSlider.stories.ts | 33 +++++++++ src/components/Base/BaseSlider.vue | 90 +++++++++++++++++++++++ 2 files changed, 123 insertions(+) create mode 100644 src/components/Base/BaseSlider.stories.ts create mode 100644 src/components/Base/BaseSlider.vue diff --git a/src/components/Base/BaseSlider.stories.ts b/src/components/Base/BaseSlider.stories.ts new file mode 100644 index 0000000000..58c1e7fd0f --- /dev/null +++ b/src/components/Base/BaseSlider.stories.ts @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from "@storybook/vue3"; + +import { ref } from "vue"; +import BaseSlider from "./BaseSlider.vue"; + +const meta: Meta = { + component: BaseSlider, + args: { + modelValue: 50, + min: 0, + max: 100, + step: 1, + }, + render: (args) => ({ + components: { BaseSlider }, + setup() { + const model = ref(Number(args.modelValue)); + return { args, model }; + }, + template: ``, + }), +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Disabled: Story = { + args: { + disabled: true, + }, +}; diff --git a/src/components/Base/BaseSlider.vue b/src/components/Base/BaseSlider.vue new file mode 100644 index 0000000000..0e3efe4be8 --- /dev/null +++ b/src/components/Base/BaseSlider.vue @@ -0,0 +1,90 @@ + + + + + From df2da0b164821575b3854d592ba353bb7f89bd50 Mon Sep 17 00:00:00 2001 From: Takusea Date: Mon, 16 Dec 2024 22:17:02 +0900 Subject: [PATCH 02/18] =?UTF-8?q?focus=E6=99=82=E3=81=AEoutline=E3=81=AE?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=82=92=E5=A4=96=E5=81=B4=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/v2/mixin.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/v2/mixin.scss b/src/styles/v2/mixin.scss index e547874fa0..7c92fcb95f 100644 --- a/src/styles/v2/mixin.scss +++ b/src/styles/v2/mixin.scss @@ -2,6 +2,7 @@ @mixin on-focus { outline-color: #a5d4ad; outline-width: 2px; + outline-offset: 2px; } // 見出し1(h1)用のスタイル From 7a397fb36d6748d8eb73ad508c7d63209057ed5e Mon Sep 17 00:00:00 2001 From: Takusea Date: Mon, 16 Dec 2024 22:46:23 +0900 Subject: [PATCH 03/18] =?UTF-8?q?=E3=83=97=E3=83=AA=E3=82=BB=E3=83=83?= =?UTF-8?q?=E3=83=88=E7=AE=A1=E7=90=86=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?= =?UTF-8?q?=E3=82=B0=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/PresetManageDialog.vue | 343 ++++++++++++++++--- 1 file changed, 302 insertions(+), 41 deletions(-) diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue index 7b93606357..2aef0a4eb5 100644 --- a/src/components/Dialog/PresetManageDialog.vue +++ b/src/components/Dialog/PresetManageDialog.vue @@ -1,41 +1,141 @@ @@ -43,9 +143,15 @@ import { computed, ref } from "vue"; import Draggable from "vuedraggable"; import { useStore } from "@/store"; - +import BaseListItem from "@/components/Base/BaseListItem.vue"; +import BaseNavigationView from "@/components/Base/BaseNavigationView.vue"; +import BaseScrollArea from "@/components/Base/BaseScrollArea.vue"; +import BaseIconButton from "@/components/Base/BaseIconButton.vue"; +import BaseSlider from "@/components/Base/BaseSlider.vue"; +import CharacterButton from "@/components/CharacterButton.vue"; import { useDefaultPreset } from "@/composables/useDefaultPreset"; import { Preset, PresetKey } from "@/type/preload"; +import { SLIDER_PARAMETERS } from "@/store/utility"; const props = defineProps<{ openDialog: boolean; @@ -87,6 +193,71 @@ const previewPresetList = computed(() => : presetList.value, ); +const morphingTargetEngines = store.getters.MORPHING_SUPPORTED_ENGINES; + +const selectedPresetKey = ref(); +const selectedPreset = computed(() => { + return previewPresetList.value.find( + (preset) => preset.key === selectedPresetKey.value, + ); +}); + +const parameterConfigs = [ + { + label: "話速", + parameterKey: "speedScale", + sliderKey: "SPEED", + }, + { + label: "音高", + parameterKey: "pitchScale", + sliderKey: "PITCH", + }, + { + label: "抑揚", + parameterKey: "intonationScale", + sliderKey: "INTONATION", + }, + { + label: "音量", + parameterKey: "volumeScale", + sliderKey: "VOLUME", + }, + { + label: "開始無音", + parameterKey: "prePhonemeLength", + sliderKey: "PRE_PHONEME_LENGTH", + }, + { + label: "終了無音", + parameterKey: "postPhonemeLength", + sliderKey: "POST_PHONEME_LENGTH", + }, +]; + +const getParameterConfig = (sliderKey: string) => { + return parameterConfigs.find((config) => config.sliderKey === sliderKey); +}; + +const getParameterValue = (sliderKey: string) => { + if (!selectedPreset.value) { + return; + } + + const parameters = Object.entries(selectedPreset.value); + const parameter = parameters.find( + (preset) => preset[0] === getParameterConfig(sliderKey)?.parameterKey, + ); + + const parameterValue = Number(parameter?.[1]); + + if (Number.isNaN(parameterValue)) { + return; + } + + return parameterValue; +}; + const reorderPreset = (featurePresetList: (Preset & { key: PresetKey })[]) => { const newPresetKeys = featurePresetList.map((item) => item.key); previewPresetKeys.value = newPresetKeys; @@ -115,11 +286,101 @@ const deletePreset = async (key: PresetKey) => { }); } }; + +const morphingTargetCharacterInfo = computed(() => + store.getters + .USER_ORDERED_CHARACTER_INFOS("talk") + ?.find( + (character) => + character.metas.speakerUuid === + selectedPreset.value?.morphingInfo?.targetSpeakerId, + ), +); + +const morphingTargetStyleInfo = computed(() => { + const morphingInfo = selectedPreset.value?.morphingInfo; + + if (!morphingInfo) return; + + return morphingTargetCharacterInfo.value?.metas.styles.find( + (style) => + style.engineId === morphingInfo.targetEngineId && + style.styleId === morphingInfo.targetStyleId, + ); +}); From 703ddebeb05f246506e0af4fdf7868c279d2aebd Mon Sep 17 00:00:00 2001 From: Takusea Date: Tue, 17 Dec 2024 00:07:44 +0900 Subject: [PATCH 04/18] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?= =?UTF-8?q?=E3=81=8C=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=BF?= =?UTF-8?q?=E3=82=A4=E3=83=9F=E3=83=B3=E3=82=B0=E3=82=92=E9=81=B8=E6=8A=9E?= =?UTF-8?q?=E6=99=82=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/PresetManageDialog.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue index 2aef0a4eb5..dd75b0956f 100644 --- a/src/components/Dialog/PresetManageDialog.vue +++ b/src/components/Dialog/PresetManageDialog.vue @@ -339,7 +339,7 @@ const morphingTargetStyleInfo = computed(() => { visibility: hidden; } -:focus-within > * > .listitem-icon, +.selected > * > .listitem-icon, :hover > * > .listitem-icon { visibility: visible; } From e164799746ea14e46721c1805c9bfb12355ec20e Mon Sep 17 00:00:00 2001 From: Takusea Date: Fri, 20 Dec 2024 22:38:39 +0900 Subject: [PATCH 05/18] =?UTF-8?q?=E5=9E=8B=E3=82=A8=E3=83=A9=E3=83=BC?= =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Base/BaseSlider.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/Base/BaseSlider.vue b/src/components/Base/BaseSlider.vue index 0e3efe4be8..9dcfe4af55 100644 --- a/src/components/Base/BaseSlider.vue +++ b/src/components/Base/BaseSlider.vue @@ -6,7 +6,9 @@ :step :disabled :modelValue="[model]" - @update:modelValue="(value) => $emit('update:modelValue', value[0])" + @update:modelValue=" + (value) => value != undefined && $emit('update:modelValue', value[0]) + " > @@ -23,6 +25,11 @@ defineProps<{ max?: number; step?: number; disabled?: boolean; + modelValue: number; +}>(); + +defineEmits<{ + "update:modelValue": [value: number]; }>(); const model = defineModel({ required: true }); From 92a3175fe7fa019967686ca4b84512a6aa4aab09 Mon Sep 17 00:00:00 2001 From: Takusea Date: Fri, 20 Dec 2024 23:15:34 +0900 Subject: [PATCH 06/18] =?UTF-8?q?BaseListItem=E3=81=8C=E5=B9=85=E3=81=84?= =?UTF-8?q?=E3=81=A3=E3=81=B1=E3=81=84=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=95?= =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/PresetManageDialog.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Dialog/PresetManageDialog.vue b/src/components/Dialog/PresetManageDialog.vue index dd75b0956f..e89ab44843 100644 --- a/src/components/Dialog/PresetManageDialog.vue +++ b/src/components/Dialog/PresetManageDialog.vue @@ -30,6 +30,7 @@