複数選択：複数削除を追加

src/components/AudioCell.vue

@@ -77,7 +77,7 @@
         文章が長いと正常に動作しない可能性があります。
         句読点の位置で文章を分割してください。
       </template>
-      <template v-if="deleteButtonEnable" #after>
+      <template v-if="enableDeleteButton" #after>
         <q-btn
           round
           flat
@@ -436,33 +436,66 @@ const moveDownCell = moveCell(1);
 // 消去
 const willRemove = ref(false);
 const removeCell = async () => {
-  // 1つだけの時は削除せず
-  if (audioKeys.value.length > 1) {
+  let audioKeysToDelete: AudioKey[];
+  if (
+    isMultiSelectEnabled.value &&
+    store.getters.SELECTED_AUDIO_KEYS.includes(props.audioKey)
+  ) {
+    audioKeysToDelete = store.getters.SELECTED_AUDIO_KEYS;
+  } else {
+    audioKeysToDelete = [props.audioKey];
+  }
+  // 全て消える場合はなにもしない
+  if (audioKeys.value.length > audioKeysToDelete.length) {
     // フォーカスを外したりREMOVEしたりすると、
     // テキストフィールドのchangeイベントが非同期に飛んでundefinedエラーになる
     // エラー防止のためにまずwillRemoveフラグを建てる
     willRemove.value = true;
 
-    const index = audioKeys.value.indexOf(props.audioKey);
-    if (index > 0) {
-      emit("focusCell", {
-        audioKey: audioKeys.value[index - 1],
-      });
-    } else {
+    if (audioKeysToDelete.includes(props.audioKey)) {
+      // 選択するAudioKeyを決定する。
+      // - 削除ボタンが押されたAudioCellから開始
+      // - 残るAudioCellを上方向に探す
+      // - 上方向になかったら下方向に探す
+      // - なかったらエラー（Unreachable）
+      const audioKeyIndex = audioKeys.value.indexOf(props.audioKey);
+      let willNextFocusIndex = -1;
+      for (let i = audioKeyIndex; i >= 0; i--) {
+        if (!audioKeysToDelete.includes(audioKeys.value[i])) {
+          willNextFocusIndex = i;
+          break;
+        }
+      }
+      if (willNextFocusIndex === -1) {
+        for (let i = audioKeyIndex; i < audioKeys.value.length; i++) {
+          if (!audioKeysToDelete.includes(audioKeys.value[i])) {
+            willNextFocusIndex = i;
+            break;
+          }
+        }
+      }
+      if (willNextFocusIndex === -1) {
+        throw new Error(
+          "次に選択するaudioKeyが見付かりませんでした（unreachable）"
+        );
+      }
       emit("focusCell", {
-        audioKey: audioKeys.value[index + 1],
+        audioKey: audioKeys.value[willNextFocusIndex],
       });
     }
 
-    store.dispatch("COMMAND_REMOVE_AUDIO_ITEM", {
-      audioKey: props.audioKey,
+    store.dispatch("COMMAND_MULTI_REMOVE_AUDIO_ITEM", {
+      audioKeys: audioKeysToDelete,
     });
   }
 };
 
 // 削除ボタンの有効／無効判定
-const deleteButtonEnable = computed(() => {
-  return 1 < audioKeys.value.length;
+const enableDeleteButton = computed(() => {
+  return (
+    store.state.audioKeys.length >
+    (isMultiSelectEnabled.value ? store.getters.SELECTED_AUDIO_KEYS.length : 1)
+  );
 });
 
 // テキスト編集エリアの右クリック

src/store/audio.ts

@@ -265,7 +265,7 @@ export const audioStoreState: AudioStoreState = {
 export const audioStore = createPartialStore<AudioStoreTypes>({
   ACTIVE_AUDIO_KEY: {
     getter(state) {
-      return state._activeAudioKey !== undefined &&
+      return state._activeAudioKey != undefined &&
         state.audioKeys.includes(state._activeAudioKey)
         ? state._activeAudioKey
         : undefined;
@@ -1883,12 +1883,14 @@ export const audioCommandStore = transformCommandStore(
       },
     },
 
-    COMMAND_REMOVE_AUDIO_ITEM: {
-      mutation(draft, payload: { audioKey: AudioKey }) {
-        audioStore.mutations.REMOVE_AUDIO_ITEM(draft, payload);
+    COMMAND_MULTI_REMOVE_AUDIO_ITEM: {
+      mutation(draft, { audioKeys }: { audioKeys: AudioKey[] }) {
+        for (const audioKey of audioKeys) {
+          audioStore.mutations.REMOVE_AUDIO_ITEM(draft, { audioKey });
+        }
       },
-      action({ commit }, payload: { audioKey: AudioKey }) {
-        commit("COMMAND_REMOVE_AUDIO_ITEM", payload);
+      action({ commit }, payload: { audioKeys: AudioKey[] }) {
+        commit("COMMAND_MULTI_REMOVE_AUDIO_ITEM", payload);
       },
     },
 

src/store/type.ts

@@ -478,9 +478,9 @@ export type AudioCommandStoreTypes = {
     }): Promise<AudioKey>;
   };
 
-  COMMAND_REMOVE_AUDIO_ITEM: {
-    mutation: { audioKey: AudioKey };
-    action(payload: { audioKey: AudioKey }): void;
+  COMMAND_MULTI_REMOVE_AUDIO_ITEM: {
+    mutation: { audioKeys: AudioKey[] };
+    action(payload: { audioKeys: AudioKey[] }): void;
   };
 
   COMMAND_SET_AUDIO_KEYS: {