mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

tackling svg background issue

Browse Source
pull/3363/head
Joseph Izang 2 years ago committed by Aniket
parent 81c56125f0
commit 92cc5bdc96
2 changed files with 60 additions and 31 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 44
      apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
  2. 47
      libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

44
apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
Unescape View File

@ -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<string> {
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}
/>
}
}

47
libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
Unescape View File

@ -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<string>('')
const [validSvg, setValidSvg] = useState(false)
const svgRef = useRef<HTMLImageElement>(null)
const buttonsRef = useRef<HTMLDivElement>(null)
useEffect(() => {
setValidSvg (updatedSvg.startsWith('<?xml') && updatedSvg.includes('<svg'))
@ -59,18 +69,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
}
, [updatedSvg])
useEffect(() => {
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 = () => (
<div className="d-flex flex-column justify-content-center align-items-center mt-5">
<h2 className="h2 align-self-start"><p>To view your contract as a Uml Diragram</p></h2>
@ -94,7 +98,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
</div>
)
const Display = () => {
const invert = themeSelected === 'dark' ? 'invert(0.8)' : 'invert(0)'
const invert = themeSelected === 'dark' ? 'invert(0.9)' : 'invert(0)'
return (
<div id="umlImageHolder" className="w-100 px-2 py-2 d-flex">
{ validSvg && showViewer ? (
@ -104,7 +108,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
{
({ zoomIn, zoomOut, resetTransform }) => (
<Fragment>
<div ref={buttonsRef} className="position-absolute bg-transparent rounded p-2" id="buttons"
<div className="position-absolute bg-transparent rounded p-2" id="buttons"
style={{ zIndex: 3, top: '10', right: '2em' }}
>
<button className="btn btn-outline-success btn-sm rounded-circle mr-1" onClick={() => zoomIn()}>
@ -120,11 +124,10 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
<TransformComponent contentStyle={{ zIndex: 2 }}>
<img
id="umlImage"
src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
src={`data:image/svg+xml;base64,${final}`}
width={'100%'}
height={'auto'}
ref={svgRef}
style={{ filter: invert }}
style={{ backgroundColor: selected?.actualHex }}
className="position-relative"
/>
</TransformComponent>

Write Preview
Loading…
Cancel
Save