fix: highlighting sync

packages/core/cyclist.mjs

@@ -16,6 +16,7 @@ export class Cyclist {
   constructor({ interval, onTrigger, onToggle, onError, getTime, latency = 0.1 }) {
     this.getTime = getTime;
     this.onToggle = onToggle;
+    this.latency = latency;
     const round = (x) => Math.round(x * 1000) / 1000;
     this.clock = createClock(
       getTime,
@@ -44,8 +45,8 @@ export class Cyclist {
       interval, // duration of each cycle
     );
   }
-  getPhase() {
-    return this.phase;
+  getPhase(latencyCompensation = true) {
+    return this.phase - (latencyCompensation ? this.latency : 0);
   }
   setStarted(v) {
     this.started = v;
@@ -59,12 +60,10 @@ export class Cyclist {
     this.setStarted(true);
   }
   pause() {
-    this.clock.stop();
-    // delete this.origin;
+    this.clock.pause();
     this.setStarted(false);
   }
   stop() {
-    delete this.origin;
     this.clock.stop();
     this.setStarted(false);
   }

packages/react/examples/nano-repl/src/App.jsx

@@ -82,7 +82,7 @@ function App() {
     view,
     pattern,
     active: !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.phase,
+    getTime: () => scheduler.getPhase(),
   });
 
   const error = evalError || schedulerError;

packages/react/src/components/MiniRepl.jsx

@@ -49,7 +49,7 @@ export function MiniRepl({ tune, hideOutsideView = false, init, enableKeyboard }
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.phase,
+    getTime: () => scheduler.getPhase(),
   });
 
   // set active pattern on ctrl+enter

packages/react/src/hooks/useHighlighting.mjs

@@ -14,9 +14,9 @@ function useHighlighting({ view, pattern, active, getTime }) {
             const audioTime = getTime();
             // force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away
             // see https://github.com/tidalcycles/strudel/issues/108
-            const begin = Math.max(lastEnd.current || audioTime, audioTime - 1 / 10);
+            const begin = Math.max(lastEnd.current || audioTime, audioTime - 1 / 10, 0); // negative time seems buggy
             const span = [begin, audioTime + 1 / 60];
-            lastEnd.current = audioTime + 1 / 60;
+            lastEnd.current = span[1];
             highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
             const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
             highlights.current = highlights.current.concat(haps); // add potential new onsets

packages/react/src/hooks/useStrudel.mjs

@@ -48,7 +48,6 @@ function useStrudel({ defaultOutput, interval, getTime, evalOnMount = false, ini
   const togglePlay = async () => {
     if (started) {
       scheduler.pause();
-      // scheduler.stop();
     } else {
       await activateCode();
     }