@ -3,7 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
import React from 'react'
import React from 'react'
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
import { RemixUiSolidityUmlGen } from '@remix-ui/solidity-uml-gen'
import { RemixUiSolidityUmlGen } from '@remix-ui/solidity-uml-gen'
import { ISolidityUmlGen } from 'libs/remix-ui/solidity-uml-gen/src/types'
import { ISolidityUmlGen , ThemeQualityType , ThemeSummary } from 'libs/remix-ui/solidity-uml-gen/src/types'
import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
import { RemixAppManager } from 'libs/remix-ui/plugin-manager/src/types'
import { concatSourceFiles , getDependencyGraph } from 'libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities'
import { concatSourceFiles , getDependencyGraph } from 'libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities'
import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot'
import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot'
@ -22,13 +22,33 @@ const profile = {
events : [ ] ,
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' } ,
]
/ * *
* add context menu which will offer download as pdf and download png .
* add menu under the first download button to download
* /
export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
element : HTMLDivElement
element : HTMLDivElement
currentFile : string
currentFile : string
svgPayload : string
svgPayload : string
updatedSvg : string
updatedSvg : string
currentlySelectedTheme : string
currentlySelectedTheme : string
themeName : string
loading : boolean
loading : boolean
themeCollection : ThemeSummary [ ]
appManager : RemixAppManager
appManager : RemixAppManager
dispatch : React.Dispatch < any > = ( ) = > { }
dispatch : React.Dispatch < any > = ( ) = > { }
@ -39,14 +59,18 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
this . updatedSvg = ''
this . updatedSvg = ''
this . loading = false
this . loading = false
this . currentlySelectedTheme = ''
this . currentlySelectedTheme = ''
this . themeName = ''
this . themeCollection = themeCollection
this . appManager = appManager
this . appManager = appManager
this . element = document . createElement ( 'div' )
this . element = document . createElement ( 'div' )
this . element . setAttribute ( 'id' , 'sol-uml-gen' )
this . element . setAttribute ( 'id' , 'sol-uml-gen' )
}
}
onActivation ( ) : void {
onActivation ( ) : void {
if ( this . currentFile . length < 1 )
this . on ( 'solidity' , 'compilationFinished' , async ( file , source , languageVersion , data , input , version ) = > {
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 = ''
let result = ''
try {
try {
if ( data . sources && Object . keys ( data . sources ) . length > 1 ) { // we should flatten first as there are multiple asts
if ( data . sources && Object . keys ( data . sources ) . length > 1 ) { // we should flatten first as there are multiple asts
@ -56,12 +80,11 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
const umlClasses = convertAST2UmlClasses ( ast , this . currentFile )
const umlClasses = convertAST2UmlClasses ( ast , this . currentFile )
const umlDot = convertUmlClasses2Dot ( umlClasses )
const umlDot = convertUmlClasses2Dot ( umlClasses )
const payload = vizRenderStringSync ( umlDot )
const payload = vizRenderStringSync ( umlDot )
const currentTheme = await this . call ( 'theme' , 'currentTheme' )
this . currentlySelectedTheme = currentTheme . quality
this . updatedSvg = payload
this . updatedSvg = payload
this . renderComponent ( )
this . renderComponent ( )
await this . call ( 'tabs' , 'focus' , 'solidityumlgen' )
} catch ( error ) {
} catch ( error ) {
console . log ( { error } )
console . log ( 'error' , error )
}
}
} )
} )
this . on ( 'theme' , 'themeChanged' , ( theme ) = > {
this . on ( 'theme' , 'themeChanged' , ( theme ) = > {
@ -72,13 +95,16 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
async mangleSvgPayload ( svgPayload : string ) : Promise < string > {
async mangleSvgPayload ( svgPayload : string ) : Promise < string > {
const parser = new DOMParser ( )
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 parsedDocument = parser . parseFromString ( svgPayload , 'image/svg+xml' )
const res = parsedDocument . documentElement
const element = parsedDocument . getElementsByTagName ( 'svg' )
parsedDocument . bgColor = '#cccabc'
themeCollection . forEach ( ( theme ) = > {
res . style . filter = themeQuality . quality === 'dark' ? 'invert(1)' : 'invert(0)'
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 )
}
} )
const stringifiedSvg = new XMLSerializer ( ) . serializeToString ( parsedDocument )
const stringifiedSvg = new XMLSerializer ( ) . serializeToString ( parsedDocument )
console . log ( { parsedDocument , themeQuality , stringifiedSvg } )
return stringifiedSvg
return stringifiedSvg
}
}
@ -87,6 +113,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
}
}
generateCustomAction = async ( action : customAction ) = > {
generateCustomAction = async ( action : customAction ) = > {
this . updatedSvg = this . updatedSvg . startsWith ( '<?xml' ) ? '' : this . updatedSvg
this . currentFile = action . path [ 0 ]
this . currentFile = action . path [ 0 ]
await this . generateUml ( action . path [ 0 ] )
await this . generateUml ( action . path [ 0 ] )
}
}
@ -105,14 +132,11 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
* @returns { Promise < string > }
* @returns { Promise < string > }
* /
* /
async flattenContract ( source : any , filePath : string , data : any ) {
async flattenContract ( source : any , filePath : string , data : any ) {
const hold = { data , source , filePath }
const dependencyGraph = getDependencyGraph ( data . sources , filePath )
const ast = data . sources
const dependencyGraph = getDependencyGraph ( ast , filePath )
const sorted = dependencyGraph . isEmpty ( )
const sorted = dependencyGraph . isEmpty ( )
? [ filePath ]
? [ filePath ]
: dependencyGraph . sort ( ) . reverse ( )
: dependencyGraph . sort ( ) . reverse ( )
const sources = source . sources
const result = concatSourceFiles ( sorted , source . sources )
const result = concatSourceFiles ( sorted , sources )
await this . call ( 'fileManager' , 'writeFile' , ` ${ filePath } _flattened.sol ` , result )
await this . call ( 'fileManager' , 'writeFile' , ` ${ filePath } _flattened.sol ` , result )
return result
return result
}
}
@ -143,16 +167,19 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
. . . this ,
. . . this ,
updatedSvg : this.updatedSvg ,
updatedSvg : this.updatedSvg ,
loading : this.loading ,
loading : this.loading ,
themeSelected : this.currentlySelectedTheme
themeSelected : this.currentlySelectedTheme ,
themeName : this.themeName ,
themeCollection : this.themeCollection
} )
} )
}
}
updateComponent ( state : any ) {
updateComponent ( state : any ) {
return < RemixUiSolidityUmlGen
return < RemixUiSolidityUmlGen
plugin = { state }
updatedSvg = { state . updatedSvg }
updatedSvg = { state . updatedSvg }
loading = { state . loading }
loading = { state . loading }
themeSelected = { state . currentlySelectedTheme }
themeSelected = { state . currentlySelectedTheme }
themeName = { state . themeName }
themeCollection = { state . themeCollection }
/ >
/ >
}
}
}
}