From 8d872ccee9b5cc125fc978f42fc1c32ead705b04 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Sun, 20 Feb 2022 20:30:40 +0100
Subject: [PATCH] highlight active events, js only

---
 repl/src/App.tsx | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/repl/src/App.tsx b/repl/src/App.tsx
index 03b9ad90..905f2364 100644
--- a/repl/src/App.tsx
+++ b/repl/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as Tone from 'tone';
 import CodeMirror from './CodeMirror';
 import cx from './cx';
@@ -35,9 +35,33 @@ function getRandomTune() {
 const randomTune = getRandomTune();
 
 function App() {
+  const [editor, setEditor] = useState<any>();
+  const doc = useMemo(() => editor?.getDoc(), [editor]);
   const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog } = useRepl({
     tune: decoded || randomTune,
     defaultSynth,
+    onEvent: useCallback(
+      (event) => {
+        const locs = event.value.locations;
+        if (!locs) {
+          return;
+        }
+        // mark active event
+        const marks = locs.map(({ start, end }) =>
+          doc.markText(
+            { line: start.line - 1, ch: start.column },
+            { line: end.line - 1, ch: end.column },
+            { css: 'background-color: gray;' }
+          )
+        );
+        //Tone.Transport.schedule(() => { // problem: this can be cleared by scheduler...
+        setTimeout(() => {
+          marks.forEach((mark) => mark.clear());
+          // }, '+' + event.duration * 0.5);
+        }, event.duration * 0.9 * 1000);
+      },
+      [doc]
+    ),
   });
   const logBox = useRef<any>();
   // scroll log box to bottom when log changes
@@ -106,10 +130,12 @@ function App() {
           <div className={cx('h-full  bg-[#2A3236]', error ? 'focus:ring-red-500' : 'focus:ring-slate-800')}>
             <CodeMirror
               value={code}
+              editorDidMount={setEditor}
               options={{
                 mode: 'javascript',
                 theme: 'material',
                 lineNumbers: true,
+                styleSelectedText: true,
               }}
               onChange={(_: any, __: any, value: any) => setCode(value)}
             />