add Pattern.id + use it for _punchcard and _spiral

packages/codemirror/widget.mjs

@@ -106,19 +106,19 @@ function getCanvasWidget(id, options = {}) {
 
 registerWidget('_pianoroll', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.pianoroll({ fold: 1, ...options, ctx, id });
+  return pat.id(id).pianoroll({ fold: 1, ...options, ctx, id });
 });
 
 registerWidget('_punchcard', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.punchcard({ fold: 1, ...options, ctx, id });
+  return pat.id(id).punchcard({ fold: 1, ...options, ctx, id });
 });
 
-/* registerWidget('_spiral', (id, options = {}, pat) => {
+registerWidget('_spiral', (id, options = {}, pat) => {
   options = { width: 200, height: 200, size: 36, ...options };
   const ctx = getCanvasWidget(id, options).getContext('2d');
   return pat.spiral({ ...options, ctx, id });
-}); */
+});
 
 registerWidget('_scope', (id, options = {}, pat) => {
   options = { width: 500, height: 60, pos: 0.5, scale: 1, ...options };

packages/core/pattern.mjs

@@ -2487,6 +2487,15 @@ export const { color, colour } = register(['color', 'colour'], function (color,
   return pat.withContext((context) => ({ ...context, color }));
 });
 
+/**
+ * Sets the id of the hap in, for filtering in the future.
+ * @name id
+ * @noAutocomplete
+ * @param {string} id anything unique
+ */
+Pattern.prototype.id = function (id) {
+  return this.withContext((ctx) => ({ ...ctx, id }));
+};
 //////////////////////////////////////////////////////////////////////
 // Control-related functions, i.e. ones that manipulate patterns of
 // objects

packages/draw/pianoroll.mjs

@@ -129,12 +129,17 @@ export function pianoroll({
   colorizeInactive = 1,
   fontFamily,
   ctx,
+  id,
 } = {}) {
   const w = ctx.canvas.width;
   const h = ctx.canvas.height;
   let from = -cycles * playhead;
   let to = cycles * (1 - playhead);
 
+  if (id) {
+    haps = haps.filter((hap) => hap.context.id === id);
+  }
+
   if (timeframeProp) {
     console.warn('timeframe is deprecated! use from/to instead');
     from = 0;

packages/draw/spiral.mjs

@@ -50,13 +50,13 @@ function spiralSegment(options) {
 }
 
 function drawSpiral(options) {
-  const {
+  let {
     stretch = 1,
     size = 80,
     thickness = size / 2,
     cap = 'butt', // round butt squar,
     inset = 3, // start angl,
-    playheadColor = '#ffffff90',
+    playheadColor = '#ffffff',
     playheadLength = 0.02,
     playheadThickness = thickness,
     padding = 0,
@@ -69,8 +69,13 @@ function drawSpiral(options) {
     time,
     haps,
     drawTime,
+    id,
   } = options;
 
+  if (id) {
+    haps = haps.filter((hap) => hap.context.id === id);
+  }
+
   const [w, h] = [ctx.canvas.width, ctx.canvas.height];
   ctx.clearRect(0, 0, w * 2, h * 2);
   const [cx, cy] = [w / 2, h / 2];