Merge branch 'main' into glossing/highlighting

packages/codemirror/codemirror.mjs

@@ -162,6 +162,7 @@ export class StrudelMirror {
     this.onDraw = onDraw || this.draw;
     this.id = id || s4();
     this.solo = solo;
+    this.hasPainters = false;
 
     this.drawer = new Drawer((haps, time, _, painters) => {
       const currentFrame = haps.filter((hap) => hap.isActive(time));
@@ -177,7 +178,7 @@ export class StrudelMirror {
       onToggle: (started) => {
         replOptions?.onToggle?.(started);
         if (started) {
-          this.drawer.start(this.repl.scheduler);
+          this.shouldAnimate() && this.drawer.start(this.repl.scheduler);
           if (this.solo) {
             // stop other repls when this one is started
             document.dispatchEvent(
@@ -207,9 +208,10 @@ export class StrudelMirror {
         updateWidgets(this.editor, widgets);
         updateMiniLocations(this.editor, this.miniLocations);
         replOptions?.afterEval?.(options);
+        this.hasPainters = options.pattern.getPainters().length > 0;
         // if no painters are set (.onPaint was not called), then we only need
         // the present moment (for highlighting)
-        const drawTime = options.pattern.getPainters().length ? this.drawTime : [0, 0];
+        const drawTime = this.hasPainters ? this.drawTime : [0, 0];
         this.drawer.setDrawTime(drawTime);
         // invalidate drawer after we've set the appropriate drawTime
         this.drawer.invalidate(this.repl.scheduler);
@@ -237,6 +239,7 @@ export class StrudelMirror {
       cmEditor.style.backgroundColor = 'transparent';
     }
     const settings = codemirrorSettings.get();
+    this.isPatternHighlightingEnabled = parseBooleans(settings.isPatternHighlightingEnabled);
     this.setFontSize(settings.fontSize);
     this.setFontFamily(settings.fontFamily);
 
@@ -321,8 +324,17 @@ export class StrudelMirror {
     flash(this.editor, ms);
   }
   highlight(haps, time) {
+    if (!this.isPatternHighlightingEnabled) {
+      return;
+    }
     highlightMiniLocations(this.editor, time, haps);
   }
+  shouldAnimate() {
+    return (
+      this.repl.scheduler.started &&
+      (this.isPatternHighlightingEnabled || this.hasPainters || this.onDraw !== this.draw)
+    );
+  }
   setFontSize(size) {
     this.root.style.fontSize = size + 'px';
   }
@@ -343,6 +355,11 @@ export class StrudelMirror {
     this.editor.dispatch({
       effects: compartments[key].reconfigure(newValue),
     });
+    if (key === 'isPatternHighlightingEnabled') {
+      this.isPatternHighlightingEnabled = value;
+      this.drawer.stop();
+      this.shouldAnimate() && this.drawer.start(this.repl.scheduler);
+    }
     if (key === 'theme') {
       activateTheme(value);
     }

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) {