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

fix: hide zoom level option in piano roll window's sheet music view

Browse Source
This commit is contained in:
Xiaohan-Tian
2026-05-17 13:09:34 -07:00
parent 9c197ecd08
commit b5f5e1628e
2 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/piano-roll/PianoRollToolbar.test.tsx
+13
View File
@@ -130,10 +130,23 @@ describe('PianoRollToolbar', () => {
expect(screen.getByRole('button', { name: 'Sheet Music View' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: /16,48/i })).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Show Entire Track' })).toBeInTheDocument();
expect(screen.queryByRole('button', { name: '1x' })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: 'Pointer Tool' })).not.toBeInTheDocument();
expect(screen.queryByRole('button', { name: /Pitch Bend/i })).not.toBeInTheDocument();
});
it('shows the zoom button outside sheet mode', () => {
render(
<PianoRollToolbar
{...baseProps}
sheetMusicViewEnabled={false}
mode="midi-edit"
/>
);
expect(screen.getByRole('button', { name: '1x' })).toBeInTheDocument();
});
it('toggles the full-track sheet scope button', () => {
const onSheetMusicTrackScopeToggle = vi.fn();
src/components/piano-roll/PianoRollToolbar.tsx
+24 -22
View File
@@ -256,28 +256,30 @@ const PianoRollToolbar: React.FC<PianoRollToolbarProps> = ({
</div>
)}
<div className="quant-dropdown-container" ref={zoomSliderRef}>
<button
className="quant-button"
onClick={() => setShowZoomSlider(!showZoomSlider)}
title="Zoom"
>
{zoom}x
</button>
{showZoomSlider && (
<div className="piano-roll-zoom-popup">
<input
type="range"
min="1"
max="8"
step="1"
value={zoom}
onChange={(e) => onZoomChange(parseInt(e.target.value))}
/>
<span className="piano-roll-zoom-value">{zoom}x</span>
</div>
)}
</div>
{!sheetMusicViewEnabled && (
<div className="quant-dropdown-container" ref={zoomSliderRef}>
<button
className="quant-button"
onClick={() => setShowZoomSlider(!showZoomSlider)}
title="Zoom"
>
{zoom}x
</button>
{showZoomSlider && (
<div className="piano-roll-zoom-popup">
<input
type="range"
min="1"
max="8"
step="1"
value={zoom}
onChange={(e) => onZoomChange(parseInt(e.target.value))}
/>
<span className="piano-roll-zoom-value">{zoom}x</span>
</div>
)}
</div>
)}
</div>
</div>
);