begin reimplementing draw logic for parallel use

packages/react/src/components/MiniRepl.jsx

@@ -1,18 +1,20 @@
-import React, { useState, useMemo, useRef, useEffect, useLayoutEffect } from 'react';
+import { pianoroll } from '@strudel.cycles/core';
+import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useInView } from 'react-hook-inview';
+import 'tailwindcss/tailwind.css';
 import cx from '../cx';
 import useHighlighting from '../hooks/useHighlighting.mjs';
-import CodeMirror6, { flash } from './CodeMirror6';
-import 'tailwindcss/tailwind.css';
-import './style.css';
-import styles from './MiniRepl.module.css';
-import { Icon } from './Icon';
-import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
+import usePatternFrame from '../hooks/usePatternFrame.mjs';
 import useStrudel from '../hooks/useStrudel.mjs';
+import CodeMirror6, { flash } from './CodeMirror6';
+import { Icon } from './Icon';
+import styles from './MiniRepl.module.css';
+import './style.css';
 
 const getTime = () => getAudioContext().currentTime;
 
-export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }) {
+export function MiniRepl({ tune, hideOutsideView = false, enableKeyboard, withCanvas = false, canvasHeight = 200 }) {
   const {
     code,
     setCode,
@@ -26,11 +28,23 @@ export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }
     scheduler,
     togglePlay,
     stop,
+    canvasId,
   } = useStrudel({
     initialCode: tune,
     defaultOutput: webaudioOutput,
     getTime,
   });
+
+  usePatternFrame({
+    pattern,
+    started,
+    getTime: () => scheduler.now(),
+    onDraw: (time, haps) => {
+      const ctx = document.querySelector('#' + canvasId).getContext('2d');
+      pianoroll({ ctx, time, haps, autorange: 1, fold: 1, playhead: 1 });
+    },
+  });
+
   /*   useEffect(() => {
     init && activateCode();
   }, [init, activateCode]); */
@@ -88,6 +102,18 @@ export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }
       <div className={styles.body}>
         {show && <CodeMirror6 value={code} onChange={setCode} onViewChanged={setView} />}
       </div>
+      {withCanvas && (
+        <canvas
+          id={canvasId}
+          className="w-full pointer-events-none"
+          height={canvasHeight}
+          ref={(el) => {
+            if (el && el.width !== el.clientWidth) {
+              el.width = el.clientWidth;
+            }
+          }}
+        ></canvas>
+      )}
     </div>
   );
 }

packages/react/src/hooks/useFrame.mjs

@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react';
+
+function useFrame(callback, autostart = false) {
+  const requestRef = useRef();
+  const previousTimeRef = useRef();
+
+  const animate = (time) => {
+    if (previousTimeRef.current !== undefined) {
+      const deltaTime = time - previousTimeRef.current;
+      callback(time, deltaTime);
+    }
+    previousTimeRef.current = time;
+    requestRef.current = requestAnimationFrame(animate);
+  };
+
+  const start = () => {
+    requestRef.current = requestAnimationFrame(animate);
+  };
+  const stop = () => {
+    requestRef.current && cancelAnimationFrame(requestRef.current);
+    delete requestRef.current;
+  };
+  useEffect(() => {
+    if (requestRef.current) {
+      stop();
+      start();
+    }
+  }, [callback]);
+
+  useEffect(() => {
+    if (autostart) {
+      start();
+    }
+    return stop;
+  }, []); // Make sure the effect only runs once
+
+  return {
+    start,
+    stop,
+  };
+}
+
+export default useFrame;

packages/react/src/hooks/usePatternFrame.mjs

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef } from 'react';
+import 'tailwindcss/tailwind.css';
+import useFrame from '../hooks/useFrame.mjs';
+
+function usePatternFrame({ pattern, started, getTime, onDraw }) {
+  let visibleHaps = useRef([]);
+  let lastFrame = useRef(null);
+  const { start: startFrame, stop: stopFrame } = useFrame(
+    useCallback(() => {
+      const phase = getTime();
+      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
+        .concat(haps.filter((h) => h.hasOnset()));
+      onDraw(phase, visibleHaps.current);
+    }, [pattern]),
+  );
+  useEffect(() => {
+    if (started) {
+      startFrame();
+    } else {
+      visibleHaps.current = [];
+      stopFrame();
+    }
+  }, [started]);
+}
+
+export default usePatternFrame;

packages/react/src/hooks/useStrudel.mjs

@@ -14,8 +14,10 @@ function useStrudel({
   afterEval,
   onEvalError,
   onToggle,
+  canvasId,
 }) {
   const id = useMemo(() => s4(), []);
+  canvasId = canvasId || `canvas-${id}`;
   // scheduler
   const [schedulerError, setSchedulerError] = useState();
   const [evalError, setEvalError] = useState();
@@ -97,6 +99,8 @@ function useStrudel({
   };
   const error = schedulerError || evalError;
   return {
+    id,
+    canvasId,
     code,
     setCode,
     error,