From d44f6d3dede7c8da0d96653a90184ef448adacfb Mon Sep 17 00:00:00 2001
From: Aria <weglossing@gmail.com>
Date: Fri, 28 Nov 2025 20:26:48 -0600
Subject: [PATCH] Throttle fps

---
 packages/codemirror/codemirror.mjs | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

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