elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 12:38:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

use hap color for claviature

Browse Source
This commit is contained in:
Felix Roos 2024-03-15 00:39:31 +01:00
parent 708675077f
commit 094b30cd26
2 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/widgets/Claviature.jsx
View File

@ -37,14 +37,14 @@ registerWidget('claviature', 'strudel-claviature');
Pattern.prototype.claviature = function (id, options = {}) { Pattern.prototype.claviature = function (id, options = {}) {
return this.onFrame((haps) => { return this.onFrame((haps) => {
const keys = haps.map((h) => h.value.note); const colorize = haps.map((h) => ({ keys: [h.value.note], color: h.context?.color || 'steelblue' }));
let el = document.getElementById(id); let el = document.getElementById(id);
el?.setAttribute( el?.setAttribute(
'options', 'options',
JSON.stringify({ JSON.stringify({
...options, ...options,
range: options.range || ['A2', 'C6'], range: options.range || ['A2', 'C6'],
colorize: [{ keys: keys, color: options.color || 'steelblue' }], colorize,
}), }),
); );
}); });

4
packages/widgets/README.md
View File

@ -19,9 +19,9 @@ Here is an example that uses all available options:
```js ```js
chord("<Em9 A7 D^7@2>").voicing().piano() chord("<Em9 A7 D^7@2>").voicing().piano()
.color('cyan')
.claviature({ .claviature({
range: ['C1', 'C6'], // rendered note range range: ['C1', 'C6'], // rendered note range
color: 'yellow', // highlighting color
palette: ['cyan', 'magenta'], palette: ['cyan', 'magenta'],
stroke: 'black', stroke: 'black',
scaleX: 1, scaleY: 1, scaleX: 1, scaleY: 1,
@ -29,5 +29,3 @@ chord("<Em9 A7 D^7@2>").voicing().piano()
lowerHeight: 50 lowerHeight: 50
}) })
``` ```
Note: The `Pattern.claviature` method uses the `colorization` option internally, so don't override that and use the `color` option for changing the highlighting color.