add working claviature method

packages/claviature/Claviature.jsx

@@ -1,20 +1,23 @@
-import { createSignal, For } from 'solid-js';
+import { For } from 'solid-js';
 import { customElement } from 'solid-element';
 import { getClaviature } from 'claviature';
 import { Dynamic } from 'solid-js/web';
 
-customElement('strudel-claviature', { someProp: 'one', otherProp: 'two' }, (props, { element }) => {
-  const svg = getClaviature({
-    options: {
-      range: ['A1', 'C4'],
-      colorize: [{ keys: ['C3', 'E3', 'G3'], color: 'yellow' }],
-    },
-  });
-  const [activeNotes, setActiveNotes] = createSignal([]);
+let defaultOptions = {
+  range: ['A1', 'C6'],
+};
+
+customElement('strudel-claviature', { options: JSON.stringify(defaultOptions) }, (props, { element }) => {
+  let svg = () => {
+    let c = getClaviature({
+      options: JSON.parse(props.options),
+    });
+    return c;
+  };
   return (
     <div>
-      <svg {...svg.attributes}>
-        <For each={svg.children}>
+      <svg {...svg().attributes}>
+        <For each={svg().children}>
           {(el) => {
             return (
               <Dynamic component={el.name} {...el.attributes}>

packages/claviature/index.mjs

@@ -1 +1,24 @@
 export * from './Claviature.jsx';
+import { Pattern } from '@strudel/core';
+
+Pattern.prototype.claviature = function (options = {}) {
+  if (!window.claviature) {
+    window.claviature = document.createElement('strudel-claviature');
+    window.claviature.style.position = 'absolute';
+    window.claviature.style.bottom = 0;
+    window.claviature.style.left = 0;
+    document.body.append(window.claviature);
+  }
+  return this.onFrame((haps) => {
+    const keys = haps.map((h) => h.value.note);
+    // console.log('keys',keys);
+    window.claviature.setAttribute(
+      'options',
+      JSON.stringify({
+        ...options,
+        range: options.range || ['A2', 'C6'],
+        colorize: [{ keys: keys, color: options.color || 'steelblue' }],
+      }),
+    );
+  });
+};