reset canvas when pattern changes

+ rename noteroll -> punchcard

packages/core/pianoroll.mjs

@@ -284,12 +284,14 @@ export function pianoroll({
   return this;
 }
 
-Pattern.prototype.noteroll = function (options = { fold: 1 }) {
-  return this.onPaint((ctx, time, haps, drawTime) => {
-    let [lookbehind, lookahead] = drawTime;
-    lookbehind = Math.abs(lookbehind);
-    const cycles = lookahead + lookbehind;
-    const playhead = lookbehind / cycles;
-    pianoroll({ ctx, time, haps, ...options, cycles, playhead });
-  });
+function getOptions(drawTime, options) {
+  let [lookbehind, lookahead] = drawTime;
+  lookbehind = Math.abs(lookbehind);
+  const cycles = lookahead + lookbehind;
+  const playhead = lookbehind / cycles;
+  return { ...options, cycles, playhead };
+}
+
+Pattern.prototype.punchcard = function (options = { fold: 1 }) {
+  return this.onPaint((ctx, time, haps, drawTime) => pianoroll({ ctx, time, haps, ...getOptions(drawTime, options) }));
 };

packages/react/dist/index.es.js

@@ -178,12 +178,16 @@ function Me({ pattern: e, started: r, getTime: t, onDraw: o, drawTime: u = [-2,
         return;
       }
       const p = e.queryArc(Math.max(c.current, n - 1 / 10), n);
-      c.current = n, a.current = (a.current || []).filter((b) => b.whole.end > n - m - d).concat(p.filter((b) => b.hasOnset())), o(e, n - d, a.current, u);
+      c.current = n, a.current = (a.current || []).filter((b) => b.whole.end >= n - m - d).concat(p.filter((b) => b.hasOnset())), o(e, n - d, a.current, u);
     }, [e])
   );
-  k(() => {
+  return k(() => {
     r ? h() : (a.current = [], g());
-  }, [r]);
+  }, [r]), {
+    clear: () => {
+      a.current = [];
+    }
+  };
 }
 function Ae(e) {
   return k(() => (window.addEventListener("message", e), () => window.removeEventListener("message", e)), [e]), w((r) => window.postMessage(r, "*"), []);

packages/react/src/hooks/usePatternFrame.mjs

@@ -25,7 +25,7 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2]
       const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase);
       lastFrame.current = phase;
       visibleHaps.current = (visibleHaps.current || [])
-        .filter((h) => h.whole.end > phase - lookbehind - lookahead) // in frame
+        .filter((h) => h.whole.end >= phase - lookbehind - lookahead) // in frame
         .concat(haps.filter((h) => h.hasOnset()));
       onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime);
     }, [pattern]),
@@ -38,6 +38,11 @@ function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2]
       stopFrame();
     }
   }, [started]);
+  return {
+    clear: () => {
+      visibleHaps.current = [];
+    },
+  };
 }
 
 export default usePatternFrame;