JosLe/reaktor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dynamic sizing for sequencer and piano roll modules

Browse Source 
Module width now adapts to step/bar count so extra steps are never
hidden. Sequencer width scales with numSteps, piano roll width scales
with bar count using a fixed BEAT_PX density.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jose Luis
2026-03-21 04:48:27 +01:00
parent 64280874ea
commit fce0bcdace
2 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/PianoRollWidget.jsx
View File

@@ -79,7 +79,7 @@ const MARIO_MELODY = [
{ note: 71, start: 70*s, duration: 2*s }, // B4
];
const ROLL_W = 500;
const BEAT_PX = 30; // pixels per beat — constant density regardless of bar count
const ROLL_H = 200;
const KEY_W = 24;
const MIN_NOTE = 48; // C3
@@ -110,7 +110,8 @@ export default function PianoRollWidget({ moduleId }) {
const notesRef = useRef(notes);
notesRef.current = notes;
const beatW = (ROLL_W - KEY_W) / totalBeats;
const rollW = KEY_W + totalBeats * BEAT_PX;
const beatW = BEAT_PX;
// Draw the piano roll
const draw = useCallback(() => {
@@ -220,7 +221,7 @@ export default function PianoRollWidget({ moduleId }) {
ctx.fillStyle = 'rgba(0,229,255,0.3)';
ctx.fillRect(x, row * ROW_H, Math.max(nw, 2), ROW_H);
}
}, [totalBeats, beatW, playPos]);
}, [totalBeats, beatW, playPos, rollW]);
// Animation loop
useEffect(() => {
@@ -415,7 +416,7 @@ export default function PianoRollWidget({ moduleId }) {
}, [mod]);
return (
<div style={{ width: ROLL_W }}>
<div style={{ width: rollW }}>
{/* Mini toolbar */}
<div style={{ display: 'flex', gap: 4, marginBottom: 3 }}>
<button
@@ -453,9 +454,9 @@ export default function PianoRollWidget({ moduleId }) {
</div>
<canvas
ref={canvasRef}
width={ROLL_W}
width={rollW}
height={ROLL_H}
style={{ width: ROLL_W, height: ROLL_H, borderRadius: 4, cursor: tool === 'draw' ? 'crosshair' : 'pointer' }}
style={{ width: rollW, height: ROLL_H, borderRadius: 4, cursor: tool === 'draw' ? 'crosshair' : 'pointer' }}
onPointerDown={handleMouseDown}
/>
</div>