add pianoroll widget

packages/widgets/Claviature.jsx

@@ -17,19 +17,17 @@ customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) },
     return c;
   };
   return (
-    <div>
-      <svg {...svg().attributes}>
-        <For each={svg().children}>
-          {(el) => {
-            return (
-              <Dynamic component={el.name} {...el.attributes}>
-                {el.value}
-              </Dynamic>
-            );
-          }}
-        </For>
-      </svg>
-    </div>
+    <svg {...svg().attributes}>
+      <For each={svg().children}>
+        {(el) => {
+          return (
+            <Dynamic component={el.name} {...el.attributes}>
+              {el.value}
+            </Dynamic>
+          );
+        }}
+      </For>
+    </svg>
   );
 });
 

packages/widgets/Pianoroll.jsx

@@ -0,0 +1,30 @@
+import { Pattern } from '@strudel/core';
+import { registerWidget } from '@strudel/transpiler';
+import { customElement } from 'solid-element';
+
+customElement('strudel-pianoroll', { options: JSON.stringify('{}') }, (props, { element }) => {
+  return <canvas width={400} height={100} />;
+});
+
+registerWidget('roll', 'strudel-pianoroll');
+
+Pattern.prototype.roll = function (id, options = { fold: 1 }) {
+  // TODO: remove setTimeout...
+  setTimeout(() => {
+    let el = document.getElementById(id);
+    if (!el) {
+      console.log('widget not found...');
+      return this;
+    }
+    const { width = 400, height = 100 } = options;
+    const canvas = el?.shadowRoot.firstChild;
+    const pixelRatio = window.devicePixelRatio;
+    canvas.width = width * pixelRatio;
+    canvas.height = height * pixelRatio;
+    canvas.style.width = width + 'px';
+    canvas.style.height = height + 'px';
+    const ctx = canvas.getContext('2d');
+    this.pianoroll({ ...options, ctx });
+  });
+  return this;
+};

packages/widgets/index.mjs

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

packages/widgets/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@strudel/core": "workspace:*",
     "@strudel/transpiler": "workspace:*",
+    "@strudel/draw": "workspace:*",
     "claviature": "^0.1.0",
     "solid-element": "^1.8.0",
     "solid-js": "^1.8.15",