ソング：マルチトラック機能を追加

src/components/Dialog/ImportMidiDialog.vue

@@ -19,6 +19,7 @@
           placeholder="MIDIファイルを選択してください"
           @input="handleMidiFileChange"
         />
+        <!-- TODO: 複数選択して複数のトラックとしてインポートできるようにする -->
         <QSelect
           v-if="midi"
           v-model="selectedTrack"

src/components/Dialog/SettingDialog.vue

@@ -419,6 +419,54 @@
                 >
                 </QBtn>
               </QCardActions>
+
+              <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"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                    >
+                      名前変更、パン、音量、ミュート、ソロ、名前のうち、「元に戻す」機能の対象にするパラメータを選べます。
+                    </QTooltip>
+                  </QIcon>
+                </div>
+                <QSpace />
+                <QSelect
+                  v-model="songUndoableTrackControl"
+                  padding="xs md"
+                  unelevated
+                  emit-value
+                  multiple
+                  color="background"
+                  text-color="display"
+                  toggle-color="primary"
+                  toggle-text-color="display-on-primary"
+                  :options="songUndoableTrackControlOptions"
+                  :display-value="songUndoableTrackControlDisplayValue"
+                >
+                  <template #option="{ itemProps, opt, selected }">
+                    <QItem v-ripple v-bind="itemProps" clickable>
+                      <QItemSection avatar>
+                        <QIcon v-if="selected" name="check" color="display" />
+                      </QItemSection>
+                      <QItemSection class="text-display">
+                        <QItemLabel>
+                          {{ opt.label }}
+                        </QItemLabel>
+                      </QItemSection>
+                    </QItem>
+                  </template>
+                </QSelect>
+              </QCardActions>
             </QCard>
             <!-- Saving Card -->
             <QCard flat class="setting-card">
@@ -1087,6 +1135,62 @@ const isDefaultConfirmedTips = computed(() => {
   return Object.values(confirmedTips).every((v) => !v);
 });
 
+// トラック操作のUndo対象
+type SongUndoableTrackControl =
+  keyof RootMiscSettingType["songUndoableTrackControl"];
+const songUndoableTrackControlOptions: {
+  label: string;
+  value: SongUndoableTrackControl;
+}[] = [
+  {
+    label: "名前",
+    value: "name",
+  },
+  {
+    label: "パン、音量",
+    value: "panVolume",
+  },
+  {
+    label: "ミュート、ソロ",
+    value: "soloMute",
+  },
+];
+const songUndoableTrackControlDisplayValue = computed(() => {
+  const labels = Object.entries(store.state.songUndoableTrackControl)
+    .filter((v) => v[1])
+    .map((v) => {
+      const option = songUndoableTrackControlOptions.find(
+        (option) => option.value === v[0],
+      );
+      if (!option) {
+        throw new Error("Invalid songUndoableTrackControl value");
+      }
+      return option.label;
+    });
+  if (labels.length === 0) {
+    return "（なし）";
+  }
+  return labels.join("、");
+});
+
+const songUndoableTrackControl = computed({
+  get: () =>
+    Object.entries(store.state.songUndoableTrackControl)
+      .filter((v) => v[1])
+      .map((v) => v[0] as SongUndoableTrackControl),
+  set: (songUndoableTrackControl: SongUndoableTrackControl[]) => {
+    store.dispatch("SET_ROOT_MISC_SETTING", {
+      key: "songUndoableTrackControl",
+      value: Object.fromEntries(
+        Object.keys(store.state.songUndoableTrackControl).map((key) => [
+          key,
+          songUndoableTrackControl.includes(key as SongUndoableTrackControl),
+        ]),
+      ) as Record<SongUndoableTrackControl, boolean>,
+    });
+  },
+});
+
 // 外観
 const currentThemeNameComputed = computed({
   get: () => store.state.themeSetting.currentTheme,

src/components/ErrorBoundary.vue

@@ -21,7 +21,15 @@ onMounted(() => {
     }
   };
   window.addEventListener("error", (event: ErrorEvent) => {
-    logError(event.error);
+    if (event.error) {
+      logError(event.error);
+    } else {
+      logError(
+        new Error(
+          `Unknown error at ${event.filename}:${event.lineno}:${event.colno}`,
+        ),
+      );
+    }
   });
   window.addEventListener("unhandledrejection", handlePromiseRejectionEvent);
   window.addEventListener("rejectionhandled", handlePromiseRejectionEvent);

src/components/Sing/CharacterMenuButton/CharacterSelectMenu.vue

@@ -0,0 +1,241 @@
+<template>
+  <QMenu
+    class="character-menu"
+    transition-show="none"
+    transition-hide="none"
+    touch-position
+  >
+    <QList>
+      <QItem
+        v-for="(characterInfo, characterIndex) in userOrderedCharacterInfos"
+        :key="characterIndex"
+        class="q-pa-none"
+      >
+        <QBtnGroup flat class="col full-width">
+          <QBtn
+            v-close-popup
+            flat
+            no-caps
+            class="col-grow"
+            :class="
+              characterInfo.metas.speakerUuid === selectedSpeakerUuid &&
+              'selected-character-item'
+            "
+            @click="
+              changeStyleId(
+                characterInfo.metas.speakerUuid,
+                getDefaultStyle(characterInfo.metas.speakerUuid).styleId,
+              )
+            "
+            @mouseover="reassignSubMenuOpen(-1)"
+            @mouseleave="reassignSubMenuOpen.cancel()"
+          >
+            <SingerIcon
+              class="q-mr-md"
+              rounded
+              :style="getDefaultStyle(characterInfo.metas.speakerUuid)"
+              :show-engine-icon="isMultipleEngine"
+              :engine-icons="engineIcons"
+            />
+            <div>{{ characterInfo.metas.speakerName }}</div>
+          </QBtn>
+
+          <!-- スタイルが2つ以上あるものだけ、スタイル選択ボタンを表示する-->
+          <template v-if="characterInfo.metas.styles.length >= 2">
+            <QSeparator vertical />
+
+            <div
+              class="flex items-center q-px-sm q-py-none cursor-pointer"
+              :class="
+                subMenuOpenFlags[characterIndex] && 'opened-character-item'
+              "
+              @mouseover="reassignSubMenuOpen(characterIndex)"
+              @mouseleave="reassignSubMenuOpen.cancel()"
+            >
+              <QIcon name="keyboard_arrow_right" color="grey-6" size="sm" />
+
+              <QMenu
+                v-model="subMenuOpenFlags[characterIndex]"
+                no-parent-event
+                anchor="top end"
+                self="top start"
+                transition-show="none"
+                transition-hide="none"
+                class="character-menu"
+              >
+                <QList>
+                  <QItem
+                    v-for="(style, styleIndex) in characterInfo.metas.styles"
+                    :key="styleIndex"
+                    v-close-popup
+                    clickable
+                    active-class="selected-character-item"
+                    :active="style.styleId === selectedStyleId"
+                    @click="
+                      changeStyleId(
+                        characterInfo.metas.speakerUuid,
+                        style.styleId,
+                      )
+                    "
+                  >
+                    <SingerIcon
+                      class="q-mr-md"
+                      rounded
+                      :style="style"
+                      :show-engine-icon="isMultipleEngine"
+                      :engine-icons="engineIcons"
+                    />
+                    <QItemSection v-if="style.styleName">
+                      {{ characterInfo.metas.speakerName }} ({{
+                        getStyleDescription(style)
+                      }})
+                    </QItemSection>
+                    <QItemSection v-else>{{
+                      characterInfo.metas.speakerName
+                    }}</QItemSection>
+                  </QItem>
+                </QList>
+              </QMenu>
+            </div>
+          </template>
+        </QBtnGroup>
+      </QItem>
+    </QList>
+  </QMenu>
+</template>
+
+<script lang="ts">
+export default {
+  name: "CharacterMenuButton",
+};
+</script>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { debounce } from "quasar";
+import { useStore } from "@/store";
+import { base64ImageToUri } from "@/helpers/imageHelper";
+import { SpeakerId, StyleId, TrackId } from "@/type/preload";
+import { getStyleDescription } from "@/sing/viewHelper";
+import SingerIcon from "@/components/Sing/SingerIcon.vue";
+
+const store = useStore();
+const props = defineProps<{
+  trackId: TrackId;
+}>();
+
+const userOrderedCharacterInfos = computed(() => {
+  return store.getters.USER_ORDERED_CHARACTER_INFOS("singerLike");
+});
+
+const subMenuOpenFlags = ref(
+  [...Array(userOrderedCharacterInfos.value?.length)].map(() => false),
+);
+
+const reassignSubMenuOpen = debounce((idx: number) => {
+  if (subMenuOpenFlags.value[idx]) return;
+  const arr = [...Array(userOrderedCharacterInfos.value?.length)].map(
+    () => false,
+  );
+  arr[idx] = true;
+  subMenuOpenFlags.value = arr;
+}, 100);
+
+const changeStyleId = (speakerUuid: SpeakerId, styleId: StyleId) => {
+  const engineId = store.state.engineIds.find((_engineId) =>
+    (store.state.characterInfos[_engineId] ?? []).some(
+      (characterInfo) =>
+        characterInfo.metas.speakerUuid === speakerUuid &&
+        characterInfo.metas.styles.some((style) => style.styleId === styleId),
+    ),
+  );
+  if (engineId == undefined)
+    throw new Error(
+      `No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`,
+    );
+
+  store.dispatch("COMMAND_SET_SINGER", {
+    trackId: props.trackId,
+    singer: { engineId, styleId },
+    withRelated: true,
+  });
+};
+
+const getDefaultStyle = (speakerUuid: string) => {
+  // FIXME: 同一キャラが複数エンジンにまたがっているとき、順番が先のエンジンが必ず選択される
+  const characterInfo = userOrderedCharacterInfos.value?.find(
+    (info) => info.metas.speakerUuid === speakerUuid,
+  );
+
+  // ここで取得されるcharacterInfoには、ソングエディタ向けのスタイルのみ含まれるので、
+  // その中の最初のスタイルをソングエディタにおける仮のデフォルトスタイルとする
+  // TODO: ソングエディタ向けのデフォルトスタイルをどうするか考える
+  const defaultStyleId = characterInfo?.metas.styles[0].styleId;
+
+  const defaultStyle = characterInfo?.metas.styles.find(
+    (style) => style.styleId === defaultStyleId,
+  );
+
+  if (defaultStyle == undefined) throw new Error("defaultStyle == undefined");
+
+  return defaultStyle;
+};
+
+const selectedCharacterInfo = computed(() => {
+  const singer = store.getters.SELECTED_TRACK.singer;
+  if (userOrderedCharacterInfos.value == undefined || !singer) {
+    return undefined;
+  }
+  return store.getters.CHARACTER_INFO(singer.engineId, singer.styleId);
+});
+
+const selectedSpeakerUuid = computed(() => {
+  return selectedCharacterInfo.value?.metas.speakerUuid;
+});
+
+const selectedStyleId = computed(
+  () =>
+    selectedCharacterInfo.value?.metas.styles.find(
+      (style) =>
+        style.styleId === store.getters.SELECTED_TRACK.singer?.styleId &&
+        style.engineId === store.getters.SELECTED_TRACK.singer?.engineId,
+    )?.styleId,
+);
+
+// 複数エンジン
+const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
+
+const engineIcons = computed(() =>
+  Object.fromEntries(
+    store.state.engineIds.map((engineId) => [
+      engineId,
+      base64ImageToUri(store.state.engineManifests[engineId].icon),
+    ]),
+  ),
+);
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/variables" as vars;
+@use "@/styles/colors" as colors;
+
+.character-menu {
+  .q-item {
+    color: colors.$display;
+  }
+  .q-btn-group {
+    > .q-btn:first-child > :deep(.q-btn__content) {
+      justify-content: flex-start;
+    }
+    > div:last-child:hover {
+      background-color: rgba(colors.$primary-rgb, 0.1);
+    }
+  }
+  .engine-icon {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    bottom: -6px;
+    right: -6px;
+  }
+}
+</style>