複数選択：選択だけ実装

src/components/AudioCell.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="audio-cell">
+  <div
+    class="audio-cell"
+    :class="{ active: isActiveAudioCell, selected: isSelectedAudioCell }"
+    :data-is-multi-select-enabled="isMultiSelectEnabled"
+  >
+    <!-- 複数選択用のヒットボックス -->
+    <div
+      v-if="(isCtrlOrCommandKeyDown || isShiftKeyDown) && isMultiSelectEnabled"
+      class="click-hitbox"
+      @click="onClickWithModifierKey"
+    />
     <q-icon
       v-if="isActiveAudioCell"
       name="arrow_right"
@@ -20,9 +30,13 @@
       :loading="isInitializingSpeaker"
       :show-engine-info="isMultipleEngine"
       :ui-locked="uiLocked"
-      @focus="setActiveAudioKey()"
+      @focus="
+        if (activeAudioKey !== props.audioKey) {
+          selectAndSetActiveAudioKey();
+        }
+      "
     />
-    <!-- 
+    <!--
       input.valueをスクリプトから変更した場合は@changeが発火しないため、
       @blurと@keydown.prevent.enter.exactに分けている
     -->
@@ -40,12 +54,16 @@
       @update:model-value="setAudioTextBuffer"
       @focus="
         clearInputSelection();
-        setActiveAudioKey();
+        // focusは画面外から切り換えてきた場合にも発火するため、
+        // activeAudioKeyが同じなら何もしない
+        if (activeAudioKey !== props.audioKey) {
+          selectAndSetActiveAudioKey();
+        }
       "
       @blur="pushAudioTextIfNeeded()"
       @paste="pasteOnAudioCell"
-      @keydown.prevent.up.exact="moveUpCell"
-      @keydown.prevent.down.exact="moveDownCell"
+      @keydown.prevent.up="moveUpCell"
+      @keydown.prevent.down="moveDownCell"
       @keydown.prevent.enter.exact="pushAudioTextIfNeeded"
     >
       <template #error>
@@ -78,14 +96,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, nextTick } from "vue";
+import { computed, watch, ref, nextTick, onMounted, onUnmounted } from "vue";
 import { QInput } from "quasar";
 import CharacterButton from "./CharacterButton.vue";
 import { MenuItemButton, MenuItemSeparator } from "./MenuBar.vue";
 import ContextMenu from "./ContextMenu.vue";
 import { useStore } from "@/store";
 import { AudioKey, SplitTextWhenPasteType, Voice } from "@/type/preload";
 import { SelectionHelperForQInput } from "@/helpers/SelectionHelperForQInput";
+import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 
 const props =
   defineProps<{
@@ -119,8 +138,80 @@ const isInitializingSpeaker = computed(
 );
 const audioItem = computed(() => store.state.audioItems[props.audioKey]);
 
+const activeAudioKey = computed(() => store.getters.ACTIVE_AUDIO_KEY);
+
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
+const isMultiSelectEnabled = computed(
+  () => store.state.experimentalSetting.enableMultiSelect
+);
+
+const selectAndSetActiveAudioKey = () => {
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", { audioKeys: [props.audioKey] });
+};
+// 複数選択のクリック判定
+const onClickWithModifierKey = (event: MouseEvent) => {
+  if (uiLocked.value) return;
+  const currentActiveAudioKey = store.getters.ACTIVE_AUDIO_KEY;
+  const currentSelectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
+  let newActiveAudioKey: AudioKey | undefined = currentActiveAudioKey;
+  let newSelectedAudioKeys: AudioKey[] = [...currentSelectedAudioKeys];
+  if (event.shiftKey) {
+    if (currentActiveAudioKey) {
+      const currentAudioIndex = store.state.audioKeys.indexOf(
+        currentActiveAudioKey
+      );
+      const clickedAudioIndex = store.state.audioKeys.indexOf(props.audioKey);
+      const minIndex = Math.min(currentAudioIndex, clickedAudioIndex);
+      const maxIndex = Math.max(currentAudioIndex, clickedAudioIndex);
+      const audioKeysBetween = store.state.audioKeys.slice(
+        minIndex,
+        maxIndex + 1
+      );
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, ...audioKeysBetween];
+    }
+  } else if (isOnCommandOrCtrlKeyDown(event)) {
+    // Ctrlキーを押しながらクリックしたとき：
+    //   選択していないAudioCellならactiveを移動し、以前の選択をselectedに追加する。
+    //   選択しているAudioCellならselectedから除外する。activeは変更しない。
+    if (currentSelectedAudioKeys.includes(props.audioKey)) {
+      newActiveAudioKey = currentActiveAudioKey;
+      newSelectedAudioKeys = currentSelectedAudioKeys.filter(
+        (audioKey) => audioKey !== props.audioKey
+      );
+    } else {
+      newActiveAudioKey = props.audioKey;
+      newSelectedAudioKeys = [...currentSelectedAudioKeys, props.audioKey];
+    }
+  }
+  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: newActiveAudioKey });
+  store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+    audioKeys: newSelectedAudioKeys,
+  });
+};
+
+const isCtrlOrCommandKeyDown = ref(false);
+const isShiftKeyDown = ref(false);
+
+const onKeydown = (e: KeyboardEvent) => {
+  isCtrlOrCommandKeyDown.value = isOnCommandOrCtrlKeyDown(e);
+  isShiftKeyDown.value = e.shiftKey;
+};
+const onKeyup = (e: KeyboardEvent) => {
+  isCtrlOrCommandKeyDown.value = isOnCommandOrCtrlKeyDown(e);
+  isShiftKeyDown.value = e.shiftKey;
+};
+onMounted(() => {
+  window.addEventListener("keydown", onKeydown);
+  window.addEventListener("keyup", onKeyup);
+});
+onUnmounted(() => {
+  window.removeEventListener("keydown", onKeydown);
+  window.removeEventListener("keyup", onKeyup);
+});
+
 const selectedVoice = computed<Voice | undefined>({
   get() {
     const { engineId, styleId } = audioItem.value.voice;
@@ -150,6 +241,9 @@ const selectedVoice = computed<Voice | undefined>({
 const isActiveAudioCell = computed(
   () => props.audioKey === store.getters.ACTIVE_AUDIO_KEY
 );
+const isSelectedAudioCell = computed(() =>
+  store.getters.SELECTED_AUDIO_KEYS.includes(props.audioKey)
+);
 
 const audioTextBuffer = ref(audioItem.value.text);
 const isChangeFlag = ref(false);
@@ -188,10 +282,6 @@ const clearInputSelection = () => {
   }
 };
 
-const setActiveAudioKey = () => {
-  store.dispatch("SET_ACTIVE_AUDIO_KEY", { audioKey: props.audioKey });
-};
-
 // コピペしたときに句点と改行で区切る
 const textSplitType = computed(() => store.state.splitTextWhenPaste);
 const pasteOnAudioCell = async (event: ClipboardEvent) => {
@@ -273,20 +363,25 @@ const textLineNumberWidth = computed(() => {
 
 // 上下に移動
 const audioKeys = computed(() => store.state.audioKeys);
-const moveUpCell = (e?: KeyboardEvent) => {
+const moveCell = (offset: number) => (e?: KeyboardEvent) => {
   if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) - 1;
-  if (index >= 0) {
-    emit("focusCell", { audioKey: audioKeys.value[index] });
-  }
-};
-const moveDownCell = (e?: KeyboardEvent) => {
-  if (e && e.isComposing) return;
-  const index = audioKeys.value.indexOf(props.audioKey) + 1;
-  if (index < audioKeys.value.length) {
+  const index = audioKeys.value.indexOf(props.audioKey) + offset;
+  if (index >= 0 && index < audioKeys.value.length) {
+    const selectedAudioKeys = store.getters.SELECTED_AUDIO_KEYS;
     emit("focusCell", { audioKey: audioKeys.value[index] });
+    if (isMultiSelectEnabled.value && e?.shiftKey) {
+      store.dispatch("SET_SELECTED_AUDIO_KEYS", {
+        audioKeys: [
+          ...selectedAudioKeys,
+          props.audioKey,
+          audioKeys.value[index],
+        ],
+      });
+    }
   }
 };
+const moveUpCell = moveCell(-1);
+const moveDownCell = moveCell(1);
 
 // 消去
 const willRemove = ref(false);
@@ -460,8 +555,12 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
 
 .audio-cell {
   display: flex;
+  position: relative;
   padding: 0.4rem 0.5rem;
   margin: 0.2rem 0.5rem;
+  &[data-is-multi-select-enabled="true"].selected {
+    background-color: rgba(colors.$active-point-focus-rgb, 0.5);
+  }
 
   &:first-child {
     margin-top: 0.6rem;
@@ -474,7 +573,7 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
   gap: 0px 1rem;
 
   .active-arrow {
-    left: -5px;
+    left: -1rem;
     height: 2rem;
   }
 
@@ -523,4 +622,15 @@ const isMultipleEngine = computed(() => store.state.engineIds.length > 1);
     color: colors.$display;
   }
 }
+
+.click-hitbox {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: none;
+  z-index: 1;
+  cursor: default;
+}
 </style>

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,13 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SELECTED_AUDIO_KEYS: {
+    getter(state) {
+      const base = new Set(state._selectedAudioKeys || []);
+      return Array.from(base);
+    },
+  },
+
   HAVE_AUDIO_QUERY: {
     getter: (state) => (audioKey: AudioKey) => {
       return state.audioItems[audioKey]?.query != undefined;
@@ -505,6 +512,15 @@ export const audioStore = createPartialStore<AudioStoreTypes>({
     },
   },
 
+  SET_SELECTED_AUDIO_KEYS: {
+    mutation(state, { audioKeys }: { audioKeys?: AudioKey[] }) {
+      state._selectedAudioKeys = audioKeys;
+    },
+    action({ commit }, { audioKeys }: { audioKeys?: AudioKey[] }) {
+      commit("SET_SELECTED_AUDIO_KEYS", { audioKeys });
+    },
+  },
+
   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";
 export const isMac =
@@ -482,6 +483,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>;