hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add working claviature method

Browse source
This commit is contained in:
Felix Roos 2024-03-14 15:17:19 +01:00
parent 0a1da6f651
commit f2e16f946c
2 changed files with 37 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/claviature/Claviature.jsx
View file

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