From 6626945d054d49f856a0bcc6843f150a39f24c78 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 25 Jul 2023 16:16:55 +0100 Subject: [PATCH 1/4] modify themes array in themes module to carry extra values for sol2uml --- apps/remix-ide/src/app/tabs/theme-module.js | 41 ++++++++++++++------- 1 file changed, 27 insertions(+), 14 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index e1e066c4b5..6d3e248a93 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -5,20 +5,33 @@ import * as packageJson from '../../../../../package.json' import Registry from '../state/registry' const _paq = window._paq = window._paq || [] +//sol2uml dot files cannot work with css variables so hex values for colors are used const themes = [ - { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css' }, - { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css' }, - { name: 'Violet', quality: 'light', url: 'assets/css/themes/remix-violet.css' }, - { name: 'Unicorn', quality: 'light', url: 'assets/css/themes/remix-unicorn.css' }, - { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css' }, - { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css' }, - { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css' }, - { name: 'HackerOwl', quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css' }, + { name: 'Dark', quality: 'dark', url: 'assets/css/themes/remix-dark_tvx1s2.css', backgroundColor: '#222336', textColor: '#babbcc', + shapeColor: '#babbcc',fillColor: '#2a2c3f' }, + { name: 'Light', quality: 'light', url: 'assets/css/themes/remix-light_powaqg.css', backgroundColor: '#eef1f6', textColor: '#3b445e', + shapeColor: '#343a40',fillColor: '#ffffff' }, + { name: 'Violet', quality: 'light', url: 'assets/css/themes/remix-violet.css', backgroundColor: '#f1eef6', textColor: '#3b445e', + shapeColor: '#343a40',fillColor: '#f8fafe' }, + { name: 'Unicorn', quality: 'light', url: 'assets/css/themes/remix-unicorn.css', backgroundColor: '#f1eef6', textColor: '#343a40', + shapeColor: '#343a40',fillColor: '#f8fafe' }, + { name: 'Midcentury', quality: 'light', url: 'assets/css/themes/remix-midcentury_hrzph3.css', backgroundColor: '#DBE2E0', textColor: '#11556c', + shapeColor: '#343a40',fillColor: '#eeede9' }, + { name: 'Black', quality: 'dark', url: 'assets/css/themes/remix-black_undtds.css', backgroundColor: '#1a1a1a', textColor: '#babbcc', + shapeColor: '#b5b4bc',fillColor: '#1f2020' }, + { name: 'Candy', quality: 'light', url: 'assets/css/themes/remix-candy_ikhg4m.css', backgroundColor: '#d5efff', textColor: '#11556c', + shapeColor: '#343a40',fillColor: '#fbe7f8' }, + { name: 'HackerOwl', quality: 'dark', url: 'assets/css/themes/remix-hacker_owl.css', backgroundColor: '#011628', textColor: '#babbcc', + shapeColor: '#8694a1',fillColor: '#011C32' }, - { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css' }, - { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css' }, - { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css' }, - { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css' } + { name: 'Cerulean', quality: 'light', url: 'assets/css/themes/bootstrap-cerulean.min.css', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#343a40',fillColor: '#f8f9fa' }, + { name: 'Flatly', quality: 'light', url: 'assets/css/themes/bootstrap-flatly.min.css', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#7b8a8b',fillColor: '#ffffff' }, + { name: 'Spacelab', quality: 'light', url: 'assets/css/themes/bootstrap-spacelab.min.css', backgroundColor: '#ffffff', textColor: '#343a40', + shapeColor: '#333333', fillColor: '#eeeeee' }, + { name: 'Cyborg', quality: 'dark', url: 'assets/css/themes/bootstrap-cyborg.min.css', backgroundColor: '#060606', textColor: '#adafae', + shapeColor: '#adafae', fillColor: '#222222' } ] const profile = { @@ -55,7 +68,7 @@ export class ThemeModule extends Plugin { this.forced = !!queryTheme } - /** Return the active theme + /** Return the active theme * @return {{ name: string, quality: string, url: string }} - The active theme */ currentTheme () { @@ -93,7 +106,7 @@ export class ThemeModule extends Plugin { * @param {string} [themeName] - The name of the theme */ switchTheme (themeName) { - themeName = themeName && themeName.toLocaleLowerCase() + themeName = themeName && themeName.toLocaleLowerCase() if (themeName && !Object.keys(this.themes).includes(themeName)) { throw new Error(`Theme ${themeName} doesn't exist`) } From 6f83294eb82d722e4446d0248f56fc5ef82f45ce Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 25 Jul 2023 17:14:31 +0100 Subject: [PATCH 2/4] get active theme from themeModule and set uml style from active theme --- apps/remix-ide/src/app/plugins/solidity-umlgen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 66e4ecbc87..75857ced56 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx @@ -106,7 +106,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { const ast = result.length > 1 ? parser.parse(result) : parser.parse(source.sources[file].content) this.umlClasses = convertAST2UmlClasses(ast, this.currentFile) let umlDot = '' - this.activeTheme = themeCollection.find(theme => theme.themeName === currentTheme.name) + this.activeTheme = await this.call('theme', 'currentTheme') 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 From be1bc6e1ff8502414032dcff56e90813341cc180 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 25 Jul 2023 17:37:09 +0100 Subject: [PATCH 3/4] remove dependence on previous theme switching implementation --- .../src/app/plugins/solidity-umlgen.tsx | 86 +++++++------------ apps/remix-ide/src/app/tabs/theme-module.js | 4 +- .../solidity-uml-gen/src/types/index.ts | 5 +- 3 files changed, 38 insertions(+), 57 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 75857ced56..7cc304f754 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx @@ -24,32 +24,32 @@ const profile = { events: [], } -const themeCollection = [ - { 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' }, - { themeName: 'Violet', backgroundColor: '#f1eef6', textColor: '#3b445e', - shapeColor: '#343a40',fillColor: '#f8fafe' }, - { themeName: 'Unicorn', backgroundColor: '#f1eef6', textColor: '#343a40', - shapeColor: '#343a40',fillColor: '#f8fafe' }, -] +// const themeCollection = [ +// { 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' }, +// { themeName: 'Violet', backgroundColor: '#f1eef6', textColor: '#3b445e', +// shapeColor: '#343a40',fillColor: '#f8fafe' }, +// { themeName: 'Unicorn', backgroundColor: '#f1eef6', textColor: '#343a40', +// shapeColor: '#343a40',fillColor: '#f8fafe' }, +// ] /** * add context menu which will offer download as pdf and download png. @@ -81,8 +81,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { this.currentlySelectedTheme = '' this.themeName = '' - this.themeCollection = themeCollection - this.activeTheme = themeCollection.find(t => t.themeName === 'Dark') + + this.activeTheme = {} as ThemeSummary this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'sol-uml-gen') @@ -127,35 +127,15 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { private handleThemeChange() { this.on('theme', 'themeChanged', async (theme) => { this.currentlySelectedTheme = theme.quality - const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme') - themeCollection.forEach((theme) => { - if (theme.themeName === themeQuality.name) { - 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.activeTheme = theme + this.themeDark = theme.backgroundColor + 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() await this.call('tabs', 'focus', 'solidityumlgen') }) } - async mangleSvgPayload(svgPayload: string) : Promise { - const parser = new DOMParser() - const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme') - const parsedDocument = parser.parseFromString(svgPayload, 'image/svg+xml') - const element = parsedDocument.getElementsByTagName('svg') - themeCollection.forEach((theme) => { - if (theme.themeName === themeQuality.name) { - parsedDocument.documentElement.setAttribute('style', `background-color: var(${this.getThemeCssVariables('--body-bg')})`) - element[0].setAttribute('fill', theme.backgroundColor) - } - }) - const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument) - return stringifiedSvg - } - onDeactivation(): void { this.off('solidity', 'compilationFinished') } diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index 6d3e248a93..4ff7c2b0d1 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -72,7 +72,9 @@ export class ThemeModule extends Plugin { * @return {{ name: string, quality: string, url: string }} - The active theme */ currentTheme () { - return this.themes[this.active] + const current = this.themes[this.active] + console.log({ current }) + return current } /** Returns all themes as an array */ 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 210b9c6066..4359302642 100644 --- a/libs/remix-ui/solidity-uml-gen/src/types/index.ts +++ b/libs/remix-ui/solidity-uml-gen/src/types/index.ts @@ -16,7 +16,6 @@ export interface ISolidityUmlGen extends ViewPlugin { showUmlDiagram(path: string, svgPayload: string): void updateComponent(state: any): JSX.Element setDispatch(dispatch: React.Dispatch): void - mangleSvgPayload(svgPayload: string) : Promise generateCustomAction(action: customAction): Promise flattenContract (source: any, filePath: string, data: any): Promise hideSpinner(): void @@ -27,5 +26,5 @@ export interface ISolidityUmlGen extends ViewPlugin { export type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string } -export type ThemeSummary = { themeName: string, backgroundColor: string, textColor?: string, -shapeColor?: string, fillColor?: string } \ No newline at end of file +export type ThemeSummary = { name: string, quality: 'light' | 'dark', url: string, backgroundColor: string, textColor?: string, +shapeColor?: string, fillColor?: string } From 6078188c9f7d6a8c0915d94eec7bc76dffedcf6f Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Tue, 25 Jul 2023 17:38:30 +0100 Subject: [PATCH 4/4] clean up --- .../src/app/plugins/solidity-umlgen.tsx | 27 ------------------- apps/remix-ide/src/app/tabs/theme-module.js | 4 +-- 2 files changed, 1 insertion(+), 30 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 7cc304f754..11ab06ddeb 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx @@ -24,33 +24,6 @@ const profile = { events: [], } -// const themeCollection = [ -// { 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' }, -// { themeName: 'Violet', backgroundColor: '#f1eef6', textColor: '#3b445e', -// shapeColor: '#343a40',fillColor: '#f8fafe' }, -// { themeName: 'Unicorn', backgroundColor: '#f1eef6', textColor: '#343a40', -// shapeColor: '#343a40',fillColor: '#f8fafe' }, -// ] - /** * add context menu which will offer download as pdf and download png. * add menu under the first download button to download diff --git a/apps/remix-ide/src/app/tabs/theme-module.js b/apps/remix-ide/src/app/tabs/theme-module.js index 4ff7c2b0d1..6d3e248a93 100644 --- a/apps/remix-ide/src/app/tabs/theme-module.js +++ b/apps/remix-ide/src/app/tabs/theme-module.js @@ -72,9 +72,7 @@ export class ThemeModule extends Plugin { * @return {{ name: string, quality: string, url: string }} - The active theme */ currentTheme () { - const current = this.themes[this.active] - console.log({ current }) - return current + return this.themes[this.active] } /** Returns all themes as an array */