From d0366359159fc023128be7472871538ce7310562 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sat, 23 Mar 2024 00:20:00 +0100
Subject: [PATCH] move color to hap value

---
 packages/codemirror/highlight.mjs |  2 +-
 packages/core/controls.mjs        |  8 ++++++++
 packages/core/pattern.mjs         | 11 -----------
 packages/draw/pianoroll.mjs       |  2 +-
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/codemirror/highlight.mjs b/packages/codemirror/highlight.mjs
index dbfc6cbe..2f8cb38d 100644
--- a/packages/codemirror/highlight.mjs
+++ b/packages/codemirror/highlight.mjs
@@ -92,7 +92,7 @@ const miniLocationHighlights = EditorView.decorations.compute([miniLocations, vi
 
     if (haps.has(id)) {
       const hap = haps.get(id);
-      const color = hap.context.color ?? 'var(--foreground)';
+      const color = hap.value?.color ?? 'var(--foreground)';
       // Get explicit channels for color values
       /* 
       const swatch = document.createElement('div');
diff --git a/packages/core/controls.mjs b/packages/core/controls.mjs
index 5d6735e7..166f0ac2 100644
--- a/packages/core/controls.mjs
+++ b/packages/core/controls.mjs
@@ -1532,6 +1532,14 @@ export const { zdelay } = registerControl('zdelay');
 export const { tremolo } = registerControl('tremolo');
 export const { zzfx } = registerControl('zzfx');
 
+/**
+ * Sets the color of the hap in visualizations like pianoroll or highlighting.
+ * @name color
+ * @synonyms colour
+ * @param {string} color Hexadecimal or CSS color name
+ */
+export const { color, colour } = registerControl(['color', 'colour']);
+
 // TODO: slice / splice https://www.youtube.com/watch?v=hKhPdO0RKDQ&list=PL2lW1zNIIwj3bDkh-Y3LUGDuRcoUigoDs&index=13
 
 export let createParams = (...names) =>
diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index 649723a5..38748f4a 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -2476,17 +2476,6 @@ export const hsl = register('hsl', (h, s, l, pat) => {
   return pat.color(`hsl(${h}turn,${s * 100}%,${l * 100}%)`);
 });
 
-/**
- * Sets the color of the hap in visualizations like pianoroll or highlighting.
- * @name color
- * @synonyms colour
- * @param {string} color Hexadecimal or CSS color name
- */
-// TODO: move this to controls https://github.com/tidalcycles/strudel/issues/288
-export const { color, colour } = register(['color', 'colour'], function (color, pat) {
-  return pat.withContext((context) => ({ ...context, color }));
-});
-
 //////////////////////////////////////////////////////////////////////
 // Control-related functions, i.e. ones that manipulate patterns of
 // objects
diff --git a/packages/draw/pianoroll.mjs b/packages/draw/pianoroll.mjs
index 2ec2d7ee..272793e2 100644
--- a/packages/draw/pianoroll.mjs
+++ b/packages/draw/pianoroll.mjs
@@ -189,7 +189,7 @@ export function pianoroll({
     if (hideInactive && !isActive) {
       return;
     }
-    let color = event.value?.color || event.context?.color;
+    let color = event.value?.color;
     active = color || active;
     inactive = colorizeInactive ? color || inactive : inactive;
     color = isActive ? active : inactive;