Add: トラック毎の書き出しを追加

src/components/Dialog/HotkeyRecordingDialog.vue

@@ -82,7 +82,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineProps, defineEmits } from "vue";
+import { computed } from "vue";
 import { HotkeyCombination } from "@/type/preload";
 
 const props = defineProps<{

src/components/Dialog/SettingDialog/DialogCell.vue

@@ -0,0 +1,33 @@
+<!-- 編集ダイアログが開く設定項目 -->
+
+<template>
+  <BaseCell :title :description>
+    <div class="q-px-sm text-ellipsis">
+      {{ props.currentValue }}
+    </div>
+    <QBtn
+      :label="props.label || '編集する'"
+      unelevated
+      color="background"
+      textColor="display"
+      class="text-no-wrap q-mr-sm"
+      @click="emit('click')"
+    />
+  </BaseCell>
+</template>
+
+<script setup lang="ts">
+import BaseCell, { Props as BaseCellProps } from "./BaseCell.vue";
+
+const props = defineProps<
+  BaseCellProps & {
+    currentValue: string;
+    label?: string;
+    disable?: boolean;
+  }
+>();
+
+const emit = defineEmits<{
+  click: [];
+}>();
+</script>

src/components/Dialog/SettingDialog/FileNamePatternDialog.vue

@@ -8,7 +8,7 @@
       <QCardSection>
         <div class="text-h5">書き出しファイル名パターン</div>
         <div class="text-body2 text-grey-8">
-          「$キャラ$」のようなタグを使って書き出すファイル名をカスタマイズできます
+          「$キャラ$」のようなタグを使って書き出すファイル名をカスタマイズできます。
         </div>
       </QCardSection>
       <QCardActions class="setting-card q-px-md q-py-sm">
@@ -39,7 +39,7 @@
           </div>
         </div>
         <div class="text-body2 text-ellipsis">
-          出力例）{{ previewFileName }}
+          出力例：{{ previewFileName }}
         </div>
         <div class="row full-width q-my-md">
           <QBtn
@@ -78,16 +78,13 @@
 <script setup lang="ts">
 import { computed, ref, nextTick } from "vue";
 import { QInput } from "quasar";
-import { useStore } from "@/store";
-import {
-  buildAudioFileNameFromRawData,
-  DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE,
-  replaceTagIdToTagString,
-  sanitizeFileName,
-} from "@/store/utility";
+import { replaceTagIdToTagString, sanitizeFileName } from "@/store/utility";
 
 const props = defineProps<{
   openDialog: boolean;
+  defaultTemplate: string;
+  availableTags: (keyof typeof replaceTagIdToTagString)[];
+  buildFileName: (pattern: string) => string;
 }>();
 
 const emit = defineEmits<{
@@ -96,15 +93,18 @@ const emit = defineEmits<{
 
 const updateOpenDialog = (isOpen: boolean) => emit("update:openDialog", isOpen);
 
-const store = useStore();
+const fileNamePattern = defineModel<string>("fileNamePattern", {
+  type: String,
+  default: "",
+});
 const patternInput = ref<QInput>();
 const maxLength = 128;
-const tagStrings = Object.values(replaceTagIdToTagString);
-
-const savingSetting = computed(() => store.state.savingSetting);
+const tagStrings = computed(() =>
+  props.availableTags.map((tag) => replaceTagIdToTagString[tag]),
+);
 
 const savedBaseNamePattern = computed(() => {
-  return savingSetting.value.fileNamePattern.replace(/\.wav$/, "");
+  return fileNamePattern.value.replace(/\.wav$/, "");
 });
 const currentBaseNamePattern = ref(savedBaseNamePattern.value);
 const currentNamePattern = computed(
@@ -140,18 +140,18 @@ const errorMessage = computed(() => {
 const hasError = computed(() => errorMessage.value !== "");
 
 const previewFileName = computed(() =>
-  buildAudioFileNameFromRawData(currentNamePattern.value),
+  props.buildFileName(currentNamePattern.value),
 );
 
 const initializeInput = () => {
   currentBaseNamePattern.value = savedBaseNamePattern.value;
 
   if (currentBaseNamePattern.value === "") {
-    currentBaseNamePattern.value = DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE;
+    currentBaseNamePattern.value = props.defaultTemplate;
   }
 };
 const resetToDefault = () => {
-  currentBaseNamePattern.value = DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE;
+  currentBaseNamePattern.value = props.defaultTemplate;
   patternInput.value?.focus();
 };
 
@@ -179,12 +179,11 @@ const insertTagToCurrentPosition = (tag: string) => {
 };
 
 const submit = async () => {
-  await store.dispatch("SET_SAVING_SETTING", {
-    data: {
-      ...savingSetting.value,
-      fileNamePattern: currentNamePattern.value,
-    },
-  });
+  if (hasError.value) {
+    return;
+  }
+
+  fileNamePattern.value = currentNamePattern.value;
   updateOpenDialog(false);
 };
 </script>

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -298,39 +298,44 @@
               </QCardActions>
 
               <FileNamePatternDialog
-                v-model:open-dialog="showsFilePatternEditDialog"
+                v-model:open-dialog="showAudioFilePatternEditDialog"
+                v-model:fileNamePattern="audioFileNamePattern"
+                :defaultTemplate="DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE"
+                :availableTags="[
+                  'index',
+                  'characterName',
+                  'styleName',
+                  'text',
+                  'date',
+                  'projectName',
+                ]"
+                :buildFileName="buildAudioFileNameFromRawData"
+                @complete="handleSavingSettingChange('fileNamePattern', $event)"
+              />
+              <FileNamePatternDialog
+                v-model:open-dialog="showSongTrackAudioFilePatternEditDialog"
+                v-model:fileNamePattern="songTrackFileNamePattern"
+                :defaultTemplate="DEFAULT_SONG_AUDIO_FILE_BASE_NAME_TEMPLATE"
+                :availableTags="[
+                  'index',
+                  'characterName',
+                  'styleName',
+                  'trackName',
+                  'date',
+                  'projectName',
+                ]"
+                :buildFileName="buildSongTrackAudioFileNameFromRawData"
+                @complete="
+                  handleSavingSettingChange('songTrackFileNamePattern', $event)
+                "
               />
 
-              <QCardActions class="q-px-md bg-surface">
-                <div>書き出しファイル名パターン</div>
-                <div
-                  aria-label="書き出す際のファイル名のパターンをカスタマイズできます。"
-                >
-                  <QIcon name="help_outline" size="sm" class="help-hover-icon">
-                    <QTooltip
-                      :delay="500"
-                      anchor="center right"
-                      self="center left"
-                      transitionShow="jump-right"
-                      transitionHide="jump-left"
-                    >
-                      書き出す際のファイル名のパターンをカスタマイズできます。
-                    </QTooltip>
-                  </QIcon>
-                </div>
-                <QSpace />
-                <div class="q-px-sm text-ellipsis">
-                  {{ savingSetting.fileNamePattern }}
-                </div>
-                <QBtn
-                  label="編集する"
-                  unelevated
-                  color="background"
-                  textColor="display"
-                  class="text-no-wrap q-mr-sm"
-                  @click="showsFilePatternEditDialog = true"
-                />
-              </QCardActions>
+              <DialogCell
+                title="書き出しファイル名パターン"
+                description="書き出す際のファイル名のパターンをカスタマイズできます。"
+                :currentValue="savingSetting.fileNamePattern"
+                @click="showAudioFilePatternEditDialog = true"
+              />
 
               <ToggleCell
                 title="上書き防止"
@@ -368,6 +373,18 @@
                   handleSavingSettingChange('exportLab', $event)
                 "
               />
+
+              <QSlideTransition>
+                <!-- q-slide-transitionはheightだけをアニメーションするのでdivで囲う -->
+                <div v-show="experimentalSetting.enableMultiTrack">
+                  <DialogCell
+                    title="ソング：トラックファイル名パターン"
+                    description="書き出す際のファイル名のパターンをカスタマイズできます。"
+                    :currentValue="savingSetting.songTrackFileNamePattern"
+                    @click="showSongTrackAudioFilePatternEditDialog = true"
+                  />
+                </div>
+              </QSlideTransition>
             </QCard>
             <!-- Theme Card -->
             <QCard flat class="setting-card">
@@ -554,7 +571,14 @@ import FileNamePatternDialog from "./FileNamePatternDialog.vue";
 import ToggleCell from "./ToggleCell.vue";
 import ButtonToggleCell from "./ButtonToggleCell.vue";
 import BaseCell from "./BaseCell.vue";
+import DialogCell from "./DialogCell.vue";
 import { useStore } from "@/store";
+import {
+  DEFAULT_AUDIO_FILE_BASE_NAME_TEMPLATE,
+  DEFAULT_SONG_AUDIO_FILE_BASE_NAME_TEMPLATE,
+  buildAudioFileNameFromRawData,
+  buildSongTrackAudioFileNameFromRawData,
+} from "@/store/utility";
 import {
   isProduction,
   SavingSetting,
@@ -801,6 +825,22 @@ const engineUseGpuOptions = [
   { label: "GPU", value: true },
 ];
 
+const audioFileNamePattern = computed({
+  get: () => store.state.savingSetting.fileNamePattern,
+  set: (fileNamePattern: string) => {
+    handleSavingSettingChange("fileNamePattern", fileNamePattern);
+  },
+});
+const songTrackFileNamePattern = computed({
+  get: () => store.state.savingSetting.songTrackFileNamePattern,
+  set: (songTrackFileNamePattern: string) => {
+    handleSavingSettingChange(
+      "songTrackFileNamePattern",
+      songTrackFileNamePattern,
+    );
+  },
+});
+
 const gpuSwitchEnabled = (engineId: EngineId) => {
   // CPU版でもGPUモードからCPUモードに変更できるようにする
   return store.getters.ENGINE_CAN_USE_GPU(engineId) || engineUseGpu.value;
@@ -893,7 +933,8 @@ watchEffect(async () => {
 const [splitTextWhenPaste, changeSplitTextWhenPaste] =
   useRootMiscSetting("splitTextWhenPaste");
 
-const showsFilePatternEditDialog = ref(false);
+const showAudioFilePatternEditDialog = ref(false);
+const showSongTrackAudioFilePatternEditDialog = ref(false);
 
 const selectedEngineIdRaw = ref<EngineId | undefined>(undefined);
 const selectedEngineId = computed({

src/components/Sing/menuBarData.ts

@@ -30,25 +30,42 @@ export const useMenuBarData = () => {
     await store.dispatch("EXPORT_WAVE_FILE", {});
   };
 
-  const fileSubMenuData = computed<MenuItemData[]>(() => [
-    {
-      type: "button",
-      label: "音声を出力",
-      onClick: () => {
-        void exportWaveFile();
-      },
-      disableWhenUiLocked: true,
-    },
-    { type: "separator" },
-    {
-      type: "button",
-      label: "インポート",
-      onClick: () => {
-        void importExternalSongProject();
-      },
-      disableWhenUiLocked: true,
-    },
-  ]);
+  const exportStemWaveFile = async () => {
+    if (uiLocked.value) return;
+    await store.dispatch("EXPORT_STEM_WAVE_FILE", {});
+  };
+
+  const fileSubMenuData = computed<MenuItemData[]>(() =>
+    (
+      [
+        {
+          type: "button",
+          label: "音声を出力",
+          onClick: () => {
+            void exportWaveFile();
+          },
+          disableWhenUiLocked: true,
+        },
+        store.state.experimentalSetting.enableMultiTrack && {
+          type: "button",
+          label: "トラックごとに音声を出力",
+          onClick: () => {
+            void exportStemWaveFile();
+          },
+          disableWhenUiLocked: true,
+        },
+        { type: "separator" },
+        {
+          type: "button",
+          label: "インポート",
+          onClick: () => {
+            void importExternalSongProject();
+          },
+          disableWhenUiLocked: true,
+        },
+      ] satisfies (MenuItemData | false)[]
+    ).filter((item) => !!item),
+  );
 
   const editSubMenuData = computed<MenuItemData[]>(() => [
     { type: "separator" },

src/store/setting.ts

@@ -26,6 +26,7 @@ export const settingStoreState: SettingStoreState = {
     exportText: false,
     outputStereo: false,
     audioOutputDevice: "default",
+    songTrackFileNamePattern: "",
   },
   hotkeySettings: [],
   toolbarSetting: [],