Fix long note adding procedure

web/src/Config/ModeSelectHandler.ts

@@ -1,12 +1,9 @@
-import { store, dispatch } from "~StateStore/store";
+import { store } from "~StateStore/store";
 import { Mode } from "~NoteView/types";
-import { CancellationToken, runAddLongNoteProcess } from "~runAddLongNoteProcess";
-import { LongNoteAction } from "~StateStore/_gen/longNote_action.ts";
+import { cancleEditingLongNote } from "~NoteView/longNoteEditHandler";
 
 export class ModeSelectHandler {
   private prevMode?: Mode;
-  private static longNoteProcessCancellationToken?: CancellationToken;
-  private static runAddLongNoteProcessPromise?: ReturnType<typeof runAddLongNoteProcess>;
   constructor() {
     store.subscribe(() => {
       const { mode } = store.getState().modeState;
@@ -20,33 +17,8 @@ export class ModeSelectHandler {
     if (previousMode !== nextMode) {
       console.log(`mode changed. ${previousMode}-> ${nextMode}`);
       if (previousMode === 'longNoteEdit') {
-        this.cancelAddLongNoteProcess();
-      }
-      if (nextMode === 'longNoteEdit' && !this.runAddLongNoteProcessPromise) {
-        this.initRunAddLongNoteProcess();
+        cancleEditingLongNote();
       }
     }
   }
-
-  private static initRunAddLongNoteProcess() {
-    this.longNoteProcessCancellationToken = new CancellationToken();
-    this.runAddLongNoteProcessPromise = runAddLongNoteProcess(this.longNoteProcessCancellationToken)
-      .catch((reason) => {
-        if (reason !== 'token canceled' && reason.message !== 'canceled') {
-          throw reason;
-        }
-        this.cancelAddLongNoteProcess();
-      })
-      .finally(() => {
-        if (store.getState().modeState.mode === 'longNoteEdit') {
-          this.initRunAddLongNoteProcess();
-        }
-      });
-  }
-
-  public static cancelAddLongNoteProcess() {
-    this.longNoteProcessCancellationToken?.cancel();
-    this.runAddLongNoteProcessPromise = undefined;
-    dispatch(LongNoteAction.finishEditingLongNote());
-  }
 }

web/src/NoteView/BarRenderer.ts

@@ -4,9 +4,9 @@ import { dispatch, store } from "~StateStore/store";
 import { BarAction } from "~StateStore/_gen/bar_action.ts";
 import { SelectNoteAction } from "~StateStore/_gen/selectNote_action.ts";
 import uuid from "~utils/uuid";
-import { ModeSelectHandler } from "~Config/ModeSelectHandler";
 import { removeNote } from "~utils/note";
 import { batchActions } from "redux-batched-actions";
+import { handleLeftClick, cancleEditingLongNote } from "./longNoteEditHandler";
 
 interface BarRendererProps {
   bar: Bar;
@@ -69,6 +69,7 @@ export class BarRenderer extends Drawable<BarRendererProps> {
         })));
 
         if (mode === 'longNoteEdit') {
+          handleLeftClick(guideDotOnMouse);
           break;
         }
 
@@ -85,8 +86,8 @@ export class BarRenderer extends Drawable<BarRendererProps> {
       } break;
 
       case 2: { // right click
-        if (mode === 'longNoteEdit') {
-          ModeSelectHandler.cancelAddLongNoteProcess();
+        if (store.getState().longNoteState.editingLongNote) {
+          cancleEditingLongNote();
         }
 
         const noteOnBeatKey = this.getNoteOnBeatKey(beatKey)

web/src/NoteView/longNoteEditHandler.ts

@@ -0,0 +1,92 @@
+import { Position, LongNote, Note } from "./types";
+import { store, dispatch } from "~StateStore/store";
+import { getNoteOnPosition } from "~utils/note";
+import { SelectNoteAction } from "~StateStore/_gen/selectNote_action.ts";
+import { LongNoteAction } from "~StateStore/_gen/longNote_action.ts";
+import uuid from "~utils/uuid";
+import { BarAction } from "~StateStore/_gen/bar_action.ts";
+import { getBarIndex } from "~utils/bar";
+import { batchActions } from "redux-batched-actions";
+import { List } from "immutable";
+
+function setStartNote(position: Position, noteOnPosition?: Note) {
+  if (noteOnPosition) {
+    const newLongNote = new LongNote({
+      id: uuid(),
+      startNote: noteOnPosition,
+    })
+
+    dispatch(batchActions([
+      LongNoteAction.updateEditingLongNote(newLongNote),
+      SelectNoteAction.selectNote(noteOnPosition.id),
+    ]))
+    return;
+  }
+
+  const newNote = new Note({
+    position,
+    id: uuid(),
+    type: store.getState().modeState.noteTypeMode
+  });
+
+  const newLongNote = new LongNote({
+    id: uuid(),
+    startNote: newNote,
+  })
+
+  dispatch(batchActions([
+    BarAction.addNote(getBarIndex(position.barId), newNote),
+    LongNoteAction.updateEditingLongNote(newLongNote),
+    SelectNoteAction.selectNote(newNote.id),
+  ]));
+}
+
+export function cancleEditingLongNote() {
+  dispatch(LongNoteAction.finishEditingLongNote());
+}
+
+export function handleLeftClick(position: Position) {
+  const editingLongNote = store.getState().longNoteState.editingLongNote;
+  const noteOnPosition = getNoteOnPosition(position);
+
+  if (!editingLongNote) {
+    setStartNote(position, noteOnPosition);
+    return;
+  }
+
+  if (noteOnPosition) {
+    dispatch(batchActions([
+      LongNoteAction.addLongNote((editingLongNote as LongNote).set('endNote', noteOnPosition)),
+      SelectNoteAction.selectNote(noteOnPosition.id),
+      LongNoteAction.finishEditingLongNote(),
+    ]))
+  }
+
+  const middlePoints: List<Position> = editingLongNote.middlePoints || List();
+  const lastMiddlePoint = middlePoints.last(0) || undefined;
+  console.log(middlePoints.last(0), position);
+  const isLastMiddlePointClicked = lastMiddlePoint?.barId === position.barId
+    && lastMiddlePoint?.beat === position.beat
+    && lastMiddlePoint?.key === position.key;
+
+  if (isLastMiddlePointClicked) {
+    middlePoints.pop();
+    const newNote = new Note({
+      position,
+      id: uuid(),
+      type: store.getState().modeState.noteTypeMode
+    });
+
+    dispatch(batchActions([
+      BarAction.addNote(getBarIndex(newNote.position.barId), newNote),
+      LongNoteAction.addLongNote((editingLongNote as LongNote)
+        .set('middlePoints', middlePoints.pop())
+        .set('endNote', newNote)),
+      SelectNoteAction.selectNote(newNote.id),
+      LongNoteAction.finishEditingLongNote(),
+    ]))
+    return;
+  }
+
+  dispatch(LongNoteAction.updateEditingLongNote((editingLongNote as LongNote).set('middlePoints', middlePoints.push(position))));
+}

web/src/NoteView/types.ts

@@ -45,12 +45,12 @@ export class LongNote extends Record<{
   id: string;
   startNote: Note;
   endNote: Note;
-  middlePoints: Position[],
+  middlePoints: List<Position>,
 }>({
   id: uuid(),
   endNote: undefined as unknown as Note,
   startNote: undefined as unknown as Note,
-  middlePoints: [],
+  middlePoints: List(),
 }) { };
 
 export type WorldCoord = { worldX: number; worldY: number; };

web/src/StateStore/_gen/actionTypeCategory.ts

@@ -1,5 +1,11 @@
 export namespace ActionTypeCategory {
   export const undoableActionTypes = [
+    'ADD_LONG_NOTE',
+    'UPDATE_EDITING_LONG_NOTE',
+    'FINISH_EDITING_LONG_NOTE',
+    'REMOVE_LONG_NOTE',
+    'REMOVE_LONG_NOTES_ON_BAR',
+    'REMOVE_OVERFLOWED_LONG_NOTES',
     'PUSH_NEW_BAR',
     'INSERT_NEW_BAR',
     'ADD_BAR',
@@ -10,9 +16,5 @@ export namespace ActionTypeCategory {
     'REMOVE_NOTES_ON_BAR',
     'REMOVE_OVERFLOWED_NOTES',
     'CHANGE_NOTE_TYPE',
-    'ADD_LONG_NOTE',
-    'REMOVE_LONG_NOTE',
-    'REMOVE_LONG_NOTES_ON_BAR',
-    'REMOVE_OVERFLOWED_LONG_NOTES',
   ] as const
 }

web/src/StateStore/longNote.gen

@@ -1,7 +1,7 @@
 addLongNote(longNote: LongNote) -undoable
 updateLongNote(longNote: LongNote)
-updateEditingLongNote(longNote: Partial<LongNote>)
-finishEditingLongNote()
+updateEditingLongNote(longNote: Partial<LongNote>) -undoable
+finishEditingLongNote() -undoable
 removeLongNote(longNote: LongNote) -undoable
 removeLongNotesOnBar(barId: string) -undoable
 removeOverflowedLongNotes(barId: string, beat: number) -undoable