elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-20 01:58:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

patch holes in highlighting query span

Browse Source 
+ make sure disable-highlighting works again
This commit is contained in:
Felix Roos 2022-05-01 11:33:25 +02:00
parent d4607c68f7
commit bdb5dabba5
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
repl/src/App.js
View File

@ -121,7 +121,7 @@ function App() {
return () => window.removeEventListener('keydown', handleKeyPress); return () => window.removeEventListener('keydown', handleKeyPress);
}, [pattern, code, activateCode, cycle]); }, [pattern, code, activateCode, cycle]);
useHighlighting({ view, pattern, started: cycle.started }); useHighlighting({ view, pattern, active: cycle.started && !activeCode?.includes('strudel disable-highlighting') });
useWebMidi({ useWebMidi({
ready: useCallback( ready: useCallback(

2
repl/src/tutorial/MiniRepl.jsx
View File

@ -55,7 +55,7 @@ function MiniRepl({ tune, maxHeight = 500 }) {
const [ref, isVisible] = useInView({ const [ref, isVisible] = useInView({
threshold: 0.01, threshold: 0.01,
}); });
useHighlighting({ view, pattern, started: cycle.started }); useHighlighting({ view, pattern, active: cycle.started });
return ( return (
<div className="rounded-md overflow-hidden bg-[#444C57]" ref={ref}> <div className="rounded-md overflow-hidden bg-[#444C57]" ref={ref}>
<div className="flex justify-between bg-slate-700 border-t border-slate-500"> <div className="flex justify-between bg-slate-700 border-t border-slate-500">

11
repl/src/useHighlighting.js
View File

@ -3,17 +3,20 @@ import { setHighlights } from './CodeMirror6';
import { Tone } from '@strudel.cycles/tone'; import { Tone } from '@strudel.cycles/tone';
let highlights = []; // actively highlighted events let highlights = []; // actively highlighted events
let lastEnd;
function useHighlighting({ view, pattern, started }) { function useHighlighting({ view, pattern, active }) {
useEffect(() => { useEffect(() => {
if (view) { if (view) {
if (pattern && started) { if (pattern && active) {
let frame = requestAnimationFrame(updateHighlights); let frame = requestAnimationFrame(updateHighlights);
function updateHighlights() { function updateHighlights() {
const audioTime = Tone.getTransport().seconds; const audioTime = Tone.getTransport().seconds;
const span = [lastEnd || audioTime, audioTime + 1 / 60];
lastEnd = audioTime + 1 / 60;
highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
const haps = pattern.queryArc(audioTime, audioTime + 1 / 60).filter((hap) => hap.hasOnset()); const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
highlights = highlights.concat(haps); // add potential new onsets highlights = highlights.concat(haps); // add potential new onsets
view.dispatch({ effects: setHighlights.of(highlights) }); // highlight all still active + new active haps view.dispatch({ effects: setHighlights.of(highlights) }); // highlight all still active + new active haps
frame = requestAnimationFrame(updateHighlights); frame = requestAnimationFrame(updateHighlights);
@ -27,7 +30,7 @@ function useHighlighting({ view, pattern, started }) {
view.dispatch({ effects: setHighlights.of([]) }); view.dispatch({ effects: setHighlights.of([]) });
} }
} }
}, [pattern, started, view]); }, [pattern, active, view]);
} }
export default useHighlighting; export default useHighlighting;