From 989b5dcc3a5d2b65508339bb9cb02563aad8c2c7 Mon Sep 17 00:00:00 2001
From: Alex McLean <alex@slab.org>
Date: Tue, 14 Oct 2025 10:41:57 +0100
Subject: [PATCH 1/2] thingie to display current pattern value

---
 packages/codemirror/widget.mjs |  6 +++++
 packages/draw/index.mjs        |  1 +
 packages/draw/textbox.mjs      | 47 ++++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 packages/draw/textbox.mjs

diff --git a/packages/codemirror/widget.mjs b/packages/codemirror/widget.mjs
index 42d3b1512..861225b91 100644
--- a/packages/codemirror/widget.mjs
+++ b/packages/codemirror/widget.mjs
@@ -140,3 +140,9 @@ registerWidget('_spectrum', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
   return pat.spectrum({ ...options, ctx, id });
 });
+
+registerWidget('_textbox', (id, options = {}, pat) => {
+  options = { width: 500, height: 30, ...options };
+  const ctx = getCanvasWidget(id, options).getContext('2d');
+  return pat.textbox({ ...options, ctx, id });
+});
diff --git a/packages/draw/index.mjs b/packages/draw/index.mjs
index 506c6151d..32865e063 100644
--- a/packages/draw/index.mjs
+++ b/packages/draw/index.mjs
@@ -4,3 +4,4 @@ export * from './draw.mjs';
 export * from './pianoroll.mjs';
 export * from './spiral.mjs';
 export * from './pitchwheel.mjs';
+export * from './textbox.mjs';
diff --git a/packages/draw/textbox.mjs b/packages/draw/textbox.mjs
new file mode 100644
index 000000000..f70e84285
--- /dev/null
+++ b/packages/draw/textbox.mjs
@@ -0,0 +1,47 @@
+import { getTheme, getDrawContext } from './draw.mjs';
+import { Pattern } from '@strudel/core';
+
+export function textbox({ haps, ctx, id, margin = 10, fontsize = 24 } = {}) {
+  const w = ctx.canvas.width;
+  const h = ctx.canvas.height;
+  ctx.clearRect(0, 0, w, h);
+  const color = getTheme().foreground;
+  const centerX = w / 2;
+  const centerY = h / 2;
+
+  if (id) {
+    haps = haps.filter((hap) => hap.hasTag(id));
+  }
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.globalAlpha = 1;
+  ctx.textAlign = 'left';
+
+  haps.forEach((hap) => {
+    if (hap.hasOnset()) {
+      const hapColor = hap.value.color || color;
+      ctx.strokeStyle = hapColor;
+      ctx.fillStyle = hapColor;
+      const { velocity = 1, gain = 1 } = hap.value || {};
+      const alpha = velocity * gain;
+      ctx.globalAlpha = alpha;
+      ctx.font = `${fontsize}px sans-serif`;
+      ctx.fillText(hap.value, 0, fontsize);
+    }
+  });
+
+  return;
+}
+
+Pattern.prototype.textbox = function (options = {}) {
+  let { ctx = getDrawContext(), id = 1 } = options;
+  return this.tag(id).onPaint((_, time, haps) =>
+    textbox({
+      ...options,
+      time,
+      ctx,
+      haps: haps.filter((hap) => hap.isActive(time)),
+      id,
+    }),
+  );
+};

From f5631a01ae7209b4617e06034e6a836b79e867d5 Mon Sep 17 00:00:00 2001
From: Alex McLean <alex@slab.org>
Date: Tue, 14 Oct 2025 11:02:53 +0100
Subject: [PATCH 2/2] fixes

---
 packages/draw/textbox.mjs | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/packages/draw/textbox.mjs b/packages/draw/textbox.mjs
index f70e84285..fa2cb9e14 100644
--- a/packages/draw/textbox.mjs
+++ b/packages/draw/textbox.mjs
@@ -6,12 +6,7 @@ export function textbox({ haps, ctx, id, margin = 10, fontsize = 24 } = {}) {
   const h = ctx.canvas.height;
   ctx.clearRect(0, 0, w, h);
   const color = getTheme().foreground;
-  const centerX = w / 2;
-  const centerY = h / 2;
 
-  if (id) {
-    haps = haps.filter((hap) => hap.hasTag(id));
-  }
   ctx.strokeStyle = color;
   ctx.fillStyle = color;
   ctx.globalAlpha = 1;
@@ -35,13 +30,21 @@ export function textbox({ haps, ctx, id, margin = 10, fontsize = 24 } = {}) {
 
 Pattern.prototype.textbox = function (options = {}) {
   let { ctx = getDrawContext(), id = 1 } = options;
-  return this.tag(id).onPaint((_, time, haps) =>
-    textbox({
-      ...options,
-      time,
-      ctx,
-      haps: haps.filter((hap) => hap.isActive(time)),
+  this.draw(
+    (haps, time) => {
+      textbox({
+        ...options,
+        time,
+        ctx,
+        haps: haps.filter((hap) => hap.isActive(time)),
+      });
+    },
+    {
+      lookbehind: 0,
+      lookahead: 0,
       id,
-    }),
+    },
   );
+
+  return this;
 };