From 1ddf9687503e2d56bff1fc2224ba60a4c1f03530 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Jul 2022 22:26:14 +0200
Subject: [PATCH] fix: draw playhead only once

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

diff --git a/packages/tone/pianoroll.mjs b/packages/tone/pianoroll.mjs
index 810dbb1e..ba116721 100644
--- a/packages/tone/pianoroll.mjs
+++ b/packages/tone/pianoroll.mjs
@@ -58,7 +58,6 @@ Pattern.prototype.pianoroll = function ({
   flipTime && timeRange.reverse();
   flipValues && valueRange.reverse();
 
-  const playheadPosition = scale(-from / timeExtent, ...timeRange);
   this.draw(
     (ctx, events, t) => {
       ctx.fillStyle = background;
@@ -71,15 +70,6 @@ Pattern.prototype.pianoroll = function ({
         ctx.fillStyle = event.context?.color || inactive;
         ctx.strokeStyle = event.context?.color || active;
         ctx.globalAlpha = event.context.velocity ?? 1;
-        ctx.beginPath();
-        if (vertical) {
-          ctx.moveTo(0, playheadPosition);
-          ctx.lineTo(valueAxis, playheadPosition);
-        } else {
-          ctx.moveTo(playheadPosition, 0);
-          ctx.lineTo(playheadPosition, valueAxis);
-        }
-        ctx.stroke();
         const timePx = scale((event.whole.begin - (flipTime ? to : from)) / timeExtent, ...timeRange);
         let durationPx = scale(event.duration / timeExtent, 0, timeAxis);
         const value = getValue(event);
@@ -107,6 +97,18 @@ Pattern.prototype.pianoroll = function ({
         }
         isActive ? ctx.strokeRect(...coords) : ctx.fillRect(...coords);
       });
+      const playheadPosition = scale(-from / timeExtent, ...timeRange);
+      // draw playhead
+      ctx.strokeStyle = 'white';
+      ctx.beginPath();
+      if (vertical) {
+        ctx.moveTo(0, playheadPosition);
+        ctx.lineTo(valueAxis, playheadPosition);
+      } else {
+        ctx.moveTo(playheadPosition, 0);
+        ctx.lineTo(playheadPosition, valueAxis);
+      }
+      ctx.stroke();
     },
     {
       from: from - overscan,