Merge pull request #411 from ryohey/fix-outside-note

Fix problem that notes can be placed out of range

app/src/actions/song.ts

@@ -1,4 +1,4 @@
-import { NotePoint } from "../entities/transform/NotePoint"
+import { NoteNumber } from "../entities/unit/NoteNumber"
 import { isNotNull } from "../helpers/array"
 import { downloadSongAsMidi } from "../midi/midiConversion"
 import Song, { emptySong } from "../song"
@@ -141,7 +141,7 @@ export const transposeNotes =
             }
             return {
               id,
-              noteNumber: NotePoint.clampNoteNumber(n.noteNumber + deltaPitch),
+              noteNumber: NoteNumber.clamp(n.noteNumber + deltaPitch),
             }
           })
           .filter(isNotNull),

app/src/actions/track.ts

@@ -3,6 +3,7 @@ import { AnyChannelEvent, AnyEvent, SetTempoEvent } from "midifile-ts"
 import { ValueEventType } from "../entities/event/ValueEventType"
 import { Range } from "../entities/geometry/Range"
 import { Measure } from "../entities/measure/Measure"
+import { NoteNumber } from "../entities/unit/NoteNumber"
 import { closedRange, isNotUndefined } from "../helpers/array"
 import { isEventInRange } from "../helpers/filterEvents"
 import {
@@ -234,7 +235,11 @@ export const createNote =
     song,
   }: RootStore) =>
   (tick: number, noteNumber: number) => {
-    if (selectedTrack === undefined || selectedTrack.channel == undefined) {
+    if (
+      selectedTrack === undefined ||
+      selectedTrack.channel == undefined ||
+      !NoteNumber.isValid(noteNumber)
+    ) {
       return
     }
     pushHistory()

app/src/components/PianoRoll/PianoRoll.tsx

@@ -102,9 +102,18 @@ const PianoRollWrapper: FC = observer(() => {
     [s, transform],
   )
 
+  const onChangeSplitPane = useCallback(() => {
+    s.setScrollTopInPixels(s.scrollTop)
+  }, [s])
+
   return (
     <Parent ref={ref}>
-      <StyledSplitPane split="horizontal" minSize={50} defaultSize={"60%"}>
+      <StyledSplitPane
+        split="horizontal"
+        minSize={50}
+        defaultSize={"60%"}
+        onChange={onChangeSplitPane}
+      >
         <Alpha onWheel={onWheel} ref={alphaRef}>
           <PianoRollStage width={size.width} height={alphaHeight} />
           <VerticalScaleScrollBar

app/src/entities/transform/NotePoint.ts

@@ -1,17 +1,14 @@
-import { MaxNoteNumber } from "../../Constants"
+import { NoteNumber } from "../unit/NoteNumber"
 
 export interface NotePoint {
   tick: number
   noteNumber: number
 }
 
 export namespace NotePoint {
-  export const clampNoteNumber = (noteNumber: number) =>
-    Math.min(MaxNoteNumber, Math.max(0, noteNumber))
-
   export const clamp = (point: NotePoint): NotePoint => ({
     tick: Math.max(0, point.tick),
-    noteNumber: clampNoteNumber(point.noteNumber),
+    noteNumber: NoteNumber.clamp(point.noteNumber),
   })
 
   export function equals(a: NotePoint, b: NotePoint): boolean {

app/src/entities/unit/NoteNumber.ts

@@ -0,0 +1,11 @@
+import { MaxNoteNumber } from "../../Constants"
+
+export type NoteNumber = number
+
+export namespace NoteNumber {
+  export const clamp = (noteNumber: number) =>
+    Math.min(MaxNoteNumber, Math.max(0, noteNumber))
+
+  export const isValid = (noteNumber: number) =>
+    noteNumber >= 0 && noteNumber <= MaxNoteNumber
+}