import {Pattern} from "../_snowpack/link/strudel.js"; Pattern.prototype.pianoroll = function({ timeframe = 10, inactive = "#C9E597", active = "#FFCA28", background = "#2A3236", maxMidi = 90, minMidi = 0 } = {}) { const w = window.innerWidth; const h = window.innerHeight; const midiRange = maxMidi - minMidi + 1; const height = h / midiRange; this.draw((ctx, events, t) => { ctx.fillStyle = background; ctx.fillRect(0, 0, w, h); events.forEach((event) => { const isActive = event.whole.begin <= t && event.whole.end >= t; ctx.fillStyle = isActive ? active : inactive; const x = Math.round(event.whole.begin / timeframe * w); const width = Math.round((event.whole.end - event.whole.begin) / timeframe * w); const y = Math.round(h - (Number(event.value) - minMidi) / midiRange * h); const offset = t / timeframe * w; const margin = 0; ctx.fillRect(x - offset + margin + 1, y + 1, width - 2, height - 2); }); }, timeframe, 2); return this; };