From 92937fa72eadf178b5f938616613faef93d7574a Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Sat, 12 Mar 2022 21:58:17 +0100
Subject: [PATCH] add lookaheadCycles to fix pianoroll

---
 repl/src/draw.mjs      | 12 ++++++------
 repl/src/pianoroll.mjs | 32 ++++++++++++++++++--------------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/repl/src/draw.mjs b/repl/src/draw.mjs
index 59716c70..5ed7eb88 100644
--- a/repl/src/draw.mjs
+++ b/repl/src/draw.mjs
@@ -14,7 +14,7 @@ export const getDrawContext = (id = 'test-canvas') => {
   return canvas.getContext('2d');
 };
 
-Pattern.prototype.draw = function (callback, queryDuration) {
+Pattern.prototype.draw = function (callback, cycleSpan, lookaheadCycles = 1) {
   if (window.strudelAnimation) {
     cancelAnimationFrame(window.strudelAnimation);
   }
@@ -23,16 +23,16 @@ Pattern.prototype.draw = function (callback, queryDuration) {
     events = [];
   const animate = (time) => {
     const t = Tone.getTransport().seconds;
-    if (queryDuration) {
-      const currentCycle = Math.floor(t / queryDuration);
+    if (cycleSpan) {
+      const currentCycle = Math.floor(t / cycleSpan);
       if (cycle !== currentCycle) {
         cycle = currentCycle;
-        const begin = currentCycle * queryDuration;
-        const end = (currentCycle + 1) * queryDuration;
+        const begin = currentCycle * cycleSpan;
+        const end = (currentCycle + lookaheadCycles) * cycleSpan;
         events = this.add(0).query(new State(new TimeSpan(begin, end)));
       }
     }
-    callback(ctx, events, t, queryDuration, time);
+    callback(ctx, events, t, cycleSpan, time);
     window.strudelAnimation = requestAnimationFrame(animate);
   };
   requestAnimationFrame(animate);
diff --git a/repl/src/pianoroll.mjs b/repl/src/pianoroll.mjs
index feba0939..3169caf0 100644
--- a/repl/src/pianoroll.mjs
+++ b/repl/src/pianoroll.mjs
@@ -12,19 +12,23 @@ Pattern.prototype.pianoroll = function ({
   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);
+  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 // lookaheadCycles
+  );
   return this;
 };