From f38718004f4f8ad7e42f652b43b572766df31630 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Jul 2022 22:27:54 +0200
Subject: [PATCH] pianoroll optimizations - fix flickering due to global alpha
 mutation - change default inactive color - add smear option - add
 playheadColor option

---
 packages/tone/pianoroll.mjs | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/tone/pianoroll.mjs b/packages/tone/pianoroll.mjs
index ba116721..7f46785d 100644
--- a/packages/tone/pianoroll.mjs
+++ b/packages/tone/pianoroll.mjs
@@ -22,10 +22,14 @@ Pattern.prototype.pianoroll = function ({
   flipTime = 0,
   flipValues = 0,
   hideNegative = false,
-  inactive = '#C9E597',
+  // inactive = '#C9E597',
+  // inactive = '#FFCA28',
+  inactive = '#7491D2',
   active = '#FFCA28',
   // background = '#2A3236',
   background = 'transparent',
+  smear = 0,
+  playheadColor = 'white',
   minMidi = 10,
   maxMidi = 90,
   autorange = 0,
@@ -61,8 +65,11 @@ Pattern.prototype.pianoroll = function ({
   this.draw(
     (ctx, events, t) => {
       ctx.fillStyle = background;
-      ctx.clearRect(0, 0, w, h);
-      ctx.fillRect(0, 0, w, h);
+      ctx.globalAlpha = 1; // reset!
+      if (!smear) {
+        ctx.clearRect(0, 0, w, h);
+        ctx.fillRect(0, 0, w, h);
+      }
       const inFrame = (event) =>
         (!hideNegative || event.whole.begin >= 0) && event.whole.begin <= t + to && event.whole.end >= t + from;
       events.filter(inFrame).forEach((event) => {
@@ -97,9 +104,10 @@ Pattern.prototype.pianoroll = function ({
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
       });
+      ctx.globalAlpha = 1; // reset!
       const playheadPosition = scale(-from / timeExtent, ...timeRange);
       // draw playhead
-      ctx.strokeStyle = 'white';
+      ctx.strokeStyle = playheadColor;
       ctx.beginPath();
       if (vertical) {
         ctx.moveTo(0, playheadPosition);