From 72d1f129cfe0db20bb0236aea6895745d348b517 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 14 Dec 2023 11:29:33 +0100 Subject: [PATCH] add settings form to codemirror example --- packages/codemirror/codemirror.mjs | 3 +- .../examples/strudelmirror/index.html | 74 ++++++++++++++++ .../codemirror/examples/strudelmirror/main.js | 87 ++++++++++++++----- .../examples/strudelmirror/style.css | 20 +++++ 4 files changed, 160 insertions(+), 24 deletions(-) diff --git a/packages/codemirror/codemirror.mjs b/packages/codemirror/codemirror.mjs index a7638e9c..725dd818 100644 --- a/packages/codemirror/codemirror.mjs +++ b/packages/codemirror/codemirror.mjs @@ -19,6 +19,7 @@ const extensions = { theme, isAutoCompletionEnabled, isPatternHighlightingEnabled, + isActiveLineHighlighted: (on) => (on ? [highlightActiveLine(), highlightActiveLineGutter()] : []), isFlashEnabled, keybindings, }; @@ -40,8 +41,6 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, set // indentOnInput(), // works without. already brought with javascript extension? // bracketMatching(), // does not do anything closeBrackets(), - highlightActiveLineGutter(), - highlightActiveLine(), syntaxHighlighting(defaultHighlightStyle), history(), EditorView.updateListener.of((v) => onChange(v)), diff --git a/packages/codemirror/examples/strudelmirror/index.html b/packages/codemirror/examples/strudelmirror/index.html index 17b5009b..68bd57a1 100644 --- a/packages/codemirror/examples/strudelmirror/index.html +++ b/packages/codemirror/examples/strudelmirror/index.html @@ -7,6 +7,80 @@ StrudelMirror Example +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ + + +
+
diff --git a/packages/codemirror/examples/strudelmirror/main.js b/packages/codemirror/examples/strudelmirror/main.js index 3dd4b608..676f4b97 100644 --- a/packages/codemirror/examples/strudelmirror/main.js +++ b/packages/codemirror/examples/strudelmirror/main.js @@ -10,42 +10,38 @@ import { } from '@strudel.cycles/webaudio'; import './style.css'; +let editor; +const initialSettings = { + keybindings: 'codemirror', + isLineNumbersDisplayed: true, + isActiveLineHighlighted: true, + isAutoCompletionEnabled: false, + isPatternHighlightingEnabled: true, + isFlashEnabled: true, + isTooltipEnabled: false, + isLineWrappingEnabled: false, + theme: 'teletext', + fontFamily: 'monospace', + fontSize: 18, +}; + async function run() { const container = document.getElementById('code'); if (!container) { console.warn('could not init: no container found'); return; } - const settings = { - activeFooter: 'intro', - keybindings: 'codemirror', - isLineNumbersDisplayed: true, - isActiveLineHighlighted: true, - isAutoCompletionEnabled: false, - isPatternHighlightingEnabled: true, - isFlashEnabled: true, - isTooltipEnabled: false, - isLineWrappingEnabled: false, - theme: 'teletext', - fontFamily: 'monospace', - fontSize: 18, - latestCode: '', - isZen: false, - soundsFilter: 'all', - panelPosition: 'bottom', - userPatterns: '{}', - }; const drawContext = getDrawContext(); const drawTime = [-2, 2]; - const editor = new StrudelMirror({ + editor = new StrudelMirror({ defaultOutput: webaudioOutput, getTime: () => getAudioContext().currentTime, transpiler, root: container, initialCode: '// LOADING', pattern: silence, - settings, + settings: initialSettings, drawTime, onDraw: (haps, time, frame, painters) => { painters.length && drawContext.clearRect(0, 0, drawContext.canvas.width * 2, drawContext.canvas.height * 2); @@ -90,7 +86,7 @@ async function run() { }); // init settings - editor.updateSettings(settings); + editor.updateSettings(initialSettings); logger(`Welcome to Strudel! Click into the editor and then hit ctrl+enter to run the code!`, 'highlight'); const codeParam = window.location.href.split('#')[1] || ''; @@ -154,3 +150,50 @@ function onEvent(key, callback) { window.addEventListener('message', listener); return () => window.removeEventListener('message', listener); } + +// settings form +function getInput(form, name) { + return form.querySelector(`input[name=${name}]`) || form.querySelector(`select[name=${name}]`); +} +function getFormValues(form, initial) { + const entries = Object.entries(initial).map(([key, initialValue]) => { + const input = getInput(form, key); + if (!input) { + return [key, initialValue]; // fallback + } + if (input.type === 'checkbox') { + return [key, input.checked]; + } + if (input.type === 'number') { + return [key, Number(input.value)]; + } + if (input.tagName === 'SELECT') { + return [key, input.value]; + } + return [key, input.value]; + }); + return Object.fromEntries(entries); +} +function setFormValues(form, values) { + Object.entries(values).forEach(([key, value]) => { + const input = getInput(form, key); + if (!input) { + return; + } + if (input.type === 'checkbox') { + input.checked = !!value; + } else if (input.type === 'number') { + input.value = value; + } else if (input.tagName) { + input.value = value; + } + }); +} + +const form = document.querySelector('form[name=settings]'); +setFormValues(form, initialSettings); +form.addEventListener('change', () => { + const values = getFormValues(form, initialSettings); + // console.log('values', values); + editor.updateSettings(values); +}); diff --git a/packages/codemirror/examples/strudelmirror/style.css b/packages/codemirror/examples/strudelmirror/style.css index 35899df3..fabc795c 100644 --- a/packages/codemirror/examples/strudelmirror/style.css +++ b/packages/codemirror/examples/strudelmirror/style.css @@ -2,6 +2,13 @@ --foreground: white; } +body, +input { + font-family: monospace; + background: black; + color: white; +} + html, body, #code, @@ -11,3 +18,16 @@ body, margin: 0; height: 100%; } + +.settings { + position: fixed; + right: 0; + top: 0; + z-index: 1000; + display: flex-col; + padding: 10px; +} + +.settings > form > * + * { + margin-top: 10px; +}