elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-21 02:28:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: claviature height

Browse Source 
+ better defaults
+ break out solid web component creation
This commit is contained in:
Felix Roos 2024-03-15 11:04:35 +01:00
parent 4a95bf67da
commit dfd22b5e44
3 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/widgets/Claviature.jsx
View File

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

11
packages/widgets/canvas.mjs
View File

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

13
packages/widgets/solid.mjs Normal file
View File

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