singer周りの整理

sigprogramming · Oct 27, 2023 · a122a58 · a122a58
1 parent 3a218a7
commit a122a58
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 64 deletions.
diff --git a/src/components/Sing/CharacterMenuButton.vue b/src/components/Sing/CharacterMenuButton.vue
@@ -185,7 +185,7 @@ export default defineComponent({
           `No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`
         );
 
-      store.dispatch("SET_SINGER", { engineId, styleId });
+      store.dispatch("SET_SINGER", { singer: { engineId, styleId } });
     };
 
     const getDefaultStyle = (speakerUuid: string) => {
@@ -210,13 +210,12 @@ export default defineComponent({
     const selectedCharacterInfo = computed(() => {
       if (
         userOrderedCharacterInfos.value === undefined ||
-        store.state.engineId === undefined ||
-        store.state.styleId === undefined
+        store.state.singer === undefined
       )
         return undefined;
       return store.getters.CHARACTER_INFO(
-        store.state.engineId,
-        store.state.styleId
+        store.state.singer.engineId,
+        store.state.singer.styleId
       );
     });
 
@@ -228,8 +227,8 @@ export default defineComponent({
       () =>
         selectedCharacterInfo.value?.metas.styles.find(
           (style) =>
-            style.styleId === store.state.styleId &&
-            style.engineId === store.state.engineId
+            style.styleId === store.state.singer?.styleId &&
+            style.engineId === store.state.singer?.engineId
         )?.styleId
     );
 

diff --git a/src/components/Sing/SingerPanel.vue b/src/components/Sing/SingerPanel.vue
@@ -31,16 +31,18 @@ export default defineComponent({
     );
 
     const characterInfo = computed(() => {
-      const engineId = store.state.engineId;
-      const styleId = store.state.styleId;
-      if (userOrderedCharacterInfos.value === undefined) return undefined;
-      if (engineId === undefined || styleId === undefined) return undefined;
-      return store.getters.CHARACTER_INFO(engineId, styleId);
+      if (!userOrderedCharacterInfos.value || !store.state.singer) {
+        return undefined;
+      }
+      return store.getters.CHARACTER_INFO(
+        store.state.singer.engineId,
+        store.state.singer.styleId
+      );
     });
 
     const characterName = computed(() => {
       const style = characterInfo.value?.metas.styles.find(
-        (style) => style.styleId === store.state.styleId
+        (style) => style.styleId === store.state.singer?.styleId
       );
       return style?.styleName
         ? `${characterInfo.value?.metas.speakerName} (${style?.styleName})`

diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
@@ -110,24 +110,24 @@ export default defineComponent({
     const userOrderedCharacterInfos = computed(
       () => store.getters.USER_ORDERED_CHARACTER_INFOS
     );
-    const selectedCharacterInfo = computed(() =>
-      userOrderedCharacterInfos.value !== undefined &&
-      store.state.engineId !== undefined &&
-      store.state.styleId !== undefined
-        ? store.getters.CHARACTER_INFO(
-            store.state.engineId,
-            store.state.styleId
-          )
-        : undefined
-    );
-    const selectedStyleIconPath = computed(
-      () =>
-        selectedCharacterInfo.value?.metas.styles.find(
-          (style) =>
-            style.styleId === store.state.styleId &&
-            style.engineId === store.state.engineId
-        )?.iconPath
-    );
+    const selectedCharacterInfo = computed(() => {
+      if (!userOrderedCharacterInfos.value || !store.state.singer) {
+        return undefined;
+      }
+      return store.getters.CHARACTER_INFO(
+        store.state.singer.engineId,
+        store.state.singer.styleId
+      );
+    });
+    const selectedStyleIconPath = computed(() => {
+      const styles = selectedCharacterInfo.value?.metas.styles;
+      return styles?.find((style) => {
+        return (
+          style.styleId === store.state.singer?.styleId &&
+          style.engineId === store.state.singer?.engineId
+        );
+      })?.iconPath;
+    });
 
     const bpmInputBuffer = ref(0);
     const beatsInputBuffer = ref(0);
@@ -211,7 +211,7 @@ export default defineComponent({
       await store.dispatch("SET_TEMPO", {
         tempo: {
           position: 0,
-          bpm: bpm,
+          bpm,
         },
       });
     };
@@ -223,8 +223,8 @@ export default defineComponent({
       await store.dispatch("SET_TIME_SIGNATURE", {
         timeSignature: {
           measureNumber: 1,
-          beats: beats,
-          beatType: beatType,
+          beats,
+          beatType,
         },
       });
     };

diff --git a/src/store/singing.ts b/src/store/singing.ts
@@ -9,6 +9,7 @@ import {
   SingingStoreState,
   SingingStoreTypes,
   SaveResultObject,
+  Singer,
 } from "./type";
 import { createPartialStore } from "./vuex";
 import { createUILockAction } from "./ui";
@@ -27,7 +28,6 @@ import {
   Sequence,
   Transport,
 } from "@/infrastructures/AudioRenderer";
-import { EngineId, StyleId } from "@/type/preload";
 import {
   BEAT_TYPES,
   DEFAULT_BEATS,
@@ -143,6 +143,16 @@ const copyScore = (score: Score): Score => {
   };
 };
 
+const copySinger = (singer?: Singer): Singer | undefined => {
+  if (!singer) {
+    return undefined;
+  }
+  return {
+    engineId: singer.engineId,
+    styleId: singer.styleId,
+  };
+};
+
 const _generateHash = async <T>(obj: T) => {
   const textEncoder = new TextEncoder();
   const data = textEncoder.encode(JSON.stringify(obj));
@@ -167,11 +177,6 @@ const createPromiseThatResolvesWhen = (
   });
 };
 
-type Singer = {
-  readonly engineId: EngineId;
-  readonly styleId: StyleId;
-};
-
 type Phrase = {
   readonly singer: Singer | undefined;
   readonly score: Score;
@@ -291,8 +296,7 @@ const allPhrases = new Map<string, Phrase>();
 const phraseAudioBlobCache = new Map<string, Blob>();
 
 export const singingStoreState: SingingStoreState = {
-  engineId: undefined,
-  styleId: undefined,
+  singer: undefined,
   score: {
     tpqn: DEFAULT_TPQN,
     tempos: [
@@ -341,25 +345,24 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
   },
 
   SET_SINGER: {
-    mutation(
-      state,
-      { engineId, styleId }: { engineId: EngineId; styleId: StyleId }
-    ) {
-      state.engineId = engineId;
-      state.styleId = styleId;
+    mutation(state, { singer }: { singer?: Singer }) {
+      state.singer = singer;
     },
-    async action({ state, getters, dispatch, commit }, payload) {
+    async action(
+      { state, getters, dispatch, commit },
+      { singer }: { singer?: Singer }
+    ) {
       if (state.defaultStyleIds == undefined)
         throw new Error("state.defaultStyleIds == undefined");
       if (getters.USER_ORDERED_CHARACTER_INFOS == undefined)
         throw new Error("state.characterInfos == undefined");
       const userOrderedCharacterInfos = getters.USER_ORDERED_CHARACTER_INFOS;
 
-      const engineId = payload.engineId ?? state.engineIds[0];
+      const engineId = singer?.engineId ?? state.engineIds[0];
 
       // FIXME: engineIdも含めて探査する
       const styleId =
-        payload.styleId ??
+        singer?.styleId ??
         state.defaultStyleIds[
           state.defaultStyleIds.findIndex(
             (x) =>
@@ -380,7 +383,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
           });
         }
       } finally {
-        commit("SET_SINGER", { engineId, styleId });
+        commit("SET_SINGER", { singer: { engineId, styleId } });
 
         dispatch("RENDER");
       }
@@ -1077,13 +1080,6 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
         return blob;
       };
 
-      const getSinger = (): Singer | undefined => {
-        if (state.engineId === undefined || state.styleId === undefined) {
-          return undefined;
-        }
-        return { engineId: state.engineId, styleId: state.styleId };
-      };
-
       // NOTE: 型推論でawaitの前か後かが考慮されないので、関数を介して取得する（型がbooleanになるようにする）
       const startRenderingRequested = () => state.startRenderingRequested;
       const stopRenderingRequested = () => state.stopRenderingRequested;
@@ -1100,7 +1096,7 @@ export const singingStore = createPartialStore<SingingStoreTypes>({
 
         // レンダリング中に変更される可能性のあるデータをコピーする
         const score = copyScore(state.score);
-        const singer = getSinger();
+        const singer = copySinger(state.singer);
 
         preProcess(score);
 

diff --git a/src/store/type.ts b/src/store/type.ts
@@ -740,9 +740,13 @@ export type Score = {
   notes: Note[];
 };
 
+export type Singer = {
+  engineId: EngineId;
+  styleId: StyleId;
+};
+
 export type SingingStoreState = {
-  engineId?: EngineId;
-  styleId?: StyleId;
+  singer?: Singer;
   score: Score;
   // NOTE: UIの状態などは分割・統合した方がよさそうだが、ボイス側と混在させないためいったん局所化する
   isShowSinger: boolean;
@@ -770,8 +774,8 @@ export type SingingStoreTypes = {
   };
 
   SET_SINGER: {
-    mutation: { engineId: EngineId; styleId: StyleId };
-    action(payload: { engineId?: EngineId; styleId?: StyleId }): void;
+    mutation: { singer?: Singer };
+    action(payload: { singer?: Singer }): void;
   };
 
   SET_SCORE: {