localize draw logic

packages/react/src/hooks/usePatternFrame.mjs

@@ -2,23 +2,32 @@ import { useCallback, useEffect, useRef } from 'react';
 import 'tailwindcss/tailwind.css';
 import useFrame from '../hooks/useFrame.mjs';
 
-function usePatternFrame({ pattern, started, getTime, onDraw }) {
+function usePatternFrame({ pattern, started, getTime, onDraw, drawTime = [-2, 2] }) {
+  let [lookbehind, lookahead] = drawTime;
+  lookbehind = Math.abs(lookbehind);
   let visibleHaps = useRef([]);
   let lastFrame = useRef(null);
+  useEffect(() => {
+    if (pattern) {
+      const t = getTime();
+      const futureHaps = pattern.queryArc(t, t + lookahead);
+      visibleHaps.current = visibleHaps.current.filter((h) => h.whole.begin < t);
+      visibleHaps.current = visibleHaps.current.concat(futureHaps);
+    }
+  }, [pattern]);
   const { start: startFrame, stop: stopFrame } = useFrame(
     useCallback(() => {
-      const phase = getTime();
+      const phase = getTime() + lookahead;
       if (lastFrame.current === null) {
         lastFrame.current = phase;
         return;
       }
       const haps = pattern.queryArc(Math.max(lastFrame.current, phase - 1 / 10), phase);
-      const cycles = 4;
       lastFrame.current = phase;
       visibleHaps.current = (visibleHaps.current || [])
-        .filter((h) => h.whole.end > phase - cycles) // in frame
+        .filter((h) => h.whole.end > phase - lookbehind - lookahead) // in frame
         .concat(haps.filter((h) => h.hasOnset()));
-      onDraw(phase, visibleHaps.current);
+      onDraw(pattern, phase - lookahead, visibleHaps.current, drawTime);
     }, [pattern]),
   );
   useEffect(() => {