Throttle fps

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);
     }