From 0be6de9691faec46a816d5686a9e4b5b54a956cc Mon Sep 17 00:00:00 2001
From: Nanashi <sevenc7c@sevenc7c.com>
Date: Wed, 17 Apr 2024 23:24:21 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=BD=E3=83=B3=E3=82=B0=EF=BC=9A=E6=AD=8C?=
 =?UTF-8?q?=E8=A9=9E=E3=81=AE=E4=B8=80=E6=8B=AC=E5=85=A5=E5=8A=9B=E3=82=92?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0=20(#1952)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* WIP

* Add: 実装

* Add: テストを追加

* Change: splitMorasAndNonMoras -> splitLyricsByMoras

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: with-preview-lyric -> preview-lyric

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Code: 参考を追加

* Refactor: splitLyricsByMorasを読みやすく

* Refactor: もう少し詳しく

* Add: テストケースを追加

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: lyricUpdated -> lyricUpdate

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Code: lyric周りのコメントを追加

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Code: ScoreSequencerにコメントを追加

* Refactor: useLyricInputに切り出し

* Add: TODOコメントを追加

* Code: 日本語を修正

* Change: !! -> != undefiend

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: displayedLyric -> lyricToDisplay

* Change: lyricUpdate -> lyric-input

* Change: 良い感じの名前に

* Code: 可読性を向上

* Improve: ひらがな/カタカナを保持するように

* Fix: 長いときの表示を修正

* Code: ドキュメントを追加

* Refactor: v-elseにまとめる

* Refactor: splitLyricsByMorasをリファクタ

* いくつか更新

* fmt

---------

Co-authored-by: Hiroshiba <Hiroshiba@users.noreply.github.com>
Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 src/components/Sing/ScoreSequencer.vue    | 20 ++++++++
 src/components/Sing/SequencerNote.vue     | 62 +++++++++++++++--------
 src/composables/useLyricInput.ts          | 57 +++++++++++++++++++++
 src/sing/domain.ts                        | 59 +++++++++++++++++++++
 src/store/utility.ts                      |  9 +++-
 tests/unit/lib/splitLyricsByMoras.spec.ts | 49 ++++++++++++++++++
 6 files changed, 235 insertions(+), 21 deletions(-)
 create mode 100644 src/composables/useLyricInput.ts
 create mode 100644 tests/unit/lib/splitLyricsByMoras.spec.ts

diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index e9d54f98e3..006977035b 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/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
@@ -264,6 +271,7 @@ import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { createLogger } from "@/domain/frontend/log";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { useShiftKey } from "@/composables/useModifierKey";
+import { useLyricInput } from "@/composables/useLyricInput";
 
 type PreviewMode = "ADD" | "MOVE" | "RESIZE_RIGHT" | "RESIZE_LEFT";
 
@@ -394,6 +402,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);
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
index 1ee9a2bd48..6467bc9289 100644
--- a/src/components/Sing/SequencerNote.vue
+++ b/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,
@@ -19,24 +20,25 @@
       <ContextMenu ref="contextMenu" :menudata="contextMenuData" />
     </div>
     <!-- TODO: ピッチの上に歌詞入力のinputが表示されるようにする -->
-    <div
-      class="note-lyric"
-      data-testid="note-lyric"
-      @mousedown="onLyricMouseDown"
-    >
-      {{ lyric }}
-    </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"
       @blur="onLyricInputBlur"
     />
     <template v-else>
+      <div
+        class="note-lyric"
+        data-testid="note-lyric"
+        @mousedown="onLyricMouseDown"
+      >
+        {{ lyricToDisplay }}
+      </div>
       <!-- エラー内容を表示 -->
       <QTooltip
         v-if="hasOverlappingError"
@@ -88,6 +90,7 @@ const props = withDefaults(
   defineProps<{
     note: Note;
     isSelected: boolean;
+    previewLyric: string | null;
   }>(),
   {
     isSelected: false,
@@ -99,6 +102,8 @@ const emit = defineEmits<{
   (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();
@@ -144,18 +149,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;
 });
@@ -254,6 +254,15 @@ 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) => {
+  if (!(event.target instanceof HTMLInputElement)) {
+    throw new Error("Invalid event target");
+  }
+  temporaryLyric.value = event.target.value;
+  emit("lyricInput", temporaryLyric.value);
 };
 </script>
 
@@ -285,6 +294,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 {
diff --git a/src/composables/useLyricInput.ts b/src/composables/useLyricInput.ts
new file mode 100644
index 0000000000..ffaf85c144
--- /dev/null
+++ b/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 };
+};
diff --git a/src/sing/domain.ts b/src/sing/domain.ts
index c2c1020952..8e09985780 100644
--- a/src/sing/domain.ts
+++ b/src/sing/domain.ts
@@ -1,4 +1,5 @@
 import { calculateHash } from "./utility";
+import { convertLongVowel } from "@/store/utility";
 import {
   Note,
   Phrase,
@@ -383,3 +384,61 @@ 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
+    "[い][ぇ]|[ゃゅょ]|[とど][ぅ]|[てで][ぃゃゅょ]|[で][ぇ]|[くぐ][ゎ]|" + // 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 moraAndNonMoras: string[] = [];
+  const matches = convertLongVowel(text).matchAll(moraPattern);
+  let lastMatchEnd = 0;
+  // aアbイウc で説明：
+  for (const match of matches) {
+    if (match.index == undefined) {
+      throw new Error("match.index is undefined.");
+    }
+    // 直前のモーラとの間 = a、b、空文字列
+    if (lastMatchEnd < match.index) {
+      moraAndNonMoras.push(text.substring(lastMatchEnd, match.index));
+    }
+    // モーラ = ア、イ、ウ
+    moraAndNonMoras.push(match[0]);
+    lastMatchEnd = match.index + match[0].length;
+  }
+  // 最後のモーラから後 = cの部分
+  if (lastMatchEnd < text.length) {
+    moraAndNonMoras.push(text.substring(lastMatchEnd));
+  }
+  // 指定した最大要素数より多い場合は配列を削る
+  if (moraAndNonMoras.length > maxLength) {
+    moraAndNonMoras.splice(
+      maxLength - 1,
+      moraAndNonMoras.length,
+      moraAndNonMoras.slice(maxLength - 1).join(""),
+    );
+  }
+  return moraAndNonMoras;
+};
diff --git a/src/store/utility.ts b/src/store/utility.ts
index 1f22537fde..6689f23d19 100644
--- a/src/store/utility.ts
+++ b/src/store/utility.ts
@@ -458,7 +458,14 @@ export const convertLongVowel = (text: string): string => {
     .replace(/(?<=[エケセテネヘメレェゲゼデベペ]ー*)ー/g, "エ")
     .replace(/(?<=[オコソトノホモヨロヲョォゴゾドボポ]ー*)ー/g, "オ")
     .replace(/(?<=[ン]ー*)ー/g, "ン")
-    .replace(/(?<=[ッ]ー*)ー/g, "ッ");
+    .replace(/(?<=[ッ]ー*)ー/g, "ッ")
+    .replace(/(?<=[あかさたなはまやらわゃぁがざだばぱ]ー*)ー/g, "あ")
+    .replace(/(?<=[いきしちにひみりぃぎじぢびぴ]ー*)ー/g, "い")
+    .replace(/(?<=[うくすつぬふむゆるゅぅぐずづぶぷ]ー*)ー/g, "う")
+    .replace(/(?<=[えけせてねへめれぇげぜでべぺ]ー*)ー/g, "え")
+    .replace(/(?<=[おこそとのほもよろをょぉごぞどぼぽ]ー*)ー/g, "お")
+    .replace(/(?<=[ん]ー*)ー/g, "ん")
+    .replace(/(?<=[っ]ー*)ー/g, "っ");
 };
 
 // based on https://github.com/BBWeb/path-browserify/blob/win-version/index.js
diff --git a/tests/unit/lib/splitLyricsByMoras.spec.ts b/tests/unit/lib/splitLyricsByMoras.spec.ts
new file mode 100644
index 0000000000..c005c03cf3
--- /dev/null
+++ b/tests/unit/lib/splitLyricsByMoras.spec.ts
@@ -0,0 +1,49 @@
+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([
+    "ア",
+    "ア",
+    "イ",
+    "イ",
+    "イ",
+  ]);
+  expect(splitLyricsByMoras("あーいーー")).toEqual([
+    "あ",
+    "あ",
+    "い",
+    "い",
+    "い",
+  ]);
+});
+
+it("モーラ以外が混ざっても残す", () => {
+  expect(splitLyricsByMoras("アaイ")).toEqual(["ア", "a", "イ"]);
+  expect(splitLyricsByMoras("bウc")).toEqual(["b", "ウ", "c"]);
+  expect(splitLyricsByMoras("愛")).toEqual(["愛"]);
+  // 先頭の長音はモーラとして扱わない
+  expect(splitLyricsByMoras("ー")).toEqual(["ー"]);
+});
+it("最大の要素数を指定できる", () => {
+  expect(splitLyricsByMoras("アイウエオ", 3)).toEqual(["ア", "イ", "ウエオ"]);
+});