diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index 33ea3968a..663b1927d 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -12,7 +12,7 @@ import { lineNumbers, } from '@codemirror/view'; import { persistentAtom } from '@nanostores/persistent'; -import { logger, registerControl, repl } from '@strudel/core'; +import { getPerformanceTimeSeconds, logger, registerControl, repl } from '@strudel/core'; import { cleanupDraw, Drawer } from '@strudel/draw'; import { isAutoCompletionEnabled } from './autocomplete.mjs'; @@ -163,10 +163,15 @@ export class StrudelMirror { this.id = id || s4(); this.solo = solo; this.hasPainters = false; + this.highlightFPS = 15; + this.highlightInterval = 1 / this.highlightFPS; + this.lastHighlightTime = 0; this.drawer = new Drawer((haps, time, _, painters) => { - const currentFrame = haps.filter((hap) => hap.isActive(time)); - this.highlight(currentFrame, time); + if (this.shouldHighlight()) { + const currentFrame = haps.filter((hap) => hap.isActive(time)); + this.highlight(currentFrame, time); + } this.onDraw(haps, time, painters); }, drawTime); @@ -323,6 +328,18 @@ export class StrudelMirror { flash(ms) { flash(this.editor, ms); } + shouldHighlight() { + if (!this.isPatternHighlightingEnabled) { + return false; + } + // Verify we're highlighting at the correct FPS + const now = getPerformanceTimeSeconds(); + if (now - this.lastHighlightTime < this.highlightInterval) { + return false; + } + this.lastHighlightTime = now; + return true; + } highlight(haps, time) { if (!this.isPatternHighlightingEnabled) { return; @@ -357,6 +374,7 @@ export class StrudelMirror { }); if (key === 'isPatternHighlightingEnabled') { this.isPatternHighlightingEnabled = value; + this.lastHighlightTime = 0; this.drawer.stop(); this.shouldAnimate() && this.drawer.start(this.repl.scheduler); }