Merge branch 'main' into glossing/highlighting

Reviewed-on: https://codeberg.org/uzu/strudel/pulls/1775

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

packages/midi/midi.mjs

@@ -479,14 +479,24 @@ Pattern.prototype.midi = function (midiport, options = {}) {
 
 let listeners = {};
 const refs = {};
+const refsByChan = {};
 
 /**
  * MIDI input: Opens a MIDI input port to receive MIDI control change messages.
+ *
+ * The output is a function that accepts a midi cc value to query as well as (optionally) a midi channel
  * @param {string | number} input MIDI device name or index defaulting to 0
- * @returns {Function}
+ * @returns {function(number, number=): Pattern} A function from (cc, channel?) to a pattern.
+ *   When queried, the pattern will produces the most recently received midi value (normalized to 0 to 1)
+ *   that came through that cc number (and channel, if provided)
  * @example
- * let cc = await midin('IAC Driver Bus 1')
+ * const cc = await midin('IAC Driver Bus 1')
  * note("c a f e").lpf(cc(0).range(0, 1000)).lpq(cc(1).range(0, 10)).sound("sawtooth")
+ * @example
+ * const allCC = await midin('IAC Driver Bus 1')
+ * const cc = (ccNum) => allCC(ccNum, 2) // just channel 2
+ * note("c a f e").s("saw")
+ *   .when(cc(0).gt(0), x => x.postgain(0))
  */
 export async function midin(input) {
   if (isPattern(input)) {
@@ -511,17 +521,24 @@ export async function midin(input) {
       }`,
     );
   }
-  // ensure refs for this input are initialized
-  if (!refs[input]) {
-    refs[input] = {};
-  }
-  const cc = (cc) => ref(() => refs[input][cc] || 0);
+  refs[input] ??= {};
+  refsByChan[input] ??= {};
+  const cc = (cc, chan) => {
+    if (chan !== undefined) {
+      return ref(() => refsByChan[input][cc]?.[chan] || 0);
+    }
+    return ref(() => refs[input][cc] || 0);
+  };
 
   listeners[input] && device.removeListener('midimessage', listeners[input]);
   listeners[input] = (e) => {
-    const cc = e.dataBytes[0];
+    const ccNum = e.dataBytes[0];
     const v = e.dataBytes[1];
-    refs[input] && (refs[input][cc] = v / 127);
+    const chan = e.message.channel;
+    const scaled = v / 127;
+    refsByChan[input][ccNum] ??= {};
+    refsByChan[input][ccNum][chan] = scaled;
+    refs[input][ccNum] = scaled;
   };
   device.addListener('midimessage', listeners[input]);
   return cc;

test/__snapshots__/examples.test.mjs.snap

@@ -7048,6 +7048,27 @@ exports[`runs examples > example "midin" example index 0 1`] = `
 ]
 `;
 
+exports[`runs examples > example "midin" example index 1 1`] = `
+[
+  "[ 0/1 → 1/4 | note:c s:saw ]",
+  "[ 1/4 → 1/2 | note:a s:saw ]",
+  "[ 1/2 → 3/4 | note:f s:saw ]",
+  "[ 3/4 → 1/1 | note:e s:saw ]",
+  "[ 1/1 → 5/4 | note:c s:saw ]",
+  "[ 5/4 → 3/2 | note:a s:saw ]",
+  "[ 3/2 → 7/4 | note:f s:saw ]",
+  "[ 7/4 → 2/1 | note:e s:saw ]",
+  "[ 2/1 → 9/4 | note:c s:saw ]",
+  "[ 9/4 → 5/2 | note:a s:saw ]",
+  "[ 5/2 → 11/4 | note:f s:saw ]",
+  "[ 11/4 → 3/1 | note:e s:saw ]",
+  "[ 3/1 → 13/4 | note:c s:saw ]",
+  "[ 13/4 → 7/2 | note:a s:saw ]",
+  "[ 7/2 → 15/4 | note:f s:saw ]",
+  "[ 15/4 → 4/1 | note:e s:saw ]",
+]
+`;
+
 exports[`runs examples > example "midiport" example index 0 1`] = `
 [
   "[ 0/1 → 1/4 | note:c midiport:0 ]",