move canvas functions to codemirror package

+ fix id collisions

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 });
+});

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) {

packages/widgets/canvas.mjs

@@ -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 });
-});

packages/widgets/index.mjs

@@ -1,2 +1 @@
 export * from './Claviature.jsx';
-export * from './canvas.mjs';