Throttle in draw

packages/codemirror/codemirror.mjs

@@ -163,15 +163,10 @@ 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) => {
-      if (this.shouldHighlight()) {
-        const currentFrame = haps.filter((hap) => hap.isActive(time));
-        this.highlight(currentFrame, time);
-      }
+      const currentFrame = haps.filter((hap) => hap.isActive(time));
+      this.highlight(currentFrame, time);
       this.onDraw(haps, time, painters);
     }, drawTime);
 
@@ -328,18 +323,6 @@ 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;
@@ -374,7 +357,6 @@ export class StrudelMirror {
     });
     if (key === 'isPatternHighlightingEnabled') {
       this.isPatternHighlightingEnabled = value;
-      this.lastHighlightTime = 0;
       this.drawer.stop();
       this.shouldAnimate() && this.drawer.start(this.repl.scheduler);
     }

packages/draw/draw.mjs

@@ -6,6 +6,8 @@ This program is free software: you can redistribute it and/or modify it under th
 
 import { Pattern, getTime, State, TimeSpan } from '@strudel/core';
 
+const ANIMATE_INTERVAL = 1000 / 15; // 15 FPS
+
 export const getDrawContext = (id = 'test-canvas', options) => {
   let { contextType = '2d', pixelated = false, pixelRatio = window.devicePixelRatio } = options || {};
   let canvas = document.querySelector('#' + id);
@@ -112,7 +114,13 @@ export class Framer {
   }
   start() {
     const self = this;
+    let lastTime = 0;
     let frame = requestAnimationFrame(function updateHighlights(time) {
+      if (time - lastTime < ANIMATE_INTERVAL) {
+        frame = requestAnimationFrame(updateHighlights);
+        return;
+      }
+      lastTime = time;
       try {
         self.onFrame(time);
       } catch (err) {