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

getTime callback for highlighting time

Browse Source
This commit is contained in:
Felix Roos 2022-08-23 21:23:01 +02:00
parent 29029714ee
commit 7b0c80c8be
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/react/src/hooks/useHighlighting.mjs
View File

@ -1,11 +1,9 @@
import { useEffect } from 'react'; import { useEffect, useRef } from 'react';
import { setHighlights } from '../components/CodeMirror6'; import { setHighlights } from '../components/CodeMirror6';
import { Tone } from '@strudel.cycles/tone';
let highlights = []; // actively highlighted events function useHighlighting({ view, pattern, active, getTime }) {
let lastEnd; const highlights = useRef([]);
const lastEnd = useRef();
function useHighlighting({ view, pattern, active }) {
useEffect(() => { useEffect(() => {
if (view) { if (view) {
if (pattern && active) { if (pattern && active) {
@ -13,16 +11,16 @@ function useHighlighting({ view, pattern, active }) {
function updateHighlights() { function updateHighlights() {
try { try {
const audioTime = Tone.getTransport().seconds; const audioTime = getTime();
// force min framerate of 10 fps => fixes crash on tab refocus, where lastEnd could be far away // 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 // see https://github.com/tidalcycles/strudel/issues/108
const begin = Math.max(lastEnd || audioTime, audioTime - 1 / 10); const begin = Math.max(lastEnd.current || audioTime, audioTime - 1 / 10);
const span = [begin, audioTime + 1 / 60]; const span = [begin, audioTime + 1 / 60];
lastEnd = audioTime + 1 / 60; lastEnd.current = audioTime + 1 / 60;
highlights = highlights.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active 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()); const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
highlights = highlights.concat(haps); // add potential new onsets highlights.current = highlights.current.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.current) }); // highlight all still active + new active haps
} catch (err) { } catch (err) {
// console.log('error in updateHighlights', err); // console.log('error in updateHighlights', err);
view.dispatch({ effects: setHighlights.of([]) }); view.dispatch({ effects: setHighlights.of([]) });
@ -34,7 +32,7 @@ function useHighlighting({ view, pattern, active }) {
cancelAnimationFrame(frame); cancelAnimationFrame(frame);
}; };
} else { } else {
highlights = []; highlights.current = [];
view.dispatch({ effects: setHighlights.of([]) }); view.dispatch({ effects: setHighlights.of([]) });
} }
} }