Skip to content

script setup: デフォルトスタイルのダイアログを移行 #1175

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 5, 2023
Merged

script setup: デフォルトスタイルのダイアログを移行 #1175

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1033e7
Migrate: デフォルトスタイルのダイアログを移行
sevenc-nanashi Feb 4, 2023
061958e
Delete: 未使用変数を削除
sevenc-nanashi Feb 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 93 additions & 130 deletions src/components/DefaultStyleListDialog.vue
View file
Open in desktop
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