museaikit/esm/core/visualizers/piano_roll_canvas_visualizer.js

A powerful music-focused AI toolkit

import { BaseVisualizer } from './base_visualizer';
export class PianoRollCanvasVisualizer extends BaseVisualizer {
    ctx;
    constructor(sequence, canvas, config = {}) {
        super(sequence, config);
        this.ctx = canvas.getContext('2d');
        this.parentElement = canvas.parentElement;
        const dpr = window.devicePixelRatio || 1;
        if (this.ctx) {
            this.ctx.canvas.width = dpr * this.width;
            this.ctx.canvas.height = dpr * this.height;
            canvas.style.width = `${this.width}px`;
            canvas.style.height = `${this.height}px`;
            this.ctx.scale(dpr, dpr);
        }
        this.redraw();
    }
    redraw(activeNote, scrollIntoView) {
        this.clear();
        let activeNotePosition;
        for (let i = 0; i < this.noteSequence.notes.length; i++) {
            const note = this.noteSequence.notes[i];
            const size = this.getNotePosition(note, i);
            const opacityBaseline = 0.2;
            const opacity = note.velocity ? note.velocity / 100 + opacityBaseline : 1;
            const isActive = activeNote && this.isPaintingActiveNote(note, activeNote);
            const fill = `rgba(${isActive ? this.config.activeNoteRGB : this.config.noteRGB},
  ${opacity})`;
            this.redrawNote(size.x, size.y, size.w, size.h, fill);
            if (isActive && note === activeNote) {
                activeNotePosition = size.x;
            }
        }
        this.scrollIntoViewIfNeeded(scrollIntoView, activeNotePosition);
        return activeNotePosition;
    }
    clear() {
        this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    }
    clearActiveNotes() {
        this.redraw();
    }
    redrawNote(x, y, w, h, fill) {
        this.ctx.fillStyle = fill;
        this.ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h));
    }
}
//# sourceMappingURL=piano_roll_canvas_visualizer.js.map