Refactor mouse gesture to hooks

.vscode/settings.json

@@ -13,5 +13,6 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
-  "testing.openTesting": "neverOpen"
+  "testing.openTesting": "neverOpen",
+  "testing.automaticallyOpenTestResults": "neverOpen"
 }

app/src/actions/arrangeView.ts

@@ -11,24 +11,8 @@ import { isEventInRange } from "../helpers/filterEvents"
 import clipboard from "../services/Clipboard"
 import RootStore from "../stores/RootStore"
 import Track from "../track"
-import { pushHistory } from "./history"
-import { transposeNotes } from "./song"
 import { batchUpdateNotesVelocity, BatchUpdateOperation } from "./track"
 
-export const arrangeResetSelection =
-  ({ arrangeViewStore }: RootStore) =>
-  () => {
-    arrangeViewStore.selection = null
-    arrangeViewStore.selectedEventIds = {}
-  }
-
-export const arrangeStartSelection =
-  ({ arrangeViewStore }: RootStore) =>
-  () => {
-    arrangeViewStore.selection = null
-    arrangeViewStore.selectedEventIds = {}
-  }
-
 export const arrangeResizeSelection =
   ({
     song: { tracks },
@@ -249,12 +233,10 @@ function getEventsInSelection(tracks: Track[], selection: ArrangeSelection) {
 }
 
 export const arrangeTransposeSelection =
-  (rootStore: RootStore) => (deltaPitch: number) => {
-    pushHistory(rootStore)()
-    transposeNotes(rootStore)(
-      deltaPitch,
-      rootStore.arrangeViewStore.selectedEventIds,
-    )
+  ({ song, pushHistory, arrangeViewStore: { selectedEventIds } }: RootStore) =>
+  (deltaPitch: number) => {
+    pushHistory()
+    song.transposeNotes(deltaPitch, selectedEventIds)
   }
 
 export const arrangeDuplicateSelection =

app/src/actions/hotkey.ts

@@ -1,86 +1,102 @@
-// global keyboard shortcuts or menu actions
-
-import {
-  isControlEventsClipboardData,
-  isPianoNotesClipboardData,
-} from "../clipboard/clipboardTypes"
-import Clipboard from "../services/Clipboard"
-import RootStore from "../stores/RootStore"
 import {
   arrangeCopySelection,
   arrangeDeleteSelection,
   arrangePasteSelection,
-} from "./arrangeView"
+} from "../actions/arrangeView"
 import {
   copyControlSelection,
   deleteControlSelection,
   pasteControlSelection,
-} from "./control"
-import { copySelection, deleteSelection, pasteSelection } from "./selection"
+} from "../actions/control"
+import {
+  useCopySelection,
+  useDeleteSelection,
+  usePasteSelection,
+} from "../actions/selection"
 import {
   copyTempoSelection,
   deleteTempoSelection,
   pasteTempoSelection,
-} from "./tempo"
+} from "../actions/tempo"
+import {
+  isControlEventsClipboardData,
+  isPianoNotesClipboardData,
+} from "../clipboard/clipboardTypes"
+import { useStores } from "../hooks/useStores"
+import Clipboard from "../services/Clipboard"
 
-export const copySelectionGlobal = (rootStore: RootStore) => () => {
-  switch (rootStore.router.path) {
-    case "/track":
-      if (rootStore.pianoRollStore.selectedNoteIds.length > 0) {
-        copySelection(rootStore)()
-      } else if (rootStore.controlStore.selectedEventIds.length > 0) {
-        copyControlSelection(rootStore)()
-      }
-      break
-    case "/arrange":
-      arrangeCopySelection(rootStore)()
-      break
-    case "/tempo":
-      copyTempoSelection(rootStore)()
-      break
+export const useCopySelectionGlobal = () => {
+  const rootStore = useStores()
+  const copySelection = useCopySelection()
+  return () => {
+    switch (rootStore.router.path) {
+      case "/track":
+        if (rootStore.pianoRollStore.selectedNoteIds.length > 0) {
+          copySelection()
+        } else if (rootStore.controlStore.selectedEventIds.length > 0) {
+          copyControlSelection(rootStore)()
+        }
+        break
+      case "/arrange":
+        arrangeCopySelection(rootStore)()
+        break
+      case "/tempo":
+        copyTempoSelection(rootStore)()
+        break
+    }
   }
 }
 
-export const cutSelectionGlobal = (rootStore: RootStore) => () => {
-  switch (rootStore.router.path) {
-    case "/track":
-      if (rootStore.pianoRollStore.selectedNoteIds.length > 0) {
-        copySelection(rootStore)()
-        deleteSelection(rootStore)()
-      } else if (rootStore.controlStore.selectedEventIds.length > 0) {
-        copyControlSelection(rootStore)()
-        deleteControlSelection(rootStore)()
-      }
-      break
-    case "/arrange":
-      arrangeCopySelection(rootStore)()
-      arrangeDeleteSelection(rootStore)()
-      break
-    case "/tempo":
-      copyTempoSelection(rootStore)()
-      deleteTempoSelection(rootStore)()
-      break
+export const useCutSelectionGlobal = () => {
+  const rootStore = useStores()
+  const copySelection = useCopySelection()
+  const deleteSelection = useDeleteSelection()
+
+  return () => {
+    switch (rootStore.router.path) {
+      case "/track":
+        if (rootStore.pianoRollStore.selectedNoteIds.length > 0) {
+          copySelection()
+          deleteSelection()
+        } else if (rootStore.controlStore.selectedEventIds.length > 0) {
+          copyControlSelection(rootStore)()
+          deleteControlSelection(rootStore)()
+        }
+        break
+      case "/arrange":
+        arrangeCopySelection(rootStore)()
+        arrangeDeleteSelection(rootStore)()
+        break
+      case "/tempo":
+        copyTempoSelection(rootStore)()
+        deleteTempoSelection(rootStore)()
+        break
+    }
   }
 }
 
-export const pasteSelectionGlobal = (rootStore: RootStore) => () => {
-  switch (rootStore.router.path) {
-    case "/track":
-      const text = Clipboard.readText()
-      if (!text || text.length === 0) {
-        return
-      }
-      const obj = JSON.parse(text)
-      if (isPianoNotesClipboardData(obj)) {
-        pasteSelection(rootStore)()
-      } else if (isControlEventsClipboardData(obj)) {
-        pasteControlSelection(rootStore)()
-      }
-      break
-    case "/arrange":
-      arrangePasteSelection(rootStore)()
-      break
-    case "/tempo":
-      pasteTempoSelection(rootStore)()
+export const usePasteSelectionGlobal = () => {
+  const rootStore = useStores()
+  const pasteSelection = usePasteSelection()
+  return () => {
+    switch (rootStore.router.path) {
+      case "/track":
+        const text = Clipboard.readText()
+        if (!text || text.length === 0) {
+          return
+        }
+        const obj = JSON.parse(text)
+        if (isPianoNotesClipboardData(obj)) {
+          pasteSelection()
+        } else if (isControlEventsClipboardData(obj)) {
+          pasteControlSelection(rootStore)()
+        }
+        break
+      case "/arrange":
+        arrangePasteSelection(rootStore)()
+        break
+      case "/tempo":
+        pasteTempoSelection(rootStore)()
+    }
   }
 }

app/src/actions/player.ts

@@ -1,4 +1,5 @@
 import { Measure } from "../entities/measure/Measure"
+import { useStores } from "../hooks/useStores"
 import { noteOffMidiEvent, noteOnMidiEvent } from "../midi/MidiEvent"
 import RootStore from "../stores/RootStore"
 
@@ -132,9 +133,9 @@ export const toggleEnableLoop =
     player.loop = { ...player.loop, enabled: !player.loop.enabled }
   }
 
-export const startNote =
-  ({ player, synthGroup }: Pick<RootStore, "player" | "synthGroup">) =>
-  (
+export const useStartNote = () => {
+  const { player, synthGroup } = useStores()
+  return (
     {
       channel,
       noteNumber,
@@ -152,10 +153,11 @@ export const startNote =
       delayTime,
     )
   }
+}
 
-export const stopNote =
-  ({ player }: Pick<RootStore, "player">) =>
-  (
+export const useStopNote = () => {
+  const { player } = useStores()
+  return (
     {
       channel,
       noteNumber,
@@ -167,3 +169,4 @@ export const stopNote =
   ) => {
     player.sendEvent(noteOffMidiEvent(0, channel, noteNumber, 0), delayTime)
   }
+}