add types and defaults.

apps/remix-ide/src/app/plugins/solidity-umlgen.tsx

@@ -27,7 +27,9 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   currentFile: string
   svgPayload: string
   updatedSvg: string
+  currentlySelectedTheme: string
   loading: boolean
+
   appManager: RemixAppManager
   dispatch: React.Dispatch<any> = () => {}
   constructor(appManager: RemixAppManager) {
@@ -36,6 +38,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
     this.svgPayload = ''
     this.updatedSvg = ''
     this.loading = false
+    this.currentlySelectedTheme = 'dark'
     this.appManager = appManager
     this.element = document.createElement('div')
     this.element.setAttribute('id', 'sol-uml-gen')
@@ -50,13 +53,42 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
           result = await this.flattenContract(source, this.currentFile, data)
         }
         const ast = result.length > 1 ? parser.parse(result) : parser.parse(source.sources[this.currentFile].content)
-        const payload = vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, this.currentFile)))
+        const umlClasses = convertAST2UmlClasses(ast, this.currentFile)
+        const umlDot = convertUmlClasses2Dot(umlClasses)
+        const payload = vizRenderStringSync(umlDot)
+        // const splitArtifact = payload.split('<!-- Title: UmlClassDiagram Pages: 1 -->\n')
+        // const modified = splitArtifact[1].replace(/<svg/g, '<svg style="background-color: pink;" ')
+        // splitArtifact[1] = modified
+        // const newsvg = splitArtifact[0].concat(splitArtifact[1])
+        // console.log({ newsvg })
+        console.log({ umlClasses, umlDot, payload })
+        this.call('fileManager', 'writeFile', `${this.currentFile}.svg`, payload)
         this.updatedSvg = payload
         this.renderComponent()
       } catch (error) {
         console.log({ error })
       }
     })
+    this.on('theme', 'themeChanged', (theme) => {
+      console.log('theme changed', {theme})
+      this.currentlySelectedTheme = theme.quality
+      this.renderComponent()
+    })
+  }
+
+  async mangleSvgPayload(svgPayload: string) : Promise<string> {
+    const parser = new DOMParser()
+    const themeQuality = await this.call('theme', 'currentTheme')
+    const parsedDocument = parser.parseFromString(svgPayload, 'image/svg+xml')
+    // const svgElement = parsedDocument.getElementsByTagName('polygon')[0]
+    // svgElement.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)'
+    const res = parsedDocument.documentElement
+    parsedDocument.bgColor = '#cccabc'
+    res.style.filter = themeQuality.quality === 'dark' ? 'invert(1)' : 'invert(0)'
+    const stringifiedSvg = new XMLSerializer().serializeToString(parsedDocument)
+    // themeQuality.quality === 'dark' ? svgElement.style.background = '#cccabc' : 'invert(0)'
+    console.log({ parsedDocument, themeQuality, stringifiedSvg })
+    return stringifiedSvg
   }
 
   onDeactivation(): void {
@@ -115,7 +147,12 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   }
 
   renderComponent () {
-    this.dispatch({...this, updatedSvg: this.updatedSvg, loading: this.loading })
+    this.dispatch({
+      ...this,
+      updatedSvg: this.updatedSvg,
+      loading: this.loading,
+      themeSelected: this.currentlySelectedTheme
+    })
   }
 
   updateComponent(state: any) {

apps/remix-ide/src/app/tabs/theme-module.js

@@ -53,7 +53,9 @@ 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 () {
     return this.themes[this.active]
   }

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+import { CustomTooltip } from '@remix-ui/helper'
+import React, { Fragment, useEffect, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import { ISolidityUmlGen } from '../types'
 import './css/solidity-uml-gen.css'
@@ -6,12 +7,15 @@ export interface RemixUiSolidityUmlGenProps {
   plugin?: ISolidityUmlGen
   updatedSvg?: string
   loading?: boolean
+  themeSelected?: string
 }
 
 type ButtonAction = {
   svgValid: () => boolean
   action: () => void
   buttonText: string
+  icon?: string
+  customcss?: string
 }
 
 interface ActionButtonsProps {
@@ -21,19 +25,26 @@ interface ActionButtonsProps {
 const ActionButtons = ({ buttons }: ActionButtonsProps) => (
   <>
     {buttons.map(btn => (
+      <CustomTooltip
+        key={btn.buttonText}
+        placement="top"
+        tooltipText={btn.buttonText}
+        tooltipId={btn.buttonText}
+      >
         <button
           key={btn.buttonText}
-        className="btn btn-primary btn-md ml-4 mt-4"
+          className={`btn btn-primary btn-sm rounded-circle ${btn.customcss}`}
           disabled={!btn.svgValid}
           onClick={btn.action}
         >
-        {btn.buttonText}
+          <i className={btn.icon}></i>
         </button>
+      </CustomTooltip>
     ))}
   </>
 )
 
-export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading }: RemixUiSolidityUmlGenProps) {
+export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelected }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
   const [validSvg, setValidSvg] = useState(false)
@@ -50,12 +61,14 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading }: RemixUiS
     { 
       buttonText: 'Download as PDF',
       svgValid: () => validSvg,
-      action: () => console.log('generated!!')
+      action: () => console.log('generated!!'),
+      icon: 'fa mr-1 pt-1 pb-1 fa-file'
     },
     { 
       buttonText: 'Download as PNG',
       svgValid: () => validSvg,
-      action: () => console.log('generated!!')
+      action: () => console.log('generated!!'),
+      icon: 'fa fa-picture-o'
     }
   ]
 
@@ -66,28 +79,42 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading }: RemixUiS
       <h3 className="h4 align-self-start"><p>Click on Generate UML</p></h3>
     </div>
   )
-  const Display = () => (
+  const Display = () => {
+    const invert = themeSelected === 'dark' ? 'invert(1)' : 'invert(0)'
+    return (
     <div className="d-flex flex-column justify-content-center align-items-center">
-      <div className="d-flex justify-center align-content-center mb-5">
+      <div id="umlImageHolder">
-        {/* <ActionButtons buttons={buttons}/> */}
-      </div>
-      <div id="umlImageHolder" className="justify-content-center align-items-center d-flex w-100">
         { validSvg && showViewer ? (
-          <TransformWrapper>
+          <TransformWrapper
+            initialScale={1}
+          >
+            {
+              ({ zoomIn, zoomOut, resetTransform }) => (
+                <Fragment>
+                  <div className="position-relative">
+                    <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-success" onClick={() => zoomIn()}>+</button>
+                    <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-warning" onClick={() => zoomOut()}>-</button>
+                    <button className="btn position-absolute top-0 end-100 translate-middle btn-sm mr-1 rounded-circle btn-danger" onClick={() => resetTransform()}>X</button>
+                    <ActionButtons buttons={buttons}/>
+                  </div>
                   <TransformComponent>
                     <img 
                       src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
-                width={900}
+                      width={950}
                       height={'auto'}
+                      style={{ filter: invert }}
                     />
                 </TransformComponent>
+                </Fragment>
+              )
+            }
           </TransformWrapper>
         ) : loading ? <div className="justify-content-center align-items-center d-flex  mx-auto my-auto">
             <i className="fas fa-spinner fa-spin fa-4x"></i>
           </div> : <DefaultInfo />}
       </div>
     </div>
-  )
+  )}
   return (<>
     { <Display /> }
     </>

libs/remix-ui/theme-module/types/theme-module.ts

@@ -43,4 +43,4 @@ export interface ThemeModule extends Plugin<any, any> {
     fixInvert(image?: any): void;
 }
 
-interface Theme { name: string, quality: string, url: string }
+export interface Theme { name: string, quality: string, url: string }