Refactor: MenuBar.vueをApp.vueに持ってくる (VOICEVOX#1966)

* Change: MenuBar.vueを消す

* Improve: MenuBarの移動を完了させる

* Change: MenuBar.ts -> menuBarData.ts

* Fix: Add忘れ

* Change: storeに移動して、menuBarDataでショートカットキー登録をやめる

* Fix: lintに引っかかってたので修正

* Fixup: :wしてなかった

* Add: エラーにopenedEditorの値を表示

* Change: openedEditor != undefinedを増やす

* Delete: フォールバックを削除

* Add: uiLockedのチェックを追加

* Add: TODOを追加

src/components/App.vue

@@ -1,6 +1,11 @@
 <template>
   <ErrorBoundary>
-    <!-- TODO: メニューバーをEditorHomeから移動する -->
+    <MenuBar
+      v-if="openedEditor != undefined"
+      :file-sub-menu-data="subMenuData.fileSubMenuData.value"
+      :edit-sub-menu-data="subMenuData.editSubMenuData.value"
+      :editor="openedEditor"
+    />
     <KeepAlive>
       <Component
         :is="openedEditor == 'talk' ? TalkEditor : SingEditor"
@@ -24,9 +29,25 @@ import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import AllDialog from "@/components/Dialog/AllDialog.vue";
+import MenuBar from "@/components/Menu/MenuBar/MenuBar.vue";
+import { useMenuBarData as useTalkMenuBarData } from "@/components/Talk/menuBarData";
+import { useMenuBarData as useSingMenuBarData } from "@/components/Sing/menuBarData";
 
 const store = useStore();
 
+const talkMenuBarData = useTalkMenuBarData();
+const singMenuBarData = useSingMenuBarData();
+
+const subMenuData = computed(() => {
+  if (openedEditor.value === "talk" || openedEditor.value == undefined) {
+    return talkMenuBarData;
+  } else if (openedEditor.value === "song") {
+    return singMenuBarData;
+  }
+
+  throw new Error(`Invalid openedEditor: ${openedEditor.value}`);
+});
+
 const openedEditor = computed(() => store.state.openedEditor);
 
 // Google Tag Manager

src/components/Sing/SingEditor.vue

@@ -1,5 +1,4 @@
 <template>
-  <MenuBar />
   <ToolBar />
   <div class="sing-main">
     <EngineStartupOverlay
@@ -28,7 +27,6 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import MenuBar from "./MenuBar.vue";
 import ToolBar from "./ToolBar.vue";
 import ScoreSequencer from "./ScoreSequencer.vue";
 import EngineStartupOverlay from "@/components/EngineStartupOverlay.vue";

src/components/Sing/menuBarData.ts

@@ -0,0 +1,131 @@
+import { computed } from "vue";
+import { useStore } from "@/store";
+import { MenuItemData } from "@/components/Menu/type";
+
+export const useMenuBarData = () => {
+  const store = useStore();
+  const uiLocked = computed(() => store.getters.UI_LOCKED);
+  const isNotesSelected = computed(() => store.state.selectedNoteIds.size > 0);
+
+  const importMidiFile = async () => {
+    if (uiLocked.value) return;
+    await store.dispatch("SET_DIALOG_OPEN", {
+      isImportMidiDialogOpen: true,
+    });
+  };
+
+  const importMusicXMLFile = async () => {
+    if (uiLocked.value) return;
+    await store.dispatch("IMPORT_MUSICXML_FILE", {});
+  };
+
+  const importUstFile = async () => {
+    if (uiLocked.value) return;
+    await store.dispatch("IMPORT_UST_FILE", {});
+  };
+
+  const exportWaveFile = async () => {
+    if (uiLocked.value) return;
+    await store.dispatch("EXPORT_WAVE_FILE", {});
+  };
+
+  const fileSubMenuData = computed<MenuItemData[]>(() => [
+    {
+      type: "button",
+      label: "音声を出力",
+      onClick: () => {
+        exportWaveFile();
+      },
+      disableWhenUiLocked: true,
+    },
+    { type: "separator" },
+    {
+      type: "button",
+      label: "MIDI読み込み",
+      onClick: () => {
+        importMidiFile();
+      },
+      disableWhenUiLocked: true,
+    },
+    {
+      type: "button",
+      label: "MusicXML読み込み",
+      onClick: () => {
+        importMusicXMLFile();
+      },
+      disableWhenUiLocked: true,
+    },
+    {
+      type: "button",
+      label: "UST読み込み",
+      onClick: () => {
+        importUstFile();
+      },
+      disableWhenUiLocked: true,
+    },
+  ]);
+
+  const editSubMenuData = computed<MenuItemData[]>(() => [
+    { type: "separator" },
+    {
+      type: "button",
+      label: "コピー",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("COPY_NOTES_TO_CLIPBOARD");
+      },
+      disableWhenUiLocked: true,
+      disabled: !isNotesSelected.value,
+    },
+    {
+      type: "button",
+      label: "切り取り",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("COMMAND_CUT_NOTES_TO_CLIPBOARD");
+      },
+      disableWhenUiLocked: true,
+      disabled: !isNotesSelected.value,
+    },
+    {
+      type: "button",
+      label: "貼り付け",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("COMMAND_PASTE_NOTES_FROM_CLIPBOARD");
+      },
+      disableWhenUiLocked: true,
+    },
+    { type: "separator" },
+    {
+      type: "button",
+      label: "すべて選択",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("SELECT_ALL_NOTES");
+      },
+      disableWhenUiLocked: true,
+    },
+    {
+      type: "button",
+      label: "選択解除",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("DESELECT_ALL_NOTES");
+      },
+      disableWhenUiLocked: true,
+    },
+    { type: "separator" },
+    {
+      type: "button",
+      label: "クオンタイズ",
+      onClick: () => {
+        if (uiLocked.value) return;
+        store.dispatch("COMMAND_QUANTIZE_SELECTED_NOTES");
+      },
+      disableWhenUiLocked: true,
+    },
+  ]);
+
+  return { fileSubMenuData, editSubMenuData };
+};