fixes. update core zoom library

2 years ago · 658c8dce2f
parent 639e5604db
commit 658c8dce2f
5 changed files with 112 additions and 81 deletions
--- a/libs/remix-ui/solidity-uml-gen/src/lib/components/UmlDownload.tsx
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/components/UmlDownload.tsx
@ -3,24 +3,51 @@ import React, { Fragment, Ref } from 'react'
 import { Dropdown } from 'react-bootstrap'
 import { UmlFileType } from '../utilities/UmlDownloadStrategy'

-const _paq = window._paq = window._paq || []
+const _paq = (window._paq = window._paq || [])

-export const Markup = React.forwardRef(({ children, onClick, icon, className = '' }: { children: React.ReactNode, 
-  onClick: (e) => void, icon: string, className: string }, ref: Ref<HTMLButtonElement>) => (
-  <button
-    ref={ref}
-    onClick={(e) => {
-      e.preventDefault()
-      onClick(e)
-    }}
-    className={className.replace('dropdown-toggle', '')}
-  >
-    <i className={icon}></i>
-  </button>
-))
+export const Markup = React.forwardRef(
+  (
+    {
+      children,
+      onClick,
+      icon,
+      className = "",
+    }: {
+      children: React.ReactNode
+      onClick: (e) => void
+      icon: string
+      className: string
+    },
+    ref: Ref<HTMLButtonElement>
+  ) => (
+    <button
+      ref={ref}
+      onClick={(e) => {
+        e.preventDefault()
+        onClick(e)
+      }}
+      className={className.replace("dropdown-toggle", "")}
+    >
+      <i className={icon}></i>
+    </button>
+  )
+)

 export const UmlCustomMenu = React.forwardRef(
-  ({ children, style, className, 'aria-labelledby': labeledBy }: { children: React.ReactNode, style?: React.CSSProperties, className: string, 'aria-labelledby'?: string }, ref: Ref<HTMLDivElement>) => {
+  (
+    {
+      children,
+      style,
+      className,
+      "aria-labelledby": labeledBy,
+    }: {
+      children: React.ReactNode
+      style?: React.CSSProperties
+      className: string
+      "aria-labelledby"?: string
+    },
+    ref: Ref<HTMLDivElement>
+  ) => {
    const height = window.innerHeight * 0.6
    return (
      <div
@ -29,14 +56,15 @@ export const UmlCustomMenu = React.forwardRef(
        className={className}
        aria-labelledby={labeledBy}
      >
-        <ul className="overflow-auto list-unstyled mb-0" style={{ maxHeight: height+'px' }}>
-          {
-           children
-          }
+        <ul
+          className="overflow-auto list-unstyled mb-0"
+          style={{ maxHeight: height + "px" }}
+        >
+          {children}
        </ul>
      </div>
    )
-  },
+  }
 )

 interface UmlDownloadProps {
@ -44,74 +72,72 @@ interface UmlDownloadProps {
 }

 export default function UmlDownload(props: UmlDownloadProps) {
-
-  return(
+  return (
    <Fragment>
      <Dropdown id="solUmlMenuDropdown">
        <Dropdown.Toggle
-          icon="far fa-arrow-to-bottom align-item-center d-flex justify-content-center"
+          icon="far fa-arrow-to-bottom uml-btn-icon"
          as={Markup}
          className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
-        >
-        </Dropdown.Toggle>
+        ></Dropdown.Toggle>
        <Dropdown.Menu as={UmlCustomMenu} className="custom-dropdown-items">
          <Dropdown.Item
            onClick={() => {
-              _paq.push(['trackEvent', 'solidityumlgen', 'download', 'downloadAsPng'])
-              props.download('png')
+              _paq.push([
+                "trackEvent",
+                "solidityumlgen",
+                "download",
+                "downloadAsPng",
+              ]);
+              props.download("png")
            }}
          >
            <CustomTooltip
-                placement="left-start"
-                tooltipId="solUmlgenDownloadAsPngTooltip"
-                tooltipClasses="text-nowrap"
-                tooltipText={'Download UML diagram as a PNG file'}
+              placement="left-start"
+              tooltipId="solUmlgenDownloadAsPngTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={"Download UML diagram as a PNG file"}
            >
-                <div
-                  data-id='umlPngDownload'
-                >
-                  <span
-                    id='umlPngDownloadBtn'
-                    data-id='umlPngDownload'
-                    className='far fa-image pl-2'
-                  >
-                  </span>
-                  <span className="pl-1">
-                    Download as PNG
-                  </span>
-                </div>
-              </CustomTooltip>
-            </Dropdown.Item>
-            <Dropdown.Divider />
-            <Dropdown.Item onClick={() => {
-                _paq.push(['trackEvent', 'solUmlgen', 'download', 'downloadAsPdf'])
-                props.download('pdf')
-              }}
+              <div data-id="umlPngDownload">
+                <span
+                  id="umlPngDownloadBtn"
+                  data-id="umlPngDownload"
+                  className="far fa-image pl-2"
+                ></span>
+                <span className="pl-1">Download as PNG</span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item
+            onClick={() => {
+              _paq.push([
+                "trackEvent",
+                "solUmlgen",
+                "download",
+                "downloadAsPdf",
+              ]);
+              props.download("pdf")
+            }}
+          >
+            <CustomTooltip
+              placement="left-start"
+              tooltipId="solUmlgenDownloadAsPdfTooltip"
+              tooltipClasses="text-nowrap"
+              tooltipText={"Download UML diagram as a PDF file"}
            >
-              <CustomTooltip
-                  placement="left-start"
-                  tooltipId="solUmlgenDownloadAsPdfTooltip"
-                  tooltipClasses="text-nowrap"
-                  tooltipText={'Download UML diagram as a PDF file'}
-              >
-                <div
-                  data-id='umlPdfDownload'
-                >
-                  <span
-                    id='umlPdfDownloadBtn'
-                    data-id='umlPdfDownload'
-                    className='far fa-file-pdf pl-2'
-                  >
-                  </span>
-                  <span className="pl-2">
-                    Download as PDF
-                  </span>
-                </div>
-              </CustomTooltip>
-            </Dropdown.Item>
+              <div data-id="umlPdfDownload">
+                <span
+                  id="umlPdfDownloadBtn"
+                  data-id="umlPdfDownload"
+                  className="far fa-file-pdf pl-2"
+                ></span>
+                <span className="pl-2">Download as PDF</span>
+              </div>
+            </CustomTooltip>
+          </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </Fragment>
  )
 }
-
--- a/libs/remix-ui/solidity-uml-gen/src/lib/css/solidity-uml-gen.css
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/css/solidity-uml-gen.css
@ -29,4 +29,9 @@
  padding: 0.25rem 0.25rem;
  width: auto;
  color: var(--text);
+}
+
+.uml-btn-icon {
+  width: 0.5rem;
+  height: 0.5rem;
 }
--- a/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
+++ b/libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx
@ -62,19 +62,19 @@ export function RemixUiSolidityUmlGen ({ updatedSvg, loading, fileName }: RemixU
              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
              onClick={() => zoomIn()}
            >
-              <i className="far fa-plus "></i>
+              <i className="far fa-plus uml-btn-icon"></i>
            </button>
            <button
              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
              onClick={() => zoomOut()}
            >
-              <i className="far fa-minus align-item-center d-flex justify-content-center"></i>
+              <i className="far fa-minus uml-btn-icon"></i>
            </button>
            <button
              className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"
              onClick={() => resetTransform()}
            >
-              <i className="far fa-undo align-item-center d-flex justify-content-center"></i>
+              <i className="far fa-undo uml-btn-icon"></i>
            </button>
          </div>
        </div>
--- a/package.json
+++ b/package.json
@ -189,7 +189,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",
+    "react-zoom-pan-pinch": "^3.0.2",
    "regenerator-runtime": "0.13.7",
    "rss-parser": "^3.12.0",
    "signale": "^1.4.0",
--- a/yarn.lock
+++ b/yarn.lock
@ -21937,10 +21937,10 @@ 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-zoom-pan-pinch@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-3.0.2.tgz#706c67e875e9a30480cdbef8dd4e3d6fdac9921c"
+  integrity sha512-c8BxPl/zK6RiOYrV/xBQ+ebgZpsMvbz6WOoqv2P/1QWxGCk1+q3xWF+5ub4QYasv4W8+J6vSelOR8H0WCEbL4w==

 react@^17.0.2:
  version "17.0.2"