From 06edfd870403dd7a6a20fb14b5fcccb66a1adb90 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Thu, 13 Apr 2023 12:10:39 +0100 Subject: [PATCH] style generated uml and respond to theme change --- .../src/app/plugins/solidity-umlgen.tsx | 67 +++++++++++++------ .../solidity-uml-gen/src/types/index.ts | 7 +- 2 files changed, 52 insertions(+), 22 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index b3aa81065d..24c886763b 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx @@ -6,7 +6,6 @@ import { RemixUiSolidityUmlGen } from '@remix-ui/solidity-uml-gen' import { ISolidityUmlGen, ThemeQualityType, ThemeSummary } from 'libs/remix-ui/solidity-uml-gen/src/types' import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types' import { normalizeContractPath } from 'libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities' -// import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot' import { convertAST2UmlClasses } from 'sol2uml/lib/converterAST2Classes' import vizRenderStringSync from '@aduh95/viz.js/sync' import { PluginViewWrapper } from '@remix-ui/helper' @@ -26,16 +25,26 @@ const profile = { } const themeCollection = [ - { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628', textColor: '#babbcc'}, - { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff', textColor: '#343a40'}, - { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606', textColor: '#adafae'}, - { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336', textColor: '#babbcc'}, - { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff', textColor: '#7b8a8b'}, - { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a', textColor: '#babbcc'}, - { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6', textColor: '#3b445e'}, - { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0', textColor: '#11556c'}, - { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff', textColor: '#343a40'}, - { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff', textColor: '#11556c', }, + { themeName: 'HackerOwl', backgroundColor: '#011628', textColor: '#babbcc', + shapeColor: '#8694a1',fillColor: '#011C32'}, + { themeName: 'Cerulean', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#343a40',fillColor: '#f8f9fa'}, + { themeName: 'Cyborg', backgroundColor: '#060606', textColor: '#adafae', + shapeColor: '#adafae', fillColor: '#222222'}, + { themeName: 'Dark', backgroundColor: '#222336', textColor: '#babbcc', + shapeColor: '#babbcc',fillColor: '#2a2c3f'}, + { themeName: 'Flatly', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#7b8a8b',fillColor: '#ffffff'}, + { themeName: 'Black', backgroundColor: '#1a1a1a', textColor: '#babbcc', + shapeColor: '#b5b4bc',fillColor: '#1f2020'}, + { themeName: 'Light', backgroundColor: '#eef1f6', textColor: '#3b445e', + shapeColor: '#343a40',fillColor: '#ffffff'}, + { themeName: 'Midcentury', backgroundColor: '#DBE2E0', textColor: '#11556c', + shapeColor: '#343a40',fillColor: '#eeede9'}, + { themeName: 'Spacelab', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#333333', fillColor: '#eeeeee'}, + { themeName: 'Candy', backgroundColor: '#d5efff', textColor: '#11556c', + shapeColor: '#343a40',fillColor: '#fbe7f8' }, ] /** @@ -53,7 +62,9 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { themeDark: string loading: boolean themeCollection: ThemeSummary[] + activeTheme: ThemeSummary triggerGenerateUml: boolean + umlClasses: UmlClass[] = [] appManager: RemixAppManager dispatch: React.Dispatch = () => {} @@ -65,13 +76,16 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { this.loading = false this.currentlySelectedTheme = '' this.themeName = '' + this.themeCollection = themeCollection + this.activeTheme = themeCollection.find(t => t.themeName === 'Dark') this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'sol-uml-gen') } onActivation(): void { + this.handleThemeChange() this.on('solidity', 'compilationFinished', async (file: string, source, languageVersion, data, input, version) => { if(!this.triggerGenerateUml) return this.triggerGenerateUml = false @@ -86,10 +100,10 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { result = await this.flattenContract(source, file, data) } const ast = result.length > 1 ? parser.parse(result) : parser.parse(source.sources[file].content) - const umlClasses = convertAST2UmlClasses(ast, this.currentFile) + this.umlClasses = convertAST2UmlClasses(ast, this.currentFile) let umlDot = '' - const matchTheme = themeCollection.filter(theme => theme.themeName === currentTheme.name) - umlDot = convertUmlClasses2Dot(umlClasses, false, { backColor: matchTheme[0].backgroundColor, textColor: matchTheme[0].textColor, shapeColor: '#caf4e9', fillColor: '#fbe7f8' }) + this.activeTheme = themeCollection.find(theme => theme.themeName === currentTheme.name) + umlDot = convertUmlClasses2Dot(this.umlClasses, false, { backColor: this.activeTheme.backgroundColor, textColor: this.activeTheme.textColor, shapeColor: this.activeTheme.shapeColor, fillColor: this.activeTheme.fillColor }) const payload = vizRenderStringSync(umlDot) this.updatedSvg = payload _paq.push(['trackEvent', 'solidityumlgen', 'umlgenerated']) @@ -99,15 +113,27 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { console.log('error', error) } }) + } + + getThemeCssVariables(cssVars: string) { + return window.getComputedStyle(document.documentElement) + .getPropertyValue(cssVars) + } + + private handleThemeChange() { this.on('theme', 'themeChanged', async (theme) => { this.currentlySelectedTheme = theme.quality - const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme') + const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme') themeCollection.forEach((theme) => { if (theme.themeName === themeQuality.name) { - this.themeDark = theme.actualHex + this.themeDark = theme.backgroundColor + this.activeTheme = theme + const umlDot = convertUmlClasses2Dot(this.umlClasses, false, { backColor: this.activeTheme.backgroundColor, textColor: this.activeTheme.textColor, shapeColor: this.activeTheme.shapeColor, fillColor: this.activeTheme.fillColor }) + this.updatedSvg = vizRenderStringSync(umlDot) + this.renderComponent() } }) - this.renderComponent() + await this.call('tabs', 'focus', 'solidityumlgen') }) } @@ -118,8 +144,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { const element = parsedDocument.getElementsByTagName('svg') themeCollection.forEach((theme) => { if (theme.themeName === themeQuality.name) { - parsedDocument.documentElement.setAttribute('style', `background-color: var(${themeQuality.name === theme.themeName ? theme.backgroundColor : '--body-bg'})`) - element[0].setAttribute('fill', theme.actualHex) + parsedDocument.documentElement.setAttribute('style', `background-color: var(${this.getThemeCssVariables('--body-bg')})`) + element[0].setAttribute('fill', theme.backgroundColor) } }) const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument) @@ -187,7 +213,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { themeName: this.themeName, themeDark: this.themeDark, fileName: this.currentFile, - themeCollection: this.themeCollection + themeCollection: this.themeCollection, + activeTheme: this.activeTheme, }) } diff --git a/libs/remix-ui/solidity-uml-gen/src/types/index.ts b/libs/remix-ui/solidity-uml-gen/src/types/index.ts index 7f0dd41736..210b9c6066 100644 --- a/libs/remix-ui/solidity-uml-gen/src/types/index.ts +++ b/libs/remix-ui/solidity-uml-gen/src/types/index.ts @@ -9,8 +9,10 @@ export interface ISolidityUmlGen extends ViewPlugin { updatedSvg: string currentlySelectedTheme: string themeName: string + themeDark: string loading: boolean themeCollection: ThemeSummary[] + activeTheme: ThemeSummary showUmlDiagram(path: string, svgPayload: string): void updateComponent(state: any): JSX.Element setDispatch(dispatch: React.Dispatch): void @@ -19,10 +21,11 @@ export interface ISolidityUmlGen extends ViewPlugin { flattenContract (source: any, filePath: string, data: any): Promise hideSpinner(): void renderComponent (): void - + triggerGenerateUml: boolean render(): JSX.Element } export type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string } -export type ThemeSummary = { themeName: string, backgroundColor: string, actualHex: string } \ No newline at end of file +export type ThemeSummary = { themeName: string, backgroundColor: string, textColor?: string, +shapeColor?: string, fillColor?: string } \ No newline at end of file