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() {
+  getPhase(latencyCompensation = true) {
-    return this.phase;
+    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();
+    this.clock.pause();
-    // delete this.origin;
     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();
     }

repl/README.md

@@ -35,8 +35,10 @@ currently broken / buggy:
 - [ ] pending flag
 - [ ] web midi
 - [ ] draw / pianoroll
-- [ ] pause does stop
+- [x] pause does stop
+- [ ] pause then play logs "TOO LATE" and drops some events
 - [x] random button triggers start
-- [?] highlighting seems too late (off by latency ?)
 - [ ] unexpected ast format without body expression (kalimba)
-- [ ] highlighting sometimes drops highlights (zeldasRescue first note)
+- [x] highlighting seems too late (off by latency ?)
+- [x] highlighting sometimes drops highlights (zeldasRescue first note)
+- [ ] highlighting still sometimes drops highlights (zeldasRescue somtimes)

repl/src/App.jsx

@@ -146,7 +146,7 @@ function App() {
     view,
     pattern,
     active: started && !activeCode?.includes('strudel disable-highlighting'),
-    getTime: () => scheduler.phase,
+    getTime: () => scheduler.getPhase(),
     // getTime: () => Tone.getTransport().seconds,
   });
 
@@ -312,7 +312,11 @@ function App() {
           {/* onCursor={markParens} */}
           <CodeMirror value={code} onChange={setCode} onViewChanged={setView} />
           <span className="z-[20] bg-black rounded-t-md py-1 px-2 fixed bottom-0 right-1 text-xs whitespace-pre text-right pointer-events-none">
-            {!started ? `press ctrl+enter to play\n` : isDirty ? `press ctrl+enter to update\n` : 'press ctrl+dot do stop\n'}
+            {!started
+              ? `press ctrl+enter to play\n`
+              : isDirty
+              ? `press ctrl+enter to update\n`
+              : 'press ctrl+dot do stop\n'}
           </span>
           {error && (
             <div

repl/src/tunes.mjs

@@ -308,7 +308,6 @@ export const blippyRhodes = `samples({
   }
 }, 'https://loophole-letters.vercel.app/')
 
-const bass = synth(osc('sawtooth8')).chain(vol(.5),out())
 const scales = cat('C major', 'C mixolydian', 'F lydian', ['F minor', cat('Db major','Db mixolydian')])
 
 stack(