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

fix: open existing project doesn't highlight current key signature

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-23 13:41:18 -07:00
parent 247c76237d
commit 1e816596e4
2 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/KeySignaturePickerPopup.css
+6 -5
View File
@@ -145,16 +145,17 @@
font-size: 11px;
}
.key-signature-picker-button.selected {
text-decoration: underline;
text-underline-offset: 3px;
}
.key-signature-picker-label {
display: inline-flex;
align-items: flex-start;
}
.key-signature-picker-label.selected {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.key-signature-picker-accidental {
font-size: 0.58em;
line-height: 1;
src/components/KeySignaturePickerPopup.tsx
+18 -12
View File
@@ -34,21 +34,21 @@ function splitAccidental(label: string): { base: string; accidental: string | nu
return { base: label, accidental: null };
}
const KeyLabel: React.FC<{ label: string }> = ({ label }) => {
const KeyLabel: React.FC<{ label: string; selected?: boolean }> = ({ label, selected = false }) => {
const { base, accidental } = splitAccidental(label);
return (
<span className="key-signature-picker-label">
<span className={`key-signature-picker-label ${selected ? 'selected' : ''}`.trim()}>
<span>{base}</span>
{accidental && <sup className="key-signature-picker-accidental">{accidental}</sup>}
</span>
);
};
const CombinedKeyLabel: React.FC<{ labels: string[] }> = ({ labels }) => (
const CombinedKeyLabel: React.FC<{ labels: string[]; selectedIndex?: number }> = ({ labels, selectedIndex = -1 }) => (
<span className="key-signature-picker-label">
{labels.map((label, index) => (
<React.Fragment key={label}>
<KeyLabel label={label} />
<KeyLabel label={label} selected={index === selectedIndex} />
{index < labels.length - 1 && <span className="key-signature-picker-divider">/</span>}
</React.Fragment>
))}
@@ -97,7 +97,10 @@ const KeySignaturePickerPopup: React.FC<KeySignaturePickerPopupProps> = ({ value
aria-label={`Select ${slot.outerItems.map(item => item.keySignature).join(' or ')}`}
title={slot.outerItems.map(item => item.keySignature).join(' / ')}
>
<CombinedKeyLabel labels={slot.outerItems.map(item => item.label)} />
<CombinedKeyLabel
labels={slot.outerItems.map(item => item.label)}
selectedIndex={slot.outerItems.findIndex(item => item.keySignature === value)}
/>
</button>
) : (
<div className="key-signature-picker-item-stack">
@@ -105,11 +108,11 @@ const KeySignaturePickerPopup: React.FC<KeySignaturePickerPopupProps> = ({ value
<div className="key-signature-picker-key" key={item.keySignature}>
<button
type="button"
className={`key-signature-picker-button major ${value === item.keySignature ? 'selected' : ''}`.trim()}
onClick={() => onChange(item.keySignature)}
aria-label={`Select ${item.keySignature}`}
>
<KeyLabel label={item.label} />
className={`key-signature-picker-button major ${value === item.keySignature ? 'selected' : ''}`.trim()}
onClick={() => onChange(item.keySignature)}
aria-label={`Select ${item.keySignature}`}
>
<KeyLabel label={item.label} selected={value === item.keySignature} />
</button>
</div>
))}
@@ -128,7 +131,10 @@ const KeySignaturePickerPopup: React.FC<KeySignaturePickerPopupProps> = ({ value
aria-label={`Select ${slot.innerItems.map(item => item.keySignature).join(' or ')}`}
title={slot.innerItems.map(item => item.keySignature).join(' / ')}
>
<CombinedKeyLabel labels={slot.innerItems.map(item => item.label)} />
<CombinedKeyLabel
labels={slot.innerItems.map(item => item.label)}
selectedIndex={slot.innerItems.findIndex(item => item.keySignature === value)}
/>
</button>
) : (
<div className="key-signature-picker-item-stack">
@@ -140,7 +146,7 @@ const KeySignaturePickerPopup: React.FC<KeySignaturePickerPopupProps> = ({ value
onClick={() => onChange(item.keySignature)}
aria-label={`Select ${item.keySignature}`}
>
<KeyLabel label={item.label} />
<KeyLabel label={item.label} selected={value === item.keySignature} />
</button>
))}
</div>