diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 66e4ecbc87..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 @@ -81,8 +54,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') @@ -106,7 +79,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 @@ -127,35 +100,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 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`) } 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 }