複数選択：台本欄の空白をクリックで複数選択を解除するように (#1662)

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>

playwright.config.ts

@@ -21,18 +21,23 @@ if (isElectron) {
       host: z.string(),
       executionFilePath: z.string(),
       executionArgs: z.array(z.string()),
+      executionEnabled: z.boolean(),
     })
     .passthrough()
     .array();
   const engineInfos = envSchema.parse(JSON.parse(defaultEngineInfosEnv));
 
-  engineInfos.forEach((info) => {
+  for (const info of engineInfos) {
+    if (!info.executionEnabled) {
+      continue;
+    }
+
     additionalWebServer.push({
       command: `${info.executionFilePath} ${info.executionArgs.join(" ")}`,
       url: `${info.host}/version`,
       reuseExistingServer: !process.env.CI,
     });
-  });
+  }
 } else {
   throw new Error(`VITE_TARGETの指定が不正です。${process.env.VITE_TARGET}`);
 }

src/components/AudioCell.vue

@@ -10,6 +10,7 @@
     @keydown.prevent.up="moveUpCell"
     @keydown.prevent.down="moveDownCell"
     @focus="onRootFocus"
+    @click.stop=""
   >
     <!-- 複数選択用のヒットボックス -->
     <!-- テキスト欄の範囲選択との競合を防ぐため、activeの時はCtrlでしか出現しないようにする。 -->

src/views/EditorHome.vue

@@ -95,6 +95,7 @@
                         dragEventCounter = 0;
                         loadDraggedFile($event);
                       "
+                      @click="onAudioCellPaneClick"
                     >
                       <draggable
                         ref="cellsRef"
@@ -241,7 +242,7 @@ const hotkeyMap = new Map<HotkeyAction, () => HotkeyReturnType>([
   [
     "テキスト欄にフォーカスを戻す",
     () => {
-      if (activeAudioKey.value !== undefined) {
+      if (activeAudioKey.value != undefined) {
         focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
       }
       return false; // this is the same with event.preventDefault()
@@ -405,7 +406,7 @@ const addAudioItem = async () => {
   let presetKey: PresetKey | undefined = undefined;
   let baseAudioItem: AudioItem | undefined = undefined;
 
-  if (prevAudioKey !== undefined) {
+  if (prevAudioKey != undefined) {
     voice = store.state.audioItems[prevAudioKey].voice;
     presetKey = store.state.audioItems[prevAudioKey].presetKey;
     baseAudioItem = store.state.audioItems[prevAudioKey];
@@ -652,7 +653,7 @@ const allEngineState = computed(() => {
   // 登録されているすべてのエンジンについて状態を確認する
   for (const engineId of store.state.engineIds) {
     const engineState: EngineState | undefined = engineStates[engineId];
-    if (engineState === undefined)
+    if (engineState == undefined)
       throw new Error(`No such engineState set: engineId == ${engineId}`);
 
     // FIXME: 1つでも接続テストに成功していないエンジンがあれば、暫定的に起動中とする
@@ -669,7 +670,7 @@ const allEngineState = computed(() => {
 const isEngineWaitingLong = ref<boolean>(false);
 let engineTimer: number | undefined = undefined;
 watch(allEngineState, (newEngineState) => {
-  if (engineTimer !== undefined) {
+  if (engineTimer != undefined) {
     clearTimeout(engineTimer);
     engineTimer = undefined;
   }
@@ -869,6 +870,17 @@ watch(activeAudioKey, (audioKey) => {
 const showAddAudioItemButton = computed(() => {
   return store.state.showAddAudioItemButton;
 });
+
+const onAudioCellPaneClick = () => {
+  if (
+    store.state.experimentalSetting.enableMultiSelect &&
+    activeAudioKey.value
+  ) {
+    store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+      audioKeys: [activeAudioKey.value],
+    });
+  }
+};
 </script>
 
 <style scoped lang="scss">

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

@@ -182,3 +182,35 @@ test("複数選択：キーボード", async ({ page }) => {
   expect(selectedStatus.active).toBe(3);
   expect(selectedStatus.selected).toEqual([3]);
 });
+
+test("複数選択：台本欄の余白クリックで解除", async ({ page }) => {
+  let selectedStatus: SelectedStatus;
+
+  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);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([2, 3, 4]);
+
+  const scriptArea = page.locator(".audio-cell-pane");
+  const boundingBox = await scriptArea.boundingBox();
+  if (!boundingBox) {
+    throw new Error("No bounding box");
+  }
+  await scriptArea.click({
+    position: {
+      x: 10,
+      y: boundingBox.height - 10,
+    },
+  });
+
+  await page.waitForTimeout(100);
+  selectedStatus = await getSelectedStatus(page);
+  expect(selectedStatus.active).toBe(4);
+  expect(selectedStatus.selected).toEqual([4]);
+});