add reac-zoom-pan-pinch

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import Viewer from 'react-viewer'
 import { ISolidityUmlGen } from '../types'
 export interface RemixUiSolidityUmlGenProps {
   plugin?: ISolidityUmlGen
@@ -63,19 +62,10 @@ export function RemixUiSolidityUmlGen ({ plugin, updatedSvg }: RemixUiSolidityUm
         <ActionButtons buttons={buttons}/>
       </div>
       <div>
-        VIEWEERR
+        <img 
-        <Viewer
+          src={`data:image/svg+xml;base64,${btoa(plugin.updatedSvg ?? svgPayload)}`}
-          visible={showViewer}
+          width={800}
-          rotatable={false}
+          height={600}
-          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(plugin.updatedSvg ?? svgPayload)}`}]}
         />
       </div>
     </div>

package.json

@@ -188,6 +188,7 @@
     "react-multi-carousel": "^2.8.2",
     "react-router-dom": "^6.3.0",
     "react-tabs": "^3.2.2",
+    "react-zoom-pan-pinch": "^2.2.0",
     "regenerator-runtime": "0.13.7",
     "rss-parser": "^3.12.0",
     "signale": "^1.4.0",

yarn.lock

@@ -22964,6 +22964,11 @@ react-transition-group@^4.4.1:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-zoom-pan-pinch@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.2.0.tgz#15dd97aef798699016e4e30182cc51c4bddd4739"
+  integrity sha512-khOlTeTI/ZXtbCfqUmkKW0HpM+w0RklEQ1DlFVi0D9y90r+Z8x+ipKBXvPQC3rUu5VoYK4603SY8GsA6enfa8w==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"