From 92cc5bdc961f8f230d3092121f260a8de0987f9e Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Thu, 9 Feb 2023 02:17:46 +0100 Subject: [PATCH] tackling svg background issue --- .../src/app/plugins/solidity-umlgen.tsx | 44 +++++++++++++---- .../src/lib/solidity-uml-gen.tsx | 47 ++++++++++--------- 2 files changed, 60 insertions(+), 31 deletions(-) diff --git a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx index 3131f07020..bea0441e0b 100644 --- a/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx +++ b/apps/remix-ide/src/app/plugins/solidity-umlgen.tsx @@ -22,12 +22,28 @@ const profile = { events: [], } +const themeCollection = [ + { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628'}, + { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606'}, + { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336'}, + { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a'}, + { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6'}, + { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0'}, + { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'}, +] + +type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string } + export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { element: HTMLDivElement currentFile: string svgPayload: string updatedSvg: string currentlySelectedTheme: string + themeName: string loading: boolean appManager: RemixAppManager @@ -39,6 +55,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { this.updatedSvg = '' this.loading = false this.currentlySelectedTheme = '' + this.themeName = '' this.appManager = appManager this.element = document.createElement('div') this.element.setAttribute('id', 'sol-uml-gen') @@ -47,6 +64,9 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { onActivation(): void { if (this.currentFile.length < 1) this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => { + const currentTheme: ThemeQualityType = await this.call('theme', 'currentTheme') + this.currentlySelectedTheme = currentTheme.quality + this.themeName = currentTheme.name let result = '' try { if (data.sources && Object.keys(data.sources).length > 1) { // we should flatten first as there are multiple asts @@ -56,9 +76,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { const umlClasses = convertAST2UmlClasses(ast, this.currentFile) const umlDot = convertUmlClasses2Dot(umlClasses) const payload = vizRenderStringSync(umlDot) - const currentTheme = await this.call('theme', 'currentTheme') - this.currentlySelectedTheme = currentTheme.quality - this.updatedSvg = payload + const mangled = await this.mangleSvgPayload(payload) + this.updatedSvg = mangled this.renderComponent() } catch (error) { console.log({ error }) @@ -72,13 +91,18 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { async mangleSvgPayload(svgPayload: string) : Promise { const parser = new DOMParser() - const themeQuality = await this.call('theme', 'currentTheme') + const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme') const parsedDocument = parser.parseFromString(svgPayload, 'image/svg+xml') - const res = parsedDocument.documentElement - parsedDocument.bgColor = '#cccabc' - res.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)' + const element = parsedDocument.getElementsByTagName('svg') + console.log({ element }) + themeCollection.forEach((theme) => { + if (theme.themeName === themeQuality.name) { + parsedDocument.documentElement.setAttribute('style', `background-color: var(${themeQuality.name === theme.themeName ? theme.backgroundColor : '--body-bg'})`) + console.log('found theme') + element[0].setAttribute('fill', theme.actualHex) + } + }) const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument) - console.log({ parsedDocument, themeQuality, stringifiedSvg }) return stringifiedSvg } @@ -143,7 +167,8 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { ...this, updatedSvg: this.updatedSvg, loading: this.loading, - themeSelected: this.currentlySelectedTheme + themeSelected: this.currentlySelectedTheme, + themeName: this.themeName }) } @@ -153,6 +178,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen { updatedSvg={state.updatedSvg} loading={state.loading} themeSelected={state.currentlySelectedTheme} + themeName={state.themeName} /> } } diff --git a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx index 6678fe1f62..a62a64fc8b 100644 --- a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx +++ b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx @@ -8,8 +8,22 @@ export interface RemixUiSolidityUmlGenProps { updatedSvg?: string loading?: boolean themeSelected?: string + themeName: string } +const themeCollection = [ + { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628'}, + { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606'}, + { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336'}, + { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a'}, + { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6'}, + { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0'}, + { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff'}, + { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'}, +] + type ButtonAction = { svgValid: () => boolean action: () => void @@ -44,14 +58,10 @@ const ActionButtons = ({ buttons }: ActionButtonsProps) => ( ) -export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelected }: RemixUiSolidityUmlGenProps) { +export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelected, themeName }: RemixUiSolidityUmlGenProps) { const [showViewer, setShowViewer] = useState(false) const [svgPayload, setSVGPayload] = useState('') const [validSvg, setValidSvg] = useState(false) - const svgRef = useRef(null) - const buttonsRef = useRef(null) - - useEffect(() => { setValidSvg (updatedSvg.startsWith(' { - svgRef?.current?.addEventListener('mouseover', () => console.log('move over the image'))//buttonsRef?.current?.classList.remove('d-none')) - svgRef?.current?.addEventListener('mouseout', () => console.log('mouse out of the image')) //buttonsRef?.current?.classList.add('d-none')) - const svgimg = document.querySelector('#umlImage') as HTMLImageElement - svgimg?.addEventListener('mouseover', () => console.log('mouse over the image')) - svgimg?.addEventListener('mouseout', () => console.log('mouse out of the image')) - return () => { - svgRef?.current?.removeEventListener('mouseover', () => buttonsRef?.current?.classList.remove('d-none')) - svgRef?.current?.removeEventListener('mouseout', () => buttonsRef?.current?.classList.add('d-none')) - } - },[]) - const buttons: ButtonAction[] = [ { buttonText: 'Download as PDF', @@ -86,6 +84,12 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec } ] + const encoder = new TextEncoder() + const data = encoder.encode(updatedSvg) + const final = btoa(String.fromCharCode.apply(null, data)) + const selected = themeCollection.find(theme => theme.themeName === themeName) + console.log({selected}) + const DefaultInfo = () => (

To view your contract as a Uml Diragram

@@ -94,7 +98,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
) const Display = () => { - const invert = themeSelected === 'dark' ? 'invert(0.8)' : 'invert(0)' + const invert = themeSelected === 'dark' ? 'invert(0.9)' : 'invert(0)' return (
{ validSvg && showViewer ? ( @@ -104,7 +108,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec { ({ zoomIn, zoomOut, resetTransform }) => ( -