Skip to content

Commit

Permalink
script setup: デフォルトスタイルのダイアログを移行 (#1175)
Browse files Browse the repository at this point in the history 
* Migrate: デフォルトスタイルのダイアログを移行

* Delete: 未使用変数を削除
  • Loading branch information
@sevenc-nanashi
sevenc-nanashi authored Feb 5, 2023
1 parent 4d3e408 commit 668a182
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 242 deletions.
223 changes: 93 additions & 130 deletions src/components/DefaultStyleListDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,150 +96,113 @@
</q-dialog>
</template>

<script lang="ts">
import { defineComponent, computed, ref, PropType, watch } from "vue";
<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useStore } from "@/store";
import { CharacterInfo, StyleInfo } from "@/type/preload";
import DefaultStyleSelectDialog from "@/components/DefaultStyleSelectDialog.vue";
export default defineComponent({
name: "DefaultStyleListDialog",
const props =
defineProps<{
modelValue: boolean;
characterInfos: CharacterInfo[];
}>();
const emit =
defineEmits<{
(e: "update:modelValue", val: boolean): void;
}>();
components: {
DefaultStyleSelectDialog,
},
const store = useStore();
props: {
modelValue: {
type: Boolean,
required: true,
},
characterInfos: {
type: Object as PropType<CharacterInfo[]>,
required: true,
},
},
setup(props, { emit }) {
const store = useStore();
const modelValueComputed = computed({
get: () => props.modelValue,
set: (val) => emit("update:modelValue", val),
});
// 選択中のキャラクター
const selectedCharacter = ref(props.characterInfos[0].metas.speakerUuid);
const selectCharacter = (speakerUuid: string) => {
selectedCharacter.value = speakerUuid;
};
const showStyleSelectDialog = ref<boolean>(false);
const selectedCharacterInfo = computed(() => {
return props.characterInfos.find(
(characterInfo) =>
characterInfo.metas.speakerUuid === selectedCharacter.value
);
});
const modelValueComputed = computed({
get: () => props.modelValue,
set: (val) => emit("update:modelValue", val),
});
const characterInfosMap = computed(() => {
const map: { [key: string]: CharacterInfo } = {};
props.characterInfos.forEach((characterInfo) => {
map[characterInfo.metas.speakerUuid] = characterInfo;
});
return map;
});
// 選択中のキャラクター
const selectedCharacter = ref(props.characterInfos[0].metas.speakerUuid);
// サンプルボイス一覧のキャラクター順番
const speakerWithMultipleStyles = ref<CharacterInfo[]>([]);
const showStyleSelectDialog = ref<boolean>(false);
const selectedCharacterInfo = computed(() => {
return props.characterInfos.find(
(characterInfo) =>
characterInfo.metas.speakerUuid === selectedCharacter.value
);
});
// 選択中のスタイル
const selectedStyleIndexes = ref<Record<string, number>>({});
const selectedStyles = computed(() => {
const map: { [key: string]: StyleInfo } = {};
props.characterInfos.forEach((characterInfo) => {
const selectedStyleIndex: number | undefined =
selectedStyleIndexes.value[characterInfo.metas.speakerUuid];
map[characterInfo.metas.speakerUuid] =
characterInfo.metas.styles[selectedStyleIndex ?? 0];
});
return map;
});
const characterInfosMap = computed(() => {
const map: { [key: string]: CharacterInfo } = {};
props.characterInfos.forEach((characterInfo) => {
map[characterInfo.metas.speakerUuid] = characterInfo;
});
return map;
});
// キャラクター表示順序
const characterOrder = ref<CharacterInfo[]>([]);
// サンプルボイス一覧のキャラクター順番
const speakerWithMultipleStyles = ref<CharacterInfo[]>([]);
// ダイアログが開かれたときに初期値を求める
watch([() => props.modelValue], async ([newValue]) => {
if (newValue) {
speakerWithMultipleStyles.value = store.state.userCharacterOrder
.map((speakerUuid) => characterInfosMap.value[speakerUuid])
.filter((characterInfo) => characterInfo !== undefined)
.filter(
(characterInfo) => characterInfo.metas.styles.length > 1
) as CharacterInfo[];
selectedStyleIndexes.value = Object.fromEntries([
...store.state.userCharacterOrder.map((speakerUuid) => [
speakerUuid,
0,
]),
...store.state.defaultStyleIds.map((defaultStyle) => [
defaultStyle.speakerUuid,
characterInfosMap.value[
defaultStyle.speakerUuid
]?.metas.styles.findIndex(
(style) => style.styleId === defaultStyle.defaultStyleId
) ?? 0,
]),
]);
}
});
// 選択中のスタイル
const selectedStyleIndexes = ref<Record<string, number>>({});
const selectedStyles = computed(() => {
const map: { [key: string]: StyleInfo } = {};
props.characterInfos.forEach((characterInfo) => {
const selectedStyleIndex: number | undefined =
selectedStyleIndexes.value[characterInfo.metas.speakerUuid];
map[characterInfo.metas.speakerUuid] =
characterInfo.metas.styles[selectedStyleIndex ?? 0];
});
return map;
});
// キャラクター枠のホバー状態を表示するかどうか
// 再生ボタンなどにカーソルがある場合はキャラクター枠のホバーUIを表示しないようにするため
const isHoverableItem = ref(true);
// ダイアログが開かれたときに初期値を求める
watch([() => props.modelValue], async ([newValue]) => {
if (newValue) {
speakerWithMultipleStyles.value = store.state.userCharacterOrder
.map((speakerUuid) => characterInfosMap.value[speakerUuid])
.filter((characterInfo) => characterInfo !== undefined)
.filter(
(characterInfo) => characterInfo.metas.styles.length > 1
) as CharacterInfo[];
selectedStyleIndexes.value = Object.fromEntries([
...store.state.userCharacterOrder.map((speakerUuid) => [speakerUuid, 0]),
...store.state.defaultStyleIds.map((defaultStyle) => [
defaultStyle.speakerUuid,
characterInfosMap.value[
defaultStyle.speakerUuid
]?.metas.styles.findIndex(
(style) => style.styleId === defaultStyle.defaultStyleId
) ?? 0,
]),
]);
}
});
const closeDialog = () => {
store.dispatch(
"SET_DEFAULT_STYLE_IDS",
Object.entries(selectedStyleIndexes.value).map(
([speakerUuid, styleIndex]) => ({
speakerUuid,
defaultStyleId:
characterInfosMap.value[speakerUuid].metas.styles[styleIndex]
.styleId,
engineId:
characterInfosMap.value[speakerUuid].metas.styles[styleIndex]
.engineId,
})
)
);
stop();
modelValueComputed.value = false;
};
const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
stop();
selectedCharacter.value = characterInfo.metas.speakerUuid;
showStyleSelectDialog.value = true;
};
// キャラクター枠のホバー状態を表示するかどうか
// 再生ボタンなどにカーソルがある場合はキャラクター枠のホバーUIを表示しないようにするため
const isHoverableItem = ref(true);
return {
modelValueComputed,
characterInfosMap,
showStyleSelectDialog,
selectedCharacterInfo,
speakerWithMultipleStyles,
selectedStyleIndexes,
selectedStyles,
selectedCharacter,
selectCharacter,
characterOrder,
isHoverableItem,
closeDialog,
openStyleSelectDialog,
};
},
});
const closeDialog = () => {
store.dispatch(
"SET_DEFAULT_STYLE_IDS",
Object.entries(selectedStyleIndexes.value).map(
([speakerUuid, styleIndex]) => ({
speakerUuid,
defaultStyleId:
characterInfosMap.value[speakerUuid].metas.styles[styleIndex].styleId,
engineId:
characterInfosMap.value[speakerUuid].metas.styles[styleIndex]
.engineId,
})
)
);
stop();
modelValueComputed.value = false;
};
const openStyleSelectDialog = (characterInfo: CharacterInfo) => {
stop();
selectedCharacter.value = characterInfo.metas.speakerUuid;
showStyleSelectDialog.value = true;
};
</script>

<style scoped lang="scss">
Expand Down
Loading

0 comments on commit 668a182

Please sign in to comment.