ダブルクリック判定処理のリファクタリング

src/components/Sing/ScoreSequencer.vue

@@ -243,6 +243,9 @@ import {
   ZOOM_Y_MAX,
   ZOOM_Y_STEP,
   PREVIEW_SOUND_DURATION,
+  DoubleClickDetector,
+  NoteAreaInfo,
+  GridAreaInfo,
 } from "@/sing/viewHelper";
 import SequencerRuler from "@/components/Sing/SequencerRuler.vue";
 import SequencerKeys from "@/components/Sing/SequencerKeys.vue";
@@ -367,6 +370,7 @@ const phraseInfos = computed(() => {
     return { key, x: startX, width: endX - startX };
   });
 });
+
 const showPitch = computed(() => {
   return state.experimentalSetting.showPitchInSongEditor;
 });
@@ -392,11 +396,10 @@ let executePreviewProcess = false;
 let edited = false; // プレビュー終了時にstore.stateの更新を行うかどうかを表す変数
 
 // ダブルクリック
-let mouseDownNoteId: string | undefined;
-const clickedNoteIds: [string | undefined, string | undefined] = [
-  undefined,
-  undefined,
-];
+let mouseDownAreaInfo: NoteAreaInfo | GridAreaInfo | undefined;
+const doubleClickDetector = new DoubleClickDetector<
+  NoteAreaInfo | GridAreaInfo
+>();
 let ignoreDoubleClick = false;
 
 // 入力を補助する線
@@ -697,8 +700,8 @@ const onNoteBarMouseDown = (event: MouseEvent, note: Note) => {
     return;
   }
   if (event.button === 0) {
+    mouseDownAreaInfo = new NoteAreaInfo(note.id);
     startPreview(event, "MOVE", note);
-    mouseDownNoteId = note.id;
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
   }
@@ -709,8 +712,8 @@ const onNoteLeftEdgeMouseDown = (event: MouseEvent, note: Note) => {
     return;
   }
   if (event.button === 0) {
+    mouseDownAreaInfo = new NoteAreaInfo(note.id);
     startPreview(event, "RESIZE_LEFT", note);
-    mouseDownNoteId = note.id;
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
   }
@@ -721,8 +724,8 @@ const onNoteRightEdgeMouseDown = (event: MouseEvent, note: Note) => {
     return;
   }
   if (event.button === 0) {
+    mouseDownAreaInfo = new NoteAreaInfo(note.id);
     startPreview(event, "RESIZE_RIGHT", note);
-    mouseDownNoteId = note.id;
   } else if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
   }
@@ -732,27 +735,27 @@ const onNoteLyricMouseDown = (event: MouseEvent, note: Note) => {
   if (!isSelfEventTarget(event)) {
     return;
   }
+  if (event.button === 0) {
+    mouseDownAreaInfo = new NoteAreaInfo(note.id);
+  }
   if (!state.selectedNoteIds.has(note.id)) {
     selectOnlyThis(note);
   }
-  if (event.button === 0) {
-    mouseDownNoteId = note.id;
-  }
 };
 
 const onMouseDown = (event: MouseEvent) => {
   if (!isSelfEventTarget(event)) {
     return;
   }
   if (event.button === 0) {
+    mouseDownAreaInfo = new GridAreaInfo();
     if (event.shiftKey) {
       isRectSelecting.value = true;
       rectSelectStartX.value = cursorX.value;
       rectSelectStartY.value = cursorY.value;
     } else {
       startPreview(event, "ADD");
     }
-    mouseDownNoteId = undefined;
   } else {
     store.dispatch("DESELECT_ALL_NOTES");
   }
@@ -784,20 +787,15 @@ const onMouseUp = (event: MouseEvent) => {
   if (event.button !== 0) {
     return;
   }
-  clickedNoteIds[0] = clickedNoteIds[1];
-  clickedNoteIds[1] = mouseDownNoteId;
-  if (event.detail === 1) {
-    ignoreDoubleClick = false;
-  }
-  if (nowPreviewing.value && edited) {
-    ignoreDoubleClick = true;
+  if (mouseDownAreaInfo) {
+    doubleClickDetector.recordClick(event.detail, mouseDownAreaInfo);
   }
+  ignoreDoubleClick = nowPreviewing.value && edited;
 
   if (isRectSelecting.value) {
     rectSelect();
     return;
   }
-
   if (!nowPreviewing.value) {
     return;
   }
@@ -860,17 +858,18 @@ const rectSelect = () => {
 };
 
 const onDoubleClick = () => {
-  if (
-    ignoreDoubleClick ||
-    clickedNoteIds[0] !== clickedNoteIds[1] ||
-    clickedNoteIds[1] == undefined
-  ) {
+  if (ignoreDoubleClick) {
     return;
   }
-
-  const noteId = clickedNoteIds[1];
-  if (state.editingLyricNoteId !== noteId) {
-    store.dispatch("SET_EDITING_LYRIC_NOTE_ID", { noteId });
+  const doubleClickInfo = doubleClickDetector.detect();
+  if (doubleClickInfo) {
+    const areaInfo = doubleClickInfo.clickInfos[0].areaInfo;
+    if (
+      areaInfo.type === "note" &&
+      areaInfo.noteId !== state.editingLyricNoteId
+    ) {
+      store.dispatch("SET_EDITING_LYRIC_NOTE_ID", { noteId: areaInfo.noteId });
+    }
   }
 };
 

src/sing/viewHelper.ts

@@ -116,3 +116,65 @@ export const getStyleDescription = (style: StyleInfo) => {
   }
   return description.join("・");
 };
+
+interface AreaInfo {
+  readonly id: string;
+}
+
+type ClickInfo<T extends AreaInfo> = {
+  readonly clickCount: number;
+  readonly areaInfo: T;
+};
+
+type DoubleClickInfo<T extends AreaInfo> = {
+  readonly clickInfos: [ClickInfo<T>, ClickInfo<T>];
+};
+
+export class DoubleClickDetector<T extends AreaInfo> {
+  private clickInfos: ClickInfo<T>[] = [];
+
+  recordClick(clickCount: number, areaInfo: T) {
+    if (clickCount === 1) {
+      this.clickInfos = [];
+    }
+    this.clickInfos.push({ clickCount, areaInfo });
+  }
+
+  detect(): DoubleClickInfo<T> | undefined {
+    if (this.clickInfos.length < 2) {
+      return undefined;
+    }
+    const clickInfo1 = this.clickInfos[this.clickInfos.length - 2];
+    const clickInfo2 = this.clickInfos[this.clickInfos.length - 1];
+    if (
+      clickInfo1.clickCount === 1 &&
+      clickInfo2.clickCount === 2 &&
+      clickInfo1.areaInfo.id === clickInfo2.areaInfo.id
+    ) {
+      return { clickInfos: [clickInfo1, clickInfo2] };
+    }
+    return undefined;
+  }
+}
+
+export class NoteAreaInfo implements AreaInfo {
+  readonly type: "note";
+  readonly id: string;
+  readonly noteId: string;
+
+  constructor(noteId: string) {
+    this.type = "note";
+    this.id = `NOTE-${noteId}`;
+    this.noteId = noteId;
+  }
+}
+
+export class GridAreaInfo implements AreaInfo {
+  readonly type: "grid";
+  readonly id: string;
+
+  constructor() {
+    this.type = "grid";
+    this.id = "GRID";
+  }
+}