マルチトラック：デフォルトで有効にする (#2285)

* Delete: マルチトラック周りの設定を消す

* Add: トラック一覧を開いてあげる

* [update snapshots]

* [update-snapshots]

* Change: SingEditor.vueでトラックを開く

* Fix: e2eテストを修正

* Update tests/e2e/browser/設定ダイアログ/書き出しファイル名パターン.spec.ts

* Fix: .sizeをwatchする

* Fix: q-card__actionsを増やす

* Revert: インポートダイアログ周りを戻す

[update snapshots]

* （スナップショットを更新）

* （CI用）

* Delete: 不要なdeepをなくす

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

---------

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/Dialog/ImportSongProjectDialog.vue

@@ -40,17 +40,10 @@
  >
  <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>
@@ -117,10 +110,6 @@ 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",
@@ -243,23 +232,6 @@ 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

@@ -59,24 +59,10 @@
  }}はCPU版のためGPUモードを利用できません。
  </QTooltip>
  </ButtonToggleCell>
- <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 />
+ <BaseCell
+ title="音声のサンプリングレート"
+ description="再生と保存時の音声のサンプリングレートを変更できます（サンプリングレートを上げても音声の品質は上がりません）。"
+ >
  <QSelect
  v-model="outputSamplingRate"
  borderless
@@ -86,7 +72,7 @@
  :optionLabel="renderSamplingRateLabel"
  >
  </QSelect>
- </QCardActions>
+ </BaseCell>
  </QCard>
  <!-- Preservation Setting -->
  <QCard flat class="setting-card">
@@ -371,19 +357,12 @@
  "
  />
 
- <QSlideTransition>
- <!-- q-slide-transitionはheightだけをアニメーションするのでdivで囲う -->
- <div v-show="experimentalSetting.enableMultiTrack">
- <EditButtonCell
- title="ソング：トラックファイル名パターン"
- description="書き出す際のファイル名のパターンをカスタマイズできます。"
- :currentValue="savingSetting.songTrackFileNamePattern"
- @buttonClick="
- showSongTrackAudioFilePatternEditDialog = true
- "
- />
- </div>
- </QSlideTransition>
+ <EditButtonCell
+ title="ソング：トラックファイル名パターン"
+ description="書き出す際のファイル名のパターンをカスタマイズできます。"
+ :currentValue="savingSetting.songTrackFileNamePattern"
+ @buttonClick="showSongTrackAudioFilePatternEditDialog = true"
+ />
  </QCard>
  <!-- Theme Card -->
  <QCard flat class="setting-card">
@@ -471,22 +450,17 @@
  >
  </QSelect>
  </QCardActions>
- <QSlideTransition>
- <!-- q-slide-transitionはheightだけをアニメーションするのでdivで囲う -->
- <div v-show="experimentalSetting.enableMultiTrack">
- <BaseCell
- title="ソング：元に戻すトラック操作"
- description="「元に戻す」機能の対象とするトラック操作を指定します。"
- >
- <QOptionGroup
- v-model="undoableTrackOperations"
- type="checkbox"
- :options="undoableTrackOperationsLabels"
- inline
- />
- </BaseCell>
- </div>
- </QSlideTransition>
+ <BaseCell
+ title="ソング：元に戻すトラック操作"
+ description="「元に戻す」機能の対象とするトラック操作を指定します。"
+ >
+ <QOptionGroup
+ v-model="undoableTrackOperations"
+ type="checkbox"
+ :options="undoableTrackOperationsLabels"
+ inline
+ />
+ </BaseCell>
  </QCard>
 
  <!-- Experimental Card -->
@@ -534,17 +508,6 @@
  )
  "
  />
- <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>
@@ -939,23 +902,6 @@ 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) => {
- void changeExperimentalSetting("enableMultiTrack", enableMultiTrack);
- // 無効化するときはUndo/Redoをクリアする
- if (!enableMultiTrack) {
- void store.dispatch("CLEAR_UNDO_HISTORY");
- }
-};
 </script>
 
 <style scoped lang="scss">

src/components/Sing/SingEditor.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import ToolBar from "./ToolBar/ToolBar.vue";
 import ScoreSequencer from "./ScoreSequencer.vue";
 import SideBar from "./SideBar/SideBar.vue";
@@ -62,11 +62,7 @@ const props = defineProps<{
 
 const store = useStore();
 
-const isSidebarOpen = computed(
- () =>
- store.state.experimentalSetting.enableMultiTrack &&
- store.state.isSongSidebarOpen,
-);
+const isSidebarOpen = computed(() => store.state.isSongSidebarOpen);
 const sidebarWidth = ref(300);
 
 const setSidebarWidth = (width: number) => {
@@ -75,6 +71,16 @@ const setSidebarWidth = (width: number) => {
  }
 };
 
+// トラック数が1から増えたら、サイドバーを開く
+watch(
+ () => store.state.tracks.size,
+ (tracksSize, oldTracksSize) => {
+ if (oldTracksSize <= 1 && tracksSize > 1) {
+ void store.dispatch("SET_SONG_SIDEBAR_OPEN", { isSongSidebarOpen: true });
+ }
+ },
+);
+
 const nowRendering = computed(() => {
  return store.state.nowRendering;
 });

src/components/Sing/ToolBar/ToolBar.vue

@@ -3,7 +3,6 @@
  <!-- configs for entire song -->
  <div class="sing-configs">
  <QBtn
- v-if="multiTrackEnabled"
  class="q-mr-sm"
  :icon="isSidebarOpen ? 'menu_open' : 'menu'"
  round
@@ -189,10 +188,6 @@ 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

@@ -35,37 +35,33 @@ export const useMenuBarData = () => {
  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 fileSubMenuData = computed<MenuItemData[]>(() => [
+ {
+ type: "button",
+ label: "音声を出力",
+ onClick: () => {
+ void exportWaveFile();
+ },
+ disableWhenUiLocked: true,
+ },
+ {
+ type: "button",
+ label: "トラックごとに音声を出力",
+ onClick: () => {
+ void exportStemWaveFile();
+ },
+ disableWhenUiLocked: true,
+ },
+ { type: "separator" },
+ {
+ type: "button",
+ label: "インポート",
+ onClick: () => {
+ void importExternalSongProject();
+ },
+ disableWhenUiLocked: true,
+ },
+ ]);
 
  const editSubMenuData = computed<MenuItemData[]>(() => [
  { type: "separator" },

src/store/project.ts

@@ -168,7 +168,7 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
  */
  action: createUILockAction(
  async (
- { actions, mutations, state, getters },
+ { actions, mutations, getters },
  { filePath, confirm }: { filePath?: string; confirm?: boolean },
  ) => {
  if (!filePath) {
@@ -197,20 +197,6 @@ export const projectStore = createPartialStore<ProjectStoreTypes>({
  projectJson: text,
  });
 
- if (
- !state.experimentalSetting.enableMultiTrack &&
- parsedProjectData.song.trackOrder.length > 1
- ) {
- await window.backend.showMessageDialog({
- type: "error",
- title: "エラー",
- message:
- "このプロジェクトはマルチトラック機能を使用して作成されていますが、現在の設定ではマルチトラック機能を使用できません。\n" +
- "設定の「ソング：マルチトラック機能」を有効にしてからプロジェクトを読み込んでください。",
- });
- return false;
- }
-
  if (confirm !== false && getters.IS_EDITED) {
  const result = await actions.SAVE_OR_DISCARD_PROJECT_FILE({
  additionalMessage:

src/store/setting.ts

@@ -47,7 +47,6 @@ export const settingStoreState: SettingStoreState = {
  enableMorphing: false,
  enableMultiSelect: false,
  shouldKeepTuningOnTextChange: false,
- enableMultiTrack: false,
  },
  splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
  splitterPosition: {