From 1375932c05cea422500a9328fec3207ac4e1a64c Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Sun, 27 Feb 2022 11:52:34 +0100
Subject: [PATCH] sync highlighting with tone draw

---
 repl/src/App.tsx        | 10 ++++++----
 repl/src/CodeMirror.tsx |  2 +-
 repl/src/useCycle.ts    |  7 ++++++-
 repl/src/useRepl.ts     |  3 ++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index 05cd9a5d..e1450d64 100644
--- a/repl/src/App.tsx
+++ b/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
diff --git a/repl/src/CodeMirror.tsx b/repl/src/CodeMirror.tsx
index 0dc27b54..f7de1807 100644
--- a/repl/src/CodeMirror.tsx
+++ b/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;
diff --git a/repl/src/useCycle.ts b/repl/src/useCycle.ts
index 45391abe..085ef401 100644
--- a/repl/src/useCycle.ts
+++ b/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());
       });
   };
diff --git a/repl/src/useRepl.ts b/repl/src/useRepl.ts
index 91277907..0a418fd3 100644
--- a/repl/src/useRepl.ts
+++ b/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 {