fix: claviature height

+ better defaults
+ break out solid web component creation

packages/widgets/Claviature.jsx

@@ -3,12 +3,9 @@ import { customElement } from 'solid-element';
 import { getClaviature } from 'claviature';
 import { Dynamic } from 'solid-js/web';
 import { registerWidget } from '@strudel/codemirror';
+import { getSolidWidget } from './solid.mjs';
 
-let defaultOptions = {
-  range: ['A1', 'C6'],
-};
-
-customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) }, (props, { element }) => {
+customElement('strudel-claviature', { options: '{}' }, (props, { element }) => {
   let svg = () => {
     let c = getClaviature({
       options: JSON.parse(props.options),
@@ -31,11 +28,12 @@ customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) },
 });
 
 registerWidget('claviature', (id, options = {}, pat) => {
-  const el = document.getElementById(id) || document.createElement('strudel-claviature');
-  setWidget(id, el);
+  options = { range: ['A0', 'C6'], scaleY: 1, scaleY: 0.5, scaleX: 0.5, ...options };
+  const height = (options.upperHeight + options.lowerHeight) * options.scaleY;
+  const el = getSolidWidget('strudel-claviature', id, { ...options, height });
   return pat.onFrame(id, (haps) => {
     const colorize = haps.map((h) => ({ keys: [h.value.note], color: h.context?.color || 'steelblue' }));
-    el?.setAttribute(
+    el.setAttribute(
       'options',
       JSON.stringify({
         ...options,

packages/widgets/canvas.mjs

@@ -1,7 +1,7 @@
 import { registerWidget, setWidget } from '@strudel/codemirror';
 
-function getCanvasWidget(id, options) {
-  const { width = 300, height = 100, pixelRatio = window.devicePixelRatio } = options || {};
+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;
@@ -11,12 +11,13 @@ function getCanvasWidget(id, options) {
   return canvas;
 }
 
-registerWidget('roll', (id, options = { fold: 1 }, pat) => {
+registerWidget('roll', (id, options = {}, pat) => {
   const ctx = getCanvasWidget(id, options).getContext('2d');
-  return pat.pianoroll({ ...options, ctx, id });
+  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, size: 50, id });
+  return pat.spiral({ ...options, ctx, id });
 });

packages/widgets/solid.mjs

@@ -0,0 +1,13 @@
+import { setWidget } from '@strudel/codemirror';
+
+export function getSolidWidget(type, id, options) {
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement('div');
+    const c = document.createElement(type);
+    el.appendChild(c);
+  }
+  el.height = options.height || 200;
+  setWidget(id, el);
+  return el?.firstChild;
+}