context menu

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

@@ -10,6 +10,7 @@ import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot'
 import { convertAST2UmlClasses } from 'sol2uml/lib/converterAST2Classes'
 import vizRenderStringSync from '@aduh95/viz.js/sync'
 import { PluginViewWrapper } from '@remix-ui/helper'
+import { customAction, customActionType } from '@remixproject/plugin-api'
 const parser = (window as any).SolidityParser
 
 const profile = {
@@ -17,7 +18,7 @@ const profile = {
     displayName: 'Solidity UML Generator',
     description: 'Generate UML diagram in svg format from last compiled contract',
     location: 'mainPanel',
-    methods: ['showUmlDiagram', 'generateUml'],
+    methods: ['showUmlDiagram', 'generateUml', 'generateCustomAction'],
     events: [],
 }
 
@@ -47,6 +48,10 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       this.amIActivated = false
   }
 
+  generateCustomAction = async (action: customAction) => {
+    this.generateUml(action.path[0])
+  }
+
   generateUml(currentFile: string) {
     this.call('solidity', 'compile', currentFile)
     this.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {

apps/remix-ide/src/remixAppManager.js

@@ -176,6 +176,16 @@ export class RemixAppManager extends PluginManager {
       pattern: [],
       sticky: true
     })
+    await this.call('filePanel', 'registerContextMenuItem', {
+      id: 'solidityumlgen',
+      name: 'generateCustomAction',
+      label: 'generate UML',
+      type: [],
+      extension: ['.sol'],
+      path: [],
+      pattern: [],
+      sticky: true
+    })
   }
 }
 

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

@@ -34,23 +34,26 @@ const ActionButtons = ({ buttons }: ActionButtonsProps) => (
 export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
+  const [validSvg, setValidSvg] = useState(false)
 
-  const validSvg = () => {
-    if (updatedSvg.startsWith('<?xml') && updatedSvg.includes('<svg')) {
-      return true
-    }
-    return false
+
+
+  useEffect(() => {
+    console.log('updatedSvg updated') 
+    setValidSvg (updatedSvg.startsWith('<?xml') && updatedSvg.includes('<svg')) 
+    setShowViewer(updatedSvg.startsWith('<?xml') && updatedSvg.includes('<svg'))
   }
+  , [updatedSvg])
 
   const buttons: ButtonAction[] = [
     { 
       buttonText: 'Download as PDF',
-      svgValid: validSvg,
+      svgValid: () => validSvg,
       action: () => console.log('generated!!')
     },
     { 
       buttonText: 'Download as PNG',
-      svgValid: validSvg,
+      svgValid: () => validSvg,
       action: () => console.log('generated!!')
     }
   ]
@@ -60,6 +63,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUm
         <ActionButtons buttons={buttons}/>
       </div>
       <div>
+        VIEWEERR
         <Viewer
           visible={showViewer}
           rotatable={false}
@@ -77,7 +81,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUm
     </div>
   )
   return (<>
-    { validSvg() ? <Display /> : null }
+    { <Display /> }
     </>
   )
 }

libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx

@@ -126,9 +126,6 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
               deletePath(getPath())
               _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'deleteAll'])
               break
-            case 'Generate uml diagram':
-              generateUml(path)
-              break
             default:
               _paq.push(['trackEvent', 'fileExplorer', 'customAction', `${item.id}/${item.name}`])
               emit && emit({ ...item, path: [path] } as customAction)

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -447,33 +447,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }   
   }
 
-  /**
-   * Take AST and generates a UML diagram of compiled contract as svg
-   * @returns void
-   */
-  const generateUml = async (path: string) => {
-    // try {
-    //   const currentFile = path
-    //   let ast: any
-    //   plugin.call('solidity', 'compile', path)
-    //   plugin.on('solidity', 'compilationFinished', async (file, source, languageVersion, data, input, version) => {
-    //     if (data.sources && Object.keys(data.sources).length > 1) { // we should flatten first as there are multiple asts
-    //       flattenContract(source, currentFile, data)
-    //     }
-    //     ast = contentForAST.length > 1 ? parser.parse(contentForAST) : parser.parse(source.sources[currentFile].content)
-    //     const payload = vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, currentFile)))
-    //     const fileName = `${currentFile.split('/')[0]}/resources/${currentFile.split('/')[1].split('.')[0]}.svg`
-    //     plugin.call('fileManager', 'writeFile', fileName, payload)
-    //     if (!await plugin.appManager.isActive('solidityumlgen')) await plugin.appManager.activatePlugin('solidityumlgen')
-    //     plugin.call('solidityumlgen', 'showUmlDiagram', fileName, payload)
-    //   })
-    // } catch (error) {
-    //   console.log({ error })
-    // }
-    if (!await plugin.appManager.isActive('solidityumlgen')) await plugin.appManager.activatePlugin('solidityumlgen')
-    await plugin.call('solidityumlgen', 'generateUml', path)
-  }
-
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
     <div ref={treeRef} tabIndex={0} style={{ outline: "none" }}>
@@ -541,7 +514,6 @@ export const FileExplorer = (props: FileExplorerProps) => {
           pushChangesToGist={pushChangesToGist}
           publishFolderToGist={publishFolderToGist}
           publishFileToGist={publishFileToGist}
-          generateUml={generateUml}
         />
       }
     </div>

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -32,12 +32,6 @@ export const contextMenuActions: MenuItems = [{
   label: ''
 },
 {
-  id: 'generate',
-  name: 'Generate uml diagram',
-  extension: ['.sol'],
-  multiselect: false,
-  label: ''
-}, {
   id: 'pushChangesToGist',
   name: 'Push changes to gist',
   type: ['gist'],