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(() => {

packages/react/src/hooks/useStrudel.mjs

@@ -1,6 +1,7 @@
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { repl } from '@strudel.cycles/core';
 import { transpiler } from '@strudel.cycles/transpiler';
+import usePatternFrame from './usePatternFrame';
 import usePostMessage from './usePostMessage.mjs';
 
 function useStrudel({
@@ -12,10 +13,11 @@ function useStrudel({
   autolink = false,
   beforeEval,
   afterEval,
-  editPattern,
   onEvalError,
   onToggle,
   canvasId,
+  drawContext,
+  drawTime = [-2, 2],
 }) {
   const id = useMemo(() => s4(), []);
   canvasId = canvasId || `canvas-${id}`;
@@ -40,12 +42,12 @@ function useStrudel({
           onEvalError?.(err);
         },
         getTime,
+        drawContext,
         transpiler,
         beforeEval: ({ code }) => {
           setCode(code);
           beforeEval?.();
         },
-        editPattern: editPattern ? (pat) => editPattern(pat, id) : undefined,
         afterEval: ({ pattern: _pattern, code }) => {
           setActiveCode(code);
           setPattern(_pattern);
@@ -71,19 +73,40 @@ function useStrudel({
   });
   const activateCode = useCallback(
     async (autostart = true) => {
-      await evaluate(code, autostart);
+      const res = await evaluate(code, autostart);
       broadcast({ type: 'start', from: id });
+      return res;
     },
     [evaluate, code],
   );
 
+  const onDraw = useCallback(
+    (pattern, time, haps, drawTime) => {
+      const { onPaint } = pattern.context || {};
+      const ctx = typeof drawContext === 'function' ? drawContext(canvasId) : drawContext;
+      onPaint?.(ctx, time, haps, drawTime);
+    },
+    [drawContext, canvasId],
+  );
+
+  const drawFirstFrame = useCallback(
+    (pat) => {
+      if (drawContext && onDraw) {
+        const [_, lookahead] = drawTime;
+        const haps = pat.queryArc(0, lookahead);
+        onDraw(pat, 0, haps, drawTime);
+      }
+    },
+    [drawTime, onDraw],
+  );
+
   const inited = useRef();
   useEffect(() => {
-    if (!inited.current && evalOnMount && code) {
+    if (!inited.current && drawContext && onDraw && evalOnMount && code) {
       inited.current = true;
-      activateCode();
+      evaluate(code, false).then((pat) => drawFirstFrame(pat));
     }
-  }, [activateCode, evalOnMount, code]);
+  }, [activateCode, evalOnMount, code, drawFirstFrame]);
 
   // this will stop the scheduler when hot reloading in development
   useEffect(() => {
@@ -94,12 +117,22 @@ function useStrudel({
 
   const togglePlay = async () => {
     if (started) {
-      scheduler.pause();
+      scheduler.stop();
+      drawFirstFrame(pattern);
     } else {
       await activateCode();
     }
   };
   const error = schedulerError || evalError;
+
+  usePatternFrame({
+    pattern,
+    started: drawContext && started,
+    getTime: () => scheduler.now(),
+    drawTime,
+    onDraw,
+  });
+
   return {
     id,
     canvasId,