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

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
Show Stats 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
.map((hap) =>
(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 to = tr.newDoc.line(end.line).from + end.column;
const l = tr.newDoc.length;
if (from > l || to > l) {
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: 1.5px solid ${color};` } });
//const mark = Decoration.mark({ attributes: { style: `outline: 2px solid ${color};` } });
const mark = Decoration.mark({ attributes: { class: `outline outline-2 outline-foreground` } });
return mark.range(from, to);
}),
)

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

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

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

@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react';
import { setHighlights } from '../components/CodeMirror6';
function useHighlighting({ view, pattern, active, getTime, color }) {
function useHighlighting({ view, pattern, active, getTime }) {
const highlights = useRef([]);
const lastEnd = useRef(0);
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
const haps = pattern.queryArc(...span).filter((hap) => hap.hasOnset());
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) {
view.dispatch({ effects: setHighlights.of({ haps: [] }) });
}
@ -33,7 +33,7 @@ function useHighlighting({ view, pattern, active, getTime, color }) {
view.dispatch({ effects: setHighlights.of({ haps: [] }) });
}
}
}, [pattern, active, view, color]);
}, [pattern, active, view]);
}
export default useHighlighting;

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

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