feat: コンテキストメニューにアクセント句の削除を追加 (#1554)

src/components/AudioDetail.vue

@@ -69,6 +69,7 @@
           ]"
           @click="setPlayAndStartPoint(accentPhraseIndex)"
         >
+          <context-menu :menudata="accentPhraseMenudata(accentPhraseIndex)" />
           <!-- スライダーここから -->
           <!-- ｱｸｾﾝﾄ項目のスライダー -->
           <template v-if="selectedDetail === 'accent'">
@@ -278,6 +279,8 @@ import {
 import ToolTip from "./ToolTip.vue";
 import AudioAccent from "./AudioAccent.vue";
 import AudioParameter from "./AudioParameter.vue";
+import ContextMenu from "./ContextMenu.vue";
+import { MenuItemButton } from "./MenuBar.vue";
 import { useStore } from "@/store";
 import {
   AudioKey,
@@ -424,6 +427,22 @@ const setPlayAndStartPoint = (accentPhraseIndex: number) => {
   }
 };
 
+// accentPhraseIndexごとにcontext-menuの内容を用意する
+const accentPhraseMenudata = computed(() => (accentPhraseIndex: number): [
+  MenuItemButton
+] => {
+  return [
+    {
+      type: "button",
+      label: "削除",
+      onClick: async () => {
+        deleteAccentPhrase(accentPhraseIndex);
+      },
+      disableWhenUiLocked: true,
+    },
+  ];
+});
+
 const lastPitches = ref<number[][]>([]);
 watch(accentPhrases, async (newPhrases) => {
   activePoint.value = startPoint.value;
@@ -457,6 +476,12 @@ const toggleAccentPhraseSplit = (
     ...(!isPause ? { isPause, moraIndex: moraIndex as number } : { isPause }),
   });
 };
+const deleteAccentPhrase = (phraseIndex: number) => {
+  store.dispatch("COMMAND_DELETE_ACCENT_PHRASE", {
+    audioKey: props.activeAudioKey,
+    accentPhraseIndex: phraseIndex,
+  });
+};
 
 const maxPitch = 6.5;
 const minPitch = 3;

src/store/audio.ts

@@ -2387,6 +2387,35 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
+    COMMAND_DELETE_ACCENT_PHRASE: {
+      async action(
+        { state, commit },
+        {
+          audioKey,
+          accentPhraseIndex,
+        }: {
+          audioKey: AudioKey;
+          accentPhraseIndex: number;
+        }
+      ) {
+        const query = state.audioItems[audioKey].query;
+        if (query == undefined) throw new Error("query == undefined");
+
+        const originAccentPhrases = query.accentPhrases;
+
+        const newAccentPhrases = [
+          ...originAccentPhrases.slice(0, accentPhraseIndex),
+          ...originAccentPhrases.slice(accentPhraseIndex + 1),
+        ];
+
+        // 自動再調整は行わない
+        commit("COMMAND_CHANGE_SINGLE_ACCENT_PHRASE", {
+          audioKey,
+          accentPhrases: newAccentPhrases,
+        });
+      },
+    },
+
     COMMAND_CHANGE_SINGLE_ACCENT_PHRASE: {
       mutation(
         draft,

src/store/type.ts

@@ -563,6 +563,10 @@ export type AudioCommandStoreTypes = {
     ): void;
   };
 
+  COMMAND_DELETE_ACCENT_PHRASE: {
+    action(payload: { audioKey: AudioKey; accentPhraseIndex: number }): void;
+  };
+
   COMMAND_CHANGE_SINGLE_ACCENT_PHRASE: {
     mutation: { audioKey: AudioKey; accentPhrases: AccentPhrase[] };
     action(payload: {

tests/e2e/browser/音声詳細.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+
+import { navigateToMain } from "../navigators";
+
+test.beforeEach(async ({ page }) => {
+  const BASE_URL = "http://localhost:5173/#/home";
+  await page.setViewportSize({ width: 800, height: 600 });
+  await page.goto(BASE_URL);
+});
+
+test("詳細調整欄のコンテキストメニュー", async ({ page }) => {
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+
+  // 削除
+  await page.getByRole("textbox", { name: "1行目" }).click();
+  await page.getByRole("textbox", { name: "1行目" }).fill("1234");
+  await page.getByRole("textbox", { name: "1行目" }).press("Enter");
+  await page.getByText("サンジュウ").click({
+    button: "right",
+  });
+  await page
+    .getByRole("listitem")
+    .filter({ has: page.getByText("削除") })
+    .click();
+  await page.waitForTimeout(100);
+  await expect(page.getByText("サンジュウ")).not.toBeVisible();
+  await expect(page.getByText("ニヒャク")).toBeVisible();
+  await expect(page.getByText("ヨン")).toBeVisible();
+});