feat: implemented piano roll hybrid mode to allow user edit MIDI notes while observing spectrogram as reference

This commit is contained in:
Xiaohan-Tian
2026-05-01 18:28:45 -07:00
parent ba0e27e50a
commit 83034455cc
11 changed files with 162 additions and 55 deletions
+13 -6
View File
@@ -78,7 +78,8 @@ interface ProjectState {
// Piano roll state
showPianoRoll: boolean;
activeRegionId: string | null;
pianoRollMode: 'midi-edit' | 'spectrogram';
pianoRollMode: 'midi-edit' | 'spectrogram' | 'hybrid';
hybridAudioRegionId: string | null;
// ChatBox state
showChatBox: boolean;
@@ -149,6 +150,7 @@ interface ProjectState {
setActiveRegionId: (regionId: string | null) => void;
openMidiPianoRoll: (regionId: string) => void;
openSpectrogramViewer: (regionId: string) => void;
openHybridMode: (midiRegionId: string, audioRegionId: string) => void;
// Project state cleanup
cleanupProjectState: () => void;
@@ -308,6 +310,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
showPianoRoll: false,
activeRegionId: null,
pianoRollMode: 'midi-edit' as const,
hybridAudioRegionId: null,
// Initial ChatBox state
showChatBox: initialChatBoxState,
@@ -1038,20 +1041,24 @@ export const useProjectStore = create<ProjectState>((set, get) => {
},
openMidiPianoRoll: (regionId: string) => {
set({ showPianoRoll: true, activeRegionId: regionId, pianoRollMode: 'midi-edit' });
set({ showPianoRoll: true, activeRegionId: regionId, pianoRollMode: 'midi-edit', hybridAudioRegionId: null });
},
openSpectrogramViewer: (regionId: string) => {
set({ showPianoRoll: true, activeRegionId: regionId, pianoRollMode: 'spectrogram' });
set({ showPianoRoll: true, activeRegionId: regionId, pianoRollMode: 'spectrogram', hybridAudioRegionId: null });
},
openHybridMode: (midiRegionId: string, audioRegionId: string) => {
set({ showPianoRoll: true, activeRegionId: midiRegionId, hybridAudioRegionId: audioRegionId, pianoRollMode: 'hybrid' });
},
// Project state cleanup - used when starting new/loading projects
cleanupProjectState: () => {
// Close piano roll if it's visible
set({ showPianoRoll: false });
// Clear active region
set({ activeRegionId: null });
// Clear active region and hybrid state
set({ activeRegionId: null, hybridAudioRegionId: null, pianoRollMode: 'midi-edit' });
// Clear any selected items
KGCore.instance().clearSelectedItems();