sync highlighting with tone draw

repl/src/App.tsx

@@ -17,8 +17,8 @@ try {
 } catch (err) {
   console.warn('failed to decode', err);
 }
-
-Tone.setContext( new Tone.Context({ latencyHint : .5, lookAhead:1 }))
+// "balanced" | "interactive" | "playback";
+Tone.setContext(new Tone.Context({ latencyHint: 'playback', lookAhead: 1 }));
 const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.getDestination());
 defaultSynth.set({
   oscillator: { type: 'triangle' },
@@ -40,7 +40,7 @@ function App() {
   const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog } = useRepl({
     tune: decoded || randomTune,
     defaultSynth,
-    onEvent: useCallback(markEvent(editor), [editor]),
+    onDraw: useCallback(markEvent(editor), [editor]),
   });
   const logBox = useRef<any>();
   // scroll log box to bottom when log changes
@@ -124,7 +124,9 @@ function App() {
             </span>
           </div>
           {error && (
-            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>{error?.message || 'unknown error'}</div>
+            <div className={cx('absolute right-2 bottom-2 px-2', 'text-red-500')}>
+              {error?.message || 'unknown error'}
+            </div>
           )}
         </div>
         <button

repl/src/CodeMirror.tsx

@@ -17,7 +17,7 @@ export default function CodeMirror({ value, onChange, options, editorDidMount }:
   return <CodeMirror2 value={value} options={options} onBeforeChange={onChange} editorDidMount={editorDidMount} />;
 }
 
-export const markEvent = (editor) => (event) => {
+export const markEvent = (editor) => (time, event) => {
   const locs = event.value.locations;
   if (!locs || !editor) {
     return;

repl/src/useCycle.ts

@@ -8,12 +8,13 @@ export declare interface UseCycleProps {
   onEvent: ToneEventCallback<any>;
   onQuery?: (query: TimeSpan) => Hap[];
   onSchedule?: (events: Hap[], cycle: number) => void;
+  onDraw?: ToneEventCallback<any>;
   ready?: boolean; // if false, query will not be called on change props
 }
 
 function useCycle(props: UseCycleProps) {
   // onX must use useCallback!
-  const { onEvent, onQuery, onSchedule, ready = true } = props;
+  const { onEvent, onQuery, onSchedule, ready = true, onDraw } = props;
   const [started, setStarted] = useState<boolean>(false);
   const cycleDuration = 1;
   const activeCycle = () => Math.floor(Tone.getTransport().seconds / cycleDuration);
@@ -48,6 +49,10 @@ function useCycle(props: UseCycleProps) {
             value: event.value,
           };
           onEvent(time, toneEvent);
+          Tone.Draw.schedule(() => {
+            // do drawing or DOM manipulation here
+            onDraw?.(time, toneEvent);
+          }, time);
         }, event.part.begin.valueOf());
       });
   };

repl/src/useRepl.ts

@@ -11,7 +11,7 @@ let s4 = () => {
     .substring(1);
 };
 
-function useRepl({ tune, defaultSynth, autolink = true, onEvent }: any) {
+function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any) {
   const id = useMemo(() => s4(), []);
   const [code, setCode] = useState<string>(tune);
   const [activeCode, setActiveCode] = useState<string>();
@@ -52,6 +52,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent }: any) {
   };
   // cycle hook to control scheduling
   const cycle = useCycle({
+    onDraw,
     onEvent: useCallback(
       (time, event) => {
         try {