複数選択：選択だけ実装

src/components/SettingDialog.vue

@@ -857,6 +857,33 @@
                 >
                 </q-toggle>
               </q-card-actions>
+              <q-card-actions
+                v-if="!isProduction"
+                class="q-px-md q-py-none bg-surface"
+              >
+                <div>複数選択</div>
+                <div aria-label="複数のテキスト欄を選択できるようにします。">
+                  <q-icon name="help_outline" size="sm" class="help-hover-icon">
+                    <q-tooltip
+                      :delay="500"
+                      anchor="center right"
+                      self="center left"
+                      transition-show="jump-right"
+                      transition-hide="jump-left"
+                    >
+                      複数のテキスト欄を選択できるようにします。
+                    </q-tooltip>
+                  </q-icon>
+                </div>
+                <q-space />
+                <q-toggle
+                  :model-value="experimentalSetting.enableMultiSelect"
+                  @update:model-value="
+                    changeExperimentalSetting('enableMultiSelect', $event)
+                  "
+                >
+                </q-toggle>
+              </q-card-actions>
             </q-card>
             <q-card flat class="setting-card">
               <q-card-actions>
@@ -895,6 +922,7 @@ import { computed, ref } from "vue";
 import FileNamePatternDialog from "./FileNamePatternDialog.vue";
 import { useStore } from "@/store";
 import {
+  isProduction,
   SavingSetting,
   EngineSetting,
   ExperimentalSetting,

src/store/audio.ts

@@ -258,6 +258,17 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SELECTED_AUDIO_KEYS: {
+    getter(state) {
+      return (
+        //  undo/redoで消えていることがあるためフィルタする
+        state._selectedAudioKeys?.filter((audioKey) =>
+          state.audioKeys.includes(audioKey)
+        ) || []
+      );
+    },
+  },
+
   HAVE_AUDIO_QUERY: {
     getter: (state) => (audioKey: AudioKey) => {
       return state.audioItems[audioKey]?.query != undefined;
@@ -505,6 +516,25 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation(state, { audioKeys }: { audioKeys?: AudioKey[] }) {
+      state._selectedAudioKeys = audioKeys;
+    },
+    action(
+      { state, commit, getters },
+      { audioKeys }: { audioKeys?: AudioKey[] }
+    ) {
+      const uniqueAudioKeys = new Set(audioKeys);
+      if (getters.ACTIVE_AUDIO_KEY) {
+        uniqueAudioKeys.add(getters.ACTIVE_AUDIO_KEY);
+      }
+      const sortedAudioKeys = state.audioKeys.filter((audioKey) =>
+        uniqueAudioKeys.has(audioKey)
+      );
+      commit("SET_SELECTED_AUDIO_KEYS", { audioKeys: sortedAudioKeys });
+    },
+  },
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation(state, { startPoint }: { startPoint?: number }) {
       state.audioPlayStartPoint = startPoint;

src/store/setting.ts

@@ -50,6 +50,7 @@ export const settingStoreState: SettingStoreState = {
     enableInterrogativeUpspeak: false,
     enableMorphing: false,
     enableMultiEngine: false,
+    enableMultiSelect: false,
   },
   splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
   splitterPosition: {

src/store/type.ts

@@ -130,6 +130,7 @@ export type AudioStoreState = {
   audioKeys: AudioKey[];
   audioStates: Record<AudioKey, AudioState>;
   _activeAudioKey?: AudioKey;
+  _selectedAudioKeys?: AudioKey[];
   audioPlayStartPoint?: number;
   nowPlayingContinuously: boolean;
 };
@@ -139,6 +140,10 @@ export type AudioStoreTypes = {
     getter: AudioKey | undefined;
   };
 
+  SELECTED_AUDIO_KEYS: {
+    getter: AudioKey[];
+  };
+
   HAVE_AUDIO_QUERY: {
     getter(audioKey: AudioKey): boolean;
   };
@@ -192,6 +197,11 @@ export type AudioStoreTypes = {
     action(payload: { audioKey?: AudioKey }): void;
   };
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation: { audioKeys?: AudioKey[] };
+    action(payload: { audioKeys?: AudioKey[] }): void;
+  };
+
   SET_AUDIO_PLAY_START_POINT: {
     mutation: { startPoint?: number };
     action(payload: { startPoint?: number }): void;

src/type/preload.ts

@@ -3,6 +3,7 @@ import { IpcSOData } from "./ipc";
 import { AltPortInfos } from "@/store/type";
 import { Result } from "@/type/result";
 
+export const isProduction = import.meta.env.MODE === "production";
 export const isElectron = import.meta.env.VITE_TARGET === "electron";
 export const isBrowser = import.meta.env.VITE_TARGET === "browser";
 
@@ -498,6 +499,7 @@ export const experimentalSettingSchema = z.object({
   enableInterrogativeUpspeak: z.boolean().default(false),
   enableMorphing: z.boolean().default(false),
   enableMultiEngine: z.boolean().default(false),
+  enableMultiSelect: z.boolean().default(false),
 });
 
 export type ExperimentalSetting = z.infer<typeof experimentalSettingSchema>;

src/views/EditorHome.vue

@@ -227,7 +227,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
     "テキスト欄にフォーカスを戻す",
     () => {
       if (activeAudioKey.value !== undefined) {
-        focusCell({ audioKey: activeAudioKey.value });
+        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
       }
       return false; // this is the same with event.preventDefault()
     },
@@ -406,7 +406,7 @@ const addAudioItem = async () => {
     audioItem,
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 const duplicateAudioItem = async () => {
   const prevAudioKey = activeAudioKey.value;
@@ -420,7 +420,7 @@ const duplicateAudioItem = async () => {
     audioItem: cloneDeep(prevAudioItem),
     prevAudioKey: activeAudioKey.value,
   });
-  audioCellRefs[newAudioKey].focusTextField();
+  audioCellRefs[newAudioKey].focusCell({ focusTarget: "textField" });
 };
 
 // Pane
@@ -472,8 +472,14 @@ watch(shouldShowPanes, (val, old) => {
 });
 
 // セルをフォーカス
-const focusCell = ({ audioKey }: { audioKey: AudioKey }) => {
-  audioCellRefs[audioKey].focusTextField();
+const focusCell = ({
+  audioKey,
+  focusTarget,
+}: {
+  audioKey: AudioKey;
+  focusTarget: "root" | "textField";
+}) => {
+  audioCellRefs[audioKey].focusCell({ focusTarget });
 };
 
 // Electronのデフォルトのundo/redoを無効化
@@ -562,7 +568,7 @@ onMounted(async () => {
     const newAudioKey = await store.dispatch("REGISTER_AUDIO_ITEM", {
       audioItem,
     });
-    focusCell({ audioKey: newAudioKey });
+    focusCell({ audioKey: newAudioKey, focusTarget: "textField" });
 
     // 最初の話者を初期化
     store.dispatch("SETUP_SPEAKER", {

tests/e2e/browser/複数選択.spec.ts

@@ -0,0 +1,148 @@
+import { test, expect, Page } from "@playwright/test";
+import { toggleSetting, 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);
+
+  await navigateToMain(page);
+  await page.waitForTimeout(100);
+  await toggleSetting(page, "複数選択");
+
+  await addAudioCells(page, 3);
+});
+
+const ctrlLike = process.platform === "darwin" ? "Meta" : "Control";
+/**
+ * アクティブなAudioCellと選択されているAudioCellを取得する。
+ * 戻り値のインデックスは1から始まる。（nth-childのインデックスと揃えるため）
+ */
+async function getSelectedStatus(page: Page): Promise<{
+  active: number;
+  selected: number[];
+}> {
+  const selectedAudioKeys = await page.evaluate(() => {
+    const audioCells = [...document.querySelectorAll(".audio-cell")];
+    let active: number | undefined;
+    const selected: number[] = [];
+    for (let i = 0; i < audioCells.length; i++) {
+      const audioCell = audioCells[i];
+      if (audioCell.classList.contains("active")) {
+        active = i + 1;
+      }
+      if (audioCell.classList.contains("selected")) {
+        selected.push(i + 1);
+      }
+    }
+    if (active === undefined) {
+      throw new Error("No active audio cell");
+    }
+
+    return { active, selected };
+  });
+  return selectedAudioKeys;
+}
+
+async function addAudioCells(page: Page, count: number) {
+  for (let i = 0; i < count; i++) {
+    await page.getByRole("button", { name: "テキストを追加" }).click();
+    await page.waitForTimeout(100);
+  }
+}
+
+test("複数選択：マウス周り", async ({ page }) => {
+  // Shift+クリックは前回選択していたAudioCellから今回クリックしたAudioCellまでを選択する
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up("Shift");
+
+  await page.waitForTimeout(100);
+  const selectedStatus1 = await getSelectedStatus(page);
+  expect(selectedStatus1.active).toBe(4);
+  expect(selectedStatus1.selected).toEqual([2, 3, 4]);
+
+  // ただのクリックはactiveAudioKeyとselectedAudioKeysをクリックしたAudioCellだけにする
+  await page.locator(".audio-cell:nth-child(2)").click();
+
+  await page.waitForTimeout(100);
+  const selectedStatus2 = await getSelectedStatus(page);
+  expect(selectedStatus2.active).toBe(2);
+  expect(selectedStatus2.selected).toEqual([2]);
+
+  if (process.platform === "darwin") {
+    // なぜかCmd(Meta)+クリックが動かないのでスキップする
+    return;
+  }
+
+  // Ctrl+クリックは選択範囲を追加する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(4)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  const selectedStatus3 = await getSelectedStatus(page);
+  expect(selectedStatus3.active).toBe(4);
+  expect(selectedStatus3.selected).toEqual([2, 4]);
+
+  // Ctrl+クリックは選択範囲から削除する
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  const selectedStatus4 = await getSelectedStatus(page);
+  expect(selectedStatus4.active).toBe(4);
+  expect(selectedStatus4.selected).toEqual([4]);
+
+  // activeのAudioCellをCtrl+クリックすると選択範囲から削除して次のselectedのAudioCellをactiveにする
+  await page.keyboard.down(ctrlLike);
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.up(ctrlLike);
+  await page.waitForTimeout(100);
+
+  const selectedStatus5 = await getSelectedStatus(page);
+  expect(selectedStatus5.active).toBe(4);
+  expect(selectedStatus5.selected).toEqual([4]);
+});
+
+test("複数選択：キーボード", async ({ page }) => {
+  // Shift+下で下方向を選択範囲にする
+  await page.locator(".audio-cell:nth-child(2)").click();
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowDown");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  const selectedStatus1 = await getSelectedStatus(page);
+  expect(selectedStatus1.active).toBe(3);
+  expect(selectedStatus1.selected).toEqual([2, 3]);
+
+  // ただの下で下方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowDown");
+
+  await page.waitForTimeout(100);
+  const selectedStatus2 = await getSelectedStatus(page);
+  expect(selectedStatus2.active).toBe(4);
+  expect(selectedStatus2.selected).toEqual([4]);
+
+  // Shift+上で上方向を選択範囲にする
+  await page.keyboard.down("Shift");
+  await page.keyboard.press("ArrowUp");
+  await page.keyboard.up("Shift");
+  await page.waitForTimeout(100);
+
+  const selectedStatus3 = await getSelectedStatus(page);
+  expect(selectedStatus3.active).toBe(3);
+  expect(selectedStatus3.selected).toEqual([3, 4]);
+
+  // ただの上で上方向をactiveにして他の選択を解除する
+  await page.keyboard.press("ArrowUp");
+  await page.waitForTimeout(100);
+
+  const selectedStatus4 = await getSelectedStatus(page);
+  expect(selectedStatus4.active).toBe(2);
+  expect(selectedStatus4.selected).toEqual([2]);
+});

tests/e2e/navigators.ts

@@ -14,6 +14,27 @@ export async function navigateToMain(page: Page) {
   await page.getByRole("button", { name: "許可" }).click();
 }
 
+/**
+ * 特定の設定をトグルする
+ */
+export async function toggleSetting(page: Page, settingName: string) {
+  await page.getByRole("button", { name: "設定" }).click();
+  await page.waitForTimeout(100);
+  // FIXME: なぜかariaで取得できない
+  // await page.getByRole("listitem", { name: "オプション" }).click();
+  await page.getByText("オプション").click();
+  await page.waitForTimeout(100);
+  await page
+    .locator(".q-card__actions", {
+      has: page.getByText(settingName),
+    })
+    .locator(".q-toggle")
+    .click();
+  await page.waitForTimeout(100);
+  await page.getByRole("button", { name: "設定を閉じる" }).click();
+  await page.waitForTimeout(100);
+}
+
 /**
  * ヘルプダイアログの表示まで移動
  */

tests/unit/store/Vuex.spec.ts

@@ -129,6 +129,7 @@ describe("store/vuex.js test", () => {
           enableInterrogativeUpspeak: false,
           enableMorphing: false,
           enableMultiEngine: false,
+          enableMultiSelect: false,
         },
         splitTextWhenPaste: "PERIOD_AND_NEW_LINE",
         splitterPosition: {