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

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-updated="onNoteLyricUpdated($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-updated="onNoteLyricUpdated($event, note)"
+        @lyric-blur="onNoteLyricBlur()"
       />
     </div>
     <SequencerPitch
@@ -233,6 +240,7 @@ import {
   getMeasureDuration,
   getNoteDuration,
   getNumOfMeasures,
+  splitMorasAndNonMoras,
 } from "@/sing/domain";
 import {
   getKeyBaseHeight,
@@ -750,6 +758,47 @@ const onNoteLyricMouseDown = (event: MouseEvent, note: Note) => {
   }
 };
 
+const previewLyrics = ref<Map<string, string>>(new Map());
+const onNoteLyricUpdated = (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 moraAndNonMoras = splitMorasAndNonMoras(
+    lyric,
+    store.state.tracks[0].notes.length - inputNoteIndex
+  );
+  for (const [index, mora] of moraAndNonMoras.entries()) {
+    const noteIndex = inputNoteIndex + index;
+    if (noteIndex >= notes.value.length) {
+      break;
+    }
+    const note = notes.value[noteIndex];
+    newPreviewLyrics.set(note.id, mora);
+  }
+  previewLyrics.value = newPreviewLyrics;
+};
+const onNoteLyricBlur = () => {
+  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) {
+      continue;
+    }
+    newNotes.push({ ...note, lyric });
+  }
+  previewLyrics.value = new Map();
+  store.dispatch("COMMAND_UPDATE_NOTES", { notes: newNotes });
+};
+
 const onMouseDown = (event: MouseEvent) => {
   if (!isSelfEventTarget(event)) {
     return;

src/components/Sing/SequencerNote.vue

@@ -3,6 +3,7 @@
     class="note"
     :class="{
       selected: noteState === 'SELECTED',
+      'with-preview-lyric': !!props.previewLyric,
       overlapping: hasOverlappingError,
       'invalid-phrase': hasPhraseError,
       'below-pitch': showPitch,
@@ -20,6 +21,14 @@
     </div>
     <!-- TODO: ピッチの上に歌詞入力のinputが表示されるようにする -->
     <div
+      v-if="props.previewLyric"
+      class="note-lyric preview-lyric"
+      data-testid="note-lyric"
+    >
+      {{ props.previewLyric }}
+    </div>
+    <div
+      v-else
       class="note-lyric"
       data-testid="note-lyric"
       @mousedown="onLyricMouseDown"
@@ -28,9 +37,10 @@
     </div>
     <input
       v-if="showLyricInput"
-      v-model.lazy.trim="lyric"
       v-focus
+      :value="lyric"
       class="note-lyric-input"
+      @input="onLyricInput"
       @mousedown.stop
       @dblclick.stop
       @keydown.stop="onLyricInputKeyDown"
@@ -88,6 +98,7 @@ const props = withDefaults(
   defineProps<{
     note: Note;
     isSelected: boolean;
+    previewLyric: string | null;
   }>(),
   {
     isSelected: false,
@@ -100,6 +111,8 @@ const emit =
     (name: "rightEdgeMousedown", event: MouseEvent): void;
     (name: "leftEdgeMousedown", event: MouseEvent): void;
     (name: "lyricMouseDown", event: MouseEvent): void;
+    (name: "lyricUpdated", text: string): void;
+    (name: "lyricBlur"): void;
   }>();
 
 const store = useStore();
@@ -145,18 +158,8 @@ 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] });
-  },
-});
+const lyric = computed(() => temporaryLyric.value ?? props.note.lyric);
+const temporaryLyric = ref<string | undefined>(undefined);
 const showLyricInput = computed(() => {
   return state.editingLyricNoteId === props.note.id;
 });
@@ -255,6 +258,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("lyricUpdated", temporaryLyric.value);
 };
 </script>
 
@@ -274,7 +283,8 @@ const onLyricInputBlur = () => {
     }
   }
 
-  &.selected {
+  &.selected,
+  &.with-preview-lyric {
     // 色は仮
     .note-bar {
       background-color: hsl(130, 35%, 90%);

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,50 @@ export function selectPriorPhrase(
   // 再生位置より前のPhrase
   return sortedPhrases[0];
 }
+
+export const moraPattern = new RegExp(
+  "(?:" +
+    "[イ][ェ]|[ヴ][ャュョ]|[トド][ゥ]|[テデ][ィャュョ]|[デ][ェ]|[クグ][ヮ]|" + // rule_others
+    "[キシチニヒミリギジビピ][ェャュョ]|" + // rule_line_i
+    "[ツフヴ][ァ]|[ウスツフヴズ][ィ]|[ウツフヴ][ェォ]|" + // rule_line_u
+    "[ァ-ヴー]" + // rule_one_mora
+    ")",
+  "g"
+);
+
+/**
+ * 文字列をモーラと非モーラに分割する。
+ * 例："カナ漢字" -> ["カ", "ナ", "漢字"]
+ *
+ * @param text 分割する文字列
+ * @param maxLength 最大の要素数（0の場合は制限なし）
+ * @returns 分割された文字列
+ */
+export const splitMorasAndNonMoras = (
+  text: string,
+  maxLength = 0
+): string[] => {
+  const baseMoraAndNonMoras: string[] = [];
+  const matches = convertLongVowel(convertHiraToKana(text)).matchAll(
+    moraPattern
+  );
+  let lastMatchEnd = 0;
+  for (const match of matches) {
+    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;
+  }
+  baseMoraAndNonMoras.push(text.substring(lastMatchEnd));
+  const moraAndNonMoras = baseMoraAndNonMoras.filter((value) => value !== "");
+  if (maxLength !== 0 && moraAndNonMoras.length > maxLength) {
+    moraAndNonMoras.splice(
+      maxLength - 1,
+      moraAndNonMoras.length,
+      moraAndNonMoras.slice(maxLength - 1).join("")
+    );
+  }
+  return moraAndNonMoras;
+};

tests/unit/lib/splitMorasAndNonMoras.spec.ts

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