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