マルチトラック：mainにマージ (#2185)

## 内容


project-multitrackをmainにマージします。長く苦しい戦いだった（本当はまだ色々残ってるのでcloseじゃなくてrefにしてます）

## 関連 Issue

- ref: #1906 

## スクリーンショット・動画など

（なし）

## その他

#2184 が先です。

package.json

@@ -56,6 +56,7 @@
     "pixi.js": "7.4.0",
     "quasar": "2.11.6",
     "radix-vue": "1.2.3",
+    "rfdc": "1.4.1",
     "semver": "7.5.4",
     "shlex": "2.1.2",
     "systeminformation": "5.21.15",

src/components/Dialog/ImportSongProjectDialog.vue

@@ -1,14 +1,15 @@
 <template>
-  <QDialog ref="dialogRef" autoScroll @beforeShow="initializeValues">
-    <QLayout container view="hHh lpr fFf" class="q-dialog-plugin bg-background">
-      <QHeader>
-        <QToolbar>
-          <QToolbarTitle class="text-display">インポート</QToolbarTitle>
-        </QToolbar>
-      </QHeader>
-      <QPageContainer class="q-px-lg">
+  <QDialog ref="dialogRef" @beforeShow="initializeValues">
+    <QCard class="q-py-sm q-px-md dialog-card">
+      <QCardSection>
+        <div class="text-h5">インポート</div>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardSection class="q-py-none">
         <details class="q-pt-md">
-          <summary>対応しているプロジェクトファイル</summary>
+          <summary>対応しているファイル形式</summary>
           <ul>
             <li
               v-for="[name, extensions] in projectNameToExtensions"
@@ -25,46 +26,71 @@
           :accept="acceptExtensions"
           :errorMessage="projectFileErrorMessage"
           :error="!!projectFileErrorMessage"
-          placeholder="外部プロジェクトファイルを選択してください"
+          placeholder="ファイルを選択してください"
           @input="handleFileChange"
         />
-        <QSelect
-          v-if="project"
-          v-model="selectedTrack"
-          :options="trackOptions"
-          :disable="projectFileErrorMessage != undefined"
-          emitValue
-          mapOptions
-          label="インポートするトラック"
+      </QCardSection>
+      <QCardSection v-if="trackOptions.length > 0">
+        <QList bordered class="rounded-borders scroll scrollable-area">
+          <QItem
+            v-for="(track, index) in trackOptions"
+            :key="track.value"
+            tag="label"
+            :disable="track.disable"
+          >
+            <QItemSection avatar>
+              <QCheckbox
+                v-if="multiTrackEnabled"
+                v-model="selectedTrackIndexes"
+                :val="track.value"
+                :disable="track.disable"
+              />
+              <QRadio
+                v-else
+                v-model="selectedTrackIndex"
+                :val="track.value"
+                :disable="track.disable"
+              />
+            </QItemSection>
+            <QItemSection>
+              <QItemLabel>
+                {{ index + 1 }}：{{ track.name || DEFAULT_TRACK_NAME }}
+              </QItemLabel>
+              <QItemLabel caption>ノート数：{{ track.noteLength }}</QItemLabel>
+            </QItemSection>
+          </QItem>
+        </QList>
+      </QCardSection>
+
+      <QSeparator />
+
+      <QCardActions>
+        <QSpace />
+        <QBtn
+          unelevated
+          align="right"
+          label="キャンセル"
+          color="toolbar-button"
+          textColor="toolbar-button-display"
+          class="text-no-wrap text-bold q-mr-sm"
+          @click="handleCancel"
+        />
+        <QBtn
+          unelevated
+          align="right"
+          label="インポート"
+          color="toolbar-button"
+          textColor="toolbar-button-display"
+          class="text-no-wrap text-bold q-mr-sm"
+          :disabled="
+            selectedTrackIndexes == null ||
+            selectedTrackIndexes.length === 0 ||
+            projectFileErrorMessage != undefined
+          "
+          @click="handleImportTrack"
         />
-      </QPageContainer>
-      <QFooter>
-        <QToolbar>
-          <QSpace />
-          <QBtn
-            unelevated
-            align="right"
-            label="キャンセル"
-            color="toolbar-button"
-            textColor="toolbar-button-display"
-            class="text-no-wrap text-bold q-mr-sm"
-            @click="handleCancel"
-          />
-          <QBtn
-            unelevated
-            align="right"
-            label="インポート"
-            color="toolbar-button"
-            textColor="toolbar-button-display"
-            class="text-no-wrap text-bold q-mr-sm"
-            :disabled="
-              selectedTrack == null || projectFileErrorMessage != undefined
-            "
-            @click="handleImportTrack"
-          />
-        </QToolbar>
-      </QFooter>
-    </QLayout>
+      </QCardActions>
+    </QCard>
   </QDialog>
 </template>
 
@@ -84,12 +110,17 @@ import { createLogger } from "@/domain/frontend/log";
 import { ExhaustiveError } from "@/type/utility";
 import { IsEqual } from "@/type/utility";
 import { LatestProjectType } from "@/domain/project/schema";
+import { DEFAULT_TRACK_NAME } from "@/sing/domain";
 
 const { dialogRef, onDialogOK, onDialogCancel } = useDialogPluginComponent();
 
 const store = useStore();
 const log = createLogger("ImportExternalProjectDialog");
 
+const multiTrackEnabled = computed(
+  () => store.state.experimentalSetting.enableMultiTrack,
+);
+
 // 受け入れる拡張子
 const acceptExtensions = computed(
   () => supportedExtensions.map((ext) => `.${ext}`).join(",") + ",.vvproj",
@@ -180,15 +211,19 @@ const project = ref<Project | null>(null);
 
 // トラック
 function getProjectTracks(project: Project) {
-  function _track(name: string | undefined, noteLength: number) {
+  function toTrack(name: string | undefined, noteLength: number) {
     return { name, noteLength, disable: noteLength === 0 };
   }
   return project.type === "utaformatix"
     ? project.project.tracks.map((track) =>
-        _track(track.name, track.notes.length),
+        toTrack(track.name, track.notes.length),
       )
-    : project.project.song.tracks.map((track) =>
-        _track(undefined, track.notes.length),
+    : project.project.song.trackOrder.map((trackId) =>
+        toTrack(
+          // zodが何故かundefinedを入れてくるので、null-safe operatorを使う
+          project.project.song.tracks[trackId]?.name,
+          project.project.song.tracks[trackId]?.notes.length ?? 0,
+        ),
       );
 }
 
@@ -198,24 +233,39 @@ const trackOptions = computed(() => {
     return [];
   }
   // トラックリストを生成
-  // "トラックNo: トラック名 / ノート数" の形式で表示
   const tracks = getProjectTracks(project.value);
   return tracks.map((track, index) => ({
-    label: `${index + 1}: ${track?.name || "（トラック名なし）"} / ノート数：${
-      track.noteLength
-    }`,
+    name: track?.name,
+    noteLength: track.noteLength,
     value: index,
     disable: track.disable,
   }));
 });
 // 選択中のトラック
-const selectedTrack = ref<number | null>(null);
+const selectedTrackIndexes = ref<number[] | null>(null);
+const selectedTrackIndex = computed<number | null>({
+  get: () => {
+    if (selectedTrackIndexes.value == null) {
+      return null;
+    }
+    if (selectedTrackIndexes.value.length === 0) {
+      return null;
+    }
+    return selectedTrackIndexes.value[0];
+  },
+  set: (index: number | null) => {
+    if (index == null) {
+      throw new Error("assert: index != null");
+    }
+    selectedTrackIndexes.value = [index];
+  },
+});
 
 // データ初期化
 const initializeValues = () => {
   projectFile.value = null;
   project.value = null;
-  selectedTrack.value = null;
+  selectedTrackIndexes.value = null;
 };
 
 // ファイル変更時
@@ -233,7 +283,7 @@ const handleFileChange = async (event: Event) => {
 
   // 既存のデータおよび選択中のトラックをクリア
   project.value = null;
-  selectedTrack.value = null;
+  selectedTrackIndexes.value = null;
   error.value = null;
 
   const file = input.files[0];
@@ -256,12 +306,14 @@ const handleFileChange = async (event: Event) => {
         }),
       };
     }
-    selectedTrack.value = getProjectTracks(project.value).findIndex(
+    const firstSelectableTrack = getProjectTracks(project.value).findIndex(
       (track) => !track.disable,
     );
-    if (selectedTrack.value === -1) {
-      selectedTrack.value = 0;
+    if (firstSelectableTrack === -1) {
+      error.value = "emptyProject";
+      return;
     }
+    selectedTrackIndexes.value = [firstSelectableTrack];
   } catch (e) {
     log.error(e);
     error.value = "unknown";
@@ -278,19 +330,19 @@ const handleFileChange = async (event: Event) => {
 // トラックインポート実行時
 const handleImportTrack = () => {
   // ファイルまたは選択中のトラックが未設定の場合はエラー
-  if (project.value == null || selectedTrack.value == null) {
+  if (project.value == null || selectedTrackIndexes.value == null) {
     throw new Error("project or selected track is not set");
   }
   // トラックをインポート
   if (project.value.type === "vvproj") {
-    store.dispatch("IMPORT_VOICEVOX_PROJECT", {
+    store.dispatch("COMMAND_IMPORT_VOICEVOX_PROJECT", {
       project: project.value.project,
-      trackIndex: selectedTrack.value,
+      trackIndexes: selectedTrackIndexes.value,
     });
   } else {
-    store.dispatch("IMPORT_UTAFORMATIX_PROJECT", {
+    store.dispatch("COMMAND_IMPORT_UTAFORMATIX_PROJECT", {
       project: project.value.project,
-      trackIndex: selectedTrack.value,
+      trackIndexes: selectedTrackIndexes.value,
     });
   }
   onDialogOK();
@@ -303,11 +355,20 @@ const handleCancel = () => {
 </script>
 
 <style scoped lang="scss">
-// detailsタグのスタイル
 details {
   summary {
     display: list-item;
     cursor: pointer;
   }
 }
+
+.dialog-card {
+  width: 700px;
+  max-width: 80vw;
+}
+
+.scrollable-area {
+  overflow-y: auto;
+  max-height: calc(100vh - 100px - 295px);
+}
 </style>