From 076b6f1c8205d5e5cf0c0b8075c3d3824d218cf9 Mon Sep 17 00:00:00 2001
From: Felix Roos <flix91@gmail.com>
Date: Sun, 17 Mar 2024 04:00:28 +0100
Subject: [PATCH] move canvas functions to codemirror package + fix id
 collisions

---
 packages/codemirror/widget.mjs     | 37 ++++++++++++++++++++++++++++++
 packages/transpiler/transpiler.mjs |  2 +-
 packages/widgets/canvas.mjs        | 35 ----------------------------
 packages/widgets/index.mjs         |  1 -
 4 files changed, 38 insertions(+), 37 deletions(-)
 delete mode 100644 packages/widgets/canvas.mjs

diff --git a/packages/codemirror/widget.mjs b/packages/codemirror/widget.mjs
index 16f123d7..c2c1653b 100644
--- a/packages/codemirror/widget.mjs
+++ b/packages/codemirror/widget.mjs
@@ -90,3 +90,40 @@ export function registerWidget(type, fn) {
     };
   }
 }
+
+// wire up @strudel/draw functions
+
+function getCanvasWidget(id, options = {}) {
+  const { width = 500, height = 60, pixelRatio = window.devicePixelRatio } = options;
+  let canvas = document.getElementById(id) || document.createElement('canvas');
+  console.log('canvas', canvas);
+  canvas.width = width * pixelRatio;
+  canvas.height = height * pixelRatio;
+  canvas.style.width = width + 'px';
+  canvas.style.height = height + 'px';
+  setWidget(id, canvas);
+  return canvas;
+}
+
+registerWidget('roll', (id, options = {}, pat) => {
+  const ctx = getCanvasWidget(id, options).getContext('2d');
+  return pat.pianoroll({ fold: 1, ...options, ctx, id });
+});
+
+registerWidget('twist', (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('osci', (id, options = {}, pat) => {
+  options = { width: 500, height: 60, pos: 0.5, scale: 1, ...options };
+  const ctx = getCanvasWidget(id, options).getContext('2d');
+  // TODO: find way to clear previous analysers to avoid memory leak
+  // .scope passes id to Pattern.analyze, which is picked up by superdough
+  // .. which calls getAnalyserById(analyze), creating a new analyzer (+buffer) for that key
+  // the id here is the col number where the osci function ends (as passed by the transpiler)
+  // effectively, this means for each evaluation of .osci on a unique col, a new analyser will be created
+  // the problem is that the old ones will never get deleted.. this might pile up some memory
+  return pat.scope({ ...options, ctx, id });
+});
diff --git a/packages/transpiler/transpiler.mjs b/packages/transpiler/transpiler.mjs
index 380d9ba0..d4b474d9 100644
--- a/packages/transpiler/transpiler.mjs
+++ b/packages/transpiler/transpiler.mjs
@@ -150,7 +150,7 @@ export function getWidgetID(widgetConfig) {
   // that means, if we use the index index of line position as id, less garbage is generated
   // return `widget_${widgetConfig.to}`; // more gargabe
   //return `widget_${widgetConfig.index}_${widgetConfig.to}`; // also more garbage
-  return `widget_${widgetConfig.index}`; // less garbage
+  return `widget_${widgetConfig.type}_${widgetConfig.index}`; // less garbage
 }
 
 function widgetWithLocation(node, widgetConfig) {
diff --git a/packages/widgets/canvas.mjs b/packages/widgets/canvas.mjs
deleted file mode 100644
index d5a705b9..00000000
--- a/packages/widgets/canvas.mjs
+++ /dev/null
@@ -1,35 +0,0 @@
-import { registerWidget, setWidget } from '@strudel/codemirror';
-
-function getCanvasWidget(id, options = {}) {
-  const { width = 500, height = 60, pixelRatio = window.devicePixelRatio } = options;
-  let canvas = document.getElementById(id) || document.createElement('canvas');
-  canvas.width = width * pixelRatio;
-  canvas.height = height * pixelRatio;
-  canvas.style.width = width + 'px';
-  canvas.style.height = height + 'px';
-  setWidget(id, canvas);
-  return canvas;
-}
-
-registerWidget('roll', (id, options = {}, pat) => {
-  const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.pianoroll({ fold: 1, ...options, ctx, id });
-});
-
-registerWidget('twist', (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('osci', (id, options = {}, pat) => {
-  options = { width: 500, height: 60, pos: 0.5, scale: 1, ...options };
-  const ctx = getCanvasWidget(id, options).getContext('2d');
-  // TODO: find way to clear previous analysers to avoid memory leak
-  // .scope passes id to Pattern.analyze, which is picked up by superdough
-  // .. which calls getAnalyserById(analyze), creating a new analyzer (+buffer) for that key
-  // the id here is the col number where the osci function ends (as passed by the transpiler)
-  // effectively, this means for each evaluation of .osci on a unique col, a new analyser will be created
-  // the problem is that the old ones will never get deleted.. this might pile up some memory
-  return pat.scope({ ...options, ctx, id });
-});
diff --git a/packages/widgets/index.mjs b/packages/widgets/index.mjs
index ad6e7d1f..281c6ab8 100644
--- a/packages/widgets/index.mjs
+++ b/packages/widgets/index.mjs
@@ -1,2 +1 @@
 export * from './Claviature.jsx';
-export * from './canvas.mjs';