Merge pull request #409 from ryohey/fix-preview

Fix midi input preview
ryohey · Sep 28, 2024 · 89aea28 · 89aea28
2 parents d6aa1cc + 3a4c7c7
commit 89aea28
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 11 deletions.
diff --git a/app/src/components/PianoRoll/PianoKeys.tsx b/app/src/components/PianoRoll/PianoKeys.tsx
@@ -117,7 +117,7 @@ function drawKeys(
   keyHeight: number,
   numberOfKeys: number,
   theme: Theme,
-  touchingKeys: number[],
+  selectedKeys: Set<number>,
   scale: number[],
 ) {
   ctx.save()
@@ -136,7 +136,7 @@ function drawKeys(
   // Draw white keys
   for (const keyNum of whiteKeys) {
     let y = (numberOfKeys - keyNum - 1) * keyHeight
-    const isSelected = touchingKeys.includes(keyNum)
+    const isSelected = selectedKeys.has(keyNum)
     const isInScale = scale.includes(keyNum % 12)
 
     const bordered = keyNum % 12 === 4 || keyNum % 12 === 11
@@ -165,7 +165,7 @@ function drawKeys(
   // Draw black keys
   for (const keyNum of blackKeys) {
     const y = (numberOfKeys - keyNum - 1) * keyHeight
-    const isSelected = touchingKeys.includes(keyNum)
+    const isSelected = selectedKeys.has(keyNum)
     const isInScale = scale.includes(keyNum % 12)
 
     ctx.save()
@@ -211,13 +211,15 @@ export const PianoKeys: FC = observer(() => {
     pianoRollStore: {
       keySignature,
       transform: { numberOfKeys, pixelsPerKey: keyHeight },
+      previewingNoteNumbers,
     },
     player,
   } = useStores()
   const width = Layout.keyWidth
   const blackKeyWidth = Layout.keyWidth * Layout.blackKeyWidthRatio
-  const [touchingKeys, setTouchingKeys] = useState<number[]>([])
+  const [touchingKeys, setTouchingKeys] = useState<Set<number>>(new Set())
   const { onContextMenu, menuProps } = useContextMenu()
+  const selectedKeys = new Set([...touchingKeys, ...previewingNoteNumbers])
 
   const draw = useCallback(
     (ctx: CanvasRenderingContext2D) => {
@@ -230,11 +232,11 @@ export const PianoKeys: FC = observer(() => {
         keyHeight,
         numberOfKeys,
         theme,
-        touchingKeys,
+        selectedKeys,
         scale,
       )
     },
-    [numberOfKeys, theme, touchingKeys, keySignature, keyHeight, blackKeyWidth],
+    [numberOfKeys, theme, selectedKeys, keySignature, keyHeight, blackKeyWidth],
   )
 
   const onMouseDown = useCallback(
@@ -268,7 +270,7 @@ export const PianoKeys: FC = observer(() => {
       let prevNoteNumber = posToNoteNumber(startPosition.x, startPosition.y)
       player.sendEvent(noteOnMidiEvent(0, channel, prevNoteNumber, 127))
 
-      setTouchingKeys([prevNoteNumber])
+      setTouchingKeys(new Set([prevNoteNumber]))
 
       observeDrag2(e.nativeEvent, {
         onMouseMove(_e, delta) {
@@ -278,12 +280,12 @@ export const PianoKeys: FC = observer(() => {
             player.sendEvent(noteOffMidiEvent(0, channel, prevNoteNumber, 0))
             player.sendEvent(noteOnMidiEvent(0, channel, noteNumber, 127))
             prevNoteNumber = noteNumber
-            setTouchingKeys([noteNumber])
+            setTouchingKeys(new Set([noteNumber]))
           }
         },
         onMouseUp(_) {
           player.sendEvent(noteOffMidiEvent(0, channel, prevNoteNumber, 0))
-          setTouchingKeys([])
+          setTouchingKeys(new Set())
         },
       })
     },

diff --git a/app/src/services/MIDIInput.ts b/app/src/services/MIDIInput.ts
@@ -28,8 +28,12 @@ export class MIDIInput {
 }
 
 export const previewMidiInput =
-  ({ pianoRollStore: { selectedTrack }, player }: RootStore) =>
-  (e: WebMidi.MIDIMessageEvent) => {
+  (rootStore: RootStore) => (e: WebMidi.MIDIMessageEvent) => {
+    const {
+      pianoRollStore,
+      pianoRollStore: { selectedTrack },
+      player,
+    } = rootStore
     if (selectedTrack === undefined) {
       return
     }
@@ -49,4 +53,10 @@ export const previewMidiInput =
     event.channel = channel
 
     player.sendEvent(event)
+
+    if (event.subtype === "noteOn") {
+      pianoRollStore.previewingNoteNumbers.add(event.noteNumber)
+    } else if (event.subtype === "noteOff") {
+      pianoRollStore.previewingNoteNumbers.delete(event.noteNumber)
+    }
   }
diff --git a/app/src/stores/PianoRollStore.ts b/app/src/stores/PianoRollStore.ts
@@ -84,6 +84,7 @@ export default class PianoRollStore {
   openTransposeDialog = false
   newNoteVelocity = 100
   keySignature: KeySignature | null = null
+  previewingNoteNumbers: Set<number> = new Set()
 
   constructor(readonly rootStore: RootStore) {
     this.rulerStore = new RulerStore(this)
@@ -113,6 +114,7 @@ export default class PianoRollStore {
       openTransposeDialog: observable,
       newNoteVelocity: observable,
       keySignature: observable,
+      previewingNoteNumbers: observable,
       contentWidth: computed,
       contentHeight: computed,
       scrollLeft: computed,