diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2024-03-22 03:27:18 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-03-22 03:27:18 +0100 |
commit | 1cc3ca1332e9d1963e83d890dfff538a860529a9 (patch) | |
tree | 34806446ca566bebb6524a95b1337fd1280fcf13 /subprojects/frontend/src/editor | |
parent | refactor(web): improve web app styling (diff) | |
parent | feat: custom identifier coloring (diff) | |
download | refinery-1cc3ca1332e9d1963e83d890dfff538a860529a9.tar.gz refinery-1cc3ca1332e9d1963e83d890dfff538a860529a9.tar.zst refinery-1cc3ca1332e9d1963e83d890dfff538a860529a9.zip |
Merge pull request #56 from kris7t/custom-colors
feat: custom identifier coloring
Diffstat (limited to 'subprojects/frontend/src/editor')
-rw-r--r-- | subprojects/frontend/src/editor/EditorArea.tsx | 1 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorStore.ts | 8 | ||||
-rw-r--r-- | subprojects/frontend/src/editor/EditorTheme.ts | 36 |
3 files changed, 41 insertions, 4 deletions
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index aafaad40..ae5cff34 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx | |||
@@ -39,6 +39,7 @@ export default observer(function EditorArea({ | |||
39 | showLineNumbers={editorStore.showLineNumbers} | 39 | showLineNumbers={editorStore.showLineNumbers} |
40 | showActiveLine={!editorStore.hasSelection} | 40 | showActiveLine={!editorStore.hasSelection} |
41 | colorIdentifiers={editorStore.colorIdentifiers} | 41 | colorIdentifiers={editorStore.colorIdentifiers} |
42 | hexTypeHashes={editorStore.hexTypeHashes} | ||
42 | ref={editorParentRef} | 43 | ref={editorParentRef} |
43 | /> | 44 | /> |
44 | </Box> | 45 | </Box> |
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 33bca382..f128d70d 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts | |||
@@ -111,6 +111,8 @@ export default class EditorStore { | |||
111 | 111 | ||
112 | unsavedChanges = false; | 112 | unsavedChanges = false; |
113 | 113 | ||
114 | hexTypeHashes: string[] = []; | ||
115 | |||
114 | constructor( | 116 | constructor( |
115 | initialValue: string, | 117 | initialValue: string, |
116 | pwaStore: PWAStore, | 118 | pwaStore: PWAStore, |
@@ -275,8 +277,12 @@ export default class EditorStore { | |||
275 | this.doCommand(nextDiagnostic); | 277 | this.doCommand(nextDiagnostic); |
276 | } | 278 | } |
277 | 279 | ||
278 | updateSemanticHighlighting(ranges: IHighlightRange[]): void { | 280 | updateSemanticHighlighting( |
281 | ranges: IHighlightRange[], | ||
282 | hexTypeHashes: string[], | ||
283 | ): void { | ||
279 | this.dispatch(setSemanticHighlighting(ranges)); | 284 | this.dispatch(setSemanticHighlighting(ranges)); |
285 | this.hexTypeHashes = hexTypeHashes; | ||
280 | } | 286 | } |
281 | 287 | ||
282 | updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void { | 288 | updateOccurrences(write: IOccurrence[], read: IOccurrence[]): void { |
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index 4978c7f7..6deda080 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts | |||
@@ -14,6 +14,7 @@ import { | |||
14 | type CSSObject, | 14 | type CSSObject, |
15 | type Theme, | 15 | type Theme, |
16 | } from '@mui/material/styles'; | 16 | } from '@mui/material/styles'; |
17 | import { lch } from 'd3-color'; | ||
17 | import { range } from 'lodash-es'; | 18 | import { range } from 'lodash-es'; |
18 | 19 | ||
19 | import svgURL from '../utils/svgURL'; | 20 | import svgURL from '../utils/svgURL'; |
@@ -21,6 +22,7 @@ import svgURL from '../utils/svgURL'; | |||
21 | function createTypeHashStyles( | 22 | function createTypeHashStyles( |
22 | theme: Theme, | 23 | theme: Theme, |
23 | colorIdentifiers: boolean, | 24 | colorIdentifiers: boolean, |
25 | hexTypeHashes: string[], | ||
24 | ): CSSObject { | 26 | ): CSSObject { |
25 | if (!colorIdentifiers) { | 27 | if (!colorIdentifiers) { |
26 | return {}; | 28 | return {}; |
@@ -34,6 +36,26 @@ function createTypeHashStyles( | |||
34 | }, | 36 | }, |
35 | }; | 37 | }; |
36 | }); | 38 | }); |
39 | hexTypeHashes.forEach((typeHash) => { | ||
40 | let color = lch(`#${typeHash}`); | ||
41 | if (theme.palette.mode === 'dark') { | ||
42 | color = color.brighter(); | ||
43 | if (color.l < 60) { | ||
44 | color.l = 60; | ||
45 | } | ||
46 | } else { | ||
47 | color = color.darker(); | ||
48 | if (color.l > 60) { | ||
49 | color.l = 60; | ||
50 | } | ||
51 | } | ||
52 | result[`.tok-problem-typeHash-_${typeHash}`] = { | ||
53 | '&, .tok-typeName': { | ||
54 | color: color.formatRgb(), | ||
55 | fontWeight: theme.typography.fontWeightEditorTypeHash, | ||
56 | }, | ||
57 | }; | ||
58 | }); | ||
37 | return result; | 59 | return result; |
38 | } | 60 | } |
39 | 61 | ||
@@ -42,12 +64,20 @@ export default styled('div', { | |||
42 | shouldForwardProp: (propName) => | 64 | shouldForwardProp: (propName) => |
43 | propName !== 'showLineNumbers' && | 65 | propName !== 'showLineNumbers' && |
44 | propName !== 'showActiveLine' && | 66 | propName !== 'showActiveLine' && |
45 | propName !== 'colorIdentifiers', | 67 | propName !== 'colorIdentifiers' && |
68 | propName !== 'hexTypeHashes', | ||
46 | })<{ | 69 | })<{ |
47 | showLineNumbers: boolean; | 70 | showLineNumbers: boolean; |
48 | showActiveLine: boolean; | 71 | showActiveLine: boolean; |
49 | colorIdentifiers: boolean; | 72 | colorIdentifiers: boolean; |
50 | }>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => { | 73 | hexTypeHashes: string[]; |
74 | }>(({ | ||
75 | theme, | ||
76 | showLineNumbers, | ||
77 | showActiveLine, | ||
78 | colorIdentifiers, | ||
79 | hexTypeHashes, | ||
80 | }) => { | ||
51 | const editorFontStyle: CSSObject = { | 81 | const editorFontStyle: CSSObject = { |
52 | ...theme.typography.editor, | 82 | ...theme.typography.editor, |
53 | fontWeight: theme.typography.fontWeightEditorNormal, | 83 | fontWeight: theme.typography.fontWeightEditorNormal, |
@@ -157,7 +187,7 @@ export default styled('div', { | |||
157 | fontStyle: 'normal', | 187 | fontStyle: 'normal', |
158 | }, | 188 | }, |
159 | }, | 189 | }, |
160 | ...createTypeHashStyles(theme, colorIdentifiers), | 190 | ...createTypeHashStyles(theme, colorIdentifiers, hexTypeHashes), |
161 | }; | 191 | }; |
162 | 192 | ||
163 | const matchingStyle: CSSObject = { | 193 | const matchingStyle: CSSObject = { |