マルチトラック：最終調整

src/components/Dialog/ImportSongProjectDialog.vue

@@ -40,10 +40,17 @@
           >
             <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>
@@ -110,6 +117,10 @@ 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",
@@ -232,6 +243,23 @@ const trackOptions = computed(() => {
 });
 // 選択中のトラック
 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 = () => {

src/components/Dialog/SettingDialog/SettingDialog.vue

@@ -230,6 +230,7 @@
                 </QBtn>
               </QCardActions>
               <BaseCell
+                v-if="experimentalSetting.enableMultiTrack"
                 title="ソング：元に戻す対象のトラックの設定"
                 description="トラックの設定のうち、「元に戻す」機能の対象にする設定を指定します。"
               >
@@ -524,6 +525,17 @@
                   )
                 "
               />
+              <ToggleCell
+                title="ソング：マルチトラック機能"
+                description="ONの場合、一つのプロジェクト内に複数のトラックを作成できるようになります。"
+                :modelValue="experimentalSetting.enableMultiTrack"
+                :disable="!canToggleMultiTrack"
+                @update:modelValue="setMultiTrack($event)"
+              >
+                <QTooltip v-if="!canToggleMultiTrack" :delay="500">
+                  現在のプロジェクトに複数のトラックが存在するため、無効化できません。
+                </QTooltip>
+              </ToggleCell>
             </QCard>
             <QCard flat class="setting-card">
               <QCardActions>
@@ -896,6 +908,23 @@ const selectedEngineId = computed({
 const renderEngineNameLabel = (engineId: EngineId) => {
   return engineInfos.value[engineId].name;
 };
+
+// トラックが複数あるときはマルチトラック機能を無効化できないようにする
+const canToggleMultiTrack = computed(() => {
+  if (!experimentalSetting.value.enableMultiTrack) {
+    return true;
+  }
+
+  return store.state.tracks.size <= 1;
+});
+
+const setMultiTrack = (enableMultiTrack: boolean) => {
+  changeExperimentalSetting("enableMultiTrack", enableMultiTrack);
+  // 無効化するときはUndo/Redoをクリアする
+  if (!enableMultiTrack) {
+    store.dispatch("CLEAR_UNDO_HISTORY");
+  }
+};
 </script>
 
 <style scoped lang="scss">

src/components/Dialog/SettingDialog/ToggleCell.vue

@@ -2,7 +2,11 @@
 
 <template>
   <BaseCell :title :description>
-    <QToggle :modelValue @update:modelValue="props['onUpdate:modelValue']">
+    <QToggle
+      :modelValue
+      :disable
+      @update:modelValue="props['onUpdate:modelValue']"
+    >
       <slot />
     </QToggle>
   </BaseCell>
@@ -16,6 +20,7 @@ const props = defineProps<
     modelValue: boolean;
     // eslint-disable-next-line vue/prop-name-casing
     "onUpdate:modelValue"?: (value: boolean) => void;
+    disable?: boolean;
   }
 >();
 </script>

src/components/Sing/ScoreSequencer.vue

@@ -102,10 +102,21 @@
         }"
       ></div>
       <SequencerPhraseIndicator
-        v-for="phraseInfo in phraseInfos"
+        v-for="phraseInfo in phraseInfosInOtherTracks"
         :key="phraseInfo.key"
         :phraseKey="phraseInfo.key"
-        :isInSelectedTrack="phraseInfo.trackId === selectedTrackId"
+        :isInSelectedTrack="false"
+        class="sequencer-phrase-indicator"
+        :style="{
+          width: `${phraseInfo.width}px`,
+          transform: `translateX(${phraseInfo.x - scrollX}px)`,
+        }"
+      />
+      <SequencerPhraseIndicator
+        v-for="phraseInfo in phraseInfosInSelectedTrack"
+        :key="phraseInfo.key"
+        :phraseKey="phraseInfo.key"
+        isInSelectedTrack
         class="sequencer-phrase-indicator"
         :style="{
           width: `${phraseInfo.width}px`,
@@ -204,7 +215,6 @@ import {
 import { applyGaussianFilter, linearInterpolation } from "@/sing/utility";
 import { useLyricInput } from "@/composables/useLyricInput";
 import { ExhaustiveError } from "@/type/utility";
-import { getOrThrow } from "@/helpers/mapHelper";
 
 type PreviewMode =
   | "ADD_NOTE"
@@ -236,7 +246,7 @@ const notesInOtherTracks = computed(() =>
   ),
 );
 const overlappingNoteIdsInSelectedTrack = computed(() =>
-  getOrThrow(store.state.overlappingNoteIds, selectedTrackId.value),
+  store.getters.OVERLAPPING_NOTE_IDS(selectedTrackId.value),
 );
 const selectedNotes = computed(() =>
   store.getters.SELECTED_TRACK.notes.filter((note) =>
@@ -336,6 +346,16 @@ const phraseInfos = computed(() => {
     return { key, x: startX, width: endX - startX, trackId };
   });
 });
+const phraseInfosInSelectedTrack = computed(() => {
+  return phraseInfos.value.filter(
+    (info) => info.trackId === selectedTrackId.value,
+  );
+});
+const phraseInfosInOtherTracks = computed(() => {
+  return phraseInfos.value.filter(
+    (info) => info.trackId !== selectedTrackId.value,
+  );
+});
 
 const ctrlKey = useCommandOrControlKey();
 const editTarget = computed(() => state.sequencerEditTarget);
@@ -1408,7 +1428,9 @@ registerHotkeyWithCleanup({
     if (nowPreviewing.value) {
       return;
     }
-    store.dispatch("SELECT_ALL_NOTES_IN_SELECTED_TRACK");
+    store.dispatch("SELECT_ALL_NOTES_IN_TRACK", {
+      trackId: selectedTrackId.value,
+    });
   },
 });
 
@@ -1451,7 +1473,9 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
       label: "すべて選択",
       onClick: async () => {
         contextMenu.value?.hide();
-        await store.dispatch("SELECT_ALL_NOTES_IN_SELECTED_TRACK");
+        await store.dispatch("SELECT_ALL_NOTES_IN_TRACK", {
+          trackId: selectedTrackId.value,
+        });
       },
       disableWhenUiLocked: true,
     },

src/components/Sing/SequencerPitch.vue

@@ -54,7 +54,7 @@ const pitchEditData = computed(() => {
   return store.getters.SELECTED_TRACK.pitchEditData;
 });
 const previewPitchEdit = computed(() => props.previewPitchEdit);
-const selectedTrackId = computed(() => store.state.selectedTrackId);
+const selectedTrackId = computed(() => store.getters.SELECTED_TRACK_ID);
 const editFrameRate = computed(() => store.state.editFrameRate);
 const singingGuidesInSelectedTrack = computed(() => {
   const singingGuides = [];

src/components/Sing/SideBar/TrackItem.vue

@@ -158,7 +158,6 @@ import { useStore } from "@/store";
 import ContextMenu from "@/components/Menu/ContextMenu.vue";
 import { shouldPlayTracks } from "@/sing/domain";
 import { CharacterInfo, StyleInfo, TrackId } from "@/type/preload";
-import { getOrThrow } from "@/helpers/mapHelper";
 
 const props = defineProps<{
   trackId: TrackId;
@@ -179,7 +178,7 @@ const isThereSoloTrack = computed(() =>
   [...tracks.value.values()].some((track) => track.solo),
 );
 const shouldPlayTrack = computed(() =>
-  getOrThrow(shouldPlayTracks(store.state.tracks), props.trackId),
+  shouldPlayTracks(store.state.tracks).has(props.trackId),
 );
 
 const setTrackPan = (pan: number) => {

src/components/Sing/SingEditor.vue

@@ -62,7 +62,11 @@ const props = defineProps<{
 
 const store = useStore();
 
-const isSidebarOpen = computed(() => store.state.isSongSidebarOpen);
+const isSidebarOpen = computed(
+  () =>
+    store.state.experimentalSetting.enableMultiTrack &&
+    store.state.isSongSidebarOpen,
+);
 const sidebarWidth = ref(300);
 
 const setSidebarWidth = (width: number) => {

src/components/Sing/ToolBar/ToolBar.vue

@@ -3,6 +3,7 @@
     <!-- configs for entire song -->
     <div class="sing-configs">
       <QBtn
+        v-if="multiTrackEnabled"
         class="q-mx-xs"
         :icon="isSidebarOpen ? 'menu_open' : 'menu'"
         round
@@ -168,6 +169,10 @@ const editor = "song";
 const canUndo = computed(() => store.getters.CAN_UNDO(editor));
 const canRedo = computed(() => store.getters.CAN_REDO(editor));
 
+const multiTrackEnabled = computed(
+  () => store.state.experimentalSetting.enableMultiTrack,
+);
+
 const { registerHotkeyWithCleanup } = useHotkeyManager();
 registerHotkeyWithCleanup({
   editor,

src/components/Sing/menuBarData.ts

@@ -78,7 +78,9 @@ export const useMenuBarData = () => {
       label: "すべて選択",
       onClick: () => {
         if (uiLocked.value) return;
-        store.dispatch("SELECT_ALL_NOTES_IN_SELECTED_TRACK");
+        store.dispatch("SELECT_ALL_NOTES_IN_TRACK", {
+          trackId: store.getters.SELECTED_TRACK_ID,
+        });
       },
       disableWhenUiLocked: true,
     },

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { createGtm } from "@gtm-support/vue-gtm";
 import { Quasar, Dialog, Loading, Notify } from "quasar";
 import iconSet from "quasar/icon-set/material-icons";
-import { store, watchStoreStatePlugin, storeKey } from "./store";
+import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
 import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
 import App from "@/components/App.vue";
@@ -18,7 +18,6 @@ window.dataLayer = [];
 
 createApp(App)
   .use(store, storeKey)
-  .use(watchStoreStatePlugin, { store })
   .use(
     createGtm({
       id: import.meta.env.VITE_GTM_CONTAINER_ID ?? "GTM-DUMMY",

src/sing/domain.ts

@@ -231,8 +231,8 @@ export function getNumMeasures(
   maxTicks = Math.max(maxTicks, lastTsPosition);
   maxTicks = Math.max(maxTicks, lastTempoPosition);
   if (notes.length > 0) {
-    const lastNote = notes[notes.length - 1];
-    const lastNoteEndPosition = lastNote.position + lastNote.duration;
+    const noteEndPositions = notes.map((note) => note.position + note.duration);
+    const lastNoteEndPosition = Math.max(...noteEndPositions);
     maxTicks = Math.max(maxTicks, lastNoteEndPosition);
   }
   return tickToMeasureNumber(maxTicks, timeSignatures, tpqn);
@@ -573,14 +573,11 @@ export const splitLyricsByMoras = (
  * ソロのトラックが存在する場合は、ソロのトラックのみ再生する。（ミュートは無視される）
  * ソロのトラックが存在しない場合は、ミュートされていないトラックを再生する。
  */
-export const shouldPlayTracks = (
-  tracks: Map<TrackId, Track>,
-): Map<TrackId, boolean> => {
+export const shouldPlayTracks = (tracks: Map<TrackId, Track>): Set<TrackId> => {
   const soloTrackExists = [...tracks.values()].some((track) => track.solo);
-  const shouldPlayMap = new Map<TrackId, boolean>();
-  for (const [trackKey, track] of tracks) {
-    shouldPlayMap.set(trackKey, soloTrackExists ? track.solo : !track.mute);
-  }
-
-  return shouldPlayMap;
+  return new Set(
+    [...tracks.entries()]
+      .filter(([, track]) => (soloTrackExists ? track.solo : !track.mute))
+      .map(([trackId]) => trackId),
+  );
 };

src/store/index.ts

@@ -1,4 +1,4 @@
-import { InjectionKey, Plugin } from "vue";
+import { InjectionKey } from "vue";
 import { createStore, Store, useStore as baseUseStore } from "./vuex";
 
 import {
@@ -23,7 +23,6 @@ import {
   singingStore,
   singingCommandStoreState,
   singingCommandStore,
-  singingStorePlugin,
 } from "./singing";
 import { projectStoreState, projectStore } from "./project";
 import { uiStoreState, uiStore } from "./ui";
@@ -413,16 +412,6 @@ export const store = createStore<State, AllGetters, AllActions, AllMutations>({
   strict: !isProduction,
 });
 
-// Storeをwatchするためのプラグインをまとめたもの。
-export const watchStoreStatePlugin: Plugin = {
-  install(
-    app,
-    { store }: { store: Store<State, AllGetters, AllActions, AllMutations> },
-  ) {
-    singingStorePlugin(store);
-  },
-};
-
 export const useStore = (): Store<
   State,
   AllGetters,