mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

setup zoom over image when hovered over

Browse Source
pull/3604/head
Joseph Izang 2 years ago
parent 0371a0b924
commit b2e8a45e02
4 changed files with 68 additions and 32 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
  2. 45
      libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
  3. 2
      package.json
  4. 22
      yarn.lock

31
apps/remix-ide/src/app/plugins/solidity-umlgen.tsx
Unescape View File

@ -25,16 +25,16 @@ const profile = {
}
const themeCollection = [
{ themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628'},
{ themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff'},
{ themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606'},
{ themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336'},
{ themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff'},
{ themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a'},
{ themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6'},
{ themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0'},
{ themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff'},
{ themeName: 'Candy', backgroundColor: '--body-bg', actualHex: '#d5efff'},
{ themeName: 'HackerOwl', backgroundColor: '--body-bg', actualHex: '#011628', dark: '#fff4fd'},
{ themeName: 'Cerulean', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#343a40'},
{ themeName: 'Cyborg', backgroundColor: '--body-bg', actualHex: '#060606', dark: '#adafae'},
{ themeName: 'Dark', backgroundColor: '--body-bg', actualHex: '#222336', dark: '#222336'},
{ themeName: 'Flatly', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#7b8a8b'},
{ themeName: 'Black', backgroundColor: '--body-bg', actualHex: '#1a1a1a', dark: '#1a1a1a'},
{ themeName: 'Light', backgroundColor: '--body-bg', actualHex: '#eef1f6', dark: '#f8fafe'},
{ themeName: 'Midcentuary', backgroundColor: '--body-bg', actualHex: '#DBE2E0', dark: '#01414E'},
{ themeName: 'Spacelab', backgroundColor: '--body-bg', actualHex: '#fff', dark: '#333'},
{ 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}
/>
}
}

45
libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
Unescape View File

@ -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,26 +101,27 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixU
return (
<div id="umlImageHolder" className="w-100 px-2 py-2 d-flex">
{ validSvg && showViewer ? (
<TransformWrapper
initialScale={1}
>
{
({ zoomIn, zoomOut, resetTransform }) => (
<Fragment>
<ActionButtons actions={{ zoomIn, zoomOut, resetTransform }} />
<TransformComponent contentStyle={{ zIndex: 2 }}>
<img
id="umlImage"
src={`data:image/svg+xml;base64,${final}`}
width={'100%'}
height={'auto'}
className="position-relative"
/>
</TransformComponent>
</Fragment>
)
}
</TransformWrapper>
<MagnifierContainer>
<TransformWrapper
initialScale={1}
>
{
({ zoomIn, zoomOut, resetTransform }) => (
<Fragment>
<ActionButtons actions={{ zoomIn, zoomOut, resetTransform }} />
<TransformComponent contentStyle={{ zIndex: 2 }}>
<GlassMagnifier
imageSrc={`data:image/svg+xml;base64,${final}`}
magnifierSize={300}
magnifierBorderSize={3}
magnifierBorderColor={themeDark}
/>
</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 />}

2
package.json
Unescape View File

@ -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",

22
yarn.lock
Unescape View File

@ -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"

Write Preview
Loading…
Cancel
Save