ソング：歌詞の一括入力を追加

src/components/Sing/ScoreSequencer.vue

@@ -110,25 +110,32 @@
         }"
       ></div>
       <!-- TODO: 1つのv-forで全てのノートを描画できるようにする -->
+      <!-- undefinedだと警告が出るのでnullを渡す -->
       <SequencerNote
         v-for="note in unselectedNotes"
         :key="note.id"
         :note="note"
+        :preview-lyric="previewLyrics.get(note.id) || null"
         :is-selected="false"
         @bar-mousedown="onNoteBarMouseDown($event, note)"
         @left-edge-mousedown="onNoteLeftEdgeMouseDown($event, note)"
         @right-edge-mousedown="onNoteRightEdgeMouseDown($event, note)"
         @lyric-mouse-down="onNoteLyricMouseDown($event, note)"
+        @lyric-input="onNoteLyricInput($event, note)"
+        @lyric-blur="onNoteLyricBlur()"
       />
       <SequencerNote
         v-for="note in nowPreviewing ? previewNotes : selectedNotes"
         :key="note.id"
         :note="note"
+        :preview-lyric="previewLyrics.get(note.id) || null"
         :is-selected="true"
         @bar-mousedown="onNoteBarMouseDown($event, note)"
         @left-edge-mousedown="onNoteLeftEdgeMouseDown($event, note)"
         @right-edge-mousedown="onNoteRightEdgeMouseDown($event, note)"
         @lyric-mouse-down="onNoteLyricMouseDown($event, note)"
+        @lyric-input="onNoteLyricInput($event, note)"
+        @lyric-blur="onNoteLyricBlur()"
       />
     </div>
     <SequencerPitch
@@ -261,6 +268,7 @@ import SequencerPitch from "@/components/Sing/SequencerPitch.vue";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { useShiftKey } from "@/composables/useModifierKey";
+import { useLyricInput } from "@/composables/useLyricInput";
 
 type PreviewMode = "ADD" | "MOVE" | "RESIZE_RIGHT" | "RESIZE_LEFT";
 
@@ -388,6 +396,18 @@ const sequencerBody = ref<HTMLElement | null>(null);
 const cursorX = ref(0);
 const cursorY = ref(0);
 
+// 歌詞入力
+const { previewLyrics, commitPreviewLyrics, splitAndUpdatePreview } =
+  useLyricInput();
+
+const onNoteLyricInput = (text: string, note: Note) => {
+  splitAndUpdatePreview(text, note);
+};
+
+const onNoteLyricBlur = () => {
+  commitPreviewLyrics();
+};
+
 // プレビュー
 // FIXME: 関連する値を１つのobjectにまとめる
 const nowPreviewing = ref(false);

src/components/Sing/SequencerNote.vue

@@ -3,6 +3,7 @@
     class="note"
     :class="{
       selected: noteState === 'SELECTED',
+      'preview-lyric': props.previewLyric != undefined,
       overlapping: hasOverlappingError,
       'invalid-phrase': hasPhraseError,
       'below-pitch': showPitch,
@@ -24,13 +25,14 @@
       data-testid="note-lyric"
       @mousedown="onLyricMouseDown"
     >
-      {{ lyric }}
+      {{ lyricToDisplay }}
     </div>
     <input
       v-if="showLyricInput"
-      v-model.lazy.trim="lyric"
       v-focus
+      :value="lyricToDisplay"
       class="note-lyric-input"
+      @input="onLyricInput"
       @mousedown.stop
       @dblclick.stop
       @keydown.stop="onLyricInputKeyDown"
@@ -88,6 +90,7 @@ const props = withDefaults(
   defineProps<{
     note: Note;
     isSelected: boolean;
+    previewLyric: string | null;
   }>(),
   {
     isSelected: false,
@@ -100,6 +103,8 @@ const emit =
     (name: "rightEdgeMousedown", event: MouseEvent): void;
     (name: "leftEdgeMousedown", event: MouseEvent): void;
     (name: "lyricMouseDown", event: MouseEvent): void;
+    (name: "lyricInput", text: string): void;
+    (name: "lyricBlur"): void;
   }>();
 
 const store = useStore();
@@ -145,18 +150,13 @@ const hasPhraseError = computed(() => {
   );
 });
 
-const lyric = computed({
-  get() {
-    return props.note.lyric;
-  },
-  set(value) {
-    if (!value) {
-      return;
-    }
-    const note: Note = { ...props.note, lyric: value };
-    store.dispatch("COMMAND_UPDATE_NOTES", { notes: [note] });
-  },
-});
+// 表示する歌詞。
+// 優先度：入力中の歌詞 > 他ノートの入力中の歌詞 > 渡された（=Storeの）歌詞
+const lyricToDisplay = computed(
+  () => temporaryLyric.value ?? props.previewLyric ?? props.note.lyric
+);
+// 歌詞入力中の一時的な歌詞
+const temporaryLyric = ref<string | undefined>(undefined);
 const showLyricInput = computed(() => {
   return state.editingLyricNoteId === props.note.id;
 });
@@ -255,6 +255,12 @@ const onLyricInputBlur = () => {
   if (state.editingLyricNoteId === props.note.id) {
     store.dispatch("SET_EDITING_LYRIC_NOTE_ID", { noteId: undefined });
   }
+  temporaryLyric.value = undefined;
+  emit("lyricBlur");
+};
+const onLyricInput = (event: Event) => {
+  temporaryLyric.value = (event.target as HTMLInputElement).value;
+  emit("lyricInput", temporaryLyric.value);
 };
 </script>
 
@@ -286,6 +292,19 @@ const onLyricInputBlur = () => {
       }
     }
   }
+  // TODO：もっといい見た目を考える
+  &.preview-lyric {
+    .note-bar {
+      background-color: hsl(130, 35%, 90%);
+      border: 2px solid colors.$primary;
+    }
+
+    &.below-pitch {
+      .note-bar {
+        background-color: rgba(hsl(130, 100%, 50%), 0.18);
+      }
+    }
+  }
 
   &.overlapping,
   &.invalid-phrase {

src/composables/useLyricInput.ts

@@ -0,0 +1,57 @@
+import { computed, ref } from "vue";
+import { splitLyricsByMoras } from "@/sing/domain";
+import { useStore } from "@/store";
+import { Note } from "@/store/type";
+
+// 歌詞入力のロジック。
+export const useLyricInput = () => {
+  const store = useStore();
+  const notes = computed(() => store.getters.SELECTED_TRACK.notes);
+
+  // プレビュー中の歌詞。NoteID -> 歌詞のMap。
+  const previewLyrics = ref<Map<string, string>>(new Map());
+  // 入力中の歌詞を分割してプレビューに反映する。
+  const splitAndUpdatePreview = (lyric: string, note: Note) => {
+    // TODO: マルチトラック対応
+    const inputNoteIndex = store.state.tracks[0].notes.findIndex(
+      (value) => value.id === note.id
+    );
+    if (inputNoteIndex === -1) {
+      throw new Error("inputNoteIndex is -1.");
+    }
+    const newPreviewLyrics = new Map();
+
+    const lyricPerNote = splitLyricsByMoras(
+      lyric,
+      store.state.tracks[0].notes.length - inputNoteIndex
+    );
+    for (const [index, mora] of lyricPerNote.entries()) {
+      const noteIndex = inputNoteIndex + index;
+      if (noteIndex >= notes.value.length) {
+        // splitLyricsByMorasで制限してるのでUnreachableのはず。
+        throw new Error("noteIndex is out of range.");
+      }
+      const note = notes.value[noteIndex];
+      newPreviewLyrics.set(note.id, mora);
+    }
+    previewLyrics.value = newPreviewLyrics;
+  };
+  // プレビューの歌詞を確定する。
+  const commitPreviewLyrics = () => {
+    const newNotes: Note[] = [];
+    if (previewLyrics.value.size === 0) {
+      return;
+    }
+    for (const [noteId, lyric] of previewLyrics.value) {
+      const note = notes.value.find((value) => value.id === noteId);
+      if (!note) {
+        throw new Error("note is undefined.");
+      }
+      newNotes.push({ ...note, lyric });
+    }
+    previewLyrics.value = new Map();
+    store.dispatch("COMMAND_UPDATE_NOTES", { notes: newNotes });
+  };
+
+  return { previewLyrics, splitAndUpdatePreview, commitPreviewLyrics };
+};

src/sing/domain.ts

@@ -1,4 +1,5 @@
 import { Note, Phrase, Score, Tempo, TimeSignature } from "@/store/type";
+import { convertHiraToKana, convertLongVowel } from "@/store/utility";
 
 const BEAT_TYPES = [2, 4, 8, 16];
 const MIN_BPM = 40;
@@ -334,3 +335,56 @@ export function selectPriorPhrase(
   // 再生位置より前のPhrase
   return sortedPhrases[0];
 }
+
+// 参考：https://github.com/VOICEVOX/voicevox_core/blob/0848630d81ae3e917c6ff2038f0b15bbd4270702/crates/voicevox_core/src/user_dict/word.rs#L83-L90
+export const moraPattern = new RegExp(
+  "(?:" +
+    "[イ][ェ]|[ヴ][ャュョ]|[トド][ゥ]|[テデ][ィャュョ]|[デ][ェ]|[クグ][ヮ]|" + // rule_others
+    "[キシチニヒミリギジビピ][ェャュョ]|" + // rule_line_i
+    "[ツフヴ][ァ]|[ウスツフヴズ][ィ]|[ウツフヴ][ェォ]|" + // rule_line_u
+    "[ァ-ヴー]" + // rule_one_mora
+    ")",
+  "g"
+);
+
+/**
+ * 文字列をモーラと非モーラに分割する。
+ * 例："カナ漢字" -> ["カ", "ナ", "漢字"]
+ *
+ * @param text 分割する文字列
+ * @param maxLength 最大の要素数
+ * @returns 分割された文字列
+ */
+export const splitLyricsByMoras = (
+  text: string,
+  maxLength = Infinity
+): string[] => {
+  const baseMoraAndNonMoras: string[] = [];
+  const matches = convertLongVowel(convertHiraToKana(text)).matchAll(
+    moraPattern
+  );
+  let lastMatchEnd = 0;
+  // aアbイウc で説明：
+  for (const match of matches) {
+    // 直前のモーラとの間 = a、b、空文字列
+    baseMoraAndNonMoras.push(text.substring(lastMatchEnd, match.index));
+    // モーラ = ア、イ、ウ
+    baseMoraAndNonMoras.push(match[0]);
+    if (match.index == undefined) {
+      throw new Error("match.index is undefined.");
+    }
+    lastMatchEnd = match.index + match[0].length;
+  }
+  // 最後のモーラから後 = cの部分
+  baseMoraAndNonMoras.push(text.substring(lastMatchEnd));
+  // 空文字列を削除（モーラが連続する時やモーラで始まったり終わったりする時に発生）
+  const moraAndNonMoras = baseMoraAndNonMoras.filter((value) => value !== "");
+  if (moraAndNonMoras.length > maxLength) {
+    moraAndNonMoras.splice(
+      maxLength - 1,
+      moraAndNonMoras.length,
+      moraAndNonMoras.slice(maxLength - 1).join("")
+    );
+  }
+  return moraAndNonMoras;
+};

tests/unit/lib/splitLyricsByMoras.spec.ts

@@ -0,0 +1,34 @@
+import { expect, it } from "vitest";
+import { splitLyricsByMoras } from "@/sing/domain";
+
+it("モーラを分割する", () => {
+  expect(splitLyricsByMoras("アイウエオ")).toEqual([
+    "ア",
+    "イ",
+    "ウ",
+    "エ",
+    "オ",
+  ]);
+  expect(splitLyricsByMoras("キャット")).toEqual(["キャ", "ッ", "ト"]);
+});
+it("平仮名対応", () => {
+  expect(splitLyricsByMoras("あいうえお")).toEqual([
+    "ア",
+    "イ",
+    "ウ",
+    "エ",
+    "オ",
+  ]);
+});
+it("長音対応", () => {
+  expect(splitLyricsByMoras("アーイー")).toEqual(["ア", "ア", "イ", "イ"]);
+});
+
+it("モーラ以外が混ざっても残す", () => {
+  expect(splitLyricsByMoras("アaイ")).toEqual(["ア", "a", "イ"]);
+  expect(splitLyricsByMoras("bウc")).toEqual(["b", "ウ", "c"]);
+  expect(splitLyricsByMoras("愛")).toEqual(["愛"]);
+});
+it("最大の要素数を指定できる", () => {
+  expect(splitLyricsByMoras("アイウエオ", 3)).toEqual(["ア", "イ", "ウエオ"]);
+});