removed instrumentSelectionTrackId from projectStore, align the instrumentSelectionTrackId with selectedTrackId.

This commit is contained in:
Xiaohan-Tian
2025-08-12 18:14:25 -07:00
parent ee34115423
commit 7ada648d14
3 changed files with 17 additions and 30 deletions
+4 -4
View File
@@ -6,14 +6,14 @@ import { KGMidiTrack, type InstrumentType } from '../core/track/KGMidiTrack';
const InstrumentSelection: React.FC = () => {
const {
tracks,
instrumentSelectionTrackId,
selectedTrackId,
closeInstrumentSelection,
setTrackInstrument
} = useProjectStore();
const targetTrack = useMemo(() => {
return tracks.find(t => t.getId().toString() === instrumentSelectionTrackId) || null;
}, [tracks, instrumentSelectionTrackId]);
return tracks.find(t => t.getId().toString() === selectedTrackId) || null;
}, [tracks, selectedTrackId]);
const currentInstrumentKey: InstrumentType = (targetTrack && targetTrack instanceof KGMidiTrack)
? (targetTrack.getInstrument() as InstrumentType)
@@ -27,7 +27,7 @@ const InstrumentSelection: React.FC = () => {
useEffect(() => {
// Sync when the target track or its instrument changes
setSelectedGroupKey(currentInstrumentDef?.group || 'PIANO_AND_KEYBOARDS');
}, [instrumentSelectionTrackId, currentInstrumentKey, currentInstrumentDef]);
}, [selectedTrackId, currentInstrumentKey, currentInstrumentDef]);
const groups = useMemo(() => Object.entries(INSTRUMENT_GROUPS) as Array<[string, string]>, []);
+2 -2
View File
@@ -193,8 +193,8 @@ const TrackInfoItem: React.FC<TrackInfoItemProps> = ({
e.stopPropagation();
// Select this track as active when opening instrument panel
setSelectedTrack(track.getId().toString());
// Toggle global InstrumentSelection panel for this track
toggleInstrumentSelectionForTrack(track.getId().toString());
// Toggle global InstrumentSelection panel (it follows selectedTrackId)
toggleInstrumentSelectionForTrack();
};
// Handle settings button click
+11 -24
View File
@@ -57,7 +57,7 @@ interface ProjectState {
// Instrument selection panel state
showInstrumentSelection: boolean;
instrumentSelectionTrackId: string | null;
// instrumentSelectionTrackId removed; panel now follows selectedTrackId
// Settings state
showSettings: boolean;
@@ -105,8 +105,8 @@ interface ProjectState {
toggleChatBox: () => void;
// Instrument selection panel actions
openInstrumentSelectionForTrack: (trackId: string) => void;
toggleInstrumentSelectionForTrack: (trackId: string) => void;
openInstrumentSelectionForTrack: () => void;
toggleInstrumentSelectionForTrack: () => void;
closeInstrumentSelection: () => void;
// Settings actions
@@ -200,7 +200,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
// Also auto-select it and open instrument selection panel
let initialSelectedTrackId: string | null = null;
let initialShowInstrumentSelection = false;
let initialInstrumentSelectionTrackId: string | null = null;
try {
const project = KGCore.instance().getCurrentProject();
if (project.getTracks().length === 0) {
@@ -209,7 +208,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
const createdId = String(addDefaultTrackCommand.getTrackId());
initialSelectedTrackId = createdId;
initialShowInstrumentSelection = true;
initialInstrumentSelectionTrackId = createdId;
}
} catch (error) {
console.error('Error creating default track on startup:', error);
@@ -242,7 +240,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
// Initial Instrument Selection panel state
showInstrumentSelection: initialShowInstrumentSelection,
instrumentSelectionTrackId: initialInstrumentSelectionTrackId,
// Initial Settings state
showSettings: false,
@@ -285,7 +282,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
set({
selectedTrackId: newTrackId,
showInstrumentSelection: true,
instrumentSelectionTrackId: newTrackId
});
console.log(`Added track ${command.getTrackId()}`);
@@ -300,8 +296,8 @@ export const useProjectStore = create<ProjectState>((set, get) => {
// Get the current tracks and find the index of the track being deleted
const currentTracks = KGCore.instance().getCurrentProject().getTracks();
const deletedTrackIndex = currentTracks.findIndex(track => track.getId() === id);
const currentSelectedTrackId = get().selectedTrackId;
const isCurrentTrackSelected = currentSelectedTrackId === id.toString();
const { selectedTrackId } = get();
const isCurrentTrackSelected = selectedTrackId === id.toString();
// Create and execute the remove track command
const command = new RemoveTrackCommand(id);
@@ -324,9 +320,7 @@ export const useProjectStore = create<ProjectState>((set, get) => {
setTimeout(() => {
set({
selectedTrackId: isCurrentTrackSelected ? newSelectedTrackId : currentSelectedTrackId,
showInstrumentSelection: true,
instrumentSelectionTrackId: isCurrentTrackSelected ? newSelectedTrackId : currentSelectedTrackId,
selectedTrackId: isCurrentTrackSelected ? newSelectedTrackId : selectedTrackId,
});
}, 0);
} else {
@@ -334,7 +328,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
set({
selectedTrackId: null,
showInstrumentSelection: false,
instrumentSelectionTrackId: null
});
}
@@ -533,7 +526,6 @@ export const useProjectStore = create<ProjectState>((set, get) => {
set({
selectedTrackId: firstTrackIdStr,
showInstrumentSelection: true,
instrumentSelectionTrackId: firstTrackIdStr
});
}
@@ -644,13 +636,8 @@ export const useProjectStore = create<ProjectState>((set, get) => {
},
setSelectedTrack: (trackId: string | null) => {
const { showInstrumentSelection } = get();
// Update selected track id
set({ selectedTrackId: trackId });
// If instrument panel is open and a track is selected, retarget the panel
if (showInstrumentSelection && trackId) {
set({ instrumentSelectionTrackId: trackId });
}
},
// Piano roll actions
@@ -688,14 +675,14 @@ export const useProjectStore = create<ProjectState>((set, get) => {
},
// Instrument selection panel actions
openInstrumentSelectionForTrack: (trackId: string) => {
set({ showInstrumentSelection: true, instrumentSelectionTrackId: trackId });
openInstrumentSelectionForTrack: () => {
set({ showInstrumentSelection: true });
},
toggleInstrumentSelectionForTrack: (trackId: string) => {
set({ showInstrumentSelection: true, instrumentSelectionTrackId: trackId });
toggleInstrumentSelectionForTrack: () => {
set({ showInstrumentSelection: true });
},
closeInstrumentSelection: () => {
set({ showInstrumentSelection: false, instrumentSelectionTrackId: null });
set({ showInstrumentSelection: false });
},
// Settings action implementations