Merge pull request #3604 from ethereum/sol2uml-imagezoom-onhover

Setup Zoom On Mouse Hover

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

@@ -25,16 +25,16 @@ const profile = {
 }
 
 const themeCollection = [
-  { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628'},
+  { themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628', dark: '#fff4fd'},
-  { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff'},
+  { themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#343a40'},
-  { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606'},
+  { themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606', dark: '#adafae'},
-  { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336'},
+  { themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336', dark: '#222336'},
-  { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff'},
+  { themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#7b8a8b'},
-  { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a'},
+  { themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a', dark: '#1a1a1a'},
-  { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6'},
+  { themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6', dark: '#f8fafe'},
-  { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0'},
+  { themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0', dark: '#01414E'},
-  { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff'},
+  { themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#333'},
-  { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'},
+  { themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff', dark: '#645fb5'},
 ]
 
 /**
@@ -49,6 +49,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
   updatedSvg: string
   currentlySelectedTheme: string
   themeName: string
+  themeDark: string
   loading: boolean
   themeCollection: ThemeSummary[]
   triggerGenerateUml: boolean
@@ -95,8 +96,14 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
         console.log('error', error)
       }
     })
-    this.on('theme', 'themeChanged', (theme) => {
+    this.on('theme', 'themeChanged', async (theme) => {
       this.currentlySelectedTheme = theme.quality
+    const themeQuality: ThemeQualityType = await this.call('theme', 'currentTheme')
+      themeCollection.forEach((theme) => {
+        if (theme.themeName === themeQuality.name) {
+          this.themeDark = theme.dark
+        }
+      })
       this.renderComponent()
     })
   }
@@ -175,6 +182,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       loading: this.loading,
       themeSelected: this.currentlySelectedTheme,
       themeName: this.themeName,
+      themeDark: this.themeDark,
       fileName: this.currentFile,
       themeCollection: this.themeCollection
     })
@@ -188,6 +196,7 @@ export class SolidityUmlGen extends ViewPlugin implements ISolidityUmlGen {
       themeName={state.themeName}
       fileName={state.fileName}
       themeCollection={state.themeCollection}
+      themeDark={state.themeDark}
     />
   }
 }

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

@@ -1,5 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
+import { GlassMagnifier, MagnifierContainer } from 'react-image-magnifiers'
 import { ThemeSummary } from '../types'
 import UmlDownload from './components/UmlDownload'
 import './css/solidity-uml-gen.css'
@@ -9,6 +10,7 @@ export interface RemixUiSolidityUmlGenProps {
   loading?: boolean
   themeSelected?: string
   themeName: string
+  themeDark: string
   fileName: string
   themeCollection: ThemeSummary[]
 }
@@ -22,7 +24,7 @@ interface ActionButtonsProps {
 }
 
 let umlCopy = ''
-export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixUiSolidityUmlGenProps) {
+export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName, themeDark }: RemixUiSolidityUmlGenProps) {
   const [showViewer, setShowViewer] = useState(false)
   const [validSvg, setValidSvg] = useState(false)
   const umlDownloader = new UmlDownloadContext()
@@ -99,6 +101,7 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixU
     return (
       <div id="umlImageHolder" className="w-100 px-2 py-2 d-flex">
         { validSvg && showViewer ? (
+          <MagnifierContainer>
             <TransformWrapper
               initialScale={1}
             >
@@ -107,18 +110,19 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixU
                   <Fragment>
                     <ActionButtons actions={{ zoomIn, zoomOut, resetTransform }} />
                     <TransformComponent contentStyle={{ zIndex: 2 }}>
-                    <img
+                      <GlassMagnifier
-                      id="umlImage"
+                        imageSrc={`data:image/svg+xml;base64,${final}`}
-                      src={`data:image/svg+xml;base64,${final}`}
+                        magnifierSize={300}
-                      width={'100%'}
+                        magnifierBorderSize={3}
-                      height={'auto'}
+                        magnifierBorderColor={themeDark}
-                      className="position-relative"
+                        square 
                       />
                     </TransformComponent>
                   </Fragment>
                 )
               }
             </TransformWrapper>
+          </MagnifierContainer>
         ) : loading ? <div className="justify-content-center align-items-center d-flex  mx-auto my-auto">
             <i className="fas fa-spinner fa-spin fa-4x"></i>
           </div> : <DefaultInfo />}

package.json

@@ -184,6 +184,7 @@
     "react-bootstrap": "^1.6.4",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.4",
+    "react-image-magnifiers": "^1.4.0",
     "react-intl": "^6.0.4",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.5",
@@ -251,6 +252,7 @@
     "@types/react": "^17.0.24",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-dom": "^17.0.9",
+    "@types/react-image-magnifiers": "^1.3.2",
     "@types/react-router-dom": "^5.3.0",
     "@types/request": "^2.48.7",
     "@types/semver": "^7.3.10",

yarn.lock

@@ -6227,6 +6227,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-image-magnifiers@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@types/react-image-magnifiers/-/react-image-magnifiers-1.3.2.tgz#7c8f08105ee72b7a306d0d068916a9d53a49e3f9"
+  integrity sha512-hrs+OqwRNEh0gsQgXDvFmZ2xMimXZHSMtprkhxavwmep6iL2OwTPtLugzStj+7MVsfTaT1t8TlHE1jBq4ay9dQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-redux@^7.1.20":
   version "7.1.20"
   resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.20.tgz#42f0e61ababb621e12c66c96dda94c58423bd7df"
@@ -22238,6 +22245,21 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-image-magnifiers@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/react-image-magnifiers/-/react-image-magnifiers-1.4.0.tgz#0472e93491d5a199a278d4efc855f03542214601"
+  integrity sha512-ZszHusdsYteccKGysHXUOgLRGtHqfRYuG1koHh3VAvuhrzF4BEs1Ot5tSe1WA2v+EsjAEfYcrRyi/Is4QDD61A==
+  dependencies:
+    prop-types "^15.7.2"
+    react-input-position "^1.3.1"
+
+react-input-position@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/react-input-position/-/react-input-position-1.3.2.tgz#4e1f3b671eb41c0bd9f232846b94328263a7b65b"
+  integrity sha512-0RsvWZ+pBpFki1N4CF7dWWKgQpejQuf9qjrBVdXRE315kk6HBEVk1f8rsod6Rpo88vxPwj5FcBnn7ZlTNq+JRA==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-intl@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-6.0.4.tgz#635d7639aa7b70e837c75796535cf1d534016acf"