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 &&