Merge pull request #298 from ryohey/refactor

Refactor

src/main/actions/history.ts

@@ -1,68 +1,22 @@
-import cloneDeep from "lodash/cloneDeep"
-import { deserialize, serialize } from "serializr"
-import Song from "../../common/song/Song"
-import ArrangeViewStore from "../stores/ArrangeViewStore"
-import { ControlStore } from "../stores/ControlStore"
-import PianoRollStore from "../stores/PianoRollStore"
 import RootStore from "../stores/RootStore"
 
-// we use any for now. related: https://github.com/Microsoft/TypeScript/issues/1897
-type Json = any
-
-export interface SerializedState {
-  song: Json
-  selection: PianoRollStore["selection"]
-  selectedNoteIds: PianoRollStore["selectedNoteIds"]
-  selectedControllerEventIds: ControlStore["selectedEventIds"]
-  arrangeSelection: ArrangeViewStore["selection"]
-  arrangeSelectedEventIds: ArrangeViewStore["selectedEventIds"]
-}
-
-const serializeUndoableState = (rootStore: RootStore): SerializedState => {
-  return {
-    song: serialize(rootStore.song),
-    selection: cloneDeep(rootStore.pianoRollStore.selection),
-    selectedNoteIds: cloneDeep(rootStore.pianoRollStore.selectedNoteIds),
-    selectedControllerEventIds: cloneDeep(
-      rootStore.controlStore.selectedEventIds,
-    ),
-    arrangeSelection: cloneDeep(rootStore.arrangeViewStore.selection),
-    arrangeSelectedEventIds: cloneDeep(
-      rootStore.arrangeViewStore.selectedEventIds,
-    ),
-  }
-}
-
-const restoreState =
-  (rootStore: RootStore) => (serializedState: SerializedState) => {
-    const song = deserialize(Song, serializedState.song)
-    rootStore.song = song
-    rootStore.pianoRollStore.selection = serializedState.selection
-    rootStore.pianoRollStore.selectedNoteIds = serializedState.selectedNoteIds
-    rootStore.controlStore.selectedEventIds =
-      serializedState.selectedControllerEventIds
-    rootStore.arrangeViewStore.selection = serializedState.arrangeSelection
-    rootStore.arrangeViewStore.selectedEventIds =
-      serializedState.arrangeSelectedEventIds
-  }
-
 export const pushHistory = (rootStore: RootStore) => () => {
-  const state = serializeUndoableState(rootStore)
+  const state = rootStore.serialize()
   rootStore.historyStore.push(state)
 }
 
 export const undo = (rootStore: RootStore) => () => {
-  const currentState = serializeUndoableState(rootStore)
+  const currentState = rootStore.serialize()
   const nextState = rootStore.historyStore.undo(currentState)
   if (nextState !== undefined) {
-    restoreState(rootStore)(nextState)
+    rootStore.restore(nextState)
   }
 }
 
 export const redo = (rootStore: RootStore) => () => {
-  const currentState = serializeUndoableState(rootStore)
+  const currentState = rootStore.serialize()
   const nextState = rootStore.historyStore.redo(currentState)
   if (nextState !== undefined) {
-    restoreState(rootStore)(nextState)
+    rootStore.restore(nextState)
   }
 }

src/main/actions/selection.ts

@@ -16,7 +16,6 @@ import {
 } from "../clipboard/clipboardTypes"
 import clipboard from "../services/Clipboard"
 import RootStore from "../stores/RootStore"
-import { pushHistory } from "./history"
 import { transposeNotes } from "./song"
 
 function eventsInSelection(events: TrackEvent[], selection: Selection) {
@@ -83,9 +82,10 @@ export const transposeSelection =
     const {
       pianoRollStore,
       pianoRollStore: { selectedTrackId, selection, selectedNoteIds },
+      pushHistory,
     } = rootStore
 
-    pushHistory(rootStore)()
+    pushHistory()
 
     if (selection !== null) {
       const s = movedSelection(selection, 0, deltaPitch)
@@ -521,21 +521,21 @@ export const removeNoteFromSelection =
     )
   }
 
-export const selectNote = (rootStore: RootStore) => (noteId: number) => {
-  const {
+export const selectNote =
+  ({
     pianoRollStore,
     pianoRollStore: { selectedTrack },
     controlStore,
-  } = rootStore
+  }: RootStore) =>
+  (noteId: number) => {
+    if (selectedTrack === undefined) {
+      return
+    }
 
-  if (selectedTrack === undefined) {
-    return
+    controlStore.selectedEventIds = []
+    pianoRollStore.selectedNoteIds = [noteId]
   }
 
-  controlStore.selectedEventIds = []
-  pianoRollStore.selectedNoteIds = [noteId]
-}
-
 const sortedNotes = (notes: NoteEvent[]): NoteEvent[] =>
   notes.filter(isNoteEvent).sort((a, b) => {
     if (a.tick < b.tick) return -1
@@ -580,32 +580,33 @@ export const selectNextNote = (rootStore: RootStore) => () =>
 export const selectPreviousNote = (rootStore: RootStore) => () =>
   selectNeighborNote(rootStore)(-1)
 
-export const quantizeSelectedNotes = (rootStore: RootStore) => () => {
-  const {
+export const quantizeSelectedNotes =
+  ({
     pianoRollStore: {
       selectedTrack,
       selectedNoteIds,
       enabledQuantizer: quantizer,
     },
-  } = rootStore
-
-  if (selectedTrack === undefined || selectedNoteIds.length === 0) {
-    return
-  }
+    pushHistory,
+  }: RootStore) =>
+  () => {
+    if (selectedTrack === undefined || selectedNoteIds.length === 0) {
+      return
+    }
 
-  pushHistory(rootStore)()
+    pushHistory()
 
-  const notes = selectedNoteIds
-    .map((id) => selectedTrack.getEventById(id))
-    .filter(isNotUndefined)
-    .filter(isNoteEvent)
-    .map((e) => ({
-      ...e,
-      tick: quantizer.round(e.tick),
-    }))
+    const notes = selectedNoteIds
+      .map((id) => selectedTrack.getEventById(id))
+      .filter(isNotUndefined)
+      .filter(isNoteEvent)
+      .map((e) => ({
+        ...e,
+        tick: quantizer.round(e.tick),
+      }))
 
-  selectedTrack.updateEvents(notes)
-}
+    selectedTrack.updateEvents(notes)
+  }
 
 export const selectAllNotes =
   ({ pianoRollStore, pianoRollStore: { selectedTrack } }: RootStore) =>

src/main/actions/track.ts

@@ -1,9 +1,9 @@
 import { AnyChannelEvent, AnyEvent, SetTempoEvent } from "midifile-ts"
 import { closedRange } from "../../common/helpers/array"
 import {
+  ValueEventType,
   createValueEvent,
   isValueEvent,
-  ValueEventType,
 } from "../../common/helpers/valueEvent"
 import {
   panMidiEvent,
@@ -14,13 +14,12 @@ import {
 import Quantizer from "../../common/quantizer"
 import { getMeasureStart } from "../../common/song/selector"
 import Track, {
-  isNoteEvent,
   NoteEvent,
   TrackEvent,
   TrackEventOf,
+  isNoteEvent,
 } from "../../common/track"
 import RootStore from "../stores/RootStore"
-import { pushHistory } from "./history"
 import {
   resizeNotesInSelectionLeftBy,
   resizeNotesInSelectionRightBy,
@@ -218,6 +217,7 @@ export const resizeNoteLeft =
     const {
       pianoRollStore,
       pianoRollStore: { quantizer, selectedTrack },
+      pushHistory,
     } = rootStore
     if (selectedTrack === undefined) {
       return
@@ -234,7 +234,7 @@ export const resizeNoteLeft =
     const duration = note.duration + (note.tick - tick)
     const minDuration = quantize ? quantizer.unit : MIN_DURATION
     if (note.tick !== tick && duration >= minDuration) {
-      pushHistory(rootStore)()
+      pushHistory()
       pianoRollStore.lastNoteDuration = duration
       resizeNotesInSelectionLeftBy(rootStore)(tick - note.tick)
     }
@@ -245,6 +245,7 @@ export const resizeNoteRight =
     const {
       pianoRollStore,
       pianoRollStore: { quantizer, selectedTrack },
+      pushHistory,
     } = rootStore
     if (selectedTrack === undefined) {
       return
@@ -257,7 +258,7 @@ export const resizeNoteRight =
     const minDuration = quantize ? quantizer.unit : MIN_DURATION
     const duration = Math.max(minDuration, right - note.tick)
     if (note.duration !== duration) {
-      pushHistory(rootStore)()
+      pushHistory()
       pianoRollStore.lastNoteDuration = duration
       resizeNotesInSelectionRightBy(rootStore)(duration - note.duration)
     }

src/main/components/ControlPane/Graph/MouseHandler/handleSelectionDragEvents.ts

@@ -3,28 +3,23 @@ import { IPoint } from "../../../../../common/geometry"
 import { ValueEventType } from "../../../../../common/helpers/valueEvent"
 import { TrackEventOf } from "../../../../../common/track"
 import { ControlCoordTransform } from "../../../../../common/transform/ControlCoordTransform"
-import { pushHistory } from "../../../../actions/history"
 import { observeDrag2 } from "../../../../helpers/observeDrag"
 import RootStore from "../../../../stores/RootStore"
 
 export const handleSelectionDragEvents =
-  (rootStore: RootStore) =>
+  ({ controlStore, controlStore: { selectedTrack }, pushHistory }: RootStore) =>
   <T extends ControllerEvent | PitchBendEvent>(
     e: MouseEvent,
     hitEventId: number,
     startPoint: IPoint,
     transform: ControlCoordTransform,
     type: ValueEventType,
   ) => {
-    const {
-      controlStore,
-      controlStore: { selectedTrack },
-    } = rootStore
     if (selectedTrack === undefined) {
       return
     }
 
-    pushHistory(rootStore)()
+    pushHistory()
 
     if (!controlStore.selectedEventIds.includes(hitEventId)) {
       controlStore.selectedEventIds = [hitEventId]

src/main/components/TempoGraph/MouseHandler/handlePencilMouseDown.ts

@@ -4,25 +4,19 @@ import { setTempoMidiEvent } from "../../../../common/midi/MidiEvent"
 import { isSetTempoEvent } from "../../../../common/track"
 import { TempoCoordTransform } from "../../../../common/transform"
 import { updateEventsInRange } from "../../../actions"
-import { pushHistory } from "../../../actions/history"
 import { getClientPos } from "../../../helpers/mouseEvent"
 import { observeDrag } from "../../../helpers/observeDrag"
 import RootStore from "../../../stores/RootStore"
 
 export const handlePencilMouseDown =
-  (rootStore: RootStore) =>
+  ({ song, tempoEditorStore: { quantizer }, pushHistory }: RootStore) =>
   (e: MouseEvent, startPoint: IPoint, transform: TempoCoordTransform) => {
-    const {
-      song,
-      tempoEditorStore: { quantizer },
-    } = rootStore
-
     const track = song.conductorTrack
     if (track === undefined) {
       return
     }
 
-    pushHistory(rootStore)()
+    pushHistory()
 
     const startClientPos = getClientPos(e)
     const pos = transform.fromPosition(startPoint)

src/main/components/TempoGraph/MouseHandler/handleSelectionDragEvents.ts

@@ -8,30 +8,28 @@ import {
 } from "../../../../common/helpers/bpm"
 import { TrackEventOf } from "../../../../common/track"
 import { TempoCoordTransform } from "../../../../common/transform"
-import { pushHistory } from "../../../actions/history"
 import { getClientPos } from "../../../helpers/mouseEvent"
 import { observeDrag } from "../../../helpers/observeDrag"
 import RootStore from "../../../stores/RootStore"
 
 export const handleSelectionDragEvents =
-  (rootStore: RootStore) =>
+  ({
+    song: { conductorTrack },
+    tempoEditorStore,
+    tempoEditorStore: { quantizer },
+    pushHistory,
+  }: RootStore) =>
   (
     e: MouseEvent,
     hitEventId: number,
     startPoint: IPoint,
     transform: TempoCoordTransform,
   ) => {
-    const {
-      song: { conductorTrack },
-      tempoEditorStore,
-      tempoEditorStore: { quantizer },
-    } = rootStore
-
     if (conductorTrack === undefined) {
       return
     }
 
-    pushHistory(rootStore)()
+    pushHistory()
 
     if (!tempoEditorStore.selectedEventIds.includes(hitEventId)) {
       tempoEditorStore.selectedEventIds = [hitEventId]

src/main/components/TempoGraph/TempoGraphCanvas/TempoGraphCanvas.tsx

@@ -125,8 +125,8 @@ export const TempoGraphCanvas: FC<TempoGraphCanvasProps> = observer(
       >
         <Lines width={width} zIndex={0} />
         <Transform matrix={scrollXMatrix}>
-          <TempoItems width={width} zIndex={1} />
-          <Beats height={height} beats={beats} zIndex={2} />
+          <Beats height={height} beats={beats} zIndex={1} />
+          <TempoItems width={width} zIndex={2} />
           <Selection rect={selectionRect} zIndex={3} />
           <Cursor x={cursorX} height={height} zIndex={4} />
         </Transform>

src/main/components/TrackList/TrackListItem.tsx

@@ -133,6 +133,16 @@ export const TrackListItem: FC<TrackListItemProps> = observer(({ trackId }) => {
   const [isDialogOpened, setDialogOpened] = useState(false)
   const [isColorPickerOpened, setColorPickerOpened] = useState(false)
 
+  const onDoubleClickIcon = useCallback(() => {
+    if (track.isConductorTrack) {
+      return
+    }
+    pianoRollStore.openInstrumentBrowser = true
+    pianoRollStore.instrumentBrowserSetting = {
+      programNumber: track.programNumber ?? 0,
+      isRhythmTrack: track.isRhythmTrack,
+    }
+  }, [])
   const onClickMute: React.MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
       e.stopPropagation()
@@ -204,7 +214,11 @@ export const TrackListItem: FC<TrackListItemProps> = observer(({ trackId }) => {
         onContextMenu={onContextMenu}
         tabIndex={-1}
       >
-        <Icon selected={selected} color={color}>
+        <Icon
+          selected={selected}
+          color={color}
+          onDoubleClick={onDoubleClickIcon}
+        >
           <IconInner selected={selected}>{emoji}</IconInner>
         </Icon>
         <div>