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

use css var for highlighting color

Browse source
This commit is contained in:
Felix Roos 2023-02-19 20:03:12 +01:00
parent 1e3f09f69b
commit 632e8e9634
4 changed files with 7 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/react/src/components/CodeMirror6.jsx
View file

@ -58,15 +58,15 @@ const highlightField = StateField.define({
haps haps
.map((hap) => .map((hap) =>
(hap.context.locations || []).map(({ start, end }) => { (hap.context.locations || []).map(({ start, end }) => {
const color = hap.context.color || e.value.color || '#FFCA28'; // const color = hap.context.color || e.value.color || '#FFCA28';
let from = tr.newDoc.line(start.line).from + start.column; let from = tr.newDoc.line(start.line).from + start.column;
let to = tr.newDoc.line(end.line).from + end.column; let to = tr.newDoc.line(end.line).from + end.column;
const l = tr.newDoc.length; const l = tr.newDoc.length;
if (from > l || to > l) { if (from > l || to > l) {
return; // dont mark outside of range, as it will throw an error return; // dont mark outside of range, as it will throw an error
} }
// const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } }); //const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } }); const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
return mark.range(from, to); return mark.range(from, to);
}), }),
) )

2
packages/react/src/components/MiniRepl.jsx
View file

@ -23,7 +23,6 @@ export function MiniRepl({
punchcard, punchcard,
canvasHeight = 200, canvasHeight = 200,
theme, theme,
highlightColor,
}) { }) {
drawTime = drawTime || (punchcard ? [0, 4] : undefined); drawTime = drawTime || (punchcard ? [0, 4] : undefined);
const evalOnMount = !!drawTime; const evalOnMount = !!drawTime;
@ -72,7 +71,6 @@ export function MiniRepl({
pattern, pattern,
active: started && !activeCode?.includes('strudel disable-highlighting'), active: started && !activeCode?.includes('strudel disable-highlighting'),
getTime: () => scheduler.now(), getTime: () => scheduler.now(),
color: highlightColor,
}); });
// keyboard shortcuts // keyboard shortcuts

6
packages/react/src/hooks/useHighlighting.mjs
View file

@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react'; import { useEffect, useRef } from 'react';
import { setHighlights } from '../components/CodeMirror6'; import { setHighlights } from '../components/CodeMirror6';
function useHighlighting({ view, pattern, active, getTime, color }) { function useHighlighting({ view, pattern, active, getTime }) {
const highlights = useRef([]); const highlights = useRef([]);
const lastEnd = useRef(0); const lastEnd = useRef(0);
useEffect(() => { useEffect(() => {
@ -19,7 +19,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active highlights.current = highlights.current.filter((hap) => hap.whole.end > audioTime); // keep only highlights that are still active
const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset()); const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
highlights.current = highlights.current.concat(haps); // add potential new onsets highlights.current = highlights.current.concat(haps); // add potential new onsets
view.dispatch({ effects: setHighlights.of({ haps: highlights.current, color }) }); // highlight all still active + new active haps view.dispatch({ effects: setHighlights.of({ haps: highlights.current }) }); // highlight all still active + new active haps
} catch (err) { } catch (err) {
view.dispatch({ effects: setHighlights.of({ haps: [] }) }); view.dispatch({ effects: setHighlights.of({ haps: [] }) });
} }
@ -33,7 +33,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
view.dispatch({ effects: setHighlights.of({ haps: [] }) }); view.dispatch({ effects: setHighlights.of({ haps: [] }) });
} }
} }
}, [pattern, active, view, color]); }, [pattern, active, view]);
} }
export default useHighlighting; export default useHighlighting;

3
website/src/repl/Repl.jsx
View file

@ -183,7 +183,6 @@ export function Repl({ embedded = false }) {
pattern, pattern,
active: started && !activeCode?.includes('strudel disable-highlighting'), active: started && !activeCode?.includes('strudel disable-highlighting'),
getTime: () => scheduler.now(), getTime: () => scheduler.now(),
color: themeSettings?.foreground,
}); });
// //
@ -273,7 +272,7 @@ export function Repl({ embedded = false }) {
<ReplContext.Provider value={context}> <ReplContext.Provider value={context}>
<div <div
className={cx( className={cx(
'h-screen flex flex-col', 'h-full flex flex-col',
// 'bg-gradient-to-t from-green-900 to-slate-900', // // 'bg-gradient-to-t from-green-900 to-slate-900', //
)} )}
> >