3dtours/KGStudio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added a treatment for InstrumentSelection panel when selectedTrackId is empty or doesn't associate with a valid track.

Browse Source
This commit is contained in:
Xiaohan-Tian
2025-08-12 18:25:00 -07:00
parent 7ada648d14
commit 5e5a68e1d7
1 changed files with 16 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/InstrumentSelection.tsx
+16 -14
View File
@@ -42,8 +42,9 @@ const InstrumentSelection: React.FC = () => {
}; };
const handleSelectInstrument = async (instrumentKey: string) => { const handleSelectInstrument = async (instrumentKey: string) => {
const instrument = instrumentKey as InstrumentType; // If no valid target track, ignore user interaction
if (!targetTrack || !(targetTrack instanceof KGMidiTrack)) return; if (!targetTrack || !(targetTrack instanceof KGMidiTrack)) return;
const instrument = instrumentKey as InstrumentType;
try { try {
await setTrackInstrument(targetTrack.getId(), instrument); await setTrackInstrument(targetTrack.getId(), instrument);
} catch (err) { } catch (err) {
@@ -53,25 +54,26 @@ const InstrumentSelection: React.FC = () => {
const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png'; const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png';
const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey; const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey;
const hasTargetTrack = !!targetTrack;
if (!targetTrack) return null;
return ( return (
<div className="instrument-selection"> <div className="instrument-selection">
<div className="instrument-selection-header"> <div className="instrument-selection-header">
<h3>{`${previewAlt.toString()}`}</h3> <h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3>
<button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button> <button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
</div> </div>
<div className="instrument-selection-top"> <div className="instrument-selection-top">
<div className="instrument-preview"> {hasTargetTrack && (
<img <div className="instrument-preview">
src={`${import.meta.env.BASE_URL}resources/instruments/${previewImage}`} <img
alt={previewAlt.toString()} src={`${import.meta.env.BASE_URL}resources/instruments/${previewImage}`}
width={256} alt={previewAlt.toString()}
height={256} width={256}
/> height={256}
</div> />
<div className="instrument-name-overlay">{targetTrack.getName()}</div> </div>
)}
<div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
</div> </div>
<div className="instrument-selection-bottom"> <div className="instrument-selection-bottom">
<div className="instrument-groups"> <div className="instrument-groups">