fixes. update core zoom library

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>) => (
+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', '')}
+      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,68 +72,67 @@ interface UmlDownloadProps {
 }
 
 export default function UmlDownload(props: UmlDownloadProps) {
-
   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'}
-            >
-                <div
-                  data-id='umlPngDownload'
+              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>
+                  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')
+          <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'}
-              >
-                <div
-                  data-id='umlPdfDownload'
+              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>
+                  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>
@@ -114,4 +141,3 @@ export default function UmlDownload(props: UmlDownloadProps) {
     </Fragment>
   )
 }
-

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

@@ -30,3 +30,8 @@
   width: auto;
   color: var(--text);
 }
+
+.uml-btn-icon {
+  width: 0.5rem;
+  height: 0.5rem;
+}

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>

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

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"