From 2fe65e414ff3194cdddde01bea6818bbab5290e9 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 3 Jan 2024 02:13:15 +0100 Subject: feat(web): color identifiers and nodes We use a palette-based coloring strategy, where each class and enum gets a color from --- subprojects/frontend/src/editor/EditorTheme.ts | 24 +++++++++++-- subprojects/frontend/src/graph/GraphTheme.tsx | 23 +++++++++++-- subprojects/frontend/src/graph/dotSource.ts | 5 ++- subprojects/frontend/src/theme/ThemeProvider.tsx | 40 ++++++++++++++++++++-- .../frontend/src/xtext/xtextServiceResults.ts | 9 ++--- 5 files changed, 89 insertions(+), 12 deletions(-) (limited to 'subprojects/frontend') diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index 9f560dfb..383e1b75 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -8,10 +8,29 @@ import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw'; import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw'; import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw'; -import { alpha, styled, type CSSObject } from '@mui/material/styles'; +import { + alpha, + styled, + type CSSObject, + type Theme, +} from '@mui/material/styles'; +import { range } from 'lodash-es'; import svgURL from '../utils/svgURL'; +function createTypeHashStyles(theme: Theme): CSSObject { + const result: CSSObject = {}; + range(theme.palette.highlight.typeHash.length).forEach((i) => { + result[`.tok-problem-typeHash-${i}`] = { + '&, .tok-typeName': { + color: theme.palette.highlight.typeHash[i]?.text, + fontWeight: theme.typography.fontWeightEditorTypeHash, + }, + }; + }); + return result; +} + export default styled('div', { name: 'EditorTheme', shouldForwardProp: (propName) => @@ -124,6 +143,7 @@ export default styled('div', { fontStyle: 'normal', }, }, + ...createTypeHashStyles(theme), }; const matchingStyle: CSSObject = { diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx index 14d58b96..60fd7925 100644 --- a/subprojects/frontend/src/graph/GraphTheme.tsx +++ b/subprojects/frontend/src/graph/GraphTheme.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The Refinery Authors + * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -7,7 +7,13 @@ import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw'; import labelSVG from '@material-icons/svg/svg/label/baseline.svg?raw'; import labelOutlinedSVG from '@material-icons/svg/svg/label/outline.svg?raw'; -import { alpha, styled, type CSSObject } from '@mui/material/styles'; +import { + alpha, + styled, + type CSSObject, + type Theme, +} from '@mui/material/styles'; +import { range } from 'lodash-es'; import svgURL from '../utils/svgURL'; @@ -31,6 +37,18 @@ function createEdgeColor( }; } +function createTypeHashStyles(theme: Theme): CSSObject { + const result: CSSObject = {}; + range(theme.palette.highlight.typeHash.length).forEach((i) => { + result[`.node-typeHash-${i}`] = { + '& [fill="green"]': { + fill: theme.palette.highlight.typeHash[i]?.box, + }, + }; + }); + return result; +} + export default styled('div', { name: 'GraphTheme', })(({ theme }) => ({ @@ -68,6 +86,7 @@ export default styled('div', { '.node-exists-UNKNOWN [stroke="black"]': { strokeDasharray: '5 2', }, + ...createTypeHashStyles(theme), '.edge': { '& text': { fontFamily: theme.typography.fontFamily, diff --git a/subprojects/frontend/src/graph/dotSource.ts b/subprojects/frontend/src/graph/dotSource.ts index bd358dfa..3ac5eb1c 100644 --- a/subprojects/frontend/src/graph/dotSource.ts +++ b/subprojects/frontend/src/graph/dotSource.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The Refinery Authors + * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -142,6 +142,9 @@ function createNodes( if (data.unaryPredicates.size === 0) { classList.push('node-empty'); } + if (node.typeHash !== undefined) { + classList.push(`node-typeHash-${node.typeHash}`); + } const classes = classList.join(' '); const name = nodeName(graph, node); const border = node.kind === 'INDIVIDUAL' ? 2 : 1; diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx index 18310147..a996cde8 100644 --- a/subprojects/frontend/src/theme/ThemeProvider.tsx +++ b/subprojects/frontend/src/theme/ThemeProvider.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -24,6 +24,11 @@ interface OuterPalette { border: string; } +interface TypeHashPalette { + text: string; + box: string; +} + interface HighlightPalette { number: string; parameter: string; @@ -41,17 +46,20 @@ interface HighlightPalette { selected: string; contrastText: string; }; + typeHash: TypeHashPalette[]; } declare module '@mui/material/styles' { interface TypographyVariants { fontWeightEditorNormal: number; + fontWeightEditorTypeHash: number; fontWeightEditorBold: number; editor: TypographyStyle; } interface TypographyVariantsOptions { fontWeightEditorNormal?: number; + fontWeightEditorTypeHash?: number; fontWeightEditorBold?: number; editor?: TypographyStyle; } @@ -78,6 +86,7 @@ function createResponsiveTheme( '"Open Sans Variable", "Open Sans", "Roboto", "Helvetica", "Arial", sans-serif', fontWeightMedium: 500, fontWeightEditorNormal: 400, + fontWeightEditorTypeHash: 500, fontWeightEditorBold: 700, button: { fontWeight: 600, @@ -220,7 +229,7 @@ const lightTheme = (() => { palette: { mode: 'light', primary: { main: '#038a99' }, - secondary: { main: '#e45649' }, + secondary: { main: '#61afef' }, error: { main: '#ca1243' }, warning: { main: '#c18401' }, success: { main: '#50a14f' }, @@ -256,6 +265,18 @@ const lightTheme = (() => { selected: '#d500f9', contrastText: '#fff', }, + typeHash: [ + { text: '#986801', box: '#e5c07b' }, + { text: '#d6493e', box: '#e06c75' }, + { text: '#50a14f', box: '#98c379' }, + { text: '#a626a4', box: '#c678dd' }, + { text: '#4078f2', box: '#80a7f4' }, + { text: '#827662', box: '#e3d1b2' }, + { text: '#904f53', box: '#e78b8f' }, + { text: '#637855', box: '#abcc94' }, + { text: '#805f89', box: '#dbb2e8' }, + { text: '#5987ae', box: '#92c0e9' }, + ], }, }, }); @@ -270,6 +291,7 @@ const darkTheme = (() => { { typography: { fontWeightEditorNormal: 350, + fontWeightEditorTypeHash: 350, fontWeightEditorBold: 650, }, palette: { @@ -277,7 +299,7 @@ const darkTheme = (() => { primary: { main: '#56b6c2' }, secondary: { main: '#be5046' }, error: { main: '#e06c75' }, - warning: { main: '#e5c07b' }, + warning: { main: '#d19a66' }, success: { main: '#98c379' }, info: { main: '#61afef' }, background: { @@ -311,6 +333,18 @@ const darkTheme = (() => { selected: '#dd33fa', contrastText: darkBackground, }, + typeHash: [ + { text: '#e5c07b', box: '#ae8003' }, + { text: '#e06c75', box: '#a23b47' }, + { text: '#98c379', box: '#428141' }, + { text: '#c678dd', box: '#854797' }, + { text: '#61afef', box: '#3982bb' }, + { text: '#e3d1b2', box: '#827662' }, + { text: '#e78b8f', box: '#904f53' }, + { text: '#abcc94', box: '#647e63' }, + { text: '#dbb2e8', box: '#805f89' }, + { text: '#92c0e9', box: '#4f7799' }, + ], }, }, }, diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts index e473bd48..792c7de3 100644 --- a/subprojects/frontend/src/xtext/xtextServiceResults.ts +++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -137,6 +137,7 @@ export type ModelGenerationStartedResult = z.infer< export const NodeMetadata = z.object({ name: z.string(), simpleName: z.string(), + typeHash: z.string().optional(), kind: z.enum(['IMPLICIT', 'INDIVIDUAL', 'NEW']), }); @@ -182,15 +183,15 @@ export type SemanticsResult = z.infer; export const ModelGenerationResult = z.union([ z.object({ - uuid: z.string().nonempty(), + uuid: z.string().min(1), status: z.string(), }), z.object({ - uuid: z.string().nonempty(), + uuid: z.string().min(1), error: z.string(), }), SemanticsSuccessResult.extend({ - uuid: z.string().nonempty(), + uuid: z.string().min(1), }), ]); -- cgit v1.2.3-54-g00ecf From d2ef593cbb097ed04f38a09680a656598dd7d8d3 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 3 Jan 2024 02:47:05 +0100 Subject: refactor(web): subtler error predicate highlight --- subprojects/frontend/src/editor/EditorTheme.ts | 5 ++++ .../ProblemSemanticHighlightingCalculator.java | 31 +++++++++++++--------- 2 files changed, 23 insertions(+), 13 deletions(-) (limited to 'subprojects/frontend') diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index 383e1b75..b536dc0c 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts @@ -132,6 +132,11 @@ export default styled('div', { textDecorationSkipInk: 'none', }, '.tok-problem-error': { + '&, & .tok-typeName': { + color: theme.palette.highlight.comment, + }, + }, + '.tok-invalid': { '&, & .tok-typeName': { color: theme.palette.error.main, }, diff --git a/subprojects/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java b/subprojects/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java index 4c775fc6..f64d4066 100644 --- a/subprojects/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java +++ b/subprojects/language-ide/src/main/java/tools/refinery/language/ide/syntaxcoloring/ProblemSemanticHighlightingCalculator.java @@ -43,7 +43,7 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli @Override protected boolean highlightElement(EObject object, IHighlightedPositionAcceptor acceptor, - CancelIndicator cancelIndicator) { + CancelIndicator cancelIndicator) { highlightName(object, acceptor); highlightCrossReferences(object, acceptor, cancelIndicator); return false; @@ -60,7 +60,7 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli } protected void highlightCrossReferences(EObject object, IHighlightedPositionAcceptor acceptor, - CancelIndicator cancelIndicator) { + CancelIndicator cancelIndicator) { for (EReference reference : object.eClass().getEAllReferences()) { if (reference.isContainment()) { continue; @@ -101,7 +101,7 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli boolean isError = ProblemUtil.isError(eObject); if (ProblemUtil.isBuiltIn(eObject)) { var className = isError ? ERROR_CLASS : BUILTIN_CLASS; - return new String[] { className }; + return new String[]{className}; } return getUserDefinedElementHighlightClass(eObject, reference, isError); } @@ -116,19 +116,12 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli && desugarer.isContainmentReference(referenceDeclaration)) { classesBuilder.add(CONTAINMENT_CLASS); } - if (isError) { + if (isError && reference != null) { + // References to error patterns should be highlighted as errors, but error pattern definitions shouldn't. classesBuilder.add(ERROR_CLASS); } if (eObject instanceof Node node) { - if (reference == ProblemPackage.Literals.VARIABLE_OR_NODE_EXPR__VARIABLE_OR_NODE) { - classesBuilder.add(NODE_CLASS); - } - if (ProblemUtil.isIndividualNode(node)) { - classesBuilder.add(INDIVIDUAL_NODE_CLASS); - } - if (ProblemUtil.isNewNode(node)) { - classesBuilder.add(NEW_NODE_CLASS); - } + highlightNode(node, reference, classesBuilder); } if (eObject instanceof Relation relation) { var typeHash = typeHashProvider.getTypeHash(relation); @@ -139,4 +132,16 @@ public class ProblemSemanticHighlightingCalculator extends DefaultSemanticHighli List classes = classesBuilder.build(); return classes.toArray(new String[0]); } + + private static void highlightNode(Node node, EReference reference, ImmutableList.Builder classesBuilder) { + if (reference == ProblemPackage.Literals.VARIABLE_OR_NODE_EXPR__VARIABLE_OR_NODE) { + classesBuilder.add(NODE_CLASS); + } + if (ProblemUtil.isIndividualNode(node)) { + classesBuilder.add(INDIVIDUAL_NODE_CLASS); + } + if (ProblemUtil.isNewNode(node)) { + classesBuilder.add(NEW_NODE_CLASS); + } + } } -- cgit v1.2.3-54-g00ecf From baa28c9d6b6562a54eee0ad726e22d1b8811751b Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Wed, 3 Jan 2024 18:38:22 +0100 Subject: feat(web): toggle identifier coloring --- subprojects/frontend/src/editor/EditorArea.tsx | 3 ++- subprojects/frontend/src/editor/EditorButtons.tsx | 16 +++++++++++++--- subprojects/frontend/src/editor/EditorStore.ts | 13 ++++++++++--- subprojects/frontend/src/editor/EditorTheme.ts | 13 ++++++++++--- subprojects/frontend/src/editor/GeneratedModelStore.ts | 15 +++++++++++---- subprojects/frontend/src/graph/DotGraphVisualizer.tsx | 4 ++-- subprojects/frontend/src/graph/GraphStore.ts | 12 +++++++++--- subprojects/frontend/src/graph/GraphTheme.tsx | 9 ++++++--- 8 files changed, 63 insertions(+), 22 deletions(-) (limited to 'subprojects/frontend') diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx index 905fa2ec..aafaad40 100644 --- a/subprojects/frontend/src/editor/EditorArea.tsx +++ b/subprojects/frontend/src/editor/EditorArea.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -38,6 +38,7 @@ export default observer(function EditorArea({ diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx index ca51f975..f4513909 100644 --- a/subprojects/frontend/src/editor/EditorButtons.tsx +++ b/subprojects/frontend/src/editor/EditorButtons.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -8,8 +8,9 @@ import type { Diagnostic } from '@codemirror/lint'; import CancelIcon from '@mui/icons-material/Cancel'; import CheckIcon from '@mui/icons-material/Check'; import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered'; -import FormatPaint from '@mui/icons-material/FormatPaint'; +import FormatPaintIcon from '@mui/icons-material/FormatPaint'; import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'; +import LooksIcon from '@mui/icons-material/Looks'; import RedoIcon from '@mui/icons-material/Redo'; import SearchIcon from '@mui/icons-material/Search'; import UndoIcon from '@mui/icons-material/Undo'; @@ -71,6 +72,15 @@ export default observer(function EditorButtons({ > + editorStore?.toggleColorIdentifiers()} + aria-label="Color identifiers" + value="color-identifiers" + > + + - + diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts index 87c4040e..5e7d05e1 100644 --- a/subprojects/frontend/src/editor/EditorStore.ts +++ b/subprojects/frontend/src/editor/EditorStore.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -62,6 +62,8 @@ export default class EditorStore { showLineNumbers = false; + colorIdentifiers = true; + disposed = false; analyzing = false; @@ -96,7 +98,7 @@ export default class EditorStore { })().catch((error) => { log.error('Failed to load XtextClient', error); }); - this.graph = new GraphStore(); + this.graph = new GraphStore(this); makeAutoObservable(this, { id: false, state: observable.ref, @@ -279,6 +281,11 @@ export default class EditorStore { log.debug('Show line numbers', this.showLineNumbers); } + toggleColorIdentifiers(): void { + this.colorIdentifiers = !this.colorIdentifiers; + log.debug('Color identifiers', this.colorIdentifiers); + } + get hasSelection(): boolean { return this.state.selection.ranges.some(({ from, to }) => from !== to); } @@ -324,7 +331,7 @@ export default class EditorStore { } addGeneratedModel(uuid: string, randomSeed: number): void { - this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed)); + this.generatedModels.set(uuid, new GeneratedModelStore(randomSeed, this)); this.selectGeneratedModel(uuid); } diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts index b536dc0c..1cad4a36 100644 --- a/subprojects/frontend/src/editor/EditorTheme.ts +++ b/subprojects/frontend/src/editor/EditorTheme.ts @@ -18,7 +18,13 @@ import { range } from 'lodash-es'; import svgURL from '../utils/svgURL'; -function createTypeHashStyles(theme: Theme): CSSObject { +function createTypeHashStyles( + theme: Theme, + colorIdentifiers: boolean, +): CSSObject { + if (!colorIdentifiers) { + return {}; + } const result: CSSObject = {}; range(theme.palette.highlight.typeHash.length).forEach((i) => { result[`.tok-problem-typeHash-${i}`] = { @@ -38,7 +44,8 @@ export default styled('div', { })<{ showLineNumbers: boolean; showActiveLine: boolean; -}>(({ theme, showLineNumbers, showActiveLine }) => { + colorIdentifiers: boolean; +}>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => { const editorFontStyle: CSSObject = { ...theme.typography.editor, fontWeight: theme.typography.fontWeightEditorNormal, @@ -148,7 +155,7 @@ export default styled('div', { fontStyle: 'normal', }, }, - ...createTypeHashStyles(theme), + ...createTypeHashStyles(theme, colorIdentifiers), }; const matchingStyle: CSSObject = { diff --git a/subprojects/frontend/src/editor/GeneratedModelStore.ts b/subprojects/frontend/src/editor/GeneratedModelStore.ts index 5088d603..f2695d9a 100644 --- a/subprojects/frontend/src/editor/GeneratedModelStore.ts +++ b/subprojects/frontend/src/editor/GeneratedModelStore.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors + * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -9,6 +9,8 @@ import { makeAutoObservable } from 'mobx'; import GraphStore from '../graph/GraphStore'; import type { SemanticsSuccessResult } from '../xtext/xtextServiceResults'; +import type EditorStore from './EditorStore'; + export default class GeneratedModelStore { title: string; @@ -18,10 +20,15 @@ export default class GeneratedModelStore { graph: GraphStore | undefined; - constructor(randomSeed: number) { + constructor( + randomSeed: number, + private readonly editorStore: EditorStore, + ) { const time = new Date().toLocaleTimeString(undefined, { hour12: false }); this.title = `Generated at ${time} (${randomSeed})`; - makeAutoObservable(this); + makeAutoObservable(this, { + editorStore: false, + }); } get running(): boolean { @@ -43,7 +50,7 @@ export default class GeneratedModelStore { setSemantics(semantics: SemanticsSuccessResult): void { if (this.running) { - this.graph = new GraphStore(); + this.graph = new GraphStore(this.editorStore); this.graph.setSemantics(semantics); } } diff --git a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx index eec72a7d..72ac58fa 100644 --- a/subprojects/frontend/src/graph/DotGraphVisualizer.tsx +++ b/subprojects/frontend/src/graph/DotGraphVisualizer.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2023 The Refinery Authors + * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ @@ -150,7 +150,7 @@ function DotGraphVisualizer({ ], ); - return ; + return ; } DotGraphVisualizer.defaultProps = { diff --git a/subprojects/frontend/src/graph/GraphStore.ts b/subprojects/frontend/src/graph/GraphStore.ts index ecb016b5..58c4422d 100644 --- a/subprojects/frontend/src/graph/GraphStore.ts +++ b/subprojects/frontend/src/graph/GraphStore.ts @@ -1,11 +1,12 @@ /* - * SPDX-FileCopyrightText: 2023 The Refinery Authors + * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors * * SPDX-License-Identifier: EPL-2.0 */ import { makeAutoObservable, observable } from 'mobx'; +import type EditorStore from '../editor/EditorStore'; import type { RelationMetadata, SemanticsSuccessResult, @@ -65,8 +66,9 @@ export default class GraphStore { selectedSymbol: RelationMetadata | undefined; - constructor() { - makeAutoObservable(this, { + constructor(private readonly editorStore: EditorStore) { + makeAutoObservable(this, { + editorStore: false, semantics: observable.ref, }); } @@ -184,4 +186,8 @@ export default class GraphStore { }); this.setSelectedSymbol(this.selectedSymbol); } + + get colorNodes(): boolean { + return this.editorStore.colorIdentifiers; + } } diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx index 60fd7925..7334f559 100644 --- a/subprojects/frontend/src/graph/GraphTheme.tsx +++ b/subprojects/frontend/src/graph/GraphTheme.tsx @@ -37,7 +37,10 @@ function createEdgeColor( }; } -function createTypeHashStyles(theme: Theme): CSSObject { +function createTypeHashStyles(theme: Theme, colorNodes: boolean): CSSObject { + if (!colorNodes) { + return {}; + } const result: CSSObject = {}; range(theme.palette.highlight.typeHash.length).forEach((i) => { result[`.node-typeHash-${i}`] = { @@ -51,7 +54,7 @@ function createTypeHashStyles(theme: Theme): CSSObject { export default styled('div', { name: 'GraphTheme', -})(({ theme }) => ({ +})<{ colorNodes: boolean }>(({ theme, colorNodes }) => ({ '& svg': { userSelect: 'none', '.node': { @@ -86,7 +89,7 @@ export default styled('div', { '.node-exists-UNKNOWN [stroke="black"]': { strokeDasharray: '5 2', }, - ...createTypeHashStyles(theme), + ...createTypeHashStyles(theme, colorNodes), '.edge': { '& text': { fontFamily: theme.typography.fontFamily, -- cgit v1.2.3-54-g00ecf