From 6f703789ea86cf4b60c01b936e5ba897f81fd889 Mon Sep 17 00:00:00 2001 From: Joseph Izang Date: Fri, 23 Dec 2022 17:49:54 +0100 Subject: [PATCH] load svg in viewer. add pdf packages --- .../src/lib/contract-selection.tsx | 26 ++++++++++++++--- package.json | 2 ++ yarn.lock | 28 +++++++++++++++++++ 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx b/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx index 717939cf2c..3f5f10378c 100644 --- a/libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx +++ b/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))) - console.log({ svgResult }) + setSVGPayload(vizRenderStringSync(convertUmlClasses2Dot(convertAST2UmlClasses(ast, currentFile)))) + 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) => { } + setShowViewer(false)} + noFooter={true} + showTotal={false} + changeable={false} + zoomSpeed={0.2} + minScale={1} + images={[{src: `data:image/svg+xml;base64,${btoa(svgPayload)}`}]} + /> ) } diff --git a/package.json b/package.json index d4b4eed238..3730cb8e77 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 4c35c9c131..3ae9443361 100644 --- a/yarn.lock +++ b/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"