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(-) 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