mirror/strudel
1
0
Fork 0
mirror of https://codeberg.org/uzu/strudel synced 2026-07-24 05:57:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

claviature tweaks

Browse Source
This commit is contained in:
Felix Roos
2024-04-03 21:31:17 +02:00
parent fe691adb28
commit 6350dfa31f
2 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/codemirror/widget.mjs
+1
View File
@@ -128,6 +128,7 @@ registerWidget('_scope', (id, options = {}, pat) => {
});
registerWidget('_claviature', (id, options = {}, pat) => {
options = { height: 75, width: 640, ...options };
const ctx = getCanvasWidget(id, options).getContext('2d');
return pat.tag(id).claviature({ ...options, ctx, id });
});
packages/draw/claviature.mjs
+8 -9
View File
@@ -58,7 +58,7 @@ const parseNote = (note) => (typeof note === 'number' ? note : toMidi(note));
export function claviature(haps, options) {
const {
ctx = getDrawContext(),
range = ['A1', 'C6'],
range = ['C1', 'D3'],
scaleX = 1,
scaleY = 1,
palette = [getTheme().foreground, getTheme().background],
@@ -69,7 +69,10 @@ export function claviature(haps, options) {
lowerHeight = 45,
} = options || {};
const offset = parseNote(range[0]);
const colorize = haps.map((hap) => ({ keys: [hap.value.note], color: hap.value.color || getTheme().selection }));
const colorizedMidi = haps.map((hap) => ({
keys: [parseNote(hap.value.note)],
color: hap.value.color || getTheme().selection,
}));
/* const to = parseNote(range[1]);
const totalKeys = to - offset + 1; */
/* const width = totalKeys * topWidth + topWidth + strokeWidth * 2;
@@ -83,17 +86,13 @@ export function claviature(haps, options) {
const cDiff = 12 - (offset % 12);
const cOffset = whiteX(cDiff + offset);
const blackOffset = cOffset - cDiff * topWidth;
const blackOffset = cOffset;
const blackX = (index) => (index - offset) * topWidth + blackOffset;
const blackX = (midi) => (midi - offset) * topWidth + blackOffset;
const colorizedMidi = colorize.map((c) => ({
...c,
keys: c.keys.map((key) => parseNote(key)),
}));
const getColor = (midi) => colorizedMidi.find(({ keys }) => keys.includes(midi))?.color;
ctx.clearRect(0, 0, ctx.canvas.width * 2, ctx.canvas.height * 2);
ctx.strokeStyle = stroke;
ctx.strokeStyle = 'white';
ctx.strokeWidth = strokeWidth;
white.forEach((midi) => {
ctx.fillStyle = getColor(midi) ?? palette[1];