Merge pull request #603 from ryohey/add-control-mark

Show program changes on the piano roll and enable adding program changes mid-performance

Author: ryohey

app/src/actions/track.ts

@@ -1,13 +1,20 @@
 import {
-  BatchUpdateOperation,
+  type BatchUpdateOperation,
+  getProgramNumberEvent,
+  isProgramChangeEvent,
   Measure,
   programChangeMidiEvent,
-  timeSignatureMidiEvent,
   TrackEvent,
   TrackEventOf,
   TrackId,
+  timeSignatureMidiEvent,
 } from "@signal-app/core"
-import { AnyChannelEvent, AnyEvent, SetTempoEvent } from "midifile-ts"
+import type {
+  AnyChannelEvent,
+  AnyEvent,
+  ProgramChangeEvent,
+  SetTempoEvent,
+} from "midifile-ts"
 import { useCallback } from "react"
 import { ValueEventType } from "../entities/event/ValueEventType"
 import { addedSet, deletedSet } from "../helpers/set"
@@ -165,7 +172,7 @@ export const useMuteNote = () => {
 
   return useCallback(
     (noteNumber: number) => {
-      if (channel == undefined) {
+      if (channel === undefined) {
         return
       }
       stopNote({ channel, noteNumber })
@@ -190,23 +197,89 @@ export const useSetTrackName = () => {
   )
 }
 
-export const useSetTrackInstrument = (trackId: TrackId) => {
-  const { sendEvent } = usePlayer()
+export const useSetTrackInstrument = (trackId: TrackId, eventId?: number) => {
+  const { sendEvent, position } = usePlayer()
   const { pushHistory } = useHistory()
-  const { channel, setProgramNumber } = useTrack(trackId)
+  const { channel, getEvents, updateEvent, addEvent } = useTrack(trackId)
 
   return useCallback(
     (programNumber: number) => {
       pushHistory()
-      setProgramNumber(programNumber)
 
-      // 即座に反映する
-      // Reflect immediately
-      if (channel !== undefined) {
-        sendEvent(programChangeMidiEvent(0, channel, programNumber))
+      let targetEventId: number | undefined = eventId
+
+      if (eventId === undefined) {
+        // get last program change event before position
+        const programNumberEvent =
+          getProgramNumberEvent(getEvents(), position) ??
+          addEvent<TrackEventOf<ProgramChangeEvent>>({
+            ...programChangeMidiEvent(0, 0, programNumber),
+            tick: 0,
+          })
+        targetEventId = programNumberEvent?.id
+      }
+
+      if (targetEventId === undefined) {
+        return
+      }
+
+      const targetEvent = updateEvent<TrackEventOf<ProgramChangeEvent>>(
+        targetEventId,
+        {
+          value: programNumber,
+        },
+      )
+
+      if (targetEvent === null) {
+        return
+      }
+
+      const tick = targetEvent.tick
+
+      // If the player position is after the insertion position and there are no other program change events, reflect immediately
+      if (channel !== undefined && position >= tick) {
+        const hasOtherProgramChangeEvents = getEvents()
+          .filter(isProgramChangeEvent)
+          .some((e) => e.tick > tick)
+        if (!hasOtherProgramChangeEvents) {
+          sendEvent(programChangeMidiEvent(0, channel, programNumber))
+        }
       }
     },
-    [pushHistory, setProgramNumber, channel, sendEvent],
+    [
+      pushHistory,
+      channel,
+      sendEvent,
+      position,
+      getEvents,
+      eventId,
+      updateEvent,
+      addEvent,
+    ],
+  )
+}
+
+export const useInsertTrackInstrument = (trackId: TrackId) => {
+  const { sendEvent } = usePlayer()
+  const { pushHistory } = useHistory()
+  const { channel, addEvent } = useTrack(trackId)
+
+  return useCallback(
+    (programNumber: number, tick: number) => {
+      if (channel === undefined) {
+        return
+      }
+
+      pushHistory()
+
+      addEvent<TrackEventOf<ProgramChangeEvent>>({
+        ...programChangeMidiEvent(0, 0, programNumber),
+        tick,
+      })
+
+      sendEvent(programChangeMidiEvent(0, channel, programNumber))
+    },
+    [pushHistory, channel, sendEvent, addEvent],
   )
 }
 

app/src/components/InstrumentBrowser/InstrumentBrowser.tsx

@@ -1,11 +1,16 @@
 import styled from "@emotion/styled"
-import { FC } from "react"
+import type { CheckedState } from "@radix-ui/react-checkbox"
+import type { TrackEventOf, TrackId } from "@signal-app/core"
+import type { ProgramChangeEvent } from "midifile-ts"
+import { type FC, useCallback, useEffect, useMemo, useState } from "react"
 import { useInstrumentBrowser } from "../../hooks/useInstrumentBrowser"
+import { useTrack } from "../../hooks/useTrack"
 import { Localized } from "../../localize/useLocalization"
 import { Dialog, DialogActions, DialogContent } from "../Dialog/Dialog"
 import { InstrumentName } from "../TrackList/InstrumentName"
 import { Button, PrimaryButton } from "../ui/Button"
 import { Checkbox } from "../ui/Checkbox"
+import { DropdownButton } from "../ui/DropdownButton"
 import { Label } from "../ui/Label"
 import { DrumKitCategoryName, FancyCategoryName } from "./CategoryName"
 import { SelectBox } from "./SelectBox"
@@ -36,18 +41,84 @@ const Footer = styled.div`
   margin-top: 1rem;
 `
 
-export const InstrumentBrowser: FC = () => {
+export interface InstrumentBrowserProps {
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+  trackId: TrackId
+  targetEventId?: number
+  showInsertButton?: boolean
+}
+
+export const InstrumentBrowser: FC<InstrumentBrowserProps> = ({
+  isOpen,
+  onOpenChange,
+  trackId,
+  targetEventId,
+  showInsertButton = false,
+}) => {
+  const {
+    programNumber: initialProgramNumber,
+    isRhythmTrack: initialIsRhythmTrack,
+    getEventById,
+    removeEvent,
+  } = useTrack(trackId)
+  const [setting, setSetting] = useState({
+    programNumber: initialProgramNumber ?? 0,
+    isRhythmTrack: initialIsRhythmTrack ?? false,
+  })
+  const { programNumber, isRhythmTrack } = setting
   const {
-    isOpen,
-    setOpen,
-    setting: { programNumber, isRhythmTrack },
     selectedCategoryIndex,
     categoryFirstProgramEvents,
     categoryInstruments,
-    onChangeInstrument: onChange,
+    insertInstrumentChangeAtCurrentPosition,
+    changeInstrument,
     onClickOK,
-    onChangeRhythmTrack,
-  } = useInstrumentBrowser()
+    changeRhythmTrack,
+  } = useInstrumentBrowser(setting, targetEventId)
+
+  const targetEvent = useMemo(() => {
+    if (targetEventId !== undefined) {
+      return getEventById(targetEventId) as
+        | TrackEventOf<ProgramChangeEvent>
+        | undefined
+    }
+    return undefined
+  }, [targetEventId, getEventById])
+
+  useEffect(() => {
+    if (isOpen) {
+      if (targetEvent) {
+        setSetting({
+          programNumber: targetEvent.value,
+          isRhythmTrack: initialIsRhythmTrack ?? false,
+        })
+      }
+    }
+  }, [isOpen, targetEvent, initialIsRhythmTrack])
+
+  const onChange = useCallback(
+    (programNumber: number) => {
+      setSetting({
+        programNumber,
+        isRhythmTrack,
+      })
+      changeInstrument(programNumber)
+    },
+    [isRhythmTrack, changeInstrument],
+  )
+
+  const handleChangeRhythmTrack = useCallback(
+    (state: CheckedState) => {
+      const isRhythmTrack = state === true
+      setSetting({
+        programNumber: 0, // reset program number when changing rhythm track
+        isRhythmTrack,
+      })
+      changeRhythmTrack(isRhythmTrack)
+    },
+    [changeRhythmTrack],
+  )
 
   const categoryOptions = categoryFirstProgramEvents.map((preset, i) => ({
     value: i,
@@ -63,8 +134,25 @@ export const InstrumentBrowser: FC = () => {
     label: <InstrumentName programNumber={p} isRhythmTrack={isRhythmTrack} />,
   }))
 
+  const handleClickOK = useCallback(() => {
+    onClickOK()
+    onOpenChange(false)
+  }, [onClickOK, onOpenChange])
+
+  const handleClickInsert = useCallback(() => {
+    insertInstrumentChangeAtCurrentPosition(programNumber)
+    onOpenChange(false)
+  }, [onOpenChange, insertInstrumentChangeAtCurrentPosition, programNumber])
+
+  const handleClickDelete = useCallback(() => {
+    if (targetEventId !== undefined) {
+      removeEvent(targetEventId)
+    }
+    onOpenChange(false)
+  }, [targetEventId, removeEvent, onOpenChange])
+
   return (
-    <Dialog open={isOpen} onOpenChange={setOpen}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
       <DialogContent className="InstrumentBrowser">
         <Finder>
           <Left>
@@ -91,18 +179,41 @@ export const InstrumentBrowser: FC = () => {
         <Footer>
           <Checkbox
             checked={isRhythmTrack}
-            onCheckedChange={(state) => onChangeRhythmTrack(state === true)}
+            onCheckedChange={handleChangeRhythmTrack}
             label={<Localized name="rhythm-track" />}
           />
         </Footer>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => setOpen(false)}>
+        {targetEventId !== undefined && (
+          <Button
+            onClick={handleClickDelete}
+            style={{ marginRight: "auto" }}
+          >
+            <Localized name="delete" />
+          </Button>
+        )}
+        <Button onClick={() => onOpenChange(false)}>
           <Localized name="cancel" />
         </Button>
-        <PrimaryButton onClick={onClickOK}>
-          <Localized name="ok" />
-        </PrimaryButton>
+        {!showInsertButton && (
+          <PrimaryButton onClick={handleClickOK}>
+            <Localized name="ok" />
+          </PrimaryButton>
+        )}
+        {showInsertButton && (
+          <DropdownButton
+            onClick={handleClickOK}
+            actions={[
+              {
+                label: "Insert",
+                onClick: handleClickInsert,
+              },
+            ]}
+          >
+            <Localized name="ok" />
+          </DropdownButton>
+        )}
       </DialogActions>
     </Dialog>
   )