move types. Finish setting zoom buttons

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

@@ -3,7 +3,7 @@ import { ViewPlugin } from '@remixproject/engine-web'
 import React from 'react'
 // eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
 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 { concatSourceFiles, getDependencyGraph } from 'libs/remix-ui/solidity-compiler/src/lib/logic/flattenerUtilities'
 import { convertUmlClasses2Dot } from 'sol2uml/lib/converterClasses2Dot'
@@ -35,10 +35,6 @@ const themeCollection = [
   { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'},
 ]
 
-type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string }
-
-type ThemeSummary = { themeName: string, backgroundColor: string, actualHex: string }
-
 /**
  * add context menu which will offer download as pdf and download png.
  * add menu under the first download button to download
@@ -189,6 +185,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       loading={state.loading}
       themeSelected={state.currentlySelectedTheme}
       themeName={state.themeName}
+      themeCollection={state.themeCollection}
     />
   }
 }

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

@@ -1,7 +1,7 @@
 import { CustomTooltip } from '@remix-ui/helper'
 import React, { Fragment, useEffect, useRef, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
-import { ISolidityUmlGen } from '../types'
+import { ISolidityUmlGen, ThemeSummary } from '../types'
 import './css/solidity-uml-gen.css'
 export interface RemixUiSolidityUmlGenProps {
   plugin?: ISolidityUmlGen
@@ -9,6 +9,7 @@ export interface RemixUiSolidityUmlGenProps {
   loading?: boolean
   themeSelected?: string
   themeName: string
+  themeCollection: ThemeSummary[]
 }
 
 type ButtonAction = {
@@ -23,29 +24,8 @@ interface ActionButtonsProps {
   buttons: ButtonAction[]
 }
 
-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-sm rounded-circle ${btn.customcss}`}
-          disabled={!btn.svgValid}
-          onClick={btn.action}
-        >
-          <i className={`${btn.icon}`}></i>
-        </button>
-      </CustomTooltip>
-    ))}
-  </>
-)
 
-export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelected, themeName }: RemixUiSolidityUmlGenProps) {
+export function RemixUiSolidityUmlGen ({ updatedSvg, loading }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [svgPayload, setSVGPayload] = useState<string>('')
   const [validSvg, setValidSvg] = useState(false)
@@ -56,20 +36,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
   }
   , [updatedSvg])
 
-  const buttons: ButtonAction[] = [
-    { 
-      buttonText: 'Download as PDF',
-      svgValid: () => validSvg,
-      action: () => console.log('generated!!'),
-      icon: 'fa fa-file'
-    },
-    { 
-      buttonText: 'Download as PNG',
-      svgValid: () => validSvg,
-      action: () => console.log('generated!!!'),
-      icon: 'fa fa-picture-o'
-    }
-  ]
 
   const encoder = new TextEncoder()
   const data = encoder.encode(updatedSvg)
@@ -83,7 +49,6 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
     </div>
   )
   const Display = () => {
-    const invert = themeSelected === 'dark' ? 'invert(0.9)' : 'invert(0)'
     return (
       <div id="umlImageHolder" className="w-100 px-2 py-2 d-flex">
         { validSvg && showViewer ? (
@@ -96,7 +61,7 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg, loading, themeSelec
                   <div className="position-absolute bg-transparent rounded p-2" id="buttons"
                     style={{ zIndex: 3,  top: '10', right: '2em' }}
                   >
-                    <button className="btn btn-outline-info btn-sm rounded-circle mr-1" onClick={() => resetTransform()}>
+                    <button className="btn btn-outline-info d-none btn-sm rounded-circle mr-1" onClick={() => resetTransform()}>
                       <i className="far fa-arrow-to-bottom"></i>
                     </button>
                     <button className="btn btn-outline-info btn-sm rounded-circle mr-1" onClick={() => zoomIn()}>

libs/remix-ui/solidity-uml-gen/src/types/index.ts

@@ -1,4 +1,5 @@
 import { ViewPlugin } from '@remixproject/engine-web'
+import { customAction } from '@remixproject/plugin-api'
 import React from 'react'
 
 export interface ISolidityUmlGen extends ViewPlugin {
@@ -6,9 +7,22 @@ export interface ISolidityUmlGen extends ViewPlugin {
     currentFile: string
     svgPayload: string
     updatedSvg: string
+    currentlySelectedTheme: string
+    themeName: string
+    loading: boolean
+    themeCollection: ThemeSummary[]
     showUmlDiagram(path: string, svgPayload: string): void
     updateComponent(state: any): JSX.Element
     setDispatch(dispatch: React.Dispatch<any>): void
+    mangleSvgPayload(svgPayload: string) : Promise<string>
+    generateCustomAction(action: customAction): Promise<void>
+    flattenContract (source: any, filePath: string, data: any): Promise<string>
+    hideSpinner(): void
+    renderComponent (): void
 
     render(): JSX.Element
-}
+}
+
+export type ThemeQualityType = { name: string, quality: 'light' | 'dark', url: string }
+
+export type ThemeSummary = { themeName: string, backgroundColor: string, actualHex: string }