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

support onload inline viz with autodraw

Browse Source
This commit is contained in:
Felix Roos 2024-06-02 03:05:26 +02:00
parent bf391ad6ce
commit aadb2fee84
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
website/src/docs/MiniRepl.jsx
View File

@ -1,7 +1,7 @@
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, noteToMidi, _mod } from '@strudel/core'; import { silence, noteToMidi, _mod } from '@strudel/core';
import { getPunchcardPainter } from '@strudel/draw'; import { getDrawContext, getPunchcardPainter } from '@strudel/draw';
import { transpiler } from '@strudel/transpiler'; import { transpiler } from '@strudel/transpiler';
import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio'; import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel/webaudio';
import { StrudelMirror } from '@strudel/codemirror'; import { StrudelMirror } from '@strudel/codemirror';
@ -28,24 +28,25 @@ export function MiniRepl({
claviature, claviature,
claviatureLabels, claviatureLabels,
maxHeight, maxHeight,
autodraw,
}) { }) {
const code = tunes ? tunes[0] : tune; const code = tunes ? tunes[0] : tune;
const id = useMemo(() => s4(), []); const id = useMemo(() => s4(), []);
const canvasId = useMemo(() => `canvas-${id}`, [id]); const canvasId = useMemo(() => `canvas-${id}`, [id]);
const shouldDraw = !!punchcard || !!claviature; autodraw = !!punchcard || !!claviature || !!autodraw;
const shouldShowCanvas = !!punchcard; const shouldShowCanvas = !!punchcard;
const drawTime = punchcard ? [0, 4] : [-2, 2]; const drawTime = punchcard ? [0, 4] : [-2, 2];
const [activeNotes, setActiveNotes] = useState([]); const [activeNotes, setActiveNotes] = useState([]);
const init = useCallback(({ code, shouldDraw }) => { const init = useCallback(({ code, autodraw }) => {
const drawContext = shouldDraw ? document.querySelector('#' + canvasId)?.getContext('2d') : null; const drawContext = canvasId ? document.querySelector('#' + canvasId)?.getContext('2d') : getDrawContext();
const editor = new StrudelMirror({ const editor = new StrudelMirror({
id, id,
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,
getTime: () => getAudioContext().currentTime, getTime: () => getAudioContext().currentTime,
transpiler, transpiler,
autodraw: !!shouldDraw, autodraw,
root: containerRef.current, root: containerRef.current,
initialCode: '// LOADING', initialCode: '// LOADING',
pattern: silence, pattern: silence,
@ -73,7 +74,7 @@ export function MiniRepl({
onUpdateState: (state) => { onUpdateState: (state) => {
setReplState({ ...state }); setReplState({ ...state });
}, },
beforeEval: () => audioReady, // not doing this in prebake to make sure viz is drawn beforeStart: () => audioReady,
afterEval: ({ code }) => setVersionDefaultsFrom(code), afterEval: ({ code }) => setVersionDefaultsFrom(code),
}); });
// init settings // init settings
@ -152,7 +153,7 @@ export function MiniRepl({
ref={(el) => { ref={(el) => {
if (!editorRef.current) { if (!editorRef.current) {
containerRef.current = el; containerRef.current = el;
init({ code, shouldDraw }); init({ code, autodraw });
} }
}} }}
></div> ></div>