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

microrepl claviature support

Browse source
This commit is contained in:
Felix Roos 2023-12-28 19:40:01 +01:00
parent f96827d052
commit 837f8f318d
1 changed files with 32 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

43
website/src/docs/MicroRepl.jsx
View file

@ -1,31 +1,35 @@
import { useState, useRef, useCallback, useMemo, useEffect } from 'react'; import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
import { Icon } from './Icon'; import { Icon } from './Icon';
import { silence, getPunchcardPainter } from '@strudel.cycles/core'; import { silence, getPunchcardPainter, noteToMidi } from '@strudel.cycles/core';
import { transpiler } from '@strudel.cycles/transpiler'; import { transpiler } from '@strudel.cycles/transpiler';
import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio'; import { getAudioContext, webaudioOutput } from '@strudel.cycles/webaudio';
import { StrudelMirror } from '@strudel/codemirror'; import { StrudelMirror } from '@strudel/codemirror';
import { prebake } from '@strudel/repl'; import { prebake } from '@strudel/repl';
import Claviature from '@components/Claviature';
export function MicroRepl({ export function MicroRepl({
code, code,
hideHeader = false, hideHeader = false,
canvasHeight = 100, canvasHeight = 100,
onTrigger, onTrigger,
onPaint,
punchcard, punchcard,
punchcardLabels = true, punchcardLabels = true,
claviature,
claviatureLabels,
}) { }) {
const id = useMemo(() => s4(), []); const id = useMemo(() => s4(), []);
const canvasId = useMemo(() => `canvas-${id}`, [id]); const canvasId = useMemo(() => `canvas-${id}`, [id]);
const shouldDraw = !!punchcard; const shouldDraw = !!punchcard || !!claviature;
const shouldShowCanvas = !!punchcard;
const drawTime = punchcard ? [0, 4] : [0, 0];
const [activeNotes, setActiveNotes] = useState([]);
const init = useCallback(({ code, shouldDraw }) => { const init = useCallback(({ code, shouldDraw }) => {
const drawTime = [0, 4];
const drawContext = shouldDraw ? document.querySelector('#' + canvasId)?.getContext('2d') : null; const drawContext = shouldDraw ? document.querySelector('#' + canvasId)?.getContext('2d') : null;
let onDraw; let onDraw;
if (shouldDraw) { if (shouldDraw) {
onDraw = (haps, time, frame, painters) => { onDraw = (haps, time, frame, painters) => {
painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2); painters.length && drawContext?.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2);
painters?.forEach((painter) => { painters?.forEach((painter) => {
// ctx time haps drawTime paintOptions // ctx time haps drawTime paintOptions
painter(drawContext, time, haps, drawTime, { clear: false }); painter(drawContext, time, haps, drawTime, { clear: false });
@ -48,10 +52,17 @@ export function MicroRepl({
if (onTrigger) { if (onTrigger) {
pat = pat.onTrigger(onTrigger, false); pat = pat.onTrigger(onTrigger, false);
} }
if (onPaint) { if (claviature) {
editor.painters.push(onPaint); editor?.painters.push((ctx, time, haps, drawTime) => {
} else if (punchcard) { const active = haps
editor.painters.push(getPunchcardPainter({ labels: !!punchcardLabels })); .map((hap) => hap.value.note)
.filter(Boolean)
.map((n) => (typeof n === 'string' ? noteToMidi(n) : n));
setActiveNotes(active);
});
}
if (punchcard) {
editor?.painters.push(getPunchcardPainter({ labels: !!punchcardLabels }));
} }
return pat; return pat;
}, },
@ -78,7 +89,7 @@ export function MicroRepl({
}); });
} }
return () => { return () => {
editor.clear(); editorRef.current?.clear();
}; };
}, []); }, []);
@ -116,7 +127,7 @@ export function MicroRepl({
<div ref={containerRef}></div> <div ref={containerRef}></div>
{error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>} {error && <div className="text-right p-1 text-md text-red-200">{error.message}</div>}
</div> </div>
{shouldDraw && ( {shouldShowCanvas && (
<canvas <canvas
id={canvasId} id={canvasId}
className="w-full pointer-events-none border-t border-lineHighlight" className="w-full pointer-events-none border-t border-lineHighlight"
@ -135,6 +146,16 @@ export function MicroRepl({
))} ))}
</div> </div>
) */} ) */}
{claviature && (
<Claviature
options={{
range: ['C2', 'C6'],
scaleY: 0.75,
colorize: [{ keys: activeNotes, color: 'steelblue' }],
labels: claviatureLabels || {},
}}
/>
)}
</div> </div>
); );
} }