モーフィング機能の制限に対応

src/components/AudioInfo.vue

@@ -441,7 +441,7 @@
         非対応エンジンです
       </div>
       <div
-        v-else-if="isValidMorphingInfo"
+        v-else-if="isInvalidMorphingInfo"
         class="text-warning"
         style="font-size: 0.7rem"
       >
@@ -663,24 +663,50 @@ export default defineComponent({
       () => supportedFeatures.value?.synthesisMorphing
     );
 
-    const isValidMorphingInfo = computed(() => {
+    const isInvalidMorphingInfo = computed(() => {
       if (audioItem.value.morphingInfo == undefined) return false;
       return !store.getters.VALID_MOPHING_INFO(audioItem.value);
     });
 
     const mophingTargetEngines = store.getters.MORPHING_SUPPORTED_ENGINES;
 
     const mophingTargetCharacters = computed(() => {
-      const allCharacters = store.getters.GET_ORDERED_ALL_CHARACTER_INFOS;
-      return allCharacters
-        .map((character) => {
+      // 選択可能なスタイルをフィルタリングする.
+      const baseEngineId = audioItem.value.engineId;
+      const baseStyleId = audioItem.value.styleId;
+      if (baseEngineId === undefined || baseStyleId == undefined) {
+        return [];
+      }
+      return [
+        /**
+         * isInvalidMorphingInfoのとき、mophingTargetCharactersにmorphingTargetVoiceの
+         * 値が存在しないことによってcharacter-button内で画像が描画出来ない問題を防ぐ
+         */
+        ...(isInvalidMorphingInfo.value && morphingTargetCharacterInfo.value
+          ? [morphingTargetCharacterInfo.value]
+          : []),
+        ...store.getters.GET_ORDERED_ALL_CHARACTER_INFOS.map((character) => {
           const targetStyles = character.metas.styles.filter((style) =>
-            mophingTargetEngines.includes(style.engineId)
+            store.getters.IS_A_VALID_MOPHING_PAIR(
+              {
+                engineId: baseEngineId,
+                styleId: baseStyleId,
+              },
+              {
+                engineId: style.engineId,
+                styleId: style.styleId,
+              }
+            )
           );
-          character.metas.styles = targetStyles;
-          return character;
-        })
-        .filter((characters) => characters.metas.styles.length >= 1);
+          return {
+            ...character,
+            metas: {
+              ...character.metas,
+              styles: targetStyles,
+            },
+          };
+        }).filter((characters) => characters.metas.styles.length >= 1),
+      ];
     });
 
     const morphingTargetVoice = computed({
@@ -711,7 +737,7 @@ export default defineComponent({
     });
 
     const morphingTargetCharacterInfo = computed(() =>
-      mophingTargetCharacters.value.find(
+      store.getters.GET_ORDERED_ALL_CHARACTER_INFOS.find(
         (character) =>
           character.metas.speakerUuid === morphingTargetVoice.value?.speakerId
       )
@@ -1140,7 +1166,7 @@ export default defineComponent({
       mophingTargetEngines,
       shouldShowMorphing,
       isSupportedMorphing,
-      isValidMorphingInfo,
+      isInvalidMorphingInfo,
       mophingTargetCharacters,
       morphingTargetVoice,
       morphingTargetCharacterInfo,