Skip to content

Commit

Permalink
[ソング] script setup構文に移行 (#1789)
Browse files Browse the repository at this point in the history 
* Migrate: SingerHomeを移行

* Delete: 不要なimportを削除

* Migrate: SequenserKeysを移行

* Migrate: CharacterPortraitを移行

* Migrate: Sing/ToolVarを移行

* Migrate: ScoreSequenserを移行

* Migrate: SequencerNoteを移行

* Migrate: SequencerRulerを移行

* Migrate: Sing/CharacterMenuButtonを移行

* Migrate: SequencerPhraseIndicatorを移行

* Delete: 消し忘れを削除

* Delete: zoomXを削除

* いくつかワーニング出ていたので解消

---------

Co-authored-by: Hiroshiba <[email protected]>
  • Loading branch information
@sevenc-nanashi @Hiroshiba
sevenc-nanashi and Hiroshiba authored Jan 29, 2024
1 parent 8497fea commit 23fe259
Show file tree
Hide file tree
Showing 9 changed files with 1,471 additions and 1,675 deletions.
179 changes: 78 additions & 101 deletions src/components/Sing/CharacterMenuButton.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,128 +134,105 @@
</q-btn>
</template>

<script lang="ts">
import { defineComponent, computed, ref } from "vue";
<script setup lang="ts">
import { computed, ref } from "vue";
import { debounce } from "quasar";
import { useStore } from "@/store";
import { base64ImageToUri } from "@/helpers/imageHelper";
import { SpeakerId, StyleId } from "@/type/preload";
import { getStyleDescription } from "@/sing/viewHelper";
export default defineComponent({
name: "CharacterMenuButton",
const store = useStore();
setup() {
const store = useStore();
const userOrderedCharacterInfos = computed(() => {
return store.getters.USER_ORDERED_CHARACTER_INFOS("singerLike");
});
const subMenuOpenFlags = ref(
[...Array(userOrderedCharacterInfos.value?.length)].map(() => false)
);
const userOrderedCharacterInfos = computed(() => {
return store.getters.USER_ORDERED_CHARACTER_INFOS("singerLike");
});
const reassignSubMenuOpen = debounce((idx: number) => {
if (subMenuOpenFlags.value[idx]) return;
const arr = [...Array(userOrderedCharacterInfos.value?.length)].map(
() => false
);
arr[idx] = true;
subMenuOpenFlags.value = arr;
}, 100);
const subMenuOpenFlags = ref(
[...Array(userOrderedCharacterInfos.value?.length)].map(() => false)
);
const changeStyleId = (speakerUuid: SpeakerId, styleId: StyleId) => {
const engineId = store.state.engineIds.find((_engineId) =>
(store.state.characterInfos[_engineId] ?? []).some(
(characterInfo) =>
characterInfo.metas.speakerUuid === speakerUuid &&
characterInfo.metas.styles.some(
(style) => style.styleId === styleId
)
)
);
if (engineId == undefined)
throw new Error(
`No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`
);
const reassignSubMenuOpen = debounce((idx: number) => {
if (subMenuOpenFlags.value[idx]) return;
const arr = [...Array(userOrderedCharacterInfos.value?.length)].map(
() => false
);
arr[idx] = true;
subMenuOpenFlags.value = arr;
}, 100);
store.dispatch("SET_SINGER", { singer: { engineId, styleId } });
};
const changeStyleId = (speakerUuid: SpeakerId, styleId: StyleId) => {
const engineId = store.state.engineIds.find((_engineId) =>
(store.state.characterInfos[_engineId] ?? []).some(
(characterInfo) =>
characterInfo.metas.speakerUuid === speakerUuid &&
characterInfo.metas.styles.some((style) => style.styleId === styleId)
)
);
if (engineId == undefined)
throw new Error(
`No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`
);
const getDefaultStyle = (speakerUuid: string) => {
// FIXME: 同一キャラが複数エンジンにまたがっているとき、順番が先のエンジンが必ず選択される
const characterInfo = userOrderedCharacterInfos.value?.find(
(info) => info.metas.speakerUuid === speakerUuid
);
store.dispatch("SET_SINGER", { singer: { engineId, styleId } });
};
// ここで取得されるcharacterInfoには、ソングエディタ向けのスタイルのみ含まれるので、
// その中の最初のスタイルをソングエディタにおける仮のデフォルトスタイルとする
// TODO: ソングエディタ向けのデフォルトスタイルをどうするか考える
const defaultStyleId = characterInfo?.metas.styles[0].styleId;
const getDefaultStyle = (speakerUuid: string) => {
// FIXME: 同一キャラが複数エンジンにまたがっているとき、順番が先のエンジンが必ず選択される
const characterInfo = userOrderedCharacterInfos.value?.find(
(info) => info.metas.speakerUuid === speakerUuid
);
const defaultStyle = characterInfo?.metas.styles.find(
(style) => style.styleId === defaultStyleId
);
// ここで取得されるcharacterInfoには、ソングエディタ向けのスタイルのみ含まれるので、
// その中の最初のスタイルをソングエディタにおける仮のデフォルトスタイルとする
// TODO: ソングエディタ向けのデフォルトスタイルをどうするか考える
const defaultStyleId = characterInfo?.metas.styles[0].styleId;
if (defaultStyle == undefined)
throw new Error("defaultStyle == undefined");
const defaultStyle = characterInfo?.metas.styles.find(
(style) => style.styleId === defaultStyleId
);
return defaultStyle;
};
if (defaultStyle == undefined) throw new Error("defaultStyle == undefined");
const selectedCharacterInfo = computed(() => {
if (
userOrderedCharacterInfos.value == undefined ||
store.state.singer == undefined
)
return undefined;
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
return defaultStyle;
};
const selectedSpeakerUuid = computed(() => {
return selectedCharacterInfo.value?.metas.speakerUuid;
});
const selectedCharacterInfo = computed(() => {
if (
userOrderedCharacterInfos.value == undefined ||
store.state.singer == undefined
)
return undefined;
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
const selectedStyleId = computed(
() =>
selectedCharacterInfo.value?.metas.styles.find(
(style) =>
style.styleId === store.state.singer?.styleId &&
style.engineId === store.state.singer?.engineId
)?.styleId
);
const selectedSpeakerUuid = computed(() => {
return selectedCharacterInfo.value?.metas.speakerUuid;
});
// 複数エンジン
const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
const selectedStyleId = computed(
() =>
selectedCharacterInfo.value?.metas.styles.find(
(style) =>
style.styleId === store.state.singer?.styleId &&
style.engineId === store.state.singer?.engineId
)?.styleId
);
const engineIcons = computed(() =>
Object.fromEntries(
store.state.engineIds.map((engineId) => [
engineId,
base64ImageToUri(store.state.engineManifests[engineId].icon),
])
)
);
// 複数エンジン
const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
return {
userOrderedCharacterInfos,
subMenuOpenFlags,
reassignSubMenuOpen,
changeStyleId,
getDefaultStyle,
getStyleDescription,
selectedCharacterInfo,
selectedSpeakerUuid,
selectedStyleId,
isMultipleEngine,
engineIcons,
};
},
});
const engineIcons = computed(() =>
Object.fromEntries(
store.state.engineIds.map((engineId) => [
engineId,
base64ImageToUri(store.state.engineManifests[engineId].icon),
])
)
);
</script>

<style scoped lang="scss">
Expand Down
50 changes: 19 additions & 31 deletions src/components/Sing/CharacterPortrait.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,28 @@
</div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "@/store";
export default defineComponent({
name: "CharacterPortrait",
setup() {
const store = useStore();
const isShowSinger = computed(() => store.state.isShowSinger);
const userOrderedCharacterInfos = computed(() =>
store.getters.USER_ORDERED_CHARACTER_INFOS("all")
);
const characterInfo = computed(() => {
if (!userOrderedCharacterInfos.value || !store.state.singer) {
return undefined;
}
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
const portraitPath = computed(() => characterInfo.value?.portraitPath);
return {
isShowSinger,
userOrderedCharacterInfos,
characterInfo,
portraitPath,
};
},
const store = useStore();
const isShowSinger = computed(() => store.state.isShowSinger);
const userOrderedCharacterInfos = computed(() =>
store.getters.USER_ORDERED_CHARACTER_INFOS("all")
);
const characterInfo = computed(() => {
if (!userOrderedCharacterInfos.value || !store.state.singer) {
return undefined;
}
return store.getters.CHARACTER_INFO(
store.state.singer.engineId,
store.state.singer.styleId
);
});
const portraitPath = computed(() => characterInfo.value?.portraitPath);
</script>

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

0 comments on commit 23fe259

Please sign in to comment.