load svg in viewer. add pdf packages

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -12,6 +12,7 @@ import vizRenderStringSync from '@aduh95/viz.js/sync'
 import './css/style.css'
 import { CustomTooltip } from '@remix-ui/helper'
 import { concatSourceFiles, getDependencyGraph } from './logic/flattenerUtilities'
+import Viewer from 'react-viewer'
 
 
 
@@ -20,6 +21,9 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   const { api, compiledFileName, contractsDetails, contractList, compilerInput, modal } = props
   const [selectedContract, setSelectedContract] = useState('')
   const [storage, setStorage] = useState(null)
+  const [svgPayload, setSVGPayload] = useState('')
+  const [showViewer, setShowViewer] = useState(false)
+  const [content4AST, setContent4AST] = useState('')
 
   const intl = useIntl()
 
@@ -202,7 +206,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
   /**
    * Local property to hold flattend contract result
    */
-  let content4AST: string
+  // let content4AST: string
 
   /**
    * Take AST and generates a UML diagram of compiled contract as svg
@@ -212,8 +216,8 @@ export const ContractSelection = (props: ContractSelectionProps) => {
     try {
       const currentFile = api.currentFile
       const ast = content4AST.length > 1 ? parser.parse(content4AST) : parser.parse(api.getCompilationResult().source.sources[currentFile].content)
-      const svgResult = vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, currentFile)))
+      setSVGPayload(vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, currentFile))))
-      console.log({ svgResult })
+      setShowViewer(!showViewer)
     } catch (error) {
       console.log({ error })
     }
@@ -233,9 +237,10 @@ export const ContractSelection = (props: ContractSelectionProps) => {
         ? [filePath]
         : dependencyGraph.sort().reverse()
     const sources = api.getCompilationResult().source.sources
-    content4AST = concatSourceFiles(sorted, sources)
+    setContent4AST(concatSourceFiles(sorted, sources))
   }
 
+
   return (
     // define swarm logo
     <>
@@ -330,6 +335,19 @@ export const ContractSelection = (props: ContractSelectionProps) => {
         </article></section>
       }
       <PublishToStorage api={api} storage={storage} contract={contractsDetails[selectedContract]} resetStorage={resetStorage} />
+        <Viewer
+          visible={showViewer}
+          rotatable={false}
+          loop={false}
+          noClose={false}
+          onClose={() => setShowViewer(false)}
+          noFooter={true}
+          showTotal={false}
+          changeable={false}
+          zoomSpeed={0.2}
+          minScale={1}
+          images={[{src: `data:image/svg+xml;base64,${btoa(svgPayload)}`}]}
+        />
     </>
   )
 }

package.json

@@ -169,6 +169,7 @@
     "isomorphic-git": "^1.8.2",
     "jquery": "^3.3.1",
     "js-yaml": "^4.1.0",
+    "jspdf": "^2.5.1",
     "jszip": "^3.6.0",
     "latest-version": "^5.1.0",
     "merge": "^2.1.1",
@@ -194,6 +195,7 @@
     "signale": "^1.4.0",
     "sol2uml": "^2.4.2",
     "string-similarity": "^4.0.4",
+    "svg2pdf.js": "^2.2.1",
     "swarmgw": "^0.3.1",
     "time-stamp": "^2.2.0",
     "toml": "^3.0.0",

yarn.lock

@@ -9694,6 +9694,19 @@ caniuse-lite@^1.0.30001400:
   version "1.0.30001412"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001412.tgz#30f67d55a865da43e0aeec003f073ea8764d5d7c"
   integrity sha512-+TeEIee1gS5bYOiuf+PS/kp2mrXic37Hl66VY6EAfxasIk5fELTktK2oOezYed12H8w7jt3s512PpulQidPjwA==
+canvg@^3.0.6:
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/canvg/-/canvg-3.0.10.tgz#8e52a2d088b6ffa23ac78970b2a9eebfae0ef4b3"
+  integrity sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@types/raf" "^3.4.0"
+    core-js "^3.8.3"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.7"
+    rgbcolor "^1.0.1"
+    stackblur-canvas "^2.0.0"
+    svg-pathdata "^6.0.3"
 
 canvg@^3.0.6:
   version "3.0.10"
@@ -13808,6 +13821,11 @@ follow-redirects@^1.15.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
   integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
 
+font-family-papandreou@^0.2.0-patch1:
+  version "0.2.0-patch2"
+  resolved "https://registry.yarnpkg.com/font-family-papandreou/-/font-family-papandreou-0.2.0-patch2.tgz#c75b659e96ffbc7ab2af651cf7b4910b334e8dd2"
+  integrity sha512-l/YiRdBSH/eWv6OF3sLGkwErL+n0MqCICi9mppTZBOCL5vixWGDqCYvRcuxB2h7RGCTzaTKOHT2caHvCXQPRlw==
+
 for-each@~0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
@@ -24829,6 +24847,11 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+specificity@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
+  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
@@ -25441,6 +25464,11 @@ svgo@^2.7.0, svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+svgpath@^2.3.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/svgpath/-/svgpath-2.6.0.tgz#5b160ef3d742b7dfd2d721bf90588d3450d7a90d"
+  integrity sha512-OIWR6bKzXvdXYyO4DK/UWa1VA1JeKq8E+0ug2DG98Y/vOmMpfZNj+TIG988HjfYSqtcy/hFOtZq/n/j5GSESNg==
+
 swarm-js@^0.1.40:
   version "0.1.40"
   resolved "https://registry.yarnpkg.com/swarm-js/-/swarm-js-0.1.40.tgz#b1bc7b6dcc76061f6c772203e004c11997e06b99"