fix: recording preview notes are not taking region position into consideration

This commit is contained in:
Xiaohan-Tian
2026-05-02 22:55:27 -07:00
parent 0fc4ee2a0f
commit 9f536d9687
@@ -249,12 +249,13 @@ const PianoRollContent: React.FC<PianoRollContentProps> = ({
if (!isRecording || !activeRegion || recordingNotes.length === 0) return null; if (!isRecording || !activeRegion || recordingNotes.length === 0) return null;
const beatWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-grid-beat-width')) || 40; const beatWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-grid-beat-width')) || 40;
const noteHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-piano-key-height')) || 20; const noteHeight = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-piano-key-height')) || 20;
const regionStartBeat = activeRegion.getStartFromBeat();
return recordingNotes.map((note, index) => ( return recordingNotes.map((note, index) => (
<div <div
key={`recording-note-${index}`} key={`recording-note-${index}`}
className="piano-grid-recording-note" className="piano-grid-recording-note"
style={{ style={{
left: note.startBeat * beatWidth, left: (note.startBeat + regionStartBeat) * beatWidth,
top: (107 - note.pitch) * noteHeight, top: (107 - note.pitch) * noteHeight,
width: Math.max((note.endBeat - note.startBeat) * beatWidth, 4), width: Math.max((note.endBeat - note.startBeat) * beatWidth, 4),
height: noteHeight, height: noteHeight,