From b5720355f9e59c269776b6e9a5210949ff1f75ae Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Thu, 28 Mar 2024 09:31:12 +0100
Subject: [PATCH] fix: allow multiple visuals for the same pattern + using .tag
 function instead of single .id

---
 packages/codemirror/widget.mjs |  8 ++++----
 packages/core/hap.mjs          |  4 ++++
 packages/core/pattern.mjs      | 10 +++++-----
 packages/draw/pianoroll.mjs    |  2 +-
 packages/draw/spiral.mjs       |  2 +-
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/codemirror/widget.mjs b/packages/codemirror/widget.mjs
index 98d78b36..1d86dc35 100644
--- a/packages/codemirror/widget.mjs
+++ b/packages/codemirror/widget.mjs
@@ -106,23 +106,23 @@ function getCanvasWidget(id, options = {}) {
 
 registerWidget('_pianoroll', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.id(id).pianoroll({ fold: 1, ...options, ctx, id });
+  return pat.tag(id).pianoroll({ fold: 1, ...options, ctx, id });
 });
 
 registerWidget('_punchcard', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.id(id).punchcard({ fold: 1, ...options, ctx, id });
+  return pat.tag(id).punchcard({ fold: 1, ...options, ctx, id });
 });
 
 registerWidget('_spiral', (id, options = {}, pat) => {
   let _size = options.size || 275;
   options = { width: _size, height: _size, ...options, size: _size / 5 };
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.id(id).spiral({ ...options, ctx, id });
+  return pat.tag(id).spiral({ ...options, ctx, id });
 });
 
 registerWidget('_scope', (id, options = {}, pat) => {
   options = { width: 500, height: 60, pos: 0.5, scale: 1, ...options };
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.id(id).scope({ ...options, ctx, id });
+  return pat.tag(id).scope({ ...options, ctx, id });
 });
diff --git a/packages/core/hap.mjs b/packages/core/hap.mjs
index 17ac6ad0..7a9e0a62 100644
--- a/packages/core/hap.mjs
+++ b/packages/core/hap.mjs
@@ -91,6 +91,10 @@ export class Hap {
     return this.whole != undefined && this.whole.begin.equals(this.part.begin);
   }
 
+  hasTag(tag) {
+    return this.context.tags?.includes(tag);
+  }
+
   resolveState(state) {
     if (this.stateful && this.hasOnset()) {
       console.log('stateful');
diff --git a/packages/core/pattern.mjs b/packages/core/pattern.mjs
index b1aa852f..5d967cf1 100644
--- a/packages/core/pattern.mjs
+++ b/packages/core/pattern.mjs
@@ -2477,13 +2477,13 @@ export const hsl = register('hsl', (h, s, l, pat) => {
 });
 
 /**
- * Sets the id of the hap in, for filtering in the future.
- * @name id
+ * Tags each Hap with an identifier. Good for filtering. The function populates Hap.context.tags (Array).
+ * @name tag
  * @noAutocomplete
- * @param {string} id anything unique
+ * @param {string} tag anything unique
  */
-Pattern.prototype.id = function (id) {
-  return this.withContext((ctx) => ({ ...ctx, id }));
+Pattern.prototype.tag = function (tag) {
+  return this.withContext((ctx) => ({ ...ctx, tags: (ctx.tags || []).concat([tag]) }));
 };
 
 //////////////////////////////////////////////////////////////////////
diff --git a/packages/draw/pianoroll.mjs b/packages/draw/pianoroll.mjs
index dc2faac4..53eb03f3 100644
--- a/packages/draw/pianoroll.mjs
+++ b/packages/draw/pianoroll.mjs
@@ -134,7 +134,7 @@ export function pianoroll({
   let to = cycles * (1 - playhead);
 
   if (id) {
-    haps = haps.filter((hap) => hap.context.id === id);
+    haps = haps.filter((hap) => hap.hasTag(id));
   }
 
   if (timeframeProp) {
diff --git a/packages/draw/spiral.mjs b/packages/draw/spiral.mjs
index e0104c29..9ea4f5a4 100644
--- a/packages/draw/spiral.mjs
+++ b/packages/draw/spiral.mjs
@@ -73,7 +73,7 @@ function drawSpiral(options) {
   } = options;
 
   if (id) {
-    haps = haps.filter((hap) => hap.context.id === id);
+    haps = haps.filter((hap) => hap.hasTag(id));
   }
 
   const [w, h] = [ctx.canvas.width, ctx.canvas.height];