diff --git a/packages/core/pianoroll.mjs b/packages/core/pianoroll.mjs index 2b5af1a7..66b56dc8 100644 --- a/packages/core/pianoroll.mjs +++ b/packages/core/pianoroll.mjs @@ -50,6 +50,7 @@ Pattern.prototype.pianoroll = function ({ timeframe: timeframeProp, fold = 0, vertical = 0, + labels = 0, } = {}) { const ctx = getDrawContext(); const w = ctx.canvas.width; @@ -114,6 +115,14 @@ Pattern.prototype.pianoroll = function ({ ]; } isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); + if (labels) { + const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : ''); + ctx.font = `${barThickness * 0.75}px monospace`; + ctx.strokeStyle = 'black'; + ctx.fillStyle = isActive ? 'white' : 'black'; + ctx.textBaseline = 'top'; + ctx.fillText(label, ...coords); + } }); ctx.globalAlpha = 1; // reset! const playheadPosition = scale(-from / timeExtent, ...timeRange); @@ -181,6 +190,7 @@ export function pianoroll({ timeframe: timeframeProp, fold = 0, vertical = 0, + labels = false, ctx, } = {}) { const w = ctx.canvas.width; @@ -267,6 +277,14 @@ export function pianoroll({ ]; } isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords); + if (labels) { + const label = event.value.note ?? event.value.s + (event.value.n ? `:${event.value.n}` : ''); + ctx.font = `${barThickness * 0.75}px monospace`; + ctx.strokeStyle = 'black'; + ctx.fillStyle = isActive ? 'white' : 'black'; + ctx.textBaseline = 'top'; + ctx.fillText(label, ...coords); + } }); ctx.globalAlpha = 1; // reset! const playheadPosition = scale(-from / timeExtent, ...timeRange); diff --git a/packages/react/src/components/MiniRepl.jsx b/packages/react/src/components/MiniRepl.jsx index c13ff28e..1a6cce94 100644 --- a/packages/react/src/components/MiniRepl.jsx +++ b/packages/react/src/components/MiniRepl.jsx @@ -21,6 +21,7 @@ export function MiniRepl({ onTrigger, drawTime, punchcard, + punchcardLabels, onPaint, canvasHeight = 200, fontSize = 18, @@ -28,6 +29,7 @@ export function MiniRepl({ hideHeader = false, theme, keybindings, + isLineNumbersDisplayed, }) { drawTime = drawTime || (punchcard ? [0, 4] : undefined); const evalOnMount = !!drawTime; @@ -61,7 +63,7 @@ export function MiniRepl({ if (onPaint) { pat = pat.onPaint(onPaint); } else if (punchcard) { - pat = pat.punchcard(); + pat = pat.punchcard({ labels: punchcardLabels }); } return pat; }, @@ -160,6 +162,7 @@ export function MiniRepl({ fontFamily={fontFamily} fontSize={fontSize} keybindings={keybindings} + isLineNumbersDisplayed={isLineNumbersDisplayed} /> )} {error &&
{error.message}
} diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx index 6dfaf28e..7c5079a0 100644 --- a/website/src/docs/MiniRepl.jsx +++ b/website/src/docs/MiniRepl.jsx @@ -32,6 +32,7 @@ export function MiniRepl({ tune, drawTime, punchcard, + punchcardLabels = true, span = [0, 4], canvasHeight = 100, hideHeader, @@ -39,7 +40,7 @@ export function MiniRepl({ claviatureLabels, }) { const [Repl, setRepl] = useState(); - const { theme, keybindings, fontSize, fontFamily } = useSettings(); + const { theme, keybindings, fontSize, fontFamily, isLineNumbersDisplayed } = useSettings(); const [activeNotes, setActiveNotes] = useState([]); useEffect(() => { // we have to load this package on the client @@ -55,6 +56,7 @@ export function MiniRepl({ hideOutsideView={true} drawTime={claviature ? [0, 0] : drawTime} punchcard={punchcard} + punchcardLabels={punchcardLabels} span={span} canvasHeight={canvasHeight} theme={themes[theme]} @@ -62,6 +64,7 @@ export function MiniRepl({ keybindings={keybindings} fontFamily={fontFamily} fontSize={fontSize} + isLineNumbersDisplayed={isLineNumbersDisplayed} onPaint={ claviature ? (ctx, time, haps, drawTime) => {