Merge branch 'main' into reset

repl/src/App.js

@@ -121,7 +121,7 @@ function App() {
     return () => window.removeEventListener('keydown', handleKeyPress);
   }, [pattern, code, activateCode, cycle]);
 
-  useHighlighting({ view, pattern, started: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });
 
   useWebMidi({
     ready: useCallback(

repl/src/CodeMirror6.jsx

@@ -37,7 +37,7 @@ const highlightField = StateField.define({
       }
       return highlights;
     } catch (err) {
-      console.warn('highlighting error', err);
+      // console.warn('highlighting error', err);
       return highlights;
     }
   },

repl/src/tutorial/MiniRepl.jsx

@@ -55,7 +55,7 @@ function MiniRepl({ tune, maxHeight = 500 }) {
   const [ref, isVisible] = useInView({
     threshold: 0.01,
   });
-  useHighlighting({ view, pattern, started: cycle.started });
+  useHighlighting({ view, pattern, active: cycle.started });
   return (
     <div className="rounded-md overflow-hidden bg-[#444C57]" ref={ref}>
       <div className="flex justify-between bg-slate-700 border-t border-slate-500">

repl/src/useHighlighting.js

@@ -3,19 +3,27 @@ import { setHighlights } from './CodeMirror6';
 import { Tone } from '@strudel.cycles/tone';
 
 let highlights = []; // actively highlighted events
+let lastEnd;
 
-function useHighlighting({ view, pattern, started }) {
+function useHighlighting({ view, pattern, active }) {
   useEffect(() => {
     if (view) {
-      if (pattern && started) {
+      if (pattern && active) {
         let frame = requestAnimationFrame(updateHighlights);
 
         function updateHighlights() {
-          const audioTime = Tone.getTransport().seconds;
-          highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
-          const haps = pattern.queryArc(audioTime, audioTime + 1 / 60).filter((hap) => hap.hasOnset());
-          highlights = highlights.concat(haps); // add potential new onsets
-          view.dispatch({ effects: setHighlights.of(highlights) }); // highlight all still active + new active haps
+          try {
+            const audioTime = Tone.getTransport().seconds;
+            const span = [lastEnd || audioTime, audioTime + 1 / 60];
+            lastEnd = audioTime + 1 / 60;
+            highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
+            const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
+            highlights = highlights.concat(haps); // add potential new onsets
+            view.dispatch({ effects: setHighlights.of(highlights) }); // highlight all still active + new active haps
+          } catch (err) {
+            // console.log('error in updateHighlights', err);
+            view.dispatch({ effects: setHighlights.of([]) });
+          }
           frame = requestAnimationFrame(updateHighlights);
         }
 
@@ -27,7 +35,7 @@ function useHighlighting({ view, pattern, started }) {
         view.dispatch({ effects: setHighlights.of([]) });
       }
     }
-  }, [pattern, started, view]);
+  }, [pattern, active, view]);
 }
 
 export default useHighlighting;