表示メニューを追加し右下シンガー表示を切り替えられるようにする (#2219)

* 表示メニューを追加

* sing用storeではなく設定storeを利用する [update snapshots]

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

* Update src/components/Sing/menuBarData.ts

---------

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

src/components/App.vue

@@ -5,6 +5,7 @@
         v-if="openedEditor != undefined"
         :fileSubMenuData="subMenuData.fileSubMenuData.value"
         :editSubMenuData="subMenuData.editSubMenuData.value"
+        :viewSubMenuData="subMenuData.viewSubMenuData.value"
         :editor="openedEditor"
       />
       <KeepAlive>

src/components/Menu/MenuBar/MenuBar.vue

@@ -41,6 +41,8 @@ const props = defineProps<{
   fileSubMenuData: MenuItemData[];
   /** 「編集」メニューのサブメニュー */
   editSubMenuData: MenuItemData[];
+  /** 「表示」メニューのサブメニュー */
+  viewSubMenuData: MenuItemData[];
   /** エディタの種類 */
   editor: "talk" | "song";
 }>();
@@ -387,6 +389,15 @@ const menudata = computed<MenuItemData[]>(() => [
       ...props.editSubMenuData,
     ],
   },
+  {
+    type: "root",
+    label: "表示",
+    onClick: () => {
+      closeAllDialog();
+    },
+    disableWhenUiLocked: false,
+    subMenu: [...props.viewSubMenuData],
+  },
   {
     type: "root",
     label: "エンジン",

src/components/Sing/CharacterPortrait.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="character-portrait-wrap" :class="{ hide: !isShowSinger }">
+  <div v-if="showSinger" class="character-portrait-wrap">
     <img class="character-portrait" :src="portraitPath" />
   </div>
 </template>
@@ -9,7 +9,7 @@ import { computed } from "vue";
 import { useStore } from "@/store";
 
 const store = useStore();
-const isShowSinger = computed(() => store.state.isShowSinger);
+const showSinger = computed(() => store.state.showSinger);
 
 const portraitPath = computed(() => {
   const userOrderedCharacterInfos =

src/components/Sing/menuBarData.ts

@@ -8,6 +8,15 @@ export const useMenuBarData = () => {
   const isNotesSelected = computed(
     () => store.getters.SELECTED_NOTE_IDS.size > 0,
   );
+  const showSinger = computed({
+    get: () => store.state.showSinger,
+    set: (showSinger: boolean) => {
+      void store.dispatch("SET_ROOT_MISC_SETTING", {
+        key: "showSinger",
+        value: showSinger,
+      });
+    },
+  });
 
   const importExternalSongProject = async () => {
     if (uiLocked.value) return;
@@ -105,5 +114,16 @@ export const useMenuBarData = () => {
     },
   ]);
 
-  return { fileSubMenuData, editSubMenuData };
+  const viewSubMenuData = computed<MenuItemData[]>(() => [
+    {
+      type: "button",
+      label: showSinger.value ? "立ち絵を非表示" : "立ち絵を表示",
+      onClick: () => {
+        showSinger.value = !showSinger.value;
+      },
+      disableWhenUiLocked: true,
+    },
+  ]);
+
+  return { fileSubMenuData, editSubMenuData, viewSubMenuData };
 };

src/components/Talk/menuBarData.ts

@@ -54,8 +54,12 @@ export const useMenuBarData = () => {
   // 「編集」メニュー
   const editSubMenuData = computed<MenuItemData[]>(() => []);
 
+  // 「表示」メニュー
+  const viewSubMenuData = computed<MenuItemData[]>(() => []);
+
   return {
     fileSubMenuData,
     editSubMenuData,
+    viewSubMenuData,
   };
 };

src/store/setting.ts

@@ -69,6 +69,7 @@ export const settingStoreState: SettingStoreState = {
     soloAndMute: true,
     panAndGain: true,
   },
+  showSinger: true,
 };
 
 export const settingStore = createPartialStore<SettingStoreTypes>({
@@ -146,6 +147,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         "enableMemoNotation",
         "skipUpdateVersion",
         "undoableTrackOperations",
+        "showSinger",
       ] as const;
 
       // rootMiscSettingKeysに値を足し忘れていたときに型エラーを出す検出用コード

src/store/singing.ts

@@ -420,8 +420,6 @@ export const singingStoreState: SingingStoreState = {
   editFrameRate: DEPRECATED_DEFAULT_EDIT_FRAME_RATE,
   phrases: new Map(),
   singingGuides: new Map(),
-  // NOTE: UIの状態は試行のためsinging.tsに局所化する+Hydrateが必要
-  isShowSinger: true,
   sequencerZoomX: 0.5,
   sequencerZoomY: 0.75,
   sequencerSnapType: 16,
@@ -438,17 +436,6 @@ export const singingStoreState: SingingStoreState = {
 };
 
 export const singingStore = createPartialStore<SingingStoreTypes>({
-  SET_SHOW_SINGER: {
-    mutation(state, { isShowSinger }: { isShowSinger: boolean }) {
-      state.isShowSinger = isShowSinger;
-    },
-    async action({ mutations }, { isShowSinger }) {
-      mutations.SET_SHOW_SINGER({
-        isShowSinger,
-      });
-    },
-  },
-
   SELECTED_TRACK_ID: {
     getter(state) {
       // Undo/Redoで消えている場合は最初のトラックを選択していることにする

src/store/type.ts

@@ -838,8 +838,6 @@ export type SingingStoreState = {
   editFrameRate: number;
   phrases: Map<PhraseSourceHash, Phrase>;
   singingGuides: Map<SingingGuideSourceHash, SingingGuide>;
-  // NOTE: UIの状態などは分割・統合した方がよさそうだが、ボイス側と混在させないためいったん局所化する
-  isShowSinger: boolean;
   sequencerZoomX: number;
   sequencerZoomY: number;
   sequencerSnapType: number;
@@ -857,11 +855,6 @@ export type SingingStoreState = {
 };
 
 export type SingingStoreTypes = {
-  SET_SHOW_SINGER: {
-    mutation: { isShowSinger: boolean };
-    action(payload: { isShowSinger: boolean }): void;
-  };
-
   SELECTED_TRACK_ID: {
     getter: TrackId;
   };

src/type/preload.ts

@@ -610,6 +610,7 @@ export const rootMiscSettingSchema = z.object({
       panAndGain: z.boolean().default(true),
     })
     .default({}),
+  showSinger: z.boolean().default(true),
 });
 export type RootMiscSettingType = z.infer<typeof rootMiscSettingSchema>;